diff --git a/.eslintrc.js b/.eslintrc.js
index 4385f528f44db..211ddd9bc3586 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -177,6 +177,8 @@ module.exports = {
 		'@wordpress/dependency-group': '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',
 			{
@@ -214,6 +216,12 @@ module.exports = {
 			},
 		],
 		'no-restricted-syntax': [ 'error', ...restrictedSyntax ],
+		'jsdoc/check-tag-names': [
+			'error',
+			{
+				definedTags: [ 'jest-environment' ],
+			},
+		],
 	},
 	overrides: [
 		{
@@ -278,10 +286,9 @@ module.exports = {
 			},
 		},
 		{
-			// Temporary rules until we're ready to officially deprecate the bottom margins.
 			files: [ 'packages/*/src/**/*.[tj]s?(x)' ],
 			excludedFiles: [
-				'packages/components/src/**/@(test|stories)/**',
+				'packages/*/src/**/@(test|stories)/**',
 				'**/*.@(native|ios|android).js',
 			],
 			rules: {
@@ -289,12 +296,20 @@ module.exports = {
 					'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"]))`,
@@ -302,6 +317,42 @@ module.exports = {
 							componentName +
 							' should have the `__nextHasNoMarginBottom` prop to opt-in to the new margin-free styles.',
 					} ) ),
+					// Temporary rules until we're ready to officially default to the new size.
+					...[
+						'BorderBoxControl',
+						'BorderControl',
+						'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.',
+					},
 				],
 			},
 		},
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index e5f958eb9e9d8..2ec03cba722c6 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1,5 +1,5 @@
 # Documentation
-/docs                                           @ajitbohra @ryanwelcher @juanmaguitar @fabiankaegy @ndiego
+/docs                                           @ajitbohra @juanmaguitar @fabiankaegy @ndiego
 /packages/interactivity/docs                    @juanmaguitar
 
 # Schemas
@@ -119,9 +119,9 @@
 /packages/plugins                               @gziolo @adamsilverstein
 
 # Rich Text
-/packages/format-library                        @ellatrix @dcalhoun
-/packages/rich-text                             @ellatrix @dcalhoun
-/packages/block-editor/src/components/rich-text @ellatrix @dcalhoun
+/packages/format-library                        @ellatrix
+/packages/rich-text                             @ellatrix
+/packages/block-editor/src/components/rich-text @ellatrix
 
 # Project Management
 /.github                                        @desrosj
diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml
index f9fa22d324d77..0f813267b586b 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:
@@ -69,7 +72,7 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   token: ${{ secrets.GUTENBERG_TOKEN }}
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
@@ -165,13 +168,13 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   ref: ${{ needs.bump-version.outputs.release_branch || github.ref }}
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Use desired version of Node.js
-              uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+              uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
               with:
                   node-version-file: '.nvmrc'
                   check-latest: true
@@ -222,7 +225,7 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   fetch-depth: 2
                   ref: ${{ needs.bump-version.outputs.release_branch }}
@@ -270,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@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+              uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
               with:
                   name: gutenberg-plugin
 
             - name: Download Release Notes Artifact
-              uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+              uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
               with:
                   name: release-notes
 
@@ -311,14 +314,14 @@ jobs:
         if: ${{ endsWith( needs.bump-version.outputs.new_version, '-rc.1' ) }}
         steps:
             - name: Checkout (for CLI)
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   path: main
                   ref: trunk
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Checkout (for publishing)
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   path: publish
                   # Later, we switch this branch in the script that publishes packages.
@@ -333,7 +336,7 @@ jobs:
                   git config user.email gutenberg@wordpress.org
 
             - name: Setup Node.js
-              uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+              uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
               with:
                   node-version-file: 'main/.nvmrc'
                   registry-url: 'https://registry.npmjs.org'
diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml
index a0b7d773f5549..2de66f77e3918 100644
--- a/.github/workflows/bundle-size.yml
+++ b/.github/workflows/bundle-size.yml
@@ -37,20 +37,20 @@ jobs:
         runs-on: ubuntu-latest
 
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   fetch-depth: 1
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Use desired version of Node.js
-              uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+              uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
               with:
                   node-version-file: '.nvmrc'
                   check-latest: true
                   cache: npm
 
-            - uses: preactjs/compressed-size-action@f780fd104362cfce9e118f9198df2ee37d12946c # v2.6.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
index 606ca4c91683c..cf07b1a3936b9 100644
--- a/.github/workflows/check-backport-changelog.yml
+++ b/.github/workflows/check-backport-changelog.yml
@@ -1,4 +1,4 @@
-name: Verify Core Backport Changlog
+name: Verify Core Backport Changelog
 
 on:
     pull_request:
@@ -22,7 +22,7 @@ jobs:
         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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   ref: ${{ github.event.pull_request.head.ref }}
                   repository: ${{ github.event.pull_request.head.repo.full_name }}
diff --git a/.github/workflows/check-components-changelog.yml b/.github/workflows/check-components-changelog.yml
index 1f6863b4a486e..40fbfe22bea56 100644
--- a/.github/workflows/check-components-changelog.yml
+++ b/.github/workflows/check-components-changelog.yml
@@ -22,7 +22,7 @@ jobs:
             - name: 'Get PR commit count'
               run: echo "PR_COMMIT_COUNT=$(( ${{ github.event.pull_request.commits }} + 1 ))" >> "${GITHUB_ENV}"
             - name: Checkout code
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   ref: ${{ github.event.pull_request.head.ref }}
                   repository: ${{ github.event.pull_request.head.repo.full_name }}
diff --git a/.github/workflows/cherry-pick-wp-release.yml b/.github/workflows/cherry-pick-wp-release.yml
index b43b0cc267314..11688a7cfba98 100644
--- a/.github/workflows/cherry-pick-wp-release.yml
+++ b/.github/workflows/cherry-pick-wp-release.yml
@@ -70,7 +70,7 @@ jobs:
 
             - name: Checkout repository
               if: env.cherry_pick == 'true'
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   token: ${{ secrets.GUTENBERG_TOKEN }}
                   fetch-depth: 0
diff --git a/.github/workflows/create-block.yml b/.github/workflows/create-block.yml
index 245b136ee22c1..d20b3e353c31e 100644
--- a/.github/workflows/create-block.yml
+++ b/.github/workflows/create-block.yml
@@ -14,28 +14,24 @@ concurrency:
 
 jobs:
     checks:
-        name: Checks w/Node.js ${{ matrix.node.name }} on ${{ matrix.os }}
+        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:
-                    - name: 20
-                      version: 20
-                    - name: 22
-                      version: 22.4
+                node: ['20', '22']
                 os: ['macos-latest', 'ubuntu-latest', 'windows-latest']
 
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Setup Node.js and install dependencies
               uses: ./.github/setup-node
               with:
-                  node-version: ${{ matrix.node.version }}
+                  node-version: ${{ matrix.node }}
 
             - name: Create block
               shell: bash
diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml
index 6233b36d435bf..bbf033222a4b3 100644
--- a/.github/workflows/end2end-test.yml
+++ b/.github/workflows/end2end-test.yml
@@ -27,7 +27,7 @@ jobs:
                 totalParts: [8]
 
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
@@ -102,12 +102,12 @@ jobs:
         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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   ref: trunk
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
-            - uses: actions/download-artifact@v4.1.7
+            - 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:
diff --git a/.github/workflows/enforce-pr-labels.yml b/.github/workflows/enforce-pr-labels.yml
index 093eb9a325e36..7493459a6ff35 100644
--- a/.github/workflows/enforce-pr-labels.yml
+++ b/.github/workflows/enforce-pr-labels.yml
@@ -12,7 +12,7 @@ jobs:
               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'
+                  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/gradle-wrapper-validation.yml b/.github/workflows/gradle-wrapper-validation.yml
index 8cc11b9bd913b..4715e1e09c2b8 100644
--- a/.github/workflows/gradle-wrapper-validation.yml
+++ b/.github/workflows/gradle-wrapper-validation.yml
@@ -6,7 +6,7 @@ jobs:
         name: 'Validation'
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
             - uses: gradle/wrapper-validation-action@v3
diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml
index 288bef1580038..9c4bee3af473c 100644
--- a/.github/workflows/performance.yml
+++ b/.github/workflows/performance.yml
@@ -33,7 +33,7 @@ jobs:
             WP_ARTIFACTS_PATH: ${{ github.workspace }}/artifacts
 
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
@@ -69,13 +69,13 @@ jobs:
             - name: Compare performance with base branch
               if: github.event_name == 'push'
               # The base hash used here need to be a commit that is compatible with the current WP version
-              # The current one is 9725060a5b18904c6cc5fdbe4b06fbde7419e02c and it needs to be updated every WP major release.
+              # The current one is 5f4c9c853b15092ed885d5280edefb973c37d9e9 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 9725060a5b18904c6cc5fdbe4b06fbde7419e02c --tests-branch $GITHUB_SHA --wp-version "$WP_MAJOR"
+                  ./bin/plugin/cli.js perf $GITHUB_SHA 5f4c9c853b15092ed885d5280edefb973c37d9e9 --tests-branch $GITHUB_SHA --wp-version "$WP_MAJOR"
 
             - name: Compare performance with custom branches
               if: github.event_name == 'workflow_dispatch'
@@ -101,7 +101,7 @@ jobs:
                   CODEHEALTH_PROJECT_TOKEN: ${{ secrets.CODEHEALTH_PROJECT_TOKEN }}
               run: |
                   COMMITTED_AT=$(git show -s $GITHUB_SHA --format="%cI")
-                  ./bin/log-performance-results.js $CODEHEALTH_PROJECT_TOKEN trunk $GITHUB_SHA 9725060a5b18904c6cc5fdbe4b06fbde7419e02c $COMMITTED_AT
+                  ./bin/log-performance-results.js $CODEHEALTH_PROJECT_TOKEN trunk $GITHUB_SHA 5f4c9c853b15092ed885d5280edefb973c37d9e9 $COMMITTED_AT
 
             - name: Archive debug artifacts (screenshots, HTML snapshots)
               uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
diff --git a/.github/workflows/props-bot.yml b/.github/workflows/props-bot.yml
index 0f21f47ef14f9..b2332aabb816c 100644
--- a/.github/workflows/props-bot.yml
+++ b/.github/workflows/props-bot.yml
@@ -18,7 +18,7 @@ on:
     # You cannot filter this event for PR comments only.
     # However, the logic below does short-circuit the workflow for issues.
     issue_comment:
-        type:
+        types:
             - created
     # This event will run everytime a new PR review is initially submitted.
     pull_request_review:
diff --git a/.github/workflows/publish-npm-packages.yml b/.github/workflows/publish-npm-packages.yml
index 31df5a1575fa8..66f8130ece2f0 100644
--- a/.github/workflows/publish-npm-packages.yml
+++ b/.github/workflows/publish-npm-packages.yml
@@ -31,7 +31,7 @@ jobs:
         steps:
             - name: Checkout (for CLI)
               if: ${{ github.event.inputs.release_type != 'wp' }}
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   path: cli
                   ref: trunk
@@ -39,7 +39,7 @@ jobs:
 
             - name: Checkout (for publishing)
               if: ${{ github.event.inputs.release_type != 'wp' }}
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   path: publish
                   # Later, we switch this branch in the script that publishes packages.
@@ -49,7 +49,7 @@ jobs:
 
             - name: Checkout (for publishing WP major version)
               if: ${{ github.event.inputs.release_type == 'wp' && github.event.inputs.wp_version }}
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   path: publish
                   ref: wp/${{ github.event.inputs.wp_version }}
@@ -67,7 +67,7 @@ jobs:
 
             - name: Setup Node.js
               if: ${{ github.event.inputs.release_type != 'wp' }}
-              uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+              uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
               with:
                   node-version-file: 'cli/.nvmrc'
                   registry-url: 'https://registry.npmjs.org'
@@ -75,7 +75,7 @@ jobs:
 
             - name: Setup Node.js (for WP major version)
               if: ${{ github.event.inputs.release_type == 'wp' && github.event.inputs.wp_version }}
-              uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+              uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
               with:
                   node-version-file: 'publish/.nvmrc'
                   registry-url: 'https://registry.npmjs.org'
diff --git a/.github/workflows/pull-request-automation.yml b/.github/workflows/pull-request-automation.yml
index d7177ab216b7e..2006eafd81cc7 100644
--- a/.github/workflows/pull-request-automation.yml
+++ b/.github/workflows/pull-request-automation.yml
@@ -12,13 +12,13 @@ jobs:
         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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   ref: trunk
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Use desired version of Node.js
-              uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+              uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
               with:
                   node-version-file: '.nvmrc'
                   check-latest: true
diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml
index 23c1134c1417a..9392ba100af71 100644
--- a/.github/workflows/rnmobile-android-runner.yml
+++ b/.github/workflows/rnmobile-android-runner.yml
@@ -23,12 +23,12 @@ jobs:
 
         steps:
             - name: checkout
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Use desired version of Java
-              uses: actions/setup-java@99b8673ff64fbf99d8d325f52d9a5bdedb8483e9 # v4.2.1
+              uses: actions/setup-java@b36c23c0d998641eff861008f374ee103c25ac73 # v4.4.0
               with:
                   distribution: 'corretto'
                   java-version: '17'
@@ -47,7 +47,7 @@ jobs:
               run: npm run native test:e2e:setup
 
             - name: Gradle cache
-              uses: gradle/actions/setup-gradle@dbbdc275be76ac10734476cc723d82dfe7ec6eda # v3.4.2
+              uses: gradle/actions/setup-gradle@d156388eb19639ec20ade50009f3d199ce1e2808 # v4.1.0
 
             - name: AVD cache
               uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
@@ -60,7 +60,7 @@ jobs:
 
             - name: Create AVD and generate snapshot for caching
               if: steps.avd-cache.outputs.cache-hit != 'true'
-              uses: reactivecircus/android-emulator-runner@77986be26589807b8ebab3fde7bbf5c60dabec32 # v2.31.0
+              uses: reactivecircus/android-emulator-runner@f0d1ed2dcad93c7479e8b2f2226c83af54494915 # v2.32.0
               with:
                   api-level: ${{ matrix.api-level }}
                   force-avd-creation: false
@@ -71,7 +71,7 @@ jobs:
                   script: echo "Generated AVD snapshot for caching."
 
             - name: Run tests
-              uses: reactivecircus/android-emulator-runner@77986be26589807b8ebab3fde7bbf5c60dabec32 # v2.31.0
+              uses: reactivecircus/android-emulator-runner@f0d1ed2dcad93c7479e8b2f2226c83af54494915 # v2.32.0
               with:
                   api-level: ${{ matrix.api-level }}
                   force-avd-creation: false
diff --git a/.github/workflows/rnmobile-ios-runner.yml b/.github/workflows/rnmobile-ios-runner.yml
index c25b3e17c54b1..cf065ad1cdf7d 100644
--- a/.github/workflows/rnmobile-ios-runner.yml
+++ b/.github/workflows/rnmobile-ios-runner.yml
@@ -23,11 +23,11 @@ jobs:
                 native-test-name: [gutenberg-editor-rendering]
 
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
-            - uses: ruby/setup-ruby@3783f195e29b74ae398d7caca108814bbafde90e # v1.180.1
+            - uses: ruby/setup-ruby@c04af2bb7258bb6a03df1d3c1865998ac9390972 # v1.194.0
               with:
                   # `.ruby-version` file location
                   working-directory: packages/react-native-editor/ios
diff --git a/.github/workflows/static-checks.yml b/.github/workflows/static-checks.yml
index 030e338ec81da..1af2bb0ec7927 100644
--- a/.github/workflows/static-checks.yml
+++ b/.github/workflows/static-checks.yml
@@ -22,12 +22,12 @@ jobs:
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
 
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Use desired version of Node.js
-              uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+              uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
               with:
                   node-version-file: '.nvmrc'
                   check-latest: true
diff --git a/.github/workflows/storybook-pages.yml b/.github/workflows/storybook-pages.yml
index 65dd46b3a7610..83f7fdb96f926 100644
--- a/.github/workflows/storybook-pages.yml
+++ b/.github/workflows/storybook-pages.yml
@@ -12,7 +12,7 @@ jobs:
 
         steps:
             - name: Checkout
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   ref: trunk
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
diff --git a/.github/workflows/sync-backport-changelog.yml b/.github/workflows/sync-backport-changelog.yml
index 76a87f89ba703..b71d9440c38a1 100644
--- a/.github/workflows/sync-backport-changelog.yml
+++ b/.github/workflows/sync-backport-changelog.yml
@@ -4,21 +4,33 @@ 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:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - name: Checkout
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   fetch-depth: 2 # Fetch the last two commits to compare changes
             - name: Check for changes in backport-changelog
-              id: check-for-changes
+              if: github.event_name == 'push'
               run: |
-                  git diff --quiet HEAD^ HEAD -- backport-changelog || echo "HAS_CHANGES=1" >> "$GITHUB_OUTPUT"
+                  if git diff --quiet HEAD^ HEAD -- backport-changelog; then
+                      echo "skip_sync=true" >> "$GITHUB_ENV"
+                  fi
             - name: Sync Issue
-              if: steps.check-for-changes.outputs.HAS_CHANGES
+              if: ${{ ! env.skip_sync }}
               uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
               with:
                   script: |
diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml
index 75a0d34ddc8d8..bfa35492589a4 100644
--- a/.github/workflows/unit-test.yml
+++ b/.github/workflows/unit-test.yml
@@ -21,29 +21,25 @@ concurrency:
 
 jobs:
     unit-js:
-        name: JavaScript (Node.js ${{ matrix.node.name }}) ${{ matrix.shard }}
+        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:
-                    - name: 20
-                      version: 20
-                    - name: 22
-                      version: 22.4
+                node: ['20', '22']
                 shard: ['1/4', '2/4', '3/4', '4/4']
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Setup Node.js and install dependencies
               uses: ./.github/setup-node
               with:
-                  node-version: ${{ matrix.node.version }}
+                  node-version: ${{ matrix.node }}
 
             - name: Determine the number of CPU cores
               uses: SimenB/github-actions-cpu-cores@97ba232459a8e02ff6121db9362b09661c875ab8 # v2.0.0
@@ -64,28 +60,24 @@ jobs:
                     --cacheDirectory="$HOME/.jest-cache"
 
     unit-js-date:
-        name: JavaScript Date Tests (Node.js ${{ matrix.node.name }})
+        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:
-                    - name: 20
-                      version: 20
-                    - name: 22
-                      version: 22.4
+                node: ['20', '22']
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Setup Node.js and install dependencies
               uses: ./.github/setup-node
               with:
-                  node-version: ${{ matrix.node.version }}
+                  node-version: ${{ matrix.node }}
 
             - name: Determine the number of CPU cores
               uses: SimenB/github-actions-cpu-cores@97ba232459a8e02ff6121db9362b09661c875ab8 # v2.0.0
@@ -129,7 +121,7 @@ jobs:
         name: Build JavaScript assets for PHP unit tests
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
@@ -143,7 +135,9 @@ jobs:
               uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
               with:
                   name: build-assets
-                  path: ./build/
+                  path: |
+                      ./build/
+                      ./build-module/
 
     test-php:
         name: PHP ${{ matrix.php }}${{ matrix.multisite && ' multisite' || '' }}${{ matrix.wordpress != '' && format( ' (WP {0}) ', matrix.wordpress ) || '' }} on ubuntu-latest
@@ -161,6 +155,7 @@ jobs:
                     - '8.0'
                     - '8.1'
                     - '8.2'
+                    - '8.3'
                 multisite: [false, true]
                 wordpress: [''] # Latest WordPress version.
                 include:
@@ -169,7 +164,7 @@ jobs:
                       wordpress: 'previous major version'
                     - php: '7.4'
                       wordpress: 'previous major version'
-                    - php: '8.2'
+                    - php: '8.3'
                       wordpress: 'previous major version'
 
         env:
@@ -178,7 +173,7 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
@@ -193,7 +188,7 @@ jobs:
             # dependency versions are installed and cached.
             ##
             - name: Set up PHP
-              uses: shivammathur/setup-php@2e947f1f6932d141d076ca441d0e1e881775e95b # v2.31.0
+              uses: shivammathur/setup-php@c541c155eee45413f5b09a52248675b1a2575231 # v2.31.1
               with:
                   php-version: '${{ matrix.php }}'
                   ini-file: development
@@ -203,12 +198,6 @@ jobs:
             - name: Override PHP version in composer.json
               run: composer config platform.php ${{ matrix.php }}
 
-            # The spatie/phpunit-watcher package is not compatible with PHP < 7.2.
-            # It must be removed before running the tests.
-            - name: Remove incompatible Composer packages
-              if: ${{ matrix.php < '7.2' }}
-              run: composer remove spatie/phpunit-watcher --dev --no-update
-
             # 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
@@ -217,10 +206,9 @@ jobs:
                   custom-cache-suffix: $(/bin/date -u --date='last Mon' "+%F")
 
             - name: Download built JavaScript assets
-              uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+              uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
               with:
                   name: build-assets
-                  path: ./build
 
             - name: Docker debug information
               run: |
@@ -290,12 +278,12 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Set up PHP
-              uses: shivammathur/setup-php@2e947f1f6932d141d076ca441d0e1e881775e95b # v2.31.0
+              uses: shivammathur/setup-php@c541c155eee45413f5b09a52248675b1a2575231 # v2.31.1
               with:
                   php-version: '7.4'
                   coverage: none
@@ -360,7 +348,7 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
diff --git a/.github/workflows/upload-release-to-plugin-repo.yml b/.github/workflows/upload-release-to-plugin-repo.yml
index 6f01a4f6ff12f..d09e2af3dd213 100644
--- a/.github/workflows/upload-release-to-plugin-repo.yml
+++ b/.github/workflows/upload-release-to-plugin-repo.yml
@@ -96,7 +96,7 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   ref: ${{ matrix.branch }}
                   token: ${{ secrets.GUTENBERG_TOKEN }}
@@ -189,7 +189,7 @@ jobs:
                   sed -i "s/$STABLE_TAG_PLACEHOLDER/Stable tag: $VERSION/g" ./trunk/readme.txt
 
             - name: Download Changelog Artifact
-              uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+              uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
               with:
                   name: changelog trunk
                   path: trunk
@@ -247,7 +247,7 @@ jobs:
                   sed -i "s/$STABLE_TAG_PLACEHOLDER/Stable tag: $VERSION/g" "$VERSION/readme.txt"
 
             - name: Download Changelog Artifact
-              uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+              uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
               with:
                   name: changelog trunk
                   path: ${{ github.event.release.name }}
diff --git a/.stylelintrc.json b/.stylelintrc.json
index df01978222e63..557376e02c406 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,9 +1,17 @@
 {
-	"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-/" ]
@@ -13,12 +21,12 @@
 			}
 		],
 		"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"
+				"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,
@@ -26,7 +34,7 @@
 		"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,
diff --git a/backport-changelog/6.6/7088.md b/backport-changelog/6.6/7088.md
new file mode 100644
index 0000000000000..46bd114746484
--- /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 0000000000000..e674d5ea76ba6
--- /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 0000000000000..386f765cb22fa
--- /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/7125.md b/backport-changelog/6.7/7125.md
new file mode 100644
index 0000000000000..341e0415cc61a
--- /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 0000000000000..00771b8bc6c21
--- /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 0000000000000..b5b0090fbaa56
--- /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 0000000000000..d777eace2cb05
--- /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 0000000000000..520b3d6054cc1
--- /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 0000000000000..d0b1de2587234
--- /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 0000000000000..6714b13b70b8d
--- /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 0000000000000..358b0d7c9a967
--- /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 0000000000000..4c01ef5d4f46e
--- /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 0000000000000..7d75cdff0f907
--- /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 0000000000000..7cb2e26d7eeb9
--- /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 0000000000000..b2fb8efd624b9
--- /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/6910.md b/backport-changelog/6.8/6910.md
similarity index 100%
rename from backport-changelog/6.7/6910.md
rename to backport-changelog/6.8/6910.md
diff --git a/backport-changelog/readme.md b/backport-changelog/readme.md
index 200cb9db40486..8066cc6a6fca2 100644
--- a/backport-changelog/readme.md
+++ b/backport-changelog/readme.md
@@ -1,16 +1,63 @@
 # Core Backport Changelog
 
-Any PR that makes changes to be backported to [core](https://github.com/WordPress/wordpress-develop) should log a core PR here. It's possible to have multiple Gutenberg PRs link to a single core backport PR. The core backport PR can remain open as long as wanted/needed. The entries are sorted by core release (in folders), and each entry should be an md file with the core PR number as the file name, and the link to the Gutenberg PR in the file content. The file content should start with the core PR URL, followed by a Markdown list of Gutenberg PRs (see example). Files are used to avoid rebase conflicts.
+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.
 
-If you think a file path is wrongly flagged as needing a core backport PR, you can add it to the list of exceptions in `.github/workflows/check-backport-changelog.yml`.
+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. 
 
-## Example
+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:
 
-Path: `{wp-release-number-x.x}/{core-pr-number}.md`, e.g. `6.6/1234.md`.
-File content:
 ```md
-https://github.com/WordPress/wordpress-develop/pull/{core-pr-number}
+https://github.com/WordPress/wordpress-develop/pull/1234
 
-* https://github.com/WordPress/gutenberg/pull/{first-gb-pr-number}
-* https://github.com/WordPress/gutenberg/pull/{second-gb-pr-number}
+* 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-theme-reference.mjs b/bin/api-docs/gen-theme-reference.mjs
index 051f23c3ea997..6dc7791e288b9 100644
--- a/bin/api-docs/gen-theme-reference.mjs
+++ b/bin/api-docs/gen-theme-reference.mjs
@@ -7,38 +7,31 @@
 /**
  * External dependencies
  */
-import path from 'path';
-import fs from 'fs';
-import url from 'url';
+import fs from 'node:fs/promises';
 import $RefParser from '@apidevtools/json-schema-ref-parser';
 
-const __dirname = path.dirname( url.fileURLToPath( import.meta.url ) );
-
 /**
- * Path to root project directory.
- *
- * @type {string}
+ * @typedef {import('@apidevtools/json-schema-ref-parser').JSONSchema} JSONSchema
  */
-const ROOT_DIR = path.resolve( __dirname, '../..' );
 
 /**
  * Path to theme json schema file.
  *
- * @type {string}
+ * @type {URL}
  */
-const THEME_JSON_SCHEMA_FILE = path.resolve(
-	ROOT_DIR,
-	path.join( 'schemas', 'json', 'theme.json' )
+const THEME_JSON_SCHEMA_URL = new URL(
+	'../../schemas/json/theme.json',
+	import.meta.url
 );
 
 /**
  * Path to docs file.
  *
- * @type {string}
+ * @type {URL}
  */
-const THEME_JSON_REF_DOC = path.resolve(
-	ROOT_DIR,
-	'docs/reference-guides/theme-json-reference/theme-json-living.md'
+const REFERENCE_DOC_URL = new URL(
+	'../../docs/reference-guides/theme-json-reference/theme-json-living.md',
+	import.meta.url
 );
 
 /**
@@ -56,229 +49,248 @@ const START_TOKEN = '<!-- START TOKEN Autogenerated - DO NOT EDIT -->';
 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}
+ * @typedef {(schema: JSONSchema) => boolean} PredicateFunction
  */
-const TOKEN_PATTERN = new RegExp( START_TOKEN + '[^]*' + END_TOKEN );
 
-const themejson = await $RefParser.dereference( THEME_JSON_SCHEMA_FILE );
+/**
+ * @typedef {(schema: JSONSchema) => string} SerializerFunction
+ */
 
 /**
- * Convert object keys to an array.
- * Gracefully handles non-object values.
+ * Create a serializer function for a type. Supports merging one level of anyOf and oneOf subschemas.
  *
- * @param {*} maybeObject
- * @return {Array} Object keys
+ * @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.
  */
-const keys = ( maybeObject ) => {
-	if ( typeof maybeObject !== 'object' ) {
-		return [];
-	}
-	return Object.keys( maybeObject );
-};
+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( ', ' );
+	};
+}
 
 /**
- * Convert settings properties to markup.
+ * Serialize primitive types.
  *
- * @param {Object} struct
- * @return {string} markup
+ * @type {SerializerFunction}
  */
-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 : '';
-		let type = props[ key ].type || '';
-		let ps =
-			props[ key ].type === 'array'
-				? keys( props[ key ].items.properties ).sort().join( ', ' )
-				: '';
-
-		/*
-		 * Handle`oneOf` type definitions - extract the type and properties.
-		 * See: https://json-schema.org/understanding-json-schema/reference/combining#oneOf
-		 */
-		if ( props[ key ].oneOf && Array.isArray( props[ key ].oneOf ) ) {
-			if ( ! type ) {
-				type = props[ key ].oneOf
-					.map( ( item ) => item.type )
-					.join( ', ' );
-			}
-
-			if ( ! ps ) {
-				ps = props[ key ].oneOf
-					.map( ( item ) =>
-						item?.type === 'object' && item?.properties
-							? '_{' +
-							  keys( item.properties ).sort().join( ', ' ) +
-							  '}_'
-							: ''
-					)
-					.join( ' ' );
-			}
-		}
-
-		markup += `| ${ key } | ${ type } | ${ def } | ${ ps } |\n`;
-	} );
-
-	return markup;
-};
+const serializePrimitiveTypes = createSerializer(
+	( schema ) =>
+		schema.type && ! [ 'object', 'array' ].includes( schema.type ),
+	( schema ) => `\`${ schema.type }\``
+);
 
 /**
- * Convert style properties to markup.
+ * Serialize object types.
  *
- * @param {Object} struct
- * @return {string} markup
+ * @type {SerializerFunction}
  */
-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( ', ' )
-				: '';
-		const type = formatType( props[ key ] );
-		markup += `| ${ key } | ${ type } | ${ ps } |\n`;
-	} );
-
-	return markup;
-};
+const serializeObjectTypes = createSerializer(
+	( schema ) => schema.properties,
+	( schema ) => `\`{ ${ Object.keys( schema.properties ).join( ', ' ) } }\``
+);
 
 /**
- * Parses a section for description and properties and
- * returns a marked up version.
+ * Serialize object array types.
  *
- * @param {string} title
- * @param {Object} data
- * @param {string} type  settings|style
- * @return {string} markup
+ * @type {SerializerFunction}
  */
-const getSectionMarkup = ( title, data, type ) => {
-	const markupFn =
-		type === 'settings'
-			? getSettingsPropertiesMarkup
-			: getStylePropertiesMarkup;
-
-	return `
-### ${ title }
-
-${ data.description }
-
-${ markupFn( data ) }
----
-`;
-};
-
-let autogen = '';
+const serializeObjectArrayTypes = createSerializer(
+	( schema ) => schema.items && schema.items.properties,
+	( schema ) =>
+		`\`[ { ${ Object.keys( schema.items.properties ).join( ', ' ) } } ]\``
+);
 
 /**
- * Format list of types.
+ * Serialize primitive array types.
  *
- * @param {Object} prop
- * @return {string} type
+ * @type {SerializerFunction}
  */
-const formatType = ( prop ) => {
-	let type = prop.type || '';
+const serializePrimitiveArrayTypes = createSerializer(
+	( schema ) =>
+		schema.items &&
+		schema.items.type &&
+		! [ 'object', 'array' ].includes( schema.items.type ),
+	( schema ) => `\`[ ${ schema.items.type } ]\``
+);
 
-	if ( prop.hasOwnProperty( 'anyOf' ) || prop.hasOwnProperty( 'oneOf' ) ) {
-		const propTypes = prop.anyOf || prop.oneOf;
-		const types = [];
+/**
+ * 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( ', ' );
+}
 
-		propTypes.forEach( ( item ) => {
-			if ( item.type ) {
-				types.push( item.type );
+/**
+ * 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`;
 			}
-		} );
-
-		type = [ ...new Set( types ) ].join( ', ' );
+			md += '\n';
+		}
+		md += `---\n\n`;
 	}
 
-	return type;
-};
+	/* --------------- *
+	 * 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`;
+	}
 
-// Settings
-const settings = Object.entries( themejson.definitions )
-	.filter( ( [ settingsKey ] ) =>
-		/^settingsProperties(?!Complete)\w+$/.test( settingsKey )
-	)
-	.reduce(
-		( settingsObj, [ , { properties } ] ) =>
-			Object.assign( settingsObj, properties ),
-		{}
+	/* --------------- *
+	 * 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
 	);
-const settingSections = keys( settings );
-autogen += '## Settings' + '\n\n';
-settingSections.forEach( ( section ) => {
-	autogen += getSectionMarkup( section, settings[ section ], 'settings' );
-} );
+	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';
 
-// Styles
-const styles = themejson.definitions.stylesProperties.properties;
-const styleSections = keys( styles );
-autogen += '## Styles' + '\n\n';
-styleSections.forEach( ( section ) => {
-	autogen += getSectionMarkup( section, styles[ section ], 'styles' );
-} );
+	/* --------------- *
+	 * patterns        *
+	 * --------------- */
+	md += '## patterns\n\n';
+	md += themeJson.properties.patterns.description + '\n\n';
+	md += `Type: ${ generateTypes( themeJson.properties.patterns ) }.\n`;
 
-const templateTableGeneration = ( themeJson, context ) => {
-	let content = '';
-	content += '## ' + context + '\n\n';
-	content += themeJson.properties[ context ].description + '\n\n';
-	content +=
-		'Type: `' + themeJson.properties[ context ].items.type + '`.\n\n';
-	content += '| Property | Description | Type |\n';
-	content += '| ---      | ---         | ---  |\n';
-	keys( themeJson.properties[ context ].items.properties ).forEach(
-		( key ) => {
-			content += `| ${ key } | ${ themeJson.properties[ context ].items.properties[ key ].description } | ${ themeJson.properties[ context ].items.properties[ key ].type } |\n`;
+	return md;
+}
+
+/**
+ * Main function.
+ */
+async function main() {
+	const themeJson = await $RefParser.dereference(
+		THEME_JSON_SCHEMA_URL.pathname,
+		{
+			parse: { binary: false, text: false, yaml: false },
+			resolve: { external: false },
 		}
 	);
-	content += '\n\n';
-
-	return content;
-};
 
-// customTemplates
-autogen += templateTableGeneration( themejson, 'customTemplates' );
+	const themeJsonReference = await fs.readFile( REFERENCE_DOC_URL, {
+		encoding: 'utf8',
+		flag: 'r',
+	} );
 
-// templateParts
-autogen += templateTableGeneration( themejson, 'templateParts' );
+	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 }`
+	);
 
-// Patterns
-autogen += '## Patterns' + '\n\n';
-autogen += themejson.properties.patterns.description + '\n';
-autogen += 'Type: `' + themejson.properties.patterns.type + '`.\n\n';
+	await fs.writeFile( REFERENCE_DOC_URL, updatedThemeJsonReference, {
+		encoding: 'utf8',
+	} );
+}
 
-// Read existing file to wrap auto generated content.
-let docsContent = fs.readFileSync( THEME_JSON_REF_DOC, {
-	encoding: 'utf8',
-	flag: 'r',
+main().catch( ( error ) => {
+	console.error( error );
+	process.exit( 1 );
 } );
-
-// 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/build-plugin-zip.sh b/bin/build-plugin-zip.sh
index 4ba931c4a4aeb..c823ca6a8017f 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/packages/get-babel-config.js b/bin/packages/get-babel-config.js
index 91fe4b07d325e..9427549cafaba 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/changelog.txt b/changelog.txt
index 8e63d9a2d1f44..06d92230737fc 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,2077 @@
 == Changelog ==
 
+= 19.4.0-rc.1 =
+
+
+## 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))
+
+#### 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
diff --git a/composer.json b/composer.json
index 3571377bd58bd..982a71a975223 100644
--- a/composer.json
+++ b/composer.json
@@ -23,14 +23,15 @@
 		"allow-plugins": {
 			"dealerdirect/phpcodesniffer-composer-installer": true,
 			"composer/installers": true
-		}
+		},
+		"lock": false
 	},
 	"require-dev": {
 		"phpcompatibility/phpcompatibility-wp": "^2.1.3",
 		"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": [
@@ -43,7 +44,7 @@
 		}
 	],
 	"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/assets/plugin-sidebar-closed-state.png b/docs/assets/plugin-sidebar-closed-state.png
deleted file mode 100644
index 025da900ffcdd..0000000000000
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 f1c3781a500f0..a114f7119020a 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/contributors/code/getting-started-with-code-contribution.md b/docs/contributors/code/getting-started-with-code-contribution.md
index 921c8ad6ddc3e..df6b305f35983 100644
--- a/docs/contributors/code/getting-started-with-code-contribution.md
+++ b/docs/contributors/code/getting-started-with-code-contribution.md
@@ -16,7 +16,7 @@ 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.
@@ -134,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.
 
diff --git a/docs/contributors/code/release.md b/docs/contributors/code/release.md
index f304ec9cd3a48..ec3af0d7bd4cb 100644
--- a/docs/contributors/code/release.md
+++ b/docs/contributors/code/release.md
@@ -227,7 +227,7 @@ The final step is to write a release post on [make.wordpress.org/core](https://m
 
 > The plugin was published to the WordPress.org plugin directory but the workflow failed.
 
-This has happened ocassionally, see [this one](https://github.com/WordPress/gutenberg/actions/runs/6955409957/job/18924124118) for example.
+This has happened occasionally, see [this one](https://github.com/WordPress/gutenberg/actions/runs/6955409957/job/18924124118) for example.
 
 It's important to check that:
 
diff --git a/docs/contributors/versions-in-wordpress.md b/docs/contributors/versions-in-wordpress.md
index f95dbf479f3cb..62347f2d644a6 100644
--- a/docs/contributors/versions-in-wordpress.md
+++ b/docs/contributors/versions-in-wordpress.md
@@ -6,23 +6,44 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre
 
 | Gutenberg Versions | WordPress Version |
 | ------------------ | ----------------- |
+| 18.6-19.3          | 6.7               |
+| 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             |
@@ -30,6 +51,8 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre
 | 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             |
@@ -39,6 +62,8 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre
 | 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             |
@@ -48,6 +73,8 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre
 | 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             |
@@ -59,6 +86,8 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre
 | 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            |
@@ -72,6 +101,8 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre
 | 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            |
@@ -86,6 +117,8 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre
 | 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            |
@@ -101,6 +134,8 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre
 | 6.6-7.5            | 5.4.2             |
 | 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            |
@@ -118,6 +153,8 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre
 | 5.5-6.5            | 5.3.2             |
 | 5.5-6.5            | 5.3.1             |
 | 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            |
@@ -138,6 +175,8 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre
 | 4.9-5.4            | 5.2.2             |
 | 4.9-5.4            | 5.2.1             |
 | 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            |
@@ -156,6 +195,8 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre
 | 4.8                | 5.1.2             |
 | 4.8                | 5.1.1             |
 | 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            |
diff --git a/docs/explanations/architecture/modularity.md b/docs/explanations/architecture/modularity.md
index f94f8ec7b9472..ff619ccbfdf5b 100644
--- a/docs/explanations/architecture/modularity.md
+++ b/docs/explanations/architecture/modularity.md
@@ -42,7 +42,7 @@ function MyApp() {
 
 ```php
 // myplugin.php
-// Example of script registration dependending on the "components" and "element packages.
+// Example of script registration depending on the "components" and "element packages.
 wp_register_script( 'myscript', 'pathtomyscript.js', array ('wp-components', "react" ) );
 ```
 
diff --git a/docs/explanations/user-interface/design-resources.md b/docs/explanations/user-interface/design-resources.md
index 235951e4839e9..4a2a78f6822a5 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/devenv/README.md b/docs/getting-started/devenv/README.md
index 1c2b9ed9070d3..4539dacbdf504 100644
--- a/docs/getting-started/devenv/README.md
+++ b/docs/getting-started/devenv/README.md
@@ -54,6 +54,7 @@ Refer to the [Get started with `wp-env`](/docs/getting-started/devenv/get-starte
 This list is not exhaustive, but here are several additional options to choose from if you prefer not to use `wp-env`:
 
 - [Local](https://localwp.com/)
+- [WP Studio](https://developer.wordpress.com/studio/)
 - [XAMPP](https://www.apachefriends.org/)
 - [MAMP](https://www.mamp.info/en/mamp/mac/)
 - [Varying Vagrant Vagrants](https://varyingvagrantvagrants.org/) (VVV)
diff --git a/docs/getting-started/fundamentals/block-in-the-editor.md b/docs/getting-started/fundamentals/block-in-the-editor.md
index f7357def5ec2d..d1f2a25063e6c 100644
--- a/docs/getting-started/fundamentals/block-in-the-editor.md
+++ b/docs/getting-started/fundamentals/block-in-the-editor.md
@@ -124,7 +124,7 @@ export default function Edit( { attributes, setAttributes } ) {
 						<legend className="blocks-base-control__label">
 							{ __( 'Background color', 'block-development-examples' ) }
 						</legend>
-						<ColorPalette // Element Tag for Gutenberg standard colour selector
+						<ColorPalette // Element Tag for Gutenberg standard color selector
 							onChange={ onChangeBGColor } // onChange event callback
 						/>
 					</fieldset>
diff --git a/docs/getting-started/fundamentals/block-wrapper.md b/docs/getting-started/fundamentals/block-wrapper.md
index 39c80262d7bcb..98c435f6ebe2f 100644
--- a/docs/getting-started/fundamentals/block-wrapper.md
+++ b/docs/getting-started/fundamentals/block-wrapper.md
@@ -102,7 +102,7 @@ The [example block](https://github.com/WordPress/block-development-examples/tree
 
 ## Dynamic render markup
 
-In dynamic blocks, where the font-end markup is rendered server-side, you can utilize the [`get_block_wrapper_attributes()`](https://developer.wordpress.org/reference/functions/get_block_wrapper_attributes/) function to output the necessary classes and attributes just like you would use `useBlockProps.save()` in the `save` function. (See [example](https://github.com/WordPress/block-development-examples/blob/f68640f42d993f0866d1879f67c73910285ca114/plugins/block-dynamic-rendering-64756b/src/render.php#L11))
+In dynamic blocks, where the front-end markup is rendered server-side, you can utilize the [`get_block_wrapper_attributes()`](https://developer.wordpress.org/reference/functions/get_block_wrapper_attributes/) function to output the necessary classes and attributes just like you would use `useBlockProps.save()` in the `save` function. (See [example](https://github.com/WordPress/block-development-examples/blob/f68640f42d993f0866d1879f67c73910285ca114/plugins/block-dynamic-rendering-64756b/src/render.php#L11))
 
 ```php
 <p <?php echo get_block_wrapper_attributes(); ?>>
diff --git a/docs/getting-started/fundamentals/static-dynamic-rendering.md b/docs/getting-started/fundamentals/static-dynamic-rendering.md
index 8d199f66cccd2..dfb6a7123b44b 100644
--- a/docs/getting-started/fundamentals/static-dynamic-rendering.md
+++ b/docs/getting-started/fundamentals/static-dynamic-rendering.md
@@ -61,7 +61,7 @@ Dynamic blocks, which we'll explore in the following section, can specify an ini
 For a practical demonstration of how this works, refer to the [Building your first block](/docs/getting-started/tutorial.md) tutorial. Specifically, the [Adding static rendering](/docs/getting-started/tutorial.md#adding-static-rendering) section illustrates how a block can have both a saved HTML structure and dynamic rendering capabilities.
 
 <div class="callout callout-info">
-WordPress provides mechanisms like the <a href="https://developer.wordpress.org/reference/functions/render_block/"><code>render_block</code></a> are the <code>$render_callback</code> function to alter the saved HTML of a block before it appears on the front end. These tools offer developers the capability to customize block output dynamically, catering to complex and interactive user experiences.
+WordPress provides mechanisms like the <a href="https://developer.wordpress.org/reference/functions/render_block/"><code>render_block</code></a> and the <a href="https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/creating-dynamic-blocks/"><code>render_callback</code></a> function to alter the saved HTML of a block before it appears on the front end. These tools offer developers the capability to customize block output dynamically, catering to complex and interactive user experiences.
 </div>
 
 Additional examples of WordPress blocks that use static rendering, meaning their output is fixed at the time of saving and doesn't rely on server-side processing, include:
diff --git a/docs/getting-started/tutorial.md b/docs/getting-started/tutorial.md
index aac507d4c573f..4e43241f63fb1 100644
--- a/docs/getting-started/tutorial.md
+++ b/docs/getting-started/tutorial.md
@@ -25,7 +25,7 @@ To complete this tutorial, you will need:
 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 alternate local development tools if you already have one that you prefer.
+	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
@@ -250,7 +250,7 @@ At this point, the block's icon and description are correct, and block supports
 
 ### 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.
+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.
 
@@ -647,10 +647,10 @@ While the Editor looks great, the starting year functionality has yet to be adde
 
 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` is the `showStartingYear` attribute is `false`.
+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 the <code>render.php</code>, which you can use to customize the block's output:</p>
+	<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>
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 122ee3eaa0c27..85ac956ff74ba 100644
--- a/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md
+++ b/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md
@@ -138,6 +138,17 @@ And a `style.css` file to load on the frontend:
 
 The files will automatically be enqueued when specified in the block.json.
 
+<div class="callout callout-info">
+
+If you are using `@wordpress/scripts` you will need to import your stylesheet within your corresponding JavaScript file in order for `@wordpress/scripts` to process the stylesheet.
+
+Example:
+
+- In `edit.js` you would place `import './editor.scss';`
+- In `index.js` you would place `import './style.scss';`
+- In `view.js` you would place `import './view.scss';` (interactive block template)
+</div>
+
 **Note:** If you have multiple files to include, you can use standard `wp_enqueue_style` functions like any other plugin or theme. You will want to use the following hooks for the block editor:
 
 -   `enqueue_block_editor_assets` - to load only in editor view
diff --git a/docs/manifest.json b/docs/manifest.json
index 1704e6d711510..8387b9079694c 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -497,6 +497,36 @@
 		"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",
@@ -767,6 +797,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",
@@ -1062,33 +1098,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",
-		"parent": "components"
-	},
-	{
-		"title": "NavigatorToParentButton",
-		"slug": "navigator-to-parent-button",
-		"markdown_source": "../packages/components/src/navigator/navigator-to-parent-button/README.md",
+		"title": "Navigator",
+		"slug": "navigator",
+		"markdown_source": "../packages/components/src/navigator/README.md",
 		"parent": "components"
 	},
 	{
@@ -1667,6 +1679,12 @@
 		"markdown_source": "../packages/eslint-plugin/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/fields",
+		"slug": "packages-fields",
+		"markdown_source": "../packages/fields/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/format-library",
 		"slug": "packages-format-library",
diff --git a/docs/reference-guides/block-api/block-api-versions.md b/docs/reference-guides/block-api/block-api-versions.md
index b4b11e7c23c7c..d89362777ca58 100644
--- a/docs/reference-guides/block-api/block-api-versions.md
+++ b/docs/reference-guides/block-api/block-api-versions.md
@@ -3,7 +3,7 @@
 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 and the editor has no classic meta boxes below the blocks. 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.
+- 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)
 
diff --git a/docs/reference-guides/block-api/block-attributes.md b/docs/reference-guides/block-api/block-attributes.md
index 52a325ff9253d..544f35593106f 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.
 
diff --git a/docs/reference-guides/block-api/block-context.md b/docs/reference-guides/block-api/block-context.md
index 5fdc670fe6040..09c33dfb71b7c 100644
--- a/docs/reference-guides/block-api/block-context.md
+++ b/docs/reference-guides/block-api/block-context.md
@@ -141,7 +141,7 @@ export default function Edit( props ) {
 	return (
 		<div>
 			<TextControl
-				label={ __( 'Record ID:' ) }
+				label={ __( 'Record ID' ) }
 				value={ recordId }
 				onChange={ ( val ) =>
 					setAttributes( { recordId: Number( val ) } )
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 151817193ad6c..7014f5a1ac657 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -72,14 +72,14 @@ A calendar of your site’s posts. ([Source](https://github.com/WordPress/gutenb
 -	**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, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** displayAsDropdown, label, showEmpty, showHierarchy, showLabel, showOnlyTopLevel, showPostCounts
+-	**Attributes:** displayAsDropdown, label, showEmpty, showHierarchy, showLabel, showOnlyTopLevel, showPostCounts, taxonomy
 
 ## Code
 
@@ -237,7 +237,7 @@ Displays a title with the number of comments. ([Source](https://github.com/WordP
 -	**Category:** theme
 -	**Ancestor:** core/comments
 -	**Supports:** align, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~anchor~~, ~~html~~
--	**Attributes:** level, showCommentsCount, showPostTitle, textAlign
+-	**Attributes:** level, levelOptions, showCommentsCount, showPostTitle, textAlign
 
 ## Cover
 
@@ -360,7 +360,7 @@ Introduce new sections and organize content to help visitors (and search engines
 -	**Name:** core/heading
 -	**Category:** text
 -	**Supports:** __unstablePasteTextInline, align (full, wide), anchor, className, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), splitting, typography (fontSize, lineHeight)
--	**Attributes:** content, level, placeholder, textAlign
+-	**Attributes:** content, level, levelOptions, placeholder, textAlign
 
 ## Home Link
 
@@ -396,7 +396,7 @@ Display a list of your most recent comments. ([Source](https://github.com/WordPr
 
 -	**Name:** core/latest-comments
 -	**Category:** widgets
--	**Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** commentsToShow, displayAvatar, displayDate, displayExcerpt
 
 ## Latest Posts
@@ -410,7 +410,7 @@ Display a list of your most recent posts. ([Source](https://github.com/WordPress
 
 ## 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
@@ -420,13 +420,13 @@ Create a bulleted or numbered list. ([Source](https://github.com/WordPress/guten
 
 ## 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
 -	**Parent:** core/list
 -	**Allowed Blocks:** core/list
--	**Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), splitting, typography (fontSize, lineHeight), ~~className~~
+-	**Supports:** anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), splitting, typography (fontSize, lineHeight), ~~className~~
 -	**Attributes:** content, placeholder
 
 ## Login/out
@@ -435,7 +435,7 @@ Show login & logout links. ([Source](https://github.com/WordPress/gutenberg/tree
 
 -	**Name:** core/loginout
 -	**Category:** theme
--	**Supports:** className, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
+-	**Supports:** className, color (background, gradients, link, ~~text~~), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
 -	**Attributes:** displayLoginAsForm, redirectToCurrent
 
 ## Media & Text
@@ -493,7 +493,7 @@ Add a submenu to your navigation. ([Source](https://github.com/WordPress/gutenbe
 -	**Name:** core/navigation-submenu
 -	**Category:** design
 -	**Parent:** core/navigation
--	**Supports:** interactivity (clientNavigation), ~~html~~, ~~reusable~~
+-	**Supports:** interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** description, id, isTopLevelItem, kind, label, opensInNewTab, rel, title, type, url
 
 ## Page Break
@@ -689,7 +689,7 @@ Displays the title of a post, page, or any other content-type. ([Source](https:/
 -	**Name:** core/post-title
 -	**Category:** theme
 -	**Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** isLink, level, linkTarget, rel, textAlign
+-	**Attributes:** isLink, level, levelOptions, linkTarget, rel, textAlign
 
 ## Preformatted
 
@@ -775,7 +775,7 @@ 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), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** level, showPrefix, showSearchTerm, textAlign, type
+-	**Attributes:** level, levelOptions, showPrefix, showSearchTerm, textAlign, type
 
 ## Quote
 
@@ -783,7 +783,7 @@ Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Ju
 
 -	**Name:** core/quote
 -	**Category:** text
--	**Supports:** anchor, background (backgroundImage, backgroundSize), color (background, gradients, heading, link, text), dimensions (minHeight), interactivity (clientNavigation), layout (~~allowEditing~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align (full, left, right, wide), anchor, background (backgroundImage, backgroundSize), color (background, gradients, heading, link, text), dimensions (minHeight), interactivity (clientNavigation), layout (~~allowEditing~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** citation, textAlign, value
 
 ## Read More
@@ -847,7 +847,7 @@ 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), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** level, textAlign
+-	**Attributes:** level, levelOptions, textAlign
 
 ## Site Title
 
@@ -856,7 +856,7 @@ 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), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** isLink, level, linkTarget, textAlign
+-	**Attributes:** isLink, level, levelOptions, linkTarget, textAlign
 
 ## Social Icon
 
@@ -908,7 +908,7 @@ Summarize your post with a list of headings. Add HTML anchors to Heading blocks
 
 ## 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
diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md
index 7eed5c8741288..956e8dd010581 100644
--- a/docs/reference-guides/data/data-core-block-editor.md
+++ b/docs/reference-guides/data/data-core-block-editor.md
@@ -84,7 +84,7 @@ _Parameters_
 
 _Returns_
 
--   `boolean | undefined`: Whether the given block is allowed to be moved.
+-   `boolean`: Whether the given block is allowed to be moved.
 
 ### canMoveBlocks
 
@@ -262,7 +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_
 
@@ -412,7 +412,7 @@ Returns all blocks that match a blockName. Results include nested blocks.
 _Parameters_
 
 -   _state_ `Object`: Global application state.
--   _blockName_ `?string`: Optional block name, if not specified, returns an empty array.
+-   _blockName_ `string[]`: Block name(s) for which clientIds are to be returned.
 
 _Returns_
 
@@ -857,15 +857,9 @@ _Returns_
 
 ### hasBlockMovingClientId
 
-Returns whether block moving mode is enabled.
-
-_Parameters_
-
--   _state_ `Object`: Editor state.
-
-_Returns_
+> **Deprecated**
 
--   `string`: Client Id of moving block.
+Returns whether block moving mode is enabled.
 
 ### hasDraggedInnerBlock
 
@@ -988,7 +982,7 @@ _Returns_
 
 ### isBlockInsertionPointVisible
 
-Returns true if we should show the block insertion point.
+Returns true if the block insertion point is visible.
 
 _Parameters_
 
@@ -1661,11 +1655,13 @@ _Returns_
 
 ### setBlockMovingClientId
 
-Action that enables or disables the block moving mode.
+> **Deprecated**
 
-_Parameters_
+Set the block moving client ID.
 
--   _hasBlockMovingClientId_ `string|null`: Enable/Disable block moving mode.
+_Returns_
+
+-   `Object`: Action object.
 
 ### setBlockVisibility
 
diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md
index b22fd2238f303..775dd66a821ef 100644
--- a/docs/reference-guides/data/data-core-edit-site.md
+++ b/docs/reference-guides/data/data-core-edit-site.md
@@ -24,6 +24,8 @@ _Returns_
 
 ### getCurrentTemplateTemplateParts
 
+> **Deprecated**
+
 Returns the template parts and their blocks for the current edited template.
 
 _Parameters_
diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md
index 4fea2c51fa54f..ac3413e694877 100644
--- a/docs/reference-guides/data/data-core-editor.md
+++ b/docs/reference-guides/data/data-core-editor.md
@@ -248,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.
@@ -284,6 +290,24 @@ _Returns_
 
 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_
 
 -   _state_ `Object`: Global application state.
@@ -1154,11 +1178,38 @@ Disables the publish sidebar.
 
 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.
 
+_Returns_
+
+-   `Object`: Action object
+
 ### enablePublishSidebar
 
 Enable the publish sidebar.
@@ -1422,6 +1473,10 @@ _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_
 
diff --git a/docs/reference-guides/data/data-core.md b/docs/reference-guides/data/data-core.md
index 0ddd3858c9760..474207aa20460 100644
--- a/docs/reference-guides/data/data-core.md
+++ b/docs/reference-guides/data/data-core.md
@@ -2,7 +2,106 @@
 
 Namespace: `core`.
 
-## Selectors
+## Dynamically generated selectors
+
+There are a number of user-friendly selectors that are wrappers of the more generic `getEntityRecord` and `getEntityRecords` that can be used to retrieve information for the various entities.
+
+### getPostType
+
+Returns the information for a given post type.
+
+_Usage_
+
+    import { useSelect } from '@wordpress/data';
+    import { store as coreDataStore } from '@wordpress/core-data';
+
+    const postType = useSelect(
+    	( select ) => select( coreDataStore ).getPostType( 'post' )
+
+    	// Equivalent to: select( coreDataStore ).getEntityRecord( 'root', 'postType', 'post' )
+    );
+
+_Parameters_
+
+-   postType `string`
+
+_Returns_
+
+-   `EntityRecord | undefined`: Record.
+
+### getPostTypes
+
+Returns the information for post types.
+
+_Usage_
+
+    import { useSelect } from '@wordpress/data';
+    import { store as coreDataStore } from '@wordpress/core-data';
+
+    const postTypes = useSelect( ( select ) => {
+    	return select( coreDataStore ).getPostTypes( { per_page: 4 } );
+
+    	// Equivalent to:
+    	// select( coreDataStore ).getEntityRecords( 'root', 'postType', { per_page: 4 } );
+    } );
+
+_Parameters_
+
+-   _query_ `GetRecordsHttpQuery`: Optional terms query. If requesting specific fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
+
+_Returns_
+
+-   `EntityRecord[] | null`: Records.
+
+### getTaxonomy
+
+Returns information for a given taxonomy.
+
+_Usage_
+
+    import { useSelect } from '@wordpress/data';
+    import { store as coreDataStore } from '@wordpress/core-data';
+
+    const taxonomy = useSelect( ( select ) => {
+    	return select( coreDataStore ).getTaxonomy( 'category' );
+
+    	// Equivalent to:
+    	// select( coreDataStore ).getEntityRecord( 'root', 'taxonomy', 'category' );
+    } );
+
+_Parameters_
+
+-   taxonomy `string`
+
+_Returns_
+
+-   `EntityRecord | undefined`: Record.
+
+### getTaxonomies
+
+Returns information for taxonomies.
+
+_Usage_
+
+    import { useSelect } from '@wordpress/data';
+    import { store as coreDataStore } from '@wordpress/core-data';
+
+    const taxonomies = useSelect( ( select ) => {
+    	return select( coreDataStore ).getTaxonomies( { type: 'post' } );
+
+    	// Equivalent to:
+    	// select( coreDataStore ).getEntityRecords( 'root', 'taxonomy', { type: 'post' } );
+    } );
+
+_Parameters_
+
+-   _query_ `GetRecordsHttpQuery`: Optional terms query. If requesting specific fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
+
+_Returns_
+
+-   `EntityRecord[] | null`: Records.
+
+## Other Selectors
 
 <!-- START TOKEN(Autogenerated selectors|../../../packages/core-data/src/selectors.ts) -->
 
@@ -673,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.
@@ -755,7 +854,7 @@ _Parameters_
 
 ### 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.
 
diff --git a/docs/reference-guides/filters/block-filters.md b/docs/reference-guides/filters/block-filters.md
index ee100431eb512..f1952ef9bf86f 100644
--- a/docs/reference-guides/filters/block-filters.md
+++ b/docs/reference-guides/filters/block-filters.md
@@ -4,15 +4,15 @@ WordPress exposes several APIs that allow you to modify the behavior of existing
 
 ## Registration
 
-The following filters are available to extend block settings 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 modifications to be applied before the metadata gets processed.
 
-The filter takes one parameter:
+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.
 
 The following example sets the `apiVersion` of all blocks to `2`.
 
@@ -28,33 +28,33 @@ Here's a more robust example that disables background color and gradient support
 
 ```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;
-    }
+	
+	// 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;
-    }
+	// 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;
+	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 parameters:
+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.
 
 The following example increases the `apiVersion` for all blocks by `1`.
 
@@ -66,6 +66,45 @@ function example_filter_metadata_registration( $settings, $metadata ) {
 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:
+
+- `$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.
@@ -94,31 +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.
 
-The following filters are available to change the behavior of blocks while editing in the block editor.
+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 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 `React.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:
 
-The following example wraps a Cover block in an outer container div.
+- `element` (`Object`): The element to be modified and returned.
+- `blockType` (`Object`): A block-type definition object. 
+- `attributes` (`Object`): The block's attributes. 
+
+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>;
 }
 
@@ -131,9 +239,13 @@ wp.hooks.addFilter(
 
 ### `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 callback function for this filter receives three parameters:
 
-The filter receives the current `save` element's props, a block type, and the block attributes as arguments. It should return a props object.
+- `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. 
 
 The following example adds a red background by default to all blocks.
 
@@ -152,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/).
 
@@ -160,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',
@@ -184,12 +294,36 @@ 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:_
-
+The following example adds a new Inspector panel for all blocks.
 
 ```js
 const { createHigherOrderComponent } = wp.compose;
@@ -216,13 +350,14 @@ wp.hooks.addFilter(
 );
 ```
 
-
 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
 const withMyPluginControls = createHigherOrderComponent( ( BlockEdit ) => {
 	return ( props ) => {
@@ -244,7 +379,7 @@ const withMyPluginControls = createHigherOrderComponent( ( BlockEdit ) => {
 
 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.
 
-The following example adds a unique class name.
+The following example adds a unique class name to all blocks.
 
 ```js
 const { createHigherOrderComponent } = wp.compose;
@@ -424,7 +559,7 @@ 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 () {
diff --git a/docs/reference-guides/interactivity-api/README.md b/docs/reference-guides/interactivity-api/README.md
index 9648b0118a5aa..3a5bbb84ff159 100644
--- a/docs/reference-guides/interactivity-api/README.md
+++ b/docs/reference-guides/interactivity-api/README.md
@@ -16,17 +16,17 @@ For more information about the genesis of the Interactivity API, check out the [
 
 Use the following links to locate the topic you're interested in. If you have never worked with the Interactivity API before, consider reading through the following resources in the order listed.
 
-- **[Requirements](#requirements-of-the-interactivity-api):** Check this section before you start creating your interactive blocks with the Interactivity API.
-- **[Quick Start Guide](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-quick-start-guide/):** Get a custom block using the Interactivity API up and running in less than one minute.
-- **[Tutorial: A first look at the Interactivity API](https://developer.wordpress.org/news/2024/04/11/a-first-look-at-the-interactivity-api/)** This article from the [WordPress Developer Blog](https://developer.wordpress.org/news/) is a great way to get introduced to the Interactivity API.
-- **[API Reference](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/):** To take a deep dive into how the API works internally, the list of Directives, and how the Store works.
-- **[Docs and Examples](#docs-examples):** Additional resources to learn/read more about the Interactivity API.
+-   **[Requirements](#requirements-of-the-interactivity-api):** Check this section before you start creating your interactive blocks with the Interactivity API.
+-   **[Quick Start Guide](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-quick-start-guide/):** Get a custom block using the Interactivity API up and running in less than one minute.
+-   **[Tutorial: A first look at the Interactivity API](https://developer.wordpress.org/news/2024/04/11/a-first-look-at-the-interactivity-api/)** This article from the [WordPress Developer Blog](https://developer.wordpress.org/news/) is a great way to get introduced to the Interactivity API.
+-   **[Core Concepts](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/core-concepts/)** Gain a better understanding of concepts and mental models related to Interactivity API development from this section.
+-   **[API Reference](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/):** To take a deep dive into how the API works internally, the list of Directives, and how the Store works.
+-   **[Docs and Examples](#docs-examples):** Additional resources to learn/read more about the Interactivity API.
 
 To get a deeper understanding of what the Interactivity API is or find answers to questions you may have about this standard, check the following resources:
 
-- **[About the Interactivity API](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-about/):** To learn more about the API Goals and the reasoning behind the use of a standard to add interactivity to blocks.
-- **[Frequently Asked Questions](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-faq/):** To find responses to some frequently asked questions about the technology behind and alternatives.
-
+-   **[About the Interactivity API](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-about/):** To learn more about the API Goals and the reasoning behind the use of a standard to add interactivity to blocks.
+-   **[Frequently Asked Questions](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-faq/):** To find responses to some frequently asked questions about the technology behind and alternatives.
 
 ## Requirements of the Interactivity API
 
@@ -34,9 +34,9 @@ Interactivity API is included in Core in WordPress 6.5. For versions below, you'
 
 It’s also important to highlight that the block creation workflow doesn’t change, and all the [prerequisites](https://developer.wordpress.org/block-editor/getting-started/devenv/) remain the same. These include:
 
-- [Code Editor](https://developer.wordpress.org/block-editor/getting-started/devenv/#code-editor)
-- [Node.js development tools](https://developer.wordpress.org/block-editor/getting-started/devenv/#node-js-development-tools)
-- [Local WordPress environment (site)](https://developer.wordpress.org/block-editor/getting-started/devenv/#local-wordpress-environment)
+-   [Code Editor](https://developer.wordpress.org/block-editor/getting-started/devenv/#code-editor)
+-   [Node.js development tools](https://developer.wordpress.org/block-editor/getting-started/devenv/#node-js-development-tools)
+-   [Local WordPress environment (site)](https://developer.wordpress.org/block-editor/getting-started/devenv/#local-wordpress-environment)
 
 You can start creating interactions once you set up a block development environment and run WordPress 6.5+ (or Gutenberg 17.5+).
 
@@ -56,7 +56,6 @@ Import the store into your `view.js`. Refer to the [store documentation](https:/
 import { store } from '@wordpress/interactivity';
 ```
 
-
 #### Add `interactivity` support to `block.json`
 
 To indicate that the block [supports](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) the Interactivity API features, add `"interactivity": true` to the `supports` attribute of the block's `block.json` file.
@@ -84,7 +83,6 @@ The Interactivity API provides the `@wordpress/interactivity` Script Module. Jav
 
 The use of `viewScriptModule` also requires the `--experimental-modules` flag for both the [`build`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#build) and [`start`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#start) scripts of `wp-scripts` to ensure a proper build of the Script Modules.
 
-
 ```json
 // package.json
 {
@@ -99,11 +97,9 @@ The use of `viewScriptModule` also requires the `--experimental-modules` flag fo
 
 To "activate" the Interactivity API in a DOM element (and its children), add the [`wp-interactive`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/packages-interactivity-api-reference/#wp-interactive) directive to the DOM element in the block's `render.php` or `save.js` files.
 
-
-
 ```html
 <div data-wp-interactive="myPlugin">
-    <!-- Interactivity API zone -->
+	<!-- Interactivity API zone -->
 </div>
 ```
 
@@ -113,17 +109,16 @@ Refer to the [`wp-interactive` documentation](https://developer.wordpress.org/bl
 
 Here you have some more resources to learn/read more about the Interactivity API:
 
-- [WordPress 6.5 Dev Note](https://make.wordpress.org/core/2024/03/04/interactivity-api-dev-note/)
-- [Merge announcement](https://make.wordpress.org/core/2024/02/19/merge-announcement-interactivity-api/)
-- [Proposal: The Interactivity API – A better developer experience in building interactive blocks](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/)
-- [Interactivity API Discussions](https://github.com/WordPress/gutenberg/discussions/52882), especially the [showcase](https://github.com/WordPress/gutenberg/discussions/55642#discussioncomment-9667164) discussions.   
-- [wpmovies.dev](http://wpmovies.dev/) demo and its [wp-movies-demo](https://github.com/WordPress/wp-movies-demo) repo
-- Examples using the Interactivity API at [block-development-examples](https://github.com/WordPress/block-development-examples):
-  - [`interactivity-api-block-833d15`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/833d15)
-  - [`interactivity-api-countdown-3cd73e`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-countdown-3cd73e)
-  - [`interactivity-api-quiz-1835fa`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-quiz-1835fa)
+-   [WordPress 6.5 Dev Note](https://make.wordpress.org/core/2024/03/04/interactivity-api-dev-note/)
+-   [Merge announcement](https://make.wordpress.org/core/2024/02/19/merge-announcement-interactivity-api/)
+-   [Proposal: The Interactivity API – A better developer experience in building interactive blocks](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/)
+-   [Interactivity API Discussions](https://github.com/WordPress/gutenberg/discussions/52882), especially the [showcase](https://github.com/WordPress/gutenberg/discussions/55642#discussioncomment-9667164) discussions.
+-   [wpmovies.dev](http://wpmovies.dev/) demo and its [wp-movies-demo](https://github.com/WordPress/wp-movies-demo) repo
+-   Examples using the Interactivity API at [block-development-examples](https://github.com/WordPress/block-development-examples):
+    -   [`interactivity-api-block-833d15`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-block-833d15)
+    -   [`interactivity-api-countdown-3cd73e`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-countdown-3cd73e)
+    -   [`interactivity-api-quiz-1835fa`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-quiz-1835fa)
 
 <div class="callout">
     There's a Tracking Issue opened to ease the coordination of the work related to the Interactivity API Docs: <a href="https://github.com/WordPress/gutenberg/issues/53296">Documentation for the Interactivity API - Tracking Issue #53296</a>
 </div>
-
diff --git a/docs/reference-guides/interactivity-api/api-reference.md b/docs/reference-guides/interactivity-api/api-reference.md
index 0003046541532..25498d10bde2e 100644
--- a/docs/reference-guides/interactivity-api/api-reference.md
+++ b/docs/reference-guides/interactivity-api/api-reference.md
@@ -55,7 +55,7 @@ The `wp-interactive` directive "activates" the interactivity for the DOM element
   data-wp-interactive="myPlugin"
   data-wp-context='{ "myColor" : "red", "myBgColor": "yellow" }'
 >
-  <p>I'm interactive now, <span data-wp-style--background-color="context.myBgColor">>and I can use directives!</span></p>
+  <p>I'm interactive now, <span data-wp-style--background-color="context.myBgColor">and I can use directives!</span></p>
   <div>
     <p>I'm also interactive, <span data-wp-style--color="context.myColor">and I can also use directives!</span></p>
   </div>
@@ -66,7 +66,7 @@ The `wp-interactive` directive "activates" the interactivity for the DOM element
   data-wp-interactive='{ "namespace": "myPlugin" }'
   data-wp-context='{ "myColor" : "red", "myBgColor": "yellow" }'
 >
-  <p>I'm interactive now, <span data-wp-style--background-color="context.myBgColor">>and I can use directives!</span></p>
+  <p>I'm interactive now, <span data-wp-style--background-color="context.myBgColor">and I can use directives!</span></p>
   <div>
     <p>I'm also interactive, <span data-wp-style--color="context.myColor">and I can also use directives!</span></p>
   </div>
@@ -84,7 +84,7 @@ 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
+// render.php
 <div data-wp-context='{ "post": { "id": <?php echo $post->ID; ?> } }' >
   <button data-wp-on--click="actions.logId" >
     Click Me!
@@ -110,13 +110,13 @@ store( "myPlugin", {
 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' }">
+<div data-wp-context='{ "foo": "bar" }'>
   <span data-wp-text="context.foo"><!-- Will output: "bar" --></span>
 
-  <div data-wp-context="{ bar: 'baz' }">
+  <div data-wp-context='{ "bar": "baz" }'>
     <span data-wp-text="context.foo"><!-- Will output: "bar" --></span>
 
-    <div data-wp-context="{ foo: 'bob' }">
+    <div data-wp-context='{ "foo": "bob" }'>
       <span data-wp-text="context.foo"><!-- Will output: "bob" --></span>
     </div>
 
@@ -356,8 +356,7 @@ The callback passed as the reference receives [the event](https://developer.mozi
 
 ### `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()`.
+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`
 
@@ -369,8 +368,7 @@ This directive allows you to attach global window events like `resize`, `copy`,
 
 [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`).
+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>
@@ -406,8 +404,7 @@ This directive allows you to attach global document events like `scroll`, `mouse
 
 [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`).
+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>
@@ -501,7 +498,7 @@ The `unique-id` doesn't need to be unique globally. It just needs to be differen
 
 ```html
 <div data-wp-init="callbacks.logTimeInit">
-  <p>Hi!</>
+  <p>Hi!</p>
 </div>
 ```
 
@@ -520,6 +517,8 @@ Here's another example with several `wp-init` directives on the same DOM element
   <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() ),
@@ -776,7 +775,7 @@ Actions are just regular JavaScript functions. Usually triggered by the `data-wp
 ```ts
 const { state, actions } = store("myPlugin", {
   actions: {
-    selectItem: (id?: number) => {
+    selectItem: ( id ) => {
       const context = getContext();
       // `id` is optional here, so this action can be used in a directive.
       state.selected = id || context.id;
@@ -882,10 +881,10 @@ const { state } = store( "myPlugin", {
       GBP: 0.85,
     },
     get amountInUSD() {
-      return state.currencyExchange[ 'USD' ] * state.amount,
+      return state.currencyExchange[ 'USD' ] * state.amount;
     },
     get amountInGBP() {
-      return state.currencyExchange[ 'GBP' ] * state.amount,
+      return state.currencyExchange[ 'GBP' ] * state.amount;
     },
   },
 } );
@@ -965,7 +964,7 @@ This approach enables some functionalities that make directives flexible and pow
 
 *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`.
+The `store` method used to set the store in JavaScript can be imported from `@wordpress/interactivity`.
 
 ```js
 // store
@@ -1111,7 +1110,7 @@ store( "myPlugin", {
   actions: {
     log: () => {
       const element = getElement();
-			 // Logs "false"
+			 // Logs attributes
       console.log('element attributes => ', element.attributes)
     },
   },
@@ -1122,7 +1121,7 @@ The code will log:
 
 ```json
 {
-	"data-wp-on--click": 'actions.increaseCounter',
+	"data-wp-on--click": 'actions.log',
 	"children": ['Log'],
 	"onclick": event => { evaluate(entry, event); }
 }
@@ -1147,12 +1146,13 @@ store('mySliderPlugin', {
 				3_000
 			);
 		},
+  },
 })
 ```
 
 ## Server functions
 
-The Interactivity API comes with handy functions on the PHP part. Apart from [setting the store via server](#on-the-server-side), there is also a function to get and set Interactivity related config variables.
+The Interactivity API comes with handy functions that allow you to initialize and reference configuration options on the server. This is necessary to feed the initial data that the Server Directive Processing will use to modify the HTML markup before it's send to the browser. It is also a great way to leverage many of WordPress's APIs, like nonces, AJAX, and translations.
 
 ### wp_interactivity_config
 
@@ -1181,6 +1181,53 @@ This config can be retrieved on the client:
 const { showLikeButton } = getConfig();
 ```
 
+### wp_interactivity_state
+
+`wp_interactivity_state` allows the initialization of the global state on the server, which will be used to process the directives on the server and then will be merged with any global state defined in the client.
+
+Initializing the global state on the server also allows you to use many critical WordPress APIs, including [AJAX](https://developer.wordpress.org/plugins/javascript/ajax/), or [nonces](https://developer.wordpress.org/plugins/javascript/enqueuing/#nonce).
+
+The `wp_interactivity_state` function receives two arguments, a string with the namespace that will be used as a reference and an associative array containing the values.
+
+Here is an example of passing the WP Admin AJAX endpoint with a nonce.
+
+```php
+// render.php
+
+wp_interactivity_state(
+	'myPlugin',
+	array(
+		'ajaxUrl' => admin_url( 'admin-ajax.php' ),
+		'nonce'   => wp_create_nonce( 'myPlugin_nonce' ),
+	),
+);
+```
+
+```js
+// view.js
+
+const { state } = store( 'myPlugin', {
+	actions: {
+		*doSomething() {
+			try {
+				const formData = new FormData();
+				formData.append( 'action', 'do_something' );
+				formData.append( '_ajax_nonce', state.nonce );
+
+				const data = yield fetch( state.ajaxUrl, {
+					method: 'POST',
+					body: formData,
+				} ).then( ( response ) => response.json() );
+					console.log( 'Server data!', data );
+				} catch ( e ) {
+					// Something went wrong!
+				}
+			},
+		},
+	}
+);
+```
+
 ### wp_interactivity_process_directives
 
 `wp_interactivity_process_directives` returns the updated HTML after the directives have been processed.
@@ -1198,7 +1245,7 @@ echo $processed_html;
 
 will output:
 ```html
-<div data-wp-text="create-block::state.greeting">Hello, World!</div>
+<div data-wp-text="myPlugin::state.greeting">Hello, World!</div>
 ```
 
 ### wp_interactivity_data_wp_context
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 0000000000000..695a4d622f6c5
--- /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 0000000000000..075c2cb977bdf
--- /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 0000000000000..3760fdf386780
--- /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 0000000000000..a2b39fc4c77fb
--- /dev/null
+++ b/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md
@@ -0,0 +1,740 @@
+# Understanding global state, local context and derived state
+
+The Interactivity API offers a powerful framework for creating interactive blocks. To make the most of its capabilities, it's crucial to understand when to use global state, local context, or derived state. This guide will clarify these concepts and provide practical examples to help you decide when to use each one.
+
+Let's start with a brief definition of global state, local context and derived state.
+
+-   **Global state:** Global data that can be accessed and modified by any interactive block on the page, allowing different parts of your interactive blocks to stay in sync.
+-   **Local context:** Local data defined within a specific element in the HTML structure, accessible only to that element and its children, providing independent state for individual blocks.
+-   **Derived state:** Computed values based on global state or local context, dynamically calculated on-demand to ensure consistent data representation without storing redundant data.
+
+Let's now dive into each of these concepts to study them in more detail and provide some examples.
+
+## Global state
+
+**Global state** in the Interactivity API refers to global data that can be accessed and modified by any interactive block on the page. It serves as a shared information hub, allowing different parts of your blocks to communicate and stay in sync. Global state is the ideal mechanism for exchanging information between interactive blocks, regardless of their position in the DOM tree.
+
+You should use global state when:
+
+-   You need to share data between multiple interactive blocks that are not directly related in the DOM hierarchy.
+-   You want to maintain a single source of truth for certain data across all your interactive blocks.
+-   You're dealing with data that affects multiple parts of your UI simultaneously.
+-   You want to implement features that are global for the page.
+
+### Working with global state
+
+-   **Initializing the global state**
+
+    Typically, the initial global state values should be defined on the server using the `wp_interactivity_state` function:
+
+    ```php
+    // Populates the initial global state values.
+    wp_interactivity_state( 'myPlugin', array(
+      'isDarkTheme' => true,
+      'show'        => false,
+      'helloText'   => __( 'world' ),
+    ));
+    ```
+
+    These initial global state values will be used during the rendering of the page in PHP to populate the HTML markup that is sent to the browser.
+
+    -   HTML markup written in the PHP file by the developer:
+
+        ```html
+        <div
+        	data-wp-interactive="myPlugin"
+        	data-wp-class--is-dark-theme="state.isDarkTheme"
+        	class="my-plugin"
+        >
+        	<div data-wp-bind--hidden="!state.show">
+        		Hello <span data-wp-text="state.helloText"></span>
+        	</div>
+        	<button data-wp-on-async--click="actions.toggle">Toggle</button>
+        </div>
+        ```
+
+    -   HTML markup after the directives have been processed and it is ready to be sent to the browser:
+
+        ```html
+        <div
+        	data-wp-interactive="myPlugin"
+        	data-wp-class--is-dark-theme="state.isDarkTheme"
+        	class="my-plugin is-dark-theme"
+        >
+        	<div hidden data-wp-bind--hidden="!state.show">
+        		Hello <span data-wp-text="state.helloText">world</span>
+        	</div>
+        	<button data-wp-on-async--click="actions.toggle">Toggle</button>
+        </div>
+        ```
+
+    _Please, visit [the Server-side Rendering guide](/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 are a global tax rate and local product prices and calculate the final price, including tax.
+
+```html
+<div
+	data-wp-interactive="myProductPlugin"
+	data-wp-context='{ "priceWithoutTax": 100 }'
+>
+	<p>Product Price: $<span data-wp-text="context.priceWithoutTax"></span></p>
+	<p>Tax Rate: <span data-wp-text="state.taxRatePercentage"></span></p>
+	<p>Price (inc. tax): $<span data-wp-text="state.priceWithTax"></span></p>
+</div>
+```
+
+```js
+const { state } = store( 'myProductPlugin', {
+	state: {
+		taxRate: 0.21,
+		get taxRatePercentage() {
+			return `${ state.taxRate * 100 }%`;
+		},
+		get priceWithTax() {
+			const { priceWithoutTax } = getContext();
+			return price * ( 1 + state.taxRate );
+		},
+	},
+	actions: {
+		updateTaxRate( event ) {
+			// Updates the global tax rate.
+			state.taxRate = event.target.value;
+		},
+		updatePrice( event ) {
+			// Updates the local product price.
+			const context = getContext();
+			context.priceWithoutTax = event.target.value;
+		},
+	},
+} );
+```
+
+In this example, `priceWithTax` is derived from both the global `taxRate` and the local `priceWithoutTax`. Every time you update the global state or local context through the `updateTaxRate` or `updatePrice` actions, the Interactivity API recomputes the derived state and updates the necessary parts of the DOM.
+
+By using derived state, you create a more maintainable and less error-prone codebase. It ensures that related state values are always in sync, reduces the complexity of your actions, and makes your code more declarative and easier to reason about.
+
+## Conclusion
+
+Remember, the key to effective state management is to keep your state minimal and avoid redundancy. Use derived state to compute values dynamically, and choose between global state and local context based on the scope and requirements of your data. This will lead to a cleaner, more robust architecture that is easier to debug and maintain.
diff --git a/docs/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 0000000000000..ed0bdd88211d1
--- /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-faq.md b/docs/reference-guides/interactivity-api/iapi-faq.md
index 5e5036779baae..dea7bc1d4367b 100644
--- a/docs/reference-guides/interactivity-api/iapi-faq.md
+++ b/docs/reference-guides/interactivity-api/iapi-faq.md
@@ -66,7 +66,7 @@ To summarize, using the Interactivity API rather than just using React comes wit
 
 - 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](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/what-is-interactivity-api#why-a-standard).
+- 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?
diff --git a/docs/reference-guides/slotfills/README.md b/docs/reference-guides/slotfills/README.md
index 8b56ed4ce98b4..874a3a69096b8 100644
--- a/docs/reference-guides/slotfills/README.md
+++ b/docs/reference-guides/slotfills/README.md
@@ -9,9 +9,9 @@ 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.editor`.
-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:
@@ -29,6 +29,239 @@ 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.
@@ -70,11 +303,9 @@ export default function PostSummary( { onActionPerformed } ) {
 	const { isRemovedPostStatusPanel } = useSelect( ( select ) => {
 		// We use isEditorPanelRemoved to hide the panel if it was programmatically removed. We do
 		// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
-		const { isEditorPanelRemoved, getCurrentPostType } =
-			select( editorStore );
+		const { isEditorPanelRemoved } = select( editorStore );
 		return {
 			isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ),
-			postType: getCurrentPostType(),
 		};
 	}, [] );
 
@@ -85,11 +316,7 @@ export default function PostSummary( { onActionPerformed } ) {
 					<>
 						<VStack spacing={ 4 }>
 							<PostCardPanel
-								actions={
-									<PostActions
-										onActionPerformed={ onActionPerformed }
-									/>
-								}
+								onActionPerformed={ onActionPerformed }
 							/>
 							<PostFeaturedImagePanel withPanelBody={ false } />
 							<PostExcerptPanel />
diff --git a/docs/reference-guides/slotfills/main-dashboard-button.md b/docs/reference-guides/slotfills/main-dashboard-button.md
index a333b0f39a4e1..b55ed50648db1 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 8e17893b54642..aa1eecb293261 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-sidebar-more-menu-item.md b/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md
index 76fb3018de7b6..4a4ff98697b5f 100644
--- a/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md
+++ b/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md
@@ -1,31 +1,78 @@
 # 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 { registerPlugin } from '@wordpress/plugins';
+import { __ } from '@wordpress/i18n';
 import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor';
+import {
+	PanelBody,
+	Button,
+	TextControl,
+	SelectControl,
+} from '@wordpress/components';
+import { registerPlugin } from '@wordpress/plugins';
+import { useState } from '@wordpress/element';
 import { image } from '@wordpress/icons';
 
-const PluginSidebarMoreMenuItemTest = () => (
-	<>
-		<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>
-	</>
-);
-
-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
+						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 8fe274414905b..9bf911b3bb13f 100644
--- a/docs/reference-guides/slotfills/plugin-sidebar.md
+++ b/docs/reference-guides/slotfills/plugin-sidebar.md
@@ -1,30 +1,67 @@
 # 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
-import { registerPlugin } from '@wordpress/plugins';
+```jsx
+import { __ } from '@wordpress/i18n';
 import { PluginSidebar } from '@wordpress/editor';
-import { image } from '@wordpress/icons';
+import {
+	PanelBody,
+	Button,
+	TextControl,
+	SelectControl,
+} from '@wordpress/components';
+import { registerPlugin } from '@wordpress/plugins';
+import { useState } from '@wordpress/element';
+
+const PluginSidebarExample = () => {
+	const [ text, setText ] = useState( '' );
+	const [ select, setSelect ] = useState( 'a' );
 
-const PluginSidebarTest = () => (
-	<PluginSidebar name="plugin-sidebar-test" title="My Plugin" icon={ image }>
-		<p>Plugin Sidebar</p>
-	</PluginSidebar>
-);
+	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
+					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-test', { render: PluginSidebarTest } );
+// 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/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md
index d3f0b111d994d..95f2e047dd0e3 100644
--- a/docs/reference-guides/theme-json-reference/theme-json-living.md
+++ b/docs/reference-guides/theme-json-reference/theme-json-living.md
@@ -21,8 +21,23 @@ For example, a schema for WordPress 5.8 is available at <code>https://schemas.wp
 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
 
@@ -36,17 +51,16 @@ Setting that enables the following UI tools:
 - spacing: blockGap, margin, padding
 - typography: lineHeight
 
-
 ---
 
-### useRootPaddingAwareAlignments
-
-_**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.
+### background
 
-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` |
 
 ---
 
@@ -54,23 +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 |  |
-
----
-
-### shadow
-
-Settings related to shadows.
-
-| Property  | Type   | Default | Props  |
-| ---    | ---    | ---    |---   |
-| defaultPresets | boolean | true |  |
-| presets | array |  | name, shadow, slug |
+| 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` |
 
 ---
 
@@ -78,34 +81,23 @@ Settings related to shadows.
 
 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 |  |
-| caption | boolean | true |  |
-
----
-
-### background
-
-Settings related to background.
-
-| Property  | Type   | Default | Props  |
-| ---    | ---    | ---    |---   |
-| backgroundImage | boolean | false |  |
-| backgroundSize | boolean | false |  |
+| 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` |
 
 ---
 
@@ -113,12 +105,12 @@ Settings related to background.
 
 Settings related to dimensions.
 
-| Property  | Type   | Default | Props  |
-| ---    | ---    | ---    |---   |
-| aspectRatio | boolean | false |  |
-| defaultAspectRatios | boolean | true |  |
-| aspectRatios | array |  | name, ratio, slug |
-| 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` |
 
 ---
 
@@ -126,12 +118,12 @@ Settings related to dimensions.
 
 Settings related to layout.
 
-| Property  | Type   | Default | Props  |
-| ---    | ---    | ---    |---   |
-| contentSize | string |  |  |
-| wideSize | string |  |  |
-| allowEditing | boolean | true |  |
-| allowCustomContentAndWideSize | boolean | true |  |
+| 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` |
 
 ---
 
@@ -139,10 +131,10 @@ Settings related to layout.
 
 Settings related to the lightbox.
 
-| Property  | Type   | Default | Props  |
-| ---    | ---    | ---    |---   |
-| enabled | boolean |  |  |
-| allowEditing | boolean |  |  |
+| 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` |  |
 
 ---
 
@@ -150,9 +142,20 @@ Settings related to the lightbox.
 
 Settings related to position.
 
-| Property  | Type   | Default | Props  |
-| ---    | ---    | ---    |---   |
-| sticky | boolean | false |  |
+| 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 } ]` |  |
 
 ---
 
@@ -160,16 +163,16 @@ Settings related to position.
 
 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 |  |
-| defaultSpacingSizes | 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 }` |  |
 
 ---
 
@@ -177,23 +180,23 @@ Settings related to spacing.
 
 Settings related to typography.
 
-| Property  | Type   | Default | Props  |
-| ---    | ---    | ---    |---   |
-| defaultFontSizes | boolean | true |  |
-| customFontSize | boolean | true |  |
-| fontStyle | boolean | true |  |
-| fontWeight | boolean | true |  |
-| fluid | object, boolean | false | _{maxViewportWidth, minFontSize, minViewportWidth}_  |
-| letterSpacing | boolean | true |  |
-| lineHeight | boolean | false |  |
-| textAlign | boolean | true |  |
-| 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 |
+| 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 } ]` |  |
 
 ---
 
@@ -201,22 +204,23 @@ 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  | Type   |  Props  |
-| ---       | ---    |---   |
-| backgroundImage | string, object |  |
-| backgroundPosition | string, object |  |
-| backgroundRepeat | string, object |  |
-| backgroundSize | string, object |  |
-| backgroundAttachment | string, object |  |
+| 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 }` |
 
 ---
 
@@ -224,16 +228,16 @@ Background styles.
 
 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 |
+| 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 }` |
 
 ---
 
@@ -241,64 +245,51 @@ Border styles.
 
 Color styles.
 
-| Property  | Type   |  Props  |
-| ---       | ---    |---   |
-| background | string, object |  |
-| gradient | string, object |  |
-| text | string, object |  |
+| 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 }` |
 
 ---
 
-### dimensions
-
-Dimensions styles
+### css
 
-| Property  | Type   |  Props  |
-| ---       | ---    |---   |
-| aspectRatio | string, object |  |
-| minHeight | string, object |  |
+Sets custom CSS to apply styling not covered by other theme.json properties.
 
 ---
 
-### spacing
+### dimensions
 
-Spacing styles.
+Dimensions styles.
 
-| Property  | Type   |  Props  |
-| ---       | ---    |---   |
-| blockGap | string, object |  |
-| margin | object | bottom, left, right, top |
-| padding | object | bottom, left, right, top |
+| Property | Description | Type |
+| -------- | ----------- | ---- |
+| aspectRatio | Sets the `aspect-ratio` CSS property. | `string`, `{ ref }` |
+| minHeight | Sets the `min-height` CSS property. | `string`, `{ ref }` |
 
 ---
 
-### typography
+### filter
 
-Typography styles.
+CSS and SVG filter styles.
 
-| Property  | Type   |  Props  |
-| ---       | ---    |---   |
-| fontFamily | string, object |  |
-| fontSize | string, object |  |
-| fontStyle | string, object |  |
-| fontWeight | string, object |  |
-| letterSpacing | string, object |  |
-| lineHeight | string, object |  |
-| textAlign | string |  |
-| textColumns | string |  |
-| textDecoration | string, object |  |
-| writingMode | string, object |  |
-| textTransform | string, object |  |
+| Property | Description | Type |
+| -------- | ----------- | ---- |
+| duotone | Sets the duotone filter. | `string`, `{ ref }` |
 
 ---
 
-### filter
+### outline
 
-CSS and SVG filter styles.
+Outline styles.
 
-| Property  | Type   |  Props  |
-| ---       | ---    |---   |
-| duotone | string, object |  |
+| 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 }` |
 
 ---
 
@@ -306,58 +297,64 @@ CSS and SVG filter styles.
 
 Box shadow styles.
 
-
 ---
 
-### outline
+### spacing
 
-Outline styles.
+Spacing styles.
 
-| Property  | Type   |  Props  |
-| ---       | ---    |---   |
-| color | string, object |  |
-| offset | string, object |  |
-| style | string, object |  |
-| width | string, object |  |
+| 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 }` |
 
 ---
 
-### css
+### typography
 
-Sets custom CSS to apply styling not covered by other theme.json properties.
+Typography styles.
 
+| 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.
 
-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 |
-
+| -------- | ----------- | ---- |
+| 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.
 
-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 |
-
+| -------- | ----------- | ---- |
+| 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
+## patterns
 
 An array of pattern slugs to be registered from the Pattern Directory.
-Type: `array`.
 
+Type: `[ string ]`.
 
 <!-- END TOKEN Autogenerated - DO NOT EDIT -->
diff --git a/docs/toc.json b/docs/toc.json
index fa80ee6c4f440..0d4689811b26e 100644
--- a/docs/toc.json
+++ b/docs/toc.json
@@ -204,6 +204,22 @@
 			},
 			{
 				"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": []
 					},
diff --git a/gutenberg.php b/gutenberg.php
index 0d21366bcc29d..c9f4a8fc58020 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -3,9 +3,9 @@
  * Plugin Name: Gutenberg
  * Plugin URI: https://github.com/WordPress/gutenberg
  * 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.4
+ * Requires at least: 6.5
  * Requires PHP: 7.2
- * Version: 18.8.0
+ * Version: 19.4.0-rc.1
  * 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.5' );
+
 
 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' ) );
@@ -67,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/lib/README.md b/lib/README.md
index 8e22f676a153d..9ee05efccffe9 100644
--- a/lib/README.md
+++ b/lib/README.md
@@ -192,12 +192,12 @@ Existing comments in `lib/load.php` should act as a guide.
 
 ## When to sync changes to Gutenberg PHP with Core and vice versa
 
-If you've changed or added PHP files to the Gutenberg plugin, you'll need to confirm whether the changes are to be synced to WordPress Core, and therefore featured in the next release of WordPress.
+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.
 
-The Gutenberg GitHub pull request in question should be labeled with the `Needs PHP backport` label if the changes are to be synced to Core.
+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/).
 
-If so, it is recommended to 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) soon after your pull request is merged.
+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 (often called "backporting") to Gutenberg. The relevant Gutenberg GitHub pull request should be labeled with the `Backport from WordPress Core` label.
+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-supports/background.php b/lib/block-supports/background.php
index 811608127f47e..a1d99133c1fc0 100644
--- a/lib/block-supports/background.php
+++ b/lib/block-supports/background.php
@@ -62,7 +62,7 @@ function gutenberg_render_background_support( $block_content, $block ) {
 		$background_styles['backgroundSize'] = $background_styles['backgroundSize'] ?? 'cover';
 		// If the background size is set to `contain` and no position is set, set the position to `center`.
 		if ( 'contain' === $background_styles['backgroundSize'] && ! $background_styles['backgroundPosition'] ) {
-			$background_styles['backgroundPosition'] = 'center';
+			$background_styles['backgroundPosition'] = '50% 50%';
 		}
 	}
 
diff --git a/lib/block-supports/block-style-variations.php b/lib/block-supports/block-style-variations.php
index d1a63915f1288..3942fed24b98a 100644
--- a/lib/block-supports/block-style-variations.php
+++ b/lib/block-supports/block-style-variations.php
@@ -11,12 +11,15 @@
  *
  * @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 ) );
 }
 
@@ -119,7 +122,7 @@ function gutenberg_render_block_style_variation_support_styles( $parsed_block )
 	// theme_json data.
 	gutenberg_resolve_block_style_variation_ref_values( $variation_data, $theme_json );
 
-	$variation_instance = gutenberg_create_block_style_variation_instance_name( $parsed_block, $variation );
+	$variation_instance = wp_unique_id( $variation . '--' );
 	$class_name         = "is-style-$variation_instance";
 	$updated_class_name = $parsed_block['attrs']['className'] . " $class_name";
 
@@ -191,7 +194,7 @@ function gutenberg_render_block_style_variation_support_styles( $parsed_block )
 		return $parsed_block;
 	}
 
-	wp_register_style( 'block-style-variation-styles', false, array( 'global-styles', 'wp-block-library' ) );
+	wp_register_style( 'block-style-variation-styles', false, array( 'wp-block-library', 'global-styles' ) );
 	wp_add_inline_style( 'block-style-variation-styles', $variation_styles );
 
 	/*
@@ -224,11 +227,9 @@ function gutenberg_render_block_style_variation_class_name( $block_content, $blo
 
 	/*
 	 * Matches a class prefixed by `is-style`, followed by the
-	 * variation slug, then `--`, and finally a hash.
-	 *
-	 * See `gutenberg_create_block_style_variation_instance_name` for class generation.
+	 * variation slug, then `--`, and finally an instance number.
 	 */
-	preg_match( '/\bis-style-(\S+?--\w+)\b/', $block['attrs']['className'], $matches );
+	preg_match( '/\bis-style-(\S+?--\d+)\b/', $block['attrs']['className'], $matches );
 
 	if ( empty( $matches ) ) {
 		return $block_content;
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 350d158cd6e24..ddbd1917c3054 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -1019,27 +1019,10 @@ function gutenberg_restore_group_inner_container( $block_content, $block ) {
 	$processor      = new WP_HTML_Tag_Processor( $block_content );
 
 	if ( $processor->next_tag( array( 'class_name' => 'wp-block-group' ) ) ) {
-		if ( method_exists( $processor, 'class_list' ) ) {
-			foreach ( $processor->class_list() as $class_name ) {
-				if ( str_contains( $class_name, 'layout' ) ) {
-					array_push( $layout_classes, $class_name );
-					$processor->remove_class( $class_name );
-				}
-			}
-		} else {
-			/*
-			* The class_list method was only added in 6.4 so this needs a temporary fallback.
-			* This fallback should be removed when the minimum supported version is 6.4.
-			*/
-			$classes = $processor->get_attribute( 'class' );
-			if ( $classes ) {
-				$classes = explode( ' ', $classes );
-				foreach ( $classes as $class_name ) {
-					if ( str_contains( $class_name, 'is-layout-' ) ) {
-						array_push( $layout_classes, $class_name );
-						$processor->remove_class( $class_name );
-					}
-				}
+		foreach ( $processor->class_list() as $class_name ) {
+			if ( str_contains( $class_name, 'layout' ) ) {
+				array_push( $layout_classes, $class_name );
+				$processor->remove_class( $class_name );
 			}
 		}
 	}
diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
index fa2a7b81e94e2..a4719b7bdd409 100644
--- a/lib/block-supports/typography.php
+++ b/lib/block-supports/typography.php
@@ -449,6 +449,7 @@ function gutenberg_get_computed_fluid_typography_value( $args = array() ) {
  * @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.
@@ -468,10 +469,11 @@ function gutenberg_get_typography_font_size_value( $preset, $settings = array()
 	}
 
 	/*
-	 * 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'];
 	}
 
@@ -489,20 +491,25 @@ function gutenberg_get_typography_font_size_value( $preset, $settings = array()
 	}
 
 	// Fallback to global settings as default.
-	$global_settings             = gutenberg_get_global_settings();
-	$settings                    = wp_parse_args(
+	$global_settings     = gutenberg_get_global_settings();
+	$settings            = wp_parse_args(
 		$settings,
 		$global_settings
 	);
-	$typography_settings         = isset( $settings['typography'] ) ? $settings['typography'] : array();
-	$should_use_fluid_typography = ! empty( $typography_settings['fluid'] );
+	$typography_settings = $settings['typography'] ?? array();
 
-	if ( ! $should_use_fluid_typography ) {
+	/*
+	 * 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'];
 	}
 
-	// $typography_settings['fluid'] can be a bool or an array. Normalize to array.
-	$fluid_settings  = is_array( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array();
+	$fluid_settings  = isset( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array();
 	$layout_settings = isset( $settings['layout'] ) ? $settings['layout'] : array();
 
 	// Defaults.
@@ -522,14 +529,6 @@ function gutenberg_get_typography_font_size_value( $preset, $settings = array()
 	$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;
 
-	// Font sizes.
-	$fluid_font_size_settings = isset( $preset['fluid'] ) ? $preset['fluid'] : null;
-
-	// A font size has explicitly bypassed fluid calculations.
-	if ( false === $fluid_font_size_settings ) {
-		return $preset['size'];
-	}
-
 	// 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;
diff --git a/lib/class-wp-rest-global-styles-controller-gutenberg.php b/lib/class-wp-rest-global-styles-controller-gutenberg.php
index 421408e6f20b4..1f6543fa18428 100644
--- a/lib/class-wp-rest-global-styles-controller-gutenberg.php
+++ b/lib/class-wp-rest-global-styles-controller-gutenberg.php
@@ -13,25 +13,30 @@
 /**
  * Base Global Styles REST API Controller.
  */
-class WP_REST_Global_Styles_Controller_Gutenberg extends WP_REST_Controller {
+class WP_REST_Global_Styles_Controller_Gutenberg extends WP_REST_Posts_Controller {
 
 	/**
-	 * Post type.
+	 * Whether the controller supports batching.
 	 *
-	 * @since 5.9.0
-	 * @var string
+	 * @since 6.6.0
+	 * @var array
 	 */
-	protected $post_type;
+	protected $allow_batch = array( 'v1' => false );
 
 	/**
 	 * Constructor.
 	 *
 	 * @since 5.9.0
 	 */
-	public function __construct() {
-		$this->namespace = 'wp/v2';
-		$this->rest_base = 'global-styles';
-		$this->post_type = 'wp_global_styles';
+	/**
+	 * Constructor.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param string $post_type Post type.
+	 */
+	public function __construct( $post_type = 'wp_global_styles' ) {
+		parent::__construct( $post_type );
 	}
 
 	/**
@@ -54,8 +59,14 @@ public function register_routes() {
 							'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.
@@ -65,8 +76,10 @@ public function register_routes() {
 			sprintf(
 				'/%s/themes/(?P<stylesheet>%s)',
 				$this->rest_base,
-				// Matches theme's directory: `/themes/<subdirectory>/<theme>/` or `/themes/<theme>/`.
-				// Excludes invalid directory name characters: `/:<>*?"|`.
+				/*
+				 * Matches theme's directory: `/themes/<subdirectory>/<theme>/` or `/themes/<theme>/`.
+				 * Excludes invalid directory name characters: `/:<>*?"|`.
+				 */
 				'[^\/:<>\*\?"\|]+(?:\/[^\/:<>\*\?"\|]+)?'
 			),
 			array(
@@ -81,8 +94,14 @@ public function register_routes() {
 							'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.
@@ -108,8 +127,14 @@ public function register_routes() {
 					'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' ),
-			)
+				'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
 		);
 	}
 
@@ -196,28 +221,10 @@ public function get_item_permissions_check( $request ) {
 	 * @param WP_Post $post Post object.
 	 * @return bool Whether the post can be read.
 	 */
-	protected function check_read_permission( $post ) {
+	public function check_read_permission( $post ) {
 		return current_user_can( 'read_post', $post->ID );
 	}
 
-	/**
-	 * Returns the given global styles config.
-	 *
-	 * @since 5.9.0
-	 *
-	 * @param WP_REST_Request $request The request instance.
-	 *
-	 * @return WP_REST_Response|WP_Error
-	 */
-	public function get_item( $request ) {
-		$post = $this->get_post( $request['id'] );
-		if ( is_wp_error( $post ) ) {
-			return $post;
-		}
-
-		return $this->prepare_item_for_response( $post, $request );
-	}
-
 	/**
 	 * Checks if a given request has access to write a single global styles config.
 	 *
@@ -243,61 +250,12 @@ public function update_item_permissions_check( $request ) {
 		return true;
 	}
 
-	/**
-	 * Checks if a global style can be edited.
-	 *
-	 * @since 5.9.0
-	 *
-	 * @param WP_Post $post Post object.
-	 * @return bool Whether the post can be edited.
-	 */
-	protected function check_update_permission( $post ) {
-		return current_user_can( 'edit_post', $post->ID );
-	}
-
-	/**
-	 * Updates a single global style config.
-	 *
-	 * @since 5.9.0
-	 * @since 6.2.0 Added validation of styles.css property.
-	 *
-	 * @param WP_REST_Request $request Full details about the request.
-	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
-	 */
-	public function update_item( $request ) {
-		$post_before = $this->get_post( $request['id'] );
-		if ( is_wp_error( $post_before ) ) {
-			return $post_before;
-		}
-
-		$changes = $this->prepare_item_for_database( $request );
-		if ( is_wp_error( $changes ) ) {
-			return $changes;
-		}
-
-		$result = wp_update_post( wp_slash( (array) $changes ), true, false );
-		if ( is_wp_error( $result ) ) {
-			return $result;
-		}
-
-		$post          = get_post( $request['id'] );
-		$fields_update = $this->update_additional_fields_for_object( $post, $request );
-		if ( is_wp_error( $fields_update ) ) {
-			return $fields_update;
-		}
-
-		wp_after_insert_post( $post, true, $post_before );
-
-		$response = $this->prepare_item_for_response( $post, $request );
-
-		return rest_ensure_response( $response );
-	}
-
 	/**
 	 * Prepares a single global styles config for update.
 	 *
 	 * @since 5.9.0
 	 * @since 6.2.0 Added validation of styles.css property.
+	 * @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.
@@ -394,10 +352,12 @@ public function prepare_item_for_response( $post, $request ) { // phpcs:ignore V
 		}
 		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 ) ) {
@@ -426,7 +386,7 @@ public function prepare_item_for_response( $post, $request ) { // phpcs:ignore V
 			}
 			$response->add_links( $links );
 			if ( ! empty( $links['self']['href'] ) ) {
-				$actions = $this->get_available_actions();
+				$actions = $this->get_available_actions( $post, $request );
 				$self    = $links['self']['href'];
 				foreach ( $actions as $rel ) {
 					$response->add_link( $rel, $self );
@@ -450,9 +410,12 @@ protected function prepare_links( $id ) {
 		$base = sprintf( '%s/%s', $this->namespace, $this->rest_base );
 
 		$links = array(
-			'self' => 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' ) ) {
@@ -473,13 +436,16 @@ protected function prepare_links( $id ) {
 	 *
 	 * @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() {
+	protected function get_available_actions( $post, $request ) {  // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
 		$rels = array();
 
-		$post_type = get_post_type_object( $this->post_type );
+		$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';
 		}
@@ -491,21 +457,6 @@ protected function get_available_actions() {
 		return $rels;
 	}
 
-	/**
-	 * Overwrites the default protected title format.
-	 *
-	 * By default, WordPress will show password protected posts with a title of
-	 * "Protected: %s", as the REST API communicates the protected status of a post
-	 * in a machine readable format, we remove the "Protected: " prefix.
-	 *
-	 * @since 5.9.0
-	 *
-	 * @return string Protected title format.
-	 */
-	public function protected_title_format() {
-		return '%s';
-	}
-
 	/**
 	 * Retrieves the query params for the global styles collection.
 	 *
@@ -581,27 +532,39 @@ public function get_item_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.
-		 * 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(),
-				)
-			);
+		if ( current_user_can( 'edit_theme_options' ) ) {
+			return true;
 		}
 
-		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(),
+			)
+		);
 	}
 
 	/**
@@ -623,8 +586,8 @@ public function get_theme_item( $request ) {
 		}
 
 		$theme  = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( 'theme' );
-		$data   = array();
 		$fields = $this->get_fields_for_response( $request );
+		$data   = array();
 
 		if ( rest_is_field_included( 'settings', $fields ) ) {
 			$data['settings'] = $theme->get_settings();
@@ -665,23 +628,8 @@ public function get_theme_item( $request ) {
 	 * @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;
+	public function get_theme_items_permissions_check( $request ) {
+		return $this->get_theme_item_permissions_check( $request );
 	}
 
 	/**
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 65a5e5fe4b957..756ef06c80aa8 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -1443,9 +1443,16 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets'
 	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.
@@ -1458,11 +1465,24 @@ protected function process_blocks_custom_css( $css, $selector ) {
 				}
 				$nested_selector = $part[0];
 				$css_value       = $part[1];
-				$part_selector   = str_starts_with( $nested_selector, ' ' )
+
+				/*
+				 * 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)";
-				$processed_css  .= $final_selector . '{' . trim( $css_value ) . '}';
+				$final_selector = ":root :where($part_selector)$pseudo_part";
+
+				$processed_css .= $final_selector . '{' . trim( $css_value ) . '}';
 			}
 		}
 		return $processed_css;
@@ -1724,7 +1744,7 @@ protected function get_layout_styles( $block_metadata, $types = array() ) {
 										$spacing_rule['selector']
 									);
 								} else {
-									$format          = static::ROOT_BLOCK_SELECTOR === $selector ? '.%2$s %3$s' : '%1$s-%2$s %3$s';
+									$format          = static::ROOT_BLOCK_SELECTOR === $selector ? ':root :where(.%2$s)%3$s' : ':root :where(%1$s-%2$s)%3$s';
 									$layout_selector = sprintf(
 										$format,
 										$selector,
@@ -2309,7 +2329,7 @@ protected static function flatten_tree( $tree, $prefix = '', $token = '--' ) {
 	 * ```php
 	 * array(
 	 *   'name'  => 'property_name',
-	 *   'value' => 'property_value,
+	 *   'value' => 'property_value',
 	 * )
 	 * ```
 	 *
@@ -2318,6 +2338,7 @@ protected static function flatten_tree( $tree, $prefix = '', $token = '--' ) {
 	 * @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters.
 	 * @since 6.5.0 Output a `min-height: unset` rule when `aspect-ratio` is set.
 	 * @since 6.6.0 Passing current theme JSON settings to wp_get_typography_font_size_value(). Using style engine to correctly fetch background CSS values.
+	 * @since 6.7.0 Allow ref resolution of background properties.
 	 *
 	 * @param array   $styles Styles to process.
 	 * @param array   $settings Theme settings.
@@ -2361,10 +2382,28 @@ protected static function compute_style_properties( $styles, $settings = array()
 				$root_variable_duplicates[] = substr( $css_property, $root_style_length );
 			}
 
-			// Processes background styles.
-			if ( 'background' === $value_path[0] && isset( $styles['background'] ) ) {
-				$background_styles = gutenberg_style_engine_get_styles( array( 'background' => $styles['background'] ) );
-				$value             = $background_styles['declarations'][ $css_property ] ?? $value;
+			/*
+			 * 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.
@@ -2432,6 +2471,7 @@ protected static function compute_style_properties( $styles, $settings = array()
 	 * @since 5.8.0
 	 * @since 5.9.0 Added support for values of array type, which are returned as is.
 	 * @since 6.1.0 Added the `$theme_json` parameter.
+	 * @since 6.7.0 Added support for background image refs
 	 *
 	 * @param array $styles Styles subtree.
 	 * @param array $path   Which property to process.
@@ -2448,15 +2488,17 @@ protected static function get_property_value( $styles, $path, $theme_json = null
 		}
 
 		/*
-		 * This converts references to a path to the value at that path
-		 * where the values is an array with a "ref" key, pointing to a path.
+		 * Where the current value is an array with a 'ref' key pointing
+		 * to a path, this converts that path into the value at that path.
 		 * For example: { "ref": "style.color.background" } => "#fff".
 		 */
 		if ( is_array( $value ) && isset( $value['ref'] ) ) {
 			$value_path = explode( '.', $value['ref'] );
-			$ref_value  = _wp_array_get( $theme_json, $value_path );
+			$ref_value  = _wp_array_get( $theme_json, $value_path, null );
+			// Background Image refs can refer to a string or an array containing a URL string.
+			$ref_value_url = $ref_value['url'] ?? null;
 			// Only use the ref value if we find anything.
-			if ( ! empty( $ref_value ) && is_string( $ref_value ) ) {
+			if ( ! empty( $ref_value ) && ( is_string( $ref_value ) || is_string( $ref_value_url ) ) ) {
 				$value = $ref_value;
 			}
 
@@ -3216,6 +3258,25 @@ public function merge( $incoming ) {
 				}
 			}
 		}
+
+		/*
+		 * Style values are merged at the leaf level, however
+		 * some values provide exceptions, namely style values that are
+		 * objects and represent unique definitions for the style.
+		 */
+		$style_nodes = static::get_styles_block_nodes();
+		foreach ( $style_nodes as $style_node ) {
+			$path = $style_node['path'];
+			/*
+			 * Background image styles should be replaced, not merged,
+			 * as they themselves are specific object definitions for the style.
+			 */
+			$background_image_path = array_merge( $path, static::PROPERTIES_METADATA['background-image'] );
+			$content               = _wp_array_get( $incoming_data, $background_image_path, null );
+			if ( isset( $content ) ) {
+				_wp_array_set( $this->theme_json, $background_image_path, $content );
+			}
+		}
 	}
 
 	/**
diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php
index a2153e639db3b..2231cb0f11538 100644
--- a/lib/class-wp-theme-json-resolver-gutenberg.php
+++ b/lib/class-wp-theme-json-resolver-gutenberg.php
@@ -764,8 +764,18 @@ private static function style_variation_has_scope( $variation, $scope ) {
 	 * @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();
-		$variations         = array();
 		$base_directory     = get_stylesheet_directory() . '/styles';
 		$template_directory = get_template_directory() . '/styles';
 		if ( is_dir( $base_directory ) ) {
@@ -783,6 +793,29 @@ public static function get_style_variations( $scope = 'theme' ) {
 			}
 			$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 );
diff --git a/lib/client-assets.php b/lib/client-assets.php
index a159bc53e6a59..2343530e5595a 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -487,7 +487,9 @@ function gutenberg_register_packages_styles( $styles ) {
  * This hook also exists, and should be backported to Core in future versions.
  * However, it is envisaged that Gutenberg will continue to use the Style Engine's `gutenberg_*` functions and `_Gutenberg` classes to aid continuous development.
  *
- * See: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-style-engine/
+ * @since 6.1
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-style-engine/
  *
  * @param array $options {
  *     Optional. An array of options to pass to gutenberg_style_engine_get_stylesheet_from_context(). Default empty array.
@@ -496,8 +498,6 @@ function gutenberg_register_packages_styles( $styles ) {
  *     @type bool $prettify Whether to add new lines and indents to output. Default is the test of whether the global constant `SCRIPT_DEBUG` is defined.
  * }
  *
- * @since 6.1
- *
  * @return void
  */
 function gutenberg_enqueue_stored_styles( $options = array() ) {
@@ -601,6 +601,56 @@ function gutenberg_register_vendor_scripts( $scripts ) {
 }
 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 replalce "/index" in devlopment.
+			 */
+			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.
diff --git a/lib/compat/plugin/fonts.php b/lib/compat/plugin/fonts.php
new file mode 100644
index 0000000000000..f427f6110f610
--- /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/plugin/footnotes.php b/lib/compat/plugin/footnotes.php
deleted file mode 100644
index a3d89aba0ae96..0000000000000
--- a/lib/compat/plugin/footnotes.php
+++ /dev/null
@@ -1,250 +0,0 @@
-<?php
-/**
- * Compatibility shim for the footnotes block to enable test passing while awaiting the tested code to be merged to core.
- *
- * See https://github.com/WordPress/gutenberg/pull/52988.
- *
- * Once merged, this shim can be removed.
- *
- * @package gutenberg
- */
-
-/**
- * Remove footnote revision hooks when plugin is running on a version of core that already supports meta revisions.
- */
-if ( function_exists( 'wp_post_revision_meta_keys' ) ) {
-	if ( has_action( 'rest_after_insert_post', 'wp_add_footnotes_revisions_to_post_meta' ) ) {
-		remove_action( 'rest_after_insert_post', 'wp_add_footnotes_revisions_to_post_meta' );
-	}
-	if ( has_action( 'rest_after_insert_page', 'wp_add_footnotes_revisions_to_post_meta' ) ) {
-		remove_action( 'rest_after_insert_page', 'wp_add_footnotes_revisions_to_post_meta' );
-	}
-	if ( has_action( 'wp_after_insert_post', 'wp_save_footnotes_meta' ) ) {
-		remove_action( 'wp_after_insert_post', 'wp_save_footnotes_meta' );
-	}
-	if ( has_action( '_wp_put_post_revision', 'wp_keep_footnotes_revision_id' ) ) {
-		remove_action( '_wp_put_post_revision', 'wp_keep_footnotes_revision_id' );
-	}
-	if ( has_action( 'wp_restore_post_revision', 'wp_restore_footnotes_from_revision' ) ) {
-		remove_action( 'wp_restore_post_revision', 'wp_restore_footnotes_from_revision' );
-	}
-	if ( has_action( 'wp_creating_autosave', '_wp_rest_api_autosave_meta' ) ) {
-		remove_action( 'wp_creating_autosave', '_wp_rest_api_autosave_meta' );
-	}
-	if ( has_action( '_wp_put_post_revision', '_wp_rest_api_autosave_meta' ) ) {
-		remove_action( '_wp_put_post_revision', '_wp_rest_api_autosave_meta' );
-	}
-	if ( has_filter( 'rest_pre_insert_post', '_wp_rest_api_force_autosave_difference' ) ) {
-		remove_filter( 'rest_pre_insert_post', '_wp_rest_api_force_autosave_difference' );
-	}
-} else {
-	/**
-	 * For versions of core that don't support meta revisions, use hooks to add.
-	 */
-	if ( ! function_exists( 'wp_save_footnotes_meta' ) ) {
-		/**
-		 * Saves the footnotes meta value to the revision.
-		 *
-		 * @since 6.3.0
-		 * @since 6.4.0 Core added post meta revisions, so this is no longer needed.
-		 *
-		 * @param int $revision_id The revision ID.
-		 */
-		function wp_save_footnotes_meta( $revision_id ) {
-			$post_id = wp_is_post_revision( $revision_id );
-
-			if ( $post_id ) {
-				$footnotes = get_post_meta( $post_id, 'footnotes', true );
-
-				if ( $footnotes ) {
-					// Can't use update_post_meta() because it doesn't allow revisions.
-					update_metadata( 'post', $revision_id, 'footnotes', wp_slash( $footnotes ) );
-				}
-			}
-		}
-		if ( ! function_exists( 'wp_post_revision_meta_keys' ) ) {
-			add_action( 'wp_after_insert_post', 'wp_save_footnotes_meta' );
-		}
-	}
-
-	if ( ! function_exists( 'wp_keep_footnotes_revision_id' ) ) {
-		/**
-		 * Keeps track of the revision ID for "rest_after_insert_{$post_type}".
-		 *
-		 * @since 6.3.0
-		 * @since 6.4.0 Core added post meta revisions, so this is no longer needed.
-		 *
-		 * @global int $wp_temporary_footnote_revision_id The footnote revision ID.
-		 *
-		 * @param int $revision_id The revision ID.
-		 */
-		function wp_keep_footnotes_revision_id( $revision_id ) {
-			global $wp_temporary_footnote_revision_id;
-			$wp_temporary_footnote_revision_id = $revision_id;
-		}
-		if ( ! function_exists( 'wp_post_revision_meta_keys' ) ) {
-			add_action( '_wp_put_post_revision', 'wp_keep_footnotes_revision_id' );
-		}
-	}
-
-	if ( ! function_exists( 'wp_add_footnotes_revisions_to_post_meta' ) ) {
-
-		/**
-		 * This is a specific fix for the REST API. The REST API doesn't update
-		 * the post and post meta in one go (through `meta_input`). While it
-		 * does fix the `wp_after_insert_post` hook to be called correctly after
-		 * updating meta, it does NOT fix hooks such as post_updated and
-		 * save_post, which are normally also fired after post meta is updated
-		 * in `wp_insert_post()`. Unfortunately, `wp_save_post_revision` is
-		 * added to the `post_updated` action, which means the meta is not
-		 * available at the time, so we have to add it afterwards through the
-		 * `"rest_after_insert_{$post_type}"` action.
-		 *
-		 * @since 6.3.0
-		 * @since 6.4.0 Core added post meta revisions, so this is no longer needed.
-		 *
-		 * @global int $wp_temporary_footnote_revision_id The footnote revision ID.
-		 *
-		 * @param WP_Post $post The post object.
-		 */
-		function wp_add_footnotes_revisions_to_post_meta( $post ) {
-			global $wp_temporary_footnote_revision_id;
-
-			if ( $wp_temporary_footnote_revision_id ) {
-				$revision = get_post( $wp_temporary_footnote_revision_id );
-
-				if ( ! $revision ) {
-					return;
-				}
-
-				$post_id = $revision->post_parent;
-
-				// Just making sure we're updating the right revision.
-				if ( $post->ID === $post_id ) {
-					$footnotes = get_post_meta( $post_id, 'footnotes', true );
-
-					if ( $footnotes ) {
-						// Can't use update_post_meta() because it doesn't allow revisions.
-						update_metadata( 'post', $wp_temporary_footnote_revision_id, 'footnotes', wp_slash( $footnotes ) );
-					}
-				}
-			}
-		}
-
-		if ( ! function_exists( 'wp_post_revision_meta_keys' ) ) {
-			add_action( 'rest_after_insert_post', 'wp_add_footnotes_revisions_to_post_meta' );
-			add_action( 'rest_after_insert_page', 'wp_add_footnotes_revisions_to_post_meta' );
-		}
-	}
-
-	if ( ! function_exists( 'wp_restore_footnotes_from_revision' ) ) {
-
-		/**
-		 * Restores the footnotes meta value from the revision.
-		 *
-		 * @since 6.3.0
-		 * @since 6.4.0 Core added post meta revisions, so this is no longer needed.
-		 *
-		 * @param int $post_id     The post ID.
-		 * @param int $revision_id The revision ID.
-		 */
-		function wp_restore_footnotes_from_revision( $post_id, $revision_id ) {
-			$footnotes = get_post_meta( $revision_id, 'footnotes', true );
-
-			if ( $footnotes ) {
-				update_post_meta( $post_id, 'footnotes', wp_slash( $footnotes ) );
-			} else {
-				delete_post_meta( $post_id, 'footnotes' );
-			}
-		}
-		if ( ! function_exists( 'wp_post_revision_meta_keys' ) ) {
-			add_action( 'wp_restore_post_revision', 'wp_restore_footnotes_from_revision', 10, 2 );
-		}
-	}
-
-	if ( ! function_exists( '_wp_rest_api_autosave_meta' ) ) {
-
-		/**
-		 * The REST API autosave endpoint doesn't save meta, so we can use the
-		 * `wp_creating_autosave` when it updates an exiting autosave, and
-		 * `_wp_put_post_revision` when it creates a new autosave.
-		 *
-		 * @since 6.3.0
-		 * @since 6.4.0 Core added post meta revisions, so this is no longer needed.
-		 *
-		 * @param int|array $autosave The autosave ID or array.
-		 */
-		function _wp_rest_api_autosave_meta( $autosave ) {
-			// Ensure it's a REST API request.
-			if ( ! defined( 'REST_REQUEST' ) || ! REST_REQUEST ) {
-				return;
-			}
-
-			$body = rest_get_server()->get_raw_data();
-			$body = json_decode( $body, true );
-
-			if ( ! isset( $body['meta']['footnotes'] ) ) {
-				return;
-			}
-
-			// `wp_creating_autosave` passes the array,
-			// `_wp_put_post_revision` passes the ID.
-			$id = is_int( $autosave ) ? $autosave : $autosave['ID'];
-
-			if ( ! $id ) {
-				return;
-			}
-
-			// Can't use update_post_meta() because it doesn't allow revisions.
-			update_metadata( 'post', $id, 'footnotes', wp_slash( $body['meta']['footnotes'] ) );
-		}
-
-		if ( ! function_exists( 'wp_post_revision_meta_keys' ) ) {
-			// See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L391C1-L391C1.
-			add_action( 'wp_creating_autosave', '_wp_rest_api_autosave_meta' );
-			// See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L398.
-			// Then https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/revision.php#L367.
-			add_action( '_wp_put_post_revision', '_wp_rest_api_autosave_meta' );
-		}
-	}
-
-	if ( ! function_exists( '_wp_rest_api_force_autosave_difference' ) ) {
-
-		/**
-		 * This is a workaround for the autosave endpoint returning early if the
-		 * revision field are equal. The problem is that "footnotes" is not real
-		 * revision post field, so there's nothing to compare against.
-		 *
-		 * This trick sets the "footnotes" field (value doesn't matter), which will
-		 * cause the autosave endpoint to always update the latest revision. That should
-		 * be fine, it should be ok to update the revision even if nothing changed. Of
-		 * course, this is temporary fix.
-		 *
-		 * @since 6.3.0
-		 * @since 6.4.0 Core added post meta revisions, so this is no longer needed.
-		 *
-		 * @param WP_Post         $prepared_post The prepared post object.
-		 * @param WP_REST_Request $request       The request object.
-		 *
-		 * See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L365-L384.
-		 * See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L219.
-		 */
-		function _wp_rest_api_force_autosave_difference( $prepared_post, $request ) {
-			// We only want to be altering POST requests.
-			if ( $request->get_method() !== 'POST' ) {
-				return $prepared_post;
-			}
-
-			// Only alter requests for the '/autosaves' route.
-			if ( substr( $request->get_route(), -strlen( '/autosaves' ) ) !== '/autosaves' ) {
-				return $prepared_post;
-			}
-
-			$prepared_post->footnotes = '[]';
-			return $prepared_post;
-		}
-		if ( ! function_exists( 'wp_post_revision_meta_keys' ) ) {
-			add_filter( 'rest_pre_insert_post', '_wp_rest_api_force_autosave_difference', 10, 2 );
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.4/block-hooks.php b/lib/compat/wordpress-6.4/block-hooks.php
deleted file mode 100644
index f77582caf1345..0000000000000
--- a/lib/compat/wordpress-6.4/block-hooks.php
+++ /dev/null
@@ -1,377 +0,0 @@
-<?php
-/**
- * Block hooks.
- *
- * @package gutenberg
- */
-
-/**
- * Register hooked blocks for automatic insertion, based on their block.json metadata.
- *
- * @param array $settings Array of determined settings for registering a block type.
- * @param array $metadata Metadata provided for registering a block type.
- * @return array Updated settings array.
- */
-function gutenberg_add_hooked_blocks( $settings, $metadata ) {
-	if ( ! isset( $metadata['blockHooks'] ) ) {
-		return $settings;
-	}
-	$block_hooks = $metadata['blockHooks'];
-
-	/**
-	 * Map the camelCased position string from block.json to the snake_cased block type position
-	 * used in the hooked block registration function.
-	 *
-	 * @var array
-	 */
-	$property_mappings = array(
-		'before'     => 'before',
-		'after'      => 'after',
-		'firstChild' => 'first_child',
-		'lastChild'  => 'last_child',
-	);
-
-	$inserted_block_name = $metadata['name'];
-	foreach ( $block_hooks as $anchor_block_name => $position ) {
-		// Avoid infinite recursion (hooking to itself).
-		if ( $inserted_block_name === $anchor_block_name ) {
-			_doing_it_wrong(
-				__METHOD__,
-				__( 'Cannot hook block to itself.', 'gutenberg' ),
-				'6.4.0'
-			);
-			continue;
-		}
-
-		if ( ! isset( $property_mappings[ $position ] ) ) {
-			continue;
-		}
-
-		$mapped_position = $property_mappings[ $position ];
-
-		gutenberg_add_hooked_block( $inserted_block_name, $mapped_position, $anchor_block_name );
-
-		$settings['block_hooks'][ $anchor_block_name ] = $mapped_position;
-	}
-
-	// Copied from `get_block_editor_server_block_settings()`.
-	$fields_to_pick = array(
-		'api_version'      => 'apiVersion',
-		'title'            => 'title',
-		'description'      => 'description',
-		'icon'             => 'icon',
-		'attributes'       => 'attributes',
-		'provides_context' => 'providesContext',
-		'uses_context'     => 'usesContext',
-		'selectors'        => 'selectors',
-		'supports'         => 'supports',
-		'category'         => 'category',
-		'styles'           => 'styles',
-		'textdomain'       => 'textdomain',
-		'parent'           => 'parent',
-		'ancestor'         => 'ancestor',
-		'keywords'         => 'keywords',
-		'example'          => 'example',
-		'variations'       => 'variations',
-		'allowed_blocks'   => 'allowedBlocks',
-	);
-	// Add `block_hooks` to the list of fields to pick.
-	$fields_to_pick['block_hooks'] = 'blockHooks';
-
-	$exposed_settings = array_intersect_key( $settings, $fields_to_pick );
-
-	// TODO: Make work for blocks registered via direct call to gutenberg_add_hooked_block().
-	wp_add_inline_script(
-		'wp-blocks',
-		'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( array( $inserted_block_name => $exposed_settings ) ) . ');'
-	);
-
-	return $settings;
-}
-
-/**
- * Register a hooked block for automatic insertion into a given block hook.
- *
- * A block hook is specified by a block type and a relative position. The hooked block
- * will be automatically inserted in the given position next to the "anchor" block
- * whenever the latter is encountered. This applies both to the frontend and to the markup
- * returned by the templates and patterns REST API endpoints.
- *
- * This is currently done by filtering parsed blocks as obtained from a block template,
- * template part, or pattern, and injecting the hooked block where applicable.
- *
- * @todo In the long run, we'd likely want some sort of registry for hooked blocks.
- *
- * @param string $hooked_block  The name of the block to insert.
- * @param string $position      The desired position of the hooked block, relative to its anchor block.
- *                              Can be 'before', 'after', 'first_child', or 'last_child'.
- * @param string $anchor_block  The name of the block to insert the hooked block next to.
- * @return void
- */
-function gutenberg_add_hooked_block( $hooked_block, $position, $anchor_block ) {
-		$hooked_block_array = array(
-			'blockName'    => $hooked_block,
-			'attrs'        => array(),
-			'innerHTML'    => '',
-			'innerContent' => array(),
-			'innerBlocks'  => array(),
-		);
-
-		$inserter = gutenberg_insert_hooked_block( $hooked_block_array, $position, $anchor_block );
-		add_filter( 'gutenberg_serialize_block', $inserter, 10, 1 );
-
-		/*
-		 * The block-types REST API controller uses objects of the `WP_Block_Type` class, which are
-		 * in turn created upon block type registration. However, that class does not contain
-		 * a `block_hooks` property (and is not easily extensible), so we have to use a different
-		 * mechanism to communicate to the controller which hooked blocks have been registered for
-		 * automatic insertion. We're doing so here (i.e. upon block registration), by adding a filter to
-		 * the controller's response.
-		 */
-		$controller_extender = gutenberg_add_block_hooks_field_to_block_type_controller( $hooked_block, $position, $anchor_block );
-		add_filter( 'rest_prepare_block_type', $controller_extender, 10, 2 );
-}
-
-/**
- * Return a function that auto-inserts a block next to a given "anchor" block.
- *
- * This is a helper function used in the implementation of block hooks.
- * It is not meant for public use.
- *
- * The auto-inserted block can be inserted before or after the anchor block,
- * or as the first or last child of the anchor block.
- *
- * Note that the returned function mutates the automatically inserted block's
- * designated parent block by inserting into the parent's `innerBlocks` array,
- * and by updating the parent's `innerContent` array accordingly.
- *
- * @param array  $inserted_block    The block to insert.
- * @param string $relative_position The position relative to the given block.
- *                                  Can be 'before', 'after', 'first_child', or 'last_child'.
- * @param string $anchor_block_type The automatically inserted block will be inserted next to instances of this block type.
- * @return callable A function that accepts a block's content and returns the content with the inserted block.
- */
-function gutenberg_insert_hooked_block( $inserted_block, $relative_position, $anchor_block_type ) {
-	return function ( $block ) use ( $inserted_block, $relative_position, $anchor_block_type ) {
-		if ( $anchor_block_type === $block['blockName'] ) {
-			if ( 'first_child' === $relative_position ) {
-				array_unshift( $block['innerBlocks'], $inserted_block );
-				// Since WP_Block::render() iterates over `inner_content` (rather than `inner_blocks`)
-				// when rendering blocks, we also need to prepend a value (`null`, to mark a block
-				// location) to that array after HTML content for the inner blocks wrapper.
-				$chunk_index = 0;
-				for ( $index = $chunk_index; $index < count( $block['innerContent'] ); $index++ ) {
-					if ( is_null( $block['innerContent'][ $index ] ) ) {
-						$chunk_index = $index;
-						break;
-					}
-				}
-				array_splice( $block['innerContent'], $chunk_index, 0, array( null ) );
-			} elseif ( 'last_child' === $relative_position ) {
-				array_push( $block['innerBlocks'], $inserted_block );
-				// Since WP_Block::render() iterates over `inner_content` (rather than `inner_blocks`)
-				// when rendering blocks, we also need to correctly append a value (`null`, to mark a block
-				// location) to that array before the remaining HTML content for the inner blocks wrapper.
-				$chunk_index = count( $block['innerContent'] );
-				for ( $index = count( $block['innerContent'] ); $index > 0; $index-- ) {
-					if ( is_null( $block['innerContent'][ $index - 1 ] ) ) {
-						$chunk_index = $index;
-						break;
-					}
-				}
-				array_splice( $block['innerContent'], $chunk_index, 0, array( null ) );
-			}
-			return $block;
-		}
-
-		$anchor_block_index = array_search( $anchor_block_type, array_column( $block['innerBlocks'], 'blockName' ), true );
-		if ( false !== $anchor_block_index && ( 'after' === $relative_position || 'before' === $relative_position ) ) {
-			if ( 'after' === $relative_position ) {
-				++$anchor_block_index;
-			}
-			array_splice( $block['innerBlocks'], $anchor_block_index, 0, array( $inserted_block ) );
-
-			// Find matching `innerContent` chunk index.
-			$chunk_index = 0;
-			while ( $anchor_block_index > 0 ) {
-				if ( ! is_string( $block['innerContent'][ $chunk_index ] ) ) {
-					--$anchor_block_index;
-				}
-				++$chunk_index;
-			}
-			// Since WP_Block::render() iterates over `inner_content` (rather than `inner_blocks`)
-			// when rendering blocks, we also need to insert a value (`null`, to mark a block
-			// location) into that array.
-			array_splice( $block['innerContent'], $chunk_index, 0, array( null ) );
-		}
-		return $block;
-	};
-}
-
-/**
- * Add block hooks information to a block type's controller.
- *
- * @param array  $inserted_block_type The type of block to insert.
- * @param string $position            The position relative to the anchor block.
- *                                    Can be 'before', 'after', 'first_child', or 'last_child'.
- * @param string $anchor_block_type   The hooked block will be inserted next to instances of this block type.
- * @return callable A filter for the `rest_prepare_block_type` hook that adds a `block_hooks` field to the network response.
- */
-function gutenberg_add_block_hooks_field_to_block_type_controller( $inserted_block_type, $position, $anchor_block_type ) {
-	return function ( $response, $block_type ) use ( $inserted_block_type, $position, $anchor_block_type ) {
-		if ( $block_type->name !== $inserted_block_type ) {
-			return $response;
-		}
-
-		$data = $response->get_data();
-		if ( ! isset( $data['block_hooks'] ) ) {
-			$data['block_hooks'] = array();
-		}
-		$data['block_hooks'][ $anchor_block_type ] = $position;
-		$response->set_data( $data );
-		return $response;
-	};
-}
-
-/**
- * Parse and reserialize block templates to allow running filters.
- *
- * By parsing a block template's content and then reserializing it
- * via `gutenberg_serialize_blocks()`, we are able to run filters
- * on the parsed blocks. This allows us to modify (parsed) blocks during
- * depth-first traversal already provided by the serialization process,
- * rather than having to do so in a separate pass.
- *
- * @param WP_Block_Template[] $query_result Array of found block templates.
- * @return WP_Block_Template[] Updated array of found block templates.
- */
-function gutenberg_parse_and_serialize_block_templates( $query_result ) {
-	foreach ( $query_result as $block_template ) {
-		if ( empty( $block_template->content ) || 'custom' === $block_template->source ) {
-			continue;
-		}
-		$blocks                  = parse_blocks( $block_template->content );
-		$block_template->content = gutenberg_serialize_blocks( $blocks );
-	}
-
-	return $query_result;
-}
-
-/**
- * Filters the block template object after it has been (potentially) fetched from the theme file.
- *
- * By parsing a block template's content and then reserializing it
- * via `gutenberg_serialize_blocks()`, we are able to run filters
- * on the parsed blocks. This allows us to modify (parsed) blocks during
- * depth-first traversal already provided by the serialization process,
- * rather than having to do so in a separate pass.
- *
- * @param WP_Block_Template|null $block_template The found block template, or null if there is none.
- */
-function gutenberg_parse_and_serialize_blocks( $block_template ) {
-	if ( empty( $block_template->content ) ) {
-		return $block_template;
-	}
-
-	$blocks                  = parse_blocks( $block_template->content );
-	$block_template->content = gutenberg_serialize_blocks( $blocks );
-
-	return $block_template;
-}
-
-/**
- * Register the `block_hooks` field for the block-types REST API controller.
- *
- * @return void
- */
-function gutenberg_register_block_hooks_rest_field() {
-	register_rest_field(
-		'block-type',
-		'block_hooks',
-		array(
-			'schema' => array(
-				'description'       => __( 'This block is automatically inserted near any occurrence of the block types used as keys of this map, into a relative position given by the corresponding value.', 'gutenberg' ),
-				'type'              => 'object',
-				'patternProperties' => array(
-					'^[a-zA-Z0-9-]+/[a-zA-Z0-9-]+$' => array(
-						'type' => 'string',
-						'enum' => array( 'before', 'after', 'first_child', 'last_child' ),
-					),
-				),
-			),
-		)
-	);
-}
-
-// Install the polyfill for Block Hooks only if it isn't already handled in WordPress core.
-if ( ! function_exists( 'traverse_and_serialize_blocks' ) ) {
-	add_filter( 'block_type_metadata_settings', 'gutenberg_add_hooked_blocks', 10, 2 );
-	add_filter( 'get_block_templates', 'gutenberg_parse_and_serialize_block_templates', 10, 1 );
-	add_filter( 'get_block_file_template', 'gutenberg_parse_and_serialize_blocks', 10, 1 );
-	add_action( 'rest_api_init', 'gutenberg_register_block_hooks_rest_field' );
-}
-
-// Helper functions.
-// -----------------
-// The sole purpose of the following two functions (`gutenberg_serialize_block`
-// and `gutenberg_serialize_blocks`), which are otherwise copies of their unprefixed
-// counterparts (`serialize_block` and `serialize_blocks`) is to apply a filter
-// (also called `gutenberg_serialize_block`) as an entry point for modifications
-// to the parsed blocks.
-
-/**
- * Filterable version of `serialize_block()`.
- *
- * This function is identical to `serialize_block()`, except that it applies
- * the `gutenberg_serialize_block` filter to each block before it is serialized.
- *
- * @param array $block The block to be serialized.
- * @return string The serialized block.
- *
- * @see serialize_block()
- */
-function gutenberg_serialize_block( $block ) {
-	$block_content = '';
-
-	/**
-	 * Filters a parsed block before it is serialized.
-	 *
-	 * @param array $block The block to be serialized.
-	 */
-	$block = apply_filters( 'gutenberg_serialize_block', $block );
-
-	$index = 0;
-	foreach ( $block['innerContent'] as $chunk ) {
-		if ( is_string( $chunk ) ) {
-			$block_content .= $chunk;
-		} else { // Compare to WP_Block::render().
-			$inner_block    = $block['innerBlocks'][ $index++ ];
-			$block_content .= gutenberg_serialize_block( $inner_block );
-		}
-	}
-
-	if ( ! is_array( $block['attrs'] ) ) {
-		$block['attrs'] = array();
-	}
-
-	return get_comment_delimited_block_content(
-		$block['blockName'],
-		$block['attrs'],
-		$block_content
-	);
-}
-
-/**
- * Filterable version of `serialize_blocks()`.
- *
- * This function is identical to `serialize_blocks()`, except that it applies
- * the `gutenberg_serialize_block` filter to each block before it is serialized.
- *
- * @param array $blocks The blocks to be serialized.
- * @return string[] The serialized blocks.
- *
- * @see serialize_blocks()
- */
-function gutenberg_serialize_blocks( $blocks ) {
-	return implode( '', array_map( 'gutenberg_serialize_block', $blocks ) );
-}
diff --git a/lib/compat/wordpress-6.4/blocks.php b/lib/compat/wordpress-6.4/blocks.php
deleted file mode 100644
index 74fa9253e45d5..0000000000000
--- a/lib/compat/wordpress-6.4/blocks.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php
-/**
- * Temporary compatibility shims for block APIs present in Gutenberg.
- *
- * @package gutenberg
- */
-
-/**
- * Adds delete_posts capabilities to the wp_block post type.
- *
- * @param array $args Register post type args.
- *
- * @return array Register post type args.
- */
-function gutenberg_add_custom_capabilities_to_wp_block( $args ) {
-	if ( is_array( $args ) ) {
-		if ( ! isset( $args['capabilities'] ) || is_array( $args['capabilities'] ) ) {
-			$args['capabilities']['delete_posts'] = 'delete_posts';
-		}
-	}
-	return $args;
-}
-add_filter( 'register_wp_block_post_type_args', 'gutenberg_add_custom_capabilities_to_wp_block', 10, 1 );
diff --git a/lib/compat/wordpress-6.4/class-gutenberg-rest-block-patterns-controller.php b/lib/compat/wordpress-6.4/class-gutenberg-rest-block-patterns-controller.php
deleted file mode 100644
index d3c3431bae4b3..0000000000000
--- a/lib/compat/wordpress-6.4/class-gutenberg-rest-block-patterns-controller.php
+++ /dev/null
@@ -1,46 +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.4.0
- *
- * @see WP_REST_Controller
- */
-class Gutenberg_REST_Block_Patterns_Controller extends WP_REST_Block_Patterns_Controller {
-	/**
-	 * Prepare a raw block pattern before it gets output in a REST API response.
-	 *
-	 * @todo In the long run, we'd likely want to have a filter in the `WP_Block_Patterns_Registry` class
-	 * instead to allow us plugging in code like this.
-	 *
-	 * @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 ) {
-		$response = parent::prepare_item_for_response( $item, $request );
-
-		// Run the polyfill for Block Hooks only if it isn't already handled in WordPress core.
-		if ( function_exists( 'traverse_and_serialize_blocks' ) ) {
-			return $response;
-		}
-
-		$data = $response->get_data();
-
-		if ( empty( $data['content'] ) ) {
-			return $response;
-		}
-
-		$blocks          = parse_blocks( $data['content'] );
-		$data['content'] = gutenberg_serialize_blocks( $blocks ); // Serialize or render?
-
-		return rest_ensure_response( $data );
-	}
-}
diff --git a/lib/compat/wordpress-6.4/class-gutenberg-rest-global-styles-revisions-controller-6-4.php b/lib/compat/wordpress-6.4/class-gutenberg-rest-global-styles-revisions-controller-6-4.php
deleted file mode 100644
index 4c7df97c33e57..0000000000000
--- a/lib/compat/wordpress-6.4/class-gutenberg-rest-global-styles-revisions-controller-6-4.php
+++ /dev/null
@@ -1,164 +0,0 @@
-<?php
-/**
- * REST API: Gutenberg_REST_Global_Styles_Revisions_Controller class, inspired by WP_REST_Revisions_Controller.
- *
- * @package WordPress
- * @subpackage REST_API
- * @since 6.3.0
- */
-
-/**
- * Core class used to access global styles revisions via the REST API.
- *
- * @since 6.3.0
- *
- * @see WP_REST_Controller
- */
-class Gutenberg_REST_Global_Styles_Revisions_Controller_6_4 extends WP_REST_Global_Styles_Revisions_Controller {
-	/**
-	 * Prepares the revision for the REST response.
-	 *
-	 * @since 6.3.0
-	 *
-	 * @param WP_Post         $post    Post revision object.
-	 * @param WP_REST_Request $request Request object.
-	 * @return WP_REST_Response|WP_Error Response object.
-	 */
-	public function prepare_item_for_response( $post, $request ) {
-		$parent               = $this->get_parent( $request['parent'] );
-		$global_styles_config = $this->get_decoded_global_styles_json( $post->post_content );
-
-		if ( is_wp_error( $global_styles_config ) ) {
-			return $global_styles_config;
-		}
-
-		$fields = $this->get_fields_for_response( $request );
-		$data   = array();
-
-		if ( ! empty( $global_styles_config['styles'] ) || ! empty( $global_styles_config['settings'] ) ) {
-			$global_styles_config = ( new WP_Theme_JSON_Gutenberg( $global_styles_config, 'custom' ) )->get_raw_data();
-			if ( rest_is_field_included( 'settings', $fields ) ) {
-				$data['settings'] = ! empty( $global_styles_config['settings'] ) ? $global_styles_config['settings'] : new stdClass();
-			}
-			if ( rest_is_field_included( 'styles', $fields ) ) {
-				$data['styles'] = ! empty( $global_styles_config['styles'] ) ? $global_styles_config['styles'] : new stdClass();
-			}
-		}
-
-		if ( rest_is_field_included( 'author', $fields ) ) {
-			$data['author'] = (int) $post->post_author;
-		}
-
-		if ( rest_is_field_included( 'date', $fields ) ) {
-			$data['date'] = $this->prepare_date_response( $post->post_date_gmt, $post->post_date );
-		}
-
-		if ( rest_is_field_included( 'date_gmt', $fields ) ) {
-			$data['date_gmt'] = $this->prepare_date_response( $post->post_date_gmt );
-		}
-
-		if ( rest_is_field_included( 'id', $fields ) ) {
-			$data['id'] = (int) $post->ID;
-		}
-
-		if ( rest_is_field_included( 'modified', $fields ) ) {
-			$data['modified'] = $this->prepare_date_response( $post->post_modified_gmt, $post->post_modified );
-		}
-
-		if ( rest_is_field_included( 'modified_gmt', $fields ) ) {
-			$data['modified_gmt'] = $this->prepare_date_response( $post->post_modified_gmt );
-		}
-
-		if ( rest_is_field_included( 'parent', $fields ) ) {
-			$data['parent'] = (int) $parent->ID;
-		}
-
-		$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 revision's schema, conforming to JSON Schema.
-	 *
-	 * @since 6.3.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->parent_post_type}-revision",
-			'type'       => 'object',
-			// Base properties for every Revision.
-			'properties' => array(
-
-				/*
-				 * Adds settings and styles from the WP_REST_Revisions_Controller item fields.
-				 * Leaves out GUID as global styles shouldn't be accessible via URL.
-				 */
-				'author'       => array(
-					'description' => __( 'The ID for the author of the revision.', 'gutenberg' ),
-					'type'        => 'integer',
-					'context'     => array( 'view', 'edit', 'embed' ),
-				),
-				'date'         => array(
-					'description' => __( "The date the revision was published, in the site's timezone.", 'gutenberg' ),
-					'type'        => 'string',
-					'format'      => 'date-time',
-					'context'     => array( 'view', 'edit', 'embed' ),
-				),
-				'date_gmt'     => array(
-					'description' => __( 'The date the revision was published, as GMT.', 'gutenberg' ),
-					'type'        => 'string',
-					'format'      => 'date-time',
-					'context'     => array( 'view', 'edit' ),
-				),
-				'id'           => array(
-					'description' => __( 'Unique identifier for the revision.', 'gutenberg' ),
-					'type'        => 'integer',
-					'context'     => array( 'view', 'edit', 'embed' ),
-				),
-				'modified'     => array(
-					'description' => __( "The date the revision was last modified, in the site's timezone.", 'gutenberg' ),
-					'type'        => 'string',
-					'format'      => 'date-time',
-					'context'     => array( 'view', 'edit' ),
-				),
-				'modified_gmt' => array(
-					'description' => __( 'The date the revision was last modified, as GMT.', 'gutenberg' ),
-					'type'        => 'string',
-					'format'      => 'date-time',
-					'context'     => array( 'view', 'edit' ),
-				),
-				'parent'       => array(
-					'description' => __( 'The ID for the parent of the revision.', 'gutenberg' ),
-					'type'        => 'integer',
-					'context'     => array( 'view', 'edit', 'embed' ),
-				),
-
-				// Adds settings and styles from the WP_REST_Global_Styles_Controller parent schema.
-				'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' ),
-				),
-			),
-		);
-
-		$this->schema = $schema;
-
-		return $this->add_additional_fields_schema( $this->schema );
-	}
-}
diff --git a/lib/compat/wordpress-6.4/class-gutenberg-rest-templates-controller-6-4.php b/lib/compat/wordpress-6.4/class-gutenberg-rest-templates-controller-6-4.php
deleted file mode 100644
index ec969519f9ac4..0000000000000
--- a/lib/compat/wordpress-6.4/class-gutenberg-rest-templates-controller-6-4.php
+++ /dev/null
@@ -1,75 +0,0 @@
-<?php
-/**
- * REST API: Gutenberg_REST_Templates_Controller_6_4 class
- *
- * @package    gutenberg
- */
-
-/**
- * Gutenberg_REST_Templates_Controller_6_4 class
- *
- * Template revision changes are waiting on a core change to be merged.
- * See: https://github.com/WordPress/gutenberg/pull/45215#issuecomment-1592704026
- * When merging into core, prepare_revision_links() should be merged with
- * WP_REST_Templates_Controller::prepare_links().
- */
-class Gutenberg_REST_Templates_Controller_6_4 extends WP_REST_Templates_Controller {
-	/**
-	 * Add revisions to the response.
-	 *
-	 * @param WP_Block_Template $item    Template instance.
-	 * @param WP_REST_Request   $request Request object.
-	 * @return WP_REST_Response Response object.
-	 */
-	public function prepare_item_for_response( $item, $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
-		$template = $item;
-
-		$fields = $this->get_fields_for_response( $request );
-
-		$response = parent::prepare_item_for_response( $item, $request );
-
-		if ( rest_is_field_included( '_links', $fields ) || rest_is_field_included( '_embedded', $fields ) ) {
-			$links = $this->prepare_revision_links( $template );
-			$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;
-	}
-
-	/**
-	 * Adds revisions to links.
-	 *
-	 * @param WP_Block_Template $template  Template instance.
-	 * @return array Links for the given post.
-	 */
-	protected function prepare_revision_links( $template ) {
-		$links = array();
-
-		if ( post_type_supports( $this->post_type, 'revisions' ) && (int) $template->wp_id ) {
-			$revisions       = wp_get_latest_revision_id_and_total_count( (int) $template->wp_id );
-			$revisions_count = ! is_wp_error( $revisions ) ? $revisions['count'] : 0;
-			$revisions_base  = sprintf( '/%s/%s/%s/revisions', $this->namespace, $this->rest_base, $template->id );
-
-			$links['version-history'] = array(
-				'href'  => rest_url( $revisions_base ),
-				'count' => $revisions_count,
-			);
-
-			if ( $revisions_count > 0 ) {
-				$links['predecessor-version'] = array(
-					'href' => rest_url( $revisions_base . '/' . $revisions['latest_id'] ),
-					'id'   => $revisions['latest_id'],
-				);
-			}
-		}
-
-		return $links;
-	}
-}
diff --git a/lib/compat/wordpress-6.4/fonts/font-face/class-wp-font-face-resolver.php b/lib/compat/wordpress-6.4/fonts/font-face/class-wp-font-face-resolver.php
deleted file mode 100644
index 556663b881366..0000000000000
--- a/lib/compat/wordpress-6.4/fonts/font-face/class-wp-font-face-resolver.php
+++ /dev/null
@@ -1,183 +0,0 @@
-<?php
-/**
- * WP_Font_Face_Resolver class.
- *
- * @package    WordPress
- * @subpackage Fonts
- * @since      6.4.0
- *
- * @core-merge: this file is located in `wp-includes/fonts/`.
- */
-
-if ( ! class_exists( 'WP_Font_Face_Resolver' ) ) {
-
-	/**
-	 * The Font Face Resolver abstracts the processing of different data sources
-	 * (such as theme.json) for processing within the Font Face.
-	 *
-	 * This class is for internal core usage and is not supposed to be used by
-	 * extenders (plugins and/or themes).
-	 *
-	 * @access private
-	 */
-	class WP_Font_Face_Resolver {
-
-		/**
-		 * Gets fonts defined in theme.json.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @return array Returns the font-families, each with their font-face variations.
-		 */
-		public static function get_fonts_from_theme_json() {
-			$settings = gutenberg_get_global_settings();
-
-			// Bail out early if there are no font settings.
-			if ( empty( $settings['typography']['fontFamilies'] ) ) {
-				return array();
-			}
-
-			return static::parse_settings( $settings );
-		}
-
-		/**
-		 * Parse theme.json settings to extract font definitions with variations grouped by font-family.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @param array $settings Font settings to parse.
-		 * @return array Returns an array of fonts, grouped by font-family.
-		 */
-		private static function parse_settings( array $settings ) {
-			$fonts = array();
-
-			foreach ( $settings['typography']['fontFamilies'] as $font_families ) {
-				foreach ( $font_families as $definition ) {
-
-					// Skip if "fontFace" is not defined, meaning there are no variations.
-					if ( empty( $definition['fontFace'] ) ) {
-						continue;
-					}
-
-					// Skip if "fontFamily" is not defined.
-					if ( empty( $definition['fontFamily'] ) ) {
-						continue;
-					}
-
-					$font_family_name = static::maybe_parse_name_from_comma_separated_list( $definition['fontFamily'] );
-
-					// Skip if no font family is defined.
-					if ( empty( $font_family_name ) ) {
-						continue;
-					}
-
-					// Prepare the fonts array structure for this font-family.
-					if ( ! array_key_exists( $font_family_name, $fonts ) ) {
-						$fonts[ $font_family_name ] = array();
-					}
-
-					$fonts[ $font_family_name ] = static::convert_font_face_properties( $definition['fontFace'], $font_family_name );
-				}
-			}
-
-			return $fonts;
-		}
-
-		/**
-		 * Parse font-family name from comma-separated lists.
-		 *
-		 * If the given `fontFamily` is a comma-separated lists (example: "Inter, sans-serif" ),
-		 * parse and return the fist font from the list.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @param string $font_family Font family `fontFamily' to parse.
-		 * @return string Font-family name.
-		 */
-		private static function maybe_parse_name_from_comma_separated_list( $font_family ) {
-			if ( str_contains( $font_family, ',' ) ) {
-				$font_family = explode( ',', $font_family )[0];
-			}
-
-			return trim( $font_family, "\"'" );
-		}
-
-		/**
-		 * Converts font-face properties from theme.json format.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @param array  $font_face_definition The font-face definitions to convert.
-		 * @param string $font_family_property The value to store in the font-face font-family property.
-		 * @return array Converted font-face properties.
-		 */
-		private static function convert_font_face_properties( array $font_face_definition, $font_family_property ) {
-			$converted_font_faces = array();
-
-			foreach ( $font_face_definition as $font_face ) {
-				// Add the font-family property to the font-face.
-				$font_face['font-family'] = $font_family_property;
-
-				// Converts the "file:./" src placeholder into a theme font file URI.
-				if ( ! empty( $font_face['src'] ) ) {
-					$font_face['src'] = static::to_theme_file_uri( (array) $font_face['src'] );
-				}
-
-				// Convert camelCase properties into kebab-case.
-				$font_face = static::to_kebab_case( $font_face );
-
-				$converted_font_faces[] = $font_face;
-			}
-
-			return $converted_font_faces;
-		}
-
-		/**
-		 * Converts each 'file:./' placeholder into a URI to the font file in the theme.
-		 *
-		 * The 'file:./' is specified in the theme's `theme.json` as a placeholder to be
-		 * replaced with the URI to the font file's location in the theme. When a "src"
-		 * beings with this placeholder, it is replaced, converting the src into a URI.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @param array $src An array of font file sources to process.
-		 * @return array An array of font file src URI(s).
-		 */
-		private static function to_theme_file_uri( array $src ) {
-			$placeholder = 'file:./';
-
-			foreach ( $src as $src_key => $src_url ) {
-				// Skip if the src doesn't start with the placeholder, as there's nothing to replace.
-				if ( ! str_starts_with( $src_url, $placeholder ) ) {
-					continue;
-				}
-
-				$src_file        = str_replace( $placeholder, '', $src_url );
-				$src[ $src_key ] = get_theme_file_uri( $src_file );
-			}
-
-			return $src;
-		}
-
-		/**
-		 * Converts all first dimension keys into kebab-case.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @param array $data The array to process.
-		 * @return array Data with first dimension keys converted into kebab-case.
-		 */
-		private static function to_kebab_case( array $data ) {
-			foreach ( $data as $key => $value ) {
-				$kebab_case          = _wp_to_kebab_case( $key );
-				$data[ $kebab_case ] = $value;
-				if ( $kebab_case !== $key ) {
-					unset( $data[ $key ] );
-				}
-			}
-
-			return $data;
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.4/fonts/font-face/class-wp-font-face.php b/lib/compat/wordpress-6.4/fonts/font-face/class-wp-font-face.php
deleted file mode 100644
index 6bea6eb86cc71..0000000000000
--- a/lib/compat/wordpress-6.4/fonts/font-face/class-wp-font-face.php
+++ /dev/null
@@ -1,435 +0,0 @@
-<?php
-/**
- * WP_Font_Face class.
- *
- * @package    WordPress
- * @subpackage Fonts
- * @since      6.4.0
- *
- * @core-merge: this file is located in `wp-includes/fonts/`.
- */
-
-if ( ! class_exists( 'WP_Font_Face' ) ) {
-
-	/**
-	 * Font Face generates and prints `@font-face` styles for given fonts.
-	 *
-	 * @since 6.4.0
-	 */
-	class WP_Font_Face {
-
-		/**
-		 * The font-face property defaults.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @var string[]
-		 */
-		private $font_face_property_defaults = array(
-			'font-family'  => '',
-			'font-style'   => 'normal',
-			'font-weight'  => '400',
-			'font-display' => 'fallback',
-		);
-
-		/**
-		 * Valid font-face property names.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @var string[]
-		 */
-		private $valid_font_face_properties = 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',
-		);
-
-		/**
-		 * Valid font-display values.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @var string[]
-		 */
-		private $valid_font_display = array( 'auto', 'block', 'fallback', 'swap', 'optional' );
-
-		/**
-		 * Array of font-face style tag's attribute(s)
-		 * where the key is the attribute name and the
-		 * value is its value.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @var string[]
-		 */
-		private $style_tag_attrs = array();
-
-		/**
-		 * Creates and initializes an instance of WP_Font_Face.
-		 *
-		 * @since 6.4.0
-		 */
-		public function __construct() {
-			if (
-				function_exists( 'is_admin' ) && ! is_admin()
-				&&
-				function_exists( 'current_theme_supports' ) && ! current_theme_supports( 'html5', 'style' )
-			) {
-				$this->style_tag_attrs = array( 'type' => 'text/css' );
-			}
-		}
-
-		/**
-		 * Generates and prints the `@font-face` styles for the given fonts.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @param array[][] $fonts Optional. The font-families and their font variations.
-		 *                         See {@see wp_print_font_faces()} for the supported fields.
-		 *                         Default empty array.
-		 */
-		public function generate_and_print( array $fonts ) {
-			$fonts = $this->validate_fonts( $fonts );
-
-			// Bail out if there are no fonts are given to process.
-			if ( empty( $fonts ) ) {
-				return;
-			}
-
-			$css = $this->get_css( $fonts );
-
-			/*
-			* The font-face CSS is contained within <style> tags and can only be interpreted
-			* as CSS in the browser. Using wp_strip_all_tags() is sufficient escaping
-			* to avoid malicious attempts to close </style> and open a <script>.
-			*/
-			$css = wp_strip_all_tags( $css );
-
-			// Bail out if there is no CSS to print.
-			if ( empty( $css ) ) {
-				return;
-			}
-
-			printf( $this->get_style_element(), $css );
-		}
-
-		/**
-		 * Validates each of the font-face properties.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @param array $fonts The fonts to valid.
-		 * @return array Prepared font-faces organized by provider and font-family.
-		 */
-		private function validate_fonts( array $fonts ) {
-			$validated_fonts = array();
-
-			foreach ( $fonts as $font_faces ) {
-				foreach ( $font_faces as $font_face ) {
-					$font_face = $this->validate_font_face_declarations( $font_face );
-					// Skip if failed validation.
-					if ( false === $font_face ) {
-						continue;
-					}
-
-					$validated_fonts[] = $font_face;
-				}
-			}
-
-			return $validated_fonts;
-		}
-
-		/**
-		 * Validates each font-face declaration (property and value pairing).
-		 *
-		 * @since 6.4.0
-		 *
-		 * @param array $font_face Font face property and value pairings to validate.
-		 * @return array|false Validated font-face on success, or false on failure.
-		 */
-		private function validate_font_face_declarations( array $font_face ) {
-			$font_face = wp_parse_args( $font_face, $this->font_face_property_defaults );
-
-			// Check the font-family.
-			if ( empty( $font_face['font-family'] ) || ! is_string( $font_face['font-family'] ) ) {
-				// @todo replace with `wp_trigger_error()`.
-				_doing_it_wrong(
-					__METHOD__,
-					__( 'Font font-family must be a non-empty string.' ),
-					'6.4.0'
-				);
-				return false;
-			}
-
-			// Make sure that local fonts have 'src' defined.
-			if ( empty( $font_face['src'] ) || ( ! is_string( $font_face['src'] ) && ! is_array( $font_face['src'] ) ) ) {
-				// @todo replace with `wp_trigger_error()`.
-				_doing_it_wrong(
-					__METHOD__,
-					__( 'Font src must be a non-empty string or an array of strings.' ),
-					'6.4.0'
-				);
-				return false;
-			}
-
-			// Validate the 'src' property.
-			foreach ( (array) $font_face['src'] as $src ) {
-				if ( empty( $src ) || ! is_string( $src ) ) {
-					// @todo replace with `wp_trigger_error()`.
-					_doing_it_wrong(
-						__METHOD__,
-						__( 'Each font src must be a non-empty string.' ),
-						'6.4.0'
-					);
-					return false;
-				}
-			}
-
-			// Check the font-weight.
-			if ( ! is_string( $font_face['font-weight'] ) && ! is_int( $font_face['font-weight'] ) ) {
-				// @todo replace with `wp_trigger_error()`.
-				_doing_it_wrong(
-					__METHOD__,
-					__( 'Font font-weight must be a properly formatted string or integer.' ),
-					'6.4.0'
-				);
-				return false;
-			}
-
-			// Check the font-display.
-			if ( ! in_array( $font_face['font-display'], $this->valid_font_display, true ) ) {
-				$font_face['font-display'] = $this->font_face_property_defaults['font-display'];
-			}
-
-			// Remove invalid properties.
-			foreach ( $font_face as $property => $value ) {
-				if ( ! in_array( $property, $this->valid_font_face_properties, true ) ) {
-					unset( $font_face[ $property ] );
-				}
-			}
-
-			return $font_face;
-		}
-
-		/**
-		 * Gets the style element for wrapping the `@font-face` CSS.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @return string The style element.
-		 */
-		private function get_style_element() {
-			$attributes = $this->generate_style_element_attributes();
-
-			return "<style id='wp-fonts-local'{$attributes}>\n%s\n</style>\n";
-		}
-
-		/**
-		 * Gets the defined <style> element's attributes.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @return string A string of attribute=value when defined, else, empty string.
-		 */
-		private function generate_style_element_attributes() {
-			$attributes = '';
-			foreach ( $this->style_tag_attrs as $name => $value ) {
-				$attributes .= " {$name}='{$value}'";
-			}
-			return $attributes;
-		}
-
-		/**
-		 * 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 fonts.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @param array $font_faces The font-faces to generate @font-face CSS styles.
-		 * @return string The `@font-face` CSS styles.
-		 */
-		private function get_css( $font_faces ) {
-			$css = '';
-
-			foreach ( $font_faces as $font_face ) {
-				// Order the font's `src` items to optimize for browser support.
-				$font_face = $this->order_src( $font_face );
-
-				// Build the @font-face CSS for this font.
-				$css .= '@font-face{' . $this->build_font_face_css( $font_face ) . '}' . "\n";
-			}
-
-			// Don't print the last newline character.
-			return rtrim( $css, "\n" );
-		}
-
-		/**
-		 * Orders `src` items to optimize for browser support.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @param array $font_face Font face to process.
-		 * @return array Font-face with ordered src items.
-		 */
-		private function order_src( array $font_face ) {
-			if ( ! is_array( $font_face['src'] ) ) {
-				$font_face['src'] = (array) $font_face['src'];
-			}
-
-			$src         = array();
-			$src_ordered = array();
-
-			foreach ( $font_face['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',
-				);
-			}
-			$font_face['src'] = $src_ordered;
-
-			return $font_face;
-		}
-
-		/**
-		 * Builds the font-family's CSS.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @param array $font_face Font face to process.
-		 * @return string This font-family's CSS.
-		 */
-		private function build_font_face_css( array $font_face ) {
-			$css = '';
-
-			/*
-			* Wrap font-family in quotes if it contains spaces
-			* and is not already wrapped in quotes.
-			*/
-			if (
-				str_contains( $font_face['font-family'], ' ' ) &&
-				! str_contains( $font_face['font-family'], '"' ) &&
-				! str_contains( $font_face['font-family'], "'" )
-			) {
-				$font_face['font-family'] = '"' . $font_face['font-family'] . '"';
-			}
-
-			foreach ( $font_face as $key => $value ) {
-				// Compile the "src" parameter.
-				if ( 'src' === $key ) {
-					$value = $this->compile_src( $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.4.0
-		 *
-		 * @param array $value Value to process.
-		 * @return string The CSS.
-		 */
-		private function compile_src( array $value ) {
-			$src = '';
-
-			foreach ( $value as $item ) {
-				$src .= ( 'data' === $item['format'] )
-					? ", url({$item['url']})"
-					: ", url('{$item['url']}') format('{$item['format']}')";
-			}
-
-			$src = ltrim( $src, ', ' );
-			return $src;
-		}
-
-		/**
-		 * Compiles the font variation settings.
-		 *
-		 * @since 6.4.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/compat/wordpress-6.4/fonts/fonts.php b/lib/compat/wordpress-6.4/fonts/fonts.php
deleted file mode 100644
index 94aef51a440a1..0000000000000
--- a/lib/compat/wordpress-6.4/fonts/fonts.php
+++ /dev/null
@@ -1,78 +0,0 @@
-<?php
-/**
- * Fonts functions.
- *
- * @package    WordPress
- * @subpackage Fonts
- * @since      6.4.0
- *
- * @core-merge: this file is located in `wp-includes/fonts.php`. It will contain Font Face and Font Library functions.
- */
-
-if ( ! function_exists( 'wp_print_font_faces' ) ) {
-	// @core-merge: will merge into Core's `wp-includes/default-filters.php` file.
-	add_action( 'wp_head', 'wp_print_font_faces', 50 );
-	// @core-merge: will merge into Core's `wp-admin/includes/admin-filters.php.` file.
-	add_action( 'admin_print_styles', 'wp_print_font_faces', 50 );
-
-	/**
-	 * Generates and prints font-face styles for given fonts or theme.json fonts.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @param array[][] $fonts {
-	 *     Optional. The font-families and their font variations. Default empty array.
-	 *
-	 *     @type string $font-family => array[] $variations {
-	 *         Optional. An associated array of font variations for this font-family.
-	 *         Each variation has the following structure.
-	 *
-	 *         @type array $font_variation {
-	 *             @type string          $font-family             The font-family property.
-	 *             @type string|string[] $src                     The URL(s) to each resource containing the font data.
-	 *             @type string          $font_style              Optional. The font-style property. Default 'normal'.
-	 *             @type string          $font-weight             Optional. The font-weight property. Default '400'.
-	 *             @type string          $font-display            Optional. The font-display property. Default 'fallback'.
-	 *             @type string          $ascent-override         Optional. The ascent-override property.
-	 *             @type string          $descent-override        Optional. The descent-override property.
-	 *             @type string          $font-stretch            Optional. The font-stretch property.
-	 *             @type string          $font-variant            Optional. The font-variant property.
-	 *             @type string          $font-feature-settings   Optional. The font-feature-settings property.
-	 *             @type string          $font-variation-settings Optional. The font-variation-settings property.
-	 *             @type string          $line-gap-override       Optional. The line-gap-override property.
-	 *             @type string          $size-adjust             Optional. The size-adjust property.
-	 *             @type string          $unicode-range           Optional. The unicode-range property.
-	 *         }
-	 *     }
-	 * }
-	 */
-	function wp_print_font_faces( $fonts = array() ) {
-
-		if ( empty( $fonts ) ) {
-			$fonts = WP_Font_Face_Resolver::get_fonts_from_theme_json();
-		}
-
-		if ( empty( $fonts ) ) {
-			return;
-		}
-
-		$wp_font_face = new WP_Font_Face();
-		$wp_font_face->generate_and_print( $fonts );
-	}
-}
-
-// @core-merge: do not merge this code into Core.
-add_filter(
-	'block_editor_settings_all',
-	static function ( $settings ) {
-		ob_start();
-		// @core-merge: add only this line into Core's `_wp_get_iframed_editor_assets()` function after `wp_print_styles()`.
-		wp_print_font_faces();
-		$styles = ob_get_clean();
-
-		// Add the font-face styles to iframed editor assets.
-		$settings['__unstableResolvedAssets']['styles'] .= $styles;
-		return $settings;
-	},
-	11
-);
diff --git a/lib/compat/wordpress-6.4/html-api/class-gutenberg-html-tag-processor-6-4.php b/lib/compat/wordpress-6.4/html-api/class-gutenberg-html-tag-processor-6-4.php
deleted file mode 100644
index 40e3ce425f8b0..0000000000000
--- a/lib/compat/wordpress-6.4/html-api/class-gutenberg-html-tag-processor-6-4.php
+++ /dev/null
@@ -1,2457 +0,0 @@
-<?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.
- *  - Decode HTML character references within class names when matching. E.g. match having
- *    class `1<"2` needs to recognize `class="1&lt;&quot;2"`. Currently the Tag Processor
- *    will fail to find the right tag if the class name is encoded as such.
- *  - Properly decode HTML character references in `get_attribute()`. PHP's
- *    `html_entity_decode()` is wrong in a couple ways: it doesn't account for the
- *    no-ambiguous-ampersand rule, and it improperly handles the way semicolons may
- *    or may not terminate a character reference.
- *
- * @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).
- *
- * ### 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++;
- *             }
- *         }
- *     }
- *
- * ## 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.
- *
- * @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.
- */
-class Gutenberg_HTML_Tag_Processor_6_4 {
-	/**
-	 * 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;
-
-	/**
-	 * 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 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 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|null
-	 */
-	private $tag_ends_at;
-
-	/**
-	 * 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_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 = array(
-	 *         '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.
-	 *
-	 * @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;
-	 *     $end   = $attributes['src']->end;
-	 *     $modifications[] = new WP_HTML_Text_Replacement( $start, $end, $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
-	 *
-	 * @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 ) {
-		$this->parse_query( $query );
-		$already_found = 0;
-
-		do {
-			if ( $this->bytes_already_parsed >= strlen( $this->html ) ) {
-				return false;
-			}
-
-			// Find the next tag if it exists.
-			if ( false === $this->parse_next_tag() ) {
-				$this->bytes_already_parsed = strlen( $this->html );
-
-				return false;
-			}
-
-			// Parse all of its attributes.
-			while ( $this->parse_next_attribute() ) {
-				continue;
-			}
-
-			// Ensure that the tag closes before the end of the document.
-			if ( $this->bytes_already_parsed >= strlen( $this->html ) ) {
-				return false;
-			}
-
-			$tag_ends_at = strpos( $this->html, '>', $this->bytes_already_parsed );
-			if ( false === $tag_ends_at ) {
-				return false;
-			}
-			$this->tag_ends_at          = $tag_ends_at;
-			$this->bytes_already_parsed = $tag_ends_at;
-
-			// Finally, check if the parsed tag and its attributes match the search query.
-			if ( $this->matches() ) {
-				++$already_found;
-			}
-
-			/*
-			 * 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
-				) ) {
-				$tag_name = $this->get_tag();
-
-				if ( 'SCRIPT' === $tag_name && ! $this->skip_script_data() ) {
-					$this->bytes_already_parsed = strlen( $this->html );
-					return false;
-				} elseif (
-					( 'TEXTAREA' === $tag_name || 'TITLE' === $tag_name ) &&
-					! $this->skip_rcdata( $tag_name )
-				) {
-					$this->bytes_already_parsed = strlen( $this->html );
-					return false;
-				} elseif (
-					(
-						'IFRAME' === $tag_name ||
-						'NOEMBED' === $tag_name ||
-						'NOFRAMES' === $tag_name ||
-						'NOSCRIPT' === $tag_name ||
-						'STYLE' === $tag_name
-					) &&
-					! $this->skip_rawtext( $tag_name )
-				) {
-					/*
-					 * "XMP" should be here too but its rules are more complicated and require the
-					 * complexity of the HTML Processor (it needs to close out any open P element,
-					 * meaning it can't be skipped here or else the HTML Processor will lose its
-					 * place). For now, it can be ignored as it's a rare HTML tag in practice and
-					 * any normative HTML should be using PRE instead.
-					 */
-					$this->bytes_already_parsed = strlen( $this->html );
-					return false;
-				}
-			}
-		} while ( $already_found < $this->sought_match_offset );
-
-		return true;
-	}
-
-
-	/**
-	 * 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() {
-		/** @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 ) {
-		if ( ! $this->tag_name_starts_at ) {
-			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 ) {
-		if ( null === $this->tag_name_starts_at ) {
-			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 WP_HTML_Span(
-			$this->tag_name_starts_at - ( $this->is_closing_tag ? 2 : 1 ),
-			$this->tag_ends_at
-		);
-
-		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 ) {
-		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( $tag_name ) {
-		/*
-		 * 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( $tag_name ) {
-		$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 );
-
-			// If there is no possible tag closer then fail.
-			if ( false === $at || ( $at + $tag_length ) >= $doc_length ) {
-				$this->bytes_already_parsed = $doc_length;
-				return false;
-			}
-
-			$closer_potentially_starts_at = $at;
-			$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;
-
-			/*
-			 * 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 ] || '/' === $html[ $at ] ) {
-				$this->bytes_already_parsed = $closer_potentially_starts_at;
-				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() {
-		$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;
-				if ( $this->bytes_already_parsed >= $doc_length ) {
-					return false;
-				}
-
-				while ( $this->parse_next_attribute() ) {
-					continue;
-				}
-
-				if ( '>' === $html[ $this->bytes_already_parsed ] ) {
-					$this->bytes_already_parsed = $closer_potentially_starts_at;
-					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() {
-		$this->after_tag();
-
-		$html       = $this->html;
-		$doc_length = strlen( $html );
-		$at         = $this->bytes_already_parsed;
-
-		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. 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->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->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 >= 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 – 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 = $at + 4;
-					// If it's not possible to close the comment then there is nothing more to scan.
-					if ( strlen( $html ) <= $closer_at ) {
-						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 ] ) {
-						$at = $closer_at + $span_of_dashes + 1;
-						continue;
-					}
-
-					/*
-					 * 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 < strlen( $html ) ) {
-						$closer_at = strpos( $html, '--', $closer_at );
-						if ( false === $closer_at ) {
-							return false;
-						}
-
-						if ( $closer_at + 2 < strlen( $html ) && '>' === $html[ $closer_at + 2 ] ) {
-							$at = $closer_at + 3;
-							continue 2;
-						}
-
-						if ( $closer_at + 3 < strlen( $html ) && '!' === $html[ $closer_at + 2 ] && '>' === $html[ $closer_at + 3 ] ) {
-							$at = $closer_at + 4;
-							continue 2;
-						}
-					}
-				}
-
-				/*
-				 * <![CDATA[ transitions to CDATA section state – 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 – 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' === $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 ) {
-						return false;
-					}
-
-					$at = $closer_at + 1;
-					continue;
-				}
-
-				/*
-				 * Anything else here is an incorrectly-opened comment and transitions
-				 * to the bogus comment state - skip to the nearest >.
-				 */
-				$at = strpos( $html, '>', $at + 1 );
-				continue;
-			}
-
-			/*
-			 * </> is a missing end tag name, which is ignored.
-			 *
-			 * See https://html.spec.whatwg.org/#parse-error-missing-end-tag-name
-			 */
-			if ( '>' === $html[ $at + 1 ] ) {
-				++$at;
-				continue;
-			}
-
-			/*
-			 * <? transitions to a bogus comment state – skip to the nearest >
-			 * See 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;
-			}
-
-			/*
-			 * If a non-alpha starts the tag name in a tag closer it's a comment.
-			 * Find the first `>`, which closes the comment.
-			 *
-			 * See https://html.spec.whatwg.org/#parse-error-invalid-first-character-of-tag-name
-			 */
-			if ( $this->is_closing_tag ) {
-				$closer_at = strpos( $html, '>', $at + 3 );
-				if ( false === $closer_at ) {
-					return false;
-				}
-
-				$at = $closer_at + 1;
-				continue;
-			}
-
-			++$at;
-		}
-
-		return false;
-	}
-
-	/**
-	 * 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() {
-		// Skip whitespace and slashes.
-		$this->bytes_already_parsed += strspn( $this->html, " \t\f\r\n/", $this->bytes_already_parsed );
-		if ( $this->bytes_already_parsed >= strlen( $this->html ) ) {
-			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 >= strlen( $this->html ) ) {
-			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 >= strlen( $this->html ) ) {
-			return false;
-		}
-
-		$this->skip_whitespace();
-		if ( $this->bytes_already_parsed >= strlen( $this->html ) ) {
-			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 >= strlen( $this->html ) ) {
-				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;
-					$value_length               = strcspn( $this->html, $quote, $value_start );
-					$attribute_end              = $value_start + $value_length + 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 >= strlen( $this->html ) ) {
-			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 ( ! array_key_exists( $comparable_name, $this->attributes ) ) {
-			$this->attributes[ $comparable_name ] = new WP_HTML_Attribute_Token(
-				$attribute_name,
-				$value_start,
-				$value_length,
-				$attribute_start,
-				$attribute_end,
-				! $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 WP_HTML_Span( $attribute_start, $attribute_end );
-		if ( null === $this->duplicate_attributes ) {
-			$this->duplicate_attributes = array( $comparable_name => array( $duplicate_span ) );
-		} elseif ( ! array_key_exists( $comparable_name, $this->duplicate_attributes ) ) {
-			$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() {
-		$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() {
-		$this->get_updated_html();
-		$this->tag_name_starts_at   = null;
-		$this->tag_name_length      = null;
-		$this->tag_ends_at          = null;
-		$this->is_closing_tag       = null;
-		$this->attributes           = array();
-		$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() {
-		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.
-			 */
-			$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( $shift_this_point = 0 ) {
-		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->end - $diff->start );
-
-			// 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->end;
-		}
-
-		$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 ) {
-			/*
-			 * 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 ) {
-				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->end - $diff->start );
-
-				if ( $bookmark->start >= $diff->start ) {
-					$head_delta += $delta;
-				}
-
-				if ( $bookmark->end >= $diff->end ) {
-					$tail_delta += $delta;
-				}
-			}
-
-			$bookmark->start += $head_delta;
-			$bookmark->end   += $tail_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 ) {
-		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 ) {
-		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;
-		return $this->next_tag( array( 'tag_closers' => 'visit' ) );
-	}
-
-	/**
-	 * 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( $a, $b ) {
-		$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->end - $b->end;
-	}
-
-	/**
-	 * 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( $comparable_name ) {
-		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 html_entity_decode( $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 ( null === $this->tag_name_starts_at ) {
-			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 html_entity_decode( $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 ) {
-		if ( $this->is_closing_tag || null === $this->tag_name_starts_at ) {
-			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() {
-		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 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() {
-		if ( ! $this->tag_name_starts_at ) {
-			return false;
-		}
-
-		return '/' === $this->html[ $this->tag_ends_at - 1 ];
-	}
-
-	/**
-	 * 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() {
-		return $this->is_closing_tag;
-	}
-
-	/**
-	 * 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 ) {
-		if ( $this->is_closing_tag || null === $this->tag_name_starts_at ) {
-			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 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->lexical_updates[ $comparable_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
-			);
-		}
-
-		/*
-		 * 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 ) {
-		if ( $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 WP_HTML_Text_Replacement(
-			$this->attributes[ $name ]->start,
-			$this->attributes[ $name ]->end,
-			''
-		);
-
-		// Removes any duplicated attributes if they were also present.
-		if ( null !== $this->duplicate_attributes && array_key_exists( $name, $this->duplicate_attributes ) ) {
-			foreach ( $this->duplicate_attributes[ $name ] as $attribute_token ) {
-				$this->lexical_updates[] = new WP_HTML_Text_Replacement(
-					$attribute_token->start,
-					$attribute_token->end,
-					''
-				);
-			}
-		}
-
-		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 ) {
-		if ( $this->is_closing_tag ) {
-			return false;
-		}
-
-		if ( null !== $this->tag_name_starts_at ) {
-			$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 ) {
-		if ( $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() {
-		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() {
-		$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->tag_name_starts_at - 1;
-
-		/*
-		 * 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->parse_next_tag();
-		// Reparse the attributes.
-		while ( $this->parse_next_attribute() ) {
-			continue;
-		}
-
-		$tag_ends_at                = strpos( $this->html, '>', $this->bytes_already_parsed );
-		$this->tag_ends_at          = $tag_ends_at;
-		$this->bytes_already_parsed = $tag_ends_at;
-
-		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() {
-		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 ( 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;
-			}
-
-			/*
-			 * Check each character to determine if they are the same.
-			 * Defer calls to `strtoupper()` to avoid them when possible.
-			 * Calling `strcasecmp()` here tested slowed than comparing each
-			 * character, so unless benchmarks show otherwise, it should
-			 * not be used.
-			 *
-			 * It's expected that most of the time that this runs, a
-			 * lower-case tag name will be supplied and the input will
-			 * contain lower-case tag names, thus normally bypassing
-			 * the case comparison code.
-			 */
-			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;
-				}
-			}
-		}
-
-		if ( null !== $this->sought_class_name && ! $this->has_class( $this->sought_class_name ) ) {
-			return false;
-		}
-
-		return true;
-	}
-}
diff --git a/lib/compat/wordpress-6.4/html-api/class-wp-html-active-formatting-elements.php b/lib/compat/wordpress-6.4/html-api/class-wp-html-active-formatting-elements.php
deleted file mode 100644
index 4bf726bd39ec9..0000000000000
--- a/lib/compat/wordpress-6.4/html-api/class-wp-html-active-formatting-elements.php
+++ /dev/null
@@ -1,190 +0,0 @@
-<?php
-/**
- * HTML API: WP_HTML_Active_Formatting_Elements class
- *
- * @package WordPress
- * @subpackage HTML-API
- * @since 6.4.0
- */
-
-if ( ! class_exists( 'WP_HTML_Active_Formatting_Elements' ) ) {
-
-	/**
-	 * 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 WP_HTML_Active_Formatting_Elements {
-		/**
-		 * 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( $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( $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( $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 ];
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/lib/compat/wordpress-6.4/html-api/class-wp-html-open-elements.php b/lib/compat/wordpress-6.4/html-api/class-wp-html-open-elements.php
deleted file mode 100644
index f8f6f43119390..0000000000000
--- a/lib/compat/wordpress-6.4/html-api/class-wp-html-open-elements.php
+++ /dev/null
@@ -1,435 +0,0 @@
-<?php
-/**
- * HTML API: WP_HTML_Open_Elements class
- *
- * @package WordPress
- * @subpackage HTML-API
- * @since 6.4.0
- */
-
-if ( ! class_exists( 'WP_HTML_Open_Elements' ) ) {
-
-	/**
-	 * 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 WP_HTML_Open_Elements {
-		/**
-		 * 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;
-
-		/**
-		 * 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( $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 open elements.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @return int How many node are in the stack of open elements.
-		 */
-		public function count() {
-			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() {
-			$current_node = end( $this->stack );
-
-			return $current_node ? $current_node : null;
-		}
-
-		/**
-		 * Returns whether an element is in a specific scope.
-		 *
-		 * ## HTML Support
-		 *
-		 * This function skips checking for the termination list because there
-		 * are no supported elements which appear in the termination list.
-		 *
-		 * @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( $tag_name, $termination_list ) {
-			foreach ( $this->walk_up() as $node ) {
-				if ( $node->node_name === $tag_name ) {
-					return true;
-				}
-
-				switch ( $node->node_name ) {
-					case 'HTML':
-						return false;
-				}
-
-				if ( in_array( $node->node_name, $termination_list, true ) ) {
-					return true;
-				}
-			}
-
-			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( $tag_name ) {
-			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
-		 *
-		 * @see https://html.spec.whatwg.org/#has-an-element-in-list-item-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_list_item_scope( $tag_name ) {
-			throw new WP_HTML_Unsupported_Exception( 'Cannot process elements depending on list item scope.' );
-
-			return false; // The linter requires this unreachable code until the function is implemented and can return.
-		}
-
-		/**
-		 * 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( $tag_name ) {
-			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( $tag_name ) {
-			throw new WP_HTML_Unsupported_Exception( '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.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @see https://html.spec.whatwg.org/#has-an-element-in-select-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_select_scope( $tag_name ) {
-			throw new WP_HTML_Unsupported_Exception( 'Cannot process elements depending on select scope.' );
-
-			return false; // The linter requires this unreachable code until the function is implemented and can return.
-		}
-
-		/**
-		 * 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() {
-			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() {
-			$item = array_pop( $this->stack );
-
-			if ( null === $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( $tag_name ) {
-			foreach ( $this->walk_up() as $item ) {
-				$this->pop();
-
-				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( $stack_item ) {
-			$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( $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 );
-				$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
-		 */
-		public function walk_up() {
-			for ( $i = count( $this->stack ) - 1; $i >= 0; $i-- ) {
-				yield $this->stack[ $i ];
-			}
-		}
-
-		/*
-		 * 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( $item ) {
-			/*
-			 * 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;
-			}
-		}
-
-		/**
-		 * 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( $item ) {
-			/*
-			 * 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;
-			}
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.4/html-api/class-wp-html-processor-state.php b/lib/compat/wordpress-6.4/html-api/class-wp-html-processor-state.php
deleted file mode 100644
index 03443c2b3d326..0000000000000
--- a/lib/compat/wordpress-6.4/html-api/class-wp-html-processor-state.php
+++ /dev/null
@@ -1,146 +0,0 @@
-<?php
-/**
- * HTML API: WP_HTML_Processor_State class
- *
- * @package WordPress
- * @subpackage HTML-API
- * @since 6.4.0
- */
-
-if ( ! class_exists( 'WP_HTML_Processor_State' ) ) {
-
-	/**
-	 * 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 WP_HTML_Processor_State {
-		/*
-		 * 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';
-
-		/**
-		 * 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';
-
-		/**
-		 * 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 = null;
-
-		/**
-		 * 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 = null;
-
-		/**
-		 * 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;
-
-		/**
-		 * 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 WP_HTML_Open_Elements();
-			$this->active_formatting_elements = new WP_HTML_Active_Formatting_Elements();
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.4/html-api/class-wp-html-processor.php b/lib/compat/wordpress-6.4/html-api/class-wp-html-processor.php
deleted file mode 100644
index 4a2714218229e..0000000000000
--- a/lib/compat/wordpress-6.4/html-api/class-wp-html-processor.php
+++ /dev/null
@@ -1,1446 +0,0 @@
-<?php
-/**
- * HTML API: WP_HTML_Processor class
- *
- * @package WordPress
- * @subpackage HTML-API
- * @since 6.4.0
- */
-
-if ( ! class_exists( 'WP_HTML_Processor' ) ) {
-
-	/**
-	 * 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:
-	 *
-	 *  - Links: A.
-	 *  - The formatting elements: B, BIG, CODE, EM, FONT, I, SMALL, STRIKE, STRONG, TT, U.
-	 *  - Containers: DIV, FIGCAPTION, FIGURE, SPAN.
-	 *  - Form elements: BUTTON.
-	 *  - Paragraph: P.
-	 *  - Void elements: IMG.
-	 *
-	 * ### 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 WP_HTML_Processor extends Gutenberg_HTML_Tag_Processor_6_4 {
-		/**
-		 * 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;
-
-		/**
-		 * Static query for instructing the Tag Processor to visit every token.
-		 *
-		 * @access private
-		 *
-		 * @since 6.4.0
-		 *
-		 * @var array
-		 */
-		const VISIT_EVERYTHING = array( 'tag_closers' => 'visit' );
-
-		/**
-		 * 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 = null;
-
-		/**
-		 * 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;
-
-		/**
-		 * 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
-		 */
-		private $release_internal_bookmark_on_destruct = null;
-
-		/*
-		 * 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
-		 *
-		 * @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 WP_HTML_Processor|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;
-			}
-
-			$p                        = new self( $html, self::CONSTRUCTOR_UNLOCK_CODE );
-			$p->state->context_node   = array( 'BODY', array() );
-			$p->state->insertion_mode = WP_HTML_Processor_State::INSERTION_MODE_IN_BODY;
-
-			// @TODO: Create "fake" bookmarks for non-existent but implied nodes.
-			$p->bookmarks['root-node']    = new WP_HTML_Span( 0, 0 );
-			$p->bookmarks['context-node'] = new WP_HTML_Span( 0, 0 );
-
-			$p->state->stack_of_open_elements->push(
-				new WP_HTML_Token(
-					'root-node',
-					'HTML',
-					false
-				)
-			);
-
-			$p->state->stack_of_open_elements->push(
-				new WP_HTML_Token(
-					'context-node',
-					$p->state->context_node[0],
-					false
-				)
-			);
-
-			return $p;
-		}
-
-		/**
-		 * 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 WP_HTML_Processor_State();
-
-			/*
-			 * 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 ( $name ) {
-				parent::release_bookmark( $name );
-			};
-		}
-
-		/**
-		 * 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() {
-			return $this->last_error;
-		}
-
-		/**
-		 * Finds the next tag matching the $query.
-		 *
-		 * @TODO: Support matching the class name and tag name.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @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 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 ) {
-			if ( null === $query ) {
-				while ( $this->step() ) {
-					if ( ! $this->is_tag_closer() ) {
-						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;
-			}
-
-			if ( ! ( array_key_exists( 'breadcrumbs', $query ) && is_array( $query['breadcrumbs'] ) ) ) {
-				while ( $this->step() ) {
-					if ( ! $this->is_tag_closer() ) {
-						return true;
-					}
-				}
-
-				return false;
-			}
-
-			if ( isset( $query['tag_closers'] ) && 'visit' === $query['tag_closers'] ) {
-				_doing_it_wrong(
-					__METHOD__,
-					__( 'Cannot visit tag closers in HTML Processor.' ),
-					'6.4.0'
-				);
-				return false;
-			}
-
-			$breadcrumbs  = $query['breadcrumbs'];
-			$match_offset = isset( $query['match_offset'] ) ? (int) $query['match_offset'] : 1;
-
-			while ( $match_offset > 0 && $this->step() ) {
-				if ( $this->matches_breadcrumbs( $breadcrumbs ) && 0 === --$match_offset ) {
-					return true;
-				}
-			}
-
-			return false;
-		}
-
-		/**
-		 * 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 ) {
-			if ( ! $this->get_tag() ) {
-				return false;
-			}
-
-			// 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;
-			}
-
-			foreach ( $this->state->stack_of_open_elements->walk_up() as $node ) {
-				$crumb = strtoupper( current( $breadcrumbs ) );
-
-				if ( '*' !== $crumb && $node->node_name !== $crumb ) {
-					return false;
-				}
-
-				if ( false === prev( $breadcrumbs ) ) {
-					return true;
-				}
-			}
-
-			return false;
-		}
-
-		/**
-		 * 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 ) {
-			// Refuse to proceed if there was a previous error.
-			if ( null !== $this->last_error ) {
-				return false;
-			}
-
-			if ( self::PROCESS_NEXT_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 ( $top_node && self::is_void( $top_node->node_name ) ) {
-					$this->state->stack_of_open_elements->pop();
-				}
-
-				parent::next_tag( self::VISIT_EVERYTHING );
-			}
-
-			// Finish stepping when there are no more tokens in the document.
-			if ( null === $this->get_tag() ) {
-				return false;
-			}
-
-			$this->state->current_token = new WP_HTML_Token(
-				$this->bookmark_tag(),
-				$this->get_tag(),
-				$this->is_tag_closer(),
-				$this->release_internal_bookmark_on_destruct
-			);
-
-			try {
-				switch ( $this->state->insertion_mode ) {
-					case WP_HTML_Processor_State::INSERTION_MODE_IN_BODY:
-						return $this->step_in_body();
-
-					default:
-						$this->last_error = self::ERROR_UNSUPPORTED;
-						throw new WP_HTML_Unsupported_Exception( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-				}
-			} catch ( WP_HTML_Unsupported_Exception $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() {
-			if ( ! $this->get_tag() ) {
-				return null;
-			}
-
-			$breadcrumbs = array();
-			foreach ( $this->state->stack_of_open_elements->walk_down() as $stack_item ) {
-				$breadcrumbs[] = $stack_item->node_name;
-			}
-
-			return $breadcrumbs;
-		}
-
-		/**
-		 * 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() {
-			$tag_name = $this->get_tag();
-			$op_sigil = $this->is_tag_closer() ? '-' : '+';
-			$op       = "{$op_sigil}{$tag_name}";
-
-			switch ( $op ) {
-				/*
-				 * > 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 '+BLOCKQUOTE':
-				case '+DIV':
-				case '+FIGCAPTION':
-				case '+FIGURE':
-				case '+P':
-					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 '-BLOCKQUOTE':
-				case '-BUTTON':
-				case '-DIV':
-				case '-FIGCAPTION':
-				case '-FIGURE':
-					if ( ! $this->state->stack_of_open_elements->has_element_in_scope( $tag_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()->node_name !== $tag_name ) {
-						// @TODO: Record parse error: this error doesn't impact parsing.
-					}
-					$this->state->stack_of_open_elements->pop_until( $tag_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;
-
-				/*
-				 * > A start tag whose tag name is one of: "area", "br", "embed", "img", "keygen", "wbr"
-				 */
-				case '+IMG':
-					$this->reconstruct_active_formatting_elements();
-					$this->insert_html_element( $this->state->current_token );
-					return true;
-
-				/*
-				 * > Any other start tag
-				 */
-				case '+SPAN':
-					$this->reconstruct_active_formatting_elements();
-					$this->insert_html_element( $this->state->current_token );
-					return true;
-
-				/*
-				 * Any other end tag
-				 */
-				case '-SPAN':
-					foreach ( $this->state->stack_of_open_elements->walk_up() as $item ) {
-						// > If node is an HTML element with the same tag name as the token, then:
-						if ( $item->node_name === $tag_name ) {
-							$this->generate_implied_end_tags( $tag_name );
-
-							// > If node is not the current node, then this is a parse error.
-
-							$this->state->stack_of_open_elements->pop_until( $tag_name );
-							return true;
-						}
-
-						// > Otherwise, if node is in the special category, then this is a parse error; ignore the token, and return.
-						if ( self::is_special( $item->node_name ) ) {
-							return $this->step();
-						}
-					}
-					// Execution should not reach here; if it does then something went wrong.
-					return false;
-
-				default:
-					$this->last_error = self::ERROR_UNSUPPORTED;
-					throw new WP_HTML_Unsupported_Exception( "Cannot process {$tag_name} element." );
-			}
-		}
-
-		/*
-		 * Internal helpers
-		 */
-
-		/**
-		 * Creates a new bookmark for the currently-matched tag and returns the generated name.
-		 *
-		 * @since 6.4.0
-		 *
-		 * @throws Exception When unable to allocate requested bookmark.
-		 *
-		 * @return string|false Name of created bookmark, or false if unable to create.
-		 */
-		private function bookmark_tag() {
-			if ( ! $this->get_tag() ) {
-				return false;
-			}
-
-			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() {
-			if ( null !== $this->last_error ) {
-				return null;
-			}
-
-			$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;
-			}
-		}
-
-		/**
-		 * 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 ) {
-			return parent::release_bookmark( "_{$bookmark_name}" );
-		}
-
-		/**
-		 * Moves the internal cursor in the HTML 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.
-		 *
-		 * @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 ) {
-			$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';
-
-			switch ( $direction ) {
-				case 'forward':
-					// When moving forwards, re-parse the document until reaching the same location as the original bookmark.
-					while ( $this->step() ) {
-						if ( $bookmark_starts_at === $this->bookmarks[ $this->state->current_token->bookmark_name ]->start ) {
-							return true;
-						}
-					}
-
-					return false;
-
-				case 'backward':
-					/*
-					 * When moving backwards, clear out all existing stack entries which appear after the destination
-					 * bookmark. These could be stored for later retrieval, but doing so would require additional
-					 * memory overhead and also demand that references and bookmarks are updated as the document
-					 * changes. In time this could be a valuable optimization, but it's okay to give up that
-					 * optimization in exchange for more CPU time to recompute the stack, to re-parse the
-					 * document that may have already been parsed once.
-					 */
-					foreach ( $this->state->stack_of_open_elements->walk_up() as $item ) {
-						if ( $bookmark_starts_at >= $this->bookmarks[ $item->bookmark_name ]->start ) {
-							break;
-						}
-
-						$this->state->stack_of_open_elements->remove_node( $item );
-					}
-
-					foreach ( $this->state->active_formatting_elements->walk_up() as $item ) {
-						if ( $bookmark_starts_at >= $this->bookmarks[ $item->bookmark_name ]->start ) {
-							break;
-						}
-
-						$this->state->active_formatting_elements->remove_node( $item );
-					}
-
-					return parent::seek( $actual_bookmark_name );
-			}
-		}
-
-		/**
-		 * 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 ) {
-			return parent::set_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() {
-			$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
-		 *
-		 * @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( $except_for_this_element = null ) {
-			$elements_with_implied_end_tags = array(
-				'P',
-			);
-
-			$current_node = $this->state->stack_of_open_elements->current_node();
-			while (
-				$current_node && $current_node->node_name !== $except_for_this_element &&
-				in_array( $this->state->stack_of_open_elements->current_node(), $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
-		 *
-		 * @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() {
-			$elements_with_implied_end_tags = array(
-				'P',
-			);
-
-			while ( in_array( $this->state->stack_of_open_elements->current_node(), $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() {
-			/*
-			 * > 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->last_error = self::ERROR_UNSUPPORTED;
-			throw new WP_HTML_Unsupported_Exception( 'Cannot reconstruct active formatting elements when advancing and rewinding is required.' );
-		}
-
-		/**
-		 * 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() {
-			$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->last_error = self::ERROR_UNSUPPORTED;
-					throw new WP_HTML_Unsupported_Exception( '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->bookmark_name );
-					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->last_error = self::ERROR_UNSUPPORTED;
-				throw new WP_HTML_Unsupported_Exception( 'Cannot extract common ancestor in adoption agency algorithm.' );
-			}
-
-			$this->last_error = self::ERROR_UNSUPPORTED;
-			throw new WP_HTML_Unsupported_Exception( '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( $token ) {
-			$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 ) {
-			$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 ) {
-			$tag_name = strtoupper( $tag_name );
-
-			return (
-				'AREA' === $tag_name ||
-				'BASE' === $tag_name ||
-				'BR' === $tag_name ||
-				'COL' === $tag_name ||
-				'EMBED' === $tag_name ||
-				'HR' === $tag_name ||
-				'IMG' === $tag_name ||
-				'INPUT' === $tag_name ||
-				'LINK' === $tag_name ||
-				'META' === $tag_name ||
-				'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 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.4/html-api/class-wp-html-token.php b/lib/compat/wordpress-6.4/html-api/class-wp-html-token.php
deleted file mode 100644
index 87446f4533572..0000000000000
--- a/lib/compat/wordpress-6.4/html-api/class-wp-html-token.php
+++ /dev/null
@@ -1,109 +0,0 @@
-<?php
-/**
- * HTML API: WP_HTML_Token class
- *
- * @package WordPress
- * @subpackage HTML-API
- * @since 6.4.0
- */
-
-if ( ! class_exists( 'WP_HTML_Token' ) ) {
-
-	/**
-	 * 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 WP_HTML_Token {
-		/**
-		 * 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 $on_destroy            Function to call when destroying token, useful for releasing the bookmark.
-		 */
-		public function __construct( $bookmark_name, $node_name, $has_self_closing_flag, $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.4/html-api/class-wp-html-unsupported-exception.php b/lib/compat/wordpress-6.4/html-api/class-wp-html-unsupported-exception.php
deleted file mode 100644
index 7a84a084b2e6c..0000000000000
--- a/lib/compat/wordpress-6.4/html-api/class-wp-html-unsupported-exception.php
+++ /dev/null
@@ -1,34 +0,0 @@
-<?php
-/**
- * HTML API: WP_HTML_Unsupported_Exception class
- *
- * @package WordPress
- * @subpackage HTML-API
- * @since 6.4.0
- */
-
-if ( ! class_exists( 'WP_HTML_Unsupported_Exception' ) ) {
-
-	/**
-	 * 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
-	 *
-	 * @access private
-	 *
-	 * @see WP_HTML_Processor
-	 */
-	class WP_HTML_Unsupported_Exception extends Exception {
-
-	}
-}
diff --git a/lib/compat/wordpress-6.4/kses.php b/lib/compat/wordpress-6.4/kses.php
deleted file mode 100644
index 019d1cc9b06db..0000000000000
--- a/lib/compat/wordpress-6.4/kses.php
+++ /dev/null
@@ -1,18 +0,0 @@
-<?php
-/**
- * Temporary compatibility shims for block APIs present in Gutenberg.
- *
- * @package gutenberg
- */
-
-/**
- * Update allowed inline style attributes list.
- *
- * @param string[] $attrs Array of allowed CSS attributes.
- * @return string[] CSS attributes.
- */
-function gutenberg_safe_style_attrs_6_4( $attrs ) {
-	$attrs[] = 'writing-mode';
-	return $attrs;
-}
-add_filter( 'safe_style_css', 'gutenberg_safe_style_attrs_6_4' );
diff --git a/lib/compat/wordpress-6.4/rest-api.php b/lib/compat/wordpress-6.4/rest-api.php
deleted file mode 100644
index 1c62b1780d1e4..0000000000000
--- a/lib/compat/wordpress-6.4/rest-api.php
+++ /dev/null
@@ -1,40 +0,0 @@
-<?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.' );
-}
-
-/**
- * Registers the block patterns REST API routes.
- */
-function gutenberg_register_rest_block_patterns_routes() {
-	$block_patterns = new Gutenberg_REST_Block_Patterns_Controller();
-	$block_patterns->register_routes();
-}
-add_action( 'rest_api_init', 'gutenberg_register_rest_block_patterns_routes' );
-
-
-if ( ! function_exists( 'wp_api_template_revision_args' ) ) {
-	/**
-	 * Hook in to the template and template part post types and decorate
-	 * the rest endpoint with the revision count.
-	 *
-	 * @param array  $args Current registered post type args.
-	 * @param string $post_type Name of post type.
-	 *
-	 * @return array
-	 */
-	function wp_api_template_revision_args( $args, $post_type ) {
-		if ( 'wp_template' === $post_type || 'wp_template_part' === $post_type ) {
-			$args['rest_controller_class'] = 'Gutenberg_REST_Templates_Controller_6_4';
-		}
-		return $args;
-	}
-}
-add_filter( 'register_post_type_args', 'wp_api_template_revision_args', 10, 2 );
diff --git a/lib/compat/wordpress-6.4/script-loader.php b/lib/compat/wordpress-6.4/script-loader.php
deleted file mode 100644
index 60de7785aaeb2..0000000000000
--- a/lib/compat/wordpress-6.4/script-loader.php
+++ /dev/null
@@ -1,112 +0,0 @@
-<?php
-/**
- * Updates the script-loader.php file
- *
- * @package gutenberg
- */
-
-/**
- * Collect the block editor assets that need to be loaded into the editor's iframe.
- *
- * @since 6.0.0
- * @access private
- *
- * @global WP_Styles $wp_styles
- * @global WP_Scripts $wp_scripts
- *
- * @return array {
- *     The block editor assets.
- *
- *     @type string|false $styles  String containing the HTML for styles.
- *     @type string|false $scripts String containing the HTML for scripts.
- * }
- */
-function _gutenberg_get_iframed_editor_assets_6_4() {
-	global $wp_styles, $wp_scripts;
-
-	// Keep track of the styles and scripts instance to restore later.
-	$current_wp_styles  = $wp_styles;
-	$current_wp_scripts = $wp_scripts;
-
-	// Create new instances to collect the assets.
-	$wp_styles  = new WP_Styles();
-	$wp_scripts = new WP_Scripts();
-
-	// Register all currently registered styles and scripts. The actions that
-	// follow enqueue assets, but don't necessarily register them.
-	$wp_styles->registered  = $current_wp_styles->registered;
-	$wp_scripts->registered = $current_wp_scripts->registered;
-
-	// We generally do not need reset styles for the iframed editor.
-	// However, if it's a classic theme, margins will be added to every block,
-	// which is reset specifically for list items, so classic themes rely on
-	// these reset styles.
-	$wp_styles->done =
-		wp_theme_has_theme_json() ? array( 'wp-reset-editor-styles' ) : array();
-
-	wp_enqueue_script( 'wp-polyfill' );
-	// Enqueue the `editorStyle` handles for all core block, and dependencies.
-	wp_enqueue_style( 'wp-edit-blocks' );
-
-	if ( current_theme_supports( 'wp-block-styles' ) ) {
-		wp_enqueue_style( 'wp-block-library-theme' );
-	}
-
-	// We don't want to load EDITOR scripts in the iframe, only enqueue
-	// front-end assets for the content.
-	add_filter( 'should_load_block_editor_scripts_and_styles', '__return_false' );
-	do_action( 'enqueue_block_assets' );
-	remove_filter( 'should_load_block_editor_scripts_and_styles', '__return_false' );
-
-	$block_registry = WP_Block_Type_Registry::get_instance();
-
-	// Additionally, do enqueue `editorStyle` assets for all blocks, which
-	// contains editor-only styling for blocks (editor content).
-	foreach ( $block_registry->get_all_registered() as $block_type ) {
-		if ( isset( $block_type->editor_style_handles ) && is_array( $block_type->editor_style_handles ) ) {
-			foreach ( $block_type->editor_style_handles as $style_handle ) {
-				wp_enqueue_style( $style_handle );
-			}
-		}
-	}
-
-	/**
-	 * Remove the deprecated `print_emoji_styles` handler.
-	 * It avoids breaking style generation with a deprecation message.
-	 */
-	$has_emoji_styles = has_action( 'wp_print_styles', 'print_emoji_styles' );
-	if ( $has_emoji_styles ) {
-		remove_action( 'wp_print_styles', 'print_emoji_styles' );
-	}
-
-	ob_start();
-	wp_print_styles();
-	$styles = ob_get_clean();
-
-	if ( $has_emoji_styles ) {
-		add_action( 'wp_print_styles', 'print_emoji_styles' );
-	}
-
-	ob_start();
-	wp_print_head_scripts();
-	wp_print_footer_scripts();
-	$scripts = ob_get_clean();
-
-	// Restore the original instances.
-	$wp_styles  = $current_wp_styles;
-	$wp_scripts = $current_wp_scripts;
-
-	return array(
-		'styles'  => $styles,
-		'scripts' => $scripts,
-	);
-}
-
-add_filter(
-	'block_editor_settings_all',
-	static function ( $settings ) {
-		// We must override what core is passing now.
-		$settings['__unstableResolvedAssets'] = _gutenberg_get_iframed_editor_assets_6_4();
-		return $settings;
-	}
-);
diff --git a/lib/compat/wordpress-6.4/theme-previews.php b/lib/compat/wordpress-6.4/theme-previews.php
deleted file mode 100644
index 5755fc992921d..0000000000000
--- a/lib/compat/wordpress-6.4/theme-previews.php
+++ /dev/null
@@ -1,27 +0,0 @@
-<?php
-/**
- * Enable theme previews in the Site Editor for block themes.
- *
- * @package gutenberg
- */
-
-/**
- * Allow developers to customize the back to dashboard link in the Site Editor
- *
- * @param array $settings The editor settings.
- * @return array The editor settings.
- */
-function gutenberg_theme_preview_block_editor_settings_all( $settings ) {
-	$settings['__experimentalDashboardLink']     = 'themes.php';
-	$settings['__experimentalDashboardLinkText'] = __( 'Go back to the theme showcase' );
-	return $settings;
-}
-
-/**
- * Attaches filters to enable theme previews in the Site Editor.
- * This would go inside of `initialize_theme_preview_hooks`
- * to avoid the global scope when we port this to the core.
- */
-if ( ! empty( $_GET['wp_theme_preview'] ) ) {
-	add_filter( 'block_editor_settings_all', 'gutenberg_theme_preview_block_editor_settings_all' );
-}
diff --git a/lib/compat/wordpress-6.5/block-bindings/block-bindings.php b/lib/compat/wordpress-6.5/block-bindings/block-bindings.php
deleted file mode 100644
index cc26fe50d02fd..0000000000000
--- a/lib/compat/wordpress-6.5/block-bindings/block-bindings.php
+++ /dev/null
@@ -1,89 +0,0 @@
-<?php
-/**
- * Block Bindings API
- *
- * Contains functions for managing block bindings in WordPress.
- *
- * @package WordPress
- * @subpackage Block Bindings
- * @since 6.5.0
- */
-
-/**
- * Registers a new block bindings source.
- *
- * Sources are used to override block's original attributes with a value
- * coming from the source. Once a source is registered, it can be used by a
- * block by setting its `metadata.bindings` attribute to a value that refers
- * to the source.
- *
- * @since 6.5.0
- *
- * @param string $source_name       The name of the source. It must be a string containing a namespace prefix, i.e.
- *                                  `my-plugin/my-custom-source`. It must only contain lowercase alphanumeric
- *                                  characters, the forward slash `/` and dashes.
- * @param array  $source_properties {
- *     The array of arguments that are used to register a source.
- *
- *     @type string   $label                   The label of the source.
- *     @type callback $get_value_callback      A callback executed when the source is processed during block rendering.
- *                                             The callback should have the following signature:
- *
- *                                             `function ($source_args, $block_instance,$attribute_name): mixed`
- *                                                 - @param array    $source_args    Array containing source arguments
- *                                                                                   used to look up the override value,
- *                                                                                   i.e. {"key": "foo"}.
- *                                                 - @param WP_Block $block_instance The block instance.
- *                                                 - @param string   $attribute_name The name of an attribute .
- *                                             The callback has a mixed return type; it may return a string to override
- *                                             the block's original value, null, false to remove an attribute, etc.
- *     @type array    $uses_context (optional) Array of values to add to block `uses_context` needed by the source.
- * }
- * @return WP_Block_Bindings_Source|false Source when the registration was successful, or `false` on failure.
- */
-if ( ! function_exists( 'register_block_bindings_source' ) ) {
-	function register_block_bindings_source( string $source_name, array $source_properties ) {
-		return WP_Block_Bindings_Registry::get_instance()->register( $source_name, $source_properties );
-	}
-}
-
-/**
- * Unregisters a block bindings source.
- *
- * @since 6.5.0
- *
- * @param string $source_name Block bindings source name including namespace.
- * @return WP_Block_Bindings_Source|false The unregistered block bindings source on success and `false` otherwise.
- */
-if ( ! function_exists( 'unregister_block_bindings_source' ) ) {
-	function unregister_block_bindings_source( string $source_name ) {
-		return WP_Block_Bindings_Registry::get_instance()->unregister( $source_name );
-	}
-}
-
-/**
- * Retrieves the list of all registered block bindings sources.
- *
- * @since 6.5.0
- *
- * @return WP_Block_Bindings_Source The array of registered block bindings sources.
- */
-if ( ! function_exists( 'get_all_registered_block_bindings_sources' ) ) {
-	function get_all_registered_block_bindings_sources() {
-		return WP_Block_Bindings_Registry::get_instance()->get_all_registered();
-	}
-}
-
-/**
- * Retrieves a registered block bindings source.
- *
- * @since 6.5.0
- *
- * @param string $source_name The name of the source.
- * @return WP_Block_Bindings_Source|null The registered block bindings source, or `null` if it is not registered.
- */
-if ( ! function_exists( 'get_block_bindings_source' ) ) {
-	function get_block_bindings_source( string $source_name ) {
-		return WP_Block_Bindings_Registry::get_instance()->get_registered( $source_name );
-	}
-}
diff --git a/lib/compat/wordpress-6.5/block-bindings/class-wp-block-bindings-registry.php b/lib/compat/wordpress-6.5/block-bindings/class-wp-block-bindings-registry.php
deleted file mode 100644
index 8eb6f5271adf6..0000000000000
--- a/lib/compat/wordpress-6.5/block-bindings/class-wp-block-bindings-registry.php
+++ /dev/null
@@ -1,288 +0,0 @@
-<?php
-/**
- * Block Bindings API: WP_Block_Bindings_Registry class.
- *
- * Supports overriding content in blocks by connecting them to different sources.
- *
- * @package WordPress
- * @subpackage Block Bindings
- * @since 6.5.0
- */
-
-/**
- * Class used for interacting with block bindings sources.
- *
- * @since 6.5.0
- */
-if ( ! class_exists( 'WP_Block_Bindings_Registry' ) ) {
-	final class WP_Block_Bindings_Registry {
-		/**
-		 * Holds the registered block bindings sources, keyed by source identifier.
-		 *
-		 * @since 6.5.0
-		 * @var WP_Block_Bindings_Source[]
-		 */
-		private $sources = array();
-
-		/**
-		 * Container for the main instance of the class.
-		 *
-		 * @since 6.5.0
-		 * @var WP_Block_Bindings_Registry|null
-		 */
-		private static $instance = null;
-
-		/**
-		 * Supported source properties that can be passed to the registered source.
-		 *
-		 * @since 6.5.0
-		 * @var array
-		 */
-		private $allowed_source_properties = array(
-			'label',
-			'get_value_callback',
-			'uses_context',
-		);
-
-		/**
-		 * Supported blocks that can use the block bindings API.
-		 *
-		 * @since 6.5.0
-		 * @var array
-		 */
-		private $supported_blocks = array(
-			'core/paragraph',
-			'core/heading',
-			'core/image',
-			'core/button',
-		);
-
-		/**
-		 * Registers a new block bindings source.
-		 *
-		 * Sources are used to override block's original attributes with a value
-		 * coming from the source. Once a source is registered, it can be used by a
-		 * block by setting its `metadata.bindings` attribute to a value that refers
-		 * to the source.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string   $source_name       The name of the source. It must be a string containing a namespace prefix, i.e.
-		 *                                    `my-plugin/my-custom-source`. It must only contain lowercase alphanumeric
-		 *                                    characters, the forward slash `/` and dashes.
-		 * @param array    $source_properties {
-		 *     The array of arguments that are used to register a source.
-		 *
-		 *     @type string   $label                   The label of the source.
-		 *     @type callback $get_value_callback      A callback executed when the source is processed during block rendering.
-		 *                                             The callback should have the following signature:
-		 *
-		 *                                             `function ($source_args, $block_instance,$attribute_name): mixed`
-		 *                                                 - @param array    $source_args    Array containing source arguments
-		 *                                                                                   used to look up the override value,
-		 *                                                                                   i.e. {"key": "foo"}.
-		 *                                                 - @param WP_Block $block_instance The block instance.
-		 *                                                 - @param string   $attribute_name The name of the target attribute.
-		 *                                             The callback has a mixed return type; it may return a string to override
-		 *                                             the block's original value, null, false to remove an attribute, etc.
-		 *     @type array    $uses_context (optional) Array of values to add to block `uses_context` needed by the source.
-		 * }
-		 * @return WP_Block_Bindings_Source|false Source when the registration was successful, or `false` on failure.
-		 */
-		public function register( string $source_name, array $source_properties ) {
-			if ( ! is_string( $source_name ) ) {
-				_doing_it_wrong(
-					__METHOD__,
-					__( 'Block bindings source name must be a string.' ),
-					'6.5.0'
-				);
-				return false;
-			}
-
-			if ( preg_match( '/[A-Z]+/', $source_name ) ) {
-				_doing_it_wrong(
-					__METHOD__,
-					__( 'Block bindings source names must not contain uppercase characters.' ),
-					'6.5.0'
-				);
-				return false;
-			}
-
-			$name_matcher = '/^[a-z0-9-]+\/[a-z0-9-]+$/';
-			if ( ! preg_match( $name_matcher, $source_name ) ) {
-				_doing_it_wrong(
-					__METHOD__,
-					__( 'Block bindings source names must contain a namespace prefix. Example: my-plugin/my-custom-source' ),
-					'6.5.0'
-				);
-				return false;
-			}
-
-			if ( $this->is_registered( $source_name ) ) {
-				_doing_it_wrong(
-					__METHOD__,
-					/* translators: %s: Block bindings source name. */
-					sprintf( __( 'Block bindings source "%s" already registered.' ), $source_name ),
-					'6.5.0'
-				);
-				return false;
-			}
-
-			// Validate that the source properties contain the label.
-			if ( ! isset( $source_properties['label'] ) ) {
-				_doing_it_wrong(
-					__METHOD__,
-					__( 'The $source_properties must contain a "label".' ),
-					'6.5.0'
-				);
-				return false;
-			}
-
-			// Validate that the source properties contain the get_value_callback.
-			if ( ! isset( $source_properties['get_value_callback'] ) ) {
-				_doing_it_wrong(
-					__METHOD__,
-					__( 'The $source_properties must contain a "get_value_callback".' ),
-					'6.5.0'
-				);
-				return false;
-			}
-
-			// Validate that the get_value_callback is a valid callback.
-			if ( ! is_callable( $source_properties['get_value_callback'] ) ) {
-				_doing_it_wrong(
-					__METHOD__,
-					__( 'The "get_value_callback" parameter must be a valid callback.' ),
-					'6.5.0'
-				);
-				return false;
-			}
-
-			// Validate that the uses_context parameter is an array.
-			if ( isset( $source_properties['uses_context'] ) && ! is_array( $source_properties['uses_context'] ) ) {
-				_doing_it_wrong(
-					__METHOD__,
-					__( 'The "uses_context" parameter must be an array.' ),
-					'6.5.0'
-				);
-				return false;
-			}
-
-			// Validate that the source properties contain only allowed properties.
-			if ( ! empty( array_diff( array_keys( $source_properties ), $this->allowed_source_properties ) ) ) {
-				_doing_it_wrong(
-					__METHOD__,
-					__( 'The $source_properties array contains invalid properties.' ),
-					'6.5.0'
-				);
-				return false;
-			}
-
-			$source = new WP_Block_Bindings_Source(
-				$source_name,
-				$source_properties
-			);
-
-			$this->sources[ $source_name ] = $source;
-
-			// Add `uses_context` defined by block bindings sources.
-			add_filter(
-				'register_block_type_args',
-				function ( $args, $block_name ) use ( $source ) {
-					if ( ! in_array( $block_name, $this->supported_blocks, true ) || empty( $source->uses_context ) ) {
-						return $args;
-					}
-					$original_use_context = isset( $args['uses_context'] ) ? $args['uses_context'] : array();
-					// Use array_values to reset the array keys.
-					$args['uses_context'] = array_values( array_unique( array_merge( $original_use_context, $source->uses_context ) ) );
-
-					return $args;
-				},
-				10,
-				2
-			);
-			return $source;
-		}
-
-		/**
-		 * Unregisters a block bindings source.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $source_name Block bindings source name including namespace.
-		 * @return WP_Block_Bindings_Source|false The unregistered block bindings source on success and `false` otherwise.
-		 */
-		public function unregister( string $source_name ) {
-			if ( ! $this->is_registered( $source_name ) ) {
-				_doing_it_wrong(
-					__METHOD__,
-					/* translators: %s: Block bindings source name. */
-					sprintf( __( 'Block binding "%s" not found.' ), $source_name ),
-					'6.5.0'
-				);
-				return false;
-			}
-
-			$unregistered_source = $this->sources[ $source_name ];
-			unset( $this->sources[ $source_name ] );
-
-			return $unregistered_source;
-		}
-
-		/**
-		 * Retrieves the list of all registered block bindings sources.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @return WP_Block_Bindings_Source[] The array of registered sources.
-		 */
-		public function get_all_registered() {
-			return $this->sources;
-		}
-
-		/**
-		 * Retrieves a registered block bindings source.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $source_name The name of the source.
-		 * @return WP_Block_Bindings_Source|null The registered block bindings source, or `null` if it is not registered.
-		 */
-		public function get_registered( string $source_name ) {
-			if ( ! $this->is_registered( $source_name ) ) {
-				return null;
-			}
-
-			return $this->sources[ $source_name ];
-		}
-
-		/**
-		 * Checks if a block bindings source is registered.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $source_name The name of the source.
-		 * @return bool `true` if the block bindings source is registered, `false` otherwise.
-		 */
-		public function is_registered( $source_name ) {
-			return isset( $this->sources[ $source_name ] );
-		}
-
-		/**
-		 * Utility method to retrieve the main instance of the class.
-		 *
-		 * The instance will be created if it does not exist yet.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @return WP_Block_Bindings_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.5/block-bindings/class-wp-block-bindings-source.php b/lib/compat/wordpress-6.5/block-bindings/class-wp-block-bindings-source.php
deleted file mode 100644
index 1862f2af8bb11..0000000000000
--- a/lib/compat/wordpress-6.5/block-bindings/class-wp-block-bindings-source.php
+++ /dev/null
@@ -1,99 +0,0 @@
-<?php
-/**
- * Block Bindings API: WP_Block_Bindings_Source class.
- *
- *
- * @package WordPress
- * @subpackage Block Bindings
- * @since 6.5.0
- */
-
-/**
- * Class representing block bindings source.
- *
- * This class is designed for internal use by the Block Bindings registry.
- *
- * @since 6.5.0
- * @access private
- *
- * @see WP_Block_Bindings_Registry
- */
-if ( ! class_exists( 'WP_Block_Bindings_Source' ) ) {
-	final class WP_Block_Bindings_Source {
-
-		/**
-		 * The name of the source.
-		 *
-		 * @since 6.5.0
-		 * @var string
-		 */
-		public $name;
-
-		/**
-		 * The label of the source.
-		 *
-		 * @since 6.5.0
-		 * @var string
-		 */
-		public $label;
-
-
-		/**
-		 * The function used to get the value from the source.
-		 *
-		 * @since 6.5.0
-		 * @var callable
-		 */
-		private $get_value_callback;
-
-		/**
-		 * The context added to the blocks needed by the source.
-		 *
-		 * @since 6.5.0
-		 * @var array|null
-		 */
-		public $uses_context = null;
-
-		/**
-		 * Constructor.
-		 *
-		 * Do not use this constructor directly. Instead, use the
-		 * `WP_Block_Bindings_Registry::register` method or the `register_block_bindings_source` function.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $name               The name of the source.
-		 * @param array  $source_properties  The properties of the source.
-		 */
-		public function __construct( string $name, array $source_properties ) {
-			$this->name = $name;
-			foreach ( $source_properties as $property_name => $property_value ) {
-				$this->$property_name = $property_value;
-			}
-		}
-
-		/**
-		 * Retrieves the value from the source.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param array    $source_args     Array containing source arguments used to look up the override value, i.e. {"key": "foo"}.
-		 * @param WP_Block $block_instance  The block instance.
-		 * @param string   $attribute_name  The name of the target attribute.
-		 *
-		 * @return mixed The value of the source.
-		 */
-		public function get_value( array $source_args, $block_instance, string $attribute_name ) {
-			return call_user_func_array( $this->get_value_callback, array( $source_args, $block_instance, $attribute_name ) );
-		}
-
-		/**
-		 * Wakeup magic method.
-		 *
-		 * @since 6.5.0
-		 */
-		public function __wakeup() {
-			throw new \LogicException( __CLASS__ . ' should never be unserialized' );
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.5/block-bindings/post-meta.php b/lib/compat/wordpress-6.5/block-bindings/post-meta.php
deleted file mode 100644
index 56298a7c4d4c5..0000000000000
--- a/lib/compat/wordpress-6.5/block-bindings/post-meta.php
+++ /dev/null
@@ -1,65 +0,0 @@
-<?php
-/**
- * Post Meta source for the block bindings.
- *
- * @package gutenberg
- */
-
-/**
- * Gets value for Post Meta source.
- *
- * @param array    $source_args    Array containing source arguments used to look up the override value.
- *                                 Example: array( "key" => "foo" ).
- * @param WP_Block $block_instance The block instance.
- * @return mixed The value computed for the source.
- */
-function gutenberg_block_bindings_post_meta_callback( $source_attrs, $block_instance ) {
-	if ( empty( $source_attrs['key'] ) ) {
-		return null;
-	}
-
-	if ( empty( $block_instance->context['postId'] ) ) {
-		return null;
-	}
-	$post_id = $block_instance->context['postId'];
-	// If a post isn't public, we need to prevent unauthorized users from accessing the post meta.
-	$post = get_post( $post_id );
-	if ( ( ! is_post_publicly_viewable( $post ) && ! current_user_can( 'read_post', $post_id ) ) || post_password_required( $post ) ) {
-		return null;
-	}
-
-	// Check if the meta field is protected.
-	if ( is_protected_meta( $source_attrs['key'], 'post' ) ) {
-		return null;
-	}
-
-	// Check if the meta field is registered to be shown in REST.
-	$meta_keys = get_registered_meta_keys( 'post', $block_instance->context['postType'] );
-	// Add fields registered for all subtypes.
-	$meta_keys = array_merge( $meta_keys, get_registered_meta_keys( 'post', '' ) );
-	if ( empty( $meta_keys[ $source_attrs['key'] ]['show_in_rest'] ) ) {
-		return null;
-	}
-
-	return get_post_meta( $post_id, $source_attrs['key'], true );
-}
-
-/**
- * Registers Post Meta source in the block bindings registry.
- */
-function gutenberg_register_block_bindings_post_meta_source() {
-	// Override the "core/post-meta" source from core.
-	if ( array_key_exists( 'core/post-meta', get_all_registered_block_bindings_sources() ) ) {
-		unregister_block_bindings_source( 'core/post-meta' );
-	}
-	register_block_bindings_source(
-		'core/post-meta',
-		array(
-			'label'              => _x( 'Post Meta', 'block bindings source' ),
-			'get_value_callback' => 'gutenberg_block_bindings_post_meta_callback',
-			'uses_context'       => array( 'postId', 'postType' ),
-		)
-	);
-}
-
-add_action( 'init', 'gutenberg_register_block_bindings_post_meta_source' );
diff --git a/lib/compat/wordpress-6.5/block-patterns.php b/lib/compat/wordpress-6.5/block-patterns.php
deleted file mode 100644
index cce97cb19c690..0000000000000
--- a/lib/compat/wordpress-6.5/block-patterns.php
+++ /dev/null
@@ -1,79 +0,0 @@
-<?php
-/**
- * Extends Core's wp-includes/block-patterns.php to add new media related
- * pattern categories for WP 6.5.
- *
- * @package gutenberg
- */
-
-/**
- * Adds new pattern categories for better organization of media related patterns.
- *
- * Note: This should be removed when the minimum required WP version is >= 6.5.
- *
- * @return void
- */
-function gutenberg_register_media_pattern_categories() {
-	// Register new categories.
-	register_block_pattern_category(
-		'videos',
-		array(
-			'label'       => _x( 'Videos', 'Block pattern category' ),
-			'description' => __( 'Different layouts containing videos.' ),
-		)
-	);
-	register_block_pattern_category(
-		'audio',
-		array(
-			'label'       => _x( 'Audio', 'Block pattern category' ),
-			'description' => __( 'Different layouts containing audio.' ),
-		)
-	);
-}
-add_action( 'init', 'gutenberg_register_media_pattern_categories' );
-
-/**
- * Adds a new taxonomy for organizing user created patterns.
- *
- * @see https://github.com/WordPress/gutenberg/pull/53163
- *
- * @return void
- */
-function gutenberg_register_taxonomy_patterns() {
-	$args = array(
-		'public'             => false,
-		'publicly_queryable' => false,
-		'hierarchical'       => false,
-		'labels'             => array(
-			'name'                       => _x( 'Pattern Categories', 'taxonomy general name' ),
-			'singular_name'              => _x( 'Pattern Category', 'taxonomy singular name' ),
-			'add_new_item'               => __( 'Add New Category' ),
-			'add_or_remove_items'        => __( 'Add or remove pattern categories' ),
-			'back_to_items'              => __( '&larr; Go to Pattern Categories' ),
-			'choose_from_most_used'      => __( 'Choose from the most used pattern categories' ),
-			'edit_item'                  => __( 'Edit Pattern Category' ),
-			'item_link'                  => __( 'Pattern Category Link' ),
-			'item_link_description'      => __( 'A link to a pattern category.' ),
-			'items_list'                 => __( 'Pattern Categories list' ),
-			'items_list_navigation'      => __( 'Pattern Categories list navigation' ),
-			'new_item_name'              => __( 'New Pattern Category Name' ),
-			'no_terms'                   => __( 'No pattern categories' ),
-			'not_found'                  => __( 'No pattern categories found.' ),
-			'popular_items'              => __( 'Popular Pattern Categories' ),
-			'search_items'               => __( 'Search Pattern Categories' ),
-			'separate_items_with_commas' => __( 'Separate pattern categories with commas' ),
-			'update_item'                => __( 'Update Pattern Category' ),
-			'view_item'                  => __( 'View Pattern Category' ),
-		),
-		'query_var'          => false,
-		'rewrite'            => false,
-		'show_ui'            => true,
-		'_builtin'           => true,
-		'show_in_nav_menus'  => false,
-		'show_in_rest'       => true,
-		'show_admin_column'  => true,
-		'show_tagcloud'      => false,
-	);
-	register_taxonomy( 'wp_pattern_category', array( 'wp_block' ), $args );
-}
-add_action( 'init', 'gutenberg_register_taxonomy_patterns' );
diff --git a/lib/compat/wordpress-6.5/blocks.php b/lib/compat/wordpress-6.5/blocks.php
deleted file mode 100644
index b91e89103faa0..0000000000000
--- a/lib/compat/wordpress-6.5/blocks.php
+++ /dev/null
@@ -1,414 +0,0 @@
-<?php
-/**
- * Temporary compatibility shims for block APIs present in Gutenberg.
- *
- * @package gutenberg
- */
-
-/**
- * Shim for the `variation_callback` block type argument.
- *
- * @param array $args The block type arguments.
- * @return array The updated block type arguments.
- */
-function gutenberg_register_block_type_args_shim( $args ) {
-	if ( isset( $args['variation_callback'] ) && is_callable( $args['variation_callback'] ) ) {
-		$args['variations'] = call_user_func( $args['variation_callback'] );
-		unset( $args['variation_callback'] );
-	}
-	return $args;
-}
-
-if ( ! method_exists( 'WP_Block_Type', 'get_variations' ) ) {
-	add_filter( 'register_block_type_args', 'gutenberg_register_block_type_args_shim' );
-}
-
-
-/**
- * Registers the metadata block attribute for all block types.
- *
- * @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' );
-
-// Only process block bindings if they are not processed in core.
-if ( ! class_exists( 'WP_Block_Bindings_Registry' ) ) {
-	/**
-	 * Depending on the block attribute name, replace its value in the HTML based on the value provided.
-	 *
-	 * @param string $block_content  Block Content.
-	 * @param string $block_name     The name of the block to process.
-	 * @param string $attribute_name The attribute name to replace.
-	 * @param mixed  $source_value   The value used to replace in the HTML.
-	 * @return string The modified block content.
-	 */
-	function gutenberg_block_bindings_replace_html( $block_content, $block_name, string $attribute_name, $source_value ) {
-		$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_name );
-		if ( ! isset( $block_type->attributes[ $attribute_name ]['source'] ) ) {
-			return $block_content;
-		}
-
-		// Depending on the attribute source, the processing will be different.
-		switch ( $block_type->attributes[ $attribute_name ]['source'] ) {
-			case 'html':
-			case 'rich-text':
-				$block_reader = new WP_HTML_Tag_Processor( $block_content );
-
-				// TODO: Support for CSS selectors whenever they are ready in the HTML API.
-				// In the meantime, support comma-separated selectors by exploding them into an array.
-				$selectors = explode( ',', $block_type->attributes[ $attribute_name ]['selector'] );
-				// Add a bookmark to the first tag to be able to iterate over the selectors.
-				$block_reader->next_tag();
-				$block_reader->set_bookmark( 'iterate-selectors' );
-
-				// TODO: This shouldn't be needed when the `set_inner_html` function is ready.
-				// Store the parent tag and its attributes to be able to restore them later in the button.
-				// The button block has a wrapper while the paragraph and heading blocks don't.
-				if ( 'core/button' === $block_name ) {
-					$button_wrapper                 = $block_reader->get_tag();
-					$button_wrapper_attribute_names = $block_reader->get_attribute_names_with_prefix( '' );
-					$button_wrapper_attrs           = array();
-					foreach ( $button_wrapper_attribute_names as $name ) {
-						$button_wrapper_attrs[ $name ] = $block_reader->get_attribute( $name );
-					}
-				}
-
-				foreach ( $selectors as $selector ) {
-					// If the parent tag, or any of its children, matches the selector, replace the HTML.
-					if ( strcasecmp( $block_reader->get_tag( $selector ), $selector ) === 0 || $block_reader->next_tag(
-						array(
-							'tag_name' => $selector,
-						)
-					) ) {
-						$block_reader->release_bookmark( 'iterate-selectors' );
-
-						// TODO: Use `set_inner_html` method whenever it's ready in the HTML API.
-						// Until then, it is hardcoded for the paragraph, heading, and button blocks.
-						// Store the tag and its attributes to be able to restore them later.
-						$selector_attribute_names = $block_reader->get_attribute_names_with_prefix( '' );
-						$selector_attrs           = array();
-						foreach ( $selector_attribute_names as $name ) {
-							$selector_attrs[ $name ] = $block_reader->get_attribute( $name );
-						}
-						$selector_markup = "<$selector>" . wp_kses_post( $source_value ) . "</$selector>";
-						$amended_content = new WP_HTML_Tag_Processor( $selector_markup );
-						$amended_content->next_tag();
-						foreach ( $selector_attrs as $attribute_key => $attribute_value ) {
-							$amended_content->set_attribute( $attribute_key, $attribute_value );
-						}
-						if ( 'core/paragraph' === $block_name || 'core/heading' === $block_name ) {
-							return $amended_content->get_updated_html();
-						}
-						if ( 'core/button' === $block_name ) {
-							$button_markup  = "<$button_wrapper>{$amended_content->get_updated_html()}</$button_wrapper>";
-							$amended_button = new WP_HTML_Tag_Processor( $button_markup );
-							$amended_button->next_tag();
-							foreach ( $button_wrapper_attrs as $attribute_key => $attribute_value ) {
-								$amended_button->set_attribute( $attribute_key, $attribute_value );
-							}
-							return $amended_button->get_updated_html();
-						}
-					} else {
-						$block_reader->seek( 'iterate-selectors' );
-					}
-				}
-				$block_reader->release_bookmark( 'iterate-selectors' );
-				return $block_content;
-
-			case 'attribute':
-				$amended_content = new WP_HTML_Tag_Processor( $block_content );
-				if ( ! $amended_content->next_tag(
-					array(
-						// TODO: build the query from CSS selector.
-						'tag_name' => $block_type->attributes[ $attribute_name ]['selector'],
-					)
-				) ) {
-					return $block_content;
-				}
-				$amended_content->set_attribute( $block_type->attributes[ $attribute_name ]['attribute'], $source_value );
-				return $amended_content->get_updated_html();
-
-			default:
-				return $block_content;
-		}
-	}
-
-	/**
-	 * Process the block bindings attribute.
-	 *
-	 * @param string   $block_content Block Content.
-	 * @param array    $parsed_block  The full block, including name and attributes.
-	 * @param WP_Block $block_instance The block instance.
-	 * @return string  Block content with the bind applied.
-	 */
-	function gutenberg_process_block_bindings( $block_content, $parsed_block, $block_instance ) {
-		$supported_block_attrs = array(
-			'core/paragraph' => array( 'content' ),
-			'core/heading'   => array( 'content' ),
-			'core/image'     => array( 'id', 'url', 'title', 'alt' ),
-			'core/button'    => array( 'url', 'text', 'linkTarget', 'rel' ),
-		);
-
-		// If the block doesn't have the bindings property or isn't one of the supported block types, return.
-		if (
-		! isset( $supported_block_attrs[ $block_instance->name ] ) ||
-		empty( $parsed_block['attrs']['metadata']['bindings'] ) ||
-		! is_array( $parsed_block['attrs']['metadata']['bindings'] )
-		) {
-			return $block_content;
-		}
-
-		/*
-		 * Assuming the following format for the bindings property of the "metadata" attribute:
-		 *
-		 * "bindings": {
-		 *   "title": {
-		 *     "source": "core/post-meta",
-		 *     "args": { "key": "text_custom_field" }
-		 *   },
-		 *   "url": {
-		 *     "source": "core/post-meta",
-		 *     "args": { "key": "url_custom_field" }
-		 *   }
-		 * }
-		 */
-
-		$modified_block_content = $block_content;
-		foreach ( $parsed_block['attrs']['metadata']['bindings'] as $attribute_name => $block_binding ) {
-			// If the attribute is not in the supported list, process next attribute.
-			if ( ! in_array( $attribute_name, $supported_block_attrs[ $block_instance->name ], true ) ) {
-				continue;
-			}
-			// If no source is provided, or that source is not registered, process next attribute.
-			if ( ! isset( $block_binding['source'] ) || ! is_string( $block_binding['source'] ) ) {
-				continue;
-			}
-
-			$block_binding_source = get_block_bindings_source( $block_binding['source'] );
-			if ( null === $block_binding_source ) {
-				continue;
-			}
-
-			$source_args  = ! empty( $block_binding['args'] ) && is_array( $block_binding['args'] ) ? $block_binding['args'] : array();
-			$source_value = $block_binding_source->get_value( $source_args, $block_instance, $attribute_name );
-
-			// If the value is not null, process the HTML based on the block and the attribute.
-			if ( ! is_null( $source_value ) ) {
-				$modified_block_content = gutenberg_block_bindings_replace_html( $modified_block_content, $block_instance->name, $attribute_name, $source_value );
-			}
-		}
-
-		return $modified_block_content;
-	}
-
-	add_filter( 'render_block', 'gutenberg_process_block_bindings', 20, 3 );
-}
-
-/**
- * Enable the viewStyle block API for core versions < 6.5
- *
- */
-if ( ! property_exists( 'WP_Block_Type', 'view_style_handles' ) ) {
-	/**
-	 * Registers viewStyle assets on block type registration (=same moment core would do it).
-	 *
-	 * @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_register_view_styles( $settings, $metadata ) {
-		if ( empty( $metadata['viewStyle'] ) ) {
-			return $settings;
-		}
-		$styles           = $metadata['viewStyle'];
-		$processed_styles = array();
-		if ( is_array( $styles ) ) {
-			for ( $index = 0; $index < count( $styles ); $index++ ) {
-				$result = gutenberg_register_block_view_style_handle(
-					$metadata,
-					$index
-				);
-				if ( $result ) {
-					$processed_styles[] = $result;
-				}
-			}
-		} else {
-			$result = gutenberg_register_block_view_style_handle(
-				$metadata
-			);
-			if ( $result ) {
-				$processed_styles[] = $result;
-			}
-		}
-
-		if ( ! empty( $processed_styles ) ) {
-			$settings['view_style_handles'] = $processed_styles;
-		}
-		return $settings;
-	}
-
-	add_filter( 'block_type_metadata_settings', 'gutenberg_filter_block_type_metadata_settings_register_view_styles', 10, 2 );
-
-	/**
-	 * Enqueue view styles associated with the block.
-	 *
-	 * @param string   $block_content The block content.
-	 * @param array    $block         The full block, including name and attributes.
-	 * @param WP_Block $instance      The block instance.
-	 */
-	function gutenberg_filter_render_block_enqueue_view_styles( $block_content, $parsed_block, $block_instance ) {
-		$block_type = $block_instance->block_type;
-
-		if ( ! empty( $block_type->view_style_handles ) ) {
-			foreach ( $block_type->view_style_handles as $view_style_handle ) {
-				wp_enqueue_style( $view_style_handle );
-			}
-		}
-
-		return $block_content;
-	}
-
-	add_filter( 'render_block', 'gutenberg_filter_render_block_enqueue_view_styles', 10, 3 );
-
-
-	/**
-	 * Registers a REST field for block types to provide view styles.
-	 *
-	 * Adds the `view_style_handles` field to block type objects in the REST API, which
-	 * lists the style handles associated with the block's viewStyle key.
-	 */
-	function gutenberg_register_view_style_rest_field() {
-		register_rest_field(
-			'block-type',
-			'view_style_handles',
-			array(
-				'get_callback' => function ( $item ) {
-					$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $item['name'] );
-					if ( isset( $block_type->view_style_handles ) ) {
-						return $block_type->view_style_handles;
-					}
-					return array();
-				},
-			)
-		);
-	}
-
-	add_action( 'rest_api_init', 'gutenberg_register_view_style_rest_field' );
-
-	/**
-	 * A compat version of `register_block_style_handle()` to use the viewStyle handle.
-	 * Required for core versions < 6.5, since a custom version of generate_block_asset_handle has to be used
-	 * that supports the viewStyle property and correctly creates the handle
-	 *
-	 * @param array  $metadata   Block metadata.
-	 * @param int    $index      Optional. Index of the style to register when multiple items passed.
-	 *                           Default 0.
-	 * @return string|false Style handle provided directly or created through
-	 *                      style's registration, or false on failure.
-	 */
-	function gutenberg_register_block_view_style_handle( $metadata, $index = 0 ) {
-		$style_handle = $metadata['viewStyle'];
-		if ( is_array( $style_handle ) ) {
-			if ( empty( $style_handle[ $index ] ) ) {
-				return false;
-			}
-			$style_handle = $style_handle[ $index ];
-		}
-		$style_handle_name = gutenberg_generate_view_style_block_asset_handle( $metadata['name'], $index );
-		// If the style handle is already registered, skip re-registering.
-		if ( wp_style_is( $style_handle_name, 'registered' ) ) {
-			return $style_handle_name;
-		}
-		static $wpinc_path_norm = '';
-		if ( ! $wpinc_path_norm ) {
-			$wpinc_path_norm = wp_normalize_path( realpath( ABSPATH . WPINC ) );
-		}
-		$is_core_block = isset( $metadata['file'] ) && str_starts_with( $metadata['file'], $wpinc_path_norm );
-		// Skip registering individual styles for each core block when a bundled version provided.
-		if ( $is_core_block && ! wp_should_load_separate_core_block_assets() ) {
-			return false;
-		}
-		$style_path      = remove_block_asset_path_prefix( $style_handle );
-		$is_style_handle = $style_handle === $style_path;
-		// Allow only passing style handles for core blocks.
-		if ( $is_core_block && ! $is_style_handle ) {
-			return false;
-		}
-		// Return the style handle unless it's the first item for every core block that requires special treatment.
-		if ( $is_style_handle && ! ( $is_core_block && 0 === $index ) ) {
-			return $style_handle;
-		}
-		// Check whether styles should have a ".min" suffix or not.
-		$suffix = SCRIPT_DEBUG ? '' : '.min';
-		if ( $is_core_block ) {
-			$style_path = "view{$suffix}.css"; // Use view.css for viewStyle of core blocks
-		}
-		$style_path_norm = wp_normalize_path( realpath( dirname( $metadata['file'] ) . '/' . $style_path ) );
-		$style_uri       = get_block_asset_url( $style_path_norm );
-		$version         = ! $is_core_block && isset( $metadata['version'] ) ? $metadata['version'] : false;
-		$result          = wp_register_style(
-			$style_handle_name,
-			$style_uri,
-			array(),
-			$version
-		);
-		if ( ! $result ) {
-			return false;
-		}
-		if ( $style_uri ) {
-			wp_style_add_data( $style_handle_name, 'path', $style_path_norm );
-			if ( $is_core_block ) {
-				$rtl_file = str_replace( "{$suffix}.css", "-rtl{$suffix}.css", $style_path_norm );
-			} else {
-				$rtl_file = str_replace( '.css', '-rtl.css', $style_path_norm );
-			}
-			if ( is_rtl() && file_exists( $rtl_file ) ) {
-				wp_style_add_data( $style_handle_name, 'rtl', 'replace' );
-				wp_style_add_data( $style_handle_name, 'suffix', $suffix );
-				wp_style_add_data( $style_handle_name, 'path', $rtl_file );
-			}
-		}
-		return $style_handle_name;
-	}
-
-	/**
-	 * A compat version of `generate_block_asset_handle()` to use the viewStyle asset handle.
-	 *
-	 * @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 asset name for the block's field.
-	 */
-	function gutenberg_generate_view_style_block_asset_handle( $block_name, $index = 0 ) {
-		if ( str_starts_with( $block_name, 'core/' ) ) {
-			$asset_handle  = str_replace( 'core/', 'wp-block-', $block_name );
-			$asset_handle .= '-view';
-			if ( $index > 0 ) {
-				$asset_handle .= '-' . ( $index + 1 );
-			}
-			return $asset_handle;
-		}
-
-		$asset_handle = str_replace( '/', '-', $block_name ) . '-view-style';
-		if ( $index > 0 ) {
-			$asset_handle .= '-' . ( $index + 1 );
-		}
-		return $asset_handle;
-	}
-}
diff --git a/lib/compat/wordpress-6.5/class-gutenberg-rest-global-styles-revisions-controller-6-5.php b/lib/compat/wordpress-6.5/class-gutenberg-rest-global-styles-revisions-controller-6-5.php
deleted file mode 100644
index 74fa31d53199e..0000000000000
--- a/lib/compat/wordpress-6.5/class-gutenberg-rest-global-styles-revisions-controller-6-5.php
+++ /dev/null
@@ -1,111 +0,0 @@
-<?php
-/**
- * REST API: Gutenberg_REST_Global_Styles_Revisions_Controller class, inspired by WP_REST_Revisions_Controller.
- *
- * @package WordPress
- * @subpackage REST_API
- * @since 6.3.0
- */
-
-/**
- * Core class used to access global styles revisions via the REST API.
- *
- * @since 6.3.0
- *
- * @see WP_REST_Controller
- */
-class Gutenberg_REST_Global_Styles_Revisions_Controller_6_5 extends Gutenberg_REST_Global_Styles_Revisions_Controller_6_4 {
-	/**
-	 * Registers the controller's routes.
-	 *
-	 * @since 6.3.0
-	 * @since 6.5.0 Adds route to fetch individual global styles revisions.
-	 */
-	public function register_routes() {
-		register_rest_route(
-			$this->namespace,
-			'/' . $this->parent_base . '/(?P<parent>[\d]+)/' . $this->rest_base . '/(?P<id>[\d]+)',
-			array(
-				'args'   => array(
-					'parent' => array(
-						'description' => __( 'The ID for the parent of the global styles revision.' ),
-						'type'        => 'integer',
-					),
-					'id'     => array(
-						'description' => __( 'Unique identifier for the global styles revision.' ),
-						'type'        => 'integer',
-					),
-				),
-				array(
-					'methods'             => WP_REST_Server::READABLE,
-					'callback'            => array( $this, 'get_item' ),
-					'permission_callback' => array( $this, 'get_item_permissions_check' ),
-					'args'                => array(
-						'context' => $this->get_context_param( array( 'default' => 'view' ) ),
-					),
-				),
-				'schema' => array( $this, 'get_public_item_schema' ),
-			)
-		);
-		parent::register_routes();
-	}
-
-	/**
-	 * Retrieves one global styles revision from the collection.
-	 *
-	 * @since 6.5.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_item( $request ) {
-		$parent = $this->get_parent( $request['parent'] );
-		if ( is_wp_error( $parent ) ) {
-			return $parent;
-		}
-
-		$revision = $this->get_revision( $request['id'] );
-		if ( is_wp_error( $revision ) ) {
-			return $revision;
-		}
-
-		if ( (int) $parent->ID !== (int) $revision->post_parent ) {
-			return new WP_Error(
-				'rest_revision_parent_id_mismatch',
-				/* translators: %d: A post id. */
-				sprintf( __( 'The revision does not belong to the specified parent with id of "%d"' ), $parent->ID ),
-				array( 'status' => 404 )
-			);
-		}
-
-		$response = $this->prepare_item_for_response( $revision, $request );
-		return rest_ensure_response( $response );
-	}
-
-	/**
-	 * Get the global styles revision, if the ID is valid.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @param int $id Supplied ID.
-	 * @return WP_Post|WP_Error Revision post object if ID is valid, WP_Error otherwise.
-	 */
-	protected function get_revision( $id ) {
-		$error = new WP_Error(
-			'rest_post_invalid_id',
-			__( 'Invalid revision ID.' ),
-			array( 'status' => 404 )
-		);
-
-		if ( (int) $id <= 0 ) {
-			return $error;
-		}
-
-		$revision = get_post( (int) $id );
-		if ( empty( $revision ) || empty( $revision->ID ) || 'revision' !== $revision->post_type ) {
-			return $error;
-		}
-
-		return $revision;
-	}
-}
diff --git a/lib/compat/wordpress-6.5/class-wp-script-modules.php b/lib/compat/wordpress-6.5/class-wp-script-modules.php
deleted file mode 100644
index 4d3280f1db0b9..0000000000000
--- a/lib/compat/wordpress-6.5/class-wp-script-modules.php
+++ /dev/null
@@ -1,362 +0,0 @@
-<?php
-/**
- * Script Modules API: WP_Script_Modules class.
- *
- * Native support for ES Modules and Import Maps.
- *
- * @package WordPress
- * @subpackage Script Modules
- */
-
-if ( ! class_exists( 'WP_Script_Modules' ) ) {
-	/**
-	 * Core class used to register script modules.
-	 *
-	 * @since 6.5.0
-	 */
-	class WP_Script_Modules {
-		/**
-		 * Holds the registered script modules, keyed by script module identifier.
-		 *
-		 * @since 6.5.0
-		 * @var array
-		 */
-		private $registered = array();
-
-		/**
-		 * Holds the script module identifiers that were enqueued before registered.
-		 *
-		 * @since 6.5.0
-		 * @var array<string, true>
-		 */
-		private $enqueued_before_registered = array();
-
-		/**
-		 * Registers the script module if no script module with that script module
-		 * identifier has already been registered.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string            $id       The identifier of the script module. Should be unique. It will be used in the
-		 *                                    final import map.
-		 * @param string            $src      Optional. Full URL of the script module, or path of the script module relative
-		 *                                    to the WordPress root directory. If it is provided and the script module has
-		 *                                    not been registered yet, it will be registered.
-		 * @param array             $deps     {
-		 *                                        Optional. List of dependencies.
-		 *
-		 *                                        @type string|array $0... {
-		 *                                            An array of script module identifiers of the dependencies of this script
-		 *                                            module. The dependencies can be strings or arrays. If they are arrays,
-		 *                                            they need an `id` key with the script module identifier, and can contain
-		 *                                            an `import` key with either `static` or `dynamic`. By default,
-		 *                                            dependencies that don't contain an `import` key are considered static.
-		 *
-		 *                                            @type string $id     The script module identifier.
-		 *                                            @type string $import Optional. Import type. May be either `static` or
-		 *                                                                 `dynamic`. Defaults to `static`.
-		 *                                        }
-		 *                                    }
-		 * @param string|false|null $version  Optional. String specifying the script 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.
-		 */
-		public function register( string $id, string $src, array $deps = array(), $version = false ) {
-			if ( ! isset( $this->registered[ $id ] ) ) {
-				$dependencies = array();
-				foreach ( $deps as $dependency ) {
-					if ( is_array( $dependency ) ) {
-						if ( ! isset( $dependency['id'] ) ) {
-							_doing_it_wrong( __METHOD__, __( 'Missing required id key in entry among dependencies array.' ), '6.5.0' );
-							continue;
-						}
-						$dependencies[] = array(
-							'id'     => $dependency['id'],
-							'import' => isset( $dependency['import'] ) && 'dynamic' === $dependency['import'] ? 'dynamic' : 'static',
-						);
-					} elseif ( is_string( $dependency ) ) {
-						$dependencies[] = array(
-							'id'     => $dependency,
-							'import' => 'static',
-						);
-					} else {
-						_doing_it_wrong( __METHOD__, __( 'Entries in dependencies array must be either strings or arrays with an id key.' ), '6.5.0' );
-					}
-				}
-
-				$this->registered[ $id ] = array(
-					'src'          => $src,
-					'version'      => $version,
-					'enqueue'      => isset( $this->enqueued_before_registered[ $id ] ),
-					'dependencies' => $dependencies,
-				);
-			}
-		}
-
-		/**
-		 * Marks the script module to be enqueued in the page.
-		 *
-		 * If a src is provided and the script module has not been registered yet, it
-		 * will be registered.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string            $id       The identifier of the script module. Should be unique. It will be used in the
-		 *                                    final import map.
-		 * @param string            $src      Optional. Full URL of the script module, or path of the script module relative
-		 *                                    to the WordPress root directory. If it is provided and the script module has
-		 *                                    not been registered yet, it will be registered.
-		 * @param array             $deps     {
-		 *                                        Optional. List of dependencies.
-		 *
-		 *                                        @type string|array $0... {
-		 *                                            An array of script module identifiers of the dependencies of this script
-		 *                                            module. The dependencies can be strings or arrays. If they are arrays,
-		 *                                            they need an `id` key with the script module identifier, and can contain
-		 *                                            an `import` key with either `static` or `dynamic`. By default,
-		 *                                            dependencies that don't contain an `import` key are considered static.
-		 *
-		 *                                            @type string $id     The script module identifier.
-		 *                                            @type string $import Optional. Import type. May be either `static` or
-		 *                                                                 `dynamic`. Defaults to `static`.
-		 *                                        }
-		 *                                    }
-		 * @param string|false|null $version  Optional. String specifying the script 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.
-		 */
-		public function enqueue( string $id, string $src = '', array $deps = array(), $version = false ) {
-			if ( isset( $this->registered[ $id ] ) ) {
-				$this->registered[ $id ]['enqueue'] = true;
-			} elseif ( $src ) {
-				$this->register( $id, $src, $deps, $version );
-				$this->registered[ $id ]['enqueue'] = true;
-			} else {
-				$this->enqueued_before_registered[ $id ] = true;
-			}
-		}
-
-		/**
-		 * Unmarks the script module so it will no longer be enqueued in the page.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $id The identifier of the script module.
-		 */
-		public function dequeue( string $id ) {
-			if ( isset( $this->registered[ $id ] ) ) {
-				$this->registered[ $id ]['enqueue'] = false;
-			}
-			unset( $this->enqueued_before_registered[ $id ] );
-		}
-
-		/**
-		 * Removes a registered script module.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $id The identifier of the script module.
-		 */
-		public function deregister( string $id ) {
-			unset( $this->registered[ $id ] );
-			unset( $this->enqueued_before_registered[ $id ] );
-		}
-
-		/**
-		 * Adds the hooks to print the import map, enqueued script modules and script
-		 * module preloads.
-		 *
-		 * In classic themes, the script modules used by the blocks are not yet known
-		 * when the `wp_head` actions is fired, so it needs to print everything in the
-		 * footer.
-		 *
-		 * @since 6.5.0
-		 */
-		public function add_hooks() {
-			$position = wp_is_block_theme() ? 'wp_head' : 'wp_footer';
-			add_action( $position, array( $this, 'print_import_map' ) );
-			add_action( $position, array( $this, 'print_enqueued_script_modules' ) );
-			add_action( $position, array( $this, 'print_script_module_preloads' ) );
-		}
-
-		/**
-		 * Prints the enqueued script modules using script tags with type="module"
-		 * attributes.
-		 *
-		 * @since 6.5.0
-		 */
-		public function print_enqueued_script_modules() {
-			foreach ( $this->get_marked_for_enqueue() as $id => $script_module ) {
-				wp_print_script_tag(
-					array(
-						'type' => 'module',
-						'src'  => $this->get_versioned_src( $script_module ),
-						'id'   => $id . '-js-module',
-					)
-				);
-			}
-		}
-
-		/**
-		 * Prints the the static dependencies of the enqueued script modules using
-		 * link tags with rel="modulepreload" attributes.
-		 *
-		 * If a script module is marked for enqueue, it will not be preloaded.
-		 *
-		 * @since 6.5.0
-		 */
-		public function print_script_module_preloads() {
-			foreach ( $this->get_dependencies( array_keys( $this->get_marked_for_enqueue() ), array( 'static' ) ) as $id => $script_module ) {
-				// Don't preload if it's marked for enqueue.
-				if ( true !== $script_module['enqueue'] ) {
-					echo sprintf(
-						'<link rel="modulepreload" href="%s" id="%s">',
-						esc_url( $this->get_versioned_src( $script_module ) ),
-						esc_attr( $id . '-js-modulepreload' )
-					);
-				}
-			}
-		}
-
-		/**
-		 * Prints the import map using a script tag with a type="importmap" attribute.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @global WP_Scripts $wp_scripts The WP_Scripts object for printing the polyfill.
-		 */
-		public function print_import_map() {
-			$import_map = $this->get_import_map();
-			if ( ! empty( $import_map['imports'] ) ) {
-				global $wp_scripts;
-				if ( isset( $wp_scripts ) ) {
-					/*
-					 * In Core, the polyfill is registered with a different approach.
-					 * See: https://github.com/WordPress/wordpress-develop/blob/4b23ba81ddb067110e41d05550de7f2a4f09dad3/src/wp-includes/script-loader.php#L99
-					 */
-					wp_register_script(
-						'wp-polyfill-importmap',
-						gutenberg_url( '/build/modules/importmap-polyfill.min.js' ),
-						array(),
-						'1.8.2',
-						true
-					);
-					gutenberg_print_inline_script_tag(
-						wp_get_script_polyfill(
-							$wp_scripts,
-							array(
-								'HTMLScriptElement.supports && HTMLScriptElement.supports("importmap")' => 'wp-polyfill-importmap',
-							)
-						),
-						array(
-							'id' => 'wp-load-polyfill-importmap',
-						)
-					);
-				}
-				gutenberg_print_inline_script_tag(
-					wp_json_encode( $import_map, JSON_HEX_TAG | JSON_HEX_AMP ),
-					array(
-						'type' => 'importmap',
-						'id'   => 'wp-importmap',
-					)
-				);
-			}
-		}
-
-		/**
-		 * Returns the import map array.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @return array Array with an `imports` key mapping to an array of script module identifiers and their respective
-		 *               URLs, including the version query.
-		 */
-		private function get_import_map(): array {
-			$imports = array();
-			foreach ( $this->get_dependencies( array_keys( $this->get_marked_for_enqueue() ) ) as $id => $script_module ) {
-				$imports[ $id ] = $this->get_versioned_src( $script_module );
-			}
-			return array( 'imports' => $imports );
-		}
-
-		/**
-		 * Retrieves the list of script modules marked for enqueue.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @return array Script modules marked for enqueue, keyed by script module identifier.
-		 */
-		private function get_marked_for_enqueue(): array {
-			$enqueued = array();
-			foreach ( $this->registered as $id => $script_module ) {
-				if ( true === $script_module['enqueue'] ) {
-					$enqueued[ $id ] = $script_module;
-				}
-			}
-			return $enqueued;
-		}
-
-		/**
-		 * Retrieves all the dependencies for the given script module identifiers,
-		 * filtered by import types.
-		 *
-		 * It will consolidate an array containing a set of unique dependencies based
-		 * on the requested import types: 'static', 'dynamic', or both. This method is
-		 * recursive and also retrieves dependencies of the dependencies.
-		 *
-		 * @since 6.5.0
-		 *
-
-		 * @param string[] $ids          The identifiers of the script modules for which to gather dependencies.
-		 * @param array    $import_types Optional. Import types of dependencies to retrieve: 'static', 'dynamic', or both.
-		 *                               Default is both.
-		 * @return array List of dependencies, keyed by script module identifier.
-		 */
-		private function get_dependencies( array $ids, array $import_types = array( 'static', 'dynamic' ) ) {
-			return array_reduce(
-				$ids,
-				function ( $dependency_script_modules, $id ) use ( $import_types ) {
-					$dependencies = array();
-					foreach ( $this->registered[ $id ]['dependencies'] as $dependency ) {
-						if (
-						in_array( $dependency['import'], $import_types, true ) &&
-						isset( $this->registered[ $dependency['id'] ] ) &&
-						! isset( $dependency_script_modules[ $dependency['id'] ] )
-						) {
-							$dependencies[ $dependency['id'] ] = $this->registered[ $dependency['id'] ];
-						}
-					}
-					return array_merge( $dependency_script_modules, $dependencies, $this->get_dependencies( array_keys( $dependencies ), $import_types ) );
-				},
-				array()
-			);
-		}
-
-		/**
-		 * Gets the versioned URL for a script module src.
-		 *
-		 * 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.
-		 * Otherwise, the string passed in $version is used.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param array $script_module The script module.
-		 * @return string The script module src with a version if relevant.
-		 */
-		private function get_versioned_src( array $script_module ): string {
-			$args = array();
-			if ( false === $script_module['version'] ) {
-				$args['ver'] = get_bloginfo( 'version' );
-			} elseif ( null !== $script_module['version'] ) {
-				$args['ver'] = $script_module['version'];
-			}
-			if ( $args ) {
-				return add_query_arg( $args, $script_module['src'] );
-			}
-			return $script_module['src'];
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.5/compat.php b/lib/compat/wordpress-6.5/compat.php
deleted file mode 100644
index c41203e5d27b4..0000000000000
--- a/lib/compat/wordpress-6.5/compat.php
+++ /dev/null
@@ -1,92 +0,0 @@
-<?php
-/**
- * WordPress 6.5 compatibility functions.
- *
- * @package WordPress
- */
-
-if ( ! function_exists( 'array_is_list' ) ) {
-	/**
-	 * Polyfill for `array_is_list()` function added in PHP 8.1.
-	 *
-	 * Determines if the given array is a list.
-	 *
-	 * An array is considered a list if its keys consist of consecutive numbers from 0 to count($array)-1.
-	 *
-	 * @see https://github.com/symfony/polyfill-php81/tree/main
-	 *
-	 * @since 6.5.0
-	 *
-	 * @param array<mixed> $arr The array being evaluated.
-	 * @return bool True if array is a list, false otherwise.
-	 */
-	function array_is_list( $arr ) {
-		if ( ( array() === $arr ) || ( array_values( $arr ) === $arr ) ) {
-			return true;
-		}
-
-		$next_key = -1;
-
-		foreach ( $arr as $k => $v ) {
-			if ( ++$next_key !== $k ) {
-				return false;
-			}
-		}
-
-		return true;
-	}
-}
-
-/**
- * Sets a global JS variable used to flag whether to direct the Site Logo block's admin urls
- * to the Customizer. This allows Gutenberg running on versions of WordPress < 6.5.0 to
- * support the previous location for the Site Icon settings. This function should not be
- * backported to core, and should be removed when the required WP core version for Gutenberg
- * is >= 6.5.0.
- */
-function gutenberg_add_use_customizer_site_logo_url_flag() {
-	if ( ! is_wp_version_compatible( '6.5' ) ) {
-		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalUseCustomizerSiteLogoUrl = true', 'before' );
-	}
-}
-
-add_action( 'admin_init', 'gutenberg_add_use_customizer_site_logo_url_flag' );
-
-/**
- * Add a Patterns submenu (wp-admin/edit.php?post_type=wp_block) under the Appearance menu
- * for the Classic theme. This function should not be backported to core, and should be
- * removed when the required WP core version for Gutenberg is >= 6.5.0.
- *
- * @global array $submenu
- */
-function gutenberg_add_patterns_page_submenu_item() {
-	if ( ! is_wp_version_compatible( '6.5' ) && ! wp_is_block_theme() ) {
-		// Move the Themes submenu forward and inject a Patterns submenu.
-		global $submenu;
-		$submenu['themes.php'][4] = $submenu['themes.php'][5];
-		$submenu['themes.php'][5] = array( __( 'Patterns', 'gutenberg' ), 'edit_theme_options', 'edit.php?post_type=wp_block' );
-		ksort( $submenu['themes.php'], SORT_NUMERIC );
-	}
-}
-add_action( 'admin_init', 'gutenberg_add_patterns_page_submenu_item' );
-
-/**
- * Filter the `wp_die_handler` to allow access to the Site Editor's Patterns page
- * (wp-admin/site-editor.php?path=%2Fpatterns) internally for the Classic theme. This
- * function should not be backported to core, and should be removed when the required
- * WP core version for Gutenberg is >= 6.5.0.
- *
- * @param callable $default_handler The default handler.
- * @return callable The default handler or a custom handler.
- */
-function gutenberg_patterns_page_wp_die_handler( $default_handler ) {
-	if ( ! is_wp_version_compatible( '6.5' ) && ! wp_is_block_theme() && str_contains( $_SERVER['REQUEST_URI'], 'site-editor.php' ) ) {
-		$is_patterns      = isset( $_GET['postType'] ) && 'wp_block' === sanitize_key( $_GET['postType'] );
-		$is_patterns_path = isset( $_GET['path'] ) && 'patterns' === sanitize_key( $_GET['path'] );
-		if ( $is_patterns || $is_patterns_path ) {
-			return '__return_false';
-		}
-	}
-	return $default_handler;
-}
-add_filter( 'wp_die_handler', 'gutenberg_patterns_page_wp_die_handler' );
diff --git a/lib/compat/wordpress-6.5/fonts/class-wp-font-collection.php b/lib/compat/wordpress-6.5/fonts/class-wp-font-collection.php
deleted file mode 100644
index 3ccbed6ed275e..0000000000000
--- a/lib/compat/wordpress-6.5/fonts/class-wp-font-collection.php
+++ /dev/null
@@ -1,298 +0,0 @@
-<?php
-/**
- * Font Collection class.
- *
- * This file contains the Font Collection class definition.
- *
- * @package    WordPress
- * @subpackage Font Library
- * @since      6.5.0
- */
-
-if ( ! class_exists( 'WP_Font_Collection' ) ) {
-
-	/**
-	 * Font Collection class.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @see wp_register_font_collection()
-	 */
-	final class WP_Font_Collection {
-		/**
-		 * The unique slug for the font collection.
-		 *
-		 * @since 6.5.0
-		 * @var string
-		 */
-		public $slug;
-
-		/**
-		 * Font collection data.
-		 *
-		 * @since 6.5.0
-		 * @var array|WP_Error|null
-		 */
-		private $data;
-
-		/**
-		 * Font collection JSON file path or URL.
-		 *
-		 * @since 6.5.0
-		 * @var string|null
-		 */
-		private $src;
-
-		/**
-		 * WP_Font_Collection constructor.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $slug Font collection slug. May only contain alphanumeric characters, dashes,
-		 *                     and underscores. See sanitize_title().
-		 * @param array  $args Font collection data. See wp_register_font_collection() for information on accepted arguments.
-		 */
-		public function __construct( string $slug, array $args ) {
-			$this->slug = sanitize_title( $slug );
-			if ( $this->slug !== $slug ) {
-				_doing_it_wrong(
-					__METHOD__,
-					/* translators: %s: Font collection slug. */
-					sprintf( __( 'Font collection slug "%s" is not valid. Slugs must use only alphanumeric characters, dashes, and underscores.', 'gutenberg' ), $slug ),
-					'6.5.0'
-				);
-			}
-
-			$required_properties = array( 'name', 'font_families' );
-
-			if ( isset( $args['font_families'] ) && is_string( $args['font_families'] ) ) {
-				// JSON data is lazy loaded by ::get_data().
-				$this->src = $args['font_families'];
-				unset( $args['font_families'] );
-
-				$required_properties = array( 'name' );
-			}
-
-			$this->data = $this->sanitize_and_validate_data( $args, $required_properties );
-		}
-
-		/**
-		 * Retrieves the font collection data.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @return array|WP_Error An array containing the font collection data, or a WP_Error on failure.
-		 */
-		public function get_data() {
-			if ( is_wp_error( $this->data ) ) {
-				return $this->data;
-			}
-
-			// If the collection uses JSON data, load it and cache the data/error.
-			if ( isset( $this->src ) ) {
-				$this->data = $this->load_from_json( $this->src );
-			}
-
-			if ( is_wp_error( $this->data ) ) {
-				return $this->data;
-			}
-
-			// Set defaults for optional properties.
-			$defaults = array(
-				'description' => '',
-				'categories'  => array(),
-			);
-
-			return wp_parse_args( $this->data, $defaults );
-		}
-
-		/**
-		 * Loads font collection data from a JSON file or URL.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $file_or_url File path or URL to a JSON file containing the font collection data.
-		 * @return array|WP_Error An array containing the font collection data on success,
-		 *                        else an instance of WP_Error on failure.
-		 */
-		private function load_from_json( $file_or_url ) {
-			$url  = wp_http_validate_url( $file_or_url );
-			$file = file_exists( $file_or_url ) ? wp_normalize_path( realpath( $file_or_url ) ) : false;
-
-			if ( ! $url && ! $file ) {
-				// translators: %s: File path or URL to font collection JSON file.
-				$message = __( 'Font collection JSON file is invalid or does not exist.', 'gutenberg' );
-				_doing_it_wrong( __METHOD__, $message, '6.5.0' );
-				return new WP_Error( 'font_collection_json_missing', $message );
-			}
-
-			$data = $url ? $this->load_from_url( $url ) : $this->load_from_file( $file );
-
-			if ( is_wp_error( $data ) ) {
-				return $data;
-			}
-
-			$data = array(
-				'name'          => $this->data['name'],
-				'font_families' => $data['font_families'],
-			);
-
-			if ( isset( $this->data['description'] ) ) {
-				$data['description'] = $this->data['description'];
-			}
-
-			if ( isset( $this->data['categories'] ) ) {
-				$data['categories'] = $this->data['categories'];
-			}
-
-			return $data;
-		}
-
-		/**
-		 * Loads the font collection data from a JSON file path.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $file File path to a JSON file containing the font collection data.
-		 * @return array|WP_Error An array containing the font collection data on success,
-		 *                        else an instance of WP_Error on failure.
-		 */
-		private function load_from_file( $file ) {
-			$data = wp_json_file_decode( $file, array( 'associative' => true ) );
-			if ( empty( $data ) ) {
-				return new WP_Error( 'font_collection_decode_error', __( 'Error decoding the font collection JSON file contents.', 'gutenberg' ) );
-			}
-
-			return $this->sanitize_and_validate_data( $data, array( 'font_families' ) );
-		}
-
-		/**
-		 * Loads the font collection data from a JSON file URL.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $url URL to a JSON file containing the font collection data.
-		 * @return array|WP_Error An array containing the font collection data on success,
-		 *                        else an instance of WP_Error on failure.
-		 */
-		private function load_from_url( $url ) {
-			// Limit key to 167 characters to avoid failure in the case of a long URL.
-			$transient_key = substr( 'wp_font_collection_url_' . $url, 0, 167 );
-			$data          = get_site_transient( $transient_key );
-
-			if ( false === $data ) {
-				$response = wp_safe_remote_get( $url );
-				if ( is_wp_error( $response ) || 200 !== wp_remote_retrieve_response_code( $response ) ) {
-					return new WP_Error(
-						'font_collection_request_error',
-						sprintf(
-							// translators: %s: Font collection URL.
-							__( 'Error fetching the font collection data from "%s".', 'gutenberg' ),
-							$url
-						)
-					);
-				}
-
-				$data = json_decode( wp_remote_retrieve_body( $response ), true );
-				if ( empty( $data ) ) {
-					return new WP_Error( 'font_collection_decode_error', __( 'Error decoding the font collection data from the HTTP response JSON.', 'gutenberg' ) );
-				}
-
-				// Make sure the data is valid before storing it in a transient.
-				$data = $this->sanitize_and_validate_data( $data, array( 'font_families' ) );
-				if ( is_wp_error( $data ) ) {
-					return $data;
-				}
-
-				set_site_transient( $transient_key, $data, DAY_IN_SECONDS );
-			}
-
-			return $data;
-		}
-
-		/**
-		 * Sanitizes and validates the font collection data.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param array $data                Font collection data to sanitize and validate.
-		 * @param array $required_properties Required properties that must exist in the passed data.
-		 * @return array|WP_Error Sanitized data if valid, otherwise a WP_Error instance.
-		 */
-		private function sanitize_and_validate_data( $data, $required_properties = array() ) {
-			$schema = self::get_sanitization_schema();
-			$data   = WP_Font_Utils::sanitize_from_schema( $data, $schema );
-
-			foreach ( $required_properties as $property ) {
-				if ( empty( $data[ $property ] ) ) {
-					$message = sprintf(
-						// translators: 1: Font collection slug, 2: Missing property name, e.g. "font_families".
-						__( 'Font collection "%1$s" has missing or empty property: "%2$s".', 'gutenberg' ),
-						$this->slug,
-						$property
-					);
-					_doing_it_wrong( __METHOD__, $message, '6.5.0' );
-					return new WP_Error( 'font_collection_missing_property', $message );
-				}
-			}
-
-			return $data;
-		}
-
-		/**
-		 * Retrieves the font collection sanitization schema.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @return array Font collection sanitization schema.
-		 */
-		private static function get_sanitization_schema() {
-			return array(
-				'name'          => 'sanitize_text_field',
-				'description'   => 'sanitize_text_field',
-				'font_families' => array(
-					array(
-						'font_family_settings' => array(
-							'name'       => 'sanitize_text_field',
-							'slug'       => static function ( $value ) {
-								return _wp_to_kebab_case( sanitize_title( $value ) );
-							},
-							'fontFamily' => 'WP_Font_Utils::sanitize_font_family',
-							'preview'    => 'sanitize_url',
-							'fontFace'   => array(
-								array(
-									'fontFamily'          => 'sanitize_text_field',
-									'fontStyle'           => 'sanitize_text_field',
-									'fontWeight'          => 'sanitize_text_field',
-									'src'                 => static function ( $value ) {
-										return is_array( $value )
-											? array_map( 'sanitize_text_field', $value )
-											: sanitize_text_field( $value );
-									},
-									'preview'             => 'sanitize_url',
-									'fontDisplay'         => 'sanitize_text_field',
-									'fontStretch'         => 'sanitize_text_field',
-									'ascentOverride'      => 'sanitize_text_field',
-									'descentOverride'     => 'sanitize_text_field',
-									'fontVariant'         => 'sanitize_text_field',
-									'fontFeatureSettings' => 'sanitize_text_field',
-									'fontVariationSettings' => 'sanitize_text_field',
-									'lineGapOverride'     => 'sanitize_text_field',
-									'sizeAdjust'          => 'sanitize_text_field',
-									'unicodeRange'        => 'sanitize_text_field',
-								),
-							),
-						),
-						'categories'           => array( 'sanitize_title' ),
-					),
-				),
-				'categories'    => array(
-					array(
-						'name' => 'sanitize_text_field',
-						'slug' => 'sanitize_title',
-					),
-				),
-			);
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.5/fonts/class-wp-font-library.php b/lib/compat/wordpress-6.5/fonts/class-wp-font-library.php
deleted file mode 100644
index eb4a269b3a806..0000000000000
--- a/lib/compat/wordpress-6.5/fonts/class-wp-font-library.php
+++ /dev/null
@@ -1,145 +0,0 @@
-<?php
-/**
- * Font Library class.
- *
- * This file contains the Font Library class definition.
- *
- * @package    WordPress
- * @subpackage Font Library
- * @since      6.5.0
- */
-
-if ( ! class_exists( 'WP_Font_Library' ) ) {
-
-	/**
-	 * Font Library class.
-	 *
-	 * @since 6.5.0
-	 */
-	class WP_Font_Library {
-
-		/**
-		 * Font collections.
-		 *
-		 * @since 6.5.0
-		 * @var array
-		 */
-		private $collections = array();
-
-		/**
-		 * Container for the main instance of the class.
-		 *
-		 * @since 6.5.0
-		 * @var WP_Font_Library|null
-		 */
-		private static $instance = null;
-
-		/**
-		 * Register a new font collection.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $slug Font collection slug. May only contain alphanumeric characters, dashes,
-		 *                     and underscores. See sanitize_title().
-		 * @param array  $args Font collection data. See wp_register_font_collection() for information on accepted arguments.
-		 * @return WP_Font_Collection|WP_Error A font collection if it was registered successfully,
-		 *                                     or WP_Error object on failure.
-		 */
-		public function register_font_collection( string $slug, array $args ) {
-			$new_collection = new WP_Font_Collection( $slug, $args );
-
-			if ( $this->is_collection_registered( $new_collection->slug ) ) {
-				$error_message = sprintf(
-					/* translators: %s: Font collection slug. */
-					__( 'Font collection with slug: "%s" is already registered.', 'gutenberg' ),
-					$new_collection->slug
-				);
-				_doing_it_wrong(
-					__METHOD__,
-					$error_message,
-					'6.5.0'
-				);
-				return new WP_Error( 'font_collection_registration_error', $error_message );
-			}
-			$this->collections[ $new_collection->slug ] = $new_collection;
-			return $new_collection;
-		}
-
-		/**
-		 * Unregisters a previously registered font collection.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $slug Font collection slug.
-		 * @return bool True if the font collection was unregistered successfully and false otherwise.
-		 */
-		public function unregister_font_collection( string $slug ) {
-			if ( ! $this->is_collection_registered( $slug ) ) {
-				_doing_it_wrong(
-					__METHOD__,
-					/* translators: %s: Font collection slug. */
-					sprintf( __( 'Font collection "%s" not found.' ), $slug ),
-					'6.5.0'
-				);
-				return false;
-			}
-			unset( $this->collections[ $slug ] );
-			return true;
-		}
-
-		/**
-		 * Checks if a font collection is registered.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $slug Font collection slug.
-		 * @return bool True if the font collection is registered and false otherwise.
-		 */
-		private function is_collection_registered( string $slug ) {
-			return array_key_exists( $slug, $this->collections );
-		}
-
-		/**
-		 * Gets all the font collections available.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @return array List of font collections.
-		 */
-		public function get_font_collections() {
-			return $this->collections;
-		}
-
-		/**
-		 * Gets a font collection.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $slug Font collection slug.
-		 * @return WP_Font_Collection|null Font collection object, or null if the font collection doesn't exist.
-		 */
-		public function get_font_collection( string $slug ) {
-			if ( $this->is_collection_registered( $slug ) ) {
-				return $this->collections[ $slug ];
-			}
-			return null;
-		}
-
-		/**
-		 * Utility method to retrieve the main instance of the class.
-		 *
-		 * The instance will be created if it does not exist yet.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @return WP_Font_Library 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.5/fonts/class-wp-font-utils.php b/lib/compat/wordpress-6.5/fonts/class-wp-font-utils.php
deleted file mode 100644
index d794a2601f45d..0000000000000
--- a/lib/compat/wordpress-6.5/fonts/class-wp-font-utils.php
+++ /dev/null
@@ -1,260 +0,0 @@
-<?php
-/**
- * Font Utils class.
- *
- * Provides utility functions for working with font families.
- *
- * @package    WordPress
- * @subpackage Font Library
- * @since      6.5.0
- */
-
-if ( ! class_exists( 'WP_Font_Utils' ) ) {
-
-	/**
-	 * A class of utilities for working with the Font Library.
-	 *
-	 * These utilities may change or be removed in the future and are intended for internal use only.
-	 *
-	 * @since 6.5.0
-	 * @access private
-	 */
-	class WP_Font_Utils {
-
-		/**
-		 * Adds surrounding quotes to font family names that contain special characters.
-		 *
-		 * It follows the recommendations from the CSS Fonts Module Level 4.
-		 * @link https://www.w3.org/TR/css-fonts-4/#font-family-prop
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $item A font family name.
-		 * @return string The font family name with surrounding quotes, if necessary.
-		 */
-		private static function maybe_add_quotes( $item ) {
-			// Matches strings that are not exclusively alphabetic characters or hyphens, and do not exactly follow the pattern generic(alphabetic characters or hyphens).
-			$regex = '/^(?!generic\([a-zA-Z\-]+\)$)(?!^[a-zA-Z\-]+$).+/';
-			$item  = trim( $item );
-			if ( preg_match( $regex, $item ) ) {
-				$item = trim( $item, "\"'" );
-				return '"' . $item . '"';
-			}
-			return $item;
-		}
-
-		/**
-		 * Sanitizes and formats font family names.
-		 *
-		 * - Applies `sanitize_text_field`.
-		 * - Adds surrounding quotes to names containing any characters that are not alphabetic or dashes.
-		 *
-		 * It follows the recommendations from the CSS Fonts Module Level 4.
-		 * @link https://www.w3.org/TR/css-fonts-4/#font-family-prop
-		 *
-		 * @since 6.5.0
-		 * @access private
-		 *
-		 * @see sanitize_text_field()
-		 *
-		 * @param string $font_family Font family name(s), comma-separated.
-		 * @return string Sanitized and formatted font family name(s).
-		 */
-		public static function sanitize_font_family( $font_family ) {
-			if ( ! $font_family ) {
-				return '';
-			}
-
-			$output          = sanitize_text_field( $font_family );
-			$formatted_items = array();
-			if ( str_contains( $output, ',' ) ) {
-				$items = explode( ',', $output );
-				foreach ( $items as $item ) {
-					$formatted_item = self::maybe_add_quotes( $item );
-					if ( ! empty( $formatted_item ) ) {
-						$formatted_items[] = $formatted_item;
-					}
-				}
-				return implode( ', ', $formatted_items );
-			}
-			return self::maybe_add_quotes( $output );
-		}
-
-		/**
-		 * Generates a slug from font face properties, e.g. `open sans;normal;400;100%;U+0-10FFFF`
-		 *
-		 * Used for comparison with other font faces in the same family, to prevent duplicates
-		 * that would both match according the CSS font matching spec. Uses only simple case-insensitive
-		 * matching for fontFamily and unicodeRange, so does not handle overlapping font-family lists or
-		 * unicode ranges.
-		 *
-		 * @since 6.5.0
-		 * @access private
-		 *
-		 * @link https://drafts.csswg.org/css-fonts/#font-style-matching
-		 *
-		 * @param array $settings {
-		 *     Font face settings.
-		 *
-		 *     @type string $fontFamily   Font family name.
-		 *     @type string $fontStyle    Optional font style, defaults to 'normal'.
-		 *     @type string $fontWeight   Optional font weight, defaults to 400.
-		 *     @type string $fontStretch  Optional font stretch, defaults to '100%'.
-		 *     @type string $unicodeRange Optional unicode range, defaults to 'U+0-10FFFF'.
-		 * }
-		 * @return string Font face slug.
-		 */
-		public static function get_font_face_slug( $settings ) {
-			$defaults = array(
-				'fontFamily'   => '',
-				'fontStyle'    => 'normal',
-				'fontWeight'   => '400',
-				'fontStretch'  => '100%',
-				'unicodeRange' => 'U+0-10FFFF',
-			);
-			$settings = wp_parse_args( $settings, $defaults );
-
-			$font_family   = mb_strtolower( $settings['fontFamily'] );
-			$font_style    = strtolower( $settings['fontStyle'] );
-			$font_weight   = strtolower( $settings['fontWeight'] );
-			$font_stretch  = strtolower( $settings['fontStretch'] );
-			$unicode_range = strtoupper( $settings['unicodeRange'] );
-
-			// Convert weight keywords to numeric strings.
-			$font_weight = str_replace( array( 'normal', 'bold' ), array( '400', '700' ), $font_weight );
-
-			// Convert stretch keywords to numeric strings.
-			$font_stretch_map = array(
-				'ultra-condensed' => '50%',
-				'extra-condensed' => '62.5%',
-				'condensed'       => '75%',
-				'semi-condensed'  => '87.5%',
-				'normal'          => '100%',
-				'semi-expanded'   => '112.5%',
-				'expanded'        => '125%',
-				'extra-expanded'  => '150%',
-				'ultra-expanded'  => '200%',
-			);
-			$font_stretch     = str_replace( array_keys( $font_stretch_map ), array_values( $font_stretch_map ), $font_stretch );
-
-			$slug_elements = array( $font_family, $font_style, $font_weight, $font_stretch, $unicode_range );
-
-			$slug_elements = array_map(
-				function ( $elem ) {
-					// Remove quotes to normalize font-family names, and ';' to use as a separator.
-					$elem = trim( str_replace( array( '"', "'", ';' ), '', $elem ) );
-
-					// Normalize comma separated lists by removing whitespace in between items,
-					// but keep whitespace within items (e.g. "Open Sans" and "OpenSans" are different fonts).
-					// CSS spec for whitespace includes: U+000A LINE FEED, U+0009 CHARACTER TABULATION, or U+0020 SPACE,
-					// which by default are all matched by \s in PHP.
-					return preg_replace( '/,\s+/', ',', $elem );
-				},
-				$slug_elements
-			);
-
-			return sanitize_text_field( join( ';', $slug_elements ) );
-		}
-
-		/**
-		 * Sanitizes a tree of data using a schema.
-		 *
-		 * The schema structure should mirror the data tree. Each value provided in the
-		 * schema should be a callable that will be applied to sanitize the corresponding
-		 * value in the data tree. Keys that are in the data tree, but not present in the
-		 * schema, will be removed in the sanitized data. Nested arrays are traversed recursively.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @access private
-		 *
-		 * @param array $tree   The data to sanitize.
-		 * @param array $schema The schema used for sanitization.
-		 * @return array The sanitized data.
-		 */
-		public static function sanitize_from_schema( $tree, $schema ) {
-			if ( ! is_array( $tree ) || ! is_array( $schema ) ) {
-				return array();
-			}
-
-			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;
-				}
-
-				$is_value_array  = is_array( $value );
-				$is_schema_array = is_array( $schema[ $key ] ) && ! is_callable( $schema[ $key ] );
-
-				if ( $is_value_array && $is_schema_array ) {
-					if ( wp_is_numeric_array( $value ) ) {
-						// If indexed, process each item in the array.
-						foreach ( $value as $item_key => $item_value ) {
-							$tree[ $key ][ $item_key ] = isset( $schema[ $key ][0] ) && is_array( $schema[ $key ][0] )
-								? self::sanitize_from_schema( $item_value, $schema[ $key ][0] )
-								: self::apply_sanitizer( $item_value, $schema[ $key ][0] );
-						}
-					} else {
-						// If it is an associative or indexed array, process as a single object.
-						$tree[ $key ] = self::sanitize_from_schema( $value, $schema[ $key ] );
-					}
-				} elseif ( ! $is_value_array && $is_schema_array ) {
-					// If the value is not an array but the schema is, remove the key.
-					unset( $tree[ $key ] );
-				} elseif ( ! $is_schema_array ) {
-					// If the schema is not an array, apply the sanitizer to the value.
-					$tree[ $key ] = self::apply_sanitizer( $value, $schema[ $key ] );
-				}
-
-				// Remove keys with null/empty values.
-				if ( empty( $tree[ $key ] ) ) {
-					unset( $tree[ $key ] );
-				}
-			}
-
-			return $tree;
-		}
-
-		/**
-		 * Applies a sanitizer function to a value.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param mixed $value     The value to sanitize.
-		 * @param mixed $sanitizer The sanitizer function to apply.
-		 * @return mixed The sanitized value.
-		 */
-		private static function apply_sanitizer( $value, $sanitizer ) {
-			if ( null === $sanitizer ) {
-				return $value;
-
-			}
-			return call_user_func( $sanitizer, $value );
-		}
-
-		/**
-		 * Returns the expected mime-type values for font files, depending on PHP version.
-		 *
-		 * This is needed because font mime types vary by PHP version, so checking the PHP version
-		 * is necessary until a list of valid mime-types for each file extension can be provided to
-		 * the 'upload_mimes' filter.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @access private
-		 *
-		 * @return array A collection of mime types keyed by file extension.
-		 */
-		public static function get_allowed_font_mime_types() {
-			$php_7_ttf_mime_type = PHP_VERSION_ID >= 70300 ? 'application/font-sfnt' : 'application/x-font-ttf';
-
-			return array(
-				'otf'   => 'application/vnd.ms-opentype',
-				'ttf'   => PHP_VERSION_ID >= 70400 ? 'font/sfnt' : $php_7_ttf_mime_type,
-				'woff'  => PHP_VERSION_ID >= 80112 ? 'font/woff' : 'application/font-woff',
-				'woff2' => PHP_VERSION_ID >= 80112 ? 'font/woff2' : 'application/font-woff2',
-			);
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-collections-controller.php b/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-collections-controller.php
deleted file mode 100644
index 5221fbd63834f..0000000000000
--- a/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-collections-controller.php
+++ /dev/null
@@ -1,326 +0,0 @@
-<?php
-/**
- * Rest Font Collections Controller.
- *
- * This file contains the class for the REST API Font Collections Controller.
- *
- * @package    WordPress
- * @subpackage Font Library
- * @since      6.5.0
- */
-
-if ( ! class_exists( 'WP_REST_Font_Collections_Controller' ) ) {
-
-	/**
-	 * Font Library Controller class.
-	 *
-	 * @since 6.5.0
-	 */
-	class WP_REST_Font_Collections_Controller extends WP_REST_Controller {
-
-		/**
-		 * Constructor.
-		 *
-		 * @since 6.5.0
-		 */
-		public function __construct() {
-			$this->rest_base = 'font-collections';
-			$this->namespace = 'wp/v2';
-		}
-
-		/**
-		 * Registers the routes for the objects of the controller.
-		 *
-		 * @since 6.5.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' ),
-						'args'                => $this->get_collection_params(),
-
-					),
-					'schema' => array( $this, 'get_public_item_schema' ),
-				)
-			);
-
-			register_rest_route(
-				$this->namespace,
-				'/' . $this->rest_base . '/(?P<slug>[\/\w-]+)',
-				array(
-					array(
-						'methods'             => WP_REST_Server::READABLE,
-						'callback'            => array( $this, 'get_item' ),
-						'permission_callback' => array( $this, 'get_items_permissions_check' ),
-						'args'                => array(
-							'context' => $this->get_context_param( array( 'default' => 'view' ) ),
-						),
-					),
-					'schema' => array( $this, 'get_public_item_schema' ),
-				)
-			);
-		}
-
-		/**
-		 * Gets the font collections available.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
-		 */
-		public function get_items( $request ) {
-			$collections_all = WP_Font_Library::get_instance()->get_font_collections();
-
-			$page        = $request['page'];
-			$per_page    = $request['per_page'];
-			$total_items = count( $collections_all );
-			$max_pages   = ceil( $total_items / $per_page );
-
-			if ( $page > $max_pages && $total_items > 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 )
-				);
-			}
-
-			$collections_page = array_slice( $collections_all, ( $page - 1 ) * $per_page, $per_page );
-
-			$items = array();
-			foreach ( $collections_page as $collection ) {
-				$item = $this->prepare_item_for_response( $collection, $request );
-
-				// If there's an error loading a collection, skip it and continue loading valid collections.
-				if ( is_wp_error( $item ) ) {
-					continue;
-				}
-				$item    = $this->prepare_response_for_collection( $item );
-				$items[] = $item;
-			}
-
-			$response = rest_ensure_response( $items );
-
-			$response->header( 'X-WP-Total', (int) $total_items );
-			$response->header( 'X-WP-TotalPages', $max_pages );
-
-			$request_params = $request->get_query_params();
-			$collection_url = rest_url( $this->namespace . '/' . $this->rest_base );
-			$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;
-		}
-
-		/**
-		 * Gets a font collection.
-		 *
-		 * @since 6.5.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_item( $request ) {
-			$slug       = $request->get_param( 'slug' );
-			$collection = WP_Font_Library::get_instance()->get_font_collection( $slug );
-
-			// @todo remove `is_wp_error` check once WP trunk is updated to return null when a collection is not found.
-			if ( ! $collection || is_wp_error( $collection ) ) {
-				return new WP_Error( 'rest_font_collection_not_found', __( 'Font collection not found.' ), array( 'status' => 404 ) );
-			}
-
-			return $this->prepare_item_for_response( $collection, $request );
-		}
-
-		/**
-		* Prepare a single collection output for response.
-		*
-		* @since 6.5.0
-		*
-		* @param WP_Font_Collection $item    Font collection object.
-		* @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 );
-			$data   = array();
-
-			if ( rest_is_field_included( 'slug', $fields ) ) {
-				$data['slug'] = $item->slug;
-			}
-
-			// If any data fields are requested, get the collection data.
-			$data_fields = array( 'name', 'description', 'font_families', 'categories' );
-			if ( ! empty( array_intersect( $fields, $data_fields ) ) ) {
-				$collection_data = $item->get_data();
-				if ( is_wp_error( $collection_data ) ) {
-					$collection_data->add_data( array( 'status' => 500 ) );
-					return $collection_data;
-				}
-
-				foreach ( $data_fields as $field ) {
-					if ( rest_is_field_included( $field, $fields ) ) {
-						$data[ $field ] = $collection_data[ $field ];
-					}
-				}
-			}
-
-			$response = rest_ensure_response( $data );
-
-			if ( rest_is_field_included( '_links', $fields ) ) {
-				$links = $this->prepare_links( $item );
-				$response->add_links( $links );
-			}
-
-			$context        = ! empty( $request['context'] ) ? $request['context'] : 'view';
-			$response->data = $this->add_additional_fields_to_object( $response->data, $request );
-			$response->data = $this->filter_response_by_context( $response->data, $context );
-
-			/**
-			 * Filters the font collection data for a REST API response.
-			 *
-			 * @since 6.5.0
-			 *
-			 * @param WP_REST_Response   $response The response object.
-			 * @param WP_Font_Collection $item     The font collection object.
-			 * @param WP_REST_Request    $request  Request used to generate the response.
-			 */
-			return apply_filters( 'rest_prepare_font_collection', $response, $item, $request );
-		}
-
-		/**
-		 * Retrieves the font collection's schema, conforming to JSON Schema.
-		 *
-		 * @since 6.5.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'      => 'font-collection',
-				'type'       => 'object',
-				'properties' => array(
-					'slug'          => array(
-						'description' => __( 'Unique identifier for the font collection.', 'gutenberg' ),
-						'type'        => 'string',
-						'context'     => array( 'view', 'edit', 'embed' ),
-						'readonly'    => true,
-					),
-					'name'          => array(
-						'description' => __( 'The name for the font collection.', 'gutenberg' ),
-						'type'        => 'string',
-						'context'     => array( 'view', 'edit', 'embed' ),
-					),
-					'description'   => array(
-						'description' => __( 'The description for the font collection.', 'gutenberg' ),
-						'type'        => 'string',
-						'context'     => array( 'view', 'edit', 'embed' ),
-					),
-					'font_families' => array(
-						'description' => __( 'The font families for the font collection.', 'gutenberg' ),
-						'type'        => 'array',
-						'context'     => array( 'view', 'edit', 'embed' ),
-					),
-					'categories'    => array(
-						'description' => __( 'The categories for the font collection.', 'gutenberg' ),
-						'type'        => 'array',
-						'context'     => array( 'view', 'edit', 'embed' ),
-					),
-				),
-			);
-
-			$this->schema = $schema;
-
-			return $this->add_additional_fields_schema( $this->schema );
-		}
-
-		/**
-		 * Prepares links for the request.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param WP_Font_Collection $collection Font collection data
-		 * @return array Links for the given font collection.
-		 */
-		protected function prepare_links( $collection ) {
-			return array(
-				'self'       => array(
-					'href' => rest_url( sprintf( '%s/%s/%s', $this->namespace, $this->rest_base, $collection->slug ) ),
-				),
-				'collection' => array(
-					'href' => rest_url( sprintf( '%s/%s', $this->namespace, $this->rest_base ) ),
-				),
-			);
-		}
-
-		/**
-		 * Retrieves the search params for the font collections.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @return array Collection parameters.
-		 */
-		public function get_collection_params() {
-			$query_params = parent::get_collection_params();
-
-			$query_params['context'] = $this->get_context_param( array( 'default' => 'view' ) );
-
-			unset( $query_params['search'] );
-
-			/**
-			 * Filters REST API collection parameters for the font collections controller.
-			 *
-			 * @since 6.5.0
-			 *
-			 * @param array $query_params JSON Schema-formatted collection parameters.
-			 */
-			return apply_filters( 'rest_font_collections_collection_params', $query_params );
-		}
-
-		/**
-		 * Checks whether the user has permissions to use the Fonts Collections.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @return true|WP_Error True if the request has write access for the item, WP_Error object otherwise.
-		 */
-		public function get_items_permissions_check( $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
-			if ( current_user_can( 'edit_theme_options' ) ) {
-				return true;
-			}
-
-			return new WP_Error(
-				'rest_cannot_read',
-				__( 'Sorry, you are not allowed to access font collections.', 'gutenberg' ),
-				array(
-					'status' => rest_authorization_required_code(),
-				)
-			);
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-faces-controller.php b/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-faces-controller.php
deleted file mode 100644
index e844e7a8fe873..0000000000000
--- a/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-faces-controller.php
+++ /dev/null
@@ -1,952 +0,0 @@
-<?php
-/**
- * REST API: WP_REST_Font_Faces_Controller class
- *
- * @package WordPress
- * @subpackage REST_API
- * @since 6.5.0
- */
-
-if ( ! class_exists( 'WP_REST_Font_Faces_Controller' ) ) {
-
-	/**
-	 * Class to access font faces through the REST API.
-	 */
-	class WP_REST_Font_Faces_Controller extends WP_REST_Posts_Controller {
-
-		/**
-		 * The latest version of theme.json schema supported by the controller.
-		 *
-		 * @since 6.5.0
-		 * @var int
-		 */
-		const LATEST_THEME_JSON_VERSION_SUPPORTED = 2;
-
-		/**
-		 * Whether the controller supports batching.
-		 *
-		 * @since 6.5.0
-		 * @var false
-		 */
-		protected $allow_batch = false;
-
-		/**
-		 * Registers the routes for posts.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @see register_rest_route()
-		 */
-		public function register_routes() {
-			register_rest_route(
-				$this->namespace,
-				'/' . $this->rest_base,
-				array(
-					'args'   => array(
-						'font_family_id' => array(
-							'description' => __( 'The ID for the parent font family of the font face.', 'gutenberg' ),
-							'type'        => 'integer',
-							'required'    => true,
-						),
-					),
-					array(
-						'methods'             => WP_REST_Server::READABLE,
-						'callback'            => array( $this, 'get_items' ),
-						'permission_callback' => array( $this, 'get_items_permissions_check' ),
-						'args'                => $this->get_collection_params(),
-					),
-					array(
-						'methods'             => WP_REST_Server::CREATABLE,
-						'callback'            => array( $this, 'create_item' ),
-						'permission_callback' => array( $this, 'create_item_permissions_check' ),
-						'args'                => $this->get_create_params(),
-					),
-					'schema' => array( $this, 'get_public_item_schema' ),
-				)
-			);
-
-			register_rest_route(
-				$this->namespace,
-				'/' . $this->rest_base . '/(?P<id>[\d]+)',
-				array(
-					'args'   => array(
-						'font_family_id' => array(
-							'description' => __( 'The ID for the parent font family of the font face.', 'gutenberg' ),
-							'type'        => 'integer',
-							'required'    => true,
-						),
-						'id'             => array(
-							'description' => __( 'Unique identifier for the font face.', 'gutenberg' ),
-							'type'        => 'integer',
-							'required'    => true,
-						),
-					),
-					array(
-						'methods'             => WP_REST_Server::READABLE,
-						'callback'            => array( $this, 'get_item' ),
-						'permission_callback' => array( $this, 'get_item_permissions_check' ),
-						'args'                => array(
-							'context' => $this->get_context_param( array( 'default' => 'view' ) ),
-						),
-					),
-					array(
-						'methods'             => WP_REST_Server::DELETABLE,
-						'callback'            => array( $this, 'delete_item' ),
-						'permission_callback' => array( $this, 'delete_item_permissions_check' ),
-						'args'                => array(
-							'force' => array(
-								'type'        => 'boolean',
-								'default'     => false,
-								'description' => __( 'Whether to bypass Trash and force deletion.', 'default' ),
-							),
-						),
-					),
-					'schema' => array( $this, 'get_public_item_schema' ),
-				)
-			);
-		}
-
-		/**
-		 * Checks if a given request has access to font faces.
-		 *
-		 * @since 6.5.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 -- required by parent class
-			$post_type = get_post_type_object( $this->post_type );
-
-			if ( ! current_user_can( $post_type->cap->read ) ) {
-				return new WP_Error(
-					'rest_cannot_read',
-					__( 'Sorry, you are not allowed to access font faces.', 'gutenberg' ),
-					array( 'status' => rest_authorization_required_code() )
-				);
-			}
-
-			return true;
-		}
-
-		/**
-		 * Checks if a given request has access to a font face.
-		 *
-		 * @since 6.5.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 ( ! current_user_can( 'read_post', $post->ID ) ) {
-				return new WP_Error(
-					'rest_cannot_read',
-					__( 'Sorry, you are not allowed to access this font face.', 'gutenberg' ),
-					array( 'status' => rest_authorization_required_code() )
-				);
-			}
-
-			return true;
-		}
-
-		/**
-		 * Validates settings when creating a font face.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string          $value   Encoded JSON string of font face settings.
-		 * @param WP_REST_Request $request Request object.
-		 * @return true|WP_Error True if the settings are valid, otherwise a WP_Error object.
-		 */
-		public function validate_create_font_face_settings( $value, $request ) {
-			$settings = json_decode( $value, true );
-
-			// Check settings string is valid JSON.
-			if ( null === $settings ) {
-				return new WP_Error(
-					'rest_invalid_param',
-					__( 'font_face_settings parameter must be a valid JSON string.', 'gutenberg' ),
-					array( 'status' => 400 )
-				);
-			}
-
-			// Check that the font face settings match the theme.json schema.
-			$schema             = $this->get_item_schema()['properties']['font_face_settings'];
-			$has_valid_settings = rest_validate_value_from_schema( $settings, $schema, 'font_face_settings' );
-
-			if ( is_wp_error( $has_valid_settings ) ) {
-				$has_valid_settings->add_data( array( 'status' => 400 ) );
-				return $has_valid_settings;
-			}
-
-			// Check that none of the required settings are empty values.
-			$required = $schema['required'];
-			foreach ( $required as $key ) {
-				if ( isset( $settings[ $key ] ) && ! $settings[ $key ] ) {
-					return new WP_Error(
-						'rest_invalid_param',
-						/* translators: %s: Name of the missing font face settings parameter, e.g. "font_face_settings[src]". */
-						sprintf( __( '%s cannot be empty.', 'gutenberg' ), "font_face_setting[ $key ]" ),
-						array( 'status' => 400 )
-					);
-				}
-			}
-
-			$srcs  = is_array( $settings['src'] ) ? $settings['src'] : array( $settings['src'] );
-			$files = $request->get_file_params();
-
-			foreach ( $srcs as $src ) {
-				// Check that each src is a non-empty string.
-				$src = ltrim( $src );
-				if ( empty( $src ) ) {
-					return new WP_Error(
-						'rest_invalid_param',
-						/* translators: %s: Font face source parameter name: "font_face_settings[src]". */
-						sprintf( __( '%s values must be non-empty strings.', 'gutenberg' ), 'font_face_settings[src]' ),
-						array( 'status' => 400 )
-					);
-				}
-
-				// Check that srcs are valid URLs or file references.
-				if ( false === wp_http_validate_url( $src ) && ! isset( $files[ $src ] ) ) {
-					return new WP_Error(
-						'rest_invalid_param',
-						/* translators: 1: Font face source parameter name: "font_face_settings[src]", 2: The invalid src value. */
-						sprintf( __( '%1$s value "%2$s" must be a valid URL or file reference.', 'gutenberg' ), 'font_face_settings[src]', $src ),
-						array( 'status' => 400 )
-					);
-				}
-			}
-
-			// Check that each file in the request references a src in the settings.
-			foreach ( array_keys( $files ) as $file ) {
-				if ( ! in_array( $file, $srcs, true ) ) {
-					return new WP_Error(
-						'rest_invalid_param',
-						/* translators: 1: File key (e.g. "file-0") in the request data, 2: Font face source parameter name: "font_face_settings[src]". */
-						sprintf( __( 'File %1$s must be used in %2$s.', 'gutenberg' ), $file, 'font_face_settings[src]' ),
-						array( 'status' => 400 )
-					);
-				}
-			}
-
-			return true;
-		}
-
-		/**
-		 * Sanitizes the font face settings when creating a font face.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $value Encoded JSON string of font face settings.
-		 * @return array Decoded and sanitized array of font face settings.
-		 */
-		public function sanitize_font_face_settings( $value ) {
-			// Settings arrive as stringified JSON, since this is a multipart/form-data request.
-			$settings = json_decode( $value, true );
-			$schema   = $this->get_item_schema()['properties']['font_face_settings']['properties'];
-
-			// Sanitize settings based on callbacks in the schema.
-			foreach ( $settings as $key => $value ) {
-				$sanitize_callback = $schema[ $key ]['arg_options']['sanitize_callback'];
-				$settings[ $key ]  = call_user_func( $sanitize_callback, $value );
-			}
-
-			return $settings;
-		}
-
-		/**
-		 * Retrieves a collection of font faces within the parent font family.
-		 *
-		 * @since 6.5.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 ) {
-			$font_family = $this->get_parent_font_family_post( $request['font_family_id'] );
-			if ( is_wp_error( $font_family ) ) {
-				return $font_family;
-			}
-
-			return parent::get_items( $request );
-		}
-
-		/**
-		 * Retrieves a single font face within the parent font family.
-		 *
-		 * @since 6.5.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_item( $request ) {
-			$post = $this->get_post( $request['id'] );
-			if ( is_wp_error( $post ) ) {
-				return $post;
-			}
-
-			// Check that the font face has a valid parent font family.
-			$font_family = $this->get_parent_font_family_post( $request['font_family_id'] );
-			if ( is_wp_error( $font_family ) ) {
-				return $font_family;
-			}
-
-			if ( (int) $font_family->ID !== (int) $post->post_parent ) {
-				return new WP_Error(
-					'rest_font_face_parent_id_mismatch',
-					/* translators: %d: A post id. */
-					sprintf( __( 'The font face does not belong to the specified font family with id of "%d".', 'gutenberg' ), $font_family->ID ),
-					array( 'status' => 404 )
-				);
-			}
-
-			return parent::get_item( $request );
-		}
-
-		/**
-		 * Creates a font face for the parent font family.
-		 *
-		 * @since 6.5.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 create_item( $request ) {
-			$font_family = $this->get_parent_font_family_post( $request['font_family_id'] );
-			if ( is_wp_error( $font_family ) ) {
-				return $font_family;
-			}
-
-			// Settings have already been decoded by ::sanitize_font_face_settings().
-			$settings    = $request->get_param( 'font_face_settings' );
-			$file_params = $request->get_file_params();
-
-			// Check that the necessary font face properties are unique.
-			$query = new WP_Query(
-				array(
-					'post_type'              => $this->post_type,
-					'posts_per_page'         => 1,
-					'title'                  => WP_Font_Utils::get_font_face_slug( $settings ),
-					'update_post_meta_cache' => false,
-					'update_post_term_cache' => false,
-				)
-			);
-			if ( ! empty( $query->posts ) ) {
-				return new WP_Error(
-					'rest_duplicate_font_face',
-					__( 'A font face matching those settings already exists.', 'gutenberg' ),
-					array( 'status' => 400 )
-				);
-			}
-
-			// Move the uploaded font asset from the temp folder to the fonts directory.
-			if ( ! function_exists( 'wp_handle_upload' ) ) {
-				require_once ABSPATH . 'wp-admin/includes/file.php';
-			}
-
-			$srcs           = is_string( $settings['src'] ) ? array( $settings['src'] ) : $settings['src'];
-			$processed_srcs = array();
-			$font_file_meta = array();
-
-			foreach ( $srcs as $src ) {
-				// If src not a file reference, use it as is.
-				if ( ! isset( $file_params[ $src ] ) ) {
-					$processed_srcs[] = $src;
-					continue;
-				}
-
-				$file      = $file_params[ $src ];
-				$font_file = $this->handle_font_file_upload( $file );
-				if ( is_wp_error( $font_file ) ) {
-					return $font_file;
-				}
-
-				$processed_srcs[] = $font_file['url'];
-				$font_file_meta[] = $this->relative_fonts_path( $font_file['file'] );
-			}
-
-			// Store the updated settings for prepare_item_for_database to use.
-			$settings['src'] = count( $processed_srcs ) === 1 ? $processed_srcs[0] : $processed_srcs;
-			$request->set_param( 'font_face_settings', $settings );
-
-			// Ensure that $settings data is slashed, so values with quotes are escaped.
-			// WP_REST_Posts_Controller::create_item uses wp_slash() on the post_content.
-			$font_face_post = parent::create_item( $request );
-
-			if ( is_wp_error( $font_face_post ) ) {
-				return $font_face_post;
-			}
-
-			$font_face_id = $font_face_post->data['id'];
-
-			foreach ( $font_file_meta as $font_file_path ) {
-				add_post_meta( $font_face_id, '_wp_font_face_file', $font_file_path );
-			}
-
-			return $font_face_post;
-		}
-
-		/**
-		 * Deletes a single font face.
-		 *
-		 * @since 6.5.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 delete_item( $request ) {
-			$post = $this->get_post( $request['id'] );
-			if ( is_wp_error( $post ) ) {
-				return $post;
-			}
-
-			$font_family = $this->get_parent_font_family_post( $request['font_family_id'] );
-			if ( is_wp_error( $font_family ) ) {
-				return $font_family;
-			}
-
-			if ( (int) $font_family->ID !== (int) $post->post_parent ) {
-				return new WP_Error(
-					'rest_font_face_parent_id_mismatch',
-					/* translators: %d: A post id. */
-					sprintf( __( 'The font face does not belong to the specified font family with id of "%d".', 'gutenberg' ), $font_family->ID ),
-					array( 'status' => 404 )
-				);
-			}
-
-			$force = isset( $request['force'] ) ? (bool) $request['force'] : false;
-
-			// We don't support trashing for font faces.
-			if ( ! $force ) {
-				return new WP_Error(
-					'rest_trash_not_supported',
-					/* translators: %s: force=true */
-					sprintf( __( 'Font faces do not support trashing. Set "%s" to delete.', 'gutenberg' ), 'force=true' ),
-					array( 'status' => 501 )
-				);
-			}
-
-			return parent::delete_item( $request );
-		}
-
-		/**
-		 * Prepares a single font face output for response.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param WP_Post         $item    Post object.
-		 * @param WP_REST_Request $request Request object.
-		 * @return WP_REST_Response Response object.
-		 */
-		public function prepare_item_for_response( $item, $request ) {
-			$fields = $this->get_fields_for_response( $request );
-			$data   = array();
-
-			if ( rest_is_field_included( 'id', $fields ) ) {
-				$data['id'] = $item->ID;
-			}
-			if ( rest_is_field_included( 'theme_json_version', $fields ) ) {
-				$data['theme_json_version'] = static::LATEST_THEME_JSON_VERSION_SUPPORTED;
-			}
-
-			if ( rest_is_field_included( 'parent', $fields ) ) {
-				$data['parent'] = $item->post_parent;
-			}
-
-			if ( rest_is_field_included( 'font_face_settings', $fields ) ) {
-				$data['font_face_settings'] = $this->get_settings_from_post( $item );
-			}
-
-			$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 = $this->prepare_links( $item );
-				$response->add_links( $links );
-			}
-
-			/**
-			 * Filters the font face data for a REST API response.
-			 *
-			 * @since 6.5.0
-			 *
-			 * @param WP_REST_Response $response The response object.
-			 * @param WP_Post          $post     Font face post object.
-			 * @param WP_REST_Request  $request  Request object.
-			 */
-			return apply_filters( 'rest_prepare_wp_font_face', $response, $item, $request );
-		}
-
-		/**
-		 * Retrieves the post's schema, conforming to JSON Schema.
-		 *
-		 * @since 6.5.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',
-				// Base properties for every Post.
-				'properties' => array(
-					'id'                 => array(
-						'description' => __( 'Unique identifier for the post.', 'default' ),
-						'type'        => 'integer',
-						'context'     => array( 'view', 'edit', 'embed' ),
-						'readonly'    => true,
-					),
-					'theme_json_version' => array(
-						'description' => __( 'Version of the theme.json schema used for the typography settings.', 'gutenberg' ),
-						'type'        => 'integer',
-						'default'     => static::LATEST_THEME_JSON_VERSION_SUPPORTED,
-						'minimum'     => 2,
-						'maximum'     => static::LATEST_THEME_JSON_VERSION_SUPPORTED,
-						'context'     => array( 'view', 'edit', 'embed' ),
-					),
-					'parent'             => array(
-						'description' => __( 'The ID for the parent font family of the font face.', 'gutenberg' ),
-						'type'        => 'integer',
-						'context'     => array( 'view', 'edit', 'embed' ),
-					),
-					// Font face settings come directly from theme.json schema
-					// See https://schemas.wp.org/trunk/theme.json
-					'font_face_settings' => array(
-						'description'          => __( 'font-face declaration in theme.json format.', 'gutenberg' ),
-						'type'                 => 'object',
-						'context'              => array( 'view', 'edit', 'embed' ),
-						'properties'           => array(
-							'fontFamily'            => array(
-								'description' => __( 'CSS font-family value.', 'gutenberg' ),
-								'type'        => 'string',
-								'default'     => '',
-								'arg_options' => array(
-									'sanitize_callback' => array( 'WP_Font_Utils', 'sanitize_font_family' ),
-								),
-							),
-							'fontStyle'             => array(
-								'description' => __( 'CSS font-style value.', 'gutenberg' ),
-								'type'        => 'string',
-								'default'     => 'normal',
-								'arg_options' => array(
-									'sanitize_callback' => 'sanitize_text_field',
-								),
-							),
-							'fontWeight'            => array(
-								'description' => __( 'List of available font weights, separated by a space.', 'gutenberg' ),
-								'default'     => '400',
-								// Changed from `oneOf` to avoid errors from loose type checking.
-								// e.g. a fontWeight of "400" validates as both a string and an integer due to is_numeric check.
-								'type'        => array( 'string', 'integer' ),
-								'arg_options' => array(
-									'sanitize_callback' => 'sanitize_text_field',
-								),
-							),
-							'fontDisplay'           => array(
-								'description' => __( 'CSS font-display value.', 'gutenberg' ),
-								'type'        => 'string',
-								'default'     => 'fallback',
-								'enum'        => array(
-									'auto',
-									'block',
-									'fallback',
-									'swap',
-									'optional',
-								),
-								'arg_options' => array(
-									'sanitize_callback' => 'sanitize_text_field',
-								),
-							),
-							'src'                   => array(
-								'description' => __( 'Paths or URLs to the font files.', 'gutenberg' ),
-								// Changed from `oneOf` to `anyOf` due to rest_sanitize_array converting a string into an array,
-								// and causing a "matches more than one of the expected formats" error.
-								'anyOf'       => array(
-									array(
-										'type' => 'string',
-									),
-									array(
-										'type'  => 'array',
-										'items' => array(
-											'type' => 'string',
-										),
-									),
-								),
-								'default'     => array(),
-								'arg_options' => array(
-									'sanitize_callback' => function ( $value ) {
-										return is_array( $value ) ? array_map( array( $this, 'sanitize_src' ), $value ) : $this->sanitize_src( $value );
-									},
-								),
-							),
-							'fontStretch'           => array(
-								'description' => __( 'CSS font-stretch value.', 'gutenberg' ),
-								'type'        => 'string',
-								'arg_options' => array(
-									'sanitize_callback' => 'sanitize_text_field',
-								),
-							),
-							'ascentOverride'        => array(
-								'description' => __( 'CSS ascent-override value.', 'gutenberg' ),
-								'type'        => 'string',
-								'arg_options' => array(
-									'sanitize_callback' => 'sanitize_text_field',
-								),
-							),
-							'descentOverride'       => array(
-								'description' => __( 'CSS descent-override value.', 'gutenberg' ),
-								'type'        => 'string',
-								'arg_options' => array(
-									'sanitize_callback' => 'sanitize_text_field',
-								),
-							),
-							'fontVariant'           => array(
-								'description' => __( 'CSS font-variant value.', 'gutenberg' ),
-								'type'        => 'string',
-								'arg_options' => array(
-									'sanitize_callback' => 'sanitize_text_field',
-								),
-							),
-							'fontFeatureSettings'   => array(
-								'description' => __( 'CSS font-feature-settings value.', 'gutenberg' ),
-								'type'        => 'string',
-								'arg_options' => array(
-									'sanitize_callback' => 'sanitize_text_field',
-								),
-							),
-							'fontVariationSettings' => array(
-								'description' => __( 'CSS font-variation-settings value.', 'gutenberg' ),
-								'type'        => 'string',
-								'arg_options' => array(
-									'sanitize_callback' => 'sanitize_text_field',
-								),
-							),
-							'lineGapOverride'       => array(
-								'description' => __( 'CSS line-gap-override value.', 'gutenberg' ),
-								'type'        => 'string',
-								'arg_options' => array(
-									'sanitize_callback' => 'sanitize_text_field',
-								),
-							),
-							'sizeAdjust'            => array(
-								'description' => __( 'CSS size-adjust value.', 'gutenberg' ),
-								'type'        => 'string',
-								'arg_options' => array(
-									'sanitize_callback' => 'sanitize_text_field',
-								),
-							),
-							'unicodeRange'          => array(
-								'description' => __( 'CSS unicode-range value.', 'gutenberg' ),
-								'type'        => 'string',
-								'arg_options' => array(
-									'sanitize_callback' => 'sanitize_text_field',
-								),
-							),
-							'preview'               => array(
-								'description' => __( 'URL to a preview image of the font face.', 'gutenberg' ),
-								'type'        => 'string',
-								'format'      => 'uri',
-								'default'     => '',
-								'arg_options' => array(
-									'sanitize_callback' => 'sanitize_url',
-								),
-							),
-						),
-						'required'             => array( 'fontFamily', 'src' ),
-						'additionalProperties' => false,
-					),
-				),
-			);
-
-			$this->schema = $schema;
-
-			return $this->add_additional_fields_schema( $this->schema );
-		}
-
-		/**
-		 * Retrieves the item's schema for display / public consumption purposes.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @return array Public item schema data.
-		 */
-		public function get_public_item_schema() {
-
-			$schema = parent::get_public_item_schema();
-
-			// Also remove `arg_options' from child font_family_settings properties, since the parent
-			// controller only handles the top level properties.
-			foreach ( $schema['properties']['font_face_settings']['properties'] as &$property ) {
-				unset( $property['arg_options'] );
-			}
-
-			return $schema;
-		}
-
-		/**
-		 * Retrieves the query params for the font face collection.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @return array Collection parameters.
-		 */
-		public function get_collection_params() {
-			$query_params = parent::get_collection_params();
-
-			// Remove unneeded params.
-			unset(
-				$query_params['after'],
-				$query_params['modified_after'],
-				$query_params['before'],
-				$query_params['modified_before'],
-				$query_params['search'],
-				$query_params['search_columns'],
-				$query_params['slug'],
-				$query_params['status']
-			);
-
-			$query_params['orderby']['default'] = 'id';
-			$query_params['orderby']['enum']    = array( 'id', 'include' );
-
-			/**
-			 * Filters collection parameters for the font face controller.
-			 *
-			 * @since 6.5.0
-			 *
-			 * @param array $query_params JSON Schema-formatted collection parameters.
-			 */
-			return apply_filters( 'rest_wp_font_face_collection_params', $query_params );
-		}
-
-		/**
-		 * Get the params used when creating a new font face.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @return array Font face create arguments.
-		 */
-		public function get_create_params() {
-			$properties = $this->get_item_schema()['properties'];
-			return array(
-				'theme_json_version' => $properties['theme_json_version'],
-				// When creating, font_face_settings is stringified JSON, to work with multipart/form-data used
-				// when uploading font files.
-				'font_face_settings' => array(
-					'description'       => __( 'font-face declaration in theme.json format, encoded as a string.', 'gutenberg' ),
-					'type'              => 'string',
-					'required'          => true,
-					'validate_callback' => array( $this, 'validate_create_font_face_settings' ),
-					'sanitize_callback' => array( $this, 'sanitize_font_face_settings' ),
-				),
-			);
-		}
-
-		/**
-		 * Get the parent font family, if the ID is valid.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param int $font_family_id Supplied ID.
-		 * @return WP_Post|WP_Error Post object if ID is valid, WP_Error otherwise.
-		 */
-		protected function get_parent_font_family_post( $font_family_id ) {
-			$error = new WP_Error(
-				'rest_post_invalid_parent',
-				__( 'Invalid post parent ID.', 'default' ),
-				array( 'status' => 404 )
-			);
-
-			if ( (int) $font_family_id <= 0 ) {
-				return $error;
-			}
-
-			$font_family_post = get_post( (int) $font_family_id );
-
-			if ( empty( $font_family_post ) || empty( $font_family_post->ID )
-			|| 'wp_font_family' !== $font_family_post->post_type
-			) {
-				return $error;
-			}
-
-			return $font_family_post;
-		}
-
-		/**
-		 * Prepares links for the request.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param WP_Post $post Post object.
-		 * @return array Links for the given post.
-		 */
-		protected function prepare_links( $post ) {
-			// Entity meta.
-			return array(
-				'self'       => array(
-					'href' => rest_url( $this->namespace . '/font-families/' . $post->post_parent . '/font-faces/' . $post->ID ),
-				),
-				'collection' => array(
-					'href' => rest_url( $this->namespace . '/font-families/' . $post->post_parent . '/font-faces' ),
-				),
-				'parent'     => array(
-					'href' => rest_url( $this->namespace . '/font-families/' . $post->post_parent ),
-				),
-			);
-		}
-
-		/**
-		 * Prepares a single font face post for creation.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param WP_REST_Request $request Request object.
-		 * @return stdClass Post object.
-		 */
-		protected function prepare_item_for_database( $request ) {
-			$prepared_post = new stdClass();
-
-			// Settings have already been decoded by ::sanitize_font_face_settings().
-			$settings = $request->get_param( 'font_face_settings' );
-
-			// Store this "slug" as the post_title rather than post_name, since it uses the fontFamily setting,
-			// which may contain multibyte characters.
-			$title = WP_Font_Utils::get_font_face_slug( $settings );
-
-			$prepared_post->post_type    = $this->post_type;
-			$prepared_post->post_parent  = $request['font_family_id'];
-			$prepared_post->post_status  = 'publish';
-			$prepared_post->post_title   = $title;
-			$prepared_post->post_name    = sanitize_title( $title );
-			$prepared_post->post_content = wp_json_encode( $settings );
-
-			return $prepared_post;
-		}
-
-		/**
-		 * Sanitizes a single src value for a font face.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $value Font face src that is a URL or the key for a $_FILES array item.
-		 * @return string Sanitized value.
-		 */
-		protected function sanitize_src( $value ) {
-			$value = ltrim( $value );
-			return false === wp_http_validate_url( $value ) ? (string) $value : sanitize_url( $value );
-		}
-
-		/**
-		 * Handles the upload of a font file using wp_handle_upload().
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param array $file Single file item from $_FILES.
-		 * @return array|WP_Error Array containing uploaded file attributes on success, or WP_Error object on failure.
-		 */
-		protected function handle_font_file_upload( $file ) {
-			add_filter( 'upload_mimes', array( 'WP_Font_Utils', 'get_allowed_font_mime_types' ) );
-			// Filter the upload directory to return the fonts directory.
-			add_filter( 'upload_dir', '_wp_filter_font_directory' );
-
-			$overrides = array(
-				'upload_error_handler' => array( $this, 'handle_font_file_upload_error' ),
-				// Not testing a form submission.
-				'test_form'            => false,
-				// Only allow uploading font files for this request.
-				'mimes'                => WP_Font_Utils::get_allowed_font_mime_types(),
-			);
-
-			// Bypasses is_uploaded_file() when running unit tests.
-			if ( defined( 'DIR_TESTDATA' ) && DIR_TESTDATA ) {
-				$overrides['action'] = 'wp_handle_mock_upload';
-			}
-
-			$uploaded_file = wp_handle_upload( $file, $overrides );
-			remove_filter( 'upload_dir', '_wp_filter_font_directory' );
-			remove_filter( 'upload_mimes', array( 'WP_Font_Utils', 'get_allowed_font_mime_types' ) );
-
-			return $uploaded_file;
-		}
-
-		/**
-		 * Handles file upload error.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param array  $file    File upload data.
-		 * @param string $message Error message from wp_handle_upload().
-		 * @return WP_Error WP_Error object.
-		 */
-		public function handle_font_file_upload_error( $file, $message ) {
-			$status = 500;
-			$code   = 'rest_font_upload_unknown_error';
-
-			if ( __( 'Sorry, you are not allowed to upload this file type.' ) === $message ) {
-				$status = 400;
-				$code   = 'rest_font_upload_invalid_file_type';
-			}
-
-			return new WP_Error( $code, $message, array( 'status' => $status ) );
-		}
-
-		/**
-		* Returns relative path to an uploaded font file.
-		*
-		* The path is relative to the current fonts directory.
-		*
-		* @since 6.5.0
-		* @access private
-		*
-		* @param string $path Full path to the file.
-		* @return string Relative path on success, unchanged path on failure.
-		*/
-		protected function relative_fonts_path( $path ) {
-			$new_path = $path;
-
-			$fonts_dir = wp_get_font_dir();
-			if ( str_starts_with( $new_path, $fonts_dir['basedir'] ) ) {
-				$new_path = str_replace( $fonts_dir['basedir'], '', $new_path );
-				$new_path = ltrim( $new_path, '/' );
-			}
-
-			return $new_path;
-		}
-
-		/**
-		 * Gets the font face's settings from the post.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param WP_Post $post Font face post object.
-		 * @return array Font face settings array.
-		 */
-		protected function get_settings_from_post( $post ) {
-			$settings   = json_decode( $post->post_content, true );
-			$properties = $this->get_item_schema()['properties']['font_face_settings']['properties'];
-
-			// Provide required, empty settings if needed.
-			if ( null === $settings ) {
-				$settings = array(
-					'fontFamily' => '',
-					'src'        => array(),
-				);
-			}
-
-			// Only return the properties defined in the schema.
-			return array_intersect_key( $settings, $properties );
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-families-controller.php b/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-families-controller.php
deleted file mode 100644
index 4cde4d636cf9f..0000000000000
--- a/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-families-controller.php
+++ /dev/null
@@ -1,567 +0,0 @@
-<?php
-/**
- * REST API: WP_REST_Font_Families_Controller class
- *
- * @package WordPress
- * @subpackage REST_API
- * @since 6.5.0
- */
-
-if ( ! class_exists( 'WP_REST_Font_Families_Controller' ) ) {
-
-	/**
-	 * Font Families Controller class.
-	 *
-	 * @since 6.5.0
-	 */
-	class WP_REST_Font_Families_Controller extends WP_REST_Posts_Controller {
-
-		/**
-		 * The latest version of theme.json schema supported by the controller.
-		 *
-		 * @since 6.5.0
-		 * @var int
-		 */
-		const LATEST_THEME_JSON_VERSION_SUPPORTED = 2;
-
-		/**
-		 * Whether the controller supports batching.
-		 *
-		 * @since 6.5.0
-		 * @var false
-		 */
-		protected $allow_batch = false;
-
-		/**
-		 * Checks if a given request has access to font families.
-		 *
-		 * @since 6.5.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 -- required by parent class
-			$post_type = get_post_type_object( $this->post_type );
-
-			if ( ! current_user_can( $post_type->cap->read ) ) {
-				return new WP_Error(
-					'rest_cannot_read',
-					__( 'Sorry, you are not allowed to access font families.', 'gutenberg' ),
-					array( 'status' => rest_authorization_required_code() )
-				);
-			}
-
-			return true;
-		}
-
-		/**
-		 * Checks if a given request has access to a font family.
-		 *
-		 * @since 6.5.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 ( ! current_user_can( 'read_post', $post->ID ) ) {
-				return new WP_Error(
-					'rest_cannot_read',
-					__( 'Sorry, you are not allowed to access this font family.', 'gutenberg' ),
-					array( 'status' => rest_authorization_required_code() )
-				);
-			}
-
-			return true;
-		}
-
-		/**
-		 * Validates settings when creating or updating a font family.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string          $value   Encoded JSON string of font family settings.
-		 * @param WP_REST_Request $request Request object.
-		 * @return true|WP_Error True if the settings are valid, otherwise a WP_Error object.
-		 */
-		public function validate_font_family_settings( $value, $request ) {
-			$settings = json_decode( $value, true );
-
-			// Check settings string is valid JSON.
-			if ( null === $settings ) {
-				return new WP_Error(
-					'rest_invalid_param',
-					/* translators: %s: Parameter name: "font_family_settings". */
-					sprintf( __( '%s parameter must be a valid JSON string.', 'gutenberg' ), 'font_family_settings' ),
-					array( 'status' => 400 )
-				);
-			}
-
-			$schema   = $this->get_item_schema()['properties']['font_family_settings'];
-			$required = $schema['required'];
-
-			if ( isset( $request['id'] ) ) {
-				// Allow sending individual properties if we are updating an existing font family.
-				unset( $schema['required'] );
-
-				// But don't allow updating the slug, since it is used as a unique identifier.
-				if ( isset( $settings['slug'] ) ) {
-					return new WP_Error(
-						'rest_invalid_param',
-						/* translators: %s: Name of parameter being updated: font_family_settings[slug]". */
-						sprintf( __( '%s cannot be updated.', 'gutenberg' ), 'font_family_settings[slug]' ),
-						array( 'status' => 400 )
-					);
-				}
-			}
-
-			// Check that the font face settings match the theme.json schema.
-			$has_valid_settings = rest_validate_value_from_schema( $settings, $schema, 'font_family_settings' );
-
-			if ( is_wp_error( $has_valid_settings ) ) {
-				$has_valid_settings->add_data( array( 'status' => 400 ) );
-				return $has_valid_settings;
-			}
-
-			// Check that none of the required settings are empty values.
-			foreach ( $required as $key ) {
-				if ( isset( $settings[ $key ] ) && ! $settings[ $key ] ) {
-					return new WP_Error(
-						'rest_invalid_param',
-						/* translators: %s: Name of the empty font family setting parameter, e.g. "font_family_settings[slug]". */
-						sprintf( __( '%s cannot be empty.', 'gutenberg' ), "font_family_settings[ $key ]" ),
-						array( 'status' => 400 )
-					);
-				}
-			}
-
-			return true;
-		}
-
-		/**
-		 * Sanitizes the font family settings when creating or updating a font family.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $value Encoded JSON string of font family settings.
-		 * @return array Decoded array of font family settings.
-		 */
-		public function sanitize_font_family_settings( $value ) {
-			// Settings arrive as stringified JSON, since this is a multipart/form-data request.
-			$settings = json_decode( $value, true );
-			$schema   = $this->get_item_schema()['properties']['font_family_settings']['properties'];
-
-			// Sanitize settings based on callbacks in the schema.
-			foreach ( $settings as $key => $value ) {
-				$sanitize_callback = $schema[ $key ]['arg_options']['sanitize_callback'];
-				$settings[ $key ]  = call_user_func( $sanitize_callback, $value );
-			}
-
-			return $settings;
-		}
-
-		/**
-		 * Creates a single font family.
-		 *
-		 * @since 6.5.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 create_item( $request ) {
-			$settings = $request->get_param( 'font_family_settings' );
-
-			// Check that the font family slug is unique.
-			$query = new WP_Query(
-				array(
-					'post_type'              => $this->post_type,
-					'posts_per_page'         => 1,
-					'name'                   => $settings['slug'],
-					'update_post_meta_cache' => false,
-					'update_post_term_cache' => false,
-				)
-			);
-			if ( ! empty( $query->posts ) ) {
-				return new WP_Error(
-					'rest_duplicate_font_family',
-					/* translators: %s: Font family slug. */
-					sprintf( __( 'A font family with slug "%s" already exists.', 'gutenberg' ), $settings['slug'] ),
-					array( 'status' => 400 )
-				);
-			}
-
-			return parent::create_item( $request );
-		}
-
-		/**
-		 * Deletes a single font family.
-		 *
-		 * @since 6.5.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 delete_item( $request ) {
-			$force = isset( $request['force'] ) ? (bool) $request['force'] : false;
-
-			// We don't support trashing for font families.
-			if ( ! $force ) {
-				return new WP_Error(
-					'rest_trash_not_supported',
-					/* translators: %s: force=true */
-					sprintf( __( 'Font faces do not support trashing. Set "%s" to delete.', 'gutenberg' ), 'force=true' ),
-					array( 'status' => 501 )
-				);
-			}
-
-			return parent::delete_item( $request );
-		}
-
-		/**
-		 * Prepares a single font family output for response.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param WP_Post         $item    Post object.
-		 * @param WP_REST_Request $request Request object.
-		 * @return WP_REST_Response Response object.
-		 */
-		public function prepare_item_for_response( $item, $request ) {
-			$fields = $this->get_fields_for_response( $request );
-			$data   = array();
-
-			if ( rest_is_field_included( 'id', $fields ) ) {
-				$data['id'] = $item->ID;
-			}
-
-			if ( rest_is_field_included( 'theme_json_version', $fields ) ) {
-				$data['theme_json_version'] = static::LATEST_THEME_JSON_VERSION_SUPPORTED;
-			}
-
-			if ( rest_is_field_included( 'font_faces', $fields ) ) {
-				$data['font_faces'] = $this->get_font_face_ids( $item->ID );
-			}
-
-			if ( rest_is_field_included( 'font_family_settings', $fields ) ) {
-				$data['font_family_settings'] = $this->get_settings_from_post( $item );
-			}
-
-			$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 ) ) {
-				$links = $this->prepare_links( $item );
-				$response->add_links( $links );
-			}
-
-			/**
-			 * Filters the font family data for a REST API response.
-			 *
-			 * @since 6.5.0
-			 *
-			 * @param WP_REST_Response $response The response object.
-			 * @param WP_Post          $post     Font family post object.
-			 * @param WP_REST_Request  $request  Request object.
-			 */
-			return apply_filters( 'rest_prepare_wp_font_family', $response, $item, $request );
-		}
-
-		/**
-		 * Retrieves the post's schema, conforming to JSON Schema.
-		 *
-		 * @since 6.5.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',
-				// Base properties for every Post.
-				'properties' => array(
-					'id'                   => array(
-						'description' => __( 'Unique identifier for the post.', 'default' ),
-						'type'        => 'integer',
-						'context'     => array( 'view', 'edit', 'embed' ),
-						'readonly'    => true,
-					),
-					'theme_json_version'   => array(
-						'description' => __( 'Version of the theme.json schema used for the typography settings.', 'gutenberg' ),
-						'type'        => 'integer',
-						'default'     => static::LATEST_THEME_JSON_VERSION_SUPPORTED,
-						'minimum'     => 2,
-						'maximum'     => static::LATEST_THEME_JSON_VERSION_SUPPORTED,
-						'context'     => array( 'view', 'edit', 'embed' ),
-					),
-					'font_faces'           => array(
-						'description' => __( 'The IDs of the child font faces in the font family.', 'gutenberg' ),
-						'type'        => 'array',
-						'context'     => array( 'view', 'edit', 'embed' ),
-						'items'       => array(
-							'type' => 'integer',
-						),
-					),
-					// Font family settings come directly from theme.json schema
-					// See https://schemas.wp.org/trunk/theme.json
-					'font_family_settings' => array(
-						'description'          => __( 'font-face definition in theme.json format.', 'gutenberg' ),
-						'type'                 => 'object',
-						'context'              => array( 'view', 'edit', 'embed' ),
-						'properties'           => array(
-							'name'       => array(
-								'description' => __( 'Name of the font family preset, translatable.', 'gutenberg' ),
-								'type'        => 'string',
-								'arg_options' => array(
-									'sanitize_callback' => 'sanitize_text_field',
-								),
-							),
-							'slug'       => array(
-								'description' => __( 'Kebab-case unique identifier for the font family preset.', 'gutenberg' ),
-								'type'        => 'string',
-								'arg_options' => array(
-									'sanitize_callback' => 'sanitize_title',
-								),
-							),
-							'fontFamily' => array(
-								'description' => __( 'CSS font-family value.', 'gutenberg' ),
-								'type'        => 'string',
-								'arg_options' => array(
-									'sanitize_callback' => array( 'WP_Font_Utils', 'sanitize_font_family' ),
-								),
-							),
-							'preview'    => array(
-								'description' => __( 'URL to a preview image of the font family.', 'gutenberg' ),
-								'type'        => 'string',
-								'format'      => 'uri',
-								'default'     => '',
-								'arg_options' => array(
-									'sanitize_callback' => 'sanitize_url',
-								),
-							),
-						),
-						'required'             => array( 'name', 'slug', 'fontFamily' ),
-						'additionalProperties' => false,
-					),
-				),
-			);
-
-			$this->schema = $schema;
-
-			return $this->add_additional_fields_schema( $this->schema );
-		}
-
-		/**
-		 * Retrieves the item's schema for display / public consumption purposes.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @return array Public item schema data.
-		 */
-		public function get_public_item_schema() {
-
-			$schema = parent::get_public_item_schema();
-
-			// Also remove `arg_options' from child font_family_settings properties, since the parent
-			// controller only handles the top level properties.
-			foreach ( $schema['properties']['font_family_settings']['properties'] as &$property ) {
-				unset( $property['arg_options'] );
-			}
-
-			return $schema;
-		}
-
-		/**
-		 * Retrieves the query params for the font family collection.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @return array Collection parameters.
-		 */
-		public function get_collection_params() {
-			$query_params = parent::get_collection_params();
-
-			// Remove unneeded params.
-			unset(
-				$query_params['after'],
-				$query_params['modified_after'],
-				$query_params['before'],
-				$query_params['modified_before'],
-				$query_params['search'],
-				$query_params['search_columns'],
-				$query_params['status']
-			);
-
-			$query_params['orderby']['default'] = 'id';
-			$query_params['orderby']['enum']    = array( 'id', 'include' );
-
-			/**
-			 * Filters collection parameters for the font family controller.
-			 *
-			 * @since 6.5.0
-			 *
-			 * @param array $query_params JSON Schema-formatted collection parameters.
-			 */
-			return apply_filters( 'rest_wp_font_family_collection_params', $query_params );
-		}
-
-		/**
-		 * Get the arguments used when creating or updating a font family.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @return array Font family create/edit arguments.
-		 */
-		public function get_endpoint_args_for_item_schema( $method = WP_REST_Server::CREATABLE ) {
-			if ( WP_REST_Server::CREATABLE === $method || WP_REST_Server::EDITABLE === $method ) {
-				$properties = $this->get_item_schema()['properties'];
-				return array(
-					'theme_json_version'   => $properties['theme_json_version'],
-					// When creating or updating, font_family_settings is stringified JSON, to work with multipart/form-data.
-					// Font families don't currently support file uploads, but may accept preview files in the future.
-					'font_family_settings' => array(
-						'description'       => __( 'font-family declaration in theme.json format, encoded as a string.', 'gutenberg' ),
-						'type'              => 'string',
-						'required'          => true,
-						'validate_callback' => array( $this, 'validate_font_family_settings' ),
-						'sanitize_callback' => array( $this, 'sanitize_font_family_settings' ),
-					),
-				);
-			}
-
-			return parent::get_endpoint_args_for_item_schema( $method );
-		}
-
-		/**
-		 * Get the child font face post IDs.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param int $font_family_id Font family post ID.
-		 * @return int[] Array of child font face post IDs.
-		 */
-		protected function get_font_face_ids( $font_family_id ) {
-			$query = new WP_Query(
-				array(
-					'fields'                 => 'ids',
-					'post_parent'            => $font_family_id,
-					'post_type'              => 'wp_font_face',
-					'posts_per_page'         => 99,
-					'order'                  => 'ASC',
-					'orderby'                => 'id',
-					'update_post_meta_cache' => false,
-					'update_post_term_cache' => false,
-				)
-			);
-
-			return $query->posts;
-		}
-
-		/**
-		 * Prepares font family links for the request.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param WP_Post $post Post object.
-		 * @return array Links for the given post.
-		 */
-		protected function prepare_links( $post ) {
-			// Entity meta.
-			$links = parent::prepare_links( $post );
-
-			return array(
-				'self'       => $links['self'],
-				'collection' => $links['collection'],
-				'font_faces' => $this->prepare_font_face_links( $post->ID ),
-			);
-		}
-
-		/**
-		 * Prepares child font face links for the request.
-		 *
-		 * @param int $font_family_id Font family post ID.
-		 * @return array Links for the child font face posts.
-		 */
-		protected function prepare_font_face_links( $font_family_id ) {
-			$font_face_ids = $this->get_font_face_ids( $font_family_id );
-			$links         = array();
-			foreach ( $font_face_ids as $font_face_id ) {
-				$links[] = array(
-					'embeddable' => true,
-					'href'       => rest_url( sprintf( '%s/%s/%s/font-faces/%s', $this->namespace, $this->rest_base, $font_family_id, $font_face_id ) ),
-				);
-			}
-			return $links;
-		}
-
-		/**
-		 * Prepares a single font family post for create or update.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param WP_REST_Request $request Request object.
-		 * @return stdClass|WP_Error Post object or WP_Error.
-		 */
-		protected function prepare_item_for_database( $request ) {
-			$prepared_post = new stdClass();
-			// Settings have already been decoded by ::sanitize_font_family_settings().
-			$settings = $request->get_param( 'font_family_settings' );
-
-			// This is an update and we merge with the existing font family.
-			if ( isset( $request['id'] ) ) {
-				$existing_post = $this->get_post( $request['id'] );
-				if ( is_wp_error( $existing_post ) ) {
-					return $existing_post;
-				}
-
-				$prepared_post->ID = $existing_post->ID;
-				$existing_settings = $this->get_settings_from_post( $existing_post );
-				$settings          = array_merge( $existing_settings, $settings );
-			}
-
-			$prepared_post->post_type   = $this->post_type;
-			$prepared_post->post_status = 'publish';
-			$prepared_post->post_title  = $settings['name'];
-			$prepared_post->post_name   = sanitize_title( $settings['slug'] );
-
-			// Remove duplicate information from settings.
-			unset( $settings['name'] );
-			unset( $settings['slug'] );
-
-			$prepared_post->post_content = wp_json_encode( $settings );
-
-			return $prepared_post;
-		}
-
-		/**
-		 * Gets the font family's settings from the post.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param WP_Post $post Font family post object.
-		 * @return array Font family settings array.
-		 */
-		protected function get_settings_from_post( $post ) {
-			$settings_json = json_decode( $post->post_content, true );
-
-			// Default to empty strings if the settings are missing.
-			return array(
-				'name'       => isset( $post->post_title ) && $post->post_title ? $post->post_title : '',
-				'slug'       => isset( $post->post_name ) && $post->post_name ? $post->post_name : '',
-				'fontFamily' => isset( $settings_json['fontFamily'] ) && $settings_json['fontFamily'] ? $settings_json['fontFamily'] : '',
-				'preview'    => isset( $settings_json['preview'] ) && $settings_json['preview'] ? $settings_json['preview'] : '',
-			);
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.5/fonts/fonts.php b/lib/compat/wordpress-6.5/fonts/fonts.php
deleted file mode 100644
index 8f61dc5750f53..0000000000000
--- a/lib/compat/wordpress-6.5/fonts/fonts.php
+++ /dev/null
@@ -1,485 +0,0 @@
-<?php
-/**
- * Font Library initialization.
- *
- * This file contains Font Library init calls.
- *
- * @package    WordPress
- * @subpackage Font Library
- * @since      6.5.0
- */
-
-/**
- * Registers the routes for the objects of the controller.
- *
- * This function will not be merged into Core. However, the
- * code in the function will be. @core-merge annotation
- * provides instructions on where the could needs to go
- * in Core.
- *
- * @since 6.5.0
- */
-function gutenberg_create_initial_post_types() {
-	// @core-merge: This code will go into Core's `create_initial_post_types()`.
-	$args = array(
-		'labels'                         => array(
-			'name'          => __( 'Font Families', 'gutenberg' ),
-			'singular_name' => __( 'Font Family', 'gutenberg' ),
-		),
-		'public'                         => false,
-		'_builtin'                       => true, /* internal use only. don't use this when registering your own post type. */
-		'hierarchical'                   => false,
-		'capabilities'                   => array(
-			'read'                   => 'edit_theme_options',
-			'read_private_posts'     => 'edit_theme_options',
-			'create_posts'           => 'edit_theme_options',
-			'publish_posts'          => 'edit_theme_options',
-			'edit_posts'             => 'edit_theme_options',
-			'edit_others_posts'      => 'edit_theme_options',
-			'edit_published_posts'   => 'edit_theme_options',
-			'delete_posts'           => 'edit_theme_options',
-			'delete_others_posts'    => 'edit_theme_options',
-			'delete_published_posts' => 'edit_theme_options',
-		),
-		'map_meta_cap'                   => true,
-		'query_var'                      => false,
-		'show_in_rest'                   => true,
-		'rest_base'                      => 'font-families',
-		'rest_controller_class'          => 'WP_REST_Font_Families_Controller',
-		// Disable autosave endpoints for font families.
-		'autosave_rest_controller_class' => 'stdClass',
-	);
-	register_post_type( 'wp_font_family', $args );
-
-	register_post_type(
-		'wp_font_face',
-		array(
-			'labels'                         => array(
-				'name'          => __( 'Font Faces', 'gutenberg' ),
-				'singular_name' => __( 'Font Face', 'gutenberg' ),
-			),
-			'public'                         => false,
-			'_builtin'                       => true, /* internal use only. don't use this when registering your own post type. */
-			'hierarchical'                   => false,
-			'capabilities'                   => array(
-				'read'                   => 'edit_theme_options',
-				'read_private_posts'     => 'edit_theme_options',
-				'create_posts'           => 'edit_theme_options',
-				'publish_posts'          => 'edit_theme_options',
-				'edit_posts'             => 'edit_theme_options',
-				'edit_others_posts'      => 'edit_theme_options',
-				'edit_published_posts'   => 'edit_theme_options',
-				'delete_posts'           => 'edit_theme_options',
-				'delete_others_posts'    => 'edit_theme_options',
-				'delete_published_posts' => 'edit_theme_options',
-			),
-			'map_meta_cap'                   => true,
-			'query_var'                      => false,
-			'show_in_rest'                   => true,
-			'rest_base'                      => 'font-families/(?P<font_family_id>[\d]+)/font-faces',
-			'rest_controller_class'          => 'WP_REST_Font_Faces_Controller',
-			// Disable autosave endpoints for font faces.
-			'autosave_rest_controller_class' => 'stdClass',
-		)
-	);
-}
-
-/**
- * Initializes REST routes.
- *
- * @global string $wp_version The WordPress version string.
- */
-function gutenberg_create_initial_rest_routes() {
-	global $wp_version;
-
-	// Runs only if the Font Library is not available in core ( i.e. in core < 6.5-alpha ).
-	if ( version_compare( $wp_version, '6.5-alpha', '<' ) ) {
-		$font_collections_controller = new WP_REST_Font_Collections_Controller();
-		$font_collections_controller->register_routes();
-	}
-}
-
-add_action( 'rest_api_init', 'gutenberg_create_initial_rest_routes' );
-
-/**
- * Initializes REST routes and post types.
- *
- * @global string $wp_version The WordPress version string.
- */
-function gutenberg_init_font_library() {
-	global $wp_version;
-
-	// Runs only if the Font Library is not available in core ( i.e. in core < 6.5-alpha ).
-	if ( version_compare( $wp_version, '6.5-alpha', '<' ) ) {
-		gutenberg_create_initial_post_types();
-	}
-}
-
-add_action( 'init', 'gutenberg_init_font_library' );
-
-
-if ( ! function_exists( 'wp_register_font_collection' ) ) {
-	/**
-	 * Registers a new font collection in the font library.
-	 *
-	 * See {@link https://schemas.wp.org/trunk/font-collection.json} for the schema
-	 * the font collection data must adhere to.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @param string $slug Font collection slug. May only contain alphanumeric characters, dashes,
-	 *                     and underscores. See sanitize_title().
-	 * @param array  $args {
-	 *     Font collection data.
-	 *
-	 *     @type string       $name          Required. Name of the font collection shown in the Font Library.
-	 *     @type string       $description   Optional. A short descriptive summary of the font collection. Default empty.
-	 *     @type array|string $font_families Required. Array of font family definitions that are in the collection,
-	 *                                       or a string containing the path or URL to a JSON file containing the font collection.
-	 *     @type array        $categories    Optional. Array of categories, each with a name and slug, that are used by the
-	 *                                       fonts in the collection. Default empty.
-	 * }
-	 * @return WP_Font_Collection|WP_Error A font collection if it was registered
-	 *                                     successfully, or WP_Error object on failure.
-	 */
-	function wp_register_font_collection( string $slug, array $args ) {
-		return WP_Font_Library::get_instance()->register_font_collection( $slug, $args );
-	}
-}
-
-if ( ! function_exists( 'wp_unregister_font_collection' ) ) {
-	/**
-	 * Unregisters a font collection from the Font Library.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @param string $slug Font collection slug.
-	 * @return bool True if the font collection was unregistered successfully, else false.
-	 */
-	function wp_unregister_font_collection( string $slug ) {
-		return WP_Font_Library::get_instance()->unregister_font_collection( $slug );
-	}
-}
-
-function gutenberg_register_font_collections() {
-	if ( null !== WP_Font_Library::get_instance()->get_font_collection( 'google-fonts' ) ) {
-		return;
-	}
-	wp_register_font_collection(
-		'google-fonts',
-		array(
-			'name'          => _x( 'Google Fonts', 'font collection name', 'gutenberg' ),
-			'description'   => __( 'Install from Google Fonts. Fonts are copied to and served from your site.', 'gutenberg' ),
-			'font_families' => 'https://s.w.org/images/fonts/wp-6.5/collections/google-fonts-with-preview.json',
-			'categories'    => array(
-				array(
-					'name' => _x( 'Sans Serif', 'font category', 'gutenberg' ),
-					'slug' => 'sans-serif',
-				),
-				array(
-					'name' => _x( 'Display', 'font category', 'gutenberg' ),
-					'slug' => 'display',
-				),
-				array(
-					'name' => _x( 'Serif', 'font category', 'gutenberg' ),
-					'slug' => 'serif',
-				),
-				array(
-					'name' => _x( 'Handwriting', 'font category', 'gutenberg' ),
-					'slug' => 'handwriting',
-				),
-				array(
-					'name' => _x( 'Monospace', 'font category', 'gutenberg' ),
-					'slug' => 'monospace',
-				),
-			),
-		)
-	);
-}
-add_action( 'init', 'gutenberg_register_font_collections', 11 );
-
-// @core-merge: This code should probably go into Core's src/wp-includes/fonts.php.
-if ( ! function_exists( 'wp_get_font_dir' ) ) {
-	/**
-	 * Retrieves font uploads directory information.
-	 *
-	 * Same as wp_font_dir() but "light weight" as it doesn't attempt to create the font uploads directory.
-	 * Intended for use in themes, when only 'basedir' and 'baseurl' are needed, generally in all cases
-	 * when not uploading files.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @see wp_font_dir()
-	 *
-	 * @return array See wp_font_dir() for description.
-	 */
-	function wp_get_font_dir() {
-		return wp_font_dir( false );
-	}
-}
-
-// @core-merge: This code should probably go into Core's src/wp-includes/fonts.php.
-if ( ! function_exists( 'wp_font_dir' ) ) {
-	/**
-	 * Returns an array containing the current fonts upload directory's path and URL.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @param bool $create_dir Optional. Whether to check and create the font uploads directory. Default true.
-	 * @return array {
-	 *     Array of information about the font upload directory.
-	 *
-	 *     @type string       $path    Base directory and subdirectory or full path to the fonts upload directory.
-	 *     @type string       $url     Base URL and subdirectory or absolute URL to the fonts upload directory.
-	 *     @type string       $subdir  Subdirectory
-	 *     @type string       $basedir Path without subdir.
-	 *     @type string       $baseurl URL path without subdir.
-	 *     @type string|false $error   False or error message.
-	 * }
-	 */
-	function wp_font_dir( $create_dir = true ) {
-		/*
-		 * Allow extenders to manipulate the font directory consistently.
-		 *
-		 * Ensures the upload_dir filter is fired both when calling this function
-		 * directly and when the upload directory is filtered in the Font Face
-		 * REST API endpoint.
-		 */
-		add_filter( 'upload_dir', '_wp_filter_font_directory' );
-		$font_dir = wp_upload_dir( null, $create_dir, false );
-		remove_filter( 'upload_dir', '_wp_filter_font_directory' );
-		return $font_dir;
-	}
-}
-
-// @core-merge: This code should probably go into Core's src/wp-includes/fonts.php.
-if ( ! function_exists( '_wp_filter_font_directory' ) ) {
-	/**
-	 * Returns the font directory for use by the font library.
-	 *
-	 * This function is a callback for the {@see 'upload_dir'} filter. It is not
-	 * intended to be called directly. Use wp_get_font_dir() instead.
-	 *
-	 * The function can be used when extending the font library to modify the upload
-	 * destination for font files via the upload_dir filter. The recommended way to
-	 * do this is:
-	 *
-	 * ```php
-	 * add_filter( 'upload_dir', '_wp_filter_font_directory' );
-	 * // Your code to upload or sideload a font file.
-	 * remove_filter( 'upload_dir', '_wp_filter_font_directory' );
-	 * ```
-	 *
-	 * @since 6.5.0
-	 * @access private
-	 *
-	 * @param string $font_dir The font directory.
-	 * @return string The modified font directory.
-	 */
-	function _wp_filter_font_directory( $font_dir ) {
-		if ( doing_filter( 'font_dir' ) ) {
-			// Avoid an infinite loop.
-			return $font_dir;
-		}
-
-		$font_dir = array(
-			'path'    => untrailingslashit( $font_dir['basedir'] ) . '/fonts',
-			'url'     => untrailingslashit( $font_dir['baseurl'] ) . '/fonts',
-			'subdir'  => '',
-			'basedir' => untrailingslashit( $font_dir['basedir'] ) . '/fonts',
-			'baseurl' => untrailingslashit( $font_dir['baseurl'] ) . '/fonts',
-			'error'   => false,
-		);
-
-		/**
-		 * Filters the fonts directory data.
-		 *
-		 * This filter allows developers to modify the fonts directory data.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param array $font_dir {
-		 *     Array of information about the font upload directory.
-		 *
-		 *     @type string       $path    Base directory and subdirectory or full path to the fonts upload directory.
-		 *     @type string       $url     Base URL and subdirectory or absolute URL to the fonts upload directory.
-		 *     @type string       $subdir  Subdirectory
-		 *     @type string       $basedir Path without subdir.
-		 *     @type string       $baseurl URL path without subdir.
-		 *     @type string|false $error   False or error message.
-		 * }
-		 */
-		return apply_filters( 'font_dir', $font_dir );
-	}
-}
-
-// @core-merge: Filters should go in `src/wp-includes/default-filters.php`,
-// functions in a general file for font library.
-if ( ! function_exists( '_wp_after_delete_font_family' ) ) {
-	/**
-	 * Deletes child font faces when a font family is deleted.
-	 *
-	 * @access private
-	 * @since 6.5.0
-	 *
-	 * @param int     $post_id Post ID.
-	 * @param WP_Post $post    Post object.
-	 */
-	function _wp_after_delete_font_family( $post_id, $post ) {
-		if ( 'wp_font_family' !== $post->post_type ) {
-			return;
-		}
-
-		$font_faces = get_children(
-			array(
-				'post_parent' => $post_id,
-				'post_type'   => 'wp_font_face',
-			)
-		);
-
-		foreach ( $font_faces as $font_face ) {
-			wp_delete_post( $font_face->ID, true );
-		}
-	}
-	add_action( 'deleted_post', '_wp_after_delete_font_family', 10, 2 );
-}
-
-if ( ! function_exists( '_wp_before_delete_font_face' ) ) {
-	/**
-	 * Deletes associated font files when a font face is deleted.
-	 *
-	 * @access private
-	 * @since 6.5.0
-	 *
-	 * @param int     $post_id Post ID.
-	 * @param WP_Post $post    Post object.
-	 */
-	function _wp_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 );
-		$font_dir   = untrailingslashit( wp_get_font_dir()['basedir'] );
-
-		foreach ( $font_files as $font_file ) {
-			wp_delete_file( $font_dir . '/' . $font_file );
-		}
-	}
-	add_action( 'before_delete_post', '_wp_before_delete_font_face', 10, 2 );
-}
-
-// @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 );
-
-// @core-merge: Do not merge this back compat function, it is for supporting a legacy font family format only in Gutenberg.
-/**
- * Convert legacy font family posts to the new format.
- *
- * @return void
- */
-function gutenberg_convert_legacy_font_family_format() {
-	if ( get_option( 'gutenberg_font_family_format_converted' ) ) {
-		return;
-	}
-
-	$font_families = new WP_Query(
-		array(
-			'post_type'              => 'wp_font_family',
-			// Set a maximum, but in reality there will be far less than this.
-			'posts_per_page'         => 999,
-			'update_post_term_cache' => false,
-		)
-	);
-
-	foreach ( $font_families->get_posts() as $font_family ) {
-		$already_converted = get_post_meta( $font_family->ID, '_gutenberg_legacy_font_family', true );
-		if ( $already_converted ) {
-			continue;
-		}
-
-		// Stash the old font family content in a meta field just in case we need it.
-		update_post_meta( $font_family->ID, '_gutenberg_legacy_font_family', $font_family->post_content );
-
-		$font_family_json = json_decode( $font_family->post_content, true );
-		if ( ! $font_family_json ) {
-			continue;
-		}
-
-		$font_faces = isset( $font_family_json['fontFace'] ) ? $font_family_json['fontFace'] : array();
-		unset( $font_family_json['fontFace'] );
-
-		// Save wp_font_face posts within the family.
-		foreach ( $font_faces as $font_face ) {
-			$args                 = array();
-			$args['post_type']    = 'wp_font_face';
-			$args['post_title']   = WP_Font_Utils::get_font_face_slug( $font_face );
-			$args['post_name']    = sanitize_title( $args['post_title'] );
-			$args['post_status']  = 'publish';
-			$args['post_parent']  = $font_family->ID;
-			$args['post_content'] = wp_json_encode( $font_face );
-
-			$font_face_id = wp_insert_post( wp_slash( $args ) );
-
-			$file_urls = (array) ( isset( $font_face['src'] ) ? $font_face['src'] : array() );
-
-			foreach ( $file_urls as $file_url ) {
-				// continue if the file is not local.
-				if ( false === strpos( $file_url, site_url() ) ) {
-					continue;
-				}
-
-				$relative_path = basename( $file_url );
-				update_post_meta( $font_face_id, '_wp_font_face_file', $relative_path );
-			}
-		}
-
-		// Update the font family post to remove the font face data.
-		$args               = array();
-		$args['ID']         = $font_family->ID;
-		$args['post_title'] = isset( $font_family_json['name'] ) ? $font_family_json['name'] : '';
-		$args['post_name']  = sanitize_title( $font_family_json['slug'] );
-
-		unset( $font_family_json['name'] );
-		unset( $font_family_json['slug'] );
-
-		$args['post_content'] = wp_json_encode( $font_family_json );
-
-		wp_update_post( wp_slash( $args ) );
-	}
-
-	update_option( 'gutenberg_font_family_format_converted', true );
-}
-add_action( 'init', 'gutenberg_convert_legacy_font_family_format' );
diff --git a/lib/compat/wordpress-6.5/html-api/class-gutenberg-html-attribute-token-6-5.php b/lib/compat/wordpress-6.5/html-api/class-gutenberg-html-attribute-token-6-5.php
deleted file mode 100644
index 70359ea339d66..0000000000000
--- a/lib/compat/wordpress-6.5/html-api/class-gutenberg-html-attribute-token-6-5.php
+++ /dev/null
@@ -1,116 +0,0 @@
-<?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_5 {
-	/**
-	 * 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.5/html-api/class-gutenberg-html-open-elements-6-5.php b/lib/compat/wordpress-6.5/html-api/class-gutenberg-html-open-elements-6-5.php
deleted file mode 100644
index 0d8901225c792..0000000000000
--- a/lib/compat/wordpress-6.5/html-api/class-gutenberg-html-open-elements-6-5.php
+++ /dev/null
@@ -1,462 +0,0 @@
-<?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_5 {
-	/**
-	 * 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;
-
-	/**
-	 * 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( $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 open elements.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @return int How many node are in the stack of open elements.
-	 */
-	public function count() {
-		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() {
-		$current_node = end( $this->stack );
-
-		return $current_node ? $current_node : null;
-	}
-
-	/**
-	 * Returns whether an element is in a specific scope.
-	 *
-	 * ## HTML Support
-	 *
-	 * This function skips checking for the termination list because there
-	 * are no supported elements which appear in the termination list.
-	 *
-	 * @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( $tag_name, $termination_list ) {
-		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( $tag_name ) {
-		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( $tag_name ) {
-		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( $tag_name ) {
-		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( $tag_name ) {
-		throw new WP_HTML_Unsupported_Exception( '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.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#has-an-element-in-select-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_select_scope( $tag_name ) {
-		throw new WP_HTML_Unsupported_Exception( 'Cannot process elements depending on select scope.' );
-
-		return false; // The linter requires this unreachable code until the function is implemented and can return.
-	}
-
-	/**
-	 * 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() {
-		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() {
-		$item = array_pop( $this->stack );
-
-		if ( null === $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( $tag_name ) {
-		foreach ( $this->walk_up() as $item ) {
-			$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( $stack_item ) {
-		$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( $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 );
-			$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 $above_this_node Start traversing above this node, if provided and if the node exists.
-	 */
-	public function walk_up( $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( $item ) {
-		/*
-		 * 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;
-		}
-	}
-
-	/**
-	 * 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( $item ) {
-		/*
-		 * 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;
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.5/html-api/class-gutenberg-html-processor-6-5.php b/lib/compat/wordpress-6.5/html-api/class-gutenberg-html-processor-6-5.php
deleted file mode 100644
index 02879b72ea9cb..0000000000000
--- a/lib/compat/wordpress-6.5/html-api/class-gutenberg-html-processor-6-5.php
+++ /dev/null
@@ -1,1929 +0,0 @@
-<?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, PROGRESS, SEARCH.
- *  - 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_5 extends Gutenberg_HTML_Tag_Processor_6_5 {
-	/**
-	 * 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 = null;
-
-	/**
-	 * 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;
-
-	/**
-	 * 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
-	 */
-	private $release_internal_bookmark_on_destruct = null;
-
-	/*
-	 * 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
-	 *
-	 * @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 WP_HTML_Processor|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;
-		}
-
-		$p                        = new self( $html, self::CONSTRUCTOR_UNLOCK_CODE );
-		$p->state->context_node   = array( 'BODY', array() );
-		$p->state->insertion_mode = WP_HTML_Processor_State::INSERTION_MODE_IN_BODY;
-
-		// @todo Create "fake" bookmarks for non-existent but implied nodes.
-		$p->bookmarks['root-node']    = new WP_HTML_Span( 0, 0 );
-		$p->bookmarks['context-node'] = new WP_HTML_Span( 0, 0 );
-
-		$p->state->stack_of_open_elements->push(
-			new WP_HTML_Token(
-				'root-node',
-				'HTML',
-				false
-			)
-		);
-
-		$p->state->stack_of_open_elements->push(
-			new WP_HTML_Token(
-				'context-node',
-				$p->state->context_node[0],
-				false
-			)
-		);
-
-		return $p;
-	}
-
-	/**
-	 * 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_5();
-
-		/*
-		 * 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 ( $name ) {
-			parent::release_bookmark( $name );
-		};
-	}
-
-	/**
-	 * 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() {
-		return $this->last_error;
-	}
-
-	/**
-	 * Finds the next tag matching the $query.
-	 *
-	 * @todo Support matching the class name and tag name.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @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 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 ) {
-		if ( null === $query ) {
-			while ( $this->step() ) {
-				if ( '#tag' !== $this->get_token_type() ) {
-					continue;
-				}
-
-				if ( ! $this->is_tag_closer() ) {
-					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;
-		}
-
-		if ( ! ( array_key_exists( 'breadcrumbs', $query ) && is_array( $query['breadcrumbs'] ) ) ) {
-			while ( $this->step() ) {
-				if ( '#tag' !== $this->get_token_type() ) {
-					continue;
-				}
-
-				if ( ! $this->is_tag_closer() ) {
-					return true;
-				}
-			}
-
-			return false;
-		}
-
-		if ( isset( $query['tag_closers'] ) && 'visit' === $query['tag_closers'] ) {
-			_doing_it_wrong(
-				__METHOD__,
-				__( 'Cannot visit tag closers in HTML Processor.' ),
-				'6.4.0'
-			);
-			return false;
-		}
-
-		$breadcrumbs  = $query['breadcrumbs'];
-		$match_offset = isset( $query['match_offset'] ) ? (int) $query['match_offset'] : 1;
-
-		while ( $match_offset > 0 && $this->step() ) {
-			if ( '#tag' !== $this->get_token_type() ) {
-				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() {
-		return $this->step();
-	}
-
-	/**
-	 * 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 ) {
-		// 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;
-		}
-
-		foreach ( $this->state->stack_of_open_elements->walk_up() as $node ) {
-			$crumb = strtoupper( current( $breadcrumbs ) );
-
-			if ( '*' !== $crumb && $node->node_name !== $crumb ) {
-				return false;
-			}
-
-			if ( false === prev( $breadcrumbs ) ) {
-				return true;
-			}
-		}
-
-		return false;
-	}
-
-	/**
-	 * 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 ) {
-		// 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 (
-				$top_node && (
-					// Void elements.
-					self::is_void( $top_node->node_name ) ||
-					// Comments, text nodes, and other atomic tokens.
-					'#' === $top_node->node_name[0] ||
-					// Doctype declarations.
-					'html' === $top_node->node_name
-				)
-			) {
-				$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 (
-			WP_HTML_Tag_Processor::STATE_INCOMPLETE_INPUT === $this->parser_state ||
-			WP_HTML_Tag_Processor::STATE_COMPLETE === $this->parser_state
-		) {
-			return false;
-		}
-
-		$this->state->current_token = new WP_HTML_Token(
-			$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 WP_HTML_Processor_State::INSERTION_MODE_IN_BODY:
-					return $this->step_in_body();
-
-				default:
-					$this->last_error = self::ERROR_UNSUPPORTED;
-					throw new WP_HTML_Unsupported_Exception( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-			}
-		} catch ( WP_HTML_Unsupported_Exception $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() {
-		$breadcrumbs = array();
-		foreach ( $this->state->stack_of_open_elements->walk_down() as $stack_item ) {
-			$breadcrumbs[] = $stack_item->node_name;
-		}
-
-		return $breadcrumbs;
-	}
-
-	/**
-	 * 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() {
-		$token_name = $this->get_token_name();
-		$token_type = $this->get_token_type();
-		$op_sigil   = '#tag' === $token_type ? ( $this->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()->node_name !== $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()->node_name !== $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 ( $node_name !== $this->state->stack_of_open_elements->current_node()->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 ( $token_name !== $this->state->stack_of_open_elements->current_node()->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( $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->last_error = self::ERROR_UNSUPPORTED;
-				throw new WP_HTML_Unsupported_Exception( 'Closing BR tags require unimplemented special handling.' );
-
-			/*
-			 * > 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;
-		}
-
-		/*
-		 * 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 'OPTGROUP':
-			case 'OPTION':
-			case 'PLAINTEXT':
-			case 'RB':
-			case 'RP':
-			case 'RT':
-			case 'RTC':
-			case 'SARCASM':
-			case 'SCRIPT':
-			case 'SELECT':
-			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->last_error = self::ERROR_UNSUPPORTED;
-				throw new WP_HTML_Unsupported_Exception( "Cannot process {$token_name} element." );
-		}
-
-		if ( ! $this->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;
-				}
-			}
-		}
-	}
-
-	/*
-	 * 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() {
-		if ( null !== $this->last_error ) {
-			return null;
-		}
-
-		$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;
-		}
-	}
-
-	/**
-	 * 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 ) {
-		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 ) {
-		// 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 = WP_HTML_Processor_State::INSERTION_MODE_IN_BODY;
-			$this->state->frameset_ok    = true;
-		}
-
-		// 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->step() ) {
-			if ( $bookmark_starts_at === $this->bookmarks[ $this->state->current_token->bookmark_name ]->start ) {
-				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 ) {
-		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 ) {
-		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() {
-		$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
-	 *
-	 * @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( $except_for_this_element = null ) {
-		$elements_with_implied_end_tags = array(
-			'DD',
-			'DT',
-			'LI',
-			'P',
-		);
-
-		$current_node = $this->state->stack_of_open_elements->current_node();
-		while (
-			$current_node && $current_node->node_name !== $except_for_this_element &&
-			in_array( $this->state->stack_of_open_elements->current_node(), $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
-	 *
-	 * @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() {
-		$elements_with_implied_end_tags = array(
-			'DD',
-			'DT',
-			'LI',
-			'P',
-		);
-
-		while ( in_array( $this->state->stack_of_open_elements->current_node(), $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() {
-		/*
-		 * > 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->last_error = self::ERROR_UNSUPPORTED;
-		throw new WP_HTML_Unsupported_Exception( 'Cannot reconstruct active formatting elements when advancing and rewinding is required.' );
-	}
-
-	/**
-	 * 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() {
-		$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->last_error = self::ERROR_UNSUPPORTED;
-				throw new WP_HTML_Unsupported_Exception( '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->last_error = self::ERROR_UNSUPPORTED;
-			throw new WP_HTML_Unsupported_Exception( 'Cannot extract common ancestor in adoption agency algorithm.' );
-		}
-
-		$this->last_error = self::ERROR_UNSUPPORTED;
-		throw new WP_HTML_Unsupported_Exception( '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( $token ) {
-		$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 ) {
-		$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 ) {
-		$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.5/html-api/class-gutenberg-html-processor-state-6-5.php b/lib/compat/wordpress-6.5/html-api/class-gutenberg-html-processor-state-6-5.php
deleted file mode 100644
index 890e19fb5da4d..0000000000000
--- a/lib/compat/wordpress-6.5/html-api/class-gutenberg-html-processor-state-6-5.php
+++ /dev/null
@@ -1,143 +0,0 @@
-<?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_5 {
-	/*
-	 * 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';
-
-	/**
-	 * 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';
-
-	/**
-	 * 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 = null;
-
-	/**
-	 * 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 = null;
-
-	/**
-	 * 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;
-
-	/**
-	 * 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_5();
-		$this->active_formatting_elements = new WP_HTML_Active_Formatting_Elements();
-	}
-}
diff --git a/lib/compat/wordpress-6.5/html-api/class-gutenberg-html-span-6-5.php b/lib/compat/wordpress-6.5/html-api/class-gutenberg-html-span-6-5.php
deleted file mode 100644
index ed596f1266ab5..0000000000000
--- a/lib/compat/wordpress-6.5/html-api/class-gutenberg-html-span-6-5.php
+++ /dev/null
@@ -1,56 +0,0 @@
-<?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_5 {
-	/**
-	 * 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( $start, $length ) {
-		$this->start  = $start;
-		$this->length = $length;
-	}
-}
diff --git a/lib/compat/wordpress-6.5/html-api/class-gutenberg-html-tag-processor-6-5.php b/lib/compat/wordpress-6.5/html-api/class-gutenberg-html-tag-processor-6-5.php
deleted file mode 100644
index 3bbcc5047a076..0000000000000
--- a/lib/compat/wordpress-6.5/html-api/class-gutenberg-html-tag-processor-6-5.php
+++ /dev/null
@@ -1,3555 +0,0 @@
-<?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.
- *  - Properly decode HTML character references in `get_attribute()`. PHP's
- *    `html_entity_decode()` is wrong in a couple ways: it doesn't account for the
- *    no-ambiguous-ampersand rule, and it improperly handles the way semicolons may
- *    or may not terminate a character reference.
- *
- * @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_5 {
-	/**
-	 * 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 ) {
-		$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() {
-		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() {
-		$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->token_length         = $tag_ends_at - $this->token_starts_at;
-		$this->bytes_already_parsed = $tag_ends_at + 1;
-
-		/*
-		 * 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 + 1;
-		$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() {
-		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 ) {
-		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 ) {
-		// 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_5( $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 ) {
-		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( $tag_name ) {
-		/*
-		 * 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( $tag_name ) {
-		$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() {
-		$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() {
-		$this->after_tag();
-
-		$html       = $this->html;
-		$doc_length = strlen( $html );
-		$was_at     = $this->bytes_already_parsed;
-		$at         = $was_at;
-
-		while ( false !== $at && $at < $doc_length ) {
-			$at = strpos( $html, '<', $at );
-
-			/*
-			 * This does not imply an incomplete parse; it indicates that there
-			 * can be nothing left in the document other than a #text node.
-			 */
-			if ( false === $at ) {
-				$this->parser_state         = self::STATE_TEXT_NODE;
-				$this->token_starts_at      = $was_at;
-				$this->token_length         = strlen( $html ) - $was_at;
-				$this->text_starts_at       = $was_at;
-				$this->text_length          = $this->token_length;
-				$this->bytes_already_parsed = strlen( $html );
-				return true;
-			}
-
-			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 ( strlen( $html ) > $at + 1 ) {
-					$next_character  = $html[ $at + 1 ];
-					$at_another_node = (
-						'!' === $next_character ||
-						'/' === $next_character ||
-						'?' === $next_character ||
-						( 'A' <= $next_character && $next_character <= 'Z' ) ||
-						( 'a' <= $next_character && $next_character <= 'z' )
-					);
-					if ( ! $at_another_node ) {
-						++$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 ( '!' === $html[ $at + 1 ] ) {
-				/*
-				 * `<!--` transitions to a comment state – apply further comment rules.
-				 * https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state
-				 */
-				if (
-					$doc_length > $at + 3 &&
-					'-' === $html[ $at + 2 ] &&
-					'-' === $html[ $at + 3 ]
-				) {
-					$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 ] ) {
-				$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 ( '?' === $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 + 3 );
-				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;
-		}
-
-		return false;
-	}
-
-	/**
-	 * 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() {
-		// Skip whitespace and slashes.
-		$this->bytes_already_parsed += strspn( $this->html, " \t\f\r\n/", $this->bytes_already_parsed );
-		if ( $this->bytes_already_parsed >= strlen( $this->html ) ) {
-			$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 >= strlen( $this->html ) ) {
-			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 >= strlen( $this->html ) ) {
-			$this->parser_state = self::STATE_INCOMPLETE_INPUT;
-
-			return false;
-		}
-
-		$this->skip_whitespace();
-		if ( $this->bytes_already_parsed >= strlen( $this->html ) ) {
-			$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 >= strlen( $this->html ) ) {
-				$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;
-					$value_length               = strcspn( $this->html, $quote, $value_start );
-					$attribute_end              = $value_start + $value_length + 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 >= strlen( $this->html ) ) {
-			$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 ( ! array_key_exists( $comparable_name, $this->attributes ) ) {
-			$this->attributes[ $comparable_name ] = new Gutenberg_HTML_Attribute_Token_6_5(
-				$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_5( $attribute_start, $attribute_end - $attribute_start );
-		if ( null === $this->duplicate_attributes ) {
-			$this->duplicate_attributes = array( $comparable_name => array( $duplicate_span ) );
-		} elseif ( ! array_key_exists( $comparable_name, $this->duplicate_attributes ) ) {
-			$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() {
-		$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() {
-		/*
-		 * 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 practially-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() {
-		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.
-			 */
-			$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( $shift_this_point = 0 ) {
-		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 ) {
-		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 ) {
-		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( $a, $b ) {
-		$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( $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 html_entity_decode( $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 html_entity_decode( $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 ) {
-		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() {
-		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() {
-		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 - 1 ];
-	}
-
-	/**
-	 * 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() {
-		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() {
-		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() {
-		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';
-		}
-	}
-
-	/**
-	 * 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() {
-		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() {
-		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 = html_entity_decode( $text, ENT_QUOTES | ENT_HTML5 | ENT_SUBSTITUTE );
-
-		/*
-		 * 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 ) {
-		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_5(
-				$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_5(
-				$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 ) {
-		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_5(
-			$this->attributes[ $name ]->start,
-			$this->attributes[ $name ]->length,
-			''
-		);
-
-		// Removes any duplicated attributes if they were also present.
-		if ( null !== $this->duplicate_attributes && array_key_exists( $name, $this->duplicate_attributes ) ) {
-			foreach ( $this->duplicate_attributes[ $name ] as $attribute_token ) {
-				$this->lexical_updates[] = new Gutenberg_HTML_Text_Replacement_6_5(
-					$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 ) {
-		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 ) {
-		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() {
-		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() {
-		$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;
-
-		/*
-		 * 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() {
-		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 ( 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;
-			}
-
-			/*
-			 * Check each character to determine if they are the same.
-			 * Defer calls to `strtoupper()` to avoid them when possible.
-			 * Calling `strcasecmp()` here tested slowed than comparing each
-			 * character, so unless benchmarks show otherwise, it should
-			 * not be used.
-			 *
-			 * It's expected that most of the time that this runs, a
-			 * lower-case tag name will be supplied and the input will
-			 * contain lower-case tag names, thus normally bypassing
-			 * the case comparison code.
-			 */
-			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;
-				}
-			}
-		}
-
-		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.5/html-api/class-gutenberg-html-text-replacement-6-5.php b/lib/compat/wordpress-6.5/html-api/class-gutenberg-html-text-replacement-6-5.php
deleted file mode 100644
index 6409255833c81..0000000000000
--- a/lib/compat/wordpress-6.5/html-api/class-gutenberg-html-text-replacement-6-5.php
+++ /dev/null
@@ -1,64 +0,0 @@
-<?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_5 {
-	/**
-	 * 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( $start, $length, $text ) {
-		$this->start  = $start;
-		$this->length = $length;
-		$this->text   = $text;
-	}
-}
diff --git a/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api-directives-processor.php b/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api-directives-processor.php
deleted file mode 100644
index ba18307002d15..0000000000000
--- a/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api-directives-processor.php
+++ /dev/null
@@ -1,246 +0,0 @@
-<?php
-/**
- * Interactivity API: WP_Interactivity_API_Directives_Processor class.
- *
- * @package WordPress
- * @subpackage Interactivity API
- * @since 6.5.0
- */
-
-if ( ! class_exists( 'WP_Interactivity_API_Directives_Processor' ) ) {
-	/**
-	 * Class used to iterate over the tags of an HTML string and help process the
-	 * directive attributes.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @access private
-	 */
-	final class WP_Interactivity_API_Directives_Processor extends Gutenberg_HTML_Tag_Processor_6_5 {
-		/**
-		 * List of tags whose closer tag is not visited by the WP_HTML_Tag_Processor.
-		 *
-		 * @since 6.5.0
-		 * @var string[]
-		 */
-		const TAGS_THAT_DONT_VISIT_CLOSER_TAG = array(
-			'SCRIPT',
-			'IFRAME',
-			'NOEMBED',
-			'NOFRAMES',
-			'STYLE',
-			'TEXTAREA',
-			'TITLE',
-			'XMP',
-		);
-
-		/**
-		 * Returns the content between two balanced template tags.
-		 *
-		 * It positions the cursor in the closer tag of the balanced template tag,
-		 * if it exists.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @access private
-		 *
-		 * @return string|null The content between the current opener template tag and its matching closer tag or null if it
-		 *                     doesn't find the matching closing tag or the current tag is not a template opener tag.
-		 */
-		public function get_content_between_balanced_template_tags() {
-			if ( 'TEMPLATE' !== $this->get_tag() ) {
-				return null;
-			}
-
-			$positions = $this->get_after_opener_tag_and_before_closer_tag_positions();
-			if ( ! $positions ) {
-				return null;
-			}
-			list( $after_opener_tag, $before_closer_tag ) = $positions;
-
-			return substr( $this->html, $after_opener_tag, $before_closer_tag - $after_opener_tag );
-		}
-
-		/**
-		 * Sets the content between two balanced tags.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @access private
-		 *
-		 * @param string $new_content The string to replace the content between the matching tags.
-		 * @return bool Whether the content was successfully replaced.
-		 */
-		public function set_content_between_balanced_tags( string $new_content ): bool {
-			$positions = $this->get_after_opener_tag_and_before_closer_tag_positions( true );
-			if ( ! $positions ) {
-				return false;
-			}
-			list( $after_opener_tag, $before_closer_tag ) = $positions;
-
-			$this->lexical_updates[] = new Gutenberg_HTML_Text_Replacement_6_5(
-				$after_opener_tag,
-				$before_closer_tag - $after_opener_tag,
-				esc_html( $new_content )
-			);
-
-			return true;
-		}
-
-		/**
-		 * Appends content after the closing tag of a template tag.
-		 *
-		 * It positions the cursor in the closer tag of the balanced template tag,
-		 * if it exists.
-		 *
-		 * @access private
-		 *
-		 * @param string $new_content The string to append after the closing template tag.
-		 * @return bool Whether the content was successfully appended.
-		 */
-		public function append_content_after_template_tag_closer( string $new_content ): bool {
-			if ( empty( $new_content ) || 'TEMPLATE' !== $this->get_tag() || ! $this->is_tag_closer() ) {
-				return false;
-			}
-
-			// Flushes any changes.
-			$this->get_updated_html();
-
-			$bookmark = 'append_content_after_template_tag_closer';
-			$this->set_bookmark( $bookmark );
-			$after_closing_tag = $this->bookmarks[ $bookmark ]->start + $this->bookmarks[ $bookmark ]->length + 1;
-			$this->release_bookmark( $bookmark );
-
-			// Appends the new content.
-			$this->lexical_updates[] = new Gutenberg_HTML_Text_Replacement_6_5( $after_closing_tag, 0, $new_content );
-
-			return true;
-		}
-
-		/**
-		 * Gets the positions right after the opener tag and right before the closer
-		 * tag in a balanced tag.
-		 *
-		 * By default, it positions the cursor in the closer tag of the balanced tag.
-		 * If $rewind is true, it seeks back to the opener tag.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @access private
-		 *
-		 * @param bool $rewind Optional. Whether to seek back to the opener tag after finding the positions. Defaults to false.
-		 * @return array|null Start and end byte position, or null when no balanced tag bookmarks.
-		 */
-		private function get_after_opener_tag_and_before_closer_tag_positions( bool $rewind = false ) {
-			// Flushes any changes.
-			$this->get_updated_html();
-
-			$bookmarks = $this->get_balanced_tag_bookmarks();
-			if ( ! $bookmarks ) {
-				return null;
-			}
-			list( $opener_tag, $closer_tag ) = $bookmarks;
-
-			$after_opener_tag  = $this->bookmarks[ $opener_tag ]->start + $this->bookmarks[ $opener_tag ]->length + 1;
-			$before_closer_tag = $this->bookmarks[ $closer_tag ]->start;
-
-			if ( $rewind ) {
-				$this->seek( $opener_tag );
-			}
-
-			$this->release_bookmark( $opener_tag );
-			$this->release_bookmark( $closer_tag );
-
-			return array( $after_opener_tag, $before_closer_tag );
-		}
-
-		/**
-		 * Returns a pair of bookmarks for the current opener tag and the matching
-		 * closer tag.
-		 *
-		 * It positions the cursor in the closer tag of the balanced tag, if it
-		 * exists.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @return array|null A pair of bookmarks, or null if there's no matching closing tag.
-		 */
-		private function get_balanced_tag_bookmarks() {
-			static $i   = 0;
-			$opener_tag = 'opener_tag_of_balanced_tag_' . ++$i;
-
-			$this->set_bookmark( $opener_tag );
-			if ( ! $this->next_balanced_tag_closer_tag() ) {
-				$this->release_bookmark( $opener_tag );
-				return null;
-			}
-
-			$closer_tag = 'closer_tag_of_balanced_tag_' . ++$i;
-			$this->set_bookmark( $closer_tag );
-
-			return array( $opener_tag, $closer_tag );
-		}
-
-		/**
-		 * Finds the matching closing tag for an opening tag.
-		 *
-		 * When called while the processor is on an open tag, it traverses the HTML
-		 * until it finds the matching closer tag, respecting any in-between content,
-		 * including nested tags of the same name. Returns false when called on a
-		 * closer tag, a tag that doesn't have a closer tag (void), a tag that
-		 * doesn't visit the closer tag, or if no matching closing tag was found.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @access private
-		 *
-		 * @return bool Whether a matching closing tag was found.
-		 */
-		public function next_balanced_tag_closer_tag(): bool {
-			$depth    = 0;
-			$tag_name = $this->get_tag();
-
-			if ( ! $this->has_and_visits_its_closer_tag() ) {
-				return false;
-			}
-
-			while ( $this->next_tag(
-				array(
-					'tag_name'    => $tag_name,
-					'tag_closers' => 'visit',
-				)
-			) ) {
-				if ( ! $this->is_tag_closer() ) {
-					++$depth;
-					continue;
-				}
-
-				if ( 0 === $depth ) {
-					return true;
-				}
-
-				--$depth;
-			}
-
-			return false;
-		}
-
-		/**
-		 * Checks whether the current tag has and will visit its matching closer tag.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @access private
-		 *
-		 * @return bool Whether the current tag has a closer tag.
-		 */
-		public function has_and_visits_its_closer_tag(): bool {
-			$tag_name = $this->get_tag();
-
-			return null !== $tag_name && (
-			! Gutenberg_HTML_Processor_6_5::is_void( $tag_name ) &&
-			! in_array( $tag_name, self::TAGS_THAT_DONT_VISIT_CLOSER_TAG, true )
-			);
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api.php b/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api.php
deleted file mode 100644
index d0661d7585726..0000000000000
--- a/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api.php
+++ /dev/null
@@ -1,992 +0,0 @@
-<?php
-/**
- * Interactivity API: WP_Interactivity_API class.
- *
- * @package WordPress
- * @subpackage Interactivity API
- * @since 6.5.0
- */
-
-if ( ! class_exists( 'WP_Interactivity_API' ) ) {
-	/**
-	 * Class used to process the Interactivity API on the server.
-	 *
-	 * @since 6.5.0
-	 */
-	final class WP_Interactivity_API {
-		/**
-		 * Holds the mapping of directive attribute names to their processor methods.
-		 *
-		 * @since 6.5.0
-		 * @var array
-		 */
-		private static $directive_processors = array(
-			'data-wp-interactive'   => 'data_wp_interactive_processor',
-			'data-wp-router-region' => 'data_wp_router_region_processor',
-			'data-wp-context'       => 'data_wp_context_processor',
-			'data-wp-bind'          => 'data_wp_bind_processor',
-			'data-wp-class'         => 'data_wp_class_processor',
-			'data-wp-style'         => 'data_wp_style_processor',
-			'data-wp-text'          => 'data_wp_text_processor',
-			/*
-			 * `data-wp-each` needs to be processed in the last place because it moves
-			 * the cursor to the end of the processed items to prevent them to be
-			 * processed twice.
-			 */
-			'data-wp-each'          => 'data_wp_each_processor',
-		);
-
-		/**
-		 * Holds the initial state of the different Interactivity API stores.
-		 *
-		 * This state is used during the server directive processing. Then, it is
-		 * serialized and sent to the client as part of the interactivity data to be
-		 * recovered during the hydration of the client interactivity stores.
-		 *
-		 * @since 6.5.0
-		 * @var array
-		 */
-		private $state_data = array();
-
-		/**
-		 * Holds the configuration required by the different Interactivity API stores.
-		 *
-		 * This configuration is serialized and sent to the client as part of the
-		 * interactivity data and can be accessed by the client interactivity stores.
-		 *
-		 * @since 6.5.0
-		 * @var array
-		 */
-		private $config_data = array();
-
-		/**
-		 * Flag that indicates whether the `data-wp-router-region` directive has
-		 * been found in the HTML and processed.
-		 *
-		 * The value is saved in a private property of the WP_Interactivity_API
-		 * instance instead of using a static variable inside the processor
-		 * function, which would hold the same value for all instances
-		 * independently of whether they have processed any
-		 * `data-wp-router-region` directive or not.
-		 *
-		 * @since 6.5.0
-		 * @var bool
-		 */
-		private $has_processed_router_region = false;
-
-		/**
-		 * Gets and/or sets the initial state of an Interactivity API store for a
-		 * given namespace.
-		 *
-		 * If state for that store namespace already exists, it merges the new
-		 * provided state with the existing one.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $store_namespace The unique store namespace identifier.
-		 * @param array  $state           Optional. The array that will be merged with the existing state for the specified
-		 *                                store namespace.
-		 * @return array The current state for the specified store namespace. This will be the updated state if a $state
-		 *               argument was provided.
-		 */
-		public function state( string $store_namespace, array $state = array() ): array {
-			if ( ! isset( $this->state_data[ $store_namespace ] ) ) {
-				$this->state_data[ $store_namespace ] = array();
-			}
-			if ( is_array( $state ) ) {
-				$this->state_data[ $store_namespace ] = array_replace_recursive(
-					$this->state_data[ $store_namespace ],
-					$state
-				);
-			}
-			return $this->state_data[ $store_namespace ];
-		}
-
-		/**
-		 * Gets and/or sets the configuration of the Interactivity API for a given
-		 * store namespace.
-		 *
-		 * If configuration for that store namespace exists, it merges the new
-		 * provided configuration with the existing one.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $store_namespace The unique store namespace identifier.
-		 * @param array  $config          Optional. The array that will be merged with the existing configuration for the
-		 *                                specified store namespace.
-		 * @return array The configuration for the specified store namespace. This will be the updated configuration if a
-		 *               $config argument was provided.
-		 */
-		public function config( string $store_namespace, array $config = array() ): array {
-			if ( ! isset( $this->config_data[ $store_namespace ] ) ) {
-				$this->config_data[ $store_namespace ] = array();
-			}
-			if ( is_array( $config ) ) {
-				$this->config_data[ $store_namespace ] = array_replace_recursive(
-					$this->config_data[ $store_namespace ],
-					$config
-				);
-			}
-			return $this->config_data[ $store_namespace ];
-		}
-
-		/**
-		 * Prints the serialized client-side interactivity data.
-		 *
-		 * Encodes the config and initial state into JSON and prints them inside a
-		 * script tag of type "application/json". Once in the browser, the state will
-		 * be parsed and used to hydrate the client-side interactivity stores and the
-		 * configuration will be available using a `getConfig` utility.
-		 *
-		 * @since 6.5.0
-		 */
-		public function print_client_interactivity_data() {
-			if ( empty( $this->state_data ) && empty( $this->config_data ) ) {
-				return;
-			}
-
-			$interactivity_data = array();
-
-			$config = array();
-			foreach ( $this->config_data as $key => $value ) {
-				if ( ! empty( $value ) ) {
-					$config[ $key ] = $value;
-				}
-			}
-			if ( ! empty( $config ) ) {
-				$interactivity_data['config'] = $config;
-			}
-
-			$state = array();
-			foreach ( $this->state_data as $key => $value ) {
-				if ( ! empty( $value ) ) {
-					$state[ $key ] = $value;
-				}
-			}
-			if ( ! empty( $state ) ) {
-				$interactivity_data['state'] = $state;
-			}
-
-			if ( ! empty( $interactivity_data ) ) {
-				wp_print_inline_script_tag(
-					wp_json_encode(
-						$interactivity_data,
-						JSON_HEX_TAG | JSON_HEX_AMP
-					),
-					array(
-						'type' => 'application/json',
-						'id'   => 'wp-interactivity-data',
-					)
-				);
-			}
-		}
-
-		/**
-		 * Registers the `@wordpress/interactivity` script modules.
-		 *
-		 * @since 6.5.0
-		 */
-		public function register_script_modules() {
-			$suffix = wp_scripts_get_suffix();
-
-			wp_register_script_module(
-				'@wordpress/interactivity',
-				includes_url( "js/dist/interactivity$suffix.js" )
-			);
-
-			wp_register_script_module(
-				'@wordpress/interactivity-router',
-				includes_url( "js/dist/interactivity-router$suffix.js" ),
-				array( '@wordpress/interactivity' )
-			);
-		}
-
-		/**
-		 * Adds the necessary hooks for the Interactivity API.
-		 *
-		 * @since 6.5.0
-		 */
-		public function add_hooks() {
-			add_action( 'wp_enqueue_scripts', array( $this, 'register_script_modules' ) );
-			add_action( 'wp_footer', array( $this, 'print_client_interactivity_data' ) );
-		}
-
-		/**
-		 * Processes the interactivity directives contained within the HTML content
-		 * and updates the markup accordingly.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $html The HTML content to process.
-		 * @return string The processed HTML content. It returns the original content when the HTML contains unbalanced tags.
-		 */
-		public function process_directives( string $html ): string {
-			if ( ! str_contains( $html, 'data-wp-' ) ) {
-				return $html;
-			}
-			$context_stack   = array();
-			$namespace_stack = array();
-			$result          = $this->process_directives_args( $html, $context_stack, $namespace_stack );
-			return null === $result ? $html : $result;
-		}
-
-		/**
-		 * Processes the interactivity directives contained within the HTML content
-		 * and updates the markup accordingly.
-		 *
-		 * It needs the context and namespace stacks to be passed by reference, and
-		 * it returns null if the HTML contains unbalanced tags.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $html            The HTML content to process.
-		 * @param array  $context_stack   The reference to the array used to keep track of contexts during processing.
-		 * @param array  $namespace_stack The reference to the array used to manage namespaces during processing.
-		 * @return string|null The processed HTML content. It returns null when the HTML contains unbalanced tags.
-		 */
-		private function process_directives_args( string $html, array &$context_stack, array &$namespace_stack ) {
-			$p          = new WP_Interactivity_API_Directives_Processor( $html );
-			$tag_stack  = array();
-			$unbalanced = false;
-
-			$directive_processor_prefixes          = array_keys( self::$directive_processors );
-			$directive_processor_prefixes_reversed = array_reverse( $directive_processor_prefixes );
-
-			while ( $p->next_tag( array( 'tag_closers' => 'visit' ) ) ) {
-				$tag_name = $p->get_tag();
-
-				if ( 'SVG' === $tag_name || 'MATH' === $tag_name ) {
-					$unbalanced = true;
-					break;
-				}
-
-				if ( $p->is_tag_closer() ) {
-					list( $opening_tag_name, $directives_prefixes ) = end( $tag_stack );
-
-					if ( 0 === count( $tag_stack ) || $opening_tag_name !== $tag_name ) {
-
-						/*
-						 * If the tag stack is empty or the matching opening tag is not the
-						 * same than the closing tag, it means the HTML is unbalanced and it
-						 * stops processing it.
-						 */
-						$unbalanced = true;
-						break;
-					} else {
-						// Remove the last tag from the stack.
-						array_pop( $tag_stack );
-					}
-				} else {
-					if ( 0 !== count( $p->get_attribute_names_with_prefix( 'data-wp-each-child' ) ) ) {
-						/*
-						 * If the tag has a `data-wp-each-child` directive, jump to its closer
-						 * tag because those tags have already been processed.
-						 */
-						$p->next_balanced_tag_closer_tag();
-						continue;
-					} else {
-						$directives_prefixes = array();
-
-						// Checks if there is a server directive processor registered for each directive.
-						foreach ( $p->get_attribute_names_with_prefix( 'data-wp-' ) as $attribute_name ) {
-							list( $directive_prefix ) = $this->extract_prefix_and_suffix( $attribute_name );
-							if ( array_key_exists( $directive_prefix, self::$directive_processors ) ) {
-								$directives_prefixes[] = $directive_prefix;
-							}
-						}
-
-						/*
-						 * If this tag will visit its closer tag, it adds it to the tag stack
-						 * so it can process its closing tag and check for unbalanced tags.
-						 */
-						if ( $p->has_and_visits_its_closer_tag() ) {
-							$tag_stack[] = array( $tag_name, $directives_prefixes );
-						}
-					}
-				}
-				/*
-				 * If the matching opener tag didn't have any directives, it can skip the
-				 * processing.
-				 */
-				if ( 0 === count( $directives_prefixes ) ) {
-					continue;
-				}
-
-				// Directive processing might be different depending on if it is entering the tag or exiting it.
-				$modes = array(
-					'enter' => ! $p->is_tag_closer(),
-					'exit'  => $p->is_tag_closer() || ! $p->has_and_visits_its_closer_tag(),
-				);
-				foreach ( $modes as $mode => $should_run ) {
-					if ( ! $should_run ) {
-						continue;
-					}
-
-					/*
-					 * Sorts the attributes by the order of the `directives_processor` array
-					 * and checks what directives are present in this element.
-					 */
-					$existing_directives_prefixes = array_intersect(
-						'enter' === $mode ? $directive_processor_prefixes : $directive_processor_prefixes_reversed,
-						$directives_prefixes
-					);
-					foreach ( $existing_directives_prefixes as $directive_prefix ) {
-						$func = is_array( self::$directive_processors[ $directive_prefix ] )
-							? self::$directive_processors[ $directive_prefix ]
-							: array( $this, self::$directive_processors[ $directive_prefix ] );
-
-						call_user_func_array(
-							$func,
-							array( $p, $mode, &$context_stack, &$namespace_stack, &$tag_stack )
-						);
-					}
-				}
-			}
-
-			/*
-			 * It returns null if the HTML is unbalanced because unbalanced HTML is
-			 * not safe to process. In that case, the Interactivity API runtime will
-			 * update the HTML on the client side during the hydration.
-			 */
-			return $unbalanced || 0 < count( $tag_stack ) ? null : $p->get_updated_html();
-		}
-
-		/**
-		 * Evaluates the reference path passed to a directive based on the current
-		 * store namespace, state and context.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string|true $directive_value   The directive attribute value string or `true` when it's a boolean attribute.
-		 * @param string      $default_namespace The default namespace to use if none is explicitly defined in the directive
-		 *                                       value.
-		 * @param array|false $context           The current context for evaluating the directive or false if there is no
-		 *                                       context.
-		 * @return mixed|null The result of the evaluation. Null if the reference path doesn't exist.
-		 */
-		private function evaluate( $directive_value, string $default_namespace, $context = false ) {
-			list( $ns, $path ) = $this->extract_directive_value( $directive_value, $default_namespace );
-			if ( empty( $path ) ) {
-				return null;
-			}
-
-			$store = array(
-				'state'   => $this->state_data[ $ns ] ?? array(),
-				'context' => $context[ $ns ] ?? array(),
-			);
-
-			// Checks if the reference path is preceded by a negation operator (!).
-			$should_negate_value = '!' === $path[0];
-			$path                = $should_negate_value ? substr( $path, 1 ) : $path;
-
-			// Extracts the value from the store using the reference path.
-			$path_segments = explode( '.', $path );
-			$current       = $store;
-			foreach ( $path_segments as $path_segment ) {
-				if ( isset( $current[ $path_segment ] ) ) {
-					$current = $current[ $path_segment ];
-				} else {
-					return null;
-				}
-			}
-
-			// Returns the opposite if it contains a negation operator (!).
-			return $should_negate_value ? ! $current : $current;
-		}
-
-		/**
-		 * Extracts the directive attribute name to separate and return the directive
-		 * prefix and an optional suffix.
-		 *
-		 * The suffix is the string after the first double hyphen and the prefix is
-		 * everything that comes before the suffix.
-		 *
-		 * Example:
-		 *
-		 *     extract_prefix_and_suffix( 'data-wp-interactive' )   => array( 'data-wp-interactive', null )
-		 *     extract_prefix_and_suffix( 'data-wp-bind--src' )     => array( 'data-wp-bind', 'src' )
-		 *     extract_prefix_and_suffix( 'data-wp-foo--and--bar' ) => array( 'data-wp-foo', 'and--bar' )
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string $directive_name The directive attribute name.
-		 * @return array An array containing the directive prefix and optional suffix.
-		 */
-		private function extract_prefix_and_suffix( string $directive_name ): array {
-			return explode( '--', $directive_name, 2 );
-		}
-
-		/**
-		 * Parses and extracts the namespace and reference path from the given
-		 * directive attribute value.
-		 *
-		 * If the value doesn't contain an explicit namespace, it returns the
-		 * default one. If the value contains a JSON object instead of a reference
-		 * path, the function tries to parse it and return the resulting array. If
-		 * the value contains strings that represent booleans ("true" and "false"),
-		 * numbers ("1" and "1.2") or "null", the function also transform them to
-		 * regular booleans, numbers and `null`.
-		 *
-		 * Example:
-		 *
-		 *     extract_directive_value( 'actions.foo', 'myPlugin' )                      => array( 'myPlugin', 'actions.foo' )
-		 *     extract_directive_value( 'otherPlugin::actions.foo', 'myPlugin' )         => array( 'otherPlugin', 'actions.foo' )
-		 *     extract_directive_value( '{ "isOpen": false }', 'myPlugin' )              => array( 'myPlugin', array( 'isOpen' => false ) )
-		 *     extract_directive_value( 'otherPlugin::{ "isOpen": false }', 'myPlugin' ) => array( 'otherPlugin', array( 'isOpen' => false ) )
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param string|true $directive_value   The directive attribute value. It can be `true` when it's a boolean
-		 *                                       attribute.
-		 * @param string|null $default_namespace Optional. The default namespace if none is explicitly defined.
-		 * @return array An array containing the namespace in the first item and the JSON, the reference path, or null on the
-		 *               second item.
-		 */
-		private function extract_directive_value( $directive_value, $default_namespace = null ): array {
-			if ( empty( $directive_value ) || is_bool( $directive_value ) ) {
-				return array( $default_namespace, null );
-			}
-
-			// Replaces the value and namespace if there is a namespace in the value.
-			if ( 1 === preg_match( '/^([\w\-_\/]+)::./', $directive_value ) ) {
-				list($default_namespace, $directive_value) = explode( '::', $directive_value, 2 );
-			}
-
-			/*
-			 * Tries to decode the value as a JSON object. If it fails and the value
-			 * isn't `null`, it returns the value as it is. Otherwise, it returns the
-			 * decoded JSON or null for the string `null`.
-			 */
-			$decoded_json = json_decode( $directive_value, true );
-			if ( null !== $decoded_json || 'null' === $directive_value ) {
-				$directive_value = $decoded_json;
-			}
-
-			return array( $default_namespace, $directive_value );
-		}
-
-		/**
-		 * Transforms a kebab-case string to camelCase.
-		 *
-		 * @param string $str The kebab-case string to transform to camelCase.
-		 * @return string The transformed camelCase string.
-		 */
-		private function kebab_to_camel_case( string $str ): string {
-			return lcfirst(
-				preg_replace_callback(
-					'/(-)([a-z])/',
-					function ( $matches ) {
-						return strtoupper( $matches[2] );
-					},
-					strtolower( rtrim( $str, '-' ) )
-				)
-			);
-		}
-
-		/**
-		 * Processes the `data-wp-interactive` directive.
-		 *
-		 * It adds the default store namespace defined in the directive value to the
-		 * stack so that it's available for the nested interactivity elements.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param WP_Interactivity_API_Directives_Processor $p               The directives processor instance.
-		 * @param string                                    $mode            Whether the processing is entering or exiting the tag.
-		 * @param array                                     $context_stack   The reference to the context stack.
-		 * @param array                                     $namespace_stack The reference to the store namespace stack.
-		 */
-		private function data_wp_interactive_processor( WP_Interactivity_API_Directives_Processor $p, string $mode, array &$context_stack, array &$namespace_stack ) {
-			// When exiting tags, it removes the last namespace from the stack.
-			if ( 'exit' === $mode ) {
-				array_pop( $namespace_stack );
-				return;
-			}
-
-			// Tries to decode the `data-wp-interactive` attribute value.
-			$attribute_value = $p->get_attribute( 'data-wp-interactive' );
-
-			/*
-			 * Pushes the newly defined namespace or the current one if the
-			 * `data-wp-interactive` definition was invalid or does not contain a
-			 * namespace. It does so because the function pops out the current namespace
-			 * from the stack whenever it finds a `data-wp-interactive`'s closing tag,
-			 * independently of whether the previous `data-wp-interactive` definition
-			 * contained a valid namespace.
-			 */
-			$new_namespace = null;
-			if ( is_string( $attribute_value ) && ! empty( $attribute_value ) ) {
-				$decoded_json = json_decode( $attribute_value, true );
-				if ( is_array( $decoded_json ) ) {
-					$new_namespace = $decoded_json['namespace'] ?? null;
-				} else {
-					$new_namespace = $attribute_value;
-				}
-			}
-			$namespace_stack[] = ( $new_namespace && 1 === preg_match( '/^([\w\-_\/]+)/', $new_namespace ) )
-			? $new_namespace
-			: end( $namespace_stack );
-		}
-
-		/**
-		 * Processes the `data-wp-context` directive.
-		 *
-		 * It adds the context defined in the directive value to the stack so that
-		 * it's available for the nested interactivity elements.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param WP_Interactivity_API_Directives_Processor $p               The directives processor instance.
-		 * @param string                                    $mode            Whether the processing is entering or exiting the tag.
-		 * @param array                                     $context_stack   The reference to the context stack.
-		 * @param array                                     $namespace_stack The reference to the store namespace stack.
-		 */
-		private function data_wp_context_processor( WP_Interactivity_API_Directives_Processor $p, string $mode, array &$context_stack, array &$namespace_stack ) {
-			// When exiting tags, it removes the last context from the stack.
-			if ( 'exit' === $mode ) {
-				array_pop( $context_stack );
-				return;
-			}
-
-			$attribute_value = $p->get_attribute( 'data-wp-context' );
-			$namespace_value = end( $namespace_stack );
-
-			// Separates the namespace from the context JSON object.
-			list( $namespace_value, $decoded_json ) = is_string( $attribute_value ) && ! empty( $attribute_value )
-			? $this->extract_directive_value( $attribute_value, $namespace_value )
-			: array( $namespace_value, null );
-
-			/*
-			 * If there is a namespace, it adds a new context to the stack merging the
-			 * previous context with the new one.
-			 */
-			if ( is_string( $namespace_value ) ) {
-				$context_stack[] = array_replace_recursive(
-					end( $context_stack ) !== false ? end( $context_stack ) : array(),
-					array( $namespace_value => is_array( $decoded_json ) ? $decoded_json : array() )
-				);
-			} else {
-				/*
-				 * If there is no namespace, it pushes the current context to the stack.
-				 * It needs to do so because the function pops out the current context
-				 * from the stack whenever it finds a `data-wp-context`'s closing tag.
-				 */
-				$context_stack[] = end( $context_stack );
-			}
-		}
-
-		/**
-		 * Processes the `data-wp-bind` directive.
-		 *
-		 * It updates or removes the bound attributes based on the evaluation of its
-		 * associated reference.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param WP_Interactivity_API_Directives_Processor $p               The directives processor instance.
-		 * @param string                                    $mode            Whether the processing is entering or exiting the tag.
-		 * @param array                                     $context_stack   The reference to the context stack.
-		 * @param array                                     $namespace_stack The reference to the store namespace stack.
-		 */
-		private function data_wp_bind_processor( WP_Interactivity_API_Directives_Processor $p, string $mode, array &$context_stack, array &$namespace_stack ) {
-			if ( 'enter' === $mode ) {
-				$all_bind_directives = $p->get_attribute_names_with_prefix( 'data-wp-bind--' );
-
-				foreach ( $all_bind_directives as $attribute_name ) {
-					list( , $bound_attribute ) = $this->extract_prefix_and_suffix( $attribute_name );
-					if ( empty( $bound_attribute ) ) {
-						return;
-					}
-
-					$attribute_value = $p->get_attribute( $attribute_name );
-					$result          = $this->evaluate( $attribute_value, end( $namespace_stack ), end( $context_stack ) );
-
-					if ( null !== $result && (
-						false !== $result ||
-						( strlen( $bound_attribute ) > 5 && '-' === $bound_attribute[4] )
-					) ) {
-						/*
-						 * If the result of the evaluation is a boolean and the attribute is
-						 * `aria-` or `data-, convert it to a string "true" or "false". It
-						 * follows the exact same logic as Preact because it needs to
-						 * replicate what Preact will later do in the client:
-						 * https://github.com/preactjs/preact/blob/ea49f7a0f9d1ff2c98c0bdd66aa0cbc583055246/src/diff/props.js#L131C24-L136
-						 */
-						if (
-							is_bool( $result ) &&
-							( strlen( $bound_attribute ) > 5 && '-' === $bound_attribute[4] )
-						) {
-							$result = $result ? 'true' : 'false';
-						}
-						$p->set_attribute( $bound_attribute, $result );
-					} else {
-						$p->remove_attribute( $bound_attribute );
-					}
-				}
-			}
-		}
-
-		/**
-		 * Processes the `data-wp-class` directive.
-		 *
-		 * It adds or removes CSS classes in the current HTML element based on the
-		 * evaluation of its associated references.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param WP_Interactivity_API_Directives_Processor $p               The directives processor instance.
-		 * @param string                                    $mode            Whether the processing is entering or exiting the tag.
-		 * @param array                                     $context_stack   The reference to the context stack.
-		 * @param array                                     $namespace_stack The reference to the store namespace stack.
-		 */
-		private function data_wp_class_processor( WP_Interactivity_API_Directives_Processor $p, string $mode, array &$context_stack, array &$namespace_stack ) {
-			if ( 'enter' === $mode ) {
-				$all_class_directives = $p->get_attribute_names_with_prefix( 'data-wp-class--' );
-
-				foreach ( $all_class_directives as $attribute_name ) {
-					list( , $class_name ) = $this->extract_prefix_and_suffix( $attribute_name );
-					if ( empty( $class_name ) ) {
-						return;
-					}
-
-					$attribute_value = $p->get_attribute( $attribute_name );
-					$result          = $this->evaluate( $attribute_value, end( $namespace_stack ), end( $context_stack ) );
-
-					if ( $result ) {
-						$p->add_class( $class_name );
-					} else {
-						$p->remove_class( $class_name );
-					}
-				}
-			}
-		}
-
-		/**
-		 * Processes the `data-wp-style` directive.
-		 *
-		 * It updates the style attribute value of the current HTML element based on
-		 * the evaluation of its associated references.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param WP_Interactivity_API_Directives_Processor $p               The directives processor instance.
-		 * @param string                                    $mode            Whether the processing is entering or exiting the tag.
-		 * @param array                                     $context_stack   The reference to the context stack.
-		 * @param array                                     $namespace_stack The reference to the store namespace stack.
-		 */
-		private function data_wp_style_processor( WP_Interactivity_API_Directives_Processor $p, string $mode, array &$context_stack, array &$namespace_stack ) {
-			if ( 'enter' === $mode ) {
-				$all_style_attributes = $p->get_attribute_names_with_prefix( 'data-wp-style--' );
-
-				foreach ( $all_style_attributes as $attribute_name ) {
-					list( , $style_property ) = $this->extract_prefix_and_suffix( $attribute_name );
-					if ( empty( $style_property ) ) {
-						continue;
-					}
-
-					$directive_attribute_value = $p->get_attribute( $attribute_name );
-					$style_property_value      = $this->evaluate( $directive_attribute_value, end( $namespace_stack ), end( $context_stack ) );
-					$style_attribute_value     = $p->get_attribute( 'style' );
-					$style_attribute_value     = ( $style_attribute_value && ! is_bool( $style_attribute_value ) ) ? $style_attribute_value : '';
-
-					/*
-					 * Checks first if the style property is not falsy and the style
-					 * attribute value is not empty because if it is, it doesn't need to
-					 * update the attribute value.
-					 */
-					if ( $style_property_value || $style_attribute_value ) {
-						$style_attribute_value = $this->merge_style_property( $style_attribute_value, $style_property, $style_property_value );
-						/*
-						 * If the style attribute value is not empty, it sets it. Otherwise,
-						 * it removes it.
-						 */
-						if ( ! empty( $style_attribute_value ) ) {
-							$p->set_attribute( 'style', $style_attribute_value );
-						} else {
-							$p->remove_attribute( 'style' );
-						}
-					}
-				}
-			}
-		}
-
-		/**
-		 * Merges an individual style property in the `style` attribute of an HTML
-		 * element, updating or removing the property when necessary.
-		 *
-		 * If a property is modified, the old one is removed and the new one is added
-		 * at the end of the list.
-		 *
-		 * @since 6.5.0
-		 *
-		 * Example:
-		 *
-		 *     merge_style_property( 'color:green;', 'color', 'red' )      => 'color:red;'
-		 *     merge_style_property( 'background:green;', 'color', 'red' ) => 'background:green;color:red;'
-		 *     merge_style_property( 'color:green;', 'color', null )       => ''
-		 *
-		 * @param string            $style_attribute_value The current style attribute value.
-		 * @param string            $style_property_name   The style property name to set.
-		 * @param string|false|null $style_property_value  The value to set for the style property. With false, null or an
-		 *                                                 empty string, it removes the style property.
-		 * @return string The new style attribute value after the specified property has been added, updated or removed.
-		 */
-		private function merge_style_property( string $style_attribute_value, string $style_property_name, $style_property_value ): string {
-			$style_assignments    = explode( ';', $style_attribute_value );
-			$result               = array();
-			$style_property_value = ! empty( $style_property_value ) ? rtrim( trim( $style_property_value ), ';' ) : null;
-			$new_style_property   = $style_property_value ? $style_property_name . ':' . $style_property_value . ';' : '';
-
-			// Generates an array with all the properties but the modified one.
-			foreach ( $style_assignments as $style_assignment ) {
-				if ( empty( trim( $style_assignment ) ) ) {
-					continue;
-				}
-				list( $name, $value ) = explode( ':', $style_assignment );
-				if ( trim( $name ) !== $style_property_name ) {
-					$result[] = trim( $name ) . ':' . trim( $value ) . ';';
-				}
-			}
-
-			// Adds the new/modified property at the end of the list.
-			$result[] = $new_style_property;
-
-			return implode( '', $result );
-		}
-
-		/**
-		 * Processes the `data-wp-text` directive.
-		 *
-		 * It updates the inner content of the current HTML element based on the
-		 * evaluation of its associated reference.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param WP_Interactivity_API_Directives_Processor $p               The directives processor instance.
-		 * @param string                                    $mode            Whether the processing is entering or exiting the tag.
-		 * @param array                                     $context_stack   The reference to the context stack.
-		 * @param array                                     $namespace_stack The reference to the store namespace stack.
-		 */
-		private function data_wp_text_processor( WP_Interactivity_API_Directives_Processor $p, string $mode, array &$context_stack, array &$namespace_stack ) {
-			if ( 'enter' === $mode ) {
-				$attribute_value = $p->get_attribute( 'data-wp-text' );
-				$result          = $this->evaluate( $attribute_value, end( $namespace_stack ), end( $context_stack ) );
-
-				/*
-				 * Follows the same logic as Preact in the client and only changes the
-				 * content if the value is a string or a number. Otherwise, it removes the
-				 * content.
-				 */
-				if ( is_string( $result ) || is_numeric( $result ) ) {
-					$p->set_content_between_balanced_tags( esc_html( $result ) );
-				} else {
-					$p->set_content_between_balanced_tags( '' );
-				}
-			}
-		}
-
-		/**
-		 * Returns the CSS styles for animating the top loading bar in the router.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @return string The CSS styles for the router's top loading bar animation.
-		 */
-		private function get_router_animation_styles(): string {
-			return <<<CSS
-			.wp-interactivity-router-loading-bar {
-				position: fixed;
-				top: 0;
-				left: 0;
-				margin: 0;
-				padding: 0;
-				width: 100vw;
-				max-width: 100vw !important;
-				height: 4px;
-				background-color: #000;
-				opacity: 0
-			}
-			.wp-interactivity-router-loading-bar.start-animation {
-				animation: wp-interactivity-router-loading-bar-start-animation 30s cubic-bezier(0.03, 0.5, 0, 1) forwards
-			}
-			.wp-interactivity-router-loading-bar.finish-animation {
-				animation: wp-interactivity-router-loading-bar-finish-animation 300ms ease-in
-			}
-			@keyframes wp-interactivity-router-loading-bar-start-animation {
-				0% { transform: scaleX(0); transform-origin: 0 0; opacity: 1 }
-				100% { transform: scaleX(1); transform-origin: 0 0; opacity: 1 }
-			}
-			@keyframes wp-interactivity-router-loading-bar-finish-animation {
-				0% { opacity: 1 }
-				50% { opacity: 1 }
-				100% { opacity: 0 }
-			}
-CSS;
-		}
-
-		/**
-		 * Outputs the markup for the top loading indicator and the screen reader
-		 * notifications during client-side navigations.
-		 *
-		 * This method prints a div element representing a loading bar visible during
-		 * navigation, as well as an aria-live region that can be read by screen
-		 * readers to announce navigation status.
-		 *
-		 * @since 6.5.0
-		 */
-		public function print_router_loading_and_screen_reader_markup() {
-			echo <<<HTML
-			<div
-				class="wp-interactivity-router-loading-bar"
-				data-wp-interactive="core/router"
-				data-wp-class--start-animation="state.navigation.hasStarted"
-				data-wp-class--finish-animation="state.navigation.hasFinished"
-			></div>
-			<div
-				class="screen-reader-text"
-				aria-live="polite"
-				data-wp-interactive="core/router"
-				data-wp-text="state.navigation.message"
-			></div>
-HTML;
-		}
-
-		/**
-		 * Processes the `data-wp-router-region` directive.
-		 *
-		 * It renders in the footer a set of HTML elements to notify users about
-		 * client-side navigations. More concretely, the elements added are 1) a
-		 * top loading bar to visually inform that a navigation is in progress
-		 * and 2) an `aria-live` region for accessible navigation announcements.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param WP_Interactivity_API_Directives_Processor $p               The directives processor instance.
-		 * @param string                                    $mode            Whether the processing is entering or exiting the tag.
-		 */
-		private function data_wp_router_region_processor( WP_Interactivity_API_Directives_Processor $p, string $mode ) {
-			if ( 'enter' === $mode && ! $this->has_processed_router_region ) {
-				$this->has_processed_router_region = true;
-
-				// Initialize the `core/router` store.
-				$this->state(
-					'core/router',
-					array(
-						'navigation' => array(
-							'texts' => array(
-								'loading' => __( 'Loading page, please wait.' ),
-								'loaded'  => __( 'Page Loaded.' ),
-							),
-						),
-					)
-				);
-
-				// Enqueues as an inline style.
-				wp_register_style( 'wp-interactivity-router-animations', false );
-				wp_add_inline_style( 'wp-interactivity-router-animations', $this->get_router_animation_styles() );
-				wp_enqueue_style( 'wp-interactivity-router-animations' );
-
-				// Adds the necessary markup to the footer.
-				add_action( 'wp_footer', array( $this, 'print_router_loading_and_screen_reader_markup' ) );
-			}
-		}
-
-		/**
-		 * Processes the `data-wp-each` directive.
-		 *
-		 * This directive gets an array passed as reference and iterates over it
-		 * generating new content for each item based on the inner markup of the
-		 * `template` tag.
-		 *
-		 * @since 6.5.0
-		 *
-		 * @param WP_Interactivity_API_Directives_Processor $p               The directives processor instance.
-		 * @param string                                    $mode            Whether the processing is entering or exiting the tag.
-		 * @param array                                     $context_stack   The reference to the context stack.
-		 * @param array                                     $namespace_stack The reference to the store namespace stack.
-		 * @param array                                     $tag_stack       The reference to the tag stack.
-		 */
-		private function data_wp_each_processor( WP_Interactivity_API_Directives_Processor $p, string $mode, array &$context_stack, array &$namespace_stack, array &$tag_stack ) {
-			if ( 'enter' === $mode && 'TEMPLATE' === $p->get_tag() ) {
-				$attribute_name   = $p->get_attribute_names_with_prefix( 'data-wp-each' )[0];
-				$extracted_suffix = $this->extract_prefix_and_suffix( $attribute_name );
-				$item_name        = isset( $extracted_suffix[1] ) ? $this->kebab_to_camel_case( $extracted_suffix[1] ) : 'item';
-				$attribute_value  = $p->get_attribute( $attribute_name );
-				$result           = $this->evaluate( $attribute_value, end( $namespace_stack ), end( $context_stack ) );
-
-				// Gets the content between the template tags and leaves the cursor in the closer tag.
-				$inner_content = $p->get_content_between_balanced_template_tags();
-
-				// Checks if there is a manual server-side directive processing.
-				$template_end = 'data-wp-each: template end';
-				$p->set_bookmark( $template_end );
-				$p->next_tag();
-				$manual_sdp = $p->get_attribute( 'data-wp-each-child' );
-				$p->seek( $template_end ); // Rewinds to the template closer tag.
-				$p->release_bookmark( $template_end );
-
-				/*
-				 * It doesn't process in these situations:
-				 * - Manual server-side directive processing.
-				 * - Empty or non-array values.
-				 * - Associative arrays because those are deserialized as objects in JS.
-				 * - Templates that contain top-level texts because those texts can't be
-				 *   identified and removed in the client.
-				 */
-				if (
-				$manual_sdp ||
-				empty( $result ) ||
-				! is_array( $result ) ||
-				! array_is_list( $result ) ||
-				! str_starts_with( trim( $inner_content ), '<' ) ||
-				! str_ends_with( trim( $inner_content ), '>' )
-				) {
-					array_pop( $tag_stack );
-					return;
-				}
-
-				// Extracts the namespace from the directive attribute value.
-				$namespace_value         = end( $namespace_stack );
-				list( $namespace_value ) = is_string( $attribute_value ) && ! empty( $attribute_value )
-				? $this->extract_directive_value( $attribute_value, $namespace_value )
-				: array( $namespace_value, null );
-
-				// Processes the inner content for each item of the array.
-				$processed_content = '';
-				foreach ( $result as $item ) {
-					// Creates a new context that includes the current item of the array.
-					$context_stack[] = array_replace_recursive(
-						end( $context_stack ) !== false ? end( $context_stack ) : array(),
-						array( $namespace_value => array( $item_name => $item ) )
-					);
-
-					// Processes the inner content with the new context.
-					$processed_item = $this->process_directives_args( $inner_content, $context_stack, $namespace_stack );
-
-					if ( null === $processed_item ) {
-						// If the HTML is unbalanced, stop processing it.
-						array_pop( $context_stack );
-						return;
-					}
-
-					// Adds the `data-wp-each-child` to each top-level tag.
-					$i = new WP_Interactivity_API_Directives_Processor( $processed_item );
-					while ( $i->next_tag() ) {
-						$i->set_attribute( 'data-wp-each-child', true );
-						$i->next_balanced_tag_closer_tag();
-					}
-					$processed_content .= $i->get_updated_html();
-
-					// Removes the current context from the stack.
-					array_pop( $context_stack );
-				}
-
-				// Appends the processed content after the tag closer of the template.
-				$p->append_content_after_template_tag_closer( $processed_content );
-
-				// Pops the last tag because it skipped the closing tag of the template tag.
-				array_pop( $tag_stack );
-			}
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.5/interactivity-api/interactivity-api.php b/lib/compat/wordpress-6.5/interactivity-api/interactivity-api.php
deleted file mode 100644
index 20e4365a48b6a..0000000000000
--- a/lib/compat/wordpress-6.5/interactivity-api/interactivity-api.php
+++ /dev/null
@@ -1,205 +0,0 @@
-<?php
-/**
- * Interactivity API: Functions and hooks
- *
- * @package WordPress
- * @subpackage Interactivity API
- * @since 6.5.0
- */
-
-if ( ! function_exists( 'wp_interactivity_process_directives_of_interactive_blocks' ) ) {
-	/**
-	 * Processes the directives on the rendered HTML of the interactive blocks.
-	 *
-	 * This processes only one root interactive block at a time because the
-	 * rendered HTML of that block contains the rendered HTML of all its inner
-	 * blocks, including any interactive block. It does so by ignoring all the
-	 * interactive inner blocks until the root interactive block is processed.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @param array $parsed_block The parsed block.
-	 * @return array The same parsed block.
-	 */
-	function wp_interactivity_process_directives_of_interactive_blocks( array $parsed_block ): array {
-		static $root_interactive_block = null;
-
-		/*
-		 * Checks whether a root interactive block is already annotated for
-		 * processing, and if it is, it ignores the subsequent ones.
-		 */
-		if ( null === $root_interactive_block ) {
-			$block_name = $parsed_block['blockName'];
-			$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_name );
-
-			if (
-			isset( $block_name ) &&
-			( ( isset( $block_type->supports['interactivity'] ) && true === $block_type->supports['interactivity'] ) ||
-			( isset( $block_type->supports['interactivity']['interactive'] ) && true === $block_type->supports['interactivity']['interactive'] ) )
-			) {
-				// Annotates the root interactive block for processing.
-				$root_interactive_block = array( $block_name, $parsed_block );
-
-				/*
-				 * Adds a filter to process the root interactive block once it has
-				 * finished rendering.
-				 */
-				$process_interactive_blocks = static function ( string $content, array $parsed_block ) use ( &$root_interactive_block, &$process_interactive_blocks ): string {
-					// Checks whether the current block is the root interactive block.
-					list($root_block_name, $root_parsed_block) = $root_interactive_block;
-					if ( $root_block_name === $parsed_block['blockName'] && $parsed_block === $root_parsed_block ) {
-						// The root interactive blocks has finished rendering, process it.
-						$content = wp_interactivity_process_directives( $content );
-						// Removes the filter and reset the root interactive block.
-						remove_filter( 'render_block_' . $parsed_block['blockName'], $process_interactive_blocks );
-						$root_interactive_block = null;
-					}
-					return $content;
-				};
-
-				/*
-				 * Uses a priority of 100 to ensure that other filters can add additional
-				 * directives before the processing starts.
-				 */
-				add_filter( 'render_block_' . $block_name, $process_interactive_blocks, 100, 2 );
-			}
-		}
-
-		return $parsed_block;
-	}
-	/*
-	 * Uses a priority of 100 to ensure that other filters can edit $parsed_block
-	 * without crashing the SSR.
-	 */
-	add_filter( 'render_block_data', 'wp_interactivity_process_directives_of_interactive_blocks', 100 );
-}
-
-if ( ! function_exists( 'wp_interactivity' ) ) {
-	/**
-	 * Retrieves the main WP_Interactivity_API instance.
-	 *
-	 * It provides access to the WP_Interactivity_API instance, creating one if it
-	 * doesn't exist yet.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @global WP_Interactivity_API $wp_interactivity
-	 *
-	 * @return WP_Interactivity_API The main WP_Interactivity_API instance.
-	 */
-	function wp_interactivity(): WP_Interactivity_API {
-		global $wp_interactivity;
-		if ( ! ( $wp_interactivity instanceof WP_Interactivity_API ) ) {
-			$wp_interactivity = new WP_Interactivity_API();
-		}
-		return $wp_interactivity;
-	}
-
-	wp_interactivity()->add_hooks();
-}
-
-if ( ! function_exists( 'wp_interactivity_process_directives' ) ) {
-	/**
-	 * Processes the interactivity directives contained within the HTML content
-	 * and updates the markup accordingly.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @param string $html The HTML content to process.
-	 * @return string The processed HTML content. It returns the original content when the HTML contains unbalanced tags.
-	 */
-	function wp_interactivity_process_directives( string $html ): string {
-		return wp_interactivity()->process_directives( $html );
-	}
-}
-
-if ( ! function_exists( 'wp_interactivity_state' ) ) {
-	/**
-	 * Gets and/or sets the initial state of an Interactivity API store for a
-	 * given namespace.
-	 *
-	 * If state for that store namespace already exists, it merges the new
-	 * provided state with the existing one.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @param string $store_namespace The unique store namespace identifier.
-	 * @param array  $state           Optional. The array that will be merged with the existing state for the specified
-	 *                                store namespace.
-	 * @return array The state for the specified store namespace. This will be the updated state if a $state argument was
-	 *               provided.
-	 */
-	function wp_interactivity_state( string $store_namespace, array $state = array() ): array {
-		return wp_interactivity()->state( $store_namespace, $state );
-	}
-}
-
-if ( ! function_exists( 'wp_interactivity_config' ) ) {
-	/**
-	 * Gets and/or sets the configuration of the Interactivity API for a given
-	 * store namespace.
-	 *
-	 * If configuration for that store namespace exists, it merges the new
-	 * provided configuration with the existing one.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @param string $store_namespace The unique store namespace identifier.
-	 * @param array  $config          Optional. The array that will be merged with the existing configuration for the
-	 *                                specified store namespace.
-	 * @return array The configuration for the specified store namespace. This will be the updated configuration if a
-	 *               $config argument was provided.
-	 */
-	function wp_interactivity_config( string $store_namespace, array $config = array() ): array {
-		return wp_interactivity()->config( $store_namespace, $config );
-	}
-}
-
-if ( ! function_exists( 'wp_interactivity_data_wp_context' ) ) {
-	/**
-	 * Generates a `data-wp-context` directive attribute by encoding a context
-	 * array.
-	 *
-	 * This helper function simplifies the creation of `data-wp-context` directives
-	 * by providing a way to pass an array of data, which encodes into a JSON string
-	 * safe for direct use as a HTML attribute value.
-	 *
-	 * Example:
-	 *
-	 *     <div <?php echo wp_interactivity_data_wp_context( array( 'isOpen' => true, 'count' => 0 ) ); ?>>
-	 *
-	 * @since 6.5.0
-	 *
-	 * @param array  $context         The array of context data to encode.
-	 * @param string $store_namespace Optional. The unique store namespace identifier.
-	 * @return string A complete `data-wp-context` directive with a JSON encoded value representing the context array and
-	 *                the store namespace if specified.
-	 */
-	function wp_interactivity_data_wp_context( array $context, string $store_namespace = '' ): string {
-		return 'data-wp-context=\'' .
-		( $store_namespace ? $store_namespace . '::' : '' ) .
-		( empty( $context ) ? '{}' : wp_json_encode( $context, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP ) ) .
-		'\'';
-	}
-}
-
-if ( ! function_exists( 'data_wp_context' ) ) {
-	/**
-	 * `data_wp_context()` was renamed to follow WordPress Core naming schemes.
-	 *
-	 * @link https://github.com/WordPress/gutenberg/pull/59465/
-	 * @link https://core.trac.wordpress.org/ticket/60575
-	 *
-	 * @since 6.5.0
-	 * @deprecated 6.5.0
-	 *
-	 * @param array  $context         The array of context data to encode.
-	 * @param string $store_namespace Optional. The unique store namespace identifier.
-	 * @return string A complete `data-wp-context` directive with a JSON encoded value representing the context array and
-	 *                the store namespace if specified.
-	 */
-	function data_wp_context( array $context, string $store_namespace = '' ): string {
-		_deprecated_function( __FUNCTION__, '6.5', 'wp_interactivity_data_wp_context()' );
-		return wp_interactivity_data_wp_context( $context, $store_namespace );
-	}
-}
diff --git a/lib/compat/wordpress-6.5/kses.php b/lib/compat/wordpress-6.5/kses.php
deleted file mode 100644
index 038d78645786f..0000000000000
--- a/lib/compat/wordpress-6.5/kses.php
+++ /dev/null
@@ -1,18 +0,0 @@
-<?php
-/**
- * Temporary compatibility shims for block APIs present in Gutenberg.
- *
- * @package gutenberg
- */
-
-/**
- * Update allowed inline style attributes list.
- *
- * @param string[] $attrs Array of allowed CSS attributes.
- * @return string[] CSS attributes.
- */
-function gutenberg_safe_style_attrs_6_5( $attrs ) {
-	$attrs[] = 'background-repeat';
-	return $attrs;
-}
-add_filter( 'safe_style_css', 'gutenberg_safe_style_attrs_6_5' );
diff --git a/lib/compat/wordpress-6.5/navigation-block-variations.php b/lib/compat/wordpress-6.5/navigation-block-variations.php
deleted file mode 100644
index 4009eb39386ae..0000000000000
--- a/lib/compat/wordpress-6.5/navigation-block-variations.php
+++ /dev/null
@@ -1,143 +0,0 @@
-<?php
-
-/**
- * Workaround for Core versions < 6.5 to register navigation link variations on registration
- *
- * @param array $args The block type arguments.
- * @return array The updated block type arguments.
- */
-function gutenberg_navigation_link_variations_compat( $args ) {
-
-	if ( 'core/navigation-link' !== $args['name'] || ! empty( $args['variation_callback'] ) ) {
-		return $args;
-	}
-	$args['variation_callback'] = 'gutenberg_block_core_navigation_link_build_variations';
-	return $args;
-}
-
-if ( ! method_exists( 'WP_Block_Type', 'get_variations' ) ) {
-	add_filter( 'register_block_type_args', 'gutenberg_navigation_link_variations_compat', 9 );
-}
-
-/**
- * Registers custom post type variations for navigation link on post type registration
- * Handles all post types registered after the block is registered in register_navigation_link_post_type_variations
- *
- * @since 6.5.0
- * @deprecated 6.5.0 Use WP_Block_Type::get_variations / get_block_type_variations filter instead.
- *
- * @param string       $post_type The post type name passed from registered_post_type action hook.
- * @param WP_Post_Type $post_type_object The post type object passed from registered_post_type.
- */
-function gutenberg_block_core_navigation_link_register_post_type_variation( $post_type, $post_type_object ) {
-	_deprecated_function( __FUNCTION__, '6.5.0', 'WP_Block_Type::get_variations' );
-	if ( $post_type_object->show_in_nav_menus ) {
-		$variation = build_variation_for_navigation_link( $post_type_object, 'post-type' );
-		gutenberg_block_core_navigation_link_register_variation( $variation );
-	}
-}
-
-/**
- * Registers a custom taxonomy variation for navigation link on taxonomy registration
- * Handles all taxonomies registered after the block is registered in register_navigation_link_post_type_variations
- *
- * @since 6.5.0
- * @deprecated 6.5.0 Use WP_Block_Type::get_variations / get_block_type_variations filter instead.
- *
- * @param string       $taxonomy Taxonomy slug.
- * @param array|string $object_type Object type or array of object types.
- * @param array        $args Array of taxonomy registration arguments.
- */
-function gutenberg_block_core_navigation_link_register_taxonomy_variation( $taxonomy, $object_type, $args ) {
-	_deprecated_function( __FUNCTION__, '6.5.0', 'WP_Block_Type::get_variations' );
-	if ( isset( $args['show_in_nav_menus'] ) && $args['show_in_nav_menus'] ) {
-		$variation = build_variation_for_navigation_link( (object) $args, 'post-type' );
-		gutenberg_block_core_navigation_link_register_variation( $variation );
-	}
-}
-
-/**
- * Unregisters a custom post type variation for navigation link on post type unregistration.
- *
- * @since 6.5.0
- * @deprecated 6.5.0 Use WP_Block_Type::get_variations / get_block_type_variations filter instead.
- *
- * @param string $post_type The post type name passed from unregistered_post_type action hook.
- */
-function gutenberg_block_core_navigation_link_unregister_post_type_variation( $post_type ) {
-	_deprecated_function( __FUNCTION__, '6.5.0', 'WP_Block_Type::get_variations' );
-	gutenberg_block_core_navigation_link_unregister_variation( $post_type );
-}
-
-/**
- * Unregisters a custom taxonomy variation for navigation link on taxonomy unregistration.
- *
- * @since 6.5.0
- * @deprecated 6.5.0 Use WP_Block_Type::get_variations / get_block_type_variations filter instead.
- *
- * @param string $taxonomy The taxonomy name passed from unregistered_taxonomy action hook.
- */
-function gutenberg_block_core_navigation_link_unregister_taxonomy_variation( $taxonomy ) {
-	_deprecated_function( __FUNCTION__, '6.5.0', 'WP_Block_Type::get_variations' );
-	gutenberg_block_core_navigation_link_unregister_variation( $taxonomy );
-}
-
-/**
- * Registers a variation for a post type / taxonomy for the navigation link block.
- *
- * @since 6.5.0
- * @deprecated 6.5.0 Use WP_Block_Type::get_variations / get_block_type_variations filter instead.
- *
- * @param array $variation Variation array from build_variation_for_navigation_link.
- */
-function gutenberg_block_core_navigation_link_register_variation( $variation ) {
-	_deprecated_function( __FUNCTION__, '6.5.0', 'WP_Block_Type::get_variations' );
-	/*
-	 * Directly set the variations on the registered block type
-	 * because there's no server side registration for variations (see #47170).
-	 */
-	$navigation_block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core/navigation-link' );
-	/*
-	 * If the block is not registered yet, bail early.
-	 * Variation will be registered in register_block_core_navigation_link then.
-	 */
-	if ( ! $navigation_block_type ) {
-		return;
-	}
-
-	$navigation_block_type->variations = array_merge(
-		$navigation_block_type->variations,
-		array( $variation )
-	);
-}
-
-/**
- * Unregisters a variation for a post type / taxonomy for the navigation link block.
- *
- * @since 6.5.0
- * @deprecated 6.5.0 Use WP_Block_Type::get_variations / get_block_type_variations filter instead.
- *
- * @param string $name Name of the post type / taxonomy (which was used as variation name).
- */
-function gutenberg_block_core_navigation_link_unregister_variation( $name ) {
-	_deprecated_function( __FUNCTION__, '6.5.0', 'WP_Block_Type::get_variations' );
-	/*
-	 * Directly get the variations from the registered block type
-	 * because there's no server side (un)registration for variations (see #47170).
-	 */
-	$navigation_block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core/navigation-link' );
-	// If the block is not registered (yet), there's no need to remove a variation.
-	if ( ! $navigation_block_type || empty( $navigation_block_type->variations ) ) {
-		return;
-	}
-	$variations = $navigation_block_type->variations;
-	// Search for the variation and remove it from the array.
-	foreach ( $variations as $i => $variation ) {
-		if ( $variation['name'] === $name ) {
-			unset( $variations[ $i ] );
-			break;
-		}
-	}
-	// Reindex array after removing one variation.
-	$navigation_block_type->variations = array_values( $variations );
-}
diff --git a/lib/compat/wordpress-6.5/rest-api.php b/lib/compat/wordpress-6.5/rest-api.php
deleted file mode 100644
index d18756844cc91..0000000000000
--- a/lib/compat/wordpress-6.5/rest-api.php
+++ /dev/null
@@ -1,136 +0,0 @@
-<?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.' );
-}
-
-/**
- * Registers additional fields for wp_template and wp_template_part rest api.
- *
- * @access private
- * @internal
- *
- * @param  array $template_object Template object.
- * @return string                 Original source of the template one of theme, plugin, site, or user.
- */
-function _gutenberg_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.
-		if ( $template_object['has_theme_file'] && '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';
-}
-
-/**
- * Registers additional fields for wp_template and wp_template_part rest api.
- *
- * @access private
- * @internal
- *
- * @param  array $template_object Template object.
- * @return string                 Human readable text for the author.
- */
-function _gutenberg_get_wp_templates_author_text_field( $template_object ) {
-	$original_source = _gutenberg_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':
-			$plugins = get_plugins();
-			$plugin  = $plugins[ plugin_basename( sanitize_text_field( $template_object['theme'] . '.php' ) ) ];
-			return empty( $plugin['Name'] ) ? $template_object['theme'] : $plugin['Name'];
-		case 'site':
-			return get_bloginfo( 'name' );
-		case 'user':
-			$author = get_user_by( 'id', $template_object['author'] );
-			if ( ! $author ) {
-				return __( 'Unknown author', 'gutenberg' );
-			}
-			return $author->get( 'display_name' );
-	}
-}
-
-/**
- * Registers additional fields for wp_template and wp_template_part rest api.
- *
- * @access private
- * @internal
- */
-function _gutenberg_register_wp_templates_additional_fields() {
-	register_rest_field(
-		array( 'wp_template', 'wp_template_part' ),
-		'author_text',
-		array(
-			'get_callback'    => '_gutenberg_get_wp_templates_author_text_field',
-			'update_callback' => null,
-			'schema'          => array(
-				'type'        => 'string',
-				'description' => __( 'Human readable text for the author.', 'gutenberg' ),
-				'readonly'    => true,
-				'context'     => array( 'view', 'edit', 'embed' ),
-			),
-		)
-	);
-
-	register_rest_field(
-		array( 'wp_template', 'wp_template_part' ),
-		'original_source',
-		array(
-			'get_callback'    => '_gutenberg_get_wp_templates_original_source_field',
-			'update_callback' => null,
-			'schema'          => array(
-				'description' => __( 'Where the template originally comes from e.g. \'theme\'', 'gutenberg' ),
-				'type'        => 'string',
-				'readonly'    => true,
-				'context'     => array( 'view', 'edit', 'embed' ),
-				'enum'        => array(
-					'theme',
-					'plugin',
-					'site',
-					'user',
-				),
-			),
-		)
-	);
-}
-
-add_action( 'rest_api_init', '_gutenberg_register_wp_templates_additional_fields' );
diff --git a/lib/compat/wordpress-6.5/script-loader.php b/lib/compat/wordpress-6.5/script-loader.php
deleted file mode 100644
index a77134d9182f9..0000000000000
--- a/lib/compat/wordpress-6.5/script-loader.php
+++ /dev/null
@@ -1,207 +0,0 @@
-<?php
-/**
- * Updates the script-loader.php file
- *
- * @package gutenberg
- */
-
-/**
- * Updates the registered inline script `wp-date` required for moment.js localization.
- * Changes to the inline script output should be synced with Core in the file
- * src/wp-includes/script-loader.php in `wp_default_packages_inline_scripts()`.
- *
- * @since 6.4.0 Added relative time date strings.
- * @since 6.5.0 Added timezone offset value.
- *
- * @global WP_Locale $wp_locale WordPress date and time locale object.
- *
- * @param WP_Scripts $scripts WP_Scripts object.
- */
-function gutenberg_update_wp_date_settings( $scripts ) {
-	if ( did_action( 'init' ) && $scripts->query( 'wp-date', 'registered' ) ) {
-		global $wp_locale;
-		// 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' );
-		}
-
-		$gmt_offset = get_option( 'gmt_offset', 0 );
-
-		$scripts->registered['wp-date']->extra['after'] = array(
-			false,
-			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' ),
-								/* translators: One second from or to a particular datetime, e.g., "a second ago" or "a second from now". */
-								's'      => __( 'a second', 'gutenberg' ),
-								/* translators: %d: Duration in seconds from or to a particular datetime, e.g., "4 seconds ago" or "4 seconds from now". */
-								'ss'     => __( '%d seconds', 'gutenberg' ),
-								/* translators: One minute from or to a particular datetime, e.g., "a minute ago" or "a minute from now". */
-								'm'      => __( 'a minute', 'gutenberg' ),
-								/* translators: %d: Duration in minutes from or to a particular datetime, e.g., "4 minutes ago" or "4 minutes from now". */
-								'mm'     => __( '%d minutes', 'gutenberg' ),
-								/* translators: One hour from or to a particular datetime, e.g., "an hour ago" or "an hour from now". */
-								'h'      => __( 'an hour', 'gutenberg' ),
-								/* translators: %d: Duration in hours from or to a particular datetime, e.g., "4 hours ago" or "4 hours from now". */
-								'hh'     => __( '%d hours', 'gutenberg' ),
-								/* translators: One day from or to a particular datetime, e.g., "a day ago" or "a day from now". */
-								'd'      => __( 'a day', 'gutenberg' ),
-								/* translators: %d: Duration in days from or to a particular datetime, e.g., "4 days ago" or "4 days from now". */
-								'dd'     => __( '%d days', 'gutenberg' ),
-								/* translators: One month from or to a particular datetime, e.g., "a month ago" or "a month from now". */
-								'M'      => __( 'a month', 'gutenberg' ),
-								/* translators: %d: Duration in months from or to a particular datetime, e.g., "4 months ago" or "4 months from now". */
-								'MM'     => __( '%d months', 'gutenberg' ),
-								/* translators: One year from or to a particular datetime, e.g., "a year ago" or "a year from now". */
-								'y'      => __( 'a year', 'gutenberg' ),
-								/* translators: %d: Duration in years from or to a particular datetime, e.g., "4 years ago" or "4 years from now". */
-								'yy'     => __( '%d years', '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', 'default' ) ),
-							/* translators: Date format, see https://www.php.net/manual/datetime.format.php */
-							'date'                => get_option( 'date_format', __( 'F j, Y', 'default' ) ),
-							/* translators: Date/Time format, see https://www.php.net/manual/datetime.format.php */
-							'datetime'            => __( 'F j, Y g:i a', 'default' ),
-							/* translators: Abbreviated date/time format, see https://www.php.net/manual/datetime.format.php */
-							'datetimeAbbreviated' => __( 'M j, Y g:i a', 'default' ),
-						),
-						'timezone' => array(
-							'offset'          => (float) $gmt_offset,
-							'offsetFormatted' => str_replace( array( '.25', '.5', '.75' ), array( ':15', ':30', ':45' ), (string) $gmt_offset ),
-							'string'          => $timezone_string,
-							'abbr'            => $timezone_abbr,
-						),
-					)
-				)
-			),
-		);
-	}
-}
-
-add_action( 'wp_default_scripts', 'gutenberg_update_wp_date_settings' );
-
-/**
- * Prints inline JavaScript wrapped in `<script>` tag.
- *
- * It is possible to inject attributes in the `<script>` tag via the  {@see 'wp_script_attributes'}  filter.
- * Automatically injects type attribute if needed.
- *
- * @since 5.7.0
- *
- * @param string $javascript Inline JavaScript code.
- * @param array  $attributes Optional. Key-value pairs representing `<script>` tag attributes.
- */
-function gutenberg_print_inline_script_tag( $javascript, $attributes = array() ) {
-	echo gutenberg_get_inline_script_tag( $javascript, $attributes );
-}
-
-
-/**
- * Wraps inline JavaScript in `<script>` tag.
- *
- * It is possible to inject attributes in the `<script>` tag via the  {@see 'wp_script_attributes'}  filter.
- * Automatically injects type attribute if needed.
- *
- * @since 5.7.0
- *
- * @param string $javascript Inline JavaScript code.
- * @param array  $attributes Optional. Key-value pairs representing `<script>` tag attributes.
- * @return string String containing inline JavaScript code wrapped around `<script>` tag.
- */
-function gutenberg_get_inline_script_tag( $data, $attributes = array() ) {
-	$is_html5 = current_theme_supports( 'html5', 'script' ) || is_admin();
-	if ( ! isset( $attributes['type'] ) && ! $is_html5 ) {
-		// Keep the type attribute as the first for legacy reasons (it has always been this way in core).
-		$attributes = array_merge(
-			array( 'type' => 'text/javascript' ),
-			$attributes
-		);
-	}
-
-	/*
-	 * XHTML extracts the contents of the SCRIPT element and then the XML parser
-	 * decodes character references and other syntax elements. This can lead to
-	 * misinterpretation of the script contents or invalid XHTML documents.
-	 *
-	 * Wrapping the contents in a CDATA section instructs the XML parser not to
-	 * transform the contents of the SCRIPT element before passing them to the
-	 * JavaScript engine.
-	 *
-	 * Example:
-	 *
-	 *     <script>console.log('&hellip;');</script>
-	 *
-	 *     In an HTML document this would print "&hellip;" to the console,
-	 *     but in an XHTML document it would print "…" to the console.
-	 *
-	 *     <script>console.log('An image is <img> in HTML');</script>
-	 *
-	 *     In an HTML document this would print "An image is <img> in HTML",
-	 *     but it's an invalid XHTML document because it interprets the `<img>`
-	 *     as an empty tag missing its closing `/`.
-	 *
-	 * @see https://www.w3.org/TR/xhtml1/#h-4.8
-	 */
-	if (
-		! $is_html5 &&
-		(
-			! isset( $attributes['type'] ) ||
-			'module' === $attributes['type'] ||
-			str_contains( $attributes['type'], 'javascript' ) ||
-			str_contains( $attributes['type'], 'ecmascript' ) ||
-			str_contains( $attributes['type'], 'jscript' ) ||
-			str_contains( $attributes['type'], 'livescript' )
-		)
-	) {
-		/*
-		 * If the string `]]>` exists within the JavaScript it would break
-		 * out of any wrapping CDATA section added here, so to start, it's
-		 * necessary to escape that sequence which requires splitting the
-		 * content into two CDATA sections wherever it's found.
-		 *
-		 * Note: it's only necessary to escape the closing `]]>` because
-		 * an additional `<![CDATA[` leaves the contents unchanged.
-		 */
-		$data = str_replace( ']]>', ']]]]><![CDATA[>', $data );
-
-		// Wrap the entire escaped script inside a CDATA section.
-		$data = sprintf( "/* <![CDATA[ */\n%s\n/* ]]> */", $data );
-	}
-
-	$data = "\n" . trim( $data, "\n\r " ) . "\n";
-
-	/**
-	 * Filters attributes to be added to a script tag.
-	 *
-	 * @since 5.7.0
-	 *
-	 * @param array  $attributes Key-value pairs representing `<script>` tag attributes.
-	 *                           Only the attribute name is added to the `<script>` tag for
-	 *                           entries with a boolean value, and that are true.
-	 * @param string $data       Inline data.
-	 */
-	$attributes = apply_filters( 'wp_inline_script_attributes', $attributes, $data );
-
-	return sprintf( "<script%s>%s</script>\n", wp_sanitize_script_attributes( $attributes ), $data );
-}
diff --git a/lib/compat/wordpress-6.5/scripts-modules.php b/lib/compat/wordpress-6.5/scripts-modules.php
deleted file mode 100644
index 110ef858eb8ce..0000000000000
--- a/lib/compat/wordpress-6.5/scripts-modules.php
+++ /dev/null
@@ -1,224 +0,0 @@
-<?php
-/**
- * Script Modules API: Script Module functions
- *
- * @since 6.5.0
- *
- * @package WordPress
- * @subpackage Script Modules
- */
-
-if ( ! function_exists( 'wp_script_modules' ) ) {
-	/**
-	 * Retrieves the main WP_Script_Modules instance.
-	 *
-	 * This function provides access to the WP_Script_Modules instance, creating one
-	 * if it doesn't exist yet.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @global WP_Script_Modules $wp_script_modules
-	 *
-	 * @return WP_Script_Modules The main WP_Script_Modules instance.
-	 */
-	function wp_script_modules(): WP_Script_Modules {
-		global $wp_script_modules;
-
-		if ( ! ( $wp_script_modules instanceof WP_Script_Modules ) ) {
-			$wp_script_modules = new WP_Script_Modules();
-		}
-		return $wp_script_modules;
-	}
-	wp_script_modules()->add_hooks();
-
-	/**
-	 * 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_modules( $settings, $metadata = null ) {
-		$module_fields = array(
-			'viewScriptModule' => '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_modules', 10, 2 );
-
-	/**
-	 * Enqueue modules associated with the block.
-	 *
-	 * @param string   $block_content  The block content.
-	 * @param array    $parsed_block   The full block, including name and attributes.
-	 * @param WP_Block $block_instance The block instance.
-	 */
-	function gutenberg_filter_render_block_enqueue_view_script_modules( $block_content, $parsed_block, $block_instance ) {
-		$block_type = $block_instance->block_type;
-
-		if ( ! empty( $block_type->view_script_module_ids ) ) {
-			foreach ( $block_type->view_script_module_ids as $module_id ) {
-				wp_enqueue_script_module( $module_id );
-			}
-		}
-
-		return $block_content;
-	}
-
-	add_filter( 'render_block', 'gutenberg_filter_render_block_enqueue_view_script_modules', 10, 3 );
-
-	/**
-	 * Registers a REST field for block types to provide view script 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_script_module_ids_rest_field() {
-		register_rest_field(
-			'block-type',
-			'view_script_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_script_module_ids_rest_field' );
-}
-
-if ( ! function_exists( 'wp_register_script_module' ) ) {
-	/**
-	 * Registers the script module if no script module with that script module
-	 * identifier has already been registered.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @param string            $id       The identifier of the script module. Should be unique. It will be used in the
-	 *                                    final import map.
-	 * @param string            $src      Optional. Full URL of the script module, or path of the script module relative
-	 *                                    to the WordPress root directory. If it is provided and the script module has
-	 *                                    not been registered yet, it will be registered.
-	 * @param array             $deps     {
-	 *                                        Optional. List of dependencies.
-	 *
-	 *                                        @type string|array $0... {
-	 *                                            An array of script module identifiers of the dependencies of this script
-	 *                                            module. The dependencies can be strings or arrays. If they are arrays,
-	 *                                            they need an `id` key with the script module identifier, and can contain
-	 *                                            an `import` key with either `static` or `dynamic`. By default,
-	 *                                            dependencies that don't contain an `import` key are considered static.
-	 *
-	 *                                            @type string $id     The script module identifier.
-	 *                                            @type string $import Optional. Import type. May be either `static` or
-	 *                                                                 `dynamic`. Defaults to `static`.
-	 *                                        }
-	 *                                    }
-	 * @param string|false|null $version  Optional. String specifying the script 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 wp_register_script_module( string $id, string $src, array $deps = array(), $version = false ) {
-		wp_script_modules()->register( $id, $src, $deps, $version );
-	}
-}
-
-if ( ! function_exists( 'wp_enqueue_script_module' ) ) {
-	/**
-	 * Marks the script module to be enqueued in the page.
-	 *
-	 * If a src is provided and the script module has not been registered yet, it
-	 * will be registered.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @param string            $id       The identifier of the script module. Should be unique. It will be used in the
-	 *                                    final import map.
-	 * @param string            $src      Optional. Full URL of the script module, or path of the script module relative
-	 *                                    to the WordPress root directory. If it is provided and the script module has
-	 *                                    not been registered yet, it will be registered.
-	 * @param array             $deps     {
-	 *                                        Optional. List of dependencies.
-	 *
-	 *                                        @type string|array $0... {
-	 *                                            An array of script module identifiers of the dependencies of this script
-	 *                                            module. The dependencies can be strings or arrays. If they are arrays,
-	 *                                            they need an `id` key with the script module identifier, and can contain
-	 *                                            an `import` key with either `static` or `dynamic`. By default,
-	 *                                            dependencies that don't contain an `import` key are considered static.
-	 *
-	 *                                            @type string $id     The script module identifier.
-	 *                                            @type string $import Optional. Import type. May be either `static` or
-	 *                                                                 `dynamic`. Defaults to `static`.
-	 *                                        }
-	 *                                    }
-	 * @param string|false|null $version  Optional. String specifying the script 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 wp_enqueue_script_module( string $id, string $src = '', array $deps = array(), $version = false ) {
-		wp_script_modules()->enqueue( $id, $src, $deps, $version );
-	}
-}
-
-if ( ! function_exists( 'wp_dequeue_script_module' ) ) {
-	/**
-	 * Unmarks the script module so it is no longer enqueued in the page.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @param string $id The identifier of the script module.
-	 */
-	function wp_dequeue_script_module( string $id ) {
-		wp_script_modules()->dequeue( $id );
-	}
-}
-
-if ( ! function_exists( 'wp_deregister_script_module' ) ) {
-	/**
-	 * Deregisters the script module.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @param string $id The identifier of the script module.
-	 */
-	function wp_deregister_script_module( string $id ) {
-		wp_script_modules()->deregister( $id );
-	}
-}
diff --git a/lib/compat/wordpress-6.6/class-gutenberg-rest-global-styles-revisions-controller-6-6.php b/lib/compat/wordpress-6.6/class-gutenberg-rest-global-styles-revisions-controller-6-6.php
index f725366c33cfb..3e5d4cdd68454 100644
--- a/lib/compat/wordpress-6.6/class-gutenberg-rest-global-styles-revisions-controller-6-6.php
+++ b/lib/compat/wordpress-6.6/class-gutenberg-rest-global-styles-revisions-controller-6-6.php
@@ -15,7 +15,7 @@
  *
  * @see WP_REST_Controller
  */
-class Gutenberg_REST_Global_Styles_Revisions_Controller_6_6 extends Gutenberg_REST_Global_Styles_Revisions_Controller_6_5 {
+class Gutenberg_REST_Global_Styles_Revisions_Controller_6_6 extends WP_REST_Global_Styles_Revisions_Controller {
 	/**
 	 * Prepares the revision for the REST response.
 	 *
diff --git a/lib/compat/wordpress-6.6/class-gutenberg-rest-templates-controller-6-6.php b/lib/compat/wordpress-6.6/class-gutenberg-rest-templates-controller-6-6.php
index e670afacea5b3..034187ca9a70a 100644
--- a/lib/compat/wordpress-6.6/class-gutenberg-rest-templates-controller-6-6.php
+++ b/lib/compat/wordpress-6.6/class-gutenberg-rest-templates-controller-6-6.php
@@ -12,7 +12,7 @@
  * `edit_theme_options` capability. In order to allow other roles to also view the templates,
  * we need to override the permissions check for the REST API endpoints.
  */
-class Gutenberg_REST_Templates_Controller_6_6 extends Gutenberg_REST_Templates_Controller_6_4 {
+class Gutenberg_REST_Templates_Controller_6_6 extends WP_REST_Templates_Controller {
 
 	/**
 	 * Checks if a given request has access to read templates.
diff --git a/lib/compat/wordpress-6.6/html-api/class-gutenberg-html-decoder-6-6.php b/lib/compat/wordpress-6.6/html-api/class-gutenberg-html-decoder-6-6.php
index 2999921be5225..d0b9f18bf5b29 100644
--- a/lib/compat/wordpress-6.6/html-api/class-gutenberg-html-decoder-6-6.php
+++ b/lib/compat/wordpress-6.6/html-api/class-gutenberg-html-decoder-6-6.php
@@ -196,6 +196,8 @@ public static function decode( $context, $text ) {
 	 *
 	 * @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).
diff --git a/lib/compat/wordpress-6.6/html-api/class-gutenberg-html-processor-6-6.php b/lib/compat/wordpress-6.6/html-api/class-gutenberg-html-processor-6-6.php
index 634aaab01707c..77801535ff368 100644
--- a/lib/compat/wordpress-6.6/html-api/class-gutenberg-html-processor-6-6.php
+++ b/lib/compat/wordpress-6.6/html-api/class-gutenberg-html-processor-6-6.php
@@ -293,8 +293,8 @@ public static function create_fragment( $html, $context = '<body>', $encoding =
 		$processor->state->insertion_mode = Gutenberg_HTML_Processor_State_6_6::INSERTION_MODE_IN_BODY;
 
 		// @todo Create "fake" bookmarks for non-existent but implied nodes.
-		$processor->bookmarks['root-node']    = new Gutenberg_HTML_Span_6_5( 0, 0 );
-		$processor->bookmarks['context-node'] = new Gutenberg_HTML_Span_6_5( 0, 0 );
+		$processor->bookmarks['root-node']    = new WP_HTML_Span( 0, 0 );
+		$processor->bookmarks['context-node'] = new WP_HTML_Span( 0, 0 );
 
 		$processor->state->stack_of_open_elements->push(
 			new WP_HTML_Token(
diff --git a/lib/compat/wordpress-6.6/html-api/class-gutenberg-html-tag-processor-6-6.php b/lib/compat/wordpress-6.6/html-api/class-gutenberg-html-tag-processor-6-6.php
index eb873e7a06340..ecbc6d0d7b6af 100644
--- a/lib/compat/wordpress-6.6/html-api/class-gutenberg-html-tag-processor-6-6.php
+++ b/lib/compat/wordpress-6.6/html-api/class-gutenberg-html-tag-processor-6-6.php
@@ -1227,7 +1227,7 @@ public function set_bookmark( $name ) {
 			return false;
 		}
 
-		$this->bookmarks[ $name ] = new Gutenberg_HTML_Span_6_5( $this->token_starts_at, $this->token_length );
+		$this->bookmarks[ $name ] = new WP_HTML_Span( $this->token_starts_at, $this->token_length );
 
 		return true;
 	}
@@ -2035,7 +2035,7 @@ private function parse_next_attribute() {
 		 * 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_5( $attribute_start, $attribute_end - $attribute_start );
+		$duplicate_span = new WP_HTML_Span( $attribute_start, $attribute_end - $attribute_start );
 		if ( null === $this->duplicate_attributes ) {
 			$this->duplicate_attributes = array( $comparable_name => array( $duplicate_span ) );
 		} elseif ( ! array_key_exists( $comparable_name, $this->duplicate_attributes ) ) {
@@ -3007,7 +3007,7 @@ public function set_attribute( $name, $value ) {
 			 *     Result: <div id="new"/>
 			 */
 			$existing_attribute                        = $this->attributes[ $comparable_name ];
-			$this->lexical_updates[ $comparable_name ] = new Gutenberg_HTML_Text_Replacement_6_5(
+			$this->lexical_updates[ $comparable_name ] = new WP_HTML_Text_Replacement(
 				$existing_attribute->start,
 				$existing_attribute->length,
 				$updated_attribute
@@ -3025,7 +3025,7 @@ public function set_attribute( $name, $value ) {
 			 *
 			 *     Result: <div id="new"/>
 			 */
-			$this->lexical_updates[ $comparable_name ] = new Gutenberg_HTML_Text_Replacement_6_5(
+			$this->lexical_updates[ $comparable_name ] = new WP_HTML_Text_Replacement(
 				$this->tag_name_starts_at + $this->tag_name_length,
 				0,
 				' ' . $updated_attribute
@@ -3103,7 +3103,7 @@ public function remove_attribute( $name ) {
 		 *
 		 *    Result: <div />
 		 */
-		$this->lexical_updates[ $name ] = new Gutenberg_HTML_Text_Replacement_6_5(
+		$this->lexical_updates[ $name ] = new WP_HTML_Text_Replacement(
 			$this->attributes[ $name ]->start,
 			$this->attributes[ $name ]->length,
 			''
@@ -3112,7 +3112,7 @@ public function remove_attribute( $name ) {
 		// Removes any duplicated attributes if they were also present.
 		if ( null !== $this->duplicate_attributes && array_key_exists( $name, $this->duplicate_attributes ) ) {
 			foreach ( $this->duplicate_attributes[ $name ] as $attribute_token ) {
-				$this->lexical_updates[] = new Gutenberg_HTML_Text_Replacement_6_5(
+				$this->lexical_updates[] = new WP_HTML_Text_Replacement(
 					$attribute_token->start,
 					$attribute_token->length,
 					''
diff --git a/lib/compat/wordpress-6.6/rest-api.php b/lib/compat/wordpress-6.6/rest-api.php
index 54eaaf28de82d..eadd3b1d376a7 100644
--- a/lib/compat/wordpress-6.6/rest-api.php
+++ b/lib/compat/wordpress-6.6/rest-api.php
@@ -33,7 +33,7 @@ function wp_api_template_access_controller( $args, $post_type ) {
 /**
  * Adds the post classes to the REST API response.
  *
- * @param  array  $post  The response object data.
+ * @param  array $post The response object data.
  *
  * @return array
  */
@@ -88,76 +88,116 @@ function gutenberg_register_global_styles_revisions_endpoints() {
 
 add_action( 'rest_api_init', 'gutenberg_register_global_styles_revisions_endpoints' );
 
-if ( ! function_exists( 'gutenberg_register_wp_rest_themes_stylesheet_directory_uri_field' ) ) {
-	/**
-	 * Adds `stylesheet_uri` fields to WP_REST_Themes_Controller class.
-	 */
-	function gutenberg_register_wp_rest_themes_stylesheet_directory_uri_field() {
-		register_rest_field(
-			'theme',
-			'stylesheet_uri',
-			array(
-				'get_callback' => function ( $item ) {
-					if ( ! empty( $item['stylesheet'] ) ) {
-						$theme         = wp_get_theme( $item['stylesheet'] );
-						$current_theme = wp_get_theme();
-						if ( $theme->get_stylesheet() === $current_theme->get_stylesheet() ) {
-							return get_stylesheet_directory_uri();
-						} else {
-							return $theme->get_stylesheet_directory_uri();
-						}
+/**
+ * Adds `stylesheet_uri` fields to WP_REST_Themes_Controller class.
+ */
+function gutenberg_register_wp_rest_themes_stylesheet_directory_uri_field() {
+	register_rest_field(
+		'theme',
+		'stylesheet_uri',
+		array(
+			'get_callback' => function ( $item ) {
+				if ( ! empty( $item['stylesheet'] ) ) {
+					$theme         = wp_get_theme( $item['stylesheet'] );
+					$current_theme = wp_get_theme();
+					if ( $theme->get_stylesheet() === $current_theme->get_stylesheet() ) {
+						return get_stylesheet_directory_uri();
+					} else {
+						return $theme->get_stylesheet_directory_uri();
 					}
+				}
 
-					return null;
-				},
-				'schema'       => array(
-					'type'        => 'string',
-					'description' => __( 'The uri for the theme\'s stylesheet directory.', 'gutenberg' ),
-					'format'      => 'uri',
-					'readonly'    => true,
-					'context'     => array( 'view', 'edit', 'embed' ),
-				),
-			)
-		);
-	}
+				return null;
+			},
+			'schema'       => array(
+				'type'        => 'string',
+				'description' => __( 'The uri for the theme\'s stylesheet directory.', 'gutenberg' ),
+				'format'      => 'uri',
+				'readonly'    => true,
+				'context'     => array( 'view', 'edit', 'embed' ),
+			),
+		)
+	);
 }
 add_action( 'rest_api_init', 'gutenberg_register_wp_rest_themes_stylesheet_directory_uri_field' );
 
-if ( ! function_exists( 'gutenberg_register_wp_rest_themes_template_directory_uri_field' ) ) {
-	/**
-	 * Adds `template_uri` fields to WP_REST_Themes_Controller class.
-	 */
-	function gutenberg_register_wp_rest_themes_template_directory_uri_field() {
-		register_rest_field(
-			'theme',
-			'template_uri',
-			array(
-				'get_callback' => function ( $item ) {
-					if ( ! empty( $item['stylesheet'] ) ) {
-						$theme         = wp_get_theme( $item['stylesheet'] );
-						$current_theme = wp_get_theme();
-						if ( $theme->get_stylesheet() === $current_theme->get_stylesheet() ) {
-							return get_template_directory_uri();
-						} else {
-							return $theme->get_template_directory_uri();
-						}
+/**
+ * Adds `template_uri` fields to WP_REST_Themes_Controller class.
+ */
+function gutenberg_register_wp_rest_themes_template_directory_uri_field() {
+	register_rest_field(
+		'theme',
+		'template_uri',
+		array(
+			'get_callback' => function ( $item ) {
+				if ( ! empty( $item['stylesheet'] ) ) {
+					$theme         = wp_get_theme( $item['stylesheet'] );
+					$current_theme = wp_get_theme();
+					if ( $theme->get_stylesheet() === $current_theme->get_stylesheet() ) {
+						return get_template_directory_uri();
+					} else {
+						return $theme->get_template_directory_uri();
 					}
+				}
 
-					return null;
-				},
-				'schema'       => array(
-					'type'        => 'string',
-					'description' => __( 'The uri for the theme\'s template directory. If this is a child theme, this refers to the parent theme, otherwise this is the same as the theme\'s stylesheet directory.', 'gutenberg' ),
-					'format'      => 'uri',
-					'readonly'    => true,
-					'context'     => array( 'view', 'edit', 'embed' ),
-				),
-			)
-		);
-	}
+				return null;
+			},
+			'schema'       => array(
+				'type'        => 'string',
+				'description' => __( 'The uri for the theme\'s template directory. If this is a child theme, this refers to the parent theme, otherwise this is the same as the theme\'s stylesheet directory.', 'gutenberg' ),
+				'format'      => 'uri',
+				'readonly'    => true,
+				'context'     => array( 'view', 'edit', 'embed' ),
+			),
+		)
+	);
 }
 add_action( 'rest_api_init', 'gutenberg_register_wp_rest_themes_template_directory_uri_field' );
 
+/**
+ * Adds `template` and `template_lock` fields to WP_REST_Post_Types_Controller class.
+ */
+function gutenberg_register_wp_rest_post_types_controller_fields() {
+	register_rest_field(
+		'type',
+		'template',
+		array(
+			'get_callback' => function ( $item ) {
+				$post_type = get_post_type_object( $item['slug'] );
+				if ( ! empty( $post_type ) ) {
+					return $post_type->template ?? array();
+				}
+			},
+			'schema'       => array(
+				'type'        => 'array',
+				'description' => __( 'The block template associated with the post type.', 'gutenberg' ),
+				'readonly'    => true,
+				'context'     => array( 'view', 'edit', 'embed' ),
+			),
+		)
+	);
+	register_rest_field(
+		'type',
+		'template_lock',
+		array(
+			'get_callback' => function ( $item ) {
+				$post_type = get_post_type_object( $item['slug'] );
+				if ( ! empty( $post_type ) ) {
+					return ! empty( $post_type->template_lock ) ? $post_type->template_lock : false;
+				}
+			},
+			'schema'       => array(
+				'type'        => array( 'string', 'boolean' ),
+				'enum'        => array( 'all', 'insert', 'contentOnly', false ),
+				'description' => __( 'The template_lock associated with the post type, or false if none.', 'gutenberg' ),
+				'readonly'    => true,
+				'context'     => array( 'view', 'edit', 'embed' ),
+			),
+		)
+	);
+}
+add_action( 'rest_api_init', 'gutenberg_register_wp_rest_post_types_controller_fields' );
+
 /**
  * Preload theme and global styles paths to avoid flash of variation styles in post editor.
  *
@@ -169,7 +209,7 @@ function gutenberg_block_editor_preload_paths_6_6( $paths, $context ) {
 	if ( 'core/edit-post' === $context->name ) {
 		$paths[] = '/wp/v2/global-styles/themes/' . get_stylesheet();
 		$paths[] = '/wp/v2/themes?context=edit&status=active';
-		$paths[] = '/wp/v2/global-styles/' . WP_Theme_JSON_Resolver::get_user_global_styles_post_id() . '?context=edit';
+		$paths[] = '/wp/v2/global-styles/' . WP_Theme_JSON_Resolver_Gutenberg::get_user_global_styles_post_id() . '?context=edit';
 	}
 	return $paths;
 }
diff --git a/lib/compat/wordpress-6.7/block-bindings.php b/lib/compat/wordpress-6.7/block-bindings.php
index 4c82dc6683f37..a8f68c0f0f04e 100644
--- a/lib/compat/wordpress-6.7/block-bindings.php
+++ b/lib/compat/wordpress-6.7/block-bindings.php
@@ -1,6 +1,6 @@
 <?php
 /**
- * Temporary compatibility code for new functionalitites/changes related to block bindings APIs present in Gutenberg.
+ * Temporary compatibility code for new functionalities/changes related to block bindings APIs present in Gutenberg.
  *
  * @package gutenberg
  */
@@ -38,3 +38,50 @@ function gutenberg_add_server_block_bindings_sources_to_editor_settings( $editor
 }
 
 add_filter( 'block_editor_settings_all', 'gutenberg_add_server_block_bindings_sources_to_editor_settings', 10 );
+
+/**
+ * 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;
+	}
+
+	$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 0000000000000..d1f2859070b8b
--- /dev/null
+++ b/lib/compat/wordpress-6.7/block-templates.php
@@ -0,0 +1,41 @@
+<?php
+/**
+ * Block template functions.
+ *
+ * @package gutenberg
+ */
+
+if ( ! function_exists( 'wp_register_block_template' ) ) {
+	/**
+	 * Register a template.
+	 *
+	 * @param string       $template_name  Template name in the form of `plugin_uri//template_name`.
+	 * @param array|string $args           {
+	 *     @type string        $title                 Optional. Title of the template as it will be shown in the Site Editor
+	 *                                                and other UI elements.
+	 *     @type string        $description           Optional. Description of the template as it will be shown in the Site
+	 *                                                Editor.
+	 *     @type string        $content               Optional. Default content of the template that will be used when the
+	 *                                                template is rendered or edited in the editor.
+	 *     @type string[]      $post_types            Optional. Array of post types to which the template should be available.
+	 *     @type string        $plugin                Uri of the plugin that registers the template.
+	 * }
+	 * @return WP_Block_Template|WP_Error The registered template object on success, WP_Error object on failure.
+	 */
+	function wp_register_block_template( $template_name, $args = array() ) {
+		return WP_Block_Templates_Registry::get_instance()->register( $template_name, $args );
+	}
+}
+
+if ( ! function_exists( 'wp_unregister_block_template' ) ) {
+	/**
+	 * Unregister a template.
+	 *
+	 * @param string $template_name Template name in the form of `plugin_uri//template_name`.
+	 * @return 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 ) {
+		return WP_Block_Templates_Registry::get_instance()->unregister( $template_name );
+	}
+}
diff --git a/lib/compat/wordpress-6.7/blocks.php b/lib/compat/wordpress-6.7/blocks.php
index 18d21621be719..6b9526f8056fd 100644
--- a/lib/compat/wordpress-6.7/blocks.php
+++ b/lib/compat/wordpress-6.7/blocks.php
@@ -43,3 +43,63 @@ function gutenberg_filter_block_type_metadata_settings_allow_variations_php_file
 	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;
+	}
+
+	$formats   = $block->context['query']['format'];
+	$tax_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 ) ) {
+		$tax_query[] = array(
+			'taxonomy' => 'post_format',
+			'field'    => 'slug',
+			'terms'    => array(),
+			'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 tax query.
+	if ( ! empty( $formats ) ) {
+		// Add the post-format- prefix.
+		$terms = array_map(
+			static function ( $format ) {
+				return 'post-format-' . $format;
+			},
+			$formats
+		);
+
+		$tax_query[] = array(
+			'taxonomy' => 'post_format',
+			'field'    => 'slug',
+			'terms'    => $terms,
+			'operator' => 'IN',
+		);
+	}
+
+	// This condition is intended to prevent $tax_query from being added to $query
+	// if it only contains the relation.
+	if ( count( $tax_query ) > 1 ) {
+		$query['tax_query'][] = $tax_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 0000000000000..c7de4371c94f5
--- /dev/null
+++ b/lib/compat/wordpress-6.7/class-gutenberg-rest-posts-controller-6-7.php
@@ -0,0 +1,698 @@
+<?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'];
+			$tax_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 ) ) {
+				$tax_query[] = array(
+					'taxonomy' => 'post_format',
+					'field'    => 'slug',
+					'terms'    => array(),
+					'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 tax query.
+			if ( ! empty( $formats ) ) {
+				// Add the post-format- prefix.
+				$terms = array_map(
+					static function ( $format ) {
+						return 'post-format-' . $format;
+					},
+					$formats
+				);
+
+				$tax_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',
+					$tax_query,
+				);
+			} else {
+				$args['tax_query'] = $tax_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 0000000000000..efdc41289dfac
--- /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 0000000000000..ed67dded75ecb
--- /dev/null
+++ b/lib/compat/wordpress-6.7/class-gutenberg-rest-templates-controller-6-7.php
@@ -0,0 +1,203 @@
+<?php
+/**
+ * REST API: Gutenberg_REST_Templates_Controller_6_7 class
+ *
+ * @package    gutenberg
+ */
+
+/**
+ * Gutenberg_REST_Templates_Controller_6_7 class
+ *
+ */
+class Gutenberg_REST_Templates_Controller_6_7 extends Gutenberg_REST_Templates_Controller_6_6 {
+	/**
+	 * Returns the given template
+	 *
+	 * @param WP_REST_Request $request The request instance.
+	 * @return WP_REST_Response|WP_Error
+	 */
+	public function get_item( $request ) {
+		if ( isset( $request['source'] ) && ( 'theme' === $request['source'] || 'plugin' === $request['source'] ) ) {
+			$template = get_block_file_template( $request['id'], $this->post_type );
+		} else {
+			$template = get_block_template( $request['id'], $this->post_type );
+		}
+
+		if ( ! $template ) {
+			return new WP_Error( 'rest_template_not_found', __( 'No templates exist with that id.' ), array( 'status' => 404 ) );
+		}
+
+		return $this->prepare_item_for_response( $template, $request );
+	}
+
+	/**
+	 * Prepare a single template output for response
+	 *
+	 * @param WP_Block_Template $item    Template instance.
+	 * @param WP_REST_Request   $request Request object.
+	 * @return WP_REST_Response Response object.
+	 */
+	// @core-merge: Fix wrong author in plugin templates.
+	public function prepare_item_for_response( $item, $request ) {
+		$template = $item;
+
+		$fields = $this->get_fields_for_response( $request );
+
+		if ( 'plugin' !== $item->origin ) {
+			return parent::prepare_item_for_response( $item, $request );
+		}
+		$cloned_item = clone $item;
+		// Set the origin as theme when calling the previous `prepare_item_for_response()` to prevent warnings when generating the author text.
+		$cloned_item->origin = 'theme';
+		$response            = parent::prepare_item_for_response( $cloned_item, $request );
+		$data                = $response->data;
+
+		if ( rest_is_field_included( 'origin', $fields ) ) {
+			$data['origin'] = 'plugin';
+		}
+
+		if ( rest_is_field_included( 'plugin', $fields ) ) {
+			$registered_template = WP_Block_Templates_Registry::get_instance()->get_by_slug( $cloned_item->slug );
+			if ( $registered_template ) {
+				$data['plugin'] = $registered_template->plugin;
+			}
+		}
+
+		if ( rest_is_field_included( 'author_text', $fields ) ) {
+			$data['author_text'] = $this->get_wp_templates_author_text_field( $template );
+		}
+
+		if ( rest_is_field_included( 'original_source', $fields ) ) {
+			$data['original_source'] = $this->get_wp_templates_original_source_field( $template );
+		}
+
+		$response = rest_ensure_response( $data );
+
+		if ( rest_is_field_included( '_links', $fields ) || rest_is_field_included( '_embedded', $fields ) ) {
+			$links = $this->prepare_links( $template->id );
+			$response->add_links( $links );
+			if ( ! empty( $links['self']['href'] ) ) {
+				$actions = $this->get_available_actions();
+				$self    = $links['self']['href'];
+				foreach ( $actions as $rel ) {
+					$response->add_link( $rel, $self );
+				}
+			}
+		}
+
+		return $response;
+	}
+
+	/**
+	 * Returns the source from where the template originally comes from.
+	 *
+	 * @param WP_Block_Template $template_object Template instance.
+	 * @return string                            Original source of the template one of theme, plugin, site, or user.
+	 */
+	// @core-merge: Changed the comments format (from inline to multi-line) in the entire function.
+	private static function get_wp_templates_original_source_field( $template_object ) {
+		if ( 'wp_template' === $template_object->type || 'wp_template_part' === $template_object->type ) {
+			/*
+			 * Added by theme.
+			 * Template originally provided by a theme, but customized by a user.
+			 * Templates originally didn't have the 'origin' field so identify
+			 * older customized templates by checking for no origin and a 'theme'
+			 * or 'custom' source.
+			 */
+			if ( $template_object->has_theme_file &&
+			( 'theme' === $template_object->origin || (
+				empty( $template_object->origin ) && in_array(
+					$template_object->source,
+					array(
+						'theme',
+						'custom',
+					),
+					true
+				) )
+			)
+			) {
+				return 'theme';
+			}
+
+			// Added by plugin.
+			// @core-merge: Removed `$template_object->has_theme_file` check from this if clause.
+			if ( 'plugin' === $template_object->origin ) {
+				return 'plugin';
+			}
+
+			/*
+			 * Added by site.
+			 * Template was created from scratch, but has no author. Author support
+			 * was only added to templates in WordPress 5.9. Fallback to showing the
+			 * site logo and title.
+			 */
+			if ( empty( $template_object->has_theme_file ) && 'custom' === $template_object->source && empty( $template_object->author ) ) {
+				return 'site';
+			}
+		}
+
+		// Added by user.
+		return 'user';
+	}
+
+	/**
+	 * Returns a human readable text for the author of the template.
+	 *
+	 * @param WP_Block_Template $template_object Template instance.
+	 * @return string                            Human readable text for the author.
+	 */
+	private static function get_wp_templates_author_text_field( $template_object ) {
+		$original_source = self::get_wp_templates_original_source_field( $template_object );
+		switch ( $original_source ) {
+			case 'theme':
+				$theme_name = wp_get_theme( $template_object->theme )->get( 'Name' );
+				return empty( $theme_name ) ? $template_object->theme : $theme_name;
+			case 'plugin':
+				// @core-merge: Prioritize plugin name instead of theme name for plugin-registered templates.
+				if ( ! function_exists( 'get_plugins' ) || ! function_exists( 'get_plugin_data' ) ) {
+					require_once ABSPATH . 'wp-admin/includes/plugin.php';
+				}
+				if ( isset( $template_object->plugin ) ) {
+					$plugins = wp_get_active_and_valid_plugins();
+
+					foreach ( $plugins as $plugin_file ) {
+						$plugin_basename = plugin_basename( $plugin_file );
+						// Split basename by '/' to get the plugin slug.
+						list( $plugin_slug, ) = explode( '/', $plugin_basename );
+
+						if ( $plugin_slug === $template_object->plugin ) {
+							$plugin_data = get_plugin_data( $plugin_file );
+
+							if ( ! empty( $plugin_data['Name'] ) ) {
+								return $plugin_data['Name'];
+							}
+
+							break;
+						}
+					}
+				}
+
+				/*
+				 * Fall back to the theme name if the plugin is not defined. That's needed to keep backwards
+				 * compatibility with templates that were registered before the plugin attribute was added.
+				 */
+				$plugins         = get_plugins();
+				$plugin_basename = plugin_basename( sanitize_text_field( $template_object->theme . '.php' ) );
+				if ( isset( $plugins[ $plugin_basename ] ) && isset( $plugins[ $plugin_basename ]['Name'] ) ) {
+					return $plugins[ $plugin_basename ]['Name'];
+				}
+				return isset( $template_object->plugin ) ?
+					$template_object->plugin :
+					$template_object->theme;
+				// @core-merge: End of changes to merge in core.
+			case 'site':
+				return get_bloginfo( 'name' );
+			case 'user':
+				$author = get_user_by( 'id', $template_object->author );
+				if ( ! $author ) {
+					return __( 'Unknown author' );
+				}
+				return $author->get( 'display_name' );
+		}
+	}
+}
diff --git a/lib/compat/wordpress-6.7/class-wp-block-templates-registry.php b/lib/compat/wordpress-6.7/class-wp-block-templates-registry.php
new file mode 100644
index 0000000000000..92673c0bf50f9
--- /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 0000000000000..cd533a42cc528
--- /dev/null
+++ b/lib/compat/wordpress-6.7/compat.php
@@ -0,0 +1,120 @@
+<?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'] ) ) {
+		$template_files = _gutenberg_get_block_templates_files( $template_type, $query );
+
+		/*
+		 * Add templates registered in the template registry. Filtering out the ones which have a theme file.
+		 */
+		$registered_templates          = WP_Block_Templates_Registry::get_instance()->get_by_query( $query );
+		$matching_registered_templates = array_filter(
+			$registered_templates,
+			function ( $registered_template ) use ( $template_files ) {
+				foreach ( $template_files as $template_file ) {
+					if ( $template_file['slug'] === $registered_template->slug ) {
+						return false;
+					}
+				}
+				return true;
+			}
+		);
+		$query_result                  = array_merge( $query_result, $matching_registered_templates );
+	}
+
+	return $query_result;
+}
+add_filter( 'get_block_templates', '_gutenberg_add_block_templates_from_registry', 10, 3 );
+
+/**
+ * Hooks into `get_block_template` to add the `plugin` property when necessary.
+ *
+ * @param [WP_Block_Template|null] $block_template The found block template, or null if there isn’t one.
+ * @return [WP_Block_Template|null] The block template that was already found with the plugin property defined if it was 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-decoder-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-decoder-6-7.php
index 70f51151d8647..c745904865b1f 100644
--- 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
@@ -196,6 +196,8 @@ public static function decode( $context, $text ): string {
 	 *
 	 * @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).
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 0000000000000..d3de5b83957e2
--- /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 0000000000000..313367594caae
--- /dev/null
+++ b/lib/compat/wordpress-6.7/rest-api.php
@@ -0,0 +1,139 @@
+<?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 ] );
+		}
+	}
+
+	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 0000000000000..2282a3d4bd5ac
--- /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/experimental/block-editor-settings-mobile.php b/lib/experimental/block-editor-settings-mobile.php
index 91e3694c199f8..62c03db222afc 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 bfe57c26b3eca..68113276ec1c0 100644
--- a/lib/experimental/blocks.php
+++ b/lib/experimental/blocks.php
@@ -78,45 +78,42 @@ function wp_enqueue_block_view_script( $block_name, $args ) {
 	}
 }
 
-/*
+/**
+ * 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.
  */
-if ( ! function_exists( 'gutenberg_register_block_style' ) ) {
-	/**
-	 * Registers a new block style for one or more block types.
-	 *
-	 * @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'
-			);
+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;
-		}
+		return false;
+	}
 
-		$block_names = is_string( $block_name ) ? array( $block_name ) : $block_name;
-		$result      = true;
+	$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;
-			}
+	foreach ( $block_names as $name ) {
+		if ( ! WP_Block_Styles_Registry::get_instance()->register( $name, $style_properties ) ) {
+			$result = false;
 		}
-
-		return $result;
 	}
+
+	return $result;
 }
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 2c4bf29bc21a7..ed2dcfe8584a6 100644
--- a/lib/experimental/class-wp-rest-block-editor-settings-controller.php
+++ b/lib/experimental/class-wp-rest-block-editor-settings-controller.php
@@ -93,9 +93,13 @@ public function get_items( $request ) { // phpcs:ignore VariableAnalysis.CodeAna
 					break;
 			}
 
+			add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings_mobile', PHP_INT_MAX );
+
 			$editor_context = new WP_Block_Editor_Context( array( 'name' => $editor_context_name ) );
 			$settings       = get_block_editor_settings( array(), $editor_context );
 
+			remove_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings_mobile', PHP_INT_MAX );
+
 			return rest_ensure_response( $settings );
 		}
 
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 f4202a672f520..0000000000000
--- a/lib/experimental/class-wp-rest-customizer-nonces.php
+++ /dev/null
@@ -1,74 +0,0 @@
-<?php
-/**
- * WP_Rest_Customizer_Nonces class.
- *
- * @package gutenberg
- */
-
-if ( ! class_exists( 'WP_Rest_Customizer_Nonces' ) ) {
-
-	/**
-	 * Class that returns the customizer "save" nonce that's required for the
-	 * batch save operation using the customizer API endpoint.
-	 */
-	class WP_Rest_Customizer_Nonces extends WP_REST_Controller {
-
-		/**
-		 * Constructor.
-		 */
-		public function __construct() {
-			$this->namespace = '__experimental';
-			$this->rest_base = 'customizer-nonces';
-		}
-
-		/**
-		 * Registers the necessary REST API routes.
-		 *
-		 * @access public
-		 */
-		public function register_routes() {
-			register_rest_route(
-				$this->namespace,
-				'/' . $this->rest_base . '/get-save-nonce',
-				array(
-					array(
-						'methods'             => WP_REST_Server::READABLE,
-						'callback'            => array( $this, 'get_save_nonce' ),
-						'permission_callback' => array( $this, 'permissions_check' ),
-						'args'                => $this->get_collection_params(),
-					),
-					'schema' => array( $this, 'get_public_item_schema' ),
-				)
-			);
-		}
-
-		/**
-		 * Checks if a given request has access to read menu items if they have access to edit them.
-		 *
-		 * @return true|WP_Error True if the request has read access, WP_Error object otherwise.
-		 */
-		public function permissions_check() {
-			$post_type = get_post_type_object( 'nav_menu_item' );
-			if ( ! current_user_can( $post_type->cap->edit_posts ) ) {
-				return new WP_Error( 'rest_forbidden_context', __( 'Sorry, you are not allowed to edit posts in this post type.', 'gutenberg' ), array( 'status' => rest_authorization_required_code() ) );
-			}
-			return true;
-		}
-
-		/**
-		 * Returns the nonce required to request the customizer API endpoint.
-		 *
-		 * @access public
-		 */
-		public function get_save_nonce() {
-			require_once ABSPATH . 'wp-includes/class-wp-customize-manager.php';
-			$wp_customize = new WP_Customize_Manager();
-			$nonce        = wp_create_nonce( 'save-customize_' . $wp_customize->get_stylesheet() );
-			return array(
-				'success'    => true,
-				'nonce'      => $nonce,
-				'stylesheet' => $wp_customize->get_stylesheet(),
-			);
-		}
-	}
-}
diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
index 2af7cafb4838c..126382f85a513 100644
--- a/lib/experimental/editor-settings.php
+++ b/lib/experimental/editor-settings.php
@@ -28,8 +28,11 @@ function gutenberg_enable_experiments() {
 	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-zoomed-out-patterns-tab', $gutenberg_experiments ) ) {
-		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableZoomedOutPatternsTab = 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-media-processing', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalMediaProcessing = true', 'before' );
 	}
 }
 
@@ -37,12 +40,28 @@ function 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_form_input_blocks' );
+add_action( 'admin_init', 'gutenberg_enable_block_experiments' );
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 0000000000000..71bf7b7a95835
--- /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 0000000000000..bcb02accf62a6
--- /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/posts/load.php b/lib/experimental/posts/load.php
index b702a374bd16d..7321392b11a25 100644
--- a/lib/experimental/posts/load.php
+++ b/lib/experimental/posts/load.php
@@ -29,7 +29,7 @@ function gutenberg_posts_dashboard() {
 	);
 
 	$editor_settings         = get_block_editor_settings( $custom_settings, $block_editor_context );
-	$active_global_styles_id = WP_Theme_JSON_Resolver::get_user_global_styles_post_id();
+	$active_global_styles_id = WP_Theme_JSON_Resolver_Gutenberg::get_user_global_styles_post_id();
 	$active_theme            = get_stylesheet();
 
 	$preload_paths = array(
diff --git a/lib/experimental/rest-api.php b/lib/experimental/rest-api.php
index 77f7d091d2655..6bb2947f88914 100644
--- a/lib/experimental/rest-api.php
+++ b/lib/experimental/rest-api.php
@@ -10,15 +10,6 @@
 	die( 'Silence is golden.' );
 }
 
-/**
- * Registers the customizer nonces REST API routes.
- */
-function gutenberg_register_rest_customizer_nonces() {
-	$customizer_nonces = new WP_Rest_Customizer_Nonces();
-	$customizer_nonces->register_routes();
-}
-add_action( 'rest_api_init', 'gutenberg_register_rest_customizer_nonces' );
-
 /**
  * Registers the Block editor settings REST API routes.
  */
diff --git a/lib/experimental/script-modules.php b/lib/experimental/script-modules.php
index 709ab322f63a3..5a14e1418ed6d 100644
--- a/lib/experimental/script-modules.php
+++ b/lib/experimental/script-modules.php
@@ -165,11 +165,12 @@ function 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.
- * @deprecated 17.6.0 gutenberg_register_module is deprecated. Please use wp_register_script_module instead.
  */
 function gutenberg_register_module( $module_identifier, $src = '', $dependencies = array(), $version = false ) {
 	_deprecated_function( __FUNCTION__, 'Gutenberg 17.6.0', 'wp_register_script_module' );
@@ -179,8 +180,9 @@ function gutenberg_register_module( $module_identifier, $src = '', $dependencies
 /**
  * Marks the module to be enqueued in the page.
  *
- * @param string $module_identifier The identifier of the module.
  * @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' );
@@ -190,103 +192,11 @@ function gutenberg_enqueue_module( $module_identifier ) {
 /**
  * Unmarks the module so it is not longer enqueued in the page.
  *
- * @param string $module_identifier The identifier of the module.
  * @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 );
 }
-
-
-/**
- * Print data associated with Script Modules in Script tags.
- *
- * This embeds data in the page HTML so that it is available on page load.
- *
- * Data can be associated with a given Script Module by using the
- * `script_module_data_{$module_id}` filter.
- *
- * The data for a given Script Module will be JSON serialized in a script tag with an ID
- * like `wp-script-module-data-{$module_id}`.
- */
-function gutenberg_print_script_module_data(): void {
-	$get_marked_for_enqueue = new ReflectionMethod( 'WP_Script_Modules', 'get_marked_for_enqueue' );
-	$get_marked_for_enqueue->setAccessible( true );
-	$get_import_map = new ReflectionMethod( 'WP_Script_Modules', 'get_import_map' );
-	$get_import_map->setAccessible( true );
-
-	$modules = array();
-	foreach ( array_keys( $get_marked_for_enqueue->invoke( wp_script_modules() ) ) as $id ) {
-		$modules[ $id ] = true;
-	}
-	foreach ( array_keys( $get_import_map->invoke( wp_script_modules() )['imports'] ) as $id ) {
-		$modules[ $id ] = true;
-	}
-
-	foreach ( array_keys( $modules ) as $module_id ) {
-		/**
-		 * Filters data associated with a given Script Module.
-		 *
-		 * Script Modules may require data that is required for initialization or is essential to
-		 * have immediately available on page load. These are suitable use cases for this data.
-		 *
-		 * This is best suited to a minimal set of data and is not intended to replace the REST API.
-		 *
-		 * If the filter returns no data (an empty array), nothing will be embedded in the page.
-		 *
-		 * The data for a given Script Module, if provided, will be JSON serialized in a script tag
-		 * with an ID like `wp-script-module-data-{$module_id}`.
-		 *
-		 * The dynamic portion of the hook name, `$module_id`, refers to the Script Module ID that
-		 * the data is associated with.
-		 *
-		 * @param array $data The data that should be associated with the array.
-		 */
-		$data = apply_filters( "script_module_data_{$module_id}", array() );
-
-		if ( is_array( $data ) && ! empty( $data ) ) {
-			/*
-			 * This data will be printed as JSON inside a script tag like this:
-			 *   <script type="application/json"></script>
-			 *
-			 * A script tag must be closed by a sequence beginning with `</`. It's impossible to
-			 * close a script tag without using `<`. We ensure that `<` is escaped and `/` can
-			 * remain unescaped, so `</script>` will be printed as `\u003C/script\u00E3`.
-			 *
-			 *   - JSON_HEX_TAG: All < and > are converted to \u003C and \u003E.
-			 *   - JSON_UNESCAPED_SLASHES: Don't escape /.
-			 *
-			 * If the page will use UTF-8 encoding, it's safe to print unescaped unicode:
-			 *
-			 *   - JSON_UNESCAPED_UNICODE: Encode multibyte Unicode characters literally (instead of as `\uXXXX`).
-			 *   - JSON_UNESCAPED_LINE_TERMINATORS: The line terminators are kept unescaped when
-			 *     JSON_UNESCAPED_UNICODE is supplied. It uses the same behaviour as it was
-			 *     before PHP 7.1 without this constant. Available as of PHP 7.1.0.
-			 *
-			 * The JSON specification requires encoding in UTF-8, so if the generated HTML page
-			 * is not encoded in UTF-8 then it's not safe to include those literals. They must
-			 * be escaped to avoid encoding issues.
-			 *
-			 * @see https://www.rfc-editor.org/rfc/rfc8259.html for details on encoding requirements.
-			 * @see https://www.php.net/manual/en/json.constants.php for details on these constants.
-			 * @see https://html.spec.whatwg.org/#script-data-state for details on script tag parsing.
-			 */
-			$json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_LINE_TERMINATORS;
-			if ( 'UTF-8' !== get_option( 'blog_charset' ) ) {
-				$json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES;
-			}
-
-			wp_print_inline_script_tag(
-				wp_json_encode( $data, $json_encode_flags ),
-				array(
-					'type' => 'application/json',
-					'id'   => "wp-script-module-data-{$module_id}",
-				)
-			);
-		}
-	}
-}
-
-add_action( 'wp_footer', 'gutenberg_print_script_module_data' );
-add_action( 'admin_print_footer_scripts', 'gutenberg_print_script_module_data' );
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
index 74a133da05c97..27a54b920f4d5 100644
--- a/lib/experiments-page.php
+++ b/lib/experiments-page.php
@@ -45,7 +45,7 @@ function gutenberg_initialize_experiments_settings() {
 
 	add_settings_field(
 		'gutenberg-sync-collaboration',
-		__( 'Live Collaboration and offline persistence ', 'gutenberg' ),
+		__( 'Live Collaboration and offline persistence', 'gutenberg' ),
 		'gutenberg_display_experiment_field',
 		'gutenberg-experiments',
 		'gutenberg_experiments_section',
@@ -79,9 +79,21 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'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' ),
+		__( 'Form and input blocks', 'gutenberg' ),
 		'gutenberg_display_experiment_field',
 		'gutenberg-experiments',
 		'gutenberg_experiments_section',
@@ -93,7 +105,7 @@ function gutenberg_initialize_experiments_settings() {
 
 	add_settings_field(
 		'gutenberg-grid-interactivity',
-		__( 'Grid interactivity ', 'gutenberg' ),
+		__( 'Grid interactivity', 'gutenberg' ),
 		'gutenberg_display_experiment_field',
 		'gutenberg-experiments',
 		'gutenberg_experiments_section',
@@ -128,26 +140,38 @@ function gutenberg_initialize_experiments_settings() {
 	);
 
 	add_settings_field(
-		'gutenberg-zoomed-out-patterns-tab',
-		__( 'Enable zoomed out view when patterns are browsed in the inserter', 'gutenberg' ),
+		'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' => __( 'Enable zoomed out view when selecting a pattern category in the main inserter.', 'gutenberg' ),
-			'id'    => 'gutenberg-zoomed-out-patterns-tab',
+			'label' => __( 'Allow access to a quick edit panel in the pages data views.', 'gutenberg' ),
+			'id'    => 'gutenberg-quick-edit-dataviews',
 		)
 	);
 
 	add_settings_field(
-		'gutenberg-new-posts-dashboard',
-		__( 'Redesigned posts dashboard', 'gutenberg' ),
+		'gutenberg-media-processing',
+		__( 'Client-side media processing', 'gutenberg' ),
 		'gutenberg_display_experiment_field',
 		'gutenberg-experiments',
 		'gutenberg_experiments_section',
 		array(
-			'label' => __( 'Enable a redesigned posts dashboard.', 'gutenberg' ),
-			'id'    => 'gutenberg-new-posts-dashboard',
+			'label' => __( 'Enable client-side media processing.', 'gutenberg' ),
+			'id'    => 'gutenberg-media-processing',
 		)
 	);
 
diff --git a/lib/interactivity-api.php b/lib/interactivity-api.php
index 6f04a3ba8fc92..ff68936f054a7 100644
--- a/lib/interactivity-api.php
+++ b/lib/interactivity-api.php
@@ -6,27 +6,28 @@
  */
 
 /**
- * Deregisters the Core Interactivity API Modules and replace them
- * with the ones from the Gutenberg plugin.
+ * 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_reregister_interactivity_script_modules() {
-	$default_version = defined( 'GUTENBERG_VERSION' ) && ! SCRIPT_DEBUG ? GUTENBERG_VERSION : time();
-	wp_deregister_script_module( '@wordpress/interactivity' );
-	wp_deregister_script_module( '@wordpress/interactivity-router' );
-
-	wp_register_script_module(
-		'@wordpress/interactivity',
-		gutenberg_url( '/build/interactivity/' . ( SCRIPT_DEBUG ? 'debug.min.js' : 'index.min.js' ) ),
-		array(),
-		$default_version
-	);
-
-	wp_register_script_module(
-		'@wordpress/interactivity-router',
-		gutenberg_url( '/build/interactivity/router.min.js' ),
-		array( '@wordpress/interactivity' ),
-		$default_version
-	);
+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( 'init', 'gutenberg_reregister_interactivity_script_modules' );
+add_action( 'after_setup_theme', 'gutenberg_register_interactivity_script_module_data_hooks', 20 );
diff --git a/lib/load.php b/lib/load.php
index ef1b5cfe50b6a..c26160eba2b67 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -35,33 +35,23 @@ function gutenberg_is_experiment_enabled( $name ) {
 		require_once __DIR__ . '/experimental/class-wp-rest-block-editor-settings-controller.php';
 	}
 
-	// WordPress 6.4 compat.
-	require_once __DIR__ . '/compat/wordpress-6.4/class-gutenberg-rest-templates-controller-6-4.php';
-	require_once __DIR__ . '/compat/wordpress-6.4/class-gutenberg-rest-global-styles-revisions-controller-6-4.php';
-	require_once __DIR__ . '/compat/wordpress-6.4/class-gutenberg-rest-block-patterns-controller.php';
-	require_once __DIR__ . '/compat/wordpress-6.4/rest-api.php';
-	require_once __DIR__ . '/compat/wordpress-6.4/theme-previews.php';
-
-	// WordPress 6.5 compat.
-	require_once __DIR__ . '/compat/wordpress-6.5/class-gutenberg-rest-global-styles-revisions-controller-6-5.php';
-	require_once __DIR__ . '/compat/wordpress-6.5/rest-api.php';
-
 	// WordPress 6.6 compat.
 	require __DIR__ . '/compat/wordpress-6.6/class-gutenberg-rest-global-styles-revisions-controller-6-6.php';
 	require __DIR__ . '/compat/wordpress-6.6/class-gutenberg-rest-templates-controller-6-6.php';
 	require __DIR__ . '/compat/wordpress-6.6/rest-api.php';
 
+	// WordPress 6.7 compat.
+	require __DIR__ . '/compat/wordpress-6.7/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';
+
 	// 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';
 
-	// Experimental.
-	if ( ! class_exists( 'WP_Rest_Customizer_Nonces' ) ) {
-		require_once __DIR__ . '/experimental/class-wp-rest-customizer-nonces.php';
-	}
 	require_once __DIR__ . '/experimental/rest-api.php';
-
 	require_once __DIR__ . '/experimental/kses-allowed-html.php';
 }
 
@@ -74,26 +64,12 @@ function gutenberg_is_experiment_enabled( $name ) {
 
 // Gutenberg plugin compat.
 require __DIR__ . '/compat/plugin/edit-site-routes-backwards-compat.php';
-require __DIR__ . '/compat/plugin/footnotes.php';
+require __DIR__ . '/compat/plugin/fonts.php';
 
 // The Token Map was created during 6.6 in order to support the HTML API. It must be loaded before it.
 require __DIR__ . '/compat/wordpress-6.6/class-gutenberg-token-map-6-6.php';
 require __DIR__ . '/compat/wordpress-6.7/class-gutenberg-token-map-6-7.php';
 
-/*
- * There are upstream updates to the Tag Processor that may not appear if Gutenberg is running
- * a version of WordPress newer than 6.4 and older than the latest `trunk`. This file should
- * always be loaded so that Gutenberg code can run the newest version of the Tag Processor.
- */
-require __DIR__ . '/compat/wordpress-6.4/html-api/class-gutenberg-html-tag-processor-6-4.php';
-require __DIR__ . '/compat/wordpress-6.5/html-api/class-gutenberg-html-attribute-token-6-5.php';
-require __DIR__ . '/compat/wordpress-6.5/html-api/class-gutenberg-html-span-6-5.php';
-require __DIR__ . '/compat/wordpress-6.5/html-api/class-gutenberg-html-text-replacement-6-5.php';
-require __DIR__ . '/compat/wordpress-6.5/html-api/class-gutenberg-html-open-elements-6-5.php';
-require __DIR__ . '/compat/wordpress-6.5/html-api/class-gutenberg-html-processor-state-6-5.php';
-require __DIR__ . '/compat/wordpress-6.5/html-api/class-gutenberg-html-tag-processor-6-5.php';
-require __DIR__ . '/compat/wordpress-6.5/html-api/class-gutenberg-html-processor-6-5.php';
-
 require __DIR__ . '/compat/wordpress-6.6/html-api/gutenberg-html5-named-character-references-6-6.php';
 require __DIR__ . '/compat/wordpress-6.6/html-api/class-gutenberg-html-decoder-6-6.php';
 require __DIR__ . '/compat/wordpress-6.6/html-api/class-gutenberg-html-tag-processor-6-6.php';
@@ -116,46 +92,6 @@ function gutenberg_is_experiment_enabled( $name ) {
 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';
 
-/*
- * The HTML Processor appeared after WordPress 6.3. If Gutenberg is running on a version of
- * WordPress before it was introduced, these verbatim Core files will be missing.
- */
-if ( ! class_exists( 'WP_HTML_Processor' ) ) {
-	require __DIR__ . '/compat/wordpress-6.4/html-api/class-wp-html-active-formatting-elements.php';
-	require __DIR__ . '/compat/wordpress-6.4/html-api/class-wp-html-open-elements.php';
-	require __DIR__ . '/compat/wordpress-6.4/html-api/class-wp-html-processor-state.php';
-	require __DIR__ . '/compat/wordpress-6.4/html-api/class-wp-html-token.php';
-	require __DIR__ . '/compat/wordpress-6.4/html-api/class-wp-html-unsupported-exception.php';
-	require __DIR__ . '/compat/wordpress-6.4/html-api/class-wp-html-processor.php';
-}
-
-// WordPress 6.4 compat.
-require __DIR__ . '/compat/wordpress-6.4/blocks.php';
-require __DIR__ . '/compat/wordpress-6.4/block-hooks.php';
-require __DIR__ . '/compat/wordpress-6.4/script-loader.php';
-require __DIR__ . '/compat/wordpress-6.4/kses.php';
-
-// WordPress 6.5 compat.
-require __DIR__ . '/compat/wordpress-6.5/compat.php';
-require __DIR__ . '/compat/wordpress-6.5/blocks.php';
-require __DIR__ . '/compat/wordpress-6.5/block-patterns.php';
-require __DIR__ . '/compat/wordpress-6.5/kses.php';
-require __DIR__ . '/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api.php';
-require __DIR__ . '/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api-directives-processor.php';
-require __DIR__ . '/compat/wordpress-6.5/interactivity-api/interactivity-api.php';
-require __DIR__ . '/compat/wordpress-6.5/class-wp-script-modules.php';
-require __DIR__ . '/compat/wordpress-6.5/scripts-modules.php';
-require __DIR__ . '/compat/wordpress-6.5/navigation-block-variations.php';
-if ( ! class_exists( 'WP_Block_Bindings_Source' ) ) {
-	require __DIR__ . '/compat/wordpress-6.5/block-bindings/class-wp-block-bindings-source.php';
-}
-if ( ! class_exists( 'WP_Block_Bindings_Registry' ) ) {
-	require __DIR__ . '/compat/wordpress-6.5/block-bindings/class-wp-block-bindings-registry.php';
-}
-require __DIR__ . '/compat/wordpress-6.5/block-bindings/block-bindings.php';
-require __DIR__ . '/compat/wordpress-6.5/block-bindings/post-meta.php';
-require __DIR__ . '/compat/wordpress-6.5/script-loader.php';
-
 // WordPress 6.6 compat.
 require __DIR__ . '/compat/wordpress-6.6/admin-bar.php';
 require __DIR__ . '/compat/wordpress-6.6/blocks.php';
@@ -168,8 +104,13 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.6/post.php';
 
 // WordPress 6.7 compat.
+require __DIR__ . '/compat/wordpress-6.7/block-templates.php';
 require __DIR__ . '/compat/wordpress-6.7/blocks.php';
 require __DIR__ . '/compat/wordpress-6.7/block-bindings.php';
+require __DIR__ . '/compat/wordpress-6.7/script-modules.php';
+require __DIR__ . '/compat/wordpress-6.7/class-wp-block-templates-registry.php';
+require __DIR__ . '/compat/wordpress-6.7/compat.php';
+require __DIR__ . '/compat/wordpress-6.7/post-formats.php';
 
 // Experimental features.
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';
@@ -185,31 +126,6 @@ function gutenberg_is_experiment_enabled( $name ) {
 	require __DIR__ . '/experimental/disable-tinymce.php';
 }
 
-// Fonts API / Font Face.
-remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WordPress 6.0's stopgap handler.
-
-// Loads the Font Library.
-require __DIR__ . '/compat/wordpress-6.5/fonts/class-wp-font-collection.php';
-require __DIR__ . '/compat/wordpress-6.5/fonts/class-wp-font-library.php';
-require __DIR__ . '/compat/wordpress-6.5/fonts/class-wp-font-utils.php';
-require __DIR__ . '/compat/wordpress-6.5/fonts/class-wp-rest-font-families-controller.php';
-require __DIR__ . '/compat/wordpress-6.5/fonts/class-wp-rest-font-faces-controller.php';
-require __DIR__ . '/compat/wordpress-6.5/fonts/class-wp-rest-font-collections-controller.php';
-require __DIR__ . '/compat/wordpress-6.5/fonts/fonts.php';
-
-// Load the Font Face and Font Face Resolver, if not already loaded by WordPress Core.
-if ( ! class_exists( 'WP_Font_Face' ) ) {
-	require __DIR__ . '/compat/wordpress-6.4/fonts/font-face/class-wp-font-face.php';
-	require __DIR__ . '/compat/wordpress-6.4/fonts/font-face/class-wp-font-face-resolver.php';
-}
-
-/*
- * As _gutenberg_get_iframed_editor_assets_6_4() overrides Core's _wp_get_iframed_editor_assets(),
- * load this file to ensure wp_print_font_faces() is invoked to load the styles into the
- * iframed editor.
- */
-require __DIR__ . '/compat/wordpress-6.4/fonts/fonts.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';
@@ -271,3 +187,8 @@ function gutenberg_is_experiment_enabled( $name ) {
 
 // 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
index ea87f42463704..7570bb1973723 100644
--- a/lib/rest-api.php
+++ b/lib/rest-api.php
@@ -11,68 +11,29 @@
 }
 
 /**
- * Registers the Global Styles REST API routes.
+ * 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_register_global_styles_endpoints() {
-	$global_styles_controller = new WP_REST_Global_Styles_Controller_Gutenberg();
-	$global_styles_controller->register_routes();
-}
-add_action( 'rest_api_init', 'gutenberg_register_global_styles_endpoints' );
+function gutenberg_override_global_styles_endpoint( array $args ): array {
+	$args['rest_controller_class']           = 'WP_REST_Global_Styles_Controller_Gutenberg';
+	$args['revisions_rest_controller_class'] = 'Gutenberg_REST_Global_Styles_Revisions_Controller_6_6';
+	$args['late_route_registration']         = true;
+	$args['show_in_rest']                    = true;
+	$args['rest_base']                       = 'global-styles';
 
-if ( ! function_exists( 'gutenberg_register_edit_site_export_controller_endpoints' ) ) {
-	/**
-	 * 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();
-	}
+	return $args;
 }
+add_filter( 'register_wp_global_styles_post_type_args', 'gutenberg_override_global_styles_endpoint', 10, 2 );
 
-add_action( 'rest_api_init', 'gutenberg_register_edit_site_export_controller_endpoints' );
-
-if ( ! function_exists( 'gutenberg_register_wp_rest_post_types_controller_fields' ) ) {
-	/**
-	 * Adds `template` and `template_lock` fields to WP_REST_Post_Types_Controller class.
-	 */
-	function gutenberg_register_wp_rest_post_types_controller_fields() {
-		register_rest_field(
-			'type',
-			'template',
-			array(
-				'get_callback' => function ( $item ) {
-					$post_type = get_post_type_object( $item['slug'] );
-					if ( ! empty( $post_type ) ) {
-						return $post_type->template ?? array();
-					}
-				},
-				'schema'       => array(
-					'type'        => 'array',
-					'description' => __( 'The block template associated with the post type.', 'gutenberg' ),
-					'readonly'    => true,
-					'context'     => array( 'view', 'edit', 'embed' ),
-				),
-			)
-		);
-		register_rest_field(
-			'type',
-			'template_lock',
-			array(
-				'get_callback' => function ( $item ) {
-					$post_type = get_post_type_object( $item['slug'] );
-					if ( ! empty( $post_type ) ) {
-						return ! empty( $post_type->template_lock ) ? $post_type->template_lock : false;
-					}
-				},
-				'schema'       => array(
-					'type'        => array( 'string', 'boolean' ),
-					'enum'        => array( 'all', 'insert', 'contentOnly', false ),
-					'description' => __( 'The template_lock associated with the post type, or false if none.', 'gutenberg' ),
-					'readonly'    => true,
-					'context'     => array( 'view', 'edit', 'embed' ),
-				),
-			)
-		);
-	}
+/**
+ * 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_wp_rest_post_types_controller_fields' );
+add_action( 'rest_api_init', 'gutenberg_register_edit_site_export_controller_endpoints' );
diff --git a/package-lock.json b/package-lock.json
index 8785725ed594b..0de59cfd601aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "gutenberg",
-	"version": "18.8.0",
+	"version": "19.4.0-rc.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "gutenberg",
-			"version": "18.8.0",
+			"version": "19.4.0-rc.1",
 			"hasInstallScript": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -40,12 +40,14 @@
 				"@wordpress/editor": "file:packages/editor",
 				"@wordpress/element": "file:packages/element",
 				"@wordpress/escape-html": "file:packages/escape-html",
+				"@wordpress/fields": "file:packages/fields",
 				"@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/interactivity": "file:packages/interactivity",
+				"@wordpress/interactivity-router": "file:packages/interactivity-router",
 				"@wordpress/interface": "file:packages/interface",
 				"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
 				"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
@@ -79,14 +81,13 @@
 				"@wordpress/viewport": "file:packages/viewport",
 				"@wordpress/warning": "file:packages/warning",
 				"@wordpress/widgets": "file:packages/widgets",
-				"@wordpress/wordcount": "file:packages/wordcount",
-				"es-module-shims": "^1.8.2"
+				"@wordpress/wordcount": "file:packages/wordcount"
 			},
 			"devDependencies": {
 				"@actions/core": "1.9.1",
 				"@actions/github": "5.0.0",
 				"@apidevtools/json-schema-ref-parser": "11.6.4",
-				"@ariakit/test": "^0.3.7",
+				"@ariakit/test": "^0.4.2",
 				"@babel/core": "7.24.3",
 				"@babel/plugin-proposal-export-namespace-from": "7.18.9",
 				"@babel/plugin-syntax-jsx": "7.24.1",
@@ -99,7 +100,7 @@
 				"@octokit/rest": "16.26.0",
 				"@octokit/types": "6.34.0",
 				"@octokit/webhooks-types": "5.8.0",
-				"@playwright/test": "1.45.1",
+				"@playwright/test": "1.47.0",
 				"@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
 				"@react-native/babel-preset": "0.73.10",
 				"@react-native/metro-babel-transformer": "0.73.10",
@@ -160,7 +161,6 @@
 				"@wordpress/scripts": "file:packages/scripts",
 				"@wordpress/stylelint-config": "file:packages/stylelint-config",
 				"ajv": "8.7.1",
-				"ajv-draft-04": "1.0.0",
 				"appium": "2.0.0",
 				"babel-jest": "29.7.0",
 				"babel-loader": "9.1.3",
@@ -217,10 +217,12 @@
 				"npm-run-all": "4.1.5",
 				"patch-package": "8.0.0",
 				"postcss": "8.4.38",
+				"postcss-import": "16.1.0",
 				"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",
 				"react": "18.3.1",
 				"react-dom": "18.3.1",
 				"react-native": "0.73.3",
@@ -243,9 +245,9 @@
 				"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.9",
 				"typescript": "5.5.3",
-				"uglify-js": "3.13.7",
 				"uuid": "9.0.1",
 				"webdriverio": "8.16.20",
 				"webpack": "5.88.2",
@@ -1529,54 +1531,28 @@
 			}
 		},
 		"node_modules/@ariakit/core": {
-			"version": "0.3.10",
-			"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.3.10.tgz",
-			"integrity": "sha512-AcN+GSoVXuUOzKx5d3xPL3YsEHevh4PIO6QIt/mg/nRX1XQ6cvxQEiAjO/BJQm+/MVl7/VbuGBoTFjr0tPU6NQ=="
-		},
-		"node_modules/@ariakit/react": {
-			"version": "0.3.12",
-			"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.3.12.tgz",
-			"integrity": "sha512-HxKMZZhWSkwwS/Sh9OdWyuNKQ2tjDAIQIy2KVI7IRa8ZQ6ze/4g3YLUHbfCxO7oDupXHfXaeZ4hWx8lP7l1U/g==",
-			"dependencies": {
-				"@ariakit/react-core": "0.3.12"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/ariakit"
-			},
-			"peerDependencies": {
-				"react": "^17.0.0 || ^18.0.0",
-				"react-dom": "^17.0.0 || ^18.0.0"
-			}
-		},
-		"node_modules/@ariakit/react-core": {
-			"version": "0.3.12",
-			"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.3.12.tgz",
-			"integrity": "sha512-w6P1A7TYb1fKUe9QbwaoTOWofl13g7TEuXdV4JyefJCQL1e9HQdEw9UL67I8aXRo8/cFHH94/z0N37t8hw5Ogg==",
-			"dependencies": {
-				"@ariakit/core": "0.3.10",
-				"@floating-ui/dom": "^1.0.0",
-				"use-sync-external-store": "^1.2.0"
-			},
-			"peerDependencies": {
-				"react": "^17.0.0 || ^18.0.0",
-				"react-dom": "^17.0.0 || ^18.0.0"
-			}
+			"version": "0.4.9",
+			"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.9.tgz",
+			"integrity": "sha512-nV0B/OTK/0iB+P9RC7fudznYZ8eR6rR1F912Zc54e3+wSW5RrRvNOiRxyMrgENidd4R7cCMDw77XJLSBLKgEPQ=="
 		},
 		"node_modules/@ariakit/test": {
-			"version": "0.3.7",
-			"resolved": "https://registry.npmjs.org/@ariakit/test/-/test-0.3.7.tgz",
-			"integrity": "sha512-rOa9pJA0ZfPPSI4SkDX41CsBcvxs6BmxgzFEElZWZo/uBBqtnr8ZL4oe5HySeZKEAHRH86XDqfxFISkhV76m5g==",
+			"version": "0.4.2",
+			"resolved": "https://registry.npmjs.org/@ariakit/test/-/test-0.4.2.tgz",
+			"integrity": "sha512-WXAAiAyTaHV9klntOB81Y+YHyA5iGxy9wXCmjQOfYK5InsuIour+7TVXICUxn2NF0XD6j6OoEJbCVDJ2Y46xEA==",
 			"dev": true,
 			"dependencies": {
-				"@ariakit/core": "0.3.10",
-				"@testing-library/dom": "^8.0.0 || ^9.0.0"
+				"@ariakit/core": "0.4.9",
+				"@testing-library/dom": "^8.0.0 || ^9.0.0 || ^10.0.0"
 			},
 			"peerDependencies": {
-				"@testing-library/react": "^12.0.0 || ^13.0.0 || ^14.0.0",
-				"react": "^17.0.0 || ^18.0.0"
+				"@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
 				},
@@ -4123,6 +4099,92 @@
 				"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==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
+				}
+			],
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@csstools/css-tokenizer": "^3.0.1"
+			}
+		},
+		"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==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
+				},
+				{
+					"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==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
+				},
+				{
+					"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==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
+				}
+			],
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"postcss-selector-parser": "^6.1.0"
+			}
+		},
 		"node_modules/@dabh/diagnostics": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.3.tgz",
@@ -4143,6 +4205,16 @@
 				"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==",
+			"dev": true,
+			"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",
@@ -6975,12 +7047,12 @@
 			}
 		},
 		"node_modules/@playwright/test": {
-			"version": "1.45.1",
-			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.1.tgz",
-			"integrity": "sha512-Wo1bWTzQvGA7LyKGIZc8nFSTFf2TkthGIFBR+QVNilvwouGzFd4PYukZe3rvf5PSqjHi1+1NyKSDZKcQWETzaA==",
+			"version": "1.47.0",
+			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.47.0.tgz",
+			"integrity": "sha512-SgAdlSwYVpToI4e/IH19IHHWvoijAYH5hu2MWSXptRypLSnzj51PcGD+rsOXFayde4P9ZLi+loXVwArg6IUkCA==",
 			"dev": true,
 			"dependencies": {
-				"playwright": "1.45.1"
+				"playwright": "1.47.0"
 			},
 			"bin": {
 				"playwright": "cli.js"
@@ -13388,6 +13460,34 @@
 				"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==",
+			"dev": true,
+			"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==",
+			"dev": true
+		},
 		"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",
@@ -17054,6 +17154,10 @@
 			"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
@@ -17543,20 +17647,6 @@
 				"url": "https://github.com/sponsors/epoberezkin"
 			}
 		},
-		"node_modules/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,
-			"peerDependencies": {
-				"ajv": "^8.5.0"
-			},
-			"peerDependenciesMeta": {
-				"ajv": {
-					"optional": true
-				}
-			}
-		},
 		"node_modules/ajv-errors": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
@@ -21055,27 +21145,6 @@
 				"node": ">=0.10.0"
 			}
 		},
-		"node_modules/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,
-			"dependencies": {
-				"is-regexp": "^2.0.0"
-			},
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/clone-regexp/node_modules/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,
-			"engines": {
-				"node": ">=6"
-			}
-		},
 		"node_modules/clone-response": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
@@ -22609,15 +22678,6 @@
 				"node": ">=4.0"
 			}
 		},
-		"node_modules/cross-fetch": {
-			"version": "3.1.5",
-			"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
-			"integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
-			"dev": true,
-			"dependencies": {
-				"node-fetch": "2.6.7"
-			}
-		},
 		"node_modules/cross-spawn": {
 			"version": "5.1.0",
 			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
@@ -22697,6 +22757,15 @@
 				"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==",
+			"dev": true,
+			"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",
@@ -23002,15 +23071,15 @@
 			}
 		},
 		"node_modules/cssstyle": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
-			"integrity": "sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==",
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz",
+			"integrity": "sha512-h66W1URKpBS5YMI/V8PyXvTMFT8SupJ1IzoIV8IeBC/ji8WVmrO8dGlTi+2dh6whmdk6BiKJLD/ZBkhWbcg6nA==",
 			"dev": true,
 			"dependencies": {
-				"rrweb-cssom": "^0.6.0"
+				"rrweb-cssom": "^0.7.1"
 			},
 			"engines": {
-				"node": ">=14"
+				"node": ">=18"
 			}
 		},
 		"node_modules/csstype": {
@@ -23062,29 +23131,28 @@
 			}
 		},
 		"node_modules/data-urls": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
-			"integrity": "sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==",
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+			"integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
 			"dev": true,
 			"dependencies": {
-				"abab": "^2.0.6",
-				"whatwg-mimetype": "^3.0.0",
-				"whatwg-url": "^12.0.0"
+				"whatwg-mimetype": "^4.0.0",
+				"whatwg-url": "^14.0.0"
 			},
 			"engines": {
-				"node": ">=14"
+				"node": ">=18"
 			}
 		},
 		"node_modules/data-urls/node_modules/tr46": {
-			"version": "4.1.1",
-			"resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz",
-			"integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==",
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz",
+			"integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==",
 			"dev": true,
 			"dependencies": {
-				"punycode": "^2.3.0"
+				"punycode": "^2.3.1"
 			},
 			"engines": {
-				"node": ">=14"
+				"node": ">=18"
 			}
 		},
 		"node_modules/data-urls/node_modules/webidl-conversions": {
@@ -23097,16 +23165,16 @@
 			}
 		},
 		"node_modules/data-urls/node_modules/whatwg-url": {
-			"version": "12.0.1",
-			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz",
-			"integrity": "sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==",
+			"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==",
 			"dev": true,
 			"dependencies": {
-				"tr46": "^4.1.1",
+				"tr46": "^5.0.0",
 				"webidl-conversions": "^7.0.0"
 			},
 			"engines": {
-				"node": ">=14"
+				"node": ">=18"
 			}
 		},
 		"node_modules/date-fns": {
@@ -24151,10 +24219,11 @@
 			}
 		},
 		"node_modules/devtools-protocol": {
-			"version": "0.0.981744",
-			"resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.981744.tgz",
-			"integrity": "sha512-0cuGS8+jhR67Fy7qG3i3Pc7Aw494sb9yG9QgpG97SFVWwolgYjlhJg7n+UaHxOQT30d1TYu/EYe9k01ivLErIg==",
-			"dev": true
+			"version": "0.0.1312386",
+			"resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1312386.tgz",
+			"integrity": "sha512-DPnhUXvmvKT2dFA/j7B+riVLUt9Q6RKJlcppojL5CoRywJJKLDYnRlw0gTFKfgDPHP5E04UoB71SxoJlVZy8FA==",
+			"dev": true,
+			"license": "BSD-3-Clause"
 		},
 		"node_modules/diff": {
 			"version": "4.0.2",
@@ -24299,27 +24368,6 @@
 			"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
 			"integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
 		},
-		"node_modules/domexception": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
-			"integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
-			"dev": true,
-			"dependencies": {
-				"webidl-conversions": "^7.0.0"
-			},
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/domexception/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==",
-			"dev": true,
-			"engines": {
-				"node": ">=12"
-			}
-		},
 		"node_modules/domhandler": {
 			"version": "2.4.2",
 			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
@@ -24890,11 +24938,6 @@
 			"integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==",
 			"dev": true
 		},
-		"node_modules/es-module-shims": {
-			"version": "1.8.2",
-			"resolved": "https://registry.npmjs.org/es-module-shims/-/es-module-shims-1.8.2.tgz",
-			"integrity": "sha512-7vIYVzpOhXtpc3Yn03itB+GSgVZFW7oL4kdydA+iL+IEi7HiSLBUxM05QFw4SxTl6e++pMpGqZPo2+vdNs3TbA=="
-		},
 		"node_modules/es-set-tostringtag": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
@@ -26096,18 +26139,6 @@
 				"node": ">= 8"
 			}
 		},
-		"node_modules/execall": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/execall/-/execall-2.0.0.tgz",
-			"integrity": "sha512-0FU2hZ5Hh6iQnarpRtQurM/aAvp3RIbfvgLHrcqJYzhXyV2KFruhuChf9NC6waAhiUR7FFtlugkI4p7f2Fqlow==",
-			"dev": true,
-			"dependencies": {
-				"clone-regexp": "^2.1.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
 		"node_modules/exit": {
 			"version": "0.1.2",
 			"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -26612,10 +26643,13 @@
 			}
 		},
 		"node_modules/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
+			"version": "1.0.16",
+			"resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+			"integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+			"dev": true,
+			"engines": {
+				"node": ">= 4.9.1"
+			}
 		},
 		"node_modules/fastq": {
 			"version": "1.6.0",
@@ -27106,9 +27140,9 @@
 			}
 		},
 		"node_modules/flatted": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.1.0.tgz",
-			"integrity": "sha512-tW+UkmtNg/jv9CSofAKvgVcO7c2URjhTdW1ZTkcAritblu8tajiYy7YisnIflEwtKssCtOxpnBRoCB7iap0/TA==",
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
+			"integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
 			"dev": true
 		},
 		"node_modules/flow-enums-runtime": {
@@ -28976,15 +29010,15 @@
 			"integrity": "sha512-fvYTvdCFOWQupGxqkahrkA+ERBuMdzkxwtUdKrxR6rmMd4Pfl+iZ1QiQYoaZ0B/v0y59MOMnz3XFUWbT50/NWA=="
 		},
 		"node_modules/html-encoding-sniffer": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
-			"integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+			"integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
 			"dev": true,
 			"dependencies": {
-				"whatwg-encoding": "^2.0.0"
+				"whatwg-encoding": "^3.1.1"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/html-entities": {
@@ -29040,12 +29074,15 @@
 			}
 		},
 		"node_modules/html-tags": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
-			"integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+			"integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
 			"dev": true,
 			"engines": {
 				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
 		"node_modules/html-webpack-plugin": {
@@ -29505,15 +29542,6 @@
 				"node": ">=4"
 			}
 		},
-		"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==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
 		"node_modules/import-local": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
@@ -32119,40 +32147,38 @@
 			}
 		},
 		"node_modules/jsdom": {
-			"version": "22.1.0",
-			"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-22.1.0.tgz",
-			"integrity": "sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==",
+			"version": "25.0.1",
+			"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-25.0.1.tgz",
+			"integrity": "sha512-8i7LzZj7BF8uplX+ZyOlIz86V6TAsSs+np6m1kpW9u0JWi4z/1t+FzcK1aek+ybTnAC4KhBL4uXCNT0wcUIeCw==",
 			"dev": true,
 			"dependencies": {
-				"abab": "^2.0.6",
-				"cssstyle": "^3.0.0",
-				"data-urls": "^4.0.0",
+				"cssstyle": "^4.1.0",
+				"data-urls": "^5.0.0",
 				"decimal.js": "^10.4.3",
-				"domexception": "^4.0.0",
 				"form-data": "^4.0.0",
-				"html-encoding-sniffer": "^3.0.0",
-				"http-proxy-agent": "^5.0.0",
-				"https-proxy-agent": "^5.0.1",
+				"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.4",
+				"nwsapi": "^2.2.12",
 				"parse5": "^7.1.2",
-				"rrweb-cssom": "^0.6.0",
+				"rrweb-cssom": "^0.7.1",
 				"saxes": "^6.0.0",
 				"symbol-tree": "^3.2.4",
-				"tough-cookie": "^4.1.2",
-				"w3c-xmlserializer": "^4.0.0",
+				"tough-cookie": "^5.0.0",
+				"w3c-xmlserializer": "^5.0.0",
 				"webidl-conversions": "^7.0.0",
-				"whatwg-encoding": "^2.0.0",
-				"whatwg-mimetype": "^3.0.0",
-				"whatwg-url": "^12.0.1",
-				"ws": "^8.13.0",
-				"xml-name-validator": "^4.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": ">=16"
+				"node": ">=18"
 			},
 			"peerDependencies": {
-				"canvas": "^2.5.0"
+				"canvas": "^2.11.2"
 			},
 			"peerDependenciesMeta": {
 				"canvas": {
@@ -32169,40 +32195,54 @@
 				"querystring": "^0.2.0"
 			}
 		},
-		"node_modules/jsdom/node_modules/tough-cookie": {
-			"version": "4.1.3",
-			"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
-			"integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
+		"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==",
 			"dev": true,
 			"dependencies": {
-				"psl": "^1.1.33",
-				"punycode": "^2.1.1",
-				"universalify": "^0.2.0",
-				"url-parse": "^1.5.3"
+				"debug": "^4.3.4"
 			},
 			"engines": {
-				"node": ">=6"
+				"node": ">= 14"
 			}
 		},
-		"node_modules/jsdom/node_modules/tr46": {
-			"version": "4.1.1",
-			"resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz",
-			"integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==",
+		"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==",
+			"dev": true,
+			"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==",
 			"dev": true,
 			"dependencies": {
-				"punycode": "^2.3.0"
+				"agent-base": "^7.0.2",
+				"debug": "4"
 			},
 			"engines": {
-				"node": ">=14"
+				"node": ">= 14"
 			}
 		},
-		"node_modules/jsdom/node_modules/universalify": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-			"integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+		"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==",
 			"dev": true,
+			"dependencies": {
+				"punycode": "^2.3.1"
+			},
 			"engines": {
-				"node": ">= 4.0.0"
+				"node": ">=18"
 			}
 		},
 		"node_modules/jsdom/node_modules/webidl-conversions": {
@@ -32215,16 +32255,16 @@
 			}
 		},
 		"node_modules/jsdom/node_modules/whatwg-url": {
-			"version": "12.0.1",
-			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz",
-			"integrity": "sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==",
+			"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==",
 			"dev": true,
 			"dependencies": {
-				"tr46": "^4.1.1",
+				"tr46": "^5.0.0",
 				"webidl-conversions": "^7.0.0"
 			},
 			"engines": {
-				"node": ">=14"
+				"node": ">=18"
 			}
 		},
 		"node_modules/jsdom/node_modules/ws": {
@@ -32437,9 +32477,9 @@
 			}
 		},
 		"node_modules/keyv": {
-			"version": "4.5.3",
-			"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.3.tgz",
-			"integrity": "sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==",
+			"version": "4.5.4",
+			"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+			"integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
 			"dev": true,
 			"dependencies": {
 				"json-buffer": "3.0.1"
@@ -32489,9 +32529,9 @@
 			}
 		},
 		"node_modules/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==",
+			"version": "0.34.0",
+			"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.34.0.tgz",
+			"integrity": "sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==",
 			"dev": true
 		},
 		"node_modules/kuler": {
@@ -38015,12 +38055,6 @@
 				"node": ">=0.10.0"
 			}
 		},
-		"node_modules/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/normalize-url": {
 			"version": "6.1.0",
 			"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
@@ -38678,9 +38712,9 @@
 			}
 		},
 		"node_modules/nwsapi": {
-			"version": "2.2.7",
-			"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
-			"integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==",
+			"version": "2.2.13",
+			"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.13.tgz",
+			"integrity": "sha512-cTGB9ptp9dY9A5VbMSe7fQBcl/tt22Vcqdq8+eN93rblOuE0aCFu4aZ2vMwct/2t+lFnosm8RkQW1I0Omb1UtQ==",
 			"dev": true
 		},
 		"node_modules/nx": {
@@ -40590,6 +40624,12 @@
 				"url": "https://github.com/fb55/entities?sponsor=1"
 			}
 		},
+		"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"
+		},
 		"node_modules/parseurl": {
 			"version": "1.3.3",
 			"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -41038,9 +41078,9 @@
 			}
 		},
 		"node_modules/picocolors": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-			"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+			"integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
 		},
 		"node_modules/picomatch": {
 			"version": "2.3.1",
@@ -41122,12 +41162,12 @@
 			"dev": true
 		},
 		"node_modules/playwright": {
-			"version": "1.45.1",
-			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.1.tgz",
-			"integrity": "sha512-Hjrgae4kpSQBr98nhCj3IScxVeVUixqj+5oyif8TdIn2opTCPEzqAqNMeK42i3cWDCVu9MI+ZsGWw+gVR4ISBg==",
+			"version": "1.47.0",
+			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.47.0.tgz",
+			"integrity": "sha512-jOWiRq2pdNAX/mwLiwFYnPHpEZ4rM+fRSQpRHwEwZlP2PUANvL3+aJOF/bvISMhFD30rqMxUB4RJx9aQbfh4Ww==",
 			"dev": true,
 			"dependencies": {
-				"playwright-core": "1.45.1"
+				"playwright-core": "1.47.0"
 			},
 			"bin": {
 				"playwright": "cli.js"
@@ -41140,9 +41180,9 @@
 			}
 		},
 		"node_modules/playwright-core": {
-			"version": "1.45.1",
-			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.1.tgz",
-			"integrity": "sha512-LF4CUUtrUu2TCpDw4mcrAIuYrEjVDfT1cHbJMfwnE2+1b8PZcFzPNgvZCvq2JfQ4aTjRCCHw5EJ2tmr2NSzdPg==",
+			"version": "1.47.0",
+			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.47.0.tgz",
+			"integrity": "sha512-1DyHT8OqkcfCkYUD9zzUTfg7EfTd+6a8MkD/NWOvjo0u/SCNd5YmY/lJwFvUZOxJbWNds+ei7ic2+R/cRz/PDg==",
 			"dev": true,
 			"bin": {
 				"playwright-core": "cli.js"
@@ -41363,6 +41403,29 @@
 				"postcss": "^8.2.15"
 			}
 		},
+		"node_modules/postcss-import": {
+			"version": "16.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-16.1.0.tgz",
+			"integrity": "sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==",
+			"dev": true,
+			"dependencies": {
+				"postcss-value-parser": "^4.0.0",
+				"read-cache": "^1.0.0",
+				"resolve": "^1.1.7"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.0.0"
+			}
+		},
+		"node_modules/postcss-import/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/postcss-loader": {
 			"version": "6.2.1",
 			"resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz",
@@ -41793,12 +41856,13 @@
 			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
 			"dev": true
 		},
-		"node_modules/postcss-prefixwrap": {
-			"version": "1.41.0",
-			"resolved": "https://registry.npmjs.org/postcss-prefixwrap/-/postcss-prefixwrap-1.41.0.tgz",
-			"integrity": "sha512-gmwwAEE+ci3/ZKjUZppTETINlh1QwihY8gCstInuS7ohk353KYItU4d64hvnUvO2GUy29hBGPHz4Ce+qJRi90A==",
+		"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": "*"
+				"postcss": ">4 <9"
 			}
 		},
 		"node_modules/postcss-reduce-initial": {
@@ -41839,31 +41903,67 @@
 			"dev": true
 		},
 		"node_modules/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": "sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==",
+			"version": "0.1.6",
+			"resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.6.tgz",
+			"integrity": "sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==",
 			"dev": true
 		},
 		"node_modules/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==",
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz",
+			"integrity": "sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==",
 			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
 			"engines": {
-				"node": ">=12.0"
+				"node": ">=18.0"
 			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/postcss/"
+			"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==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss-scss"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"engines": {
+				"node": ">=12.0"
 			},
 			"peerDependencies": {
-				"postcss": "^8.3.3"
+				"postcss": "^8.4.29"
 			}
 		},
 		"node_modules/postcss-selector-parser": {
-			"version": "6.0.13",
-			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
-			"integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+			"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==",
 			"dev": true,
 			"dependencies": {
 				"cssesc": "^3.0.0",
@@ -42279,12 +42379,6 @@
 			"integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==",
 			"dev": true
 		},
-		"node_modules/psl": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-			"integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
-			"dev": true
-		},
 		"node_modules/public-encrypt": {
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
@@ -42335,33 +42429,120 @@
 			}
 		},
 		"node_modules/puppeteer-core": {
-			"version": "13.7.0",
-			"resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-13.7.0.tgz",
-			"integrity": "sha512-rXja4vcnAzFAP1OVLq/5dWNfwBGuzcOARJ6qGV7oAZhnLmVRU8G5MsdeQEAOy332ZhkIOnn9jp15R89LKHyp2Q==",
+			"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==",
 			"dev": true,
+			"license": "Apache-2.0",
 			"dependencies": {
-				"cross-fetch": "3.1.5",
-				"debug": "4.3.4",
-				"devtools-protocol": "0.0.981744",
-				"extract-zip": "2.0.1",
-				"https-proxy-agent": "5.0.1",
-				"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.5.0"
+				"@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"
+			}
+		},
+		"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==",
+			"dev": true,
+			"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": ">=10.18.1"
+				"node": ">=18"
 			}
 		},
+		"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==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"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==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"mitt": "3.0.1",
+				"urlpattern-polyfill": "10.0.0",
+				"zod": "3.23.8"
+			},
+			"peerDependencies": {
+				"devtools-protocol": "*"
+			}
+		},
+		"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==",
+			"dev": true,
+			"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.6",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+			"integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ms": "2.1.2"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": 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==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"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==",
 			"dev": true,
+			"license": "BSD-2-Clause",
 			"dependencies": {
 				"debug": "^4.1.1",
 				"get-stream": "^5.1.0",
@@ -42377,99 +42558,199 @@
 				"@types/yauzl": "^2.9.1"
 			}
 		},
-		"node_modules/puppeteer-core/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==",
+		"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==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
-				"locate-path": "^5.0.0",
-				"path-exists": "^4.0.0"
+				"agent-base": "^7.1.0",
+				"debug": "^4.3.4"
 			},
 			"engines": {
-				"node": ">=8"
+				"node": ">= 14"
 			}
 		},
-		"node_modules/puppeteer-core/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==",
+		"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==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
-				"p-locate": "^4.1.0"
+				"agent-base": "^7.0.2",
+				"debug": "4"
 			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"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==",
+			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=8"
 			}
 		},
-		"node_modules/puppeteer-core/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==",
+		"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==",
 			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"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==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/puppeteer-core/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==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"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==",
+			"dev": true,
+			"license": "MIT",
 			"dependencies": {
-				"p-try": "^2.0.0"
+				"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": ">=6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
+				"node": ">= 14"
 			}
 		},
-		"node_modules/puppeteer-core/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==",
+		"node_modules/puppeteer-core/node_modules/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,
+			"license": "MIT",
 			"dependencies": {
-				"p-limit": "^2.2.0"
+				"end-of-stream": "^1.1.0",
+				"once": "^1.3.1"
+			}
+		},
+		"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==",
+			"dev": true,
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
 			},
 			"engines": {
-				"node": ">=8"
+				"node": ">=10"
 			}
 		},
-		"node_modules/puppeteer-core/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==",
+		"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==",
 			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"agent-base": "^7.1.1",
+				"debug": "^4.3.4",
+				"socks": "^2.8.3"
+			},
 			"engines": {
-				"node": ">=6"
+				"node": ">= 14"
 			}
 		},
-		"node_modules/puppeteer-core/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==",
+		"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==",
 			"dev": true,
+			"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/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==",
+		"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==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
-				"find-up": "^4.0.0"
+				"pump": "^3.0.0",
+				"tar-stream": "^3.1.5"
+			},
+			"optionalDependencies": {
+				"bare-fs": "^2.1.1",
+				"bare-path": "^2.1.0"
+			}
+		},
+		"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==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"b4a": "^1.6.4",
+				"fast-fifo": "^1.2.0",
+				"streamx": "^2.15.0"
+			}
+		},
+		"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==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
 			},
 			"engines": {
-				"node": ">=8"
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
 			}
 		},
 		"node_modules/puppeteer-core/node_modules/ws": {
-			"version": "8.5.0",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz",
-			"integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
+			"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"
+				"utf-8-validate": ">=5.0.2"
 			},
 			"peerDependenciesMeta": {
 				"bufferutil": {
@@ -42480,6 +42761,45 @@
 				}
 			}
 		},
+		"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==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"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==",
+			"dev": true,
+			"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"
+			}
+		},
+		"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==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/pure-rand": {
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-6.0.2.tgz",
@@ -42552,12 +42872,6 @@
 				"node": ">=0.4.x"
 			}
 		},
-		"node_modules/querystringify": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-			"integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
-			"dev": true
-		},
 		"node_modules/queue": {
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
@@ -43444,6 +43758,15 @@
 				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
+		"node_modules/read-cache": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+			"integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+			"dev": true,
+			"dependencies": {
+				"pify": "^2.3.0"
+			}
+		},
 		"node_modules/read-cmd-shim": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-4.0.0.tgz",
@@ -44603,9 +44926,9 @@
 			}
 		},
 		"node_modules/rrweb-cssom": {
-			"version": "0.6.0",
-			"resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
-			"integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==",
+			"version": "0.7.1",
+			"resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz",
+			"integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==",
 			"dev": true
 		},
 		"node_modules/rtlcss": {
@@ -47096,128 +47419,135 @@
 			}
 		},
 		"node_modules/stylelint": {
-			"version": "14.2.0",
-			"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.2.0.tgz",
-			"integrity": "sha512-i0DrmDXFNpDsWiwx6SPRs4/pyw4kvZgqpDGvsTslQMY7hpUl6r33aQvNSn6cnTg2wtZ9rreFElI7XAKpOWi1vQ==",
+			"version": "16.8.2",
+			"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.8.2.tgz",
+			"integrity": "sha512-fInKATippQhcSm7AB+T32GpI+626yohrg33GkFT/5jzliUw5qhlwZq2UQQwgl3HsHrf09oeARi0ZwgY/UWEv9A==",
 			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/stylelint"
+				},
+				{
+					"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.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",
+				"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.0.4",
+				"globby": "^11.1.0",
 				"globjoin": "^0.1.4",
-				"html-tags": "^3.1.0",
-				"ignore": "^5.2.0",
-				"import-lazy": "^4.0.0",
+				"html-tags": "^3.3.1",
+				"ignore": "^5.3.2",
 				"imurmurhash": "^0.1.4",
 				"is-plain-object": "^5.0.0",
-				"known-css-properties": "^0.24.0",
+				"known-css-properties": "^0.34.0",
 				"mathml-tag-names": "^2.1.3",
-				"meow": "^9.0.0",
-				"micromatch": "^4.0.4",
+				"meow": "^13.2.0",
+				"micromatch": "^4.0.7",
 				"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",
+				"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",
-				"specificity": "^0.4.1",
 				"string-width": "^4.2.3",
-				"strip-ansi": "^6.0.1",
-				"style-search": "^0.1.0",
+				"strip-ansi": "^7.1.0",
+				"supports-hyperlinks": "^3.0.0",
 				"svg-tags": "^1.0.0",
-				"table": "^6.7.5",
-				"v8-compile-cache": "^2.3.0",
-				"write-file-atomic": "^3.0.3"
+				"table": "^6.8.2",
+				"write-file-atomic": "^5.0.1"
 			},
 			"bin": {
-				"stylelint": "bin/stylelint.js"
+				"stylelint": "bin/stylelint.mjs"
 			},
 			"engines": {
-				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/stylelint"
+				"node": ">=18.12.0"
 			}
 		},
-		"node_modules/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,
-			"peerDependencies": {
-				"stylelint": "^14.0.0"
-			}
+		"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==",
+			"dev": true
 		},
-		"node_modules/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/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==",
+			"dev": true
+		},
+		"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==",
 			"dev": true,
 			"dependencies": {
-				"postcss-scss": "^4.0.2",
-				"stylelint-config-recommended": "^6.0.0",
-				"stylelint-scss": "^4.0.0"
+				"env-paths": "^2.2.1",
+				"import-fresh": "^3.3.0",
+				"js-yaml": "^4.1.0",
+				"parse-json": "^5.2.0"
 			},
-			"peerDependencies": {
-				"stylelint": "^14.0.0"
-			}
-		},
-		"node_modules/stylelint-config-recommended-scss/node_modules/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,
 			"engines": {
-				"node": ">=12.0"
+				"node": ">=14"
 			},
 			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/postcss/"
+				"url": "https://github.com/sponsors/d-fischer"
 			},
 			"peerDependencies": {
-				"postcss": "^8.3.3"
+				"typescript": ">=4.9.5"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
 			}
 		},
-		"node_modules/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/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==",
 			"dev": true,
 			"dependencies": {
-				"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"
+				"mdn-data": "2.0.30",
+				"source-map-js": "^1.0.1"
 			},
-			"peerDependencies": {
-				"stylelint": "^14.0.0"
+			"engines": {
+				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
 			}
 		},
-		"node_modules/stylelint-scss/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/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==",
-			"dev": true
+		"node_modules/stylelint/node_modules/debug": {
+			"version": "4.3.6",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+			"integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+			"dev": true,
+			"dependencies": {
+				"ms": "2.1.2"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
 		},
 		"node_modules/stylelint/node_modules/emoji-regex": {
 			"version": "8.0.0",
@@ -47225,16 +47555,75 @@
 			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
 			"dev": true
 		},
-		"node_modules/stylelint/node_modules/get-stdin": {
-			"version": "8.0.0",
-			"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz",
-			"integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==",
+		"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==",
+			"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"
+			}
+		},
+		"node_modules/stylelint/node_modules/file-entry-cache": {
+			"version": "9.0.0",
+			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-9.0.0.tgz",
+			"integrity": "sha512-6MgEugi8p2tiUhqO7GnPsmbCCzj0YRCwwaTbpGRyKZesjRSzkqkAE9fPp7V2yMs5hwfgbQLgdvSSkGNg1s5Uvw==",
 			"dev": true,
+			"dependencies": {
+				"flat-cache": "^5.0.0"
+			},
 			"engines": {
-				"node": ">=10"
+				"node": ">=18"
+			}
+		},
+		"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==",
+			"dev": true,
+			"dependencies": {
+				"flatted": "^3.3.1",
+				"keyv": "^4.5.4"
 			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
+			"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==",
+			"dev": true,
+			"dependencies": {
+				"is-glob": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"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==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"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==",
+			"dev": true,
+			"engines": {
+				"node": ">= 4"
 			}
 		},
 		"node_modules/stylelint/node_modules/is-fullwidth-code-point": {
@@ -47246,45 +47635,68 @@
 				"node": ">=8"
 			}
 		},
-		"node_modules/stylelint/node_modules/meow": {
-			"version": "9.0.0",
-			"resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
-			"integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
+		"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==",
 			"dev": true,
 			"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"
+				"argparse": "^2.0.1"
 			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
+		"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==",
+			"dev": true
+		},
+		"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==",
+			"dev": true,
 			"engines": {
-				"node": ">=10"
+				"node": ">=18"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/stylelint/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==",
+		"node_modules/stylelint/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==",
+			"dev": true
+		},
+		"node_modules/stylelint/node_modules/postcss": {
+			"version": "8.4.41",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
+			"integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
 			"dev": true,
+			"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": {
-				"hosted-git-info": "^4.0.1",
-				"is-core-module": "^2.5.0",
-				"semver": "^7.3.4",
-				"validate-npm-package-license": "^3.0.1"
+				"nanoid": "^3.3.7",
+				"picocolors": "^1.0.1",
+				"source-map-js": "^1.2.0"
 			},
 			"engines": {
-				"node": ">=10"
+				"node": "^10 || ^12 || >=14"
 			}
 		},
 		"node_modules/stylelint/node_modules/postcss-value-parser": {
@@ -47302,6 +47714,27 @@
 				"node": ">=8"
 			}
 		},
+		"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==",
+			"dev": true,
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/stylelint/node_modules/source-map-js": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+			"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.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",
@@ -47316,28 +47749,84 @@
 				"node": ">=8"
 			}
 		},
-		"node_modules/stylelint/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==",
+		"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==",
 			"dev": true,
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
 			"engines": {
-				"node": ">=10"
+				"node": ">=8"
+			}
+		},
+		"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==",
+			"dev": true,
+			"dependencies": {
+				"ansi-regex": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
+			}
+		},
+		"node_modules/stylelint/node_modules/strip-ansi/node_modules/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,
+			"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==",
+			"dev": true,
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"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==",
+			"dev": true,
+			"dependencies": {
+				"has-flag": "^4.0.0",
+				"supports-color": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=14.18"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
 		"node_modules/stylelint/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==",
+			"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",
-				"is-typedarray": "^1.0.0",
-				"signal-exit": "^3.0.2",
-				"typedarray-to-buffer": "^3.1.5"
+				"signal-exit": "^4.0.1"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
 		"node_modules/stylis": {
@@ -47530,9 +48019,9 @@
 			}
 		},
 		"node_modules/table": {
-			"version": "6.8.0",
-			"resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
-			"integrity": "sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==",
+			"version": "6.8.2",
+			"resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz",
+			"integrity": "sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==",
 			"dev": true,
 			"dependencies": {
 				"ajv": "^8.0.1",
@@ -47920,10 +48409,9 @@
 			}
 		},
 		"node_modules/terser": {
-			"version": "5.31.2",
-			"resolved": "https://registry.npmjs.org/terser/-/terser-5.31.2.tgz",
-			"integrity": "sha512-LGyRZVFm/QElZHy/CPr/O4eNZOZIzsrQ92y4v9UJe/pFJjypje2yI3C2FmPtvUEnhadlSbmG2nXtdcjHOjCfxw==",
-			"license": "BSD-2-Clause",
+			"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",
@@ -48191,6 +48679,24 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/tldts": {
+			"version": "6.1.50",
+			"resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.50.tgz",
+			"integrity": "sha512-q9GOap6q3KCsLMdOjXhWU5jVZ8/1dIib898JBRLsN+tBhENpBDcAVQbE0epADOjw11FhQQy9AcbqKGBQPUfTQA==",
+			"dev": true,
+			"dependencies": {
+				"tldts-core": "^6.1.50"
+			},
+			"bin": {
+				"tldts": "bin/cli.js"
+			}
+		},
+		"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==",
+			"dev": true
+		},
 		"node_modules/tmp": {
 			"version": "0.0.33",
 			"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -48297,6 +48803,18 @@
 				"node": ">=6"
 			}
 		},
+		"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==",
+			"dev": true,
+			"dependencies": {
+				"tldts": "^6.1.32"
+			},
+			"engines": {
+				"node": ">=16"
+			}
+		},
 		"node_modules/tr46": {
 			"version": "0.0.3",
 			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -48634,6 +49152,12 @@
 				"node": ">= 10"
 			}
 		},
+		"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==",
+			"dev": true
+		},
 		"node_modules/typedarray": {
 			"version": "0.0.6",
 			"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -48750,6 +49274,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"
 			},
@@ -49281,16 +49806,6 @@
 				"url": "https://opencollective.com/webpack"
 			}
 		},
-		"node_modules/url-parse": {
-			"version": "1.5.10",
-			"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-			"integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
-			"dev": true,
-			"dependencies": {
-				"querystringify": "^2.1.1",
-				"requires-port": "^1.0.0"
-			}
-		},
 		"node_modules/url-template": {
 			"version": "2.0.8",
 			"resolved": "https://registry.npmjs.org/url-template/-/url-template-2.0.8.tgz",
@@ -49319,6 +49834,12 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"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==",
+			"dev": true
+		},
 		"node_modules/use": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -49356,18 +49877,6 @@
 				"react": ">=16.8"
 			}
 		},
-		"node_modules/use-lilius": {
-			"version": "2.0.5",
-			"resolved": "https://registry.npmjs.org/use-lilius/-/use-lilius-2.0.5.tgz",
-			"integrity": "sha512-IbPjJe4T6B0zQV6ahftVtHvCAxi6RAuDpEcO8TmnHh4nBtx7JbGdpbgXWOUj/9YjrzEbdT/lW7JWcBVbX3MbrA==",
-			"dependencies": {
-				"date-fns": "^3.6.0"
-			},
-			"peerDependencies": {
-				"react": "*",
-				"react-dom": "*"
-			}
-		},
 		"node_modules/use-memo-one": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.1.tgz",
@@ -49484,7 +49993,6 @@
 			"version": "9.0.1",
 			"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
 			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
-			"dev": true,
 			"funding": [
 				"https://github.com/sponsors/broofa",
 				"https://github.com/sponsors/ctavan"
@@ -49624,15 +50132,15 @@
 			"dev": true
 		},
 		"node_modules/w3c-xmlserializer": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
-			"integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+			"integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
 			"dev": true,
 			"dependencies": {
-				"xml-name-validator": "^4.0.0"
+				"xml-name-validator": "^5.0.0"
 			},
 			"engines": {
-				"node": ">=14"
+				"node": ">=18"
 			}
 		},
 		"node_modules/wait-port": {
@@ -51246,15 +51754,15 @@
 			}
 		},
 		"node_modules/whatwg-encoding": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
-			"integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+			"integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
 			"dev": true,
 			"dependencies": {
 				"iconv-lite": "0.6.3"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/whatwg-fetch": {
@@ -51263,12 +51771,12 @@
 			"integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg=="
 		},
 		"node_modules/whatwg-mimetype": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
-			"integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+			"integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
 			"dev": true,
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/whatwg-url": {
@@ -51775,12 +52283,12 @@
 			"dev": true
 		},
 		"node_modules/xml-name-validator": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
-			"integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+			"integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
 			"dev": true,
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/xmlbuilder": {
@@ -52054,7 +52562,7 @@
 		},
 		"packages/a11y": {
 			"name": "@wordpress/a11y",
-			"version": "4.3.0",
+			"version": "4.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52068,7 +52576,7 @@
 		},
 		"packages/annotations": {
 			"name": "@wordpress/annotations",
-			"version": "3.3.0",
+			"version": "3.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52096,7 +52604,7 @@
 		},
 		"packages/api-fetch": {
 			"name": "@wordpress/api-fetch",
-			"version": "7.3.0",
+			"version": "7.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52110,7 +52618,7 @@
 		},
 		"packages/autop": {
 			"name": "@wordpress/autop",
-			"version": "4.3.0",
+			"version": "4.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -52122,7 +52630,7 @@
 		},
 		"packages/babel-plugin-import-jsx-pragma": {
 			"name": "@wordpress/babel-plugin-import-jsx-pragma",
-			"version": "5.3.0",
+			"version": "5.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -52135,7 +52643,7 @@
 		},
 		"packages/babel-plugin-makepot": {
 			"name": "@wordpress/babel-plugin-makepot",
-			"version": "6.3.0",
+			"version": "6.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -52153,7 +52661,7 @@
 		},
 		"packages/babel-preset-default": {
 			"name": "@wordpress/babel-preset-default",
-			"version": "8.3.0",
+			"version": "8.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -52176,7 +52684,7 @@
 		},
 		"packages/base-styles": {
 			"name": "@wordpress/base-styles",
-			"version": "5.3.0",
+			"version": "5.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -52186,7 +52694,7 @@
 		},
 		"packages/blob": {
 			"name": "@wordpress/blob",
-			"version": "4.3.0",
+			"version": "4.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -52198,7 +52706,7 @@
 		},
 		"packages/block-directory": {
 			"name": "@wordpress/block-directory",
-			"version": "5.3.0",
+			"version": "5.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52220,7 +52728,8 @@
 				"@wordpress/plugins": "file:../plugins",
 				"@wordpress/private-apis": "file:../private-apis",
 				"@wordpress/url": "file:../url",
-				"change-case": "^4.1.2"
+				"change-case": "^4.1.2",
+				"clsx": "^2.1.1"
 			},
 			"engines": {
 				"node": ">=18.12.0",
@@ -52233,7 +52742,7 @@
 		},
 		"packages/block-editor": {
 			"name": "@wordpress/block-editor",
-			"version": "13.3.0",
+			"version": "14.4.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52243,6 +52752,7 @@
 				"@wordpress/a11y": "file:../a11y",
 				"@wordpress/api-fetch": "file:../api-fetch",
 				"@wordpress/blob": "file:../blob",
+				"@wordpress/block-serialization-default-parser": "file:../block-serialization-default-parser",
 				"@wordpress/blocks": "file:../blocks",
 				"@wordpress/commands": "file:../commands",
 				"@wordpress/components": "file:../components",
@@ -52276,8 +52786,9 @@
 				"diff": "^4.0.2",
 				"fast-deep-equal": "^3.1.3",
 				"memize": "^2.1.0",
+				"parsel-js": "^1.1.2",
 				"postcss": "^8.4.21",
-				"postcss-prefixwrap": "^1.41.0",
+				"postcss-prefix-selector": "^1.16.0",
 				"postcss-urlrebase": "^1.4.0",
 				"react-autosize-textarea": "^7.1.0",
 				"react-easy-crop": "^5.0.6",
@@ -52330,7 +52841,7 @@
 		},
 		"packages/block-library": {
 			"name": "@wordpress/block-library",
-			"version": "9.3.0",
+			"version": "9.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52396,7 +52907,7 @@
 		},
 		"packages/block-serialization-default-parser": {
 			"name": "@wordpress/block-serialization-default-parser",
-			"version": "5.3.0",
+			"version": "5.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -52408,7 +52919,7 @@
 		},
 		"packages/block-serialization-spec-parser": {
 			"name": "@wordpress/block-serialization-spec-parser",
-			"version": "5.3.0",
+			"version": "5.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"pegjs": "^0.10.0",
@@ -52421,7 +52932,7 @@
 		},
 		"packages/blocks": {
 			"name": "@wordpress/blocks",
-			"version": "13.3.0",
+			"version": "13.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52475,7 +52986,7 @@
 		},
 		"packages/browserslist-config": {
 			"name": "@wordpress/browserslist-config",
-			"version": "6.3.0",
+			"version": "6.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -52485,7 +52996,7 @@
 		},
 		"packages/commands": {
 			"name": "@wordpress/commands",
-			"version": "1.3.0",
+			"version": "1.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52658,10 +53169,10 @@
 		},
 		"packages/components": {
 			"name": "@wordpress/components",
-			"version": "28.3.0",
+			"version": "28.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"@ariakit/react": "^0.3.12",
+				"@ariakit/react": "^0.4.10",
 				"@babel/runtime": "^7.16.0",
 				"@emotion/cache": "^11.7.1",
 				"@emotion/css": "^11.7.1",
@@ -52705,7 +53216,6 @@
 				"re-resizable": "^6.4.0",
 				"react-colorful": "^5.3.1",
 				"remove-accents": "^0.5.0",
-				"use-lilius": "^2.0.5",
 				"uuid": "^9.0.1"
 			},
 			"engines": {
@@ -52717,6 +53227,36 @@
 				"react-dom": "^18.0.0"
 			}
 		},
+		"packages/components/node_modules/@ariakit/react": {
+			"version": "0.4.10",
+			"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.10.tgz",
+			"integrity": "sha512-c1+6sNLj57aAXrBZMCVGG+OXeFrPAG0TV1jT7oPJcN/KLRs3aCuO3CCJVep/eKepFzzK01kNRGYX3wPT1TXPNw==",
+			"dependencies": {
+				"@ariakit/react-core": "0.4.10"
+			},
+			"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"
+			}
+		},
+		"packages/components/node_modules/@ariakit/react-core": {
+			"version": "0.4.10",
+			"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.10.tgz",
+			"integrity": "sha512-r6DZmtHBmSoOj848+RpBwdZy/55YxPhMhfH14JIO2OLn1F6iSFkQwR7AAGpIrlYycWJFSF7KrQu50O+SSfFJdQ==",
+			"dependencies": {
+				"@ariakit/core": "0.4.9",
+				"@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"
+			}
+		},
 		"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",
@@ -52749,7 +53289,7 @@
 		},
 		"packages/compose": {
 			"name": "@wordpress/compose",
-			"version": "7.3.0",
+			"version": "7.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52786,7 +53326,7 @@
 		},
 		"packages/core-commands": {
 			"name": "@wordpress/core-commands",
-			"version": "1.3.0",
+			"version": "1.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52799,6 +53339,7 @@
 				"@wordpress/html-entities": "file:../html-entities",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
+				"@wordpress/notices": "file:../notices",
 				"@wordpress/private-apis": "file:../private-apis",
 				"@wordpress/router": "file:../router",
 				"@wordpress/url": "file:../url"
@@ -52814,7 +53355,7 @@
 		},
 		"packages/core-data": {
 			"name": "@wordpress/core-data",
-			"version": "7.3.0",
+			"version": "7.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52833,6 +53374,7 @@
 				"@wordpress/sync": "file:../sync",
 				"@wordpress/undo-manager": "file:../undo-manager",
 				"@wordpress/url": "file:../url",
+				"@wordpress/warning": "file:../warning",
 				"change-case": "^4.1.2",
 				"equivalent-key-map": "^0.2.2",
 				"fast-deep-equal": "^3.1.3",
@@ -52858,7 +53400,7 @@
 		},
 		"packages/create-block": {
 			"name": "@wordpress/create-block",
-			"version": "4.46.0",
+			"version": "4.52.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -52886,7 +53428,7 @@
 		},
 		"packages/create-block-tutorial-template": {
 			"name": "@wordpress/create-block-tutorial-template",
-			"version": "4.3.0",
+			"version": "4.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -52896,7 +53438,7 @@
 		},
 		"packages/customize-widgets": {
 			"name": "@wordpress/customize-widgets",
-			"version": "5.3.0",
+			"version": "5.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52934,7 +53476,7 @@
 		},
 		"packages/data": {
 			"name": "@wordpress/data",
-			"version": "10.3.0",
+			"version": "10.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52963,7 +53505,7 @@
 		},
 		"packages/data-controls": {
 			"name": "@wordpress/data-controls",
-			"version": "4.3.0",
+			"version": "4.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52981,10 +53523,10 @@
 		},
 		"packages/dataviews": {
 			"name": "@wordpress/dataviews",
-			"version": "3.0.0",
+			"version": "4.5.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"@ariakit/react": "^0.3.12",
+				"@ariakit/react": "^0.4.10",
 				"@babel/runtime": "^7.16.0",
 				"@wordpress/components": "file:../components",
 				"@wordpress/compose": "file:../compose",
@@ -52994,6 +53536,7 @@
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/primitives": "file:../primitives",
 				"@wordpress/private-apis": "file:../private-apis",
+				"@wordpress/warning": "file:../warning",
 				"clsx": "^2.1.1",
 				"remove-accents": "^0.5.0"
 			},
@@ -53005,44 +53548,39 @@
 				"react": "^18.0.0"
 			}
 		},
-		"packages/dataviews/node_modules/@ariakit/core": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.1.tgz",
-			"integrity": "sha512-Rdhw0/K0x+50gFvzuMW9wp+WJxpkrgiMgegRTOZSU92bv1K+6XfQWnlieIkLt2FC7pZGrDpGlS4C7ztEVF+JRg=="
-		},
 		"packages/dataviews/node_modules/@ariakit/react": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.1.tgz",
-			"integrity": "sha512-hKfCYjc3MFW20kn2dcvejB5zbYt/uU33Teq82c414/utf5sEoeRF+bxjNku8x1baJby9/SDP6zj2IgWPuedFNA==",
+			"version": "0.4.10",
+			"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.10.tgz",
+			"integrity": "sha512-c1+6sNLj57aAXrBZMCVGG+OXeFrPAG0TV1jT7oPJcN/KLRs3aCuO3CCJVep/eKepFzzK01kNRGYX3wPT1TXPNw==",
 			"dependencies": {
-				"@ariakit/react-core": "0.4.1"
+				"@ariakit/react-core": "0.4.10"
 			},
 			"funding": {
 				"type": "opencollective",
 				"url": "https://opencollective.com/ariakit"
 			},
 			"peerDependencies": {
-				"react": "^17.0.0 || ^18.0.0",
-				"react-dom": "^17.0.0 || ^18.0.0"
+				"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+				"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 			}
 		},
 		"packages/dataviews/node_modules/@ariakit/react-core": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.1.tgz",
-			"integrity": "sha512-cwDczl9XWBloXNg0CuHmJtBfEe7qF265JE0Pwlcp8wMSY9PsJeb0mKBlTygUPKn/FsKpKGaYSI7DlDntbcZciw==",
+			"version": "0.4.10",
+			"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.10.tgz",
+			"integrity": "sha512-r6DZmtHBmSoOj848+RpBwdZy/55YxPhMhfH14JIO2OLn1F6iSFkQwR7AAGpIrlYycWJFSF7KrQu50O+SSfFJdQ==",
 			"dependencies": {
-				"@ariakit/core": "0.4.1",
+				"@ariakit/core": "0.4.9",
 				"@floating-ui/dom": "^1.0.0",
 				"use-sync-external-store": "^1.2.0"
 			},
 			"peerDependencies": {
-				"react": "^17.0.0 || ^18.0.0",
-				"react-dom": "^17.0.0 || ^18.0.0"
+				"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+				"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 			}
 		},
 		"packages/date": {
 			"name": "@wordpress/date",
-			"version": "5.3.0",
+			"version": "5.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53057,7 +53595,7 @@
 		},
 		"packages/dependency-extraction-webpack-plugin": {
 			"name": "@wordpress/dependency-extraction-webpack-plugin",
-			"version": "6.3.0",
+			"version": "6.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53073,7 +53611,7 @@
 		},
 		"packages/deprecated": {
 			"name": "@wordpress/deprecated",
-			"version": "4.3.0",
+			"version": "4.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53086,7 +53624,7 @@
 		},
 		"packages/docgen": {
 			"name": "@wordpress/docgen",
-			"version": "2.3.0",
+			"version": "2.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53108,7 +53646,7 @@
 		},
 		"packages/dom": {
 			"name": "@wordpress/dom",
-			"version": "4.3.0",
+			"version": "4.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53121,7 +53659,7 @@
 		},
 		"packages/dom-ready": {
 			"name": "@wordpress/dom-ready",
-			"version": "4.3.0",
+			"version": "4.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -53133,7 +53671,7 @@
 		},
 		"packages/e2e-test-utils": {
 			"name": "@wordpress/e2e-test-utils",
-			"version": "11.3.0",
+			"version": "11.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53156,7 +53694,7 @@
 		},
 		"packages/e2e-test-utils-playwright": {
 			"name": "@wordpress/e2e-test-utils-playwright",
-			"version": "1.3.0",
+			"version": "1.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53184,7 +53722,7 @@
 		},
 		"packages/e2e-tests": {
 			"name": "@wordpress/e2e-tests",
-			"version": "8.3.0",
+			"version": "8.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53224,7 +53762,7 @@
 		},
 		"packages/edit-post": {
 			"name": "@wordpress/edit-post",
-			"version": "8.3.0",
+			"version": "8.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53271,7 +53809,7 @@
 		},
 		"packages/edit-site": {
 			"name": "@wordpress/edit-site",
-			"version": "6.3.0",
+			"version": "6.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53333,7 +53871,7 @@
 		},
 		"packages/edit-widgets": {
 			"name": "@wordpress/edit-widgets",
-			"version": "6.3.0",
+			"version": "6.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53376,7 +53914,7 @@
 		},
 		"packages/editor": {
 			"name": "@wordpress/editor",
-			"version": "14.3.0",
+			"version": "14.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53395,6 +53933,7 @@
 				"@wordpress/deprecated": "file:../deprecated",
 				"@wordpress/dom": "file:../dom",
 				"@wordpress/element": "file:../element",
+				"@wordpress/fields": "file:../fields",
 				"@wordpress/hooks": "file:../hooks",
 				"@wordpress/html-entities": "file:../html-entities",
 				"@wordpress/i18n": "file:../i18n",
@@ -53423,7 +53962,8 @@
 				"is-plain-object": "^5.0.0",
 				"memize": "^2.1.0",
 				"react-autosize-textarea": "^7.1.0",
-				"remove-accents": "^0.5.0"
+				"remove-accents": "^0.5.0",
+				"uuid": "^9.0.1"
 			},
 			"engines": {
 				"node": ">=18.12.0",
@@ -53436,7 +53976,7 @@
 		},
 		"packages/element": {
 			"name": "@wordpress/element",
-			"version": "6.3.0",
+			"version": "6.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53455,7 +53995,7 @@
 		},
 		"packages/env": {
 			"name": "@wordpress/env",
-			"version": "10.3.0",
+			"version": "10.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53597,7 +54137,7 @@
 		},
 		"packages/escape-html": {
 			"name": "@wordpress/escape-html",
-			"version": "3.3.0",
+			"version": "3.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -53609,7 +54149,7 @@
 		},
 		"packages/eslint-plugin": {
 			"name": "@wordpress/eslint-plugin",
-			"version": "20.0.0",
+			"version": "21.2.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53650,9 +54190,45 @@
 				}
 			}
 		},
+		"packages/fields": {
+			"name": "@wordpress/fields",
+			"version": "0.1.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "^7.16.0",
+				"@wordpress/api-fetch": "file:../api-fetch",
+				"@wordpress/blob": "file:../blob",
+				"@wordpress/blocks": "file:../blocks",
+				"@wordpress/components": "file:../components",
+				"@wordpress/compose": "file:../compose",
+				"@wordpress/core-data": "file:../core-data",
+				"@wordpress/data": "file:../data",
+				"@wordpress/dataviews": "file:../dataviews",
+				"@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/patterns": "file:../patterns",
+				"@wordpress/primitives": "file:../primitives",
+				"@wordpress/private-apis": "file:../private-apis",
+				"@wordpress/url": "file:../url",
+				"@wordpress/warning": "file:../warning",
+				"change-case": "4.1.2",
+				"client-zip": "^2.4.5"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0"
+			}
+		},
 		"packages/format-library": {
 			"name": "@wordpress/format-library",
-			"version": "5.3.0",
+			"version": "5.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53680,7 +54256,7 @@
 		},
 		"packages/hooks": {
 			"name": "@wordpress/hooks",
-			"version": "4.3.0",
+			"version": "4.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -53692,7 +54268,7 @@
 		},
 		"packages/html-entities": {
 			"name": "@wordpress/html-entities",
-			"version": "4.3.0",
+			"version": "4.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -53704,7 +54280,7 @@
 		},
 		"packages/i18n": {
 			"name": "@wordpress/i18n",
-			"version": "5.3.0",
+			"version": "5.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53724,7 +54300,7 @@
 		},
 		"packages/icons": {
 			"name": "@wordpress/icons",
-			"version": "10.3.0",
+			"version": "10.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53738,11 +54314,10 @@
 		},
 		"packages/interactivity": {
 			"name": "@wordpress/interactivity",
-			"version": "6.3.0",
+			"version": "6.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@preact/signals": "^1.2.2",
-				"deepsignal": "^1.4.0",
 				"preact": "^10.19.3"
 			},
 			"engines": {
@@ -53752,9 +54327,10 @@
 		},
 		"packages/interactivity-router": {
 			"name": "@wordpress/interactivity-router",
-			"version": "2.3.0",
+			"version": "2.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
+				"@wordpress/a11y": "file:../a11y",
 				"@wordpress/interactivity": "file:../interactivity"
 			},
 			"engines": {
@@ -53777,31 +54353,6 @@
 				"preact": "10.x"
 			}
 		},
-		"packages/interactivity/node_modules/deepsignal": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/deepsignal/-/deepsignal-1.4.0.tgz",
-			"integrity": "sha512-x0XUMT48s+xQRLc2fPFfxnYLCJ46vffw47OQ5NcHFzacOjfW5eA0NrEmI0bhQHL6MgUHkBVT4TIiWTVwzTEwpg==",
-			"peerDependencies": {
-				"@preact/signals": "^1.1.4",
-				"@preact/signals-core": "^1.5.1",
-				"@preact/signals-react": "^1.3.8 || ^2.0.0",
-				"preact": "^10.16.0"
-			},
-			"peerDependenciesMeta": {
-				"@preact/signals": {
-					"optional": true
-				},
-				"@preact/signals-core": {
-					"optional": true
-				},
-				"@preact/signals-react": {
-					"optional": true
-				},
-				"preact": {
-					"optional": true
-				}
-			}
-		},
 		"packages/interactivity/node_modules/preact": {
 			"version": "10.19.3",
 			"resolved": "https://registry.npmjs.org/preact/-/preact-10.19.3.tgz",
@@ -53813,7 +54364,7 @@
 		},
 		"packages/interface": {
 			"name": "@wordpress/interface",
-			"version": "6.3.0",
+			"version": "6.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53842,7 +54393,7 @@
 		},
 		"packages/is-shallow-equal": {
 			"name": "@wordpress/is-shallow-equal",
-			"version": "5.3.0",
+			"version": "5.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -53854,7 +54405,7 @@
 		},
 		"packages/jest-console": {
 			"name": "@wordpress/jest-console",
-			"version": "8.3.0",
+			"version": "8.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53871,7 +54422,7 @@
 		},
 		"packages/jest-preset-default": {
 			"name": "@wordpress/jest-preset-default",
-			"version": "12.3.0",
+			"version": "12.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53889,7 +54440,7 @@
 		},
 		"packages/jest-puppeteer-axe": {
 			"name": "@wordpress/jest-puppeteer-axe",
-			"version": "7.3.0",
+			"version": "7.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53912,7 +54463,7 @@
 		},
 		"packages/keyboard-shortcuts": {
 			"name": "@wordpress/keyboard-shortcuts",
-			"version": "5.3.0",
+			"version": "5.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53930,7 +54481,7 @@
 		},
 		"packages/keycodes": {
 			"name": "@wordpress/keycodes",
-			"version": "4.3.0",
+			"version": "4.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53943,7 +54494,7 @@
 		},
 		"packages/lazy-import": {
 			"name": "@wordpress/lazy-import",
-			"version": "2.3.0",
+			"version": "2.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53958,7 +54509,7 @@
 		},
 		"packages/list-reusable-blocks": {
 			"name": "@wordpress/list-reusable-blocks",
-			"version": "5.3.0",
+			"version": "5.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53981,7 +54532,7 @@
 		},
 		"packages/media-utils": {
 			"name": "@wordpress/media-utils",
-			"version": "5.3.0",
+			"version": "5.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53997,7 +54548,7 @@
 		},
 		"packages/notices": {
 			"name": "@wordpress/notices",
-			"version": "5.3.0",
+			"version": "5.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54014,7 +54565,7 @@
 		},
 		"packages/npm-package-json-lint-config": {
 			"name": "@wordpress/npm-package-json-lint-config",
-			"version": "5.3.0",
+			"version": "5.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -54027,7 +54578,7 @@
 		},
 		"packages/nux": {
 			"name": "@wordpress/nux",
-			"version": "9.3.0",
+			"version": "9.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54050,7 +54601,7 @@
 		},
 		"packages/patterns": {
 			"name": "@wordpress/patterns",
-			"version": "2.3.0",
+			"version": "2.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54080,7 +54631,7 @@
 		},
 		"packages/plugins": {
 			"name": "@wordpress/plugins",
-			"version": "7.3.0",
+			"version": "7.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54103,7 +54654,7 @@
 		},
 		"packages/postcss-plugins-preset": {
 			"name": "@wordpress/postcss-plugins-preset",
-			"version": "5.3.0",
+			"version": "5.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54120,7 +54671,7 @@
 		},
 		"packages/postcss-themes": {
 			"name": "@wordpress/postcss-themes",
-			"version": "6.3.0",
+			"version": "6.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -54133,7 +54684,7 @@
 		},
 		"packages/preferences": {
 			"name": "@wordpress/preferences",
-			"version": "4.3.0",
+			"version": "4.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54159,7 +54710,7 @@
 		},
 		"packages/preferences-persistence": {
 			"name": "@wordpress/preferences-persistence",
-			"version": "2.3.0",
+			"version": "2.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54172,7 +54723,7 @@
 		},
 		"packages/prettier-config": {
 			"name": "@wordpress/prettier-config",
-			"version": "4.3.0",
+			"version": "4.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -54185,7 +54736,7 @@
 		},
 		"packages/primitives": {
 			"name": "@wordpress/primitives",
-			"version": "4.3.0",
+			"version": "4.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54195,11 +54746,14 @@
 			"engines": {
 				"node": ">=18.12.0",
 				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0"
 			}
 		},
 		"packages/priority-queue": {
 			"name": "@wordpress/priority-queue",
-			"version": "3.3.0",
+			"version": "3.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54212,7 +54766,7 @@
 		},
 		"packages/private-apis": {
 			"name": "@wordpress/private-apis",
-			"version": "1.3.0",
+			"version": "1.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -54224,7 +54778,7 @@
 		},
 		"packages/project-management-automation": {
 			"name": "@wordpress/project-management-automation",
-			"version": "2.3.0",
+			"version": "2.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54254,7 +54808,7 @@
 		},
 		"packages/react-i18n": {
 			"name": "@wordpress/react-i18n",
-			"version": "4.3.0",
+			"version": "4.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54410,7 +54964,7 @@
 		},
 		"packages/readable-js-assets-webpack-plugin": {
 			"name": "@wordpress/readable-js-assets-webpack-plugin",
-			"version": "3.3.0",
+			"version": "3.9.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -54423,7 +54977,7 @@
 		},
 		"packages/redux-routine": {
 			"name": "@wordpress/redux-routine",
-			"version": "5.3.0",
+			"version": "5.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54468,7 +55022,7 @@
 		},
 		"packages/reusable-blocks": {
 			"name": "@wordpress/reusable-blocks",
-			"version": "5.3.0",
+			"version": "5.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54495,7 +55049,7 @@
 		},
 		"packages/rich-text": {
 			"name": "@wordpress/rich-text",
-			"version": "7.3.0",
+			"version": "7.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54519,7 +55073,7 @@
 		},
 		"packages/router": {
 			"name": "@wordpress/router",
-			"version": "1.3.0",
+			"version": "1.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54538,7 +55092,7 @@
 		},
 		"packages/scripts": {
 			"name": "@wordpress/scripts",
-			"version": "28.3.0",
+			"version": "30.1.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54583,9 +55137,10 @@
 				"npm-package-json-lint": "^6.4.0",
 				"npm-packlist": "^3.0.0",
 				"postcss": "^8.4.5",
+				"postcss-import": "^16.1.0",
 				"postcss-loader": "^6.2.1",
 				"prettier": "npm:wp-prettier@3.0.3",
-				"puppeteer-core": "^13.2.0",
+				"puppeteer-core": "^23.1.0",
 				"react-refresh": "^0.14.0",
 				"read-pkg-up": "^7.0.1",
 				"resolve-bin": "^0.4.0",
@@ -54594,7 +55149,7 @@
 				"sass-loader": "^12.1.0",
 				"schema-utils": "^4.2.0",
 				"source-map-loader": "^3.0.0",
-				"stylelint": "^14.2.0",
+				"stylelint": "^16.8.2",
 				"terser-webpack-plugin": "^5.3.9",
 				"url-loader": "^4.1.1",
 				"webpack": "^5.88.2",
@@ -54610,7 +55165,7 @@
 				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
-				"@playwright/test": "^1.45.1",
+				"@playwright/test": "^1.47.0",
 				"react": "^18.0.0",
 				"react-dom": "^18.0.0"
 			}
@@ -54992,7 +55547,7 @@
 		},
 		"packages/server-side-render": {
 			"name": "@wordpress/server-side-render",
-			"version": "5.3.0",
+			"version": "5.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55018,7 +55573,7 @@
 		},
 		"packages/shortcode": {
 			"name": "@wordpress/shortcode",
-			"version": "4.3.0",
+			"version": "4.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55031,7 +55586,7 @@
 		},
 		"packages/style-engine": {
 			"name": "@wordpress/style-engine",
-			"version": "2.3.0",
+			"version": "2.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55044,24 +55599,125 @@
 		},
 		"packages/stylelint-config": {
 			"name": "@wordpress/stylelint-config",
-			"version": "22.3.0",
+			"version": "23.1.0",
 			"dev": true,
 			"license": "MIT",
 			"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"
 			},
 			"engines": {
 				"node": ">=18.12.0",
 				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
-				"stylelint": "^14.2"
+				"stylelint": "^16.8.2"
+			}
+		},
+		"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==",
+			"dev": true,
+			"dependencies": {
+				"mdn-data": "2.0.30",
+				"source-map-js": "^1.0.1"
+			},
+			"engines": {
+				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+			}
+		},
+		"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==",
+			"dev": true
+		},
+		"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==",
+			"dev": true
+		},
+		"packages/stylelint-config/node_modules/source-map-js": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+			"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"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==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/stylelint"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/stylelint"
+				}
+			],
+			"engines": {
+				"node": ">=18.12.0"
+			},
+			"peerDependencies": {
+				"stylelint": "^16.1.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==",
+			"dev": true,
+			"dependencies": {
+				"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
+				}
+			}
+		},
+		"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==",
+			"dev": true,
+			"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"
 			}
 		},
 		"packages/sync": {
 			"name": "@wordpress/sync",
-			"version": "1.3.0",
+			"version": "1.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55082,7 +55738,7 @@
 		},
 		"packages/token-list": {
 			"name": "@wordpress/token-list",
-			"version": "3.3.0",
+			"version": "3.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -55094,7 +55750,7 @@
 		},
 		"packages/undo-manager": {
 			"name": "@wordpress/undo-manager",
-			"version": "1.3.0",
+			"version": "1.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55107,7 +55763,7 @@
 		},
 		"packages/url": {
 			"name": "@wordpress/url",
-			"version": "4.3.0",
+			"version": "4.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55120,7 +55776,7 @@
 		},
 		"packages/viewport": {
 			"name": "@wordpress/viewport",
-			"version": "6.3.0",
+			"version": "6.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55138,7 +55794,7 @@
 		},
 		"packages/warning": {
 			"name": "@wordpress/warning",
-			"version": "3.3.0",
+			"version": "3.9.0",
 			"license": "GPL-2.0-or-later",
 			"engines": {
 				"node": ">=18.12.0",
@@ -55147,7 +55803,7 @@
 		},
 		"packages/widgets": {
 			"name": "@wordpress/widgets",
-			"version": "4.3.0",
+			"version": "4.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55175,7 +55831,7 @@
 		},
 		"packages/wordcount": {
 			"name": "@wordpress/wordcount",
-			"version": "4.3.0",
+			"version": "4.9.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -56161,36 +56817,18 @@
 			}
 		},
 		"@ariakit/core": {
-			"version": "0.3.10",
-			"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.3.10.tgz",
-			"integrity": "sha512-AcN+GSoVXuUOzKx5d3xPL3YsEHevh4PIO6QIt/mg/nRX1XQ6cvxQEiAjO/BJQm+/MVl7/VbuGBoTFjr0tPU6NQ=="
-		},
-		"@ariakit/react": {
-			"version": "0.3.12",
-			"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.3.12.tgz",
-			"integrity": "sha512-HxKMZZhWSkwwS/Sh9OdWyuNKQ2tjDAIQIy2KVI7IRa8ZQ6ze/4g3YLUHbfCxO7oDupXHfXaeZ4hWx8lP7l1U/g==",
-			"requires": {
-				"@ariakit/react-core": "0.3.12"
-			}
-		},
-		"@ariakit/react-core": {
-			"version": "0.3.12",
-			"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.3.12.tgz",
-			"integrity": "sha512-w6P1A7TYb1fKUe9QbwaoTOWofl13g7TEuXdV4JyefJCQL1e9HQdEw9UL67I8aXRo8/cFHH94/z0N37t8hw5Ogg==",
-			"requires": {
-				"@ariakit/core": "0.3.10",
-				"@floating-ui/dom": "^1.0.0",
-				"use-sync-external-store": "^1.2.0"
-			}
+			"version": "0.4.9",
+			"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.9.tgz",
+			"integrity": "sha512-nV0B/OTK/0iB+P9RC7fudznYZ8eR6rR1F912Zc54e3+wSW5RrRvNOiRxyMrgENidd4R7cCMDw77XJLSBLKgEPQ=="
 		},
 		"@ariakit/test": {
-			"version": "0.3.7",
-			"resolved": "https://registry.npmjs.org/@ariakit/test/-/test-0.3.7.tgz",
-			"integrity": "sha512-rOa9pJA0ZfPPSI4SkDX41CsBcvxs6BmxgzFEElZWZo/uBBqtnr8ZL4oe5HySeZKEAHRH86XDqfxFISkhV76m5g==",
+			"version": "0.4.2",
+			"resolved": "https://registry.npmjs.org/@ariakit/test/-/test-0.4.2.tgz",
+			"integrity": "sha512-WXAAiAyTaHV9klntOB81Y+YHyA5iGxy9wXCmjQOfYK5InsuIour+7TVXICUxn2NF0XD6j6OoEJbCVDJ2Y46xEA==",
 			"dev": true,
 			"requires": {
-				"@ariakit/core": "0.3.10",
-				"@testing-library/dom": "^8.0.0 || ^9.0.0"
+				"@ariakit/core": "0.4.9",
+				"@testing-library/dom": "^8.0.0 || ^9.0.0 || ^10.0.0"
 			}
 		},
 		"@aw-web-design/x-default-browser": {
@@ -57950,6 +58588,30 @@
 			"integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
 			"dev": true
 		},
+		"@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==",
+			"dev": true
+		},
+		"@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==",
+			"dev": true
+		},
+		"@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==",
+			"dev": true
+		},
+		"@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==",
+			"dev": true
+		},
 		"@dabh/diagnostics": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.3.tgz",
@@ -57967,6 +58629,12 @@
 			"integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
 			"dev": true
 		},
+		"@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==",
+			"dev": true
+		},
 		"@egjs/hammerjs": {
 			"version": "2.0.17",
 			"resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
@@ -60041,12 +60709,12 @@
 			}
 		},
 		"@playwright/test": {
-			"version": "1.45.1",
-			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.1.tgz",
-			"integrity": "sha512-Wo1bWTzQvGA7LyKGIZc8nFSTFf2TkthGIFBR+QVNilvwouGzFd4PYukZe3rvf5PSqjHi1+1NyKSDZKcQWETzaA==",
+			"version": "1.47.0",
+			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.47.0.tgz",
+			"integrity": "sha512-SgAdlSwYVpToI4e/IH19IHHWvoijAYH5hu2MWSXptRypLSnzj51PcGD+rsOXFayde4P9ZLi+loXVwArg6IUkCA==",
 			"dev": true,
 			"requires": {
-				"playwright": "1.45.1"
+				"playwright": "1.47.0"
 			}
 		},
 		"@pmmmwh/react-refresh-webpack-plugin": {
@@ -64534,6 +65202,30 @@
 				"file-system-cache": "2.3.0"
 			}
 		},
+		"@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==",
+			"dev": true,
+			"requires": {
+				"@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"
+			},
+			"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
+				}
+			}
+		},
 		"@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",
@@ -67248,7 +67940,8 @@
 				"@wordpress/plugins": "file:../plugins",
 				"@wordpress/private-apis": "file:../private-apis",
 				"@wordpress/url": "file:../url",
-				"change-case": "^4.1.2"
+				"change-case": "^4.1.2",
+				"clsx": "^2.1.1"
 			}
 		},
 		"@wordpress/block-editor": {
@@ -67261,6 +67954,7 @@
 				"@wordpress/a11y": "file:../a11y",
 				"@wordpress/api-fetch": "file:../api-fetch",
 				"@wordpress/blob": "file:../blob",
+				"@wordpress/block-serialization-default-parser": "file:../block-serialization-default-parser",
 				"@wordpress/blocks": "file:../blocks",
 				"@wordpress/commands": "file:../commands",
 				"@wordpress/components": "file:../components",
@@ -67294,8 +67988,9 @@
 				"diff": "^4.0.2",
 				"fast-deep-equal": "^3.1.3",
 				"memize": "^2.1.0",
+				"parsel-js": "^1.1.2",
 				"postcss": "^8.4.21",
-				"postcss-prefixwrap": "^1.41.0",
+				"postcss-prefix-selector": "^1.16.0",
 				"postcss-urlrebase": "^1.4.0",
 				"react-autosize-textarea": "^7.1.0",
 				"react-easy-crop": "^5.0.6",
@@ -67538,7 +68233,7 @@
 		"@wordpress/components": {
 			"version": "file:packages/components",
 			"requires": {
-				"@ariakit/react": "^0.3.12",
+				"@ariakit/react": "^0.4.10",
 				"@babel/runtime": "^7.16.0",
 				"@emotion/cache": "^11.7.1",
 				"@emotion/css": "^11.7.1",
@@ -67582,10 +68277,27 @@
 				"re-resizable": "^6.4.0",
 				"react-colorful": "^5.3.1",
 				"remove-accents": "^0.5.0",
-				"use-lilius": "^2.0.5",
 				"uuid": "^9.0.1"
 			},
 			"dependencies": {
+				"@ariakit/react": {
+					"version": "0.4.10",
+					"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.10.tgz",
+					"integrity": "sha512-c1+6sNLj57aAXrBZMCVGG+OXeFrPAG0TV1jT7oPJcN/KLRs3aCuO3CCJVep/eKepFzzK01kNRGYX3wPT1TXPNw==",
+					"requires": {
+						"@ariakit/react-core": "0.4.10"
+					}
+				},
+				"@ariakit/react-core": {
+					"version": "0.4.10",
+					"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.10.tgz",
+					"integrity": "sha512-r6DZmtHBmSoOj848+RpBwdZy/55YxPhMhfH14JIO2OLn1F6iSFkQwR7AAGpIrlYycWJFSF7KrQu50O+SSfFJdQ==",
+					"requires": {
+						"@ariakit/core": "0.4.9",
+						"@floating-ui/dom": "^1.0.0",
+						"use-sync-external-store": "^1.2.0"
+					}
+				},
 				"@floating-ui/react-dom": {
 					"version": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.1.tgz",
 					"integrity": "sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==",
@@ -67652,6 +68364,7 @@
 				"@wordpress/html-entities": "file:../html-entities",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
+				"@wordpress/notices": "file:../notices",
 				"@wordpress/private-apis": "file:../private-apis",
 				"@wordpress/router": "file:../router",
 				"@wordpress/url": "file:../url"
@@ -67676,6 +68389,7 @@
 				"@wordpress/sync": "file:../sync",
 				"@wordpress/undo-manager": "file:../undo-manager",
 				"@wordpress/url": "file:../url",
+				"@wordpress/warning": "file:../warning",
 				"change-case": "^4.1.2",
 				"equivalent-key-map": "^0.2.2",
 				"fast-deep-equal": "^3.1.3",
@@ -67770,7 +68484,7 @@
 		"@wordpress/dataviews": {
 			"version": "file:packages/dataviews",
 			"requires": {
-				"@ariakit/react": "^0.3.12",
+				"@ariakit/react": "^0.4.10",
 				"@babel/runtime": "^7.16.0",
 				"@wordpress/components": "file:../components",
 				"@wordpress/compose": "file:../compose",
@@ -67780,28 +68494,25 @@
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/primitives": "file:../primitives",
 				"@wordpress/private-apis": "file:../private-apis",
+				"@wordpress/warning": "file:../warning",
 				"clsx": "^2.1.1",
 				"remove-accents": "^0.5.0"
 			},
 			"dependencies": {
-				"@ariakit/core": {
-					"version": "0.4.1",
-					"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.1.tgz",
-					"integrity": "sha512-Rdhw0/K0x+50gFvzuMW9wp+WJxpkrgiMgegRTOZSU92bv1K+6XfQWnlieIkLt2FC7pZGrDpGlS4C7ztEVF+JRg=="
-				},
 				"@ariakit/react": {
-					"version": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.1.tgz",
-					"integrity": "sha512-hKfCYjc3MFW20kn2dcvejB5zbYt/uU33Teq82c414/utf5sEoeRF+bxjNku8x1baJby9/SDP6zj2IgWPuedFNA==",
+					"version": "0.4.10",
+					"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.10.tgz",
+					"integrity": "sha512-c1+6sNLj57aAXrBZMCVGG+OXeFrPAG0TV1jT7oPJcN/KLRs3aCuO3CCJVep/eKepFzzK01kNRGYX3wPT1TXPNw==",
 					"requires": {
-						"@ariakit/react-core": "0.4.1"
+						"@ariakit/react-core": "0.4.10"
 					}
 				},
 				"@ariakit/react-core": {
-					"version": "0.4.1",
-					"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.1.tgz",
-					"integrity": "sha512-cwDczl9XWBloXNg0CuHmJtBfEe7qF265JE0Pwlcp8wMSY9PsJeb0mKBlTygUPKn/FsKpKGaYSI7DlDntbcZciw==",
+					"version": "0.4.10",
+					"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.10.tgz",
+					"integrity": "sha512-r6DZmtHBmSoOj848+RpBwdZy/55YxPhMhfH14JIO2OLn1F6iSFkQwR7AAGpIrlYycWJFSF7KrQu50O+SSfFJdQ==",
 					"requires": {
-						"@ariakit/core": "0.4.1",
+						"@ariakit/core": "0.4.9",
 						"@floating-ui/dom": "^1.0.0",
 						"use-sync-external-store": "^1.2.0"
 					}
@@ -68052,6 +68763,7 @@
 				"@wordpress/deprecated": "file:../deprecated",
 				"@wordpress/dom": "file:../dom",
 				"@wordpress/element": "file:../element",
+				"@wordpress/fields": "file:../fields",
 				"@wordpress/hooks": "file:../hooks",
 				"@wordpress/html-entities": "file:../html-entities",
 				"@wordpress/i18n": "file:../i18n",
@@ -68080,7 +68792,8 @@
 				"is-plain-object": "^5.0.0",
 				"memize": "^2.1.0",
 				"react-autosize-textarea": "^7.1.0",
-				"remove-accents": "^0.5.0"
+				"remove-accents": "^0.5.0",
+				"uuid": "^9.0.1"
 			}
 		},
 		"@wordpress/element": {
@@ -68229,6 +68942,33 @@
 				"requireindex": "^1.2.0"
 			}
 		},
+		"@wordpress/fields": {
+			"version": "file:packages/fields",
+			"requires": {
+				"@babel/runtime": "^7.16.0",
+				"@wordpress/api-fetch": "file:../api-fetch",
+				"@wordpress/blob": "file:../blob",
+				"@wordpress/blocks": "file:../blocks",
+				"@wordpress/components": "file:../components",
+				"@wordpress/compose": "file:../compose",
+				"@wordpress/core-data": "file:../core-data",
+				"@wordpress/data": "file:../data",
+				"@wordpress/dataviews": "file:../dataviews",
+				"@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/patterns": "file:../patterns",
+				"@wordpress/primitives": "file:../primitives",
+				"@wordpress/private-apis": "file:../private-apis",
+				"@wordpress/url": "file:../url",
+				"@wordpress/warning": "file:../warning",
+				"change-case": "4.1.2",
+				"client-zip": "^2.4.5"
+			}
+		},
 		"@wordpress/format-library": {
 			"version": "file:packages/format-library",
 			"requires": {
@@ -68282,7 +69022,6 @@
 			"version": "file:packages/interactivity",
 			"requires": {
 				"@preact/signals": "^1.2.2",
-				"deepsignal": "^1.4.0",
 				"preact": "^10.19.3"
 			},
 			"dependencies": {
@@ -68294,11 +69033,6 @@
 						"@preact/signals-core": "^1.4.0"
 					}
 				},
-				"deepsignal": {
-					"version": "1.4.0",
-					"resolved": "https://registry.npmjs.org/deepsignal/-/deepsignal-1.4.0.tgz",
-					"integrity": "sha512-x0XUMT48s+xQRLc2fPFfxnYLCJ46vffw47OQ5NcHFzacOjfW5eA0NrEmI0bhQHL6MgUHkBVT4TIiWTVwzTEwpg=="
-				},
 				"preact": {
 					"version": "10.19.3",
 					"resolved": "https://registry.npmjs.org/preact/-/preact-10.19.3.tgz",
@@ -68309,6 +69043,7 @@
 		"@wordpress/interactivity-router": {
 			"version": "file:packages/interactivity-router",
 			"requires": {
+				"@wordpress/a11y": "file:../a11y",
 				"@wordpress/interactivity": "file:../interactivity"
 			}
 		},
@@ -68766,9 +69501,10 @@
 				"npm-package-json-lint": "^6.4.0",
 				"npm-packlist": "^3.0.0",
 				"postcss": "^8.4.5",
+				"postcss-import": "^16.1.0",
 				"postcss-loader": "^6.2.1",
 				"prettier": "npm:wp-prettier@3.0.3",
-				"puppeteer-core": "^13.2.0",
+				"puppeteer-core": "^23.1.0",
 				"react-refresh": "^0.14.0",
 				"read-pkg-up": "^7.0.1",
 				"resolve-bin": "^0.4.0",
@@ -68777,7 +69513,7 @@
 				"sass-loader": "^12.1.0",
 				"schema-utils": "^4.2.0",
 				"source-map-loader": "^3.0.0",
-				"stylelint": "^14.2.0",
+				"stylelint": "^16.8.2",
 				"terser-webpack-plugin": "^5.3.9",
 				"url-loader": "^4.1.1",
 				"webpack": "^5.88.2",
@@ -69091,8 +69827,71 @@
 		"@wordpress/stylelint-config": {
 			"version": "file:packages/stylelint-config",
 			"requires": {
-				"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"
+			},
+			"dependencies": {
+				"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==",
+					"dev": true,
+					"requires": {
+						"mdn-data": "2.0.30",
+						"source-map-js": "^1.0.1"
+					}
+				},
+				"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==",
+					"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
+				},
+				"source-map-js": {
+					"version": "1.2.0",
+					"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+					"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+					"dev": true
+				},
+				"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==",
+					"dev": true
+				},
+				"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==",
+					"dev": true,
+					"requires": {
+						"postcss-scss": "^4.0.9",
+						"stylelint-config-recommended": "^14.0.1",
+						"stylelint-scss": "^6.4.0"
+					}
+				},
+				"stylelint-scss": {
+					"version": "6.5.1",
+					"resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.5.1.tgz",
+					"integrity": "sha512-ZLqdqihm6uDYkrsOeD6YWb+stZI8Wn92kUNDhE4M+g9g1aCnRv0JlOrttFiAJJwaNzpdQgX3YJb5vDQXVuO9Ww==",
+					"dev": true,
+					"requires": {
+						"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"
+					}
+				}
 			}
 		},
 		"@wordpress/sync": {
@@ -69389,12 +70188,6 @@
 				}
 			}
 		},
-		"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
-		},
 		"ajv-errors": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
@@ -72094,23 +72887,6 @@
 				}
 			}
 		},
-		"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
-				}
-			}
-		},
 		"clone-response": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
@@ -73323,15 +74099,6 @@
 				"is-windows": "^1.0.0"
 			}
 		},
-		"cross-fetch": {
-			"version": "3.1.5",
-			"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
-			"integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
-			"dev": true,
-			"requires": {
-				"node-fetch": "2.6.7"
-			}
-		},
 		"cross-spawn": {
 			"version": "5.1.0",
 			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
@@ -73396,6 +74163,12 @@
 			"integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
 			"dev": true
 		},
+		"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==",
+			"dev": true
+		},
 		"css-loader": {
 			"version": "6.2.0",
 			"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.2.0.tgz",
@@ -73622,12 +74395,12 @@
 			}
 		},
 		"cssstyle": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
-			"integrity": "sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==",
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz",
+			"integrity": "sha512-h66W1URKpBS5YMI/V8PyXvTMFT8SupJ1IzoIV8IeBC/ji8WVmrO8dGlTi+2dh6whmdk6BiKJLD/ZBkhWbcg6nA==",
 			"dev": true,
 			"requires": {
-				"rrweb-cssom": "^0.6.0"
+				"rrweb-cssom": "^0.7.1"
 			}
 		},
 		"csstype": {
@@ -73670,23 +74443,22 @@
 			"dev": true
 		},
 		"data-urls": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
-			"integrity": "sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==",
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+			"integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
 			"dev": true,
 			"requires": {
-				"abab": "^2.0.6",
-				"whatwg-mimetype": "^3.0.0",
-				"whatwg-url": "^12.0.0"
+				"whatwg-mimetype": "^4.0.0",
+				"whatwg-url": "^14.0.0"
 			},
 			"dependencies": {
 				"tr46": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz",
-					"integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==",
+					"version": "5.0.0",
+					"resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz",
+					"integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==",
 					"dev": true,
 					"requires": {
-						"punycode": "^2.3.0"
+						"punycode": "^2.3.1"
 					}
 				},
 				"webidl-conversions": {
@@ -73696,12 +74468,12 @@
 					"dev": true
 				},
 				"whatwg-url": {
-					"version": "12.0.1",
-					"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz",
-					"integrity": "sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==",
+					"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==",
 					"dev": true,
 					"requires": {
-						"tr46": "^4.1.1",
+						"tr46": "^5.0.0",
 						"webidl-conversions": "^7.0.0"
 					}
 				}
@@ -74455,9 +75227,9 @@
 			}
 		},
 		"devtools-protocol": {
-			"version": "0.0.981744",
-			"resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.981744.tgz",
-			"integrity": "sha512-0cuGS8+jhR67Fy7qG3i3Pc7Aw494sb9yG9QgpG97SFVWwolgYjlhJg7n+UaHxOQT30d1TYu/EYe9k01ivLErIg==",
+			"version": "0.0.1312386",
+			"resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1312386.tgz",
+			"integrity": "sha512-DPnhUXvmvKT2dFA/j7B+riVLUt9Q6RKJlcppojL5CoRywJJKLDYnRlw0gTFKfgDPHP5E04UoB71SxoJlVZy8FA==",
 			"dev": true
 		},
 		"diff": {
@@ -74578,23 +75350,6 @@
 			"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
 			"integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
 		},
-		"domexception": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
-			"integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
-			"dev": true,
-			"requires": {
-				"webidl-conversions": "^7.0.0"
-			},
-			"dependencies": {
-				"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==",
-					"dev": true
-				}
-			}
-		},
 		"domhandler": {
 			"version": "2.4.2",
 			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
@@ -75060,11 +75815,6 @@
 			"integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==",
 			"dev": true
 		},
-		"es-module-shims": {
-			"version": "1.8.2",
-			"resolved": "https://registry.npmjs.org/es-module-shims/-/es-module-shims-1.8.2.tgz",
-			"integrity": "sha512-7vIYVzpOhXtpc3Yn03itB+GSgVZFW7oL4kdydA+iL+IEi7HiSLBUxM05QFw4SxTl6e++pMpGqZPo2+vdNs3TbA=="
-		},
 		"es-set-tostringtag": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
@@ -75936,15 +76686,6 @@
 				}
 			}
 		},
-		"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"
-			}
-		},
 		"exit": {
 			"version": "0.1.2",
 			"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -76357,9 +77098,9 @@
 			}
 		},
 		"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==",
+			"version": "1.0.16",
+			"resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+			"integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
 			"dev": true
 		},
 		"fastq": {
@@ -76748,9 +77489,9 @@
 			}
 		},
 		"flatted": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.1.0.tgz",
-			"integrity": "sha512-tW+UkmtNg/jv9CSofAKvgVcO7c2URjhTdW1ZTkcAritblu8tajiYy7YisnIflEwtKssCtOxpnBRoCB7iap0/TA==",
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
+			"integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
 			"dev": true
 		},
 		"flow-enums-runtime": {
@@ -78170,12 +78911,12 @@
 			"integrity": "sha512-fvYTvdCFOWQupGxqkahrkA+ERBuMdzkxwtUdKrxR6rmMd4Pfl+iZ1QiQYoaZ0B/v0y59MOMnz3XFUWbT50/NWA=="
 		},
 		"html-encoding-sniffer": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
-			"integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+			"integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
 			"dev": true,
 			"requires": {
-				"whatwg-encoding": "^2.0.0"
+				"whatwg-encoding": "^3.1.1"
 			}
 		},
 		"html-entities": {
@@ -78214,9 +78955,9 @@
 			}
 		},
 		"html-tags": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
-			"integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+			"integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
 			"dev": true
 		},
 		"html-webpack-plugin": {
@@ -78538,12 +79279,6 @@
 				}
 			}
 		},
-		"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
-		},
 		"import-local": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
@@ -79904,7 +80639,7 @@
 				"@types/node": "*",
 				"jest-mock": "^29.6.2",
 				"jest-util": "^29.6.2",
-				"jsdom": "22.1.0"
+				"jsdom": "25.0.1"
 			}
 		},
 		"jest-environment-node": {
@@ -80451,62 +81186,71 @@
 			"dev": true
 		},
 		"jsdom": {
-			"version": "22.1.0",
-			"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-22.1.0.tgz",
-			"integrity": "sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==",
+			"version": "25.0.1",
+			"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-25.0.1.tgz",
+			"integrity": "sha512-8i7LzZj7BF8uplX+ZyOlIz86V6TAsSs+np6m1kpW9u0JWi4z/1t+FzcK1aek+ybTnAC4KhBL4uXCNT0wcUIeCw==",
 			"dev": true,
 			"requires": {
-				"abab": "^2.0.6",
-				"cssstyle": "^3.0.0",
-				"data-urls": "^4.0.0",
+				"cssstyle": "^4.1.0",
+				"data-urls": "^5.0.0",
 				"decimal.js": "^10.4.3",
-				"domexception": "^4.0.0",
 				"form-data": "^4.0.0",
-				"html-encoding-sniffer": "^3.0.0",
-				"http-proxy-agent": "^5.0.0",
-				"https-proxy-agent": "^5.0.1",
+				"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.4",
+				"nwsapi": "^2.2.12",
 				"parse5": "^7.1.2",
-				"rrweb-cssom": "^0.6.0",
+				"rrweb-cssom": "^0.7.1",
 				"saxes": "^6.0.0",
 				"symbol-tree": "^3.2.4",
-				"tough-cookie": "^4.1.2",
-				"w3c-xmlserializer": "^4.0.0",
+				"tough-cookie": "^5.0.0",
+				"w3c-xmlserializer": "^5.0.0",
 				"webidl-conversions": "^7.0.0",
-				"whatwg-encoding": "^2.0.0",
-				"whatwg-mimetype": "^3.0.0",
-				"whatwg-url": "^12.0.1",
-				"ws": "^8.13.0",
-				"xml-name-validator": "^4.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"
 			},
 			"dependencies": {
-				"tough-cookie": {
-					"version": "4.1.3",
-					"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
-					"integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
+				"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,
 					"requires": {
-						"psl": "^1.1.33",
-						"punycode": "^2.1.1",
-						"universalify": "^0.2.0",
-						"url-parse": "^1.5.3"
+						"debug": "^4.3.4"
 					}
 				},
-				"tr46": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz",
-					"integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==",
+				"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,
 					"requires": {
-						"punycode": "^2.3.0"
+						"agent-base": "^7.1.0",
+						"debug": "^4.3.4"
 					}
 				},
-				"universalify": {
-					"version": "0.2.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-					"integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
-					"dev": true
+				"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,
+					"requires": {
+						"agent-base": "^7.0.2",
+						"debug": "4"
+					}
+				},
+				"tr46": {
+					"version": "5.0.0",
+					"resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz",
+					"integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==",
+					"dev": true,
+					"requires": {
+						"punycode": "^2.3.1"
+					}
 				},
 				"webidl-conversions": {
 					"version": "7.0.0",
@@ -80515,12 +81259,12 @@
 					"dev": true
 				},
 				"whatwg-url": {
-					"version": "12.0.1",
-					"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz",
-					"integrity": "sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==",
+					"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==",
 					"dev": true,
 					"requires": {
-						"tr46": "^4.1.1",
+						"tr46": "^5.0.0",
 						"webidl-conversions": "^7.0.0"
 					}
 				},
@@ -80697,9 +81441,9 @@
 			}
 		},
 		"keyv": {
-			"version": "4.5.3",
-			"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.3.tgz",
-			"integrity": "sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==",
+			"version": "4.5.4",
+			"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+			"integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
 			"dev": true,
 			"requires": {
 				"json-buffer": "3.0.1"
@@ -80737,9 +81481,9 @@
 			"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==",
+			"version": "0.34.0",
+			"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.34.0.tgz",
+			"integrity": "sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==",
 			"dev": true
 		},
 		"kuler": {
@@ -85047,12 +85791,6 @@
 			"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
 			"dev": true
 		},
-		"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
-		},
 		"normalize-url": {
 			"version": "6.1.0",
 			"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
@@ -85541,9 +86279,9 @@
 			"dev": true
 		},
 		"nwsapi": {
-			"version": "2.2.7",
-			"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
-			"integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==",
+			"version": "2.2.13",
+			"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.13.tgz",
+			"integrity": "sha512-cTGB9ptp9dY9A5VbMSe7fQBcl/tt22Vcqdq8+eN93rblOuE0aCFu4aZ2vMwct/2t+lFnosm8RkQW1I0Omb1UtQ==",
 			"dev": true
 		},
 		"nx": {
@@ -86969,6 +87707,11 @@
 				}
 			}
 		},
+		"parsel-js": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/parsel-js/-/parsel-js-1.1.2.tgz",
+			"integrity": "sha512-D66DG2nKx4Yoq66TMEyCUHlR2STGqO7vsBrX7tgyS9cfQyO6XD5JyzOiflwmWN6a4wbUAqpmHqmrxlTQVGZcbA=="
+		},
 		"parseurl": {
 			"version": "1.3.3",
 			"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -87305,9 +88048,9 @@
 			"integrity": "sha512-SO+NP5argMoJVCWcYiOofPUeEWDIM47FNCBJtp6uJ8PpjtBcudYJTzCbCMit5dzmfSLCoijzEwIXOqPqD45xQg=="
 		},
 		"picocolors": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-			"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+			"integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
 		},
 		"picomatch": {
 			"version": "2.3.1",
@@ -87362,19 +88105,19 @@
 			"dev": true
 		},
 		"playwright": {
-			"version": "1.45.1",
-			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.1.tgz",
-			"integrity": "sha512-Hjrgae4kpSQBr98nhCj3IScxVeVUixqj+5oyif8TdIn2opTCPEzqAqNMeK42i3cWDCVu9MI+ZsGWw+gVR4ISBg==",
+			"version": "1.47.0",
+			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.47.0.tgz",
+			"integrity": "sha512-jOWiRq2pdNAX/mwLiwFYnPHpEZ4rM+fRSQpRHwEwZlP2PUANvL3+aJOF/bvISMhFD30rqMxUB4RJx9aQbfh4Ww==",
 			"dev": true,
 			"requires": {
 				"fsevents": "2.3.2",
-				"playwright-core": "1.45.1"
+				"playwright-core": "1.47.0"
 			}
 		},
 		"playwright-core": {
-			"version": "1.45.1",
-			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.1.tgz",
-			"integrity": "sha512-LF4CUUtrUu2TCpDw4mcrAIuYrEjVDfT1cHbJMfwnE2+1b8PZcFzPNgvZCvq2JfQ4aTjRCCHw5EJ2tmr2NSzdPg==",
+			"version": "1.47.0",
+			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.47.0.tgz",
+			"integrity": "sha512-1DyHT8OqkcfCkYUD9zzUTfg7EfTd+6a8MkD/NWOvjo0u/SCNd5YmY/lJwFvUZOxJbWNds+ei7ic2+R/cRz/PDg==",
 			"dev": true
 		},
 		"please-upgrade-node": {
@@ -87524,6 +88267,25 @@
 			"integrity": "sha512-4VELwssYXDFigPYAZ8vL4yX4mUepF/oCBeeIT4OXsJPYOtvJumyz9WflmJWTfDwCUcpDR+z0zvCWBXgTx35SVw==",
 			"dev": true
 		},
+		"postcss-import": {
+			"version": "16.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-16.1.0.tgz",
+			"integrity": "sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==",
+			"dev": true,
+			"requires": {
+				"postcss-value-parser": "^4.0.0",
+				"read-cache": "^1.0.0",
+				"resolve": "^1.1.7"
+			},
+			"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
+				}
+			}
+		},
 		"postcss-loader": {
 			"version": "6.2.1",
 			"resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz",
@@ -87845,10 +88607,10 @@
 				}
 			}
 		},
-		"postcss-prefixwrap": {
-			"version": "1.41.0",
-			"resolved": "https://registry.npmjs.org/postcss-prefixwrap/-/postcss-prefixwrap-1.41.0.tgz",
-			"integrity": "sha512-gmwwAEE+ci3/ZKjUZppTETINlh1QwihY8gCstInuS7ohk353KYItU4d64hvnUvO2GUy29hBGPHz4Ce+qJRi90A=="
+		"postcss-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=="
 		},
 		"postcss-reduce-initial": {
 			"version": "6.0.0",
@@ -87878,21 +88640,27 @@
 			}
 		},
 		"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": "sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==",
+			"version": "0.1.6",
+			"resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.6.tgz",
+			"integrity": "sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==",
 			"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==",
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz",
+			"integrity": "sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==",
+			"dev": true
+		},
+		"postcss-scss": {
+			"version": "4.0.9",
+			"resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz",
+			"integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==",
 			"dev": true
 		},
 		"postcss-selector-parser": {
-			"version": "6.0.13",
-			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
-			"integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+			"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==",
 			"dev": true,
 			"requires": {
 				"cssesc": "^3.0.0",
@@ -88209,12 +88977,6 @@
 			"integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==",
 			"dev": true
 		},
-		"psl": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-			"integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
-			"dev": true
-		},
 		"public-encrypt": {
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
@@ -88264,25 +89026,81 @@
 			"integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="
 		},
 		"puppeteer-core": {
-			"version": "13.7.0",
-			"resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-13.7.0.tgz",
-			"integrity": "sha512-rXja4vcnAzFAP1OVLq/5dWNfwBGuzcOARJ6qGV7oAZhnLmVRU8G5MsdeQEAOy332ZhkIOnn9jp15R89LKHyp2Q==",
+			"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==",
 			"dev": true,
 			"requires": {
-				"cross-fetch": "3.1.5",
-				"debug": "4.3.4",
-				"devtools-protocol": "0.0.981744",
-				"extract-zip": "2.0.1",
-				"https-proxy-agent": "5.0.1",
-				"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.5.0"
+				"@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"
 			},
 			"dependencies": {
+				"@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==",
+					"dev": true,
+					"requires": {
+						"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"
+					}
+				},
+				"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,
+					"requires": {
+						"debug": "^4.3.4"
+					}
+				},
+				"chromium-bidi": {
+					"version": "0.6.4",
+					"resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.6.4.tgz",
+					"integrity": "sha512-8zoq6ogmhQQkAKZVKO2ObFTl4uOkqoX1PlKQX3hZQ5E9cbUotcAb7h4pTNVAGGv8Z36PF3CtdOriEp/Rz82JqQ==",
+					"dev": true,
+					"requires": {
+						"mitt": "3.0.1",
+						"urlpattern-polyfill": "10.0.0",
+						"zod": "3.23.8"
+					}
+				},
+				"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": {
+						"string-width": "^4.2.0",
+						"strip-ansi": "^6.0.1",
+						"wrap-ansi": "^7.0.0"
+					}
+				},
+				"debug": {
+					"version": "4.3.6",
+					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+					"integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+					"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
+				},
 				"extract-zip": {
 					"version": "2.0.1",
 					"resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
@@ -88295,68 +89113,169 @@
 						"yauzl": "^2.10.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==",
+				"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,
 					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
+						"agent-base": "^7.1.0",
+						"debug": "^4.3.4"
 					}
 				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+				"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,
 					"requires": {
-						"p-locate": "^4.1.0"
+						"agent-base": "^7.0.2",
+						"debug": "4"
 					}
 				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+				"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
+				},
+				"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
+				},
+				"mitt": {
+					"version": "3.0.1",
+					"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+					"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+					"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
+				},
+				"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==",
 					"dev": true,
 					"requires": {
-						"p-try": "^2.0.0"
+						"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"
 					}
 				},
-				"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==",
+				"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": {
-						"p-limit": "^2.2.0"
+						"end-of-stream": "^1.1.0",
+						"once": "^1.3.1"
 					}
 				},
-				"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==",
+				"semver": {
+					"version": "7.6.3",
+					"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+					"integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
 					"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
+				"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,
+					"requires": {
+						"agent-base": "^7.1.1",
+						"debug": "^4.3.4",
+						"socks": "^2.8.3"
+					}
 				},
-				"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==",
+				"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": {
-						"find-up": "^4.0.0"
+						"emoji-regex": "^8.0.0",
+						"is-fullwidth-code-point": "^3.0.0",
+						"strip-ansi": "^6.0.1"
+					}
+				},
+				"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,
+					"requires": {
+						"bare-fs": "^2.1.1",
+						"bare-path": "^2.1.0",
+						"pump": "^3.0.0",
+						"tar-stream": "^3.1.5"
+					}
+				},
+				"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": {
+						"b4a": "^1.6.4",
+						"fast-fifo": "^1.2.0",
+						"streamx": "^2.15.0"
+					}
+				},
+				"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"
 					}
 				},
 				"ws": {
-					"version": "8.5.0",
-					"resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz",
-					"integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
+					"version": "8.18.0",
+					"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+					"integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+					"dev": true
+				},
+				"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.7.2",
+					"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+					"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+					"dev": true,
+					"requires": {
+						"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"
+					}
+				},
+				"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
 				}
 			}
@@ -88404,12 +89323,6 @@
 			"integrity": "sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA==",
 			"dev": true
 		},
-		"querystringify": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-			"integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
-			"dev": true
-		},
 		"queue": {
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
@@ -89076,6 +89989,15 @@
 				}
 			}
 		},
+		"read-cache": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+			"integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+			"dev": true,
+			"requires": {
+				"pify": "^2.3.0"
+			}
+		},
 		"read-cmd-shim": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-4.0.0.tgz",
@@ -89980,9 +90902,9 @@
 			"dev": true
 		},
 		"rrweb-cssom": {
-			"version": "0.6.0",
-			"resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
-			"integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==",
+			"version": "0.7.1",
+			"resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz",
+			"integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==",
 			"dev": true
 		},
 		"rtlcss": {
@@ -91902,68 +92824,152 @@
 			}
 		},
 		"stylelint": {
-			"version": "14.2.0",
-			"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.2.0.tgz",
-			"integrity": "sha512-i0DrmDXFNpDsWiwx6SPRs4/pyw4kvZgqpDGvsTslQMY7hpUl6r33aQvNSn6cnTg2wtZ9rreFElI7XAKpOWi1vQ==",
+			"version": "16.8.2",
+			"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.8.2.tgz",
+			"integrity": "sha512-fInKATippQhcSm7AB+T32GpI+626yohrg33GkFT/5jzliUw5qhlwZq2UQQwgl3HsHrf09oeARi0ZwgY/UWEv9A==",
 			"dev": true,
 			"requires": {
+				"@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.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",
+				"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.0.4",
+				"globby": "^11.1.0",
 				"globjoin": "^0.1.4",
-				"html-tags": "^3.1.0",
-				"ignore": "^5.2.0",
-				"import-lazy": "^4.0.0",
+				"html-tags": "^3.3.1",
+				"ignore": "^5.3.2",
 				"imurmurhash": "^0.1.4",
 				"is-plain-object": "^5.0.0",
-				"known-css-properties": "^0.24.0",
+				"known-css-properties": "^0.34.0",
 				"mathml-tag-names": "^2.1.3",
-				"meow": "^9.0.0",
-				"micromatch": "^4.0.4",
+				"meow": "^13.2.0",
+				"micromatch": "^4.0.7",
 				"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",
+				"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",
-				"specificity": "^0.4.1",
 				"string-width": "^4.2.3",
-				"strip-ansi": "^6.0.1",
-				"style-search": "^0.1.0",
+				"strip-ansi": "^7.1.0",
+				"supports-hyperlinks": "^3.0.0",
 				"svg-tags": "^1.0.0",
-				"table": "^6.7.5",
-				"v8-compile-cache": "^2.3.0",
-				"write-file-atomic": "^3.0.3"
+				"table": "^6.8.2",
+				"write-file-atomic": "^5.0.1"
 			},
 			"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
+				},
 				"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
 				},
+				"cosmiconfig": {
+					"version": "9.0.0",
+					"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
+					"integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+					"dev": true,
+					"requires": {
+						"env-paths": "^2.2.1",
+						"import-fresh": "^3.3.0",
+						"js-yaml": "^4.1.0",
+						"parse-json": "^5.2.0"
+					}
+				},
+				"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==",
+					"dev": true,
+					"requires": {
+						"mdn-data": "2.0.30",
+						"source-map-js": "^1.0.1"
+					}
+				},
+				"debug": {
+					"version": "4.3.6",
+					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+					"integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+					"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
 				},
-				"get-stdin": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz",
-					"integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==",
+				"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,
+					"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"
+					}
+				},
+				"file-entry-cache": {
+					"version": "9.0.0",
+					"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-9.0.0.tgz",
+					"integrity": "sha512-6MgEugi8p2tiUhqO7GnPsmbCCzj0YRCwwaTbpGRyKZesjRSzkqkAE9fPp7V2yMs5hwfgbQLgdvSSkGNg1s5Uvw==",
+					"dev": true,
+					"requires": {
+						"flat-cache": "^5.0.0"
+					}
+				},
+				"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==",
+					"dev": true,
+					"requires": {
+						"flatted": "^3.3.1",
+						"keyv": "^4.5.4"
+					}
+				},
+				"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"
+					}
+				},
+				"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
+				},
+				"ignore": {
+					"version": "5.3.2",
+					"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+					"integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
 					"dev": true
 				},
 				"is-fullwidth-code-point": {
@@ -91972,36 +92978,42 @@
 					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
 					"dev": true
 				},
-				"meow": {
-					"version": "9.0.0",
-					"resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
-					"integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
+				"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": {
-						"@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"
+						"argparse": "^2.0.1"
 					}
 				},
-				"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==",
+				"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==",
+					"dev": true
+				},
+				"meow": {
+					"version": "13.2.0",
+					"resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz",
+					"integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==",
+					"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
+				},
+				"postcss": {
+					"version": "8.4.41",
+					"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
+					"integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
 					"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"
+						"nanoid": "^3.3.7",
+						"picocolors": "^1.0.1",
+						"source-map-js": "^1.2.0"
 					}
 				},
 				"postcss-value-parser": {
@@ -92016,6 +93028,18 @@
 					"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
 					"dev": true
 				},
+				"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
+				},
+				"source-map-js": {
+					"version": "1.2.0",
+					"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+					"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+					"dev": true
+				},
 				"string-width": {
 					"version": "4.2.3",
 					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -92025,74 +93049,67 @@
 						"emoji-regex": "^8.0.0",
 						"is-fullwidth-code-point": "^3.0.0",
 						"strip-ansi": "^6.0.1"
+					},
+					"dependencies": {
+						"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.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
+				"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,
+					"requires": {
+						"ansi-regex": "^6.0.1"
+					},
+					"dependencies": {
+						"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
+						}
+					}
+				},
+				"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"
+					}
+				},
+				"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==",
+					"dev": true,
+					"requires": {
+						"has-flag": "^4.0.0",
+						"supports-color": "^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==",
+					"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,
 					"requires": {
 						"imurmurhash": "^0.1.4",
-						"is-typedarray": "^1.0.0",
-						"signal-exit": "^3.0.2",
-						"typedarray-to-buffer": "^3.1.5"
+						"signal-exit": "^4.0.1"
 					}
 				}
 			}
 		},
-		"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
-		},
-		"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==",
-			"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
-				}
-			}
-		},
-		"stylelint-scss": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.1.0.tgz",
-			"integrity": "sha512-BNYTo7MMamhFOlcaAWp2dMpjg6hPyM/FFqfDIYzmYVLMmQJqc8lWRIiTqP4UX5bresj9Vo0dKC6odSh43VP2NA==",
-			"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": {
-				"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
-				}
-			}
-		},
 		"stylis": {
 			"version": "4.0.13",
 			"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
@@ -92237,9 +93254,9 @@
 			}
 		},
 		"table": {
-			"version": "6.8.0",
-			"resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
-			"integrity": "sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==",
+			"version": "6.8.2",
+			"resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz",
+			"integrity": "sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==",
 			"dev": true,
 			"requires": {
 				"ajv": "^8.0.1",
@@ -92541,9 +93558,9 @@
 			}
 		},
 		"terser": {
-			"version": "5.31.2",
-			"resolved": "https://registry.npmjs.org/terser/-/terser-5.31.2.tgz",
-			"integrity": "sha512-LGyRZVFm/QElZHy/CPr/O4eNZOZIzsrQ92y4v9UJe/pFJjypje2yI3C2FmPtvUEnhadlSbmG2nXtdcjHOjCfxw==",
+			"version": "5.32.0",
+			"resolved": "https://registry.npmjs.org/terser/-/terser-5.32.0.tgz",
+			"integrity": "sha512-v3Gtw3IzpBJ0ugkxEX8U0W6+TnPKRRCWGh1jC/iM/e3Ki5+qvO1L1EAZ56bZasc64aXHwRHNIQEzm6//i5cemQ==",
 			"requires": {
 				"@jridgewell/source-map": "^0.3.3",
 				"acorn": "^8.8.2",
@@ -92739,6 +93756,21 @@
 			"integrity": "sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==",
 			"dev": true
 		},
+		"tldts": {
+			"version": "6.1.50",
+			"resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.50.tgz",
+			"integrity": "sha512-q9GOap6q3KCsLMdOjXhWU5jVZ8/1dIib898JBRLsN+tBhENpBDcAVQbE0epADOjw11FhQQy9AcbqKGBQPUfTQA==",
+			"dev": true,
+			"requires": {
+				"tldts-core": "^6.1.50"
+			}
+		},
+		"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==",
+			"dev": true
+		},
 		"tmp": {
 			"version": "0.0.33",
 			"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -92823,6 +93855,15 @@
 			"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
 			"dev": true
 		},
+		"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==",
+			"dev": true,
+			"requires": {
+				"tldts": "^6.1.32"
+			}
+		},
 		"tr46": {
 			"version": "0.0.3",
 			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -93075,6 +94116,12 @@
 			"integrity": "sha512-bctQIOqx2iVbWGDGPWwIm18QScpu2XRmkC19D8rQGFsjKSgteq/o1hTZvIG/wuDq8fanpBDrLkLq+aEN/6y5XQ==",
 			"dev": true
 		},
+		"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==",
+			"dev": true
+		},
 		"typedarray": {
 			"version": "0.0.6",
 			"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -93159,7 +94206,8 @@
 			"version": "3.13.7",
 			"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.13.7.tgz",
 			"integrity": "sha512-1Psi2MmnZJbnEsgJJIlfnd7tFlJfitusmR7zDI8lXlFI0ACD4/Rm/xdrU8bh6zF0i74aiVoBtkRiFulkrmh3AA==",
-			"dev": true
+			"dev": true,
+			"optional": true
 		},
 		"unbox-primitive": {
 			"version": "1.0.2",
@@ -93586,22 +94634,18 @@
 				}
 			}
 		},
-		"url-parse": {
-			"version": "1.5.10",
-			"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-			"integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
-			"dev": true,
-			"requires": {
-				"querystringify": "^2.1.1",
-				"requires-port": "^1.0.0"
-			}
-		},
 		"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
 		},
+		"urlpattern-polyfill": {
+			"version": "10.0.0",
+			"resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.0.0.tgz",
+			"integrity": "sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg==",
+			"dev": true
+		},
 		"use": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -93621,14 +94665,6 @@
 			"resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.9.tgz",
 			"integrity": "sha512-CL/29uS74AwreI/f2oz2hLTW7ZqVeV5+gxFeGudzQrgkCytrHw33G4KbnQOrRlAEzzAFXi7dDLMC9zhWcVpzmw=="
 		},
-		"use-lilius": {
-			"version": "2.0.5",
-			"resolved": "https://registry.npmjs.org/use-lilius/-/use-lilius-2.0.5.tgz",
-			"integrity": "sha512-IbPjJe4T6B0zQV6ahftVtHvCAxi6RAuDpEcO8TmnHh4nBtx7JbGdpbgXWOUj/9YjrzEbdT/lW7JWcBVbX3MbrA==",
-			"requires": {
-				"date-fns": "^3.6.0"
-			}
-		},
 		"use-memo-one": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.1.tgz",
@@ -93710,8 +94746,7 @@
 		"uuid": {
 			"version": "9.0.1",
 			"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
-			"dev": true
+			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="
 		},
 		"v8-compile-cache": {
 			"version": "2.3.0",
@@ -93819,12 +94854,12 @@
 			"dev": true
 		},
 		"w3c-xmlserializer": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
-			"integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+			"integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
 			"dev": true,
 			"requires": {
-				"xml-name-validator": "^4.0.0"
+				"xml-name-validator": "^5.0.0"
 			}
 		},
 		"wait-port": {
@@ -95001,9 +96036,9 @@
 			"dev": true
 		},
 		"whatwg-encoding": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
-			"integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+			"integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
 			"dev": true,
 			"requires": {
 				"iconv-lite": "0.6.3"
@@ -95015,9 +96050,9 @@
 			"integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg=="
 		},
 		"whatwg-mimetype": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
-			"integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+			"integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
 			"dev": true
 		},
 		"whatwg-url": {
@@ -95424,9 +96459,9 @@
 			"dev": true
 		},
 		"xml-name-validator": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
-			"integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+			"integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
 			"dev": true
 		},
 		"xmlbuilder": {
diff --git a/package.json b/package.json
index fb6e473b0f6dc..5b8af1f99e7ad 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "18.8.0",
+	"version": "19.4.0-rc.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",
@@ -52,12 +52,14 @@
 		"@wordpress/editor": "file:packages/editor",
 		"@wordpress/element": "file:packages/element",
 		"@wordpress/escape-html": "file:packages/escape-html",
+		"@wordpress/fields": "file:packages/fields",
 		"@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/interactivity": "file:packages/interactivity",
+		"@wordpress/interactivity-router": "file:packages/interactivity-router",
 		"@wordpress/interface": "file:packages/interface",
 		"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
 		"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
@@ -91,14 +93,13 @@
 		"@wordpress/viewport": "file:packages/viewport",
 		"@wordpress/warning": "file:packages/warning",
 		"@wordpress/widgets": "file:packages/widgets",
-		"@wordpress/wordcount": "file:packages/wordcount",
-		"es-module-shims": "^1.8.2"
+		"@wordpress/wordcount": "file:packages/wordcount"
 	},
 	"devDependencies": {
 		"@actions/core": "1.9.1",
 		"@actions/github": "5.0.0",
 		"@apidevtools/json-schema-ref-parser": "11.6.4",
-		"@ariakit/test": "^0.3.7",
+		"@ariakit/test": "^0.4.2",
 		"@babel/core": "7.24.3",
 		"@babel/plugin-proposal-export-namespace-from": "7.18.9",
 		"@babel/plugin-syntax-jsx": "7.24.1",
@@ -111,7 +112,7 @@
 		"@octokit/rest": "16.26.0",
 		"@octokit/types": "6.34.0",
 		"@octokit/webhooks-types": "5.8.0",
-		"@playwright/test": "1.45.1",
+		"@playwright/test": "1.47.0",
 		"@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
 		"@react-native/babel-preset": "0.73.10",
 		"@react-native/metro-babel-transformer": "0.73.10",
@@ -172,7 +173,6 @@
 		"@wordpress/scripts": "file:packages/scripts",
 		"@wordpress/stylelint-config": "file:packages/stylelint-config",
 		"ajv": "8.7.1",
-		"ajv-draft-04": "1.0.0",
 		"appium": "2.0.0",
 		"babel-jest": "29.7.0",
 		"babel-loader": "9.1.3",
@@ -229,10 +229,12 @@
 		"npm-run-all": "4.1.5",
 		"patch-package": "8.0.0",
 		"postcss": "8.4.38",
+		"postcss-import": "16.1.0",
 		"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",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"react-native": "0.73.3",
@@ -255,9 +257,9 @@
 		"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.9",
 		"typescript": "5.5.3",
-		"uglify-js": "3.13.7",
 		"uuid": "9.0.1",
 		"webdriverio": "8.16.20",
 		"webpack": "5.88.2",
@@ -265,7 +267,7 @@
 		"worker-farm": "1.7.0"
 	},
 	"overrides": {
-		"jsdom": "22.1.0"
+		"jsdom": "25.0.1"
 	},
 	"scripts": {
 		"build": "npm run build:packages && wp-scripts build",
diff --git a/packages/README.md b/packages/README.md
index e780d006f70fb..b8d2c913a91b9 100644
--- a/packages/README.md
+++ b/packages/README.md
@@ -58,7 +58,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
 
@@ -104,7 +104,7 @@ Next, you need to run `npm install` in the root of the project to ensure that `p
 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 +152,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:_
 
@@ -200,7 +200,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):
 
diff --git a/packages/a11y/CHANGELOG.md b/packages/a11y/CHANGELOG.md
index 21b652007a505..7da784818f78c 100644
--- a/packages/a11y/CHANGELOG.md
+++ b/packages/a11y/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/a11y/README.md b/packages/a11y/README.md
index 0f40d9edd010e..755396d2bb8f0 100644
--- a/packages/a11y/README.md
+++ b/packages/a11y/README.md
@@ -39,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) -->
 
diff --git a/packages/a11y/package.json b/packages/a11y/package.json
index 8490040f7cc03..e3868dca8b6ba 100644
--- a/packages/a11y/package.json
+++ b/packages/a11y/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/a11y",
-	"version": "4.3.0",
+	"version": "4.9.0",
 	"description": "Accessibility (a11y) utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,6 +28,7 @@
 	"module": "build-module/index.js",
 	"react-native": "src/index",
 	"types": "build-types",
+	"wpScriptModuleExports": "./build-module/module/index.js",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/dom-ready": "file:../dom-ready",
diff --git a/packages/a11y/src/index.js b/packages/a11y/src/index.js
index 957c76500c434..cdc3be1054515 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 f6f53b6343adb..e17597a8b2747 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 0000000000000..a06882f068dd3
--- /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 0000000000000..2b6353720d0ad
--- /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 4815baa220504..0f6b9d0bd572e 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/annotations/CHANGELOG.md b/packages/annotations/CHANGELOG.md
index cf66e51c07fd3..caf30a752bb98 100644
--- a/packages/annotations/CHANGELOG.md
+++ b/packages/annotations/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/annotations/package.json b/packages/annotations/package.json
index dc02bda978dcf..ab48271295425 100644
--- a/packages/annotations/package.json
+++ b/packages/annotations/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/annotations",
-	"version": "3.3.0",
+	"version": "3.9.0",
 	"description": "Annotate content in the Gutenberg editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/api-fetch/CHANGELOG.md b/packages/api-fetch/CHANGELOG.md
index cee6a82f04f24..151afa5206c35 100644
--- a/packages/api-fetch/CHANGELOG.md
+++ b/packages/api-fetch/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/api-fetch/package.json b/packages/api-fetch/package.json
index 81c479cca7a02..3ad4425db4030 100644
--- a/packages/api-fetch/package.json
+++ b/packages/api-fetch/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/api-fetch",
-	"version": "7.3.0",
+	"version": "7.9.0",
 	"description": "Utility to make WordPress REST API requests.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/api-fetch/src/middlewares/media-upload.js b/packages/api-fetch/src/middlewares/media-upload.js
index 417abf775db63..ddd0be4e4ab43 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/autop/CHANGELOG.md b/packages/autop/CHANGELOG.md
index 7c2d08b9121cc..b56c0ada46a91 100644
--- a/packages/autop/CHANGELOG.md
+++ b/packages/autop/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/autop/package.json b/packages/autop/package.json
index 3a0e732001760..9320cfc26213a 100644
--- a/packages/autop/package.json
+++ b/packages/autop/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/autop",
-	"version": "4.3.0",
+	"version": "4.9.0",
 	"description": "WordPress's automatic paragraph functions `autop` and `removep`.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
index 8503a9df98cb7..8f15b849096f6 100644
--- a/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
+++ b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/babel-plugin-import-jsx-pragma/package.json b/packages/babel-plugin-import-jsx-pragma/package.json
index 98612895b03d6..47ecbcccd5eb2 100644
--- a/packages/babel-plugin-import-jsx-pragma/package.json
+++ b/packages/babel-plugin-import-jsx-pragma/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-plugin-import-jsx-pragma",
-	"version": "5.3.0",
+	"version": "5.9.0",
 	"description": "Babel transform plugin for automatically injecting an import to be used as the pragma for the React JSX Transform plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-plugin-makepot/CHANGELOG.md b/packages/babel-plugin-makepot/CHANGELOG.md
index 9411389ef0099..d307791a37424 100644
--- a/packages/babel-plugin-makepot/CHANGELOG.md
+++ b/packages/babel-plugin-makepot/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/babel-plugin-makepot/package.json b/packages/babel-plugin-makepot/package.json
index aac782362c222..d04a20a716459 100644
--- a/packages/babel-plugin-makepot/package.json
+++ b/packages/babel-plugin-makepot/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-plugin-makepot",
-	"version": "6.3.0",
+	"version": "6.9.0",
 	"description": "WordPress Babel internationalization (i18n) plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md
index d6ec60b7fd3d9..c577d6fd038bc 100644
--- a/packages/babel-preset-default/CHANGELOG.md
+++ b/packages/babel-preset-default/CHANGELOG.md
@@ -2,6 +2,26 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/babel-preset-default/README.md b/packages/babel-preset-default/README.md
index fb853a73ea3c8..301d2583dcf86 100644
--- a/packages/babel-preset-default/README.md
+++ b/packages/babel-preset-default/README.md
@@ -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 54c35564d43d7..041ab0143a5ae 100755
--- a/packages/babel-preset-default/bin/index.js
+++ b/packages/babel-preset-default/bin/index.js
@@ -4,29 +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.' ],
-	exclude: [
-		// 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',
-	],
+	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 45ec6473be3cb..468c2cce812f6 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 ) =>
@@ -27,6 +33,13 @@ module.exports = ( api ) => {
 				'proposal-nullish-coalescing-operator',
 				'proposal-logical-assignment-operators',
 			],
+			...( wpBuildOpts.addPolyfillComments
+				? {
+						useBuiltIns: 'usage',
+						exclude: exclusions,
+						corejs: require( 'core-js/package.json' ).version,
+				  }
+				: {} ),
 		};
 
 		if ( isTestEnv ) {
@@ -82,6 +95,7 @@ module.exports = ( api ) => {
 				},
 			],
 			maybeGetPluginTransformRuntime(),
+			wpBuildOpts.addPolyfillComments && replacePolyfills,
 		].filter( Boolean ),
 	};
 };
diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json
index a6beb303d0bc5..f98ac198e2273 100644
--- a/packages/babel-preset-default/package.json
+++ b/packages/babel-preset-default/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-preset-default",
-	"version": "8.3.0",
+	"version": "8.9.0",
 	"description": "Default Babel preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,7 +26,9 @@
 	},
 	"files": [
 		"build",
-		"index.js"
+		"index.js",
+		"polyfill-exclusions.js",
+		"replace-polyfills.js"
 	],
 	"main": "index.js",
 	"dependencies": {
diff --git a/packages/babel-preset-default/polyfill-exclusions.js b/packages/babel-preset-default/polyfill-exclusions.js
new file mode 100644
index 0000000000000..507396c930b99
--- /dev/null
+++ b/packages/babel-preset-default/polyfill-exclusions.js
@@ -0,0 +1,10 @@
+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',
+];
diff --git a/packages/babel-preset-default/replace-polyfills.js b/packages/babel-preset-default/replace-polyfills.js
new file mode 100644
index 0000000000000..a3a68cc5f84e9
--- /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/fixtures/polyfill.js b/packages/babel-preset-default/test/fixtures/polyfill.js
new file mode 100644
index 0000000000000..14a4fb20f14fa
--- /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 0a411cd424797..4a23d13544b27 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/CHANGELOG.md b/packages/base-styles/CHANGELOG.md
index 6bcaabfa640ce..8e92ddeece4d2 100644
--- a/packages/base-styles/CHANGELOG.md
+++ b/packages/base-styles/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/base-styles/_animations.scss b/packages/base-styles/_animations.scss
index b5e6655e660cb..b17478ed24f04 100644
--- a/packages/base-styles/_animations.scss
+++ b/packages/base-styles/_animations.scss
@@ -1,5 +1,48 @@
-@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");
 }
+
+@mixin editor-canvas-resize-animation() {
+	transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
+	@include reduce-motion("transition");
+}
+
+// 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/_colors.scss b/packages/base-styles/_colors.scss
index 2ce58b64e43b8..e65551e48c783 100644
--- a/packages/base-styles/_colors.scss
+++ b/packages/base-styles/_colors.scss
@@ -17,7 +17,6 @@ $gray-100: #f0f0f0;		// Used for light gray backgrounds.
 $white: #fff;
 
 // Opacities & additional colors.
-$dark-theme-focus: $white;	// Focus color when the theme is dark.
 $dark-gray-placeholder: rgba($gray-900, 0.62);
 $medium-gray-placeholder: rgba($gray-900, 0.55);
 $light-gray-placeholder: rgba($white, 0.65);
@@ -26,3 +25,6 @@ $light-gray-placeholder: rgba($white, 0.65);
 $alert-yellow: #f0b849;
 $alert-red: #cc1818;
 $alert-green: #4ab866;
+
+// Deprecated, please avoid using these.
+$dark-theme-focus: $white;	// Focus color when the theme is dark.
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index 1930948052aae..65f98bf6f15bf 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -1,6 +1,74 @@
 @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: $line-height-x-small;
+}
+
+@mixin heading-medium() {
+	@include _text-heading();
+	font-size: $font-size-medium;
+	line-height: $line-height-small;
+}
+
+@mixin heading-large() {
+	@include _text-heading();
+	font-size: $font-size-large;
+	line-height: $line-height-small;
+}
+
+@mixin heading-x-large() {
+	@include _text-heading();
+	font-size: $font-size-x-large;
+	line-height: $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: $line-height-x-small;
+}
+
+@mixin body-medium() {
+	@include _text-body();
+	font-size: $font-size-medium;
+	line-height: $line-height-small;
+}
+
+@mixin body-large() {
+	@include _text-body();
+	font-size: $font-size-large;
+	line-height: $line-height-medium;
+}
+
+@mixin body-x-large() {
+	@include _text-body();
+	font-size: $font-size-x-large;
+	line-height: $line-height-x-large;
+}
+
 /**
  * Breakpoint mixins
  */
@@ -74,7 +142,7 @@
 @mixin input-style__neutral() {
 	box-shadow: 0 0 0 transparent;
 	transition: box-shadow 0.1s linear;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	border: $border-width solid $gray-600;
 	@include reduce-motion("transition");
 }
@@ -162,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.
  */
@@ -243,7 +295,7 @@
 	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-fallback) var(--wp-admin-theme-color);
@@ -318,6 +370,7 @@
 	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;
@@ -328,9 +381,12 @@
 
 	&: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;
 
@@ -338,7 +394,8 @@
 		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);
 		}
 	}
 
@@ -351,7 +408,7 @@
 
 	&:checked {
 		background: var(--wp-admin-theme-color);
-		border-color: var(--wp-admin-theme-color);
+		border: none;
 	}
 }
 
@@ -374,7 +431,7 @@
 	&: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-block-ui;
+		border-radius: $radius-small;
 	}
 }
 
@@ -386,7 +443,7 @@
 	padding: $grid-unit-15 !important;
 	border: $border-width solid $gray-900 !important;
 	box-shadow: none !important;
-	border-radius: $radius-block-ui !important;
+	border-radius: $radius-small !important;
 
 	// Fonts smaller than 16px causes mobile safari to zoom.
 	font-size: $mobile-text-min-font-size !important;
@@ -523,7 +580,7 @@
 @mixin gradient-colors-deprecated() {
 	// Our classes uses the same values we set for gradient value attributes.
 
-	/* stylelint-disable function-comma-space-after -- We can not use spacing because of WP multi site kses rule. */
+	/* 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%);
 	}
@@ -551,7 +608,7 @@
 	.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) {
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index dfbc1e15ac2ff..ec0bdf91f2489 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,6 +61,33 @@ $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.
  */
@@ -64,23 +112,25 @@ $modal-width-large: 840px;
 $spinner-size: 16px;
 $canvas-padding: $grid-unit-20;
 
-
 /**
- * Shadows.
+ * Mobile specific styles
  */
-
-$shadow-popover: 0 0.7px 1px rgba($black, 0.1), 0 1.2px 1.7px -0.2px rgba($black, 0.1), 0 2.3px 3.3px -0.5px rgba($black, 0.1);
-$shadow-modal: 0 0.7px 1px rgba($black, 0.15), 0 2.7px 3.8px -0.2px rgba($black, 0.15), 0 5.5px 7.8px -0.3px rgba($black, 0.15), 0.1px 11.5px 16.4px -0.5px rgba($black, 0.15);
+$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.
@@ -91,14 +141,15 @@ $border-width: 1px;
 $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 b8a9088cfd72c..77238c6f38608 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -8,7 +8,6 @@ $z-layers: (
 	".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,
 	".editor-text-editor__toolbar": 1,
 
@@ -70,10 +69,6 @@ $z-layers: (
 	// Below the media library backdrop (.media-modal-backdrop), which has a z-index of 159900.
 	".block-editor-global-styles-background-panel__popover": 159900 - 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,
-
 	// The toolbar, when contextual, should be above any adjacent nested block click overlays.
 	".block-editor-block-contextual-toolbar": 61,
 
@@ -131,7 +126,6 @@ $z-layers: (
 	".block-editor-template-part__selection-modal": 1000001,
 	".block-editor-block-rename-modal": 1000001,
 	".edit-site-list__rename-modal": 1000001,
-	".dataviews-bulk-actions__modal": 1000001,
 	".dataviews-action-modal": 1000001,
 	".editor-action-modal": 1000001,
 	".editor-post-template__swap-template-modal": 1000001,
@@ -194,7 +188,6 @@ $z-layers: (
 	// Site editor layout
 	".edit-site-page-header": 2,
 	".edit-site-page-content": 1,
-	".edit-site-patterns__dataviews-list-pagination": 2,
 	".edit-site-templates__dataviews-list-pagination": 2,
 	".edit-site-layout__canvas-container": 2,
 	".edit-site-layout__sidebar": 1,
@@ -208,8 +201,11 @@ $z-layers: (
 	// Ensure checkbox + actions don't overlap table header
 	".dataviews-view-table thead": 1,
 
-	// Ensure quick actions toolbar appear above pagination
-	".dataviews-bulk-actions-toolbar": 2,
+	// 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,
 );
 
 @function z-index( $key ) {
diff --git a/packages/base-styles/package.json b/packages/base-styles/package.json
index 0e347ecbc8ad1..b1da65dde4797 100644
--- a/packages/base-styles/package.json
+++ b/packages/base-styles/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/base-styles",
-	"version": "5.3.0",
+	"version": "5.9.0",
 	"description": "Base SCSS utilities and variables for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/blob/CHANGELOG.md b/packages/blob/CHANGELOG.md
index a103ab71a5cd8..1631fe7e0618b 100644
--- a/packages/blob/CHANGELOG.md
+++ b/packages/blob/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/blob/package.json b/packages/blob/package.json
index 7e9965514570f..96d35105fc824 100644
--- a/packages/blob/package.json
+++ b/packages/blob/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/blob",
-	"version": "4.3.0",
+	"version": "4.9.0",
 	"description": "Blob utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-directory/CHANGELOG.md b/packages/block-directory/CHANGELOG.md
index 1f1f3104764e6..2677ce827c1d6 100644
--- a/packages/block-directory/CHANGELOG.md
+++ b/packages/block-directory/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json
index 09d409d3f94ce..b1f0aaf2a599a 100644
--- a/packages/block-directory/package.json
+++ b/packages/block-directory/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-directory",
-	"version": "5.3.0",
+	"version": "5.9.0",
 	"description": "Extend editor with block directory features to search, download and install blocks.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -45,7 +45,8 @@
 		"@wordpress/plugins": "file:../plugins",
 		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/url": "file:../url",
-		"change-case": "^4.1.2"
+		"change-case": "^4.1.2",
+		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
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 57a792b3f7f6e..e11c1f05e864f 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 b1ef34ccdba59..7a5f479174ab2 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,
-	privateApis as componentsPrivateApis,
+	Composite,
 } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -20,9 +25,6 @@ import BlockRatings from '../block-ratings';
 import DownloadableBlockIcon from '../downloadable-block-icon';
 import DownloadableBlockNotice from '../downloadable-block-notice';
 import { store as blockDirectoryStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-const { CompositeItemV2: CompositeItem } = unlock( componentsPrivateApis );
 
 // Return the appropriate block item label, given the block data and status.
 function getDownloadableBlockLabel(
@@ -65,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 );
@@ -92,76 +94,75 @@ function DownloadableBlockListItem( { composite, item, onClick } ) {
 		statusText = __( 'Installing…' );
 	}
 
+	const itemLabel = getDownloadableBlockLabel( item, {
+		hasNotice,
+		isInstalled,
+		isInstalling,
+	} );
+
 	return (
-		<CompositeItem
-			render={
-				<Button
-					accessibleWhenDisabled
-					type="button"
-					role="option"
-					className="block-directory-downloadable-block-list-item"
-					isBusy={ isInstalling }
-					onClick={ ( event ) => {
-						event.preventDefault();
-						onClick();
-					} }
-					label={ getDownloadableBlockLabel( item, {
-						hasNotice,
-						isInstalled,
-						isInstalling,
-					} ) }
-					showTooltip
-					tooltipPosition="top center"
-				/>
-			}
-			store={ composite }
-			disabled={ isInstalling || ! isInstallable }
-		>
-			<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$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" />
+								),
+							}
+						) }
+					</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 8f95297bd9ef0..6fce5e1b5b32a 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,10 +1,21 @@
 .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
@@ -12,13 +23,20 @@
 	// See: https://github.com/WordPress/gutenberg/issues/63384
 	position: relative;
 
+
+	&:not([aria-disabled="true"]) {
+		cursor: pointer;
+	}
+
 	&:hover {
 		@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);
@@ -33,11 +51,6 @@
 			word-wrap: normal !important;
 		}
 	}
-
-	&:disabled,
-	&[aria-disabled] {
-		opacity: 1;
-	}
 }
 
 .block-directory-downloadable-block-list-item__icon {
@@ -56,6 +69,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-blocks-list/index.js b/packages/block-directory/src/components/downloadable-blocks-list/index.js
index 09f509c4ed49c..3e44aa423bfa5 100644
--- a/packages/block-directory/src/components/downloadable-blocks-list/index.js
+++ b/packages/block-directory/src/components/downloadable-blocks-list/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { Composite } from '@wordpress/components';
 import { getBlockType } from '@wordpress/blocks';
 import { useDispatch } from '@wordpress/data';
 
@@ -11,14 +11,10 @@ import { useDispatch } from '@wordpress/data';
  */
 import DownloadableBlockListItem from '../downloadable-block-list-item';
 import { store as blockDirectoryStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 
-const { CompositeV2: Composite, useCompositeStoreV2: useCompositeStore } =
-	unlock( componentsPrivateApis );
 const noop = () => {};
 
 function DownloadableBlocksList( { items, onHover = noop, onSelect } ) {
-	const composite = useCompositeStore();
 	const { installBlockType } = useDispatch( blockDirectoryStore );
 
 	if ( ! items.length ) {
@@ -27,7 +23,6 @@ function DownloadableBlocksList( { items, onHover = noop, onSelect } ) {
 
 	return (
 		<Composite
-			store={ 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/style.scss b/packages/block-directory/src/components/downloadable-blocks-panel/style.scss
index ff3fdb9ea8e31..f4df5ad4abda5 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/plugins/get-install-missing/index.js b/packages/block-directory/src/plugins/get-install-missing/index.js
index 58d6cdb1a188c..43c051cb9aa37 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 9dcd45f67760f..ec4a48dd39bf5 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 ) {
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 02512ed4288ab..5e3151285966e 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,27 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 00951fb94c4a7..a6f3b8980cfd7 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -547,7 +547,7 @@ _Returns_
 
 > **Deprecated**
 
-This function was accidentially exposed for mobile/native usage.
+This function was accidentally exposed for mobile/native usage.
 
 _Returns_
 
@@ -811,21 +811,12 @@ _Parameters_
 
 -   _styles_ `EditorStyle[]`: CSS rules.
 -   _wrapperSelector_ `string`: Wrapper selector.
+-   _transformOptions_ `TransformOptions`: Additional options for style transformation.
 
 _Returns_
 
 -   `Array`: converted rules.
 
-_Type Definition_
-
--   _EditorStyle_ `Object`
-
-_Properties_
-
--   _css_ `string`: the CSS block(s), as a single string.
--   _baseURL_ `?string`: the base URL to be used as the reference when rewritting urls.
--   _ignoredSelectors_ `?string[]`: the selectors not to wrap.
-
 ### 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.
@@ -848,6 +839,52 @@ _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();
+```
+
+_Returns_
+
+-   `?WPBlockBindingsUtils`: Object containing the block bindings utils.
+
+_Changelog_
+
+`6.7.0` Introduced in WordPress core.
+
 ### useBlockCommands
 
 Undocumented declaration.
@@ -920,20 +957,15 @@ _Usage_
 import { useBlockProps } from '@wordpress/block-editor';
 
 export default function Edit() {
-
-  const blockProps = useBlockProps(
-    className: 'my-custom-class',
-    style: {
-      color: '#222222',
-      backgroundColor: '#eeeeee'
-    }
-  )
-
-  return (
-    <div { ...blockProps }>
-
-    </div>
-  )
+	const blockProps = useBlockProps( {
+		className: 'my-custom-class',
+		style: {
+			color: '#222222',
+			backgroundColor: '#eeeeee',
+		},
+	} );
+
+	return <div { ...blockProps }></div>;
 }
 ```
 
@@ -1029,13 +1061,23 @@ _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.
+
 ### useZoomOut
 
-A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
+A hook used to set the zoomed out view, invoking the hook sets the mode.
 
 _Parameters_
 
--   _zoomOut_ `boolean`: If we should enter into zoomOut mode or not
+-   _zoomOut_ `boolean`: If we should zoom out or not.
 
 ### Warning
 
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index e8c1f2cf06365..1c6c313345d72 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "13.3.0",
+	"version": "14.4.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -39,6 +39,7 @@
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/blob": "file:../blob",
+		"@wordpress/block-serialization-default-parser": "file:../block-serialization-default-parser",
 		"@wordpress/blocks": "file:../blocks",
 		"@wordpress/commands": "file:../commands",
 		"@wordpress/components": "file:../components",
@@ -72,8 +73,9 @@
 		"diff": "^4.0.2",
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",
+		"parsel-js": "^1.1.2",
 		"postcss": "^8.4.21",
-		"postcss-prefixwrap": "^1.41.0",
+		"postcss-prefix-selector": "^1.16.0",
 		"postcss-urlrebase": "^1.4.0",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^5.0.6",
diff --git a/packages/block-editor/src/autocompleters/block.js b/packages/block-editor/src/autocompleters/block.js
index bc06c9de5aaaf..859ae11036c82 100644
--- a/packages/block-editor/src/autocompleters/block.js
+++ b/packages/block-editor/src/autocompleters/block.js
@@ -60,7 +60,8 @@ function createBlockCompleter() {
 				}, [] );
 			const [ items, categories, collections ] = useBlockTypesState(
 				rootClientId,
-				noop
+				noop,
+				true
 			);
 
 			const filteredItems = useMemo( () => {
diff --git a/packages/block-editor/src/autocompleters/link.js b/packages/block-editor/src/autocompleters/link.js
index ce9af28f19d00..fb64cb151294d 100644
--- a/packages/block-editor/src/autocompleters/link.js
+++ b/packages/block-editor/src/autocompleters/link.js
@@ -6,6 +6,7 @@
 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;
 
@@ -46,7 +47,7 @@ function createLinkCompleter() {
 						key="icon"
 						icon={ item.subtype === 'page' ? page : post }
 					/>
-					{ item.title }
+					{ decodeEntities( item.title ) }
 				</>
 			);
 		},
diff --git a/packages/block-editor/src/autocompleters/style.scss b/packages/block-editor/src/autocompleters/style.scss
index 5380ddcfbe48b..43acc4efc16a5 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/background-image-control/index.js b/packages/block-editor/src/components/background-image-control/index.js
new file mode 100644
index 0000000000000..2703aa3988d64
--- /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 0000000000000..cde8044c24c12
--- /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 0000000000000..ebadad97eda02
--- /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 5e12165c67942..f06c8addedad5 100644
--- a/packages/block-editor/src/components/block-actions/index.js
+++ b/packages/block-editor/src/components/block-actions/index.js
@@ -29,7 +29,6 @@ export default function BlockActions( {
 				getBlockRootClientId,
 				getBlocksByClientId,
 				getDirectInsertBlock,
-				canMoveBlocks,
 				canRemoveBlocks,
 			} = select( blockEditorStore );
 
@@ -44,7 +43,6 @@ export default function BlockActions( {
 				: null;
 
 			return {
-				canMove: canMoveBlocks( clientIds ),
 				canRemove: canRemoveBlocks( clientIds ),
 				canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
 				canCopyStyles: blocks.every( ( block ) => {
@@ -67,8 +65,7 @@ export default function BlockActions( {
 	);
 	const { getBlocksByClientId, getBlocks } = useSelect( blockEditorStore );
 
-	const { canMove, canRemove, canInsertBlock, canCopyStyles, canDuplicate } =
-		selected;
+	const { canRemove, canInsertBlock, canCopyStyles, canDuplicate } = selected;
 
 	const {
 		removeBlocks,
@@ -77,9 +74,6 @@ export default function BlockActions( {
 		insertAfterBlock,
 		insertBeforeBlock,
 		flashBlock,
-		setBlockMovingClientId,
-		setNavigationMode,
-		selectBlock,
 	} = useDispatch( blockEditorStore );
 
 	const notifyCopy = useNotifyCopy();
@@ -89,7 +83,6 @@ export default function BlockActions( {
 		canCopyStyles,
 		canDuplicate,
 		canInsertBlock,
-		canMove,
 		canRemove,
 		onDuplicate() {
 			return duplicateBlocks( clientIds, updateSelection );
@@ -103,11 +96,6 @@ export default function BlockActions( {
 		onInsertAfter() {
 			insertAfterBlock( clientIds[ clientIds.length - 1 ] );
 		},
-		onMoveTo() {
-			setNavigationMode( true );
-			selectBlock( clientIds[ 0 ] );
-			setBlockMovingClientId( clientIds[ 0 ] );
-		},
 		onGroup() {
 			if ( ! clientIds.length ) {
 				return;
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 53baa97421e6c..cdec41dfc7b97 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 = () => {};
diff --git a/packages/block-editor/src/components/block-breadcrumb/index.js b/packages/block-editor/src/components/block-breadcrumb/index.js
index b3f2d3dee1201..440d9611d278b 100644
--- a/packages/block-editor/src/components/block-breadcrumb/index.js
+++ b/packages/block-editor/src/components/block-breadcrumb/index.js
@@ -5,6 +5,7 @@ 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
@@ -12,7 +13,7 @@ import { chevronRightSmall, Icon } from '@wordpress/icons';
 import BlockTitle from '../block-title';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElementRef } from '../block-list/use-block-props/use-block-refs';
 import getEditorRegion from '../../utils/get-editor-region';
 
 /**
@@ -41,7 +42,8 @@ function BlockBreadcrumb( { rootLabelText } ) {
 
 	// 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 = useBlockRef( clientId );
+	const blockRef = useRef();
+	useBlockElementRef( clientId, blockRef );
 
 	/*
 	 * Disable reason: The `list` ARIA role is redundant but
@@ -64,8 +66,8 @@ function BlockBreadcrumb( { rootLabelText } ) {
 			>
 				{ hasSelection && (
 					<Button
+						size="small"
 						className="block-editor-block-breadcrumb__button"
-						variant="tertiary"
 						onClick={ () => {
 							// Find the block editor wrapper for the selected block
 							const blockEditor = blockRef.current?.closest(
@@ -92,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 5d2e3154dc2d9..af56971fe4c5c 100644
--- a/packages/block-editor/src/components/block-breadcrumb/style.scss
+++ b/packages/block-editor/src/components/block-breadcrumb/style.scss
@@ -22,40 +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;
-
-		@include button-style__focus();
-	}
-}
-
 .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
index c6a47b7b5533c..9bad3ca22e95f 100644
--- a/packages/block-editor/src/components/block-canvas/index.js
+++ b/packages/block-editor/src/components/block-canvas/index.js
@@ -16,6 +16,13 @@ import { useMouseMoveTypingReset } from '../observe-typing';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useBlockCommands } from '../use-block-commands';
 
+// 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',
@@ -38,7 +45,8 @@ export function ExperimentalBlockCanvas( {
 			>
 				<EditorStyles
 					styles={ styles }
-					scope=".editor-styles-wrapper"
+					scope=":where(.editor-styles-wrapper)"
+					transformOptions={ EDITOR_STYLE_TRANSFORM_OPTIONS }
 				/>
 				<WritingFlow
 					ref={ contentRef }
diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
index 9e924cb79bace..1395b5c0a437d 100644
--- a/packages/block-editor/src/components/block-canvas/style.scss
+++ b/packages/block-editor/src/components/block-canvas/style.scss
@@ -4,4 +4,5 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	background-color: transparent;
+	@include editor-canvas-resize-animation;
 }
diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
index 8196f7688d4b5..4d40fe07d5547 100644
--- a/packages/block-editor/src/components/block-card/index.js
+++ b/packages/block-editor/src/components/block-card/index.js
@@ -13,7 +13,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { __, isRTL } from '@wordpress/i18n';
+import { __, isRTL, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
@@ -22,7 +22,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
-function BlockCard( { title, icon, description, blockType, className } ) {
+function BlockCard( { title, icon, description, blockType, className, name } ) {
 	if ( blockType ) {
 		deprecated( '`blockType` property in `BlockCard component`', {
 			since: '5.7',
@@ -65,7 +65,16 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 			) }
 			<BlockIcon icon={ icon } showColors />
 			<VStack spacing={ 1 }>
-				<h2 className="block-editor-block-card__title">{ title }</h2>
+				<h2 className="block-editor-block-card__title">
+					{ name?.length
+						? sprintf(
+								// translators:  %1$s: Custom block name. %2$s: Block title.
+								__( '%1$s (%2$s)' ),
+								name,
+								title
+						  )
+						: title }
+				</h2>
 				{ description && (
 					<Text className="block-editor-block-card__description">
 						{ description }
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 3c4839931e10f..48a13540e7842 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/test/__snapshots__/block-view.js.snap b/packages/block-editor/src/components/block-compare/test/__snapshots__/block-view.js.snap
index f8abe9753c031..c90f2bac7365a 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-controls/use-has-block-controls.js b/packages/block-editor/src/components/block-controls/use-has-block-controls.js
deleted file mode 100644
index f7884cc1882ed..0000000000000
--- a/packages/block-editor/src/components/block-controls/use-has-block-controls.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
-import warning from '@wordpress/warning';
-
-/**
- * Internal dependencies
- */
-import groups from './groups';
-
-export function useHasAnyBlockControls() {
-	let hasAnyBlockControls = false;
-	for ( const group in groups ) {
-		// It is safe to violate the rules of hooks here as the `groups` object
-		// is static and will not change length between renders. Do not return
-		// early as that will cause the hook to be called a different number of
-		// times between renders.
-		// eslint-disable-next-line react-hooks/rules-of-hooks
-		if ( useHasBlockControls( group ) ) {
-			hasAnyBlockControls = true;
-		}
-	}
-	return hasAnyBlockControls;
-}
-
-export function useHasBlockControls( group = 'default' ) {
-	const Slot = groups[ group ]?.Slot;
-	const fills = useSlotFills( Slot?.__unstableName );
-	if ( ! Slot ) {
-		warning( `Unknown BlockControls group "${ group }" provided.` );
-		return null;
-	}
-	return !! fills?.length;
-}
diff --git a/packages/block-editor/src/components/block-draggable/content.scss b/packages/block-editor/src/components/block-draggable/content.scss
index f1318daebd5a0..102230168e213 100644
--- a/packages/block-editor/src/components/block-draggable/content.scss
+++ b/packages/block-editor/src/components/block-draggable/content.scss
@@ -3,7 +3,7 @@
 .block-editor-block-list__layout .is-dragging {
 	background-color: currentColor !important;
 	opacity: 0.05 !important;
-	border-radius: $radius-block-ui !important;
+	border-radius: $radius-small !important;
 
 	// Disabling pointer events during the drag event is necessary,
 	// lest the block might affect your drag operation.
diff --git a/packages/block-editor/src/components/block-draggable/index.js b/packages/block-editor/src/components/block-draggable/index.js
index 0ba2b857bc693..5bb328f7cf9f5 100644
--- a/packages/block-editor/src/components/block-draggable/index.js
+++ b/packages/block-editor/src/components/block-draggable/index.js
@@ -13,7 +13,7 @@ import { throttle } from '@wordpress/compose';
 import BlockDraggableChip from './draggable-chip';
 import useScrollWhenDragging from './use-scroll-when-dragging';
 import { store as blockEditorStore } from '../../store';
-import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import { isDropTargetValid } from '../use-block-drop-zone';
 
 const BlockDraggable = ( {
@@ -62,7 +62,7 @@ const BlockDraggable = ( {
 		[ clientIds ]
 	);
 
-	const isDragging = useRef( false );
+	const isDraggingRef = useRef( false );
 	const [ startScrolling, scrollOnDragOver, stopScrolling ] =
 		useScrollWhenDragging();
 
@@ -75,15 +75,15 @@ const BlockDraggable = ( {
 	// 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 blockRef = useBlockRef( clientIds[ 0 ] );
-	const editorRoot = blockRef.current?.closest( 'body' );
+	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.
@@ -193,7 +193,7 @@ const BlockDraggable = ( {
 				// frame to enable dragging.
 				window.requestAnimationFrame( () => {
 					startDraggingBlocks( clientIds );
-					isDragging.current = true;
+					isDraggingRef.current = true;
 
 					startScrolling( event );
 
@@ -205,7 +205,7 @@ const BlockDraggable = ( {
 			onDragOver={ scrollOnDragOver }
 			onDragEnd={ () => {
 				stopDraggingBlocks();
-				isDragging.current = false;
+				isDraggingRef.current = false;
 
 				stopScrolling();
 
diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss
index afbf77319f720..f716f2d32a1d4 100644
--- a/packages/block-editor/src/components/block-draggable/style.scss
+++ b/packages/block-editor/src/components/block-draggable/style.scss
@@ -7,8 +7,8 @@
 
 .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;
@@ -77,6 +77,6 @@
 	.block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
 		background-color: $gray-700;
 		opacity: 1;
-		box-shadow: 0 4px 8px rgba($black, 0.2);
+		box-shadow: $elevation-small;
 	}
 }
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 a01db4927b652..515f3002de934 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.
@@ -82,7 +82,7 @@ export default function useScrollWhenDragging() {
 				moveableDistance === 0 || dragDistance === 0
 					? 0
 					: dragDistance / moveableDistance;
-			velocityY.current = VELOCITY_MULTIPLIER * distancePercentage;
+			velocityYRef.current = VELOCITY_MULTIPLIER * distancePercentage;
 		} else if ( event.clientY < offsetDragStartPosition ) {
 			// User is dragging upwards.
 			const moveableDistance = Math.max(
@@ -99,19 +99,19 @@ export default function useScrollWhenDragging() {
 				moveableDistance === 0 || dragDistance === 0
 					? 0
 					: dragDistance / moveableDistance;
-			velocityY.current = -VELOCITY_MULTIPLIER * distancePercentage;
+			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-edit/multiple-usage-warning.js b/packages/block-editor/src/components/block-edit/multiple-usage-warning.js
index 4acd4d1f349dd..ac83b0e5c1131 100644
--- a/packages/block-editor/src/components/block-edit/multiple-usage-warning.js
+++ b/packages/block-editor/src/components/block-edit/multiple-usage-warning.js
@@ -24,6 +24,7 @@ export function MultipleUsageWarning( {
 		<Warning
 			actions={ [
 				<Button
+					__next40pxDefaultSize
 					key="find-original"
 					variant="secondary"
 					onClick={ () => selectBlock( originalBlockClientId ) }
@@ -31,6 +32,7 @@ export function MultipleUsageWarning( {
 					{ __( 'Find original' ) }
 				</Button>,
 				<Button
+					__next40pxDefaultSize
 					key="remove"
 					variant="secondary"
 					onClick={ () => onReplace( [] ) }
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
index 71cb2ede989b5..6b9bad09978a5 100644
--- a/packages/block-editor/src/components/block-heading-level-dropdown/index.js
+++ b/packages/block-editor/src/components/block-heading-level-dropdown/index.js
@@ -40,12 +40,18 @@ export default function HeadingLevelDropdown( {
 	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={ options.map( ( targetLevel ) => {
+			controls={ validOptions.map( ( targetLevel ) => {
 				const isActive = targetLevel === value;
 				return {
 					icon: <HeadingLevelIcon level={ targetLevel } />,
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index cef1e9ec43051..559a19d776f51 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -33,37 +33,11 @@ import { useBorderPanelLabel } from '../../hooks/border';
 
 import { unlock } from '../../lock-unlock';
 
-function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
-	const contentClientIds = useSelect(
-		( select ) => {
-			const {
-				getClientIdsOfDescendants,
-				getBlockName,
-				getBlockEditingMode,
-			} = select( blockEditorStore );
-			return getClientIdsOfDescendants( topLevelLockedBlock ).filter(
-				( clientId ) =>
-					getBlockName( clientId ) !== 'core/list-item' &&
-					getBlockEditingMode( clientId ) === 'contentOnly'
-			);
-		},
-		[ topLevelLockedBlock ]
-	);
-	const blockInformation = useBlockDisplayInformation( topLevelLockedBlock );
+function BlockStylesPanel( { clientId } ) {
 	return (
-		<div className="block-editor-block-inspector">
-			<BlockCard
-				{ ...blockInformation }
-				className={ blockInformation.isSynced && 'is-synced' }
-			/>
-			<BlockVariationTransforms blockClientId={ topLevelLockedBlock } />
-			<BlockInfo.Slot />
-			{ contentClientIds.length > 0 && (
-				<PanelBody title={ __( 'Content' ) }>
-					<BlockQuickNavigation clientIds={ contentClientIds } />
-				</PanelBody>
-			) }
-		</div>
+		<PanelBody title={ __( 'Styles' ) }>
+			<BlockStyles clientId={ clientId } />
+		</PanelBody>
 	);
 }
 
@@ -73,33 +47,30 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		selectedBlockName,
 		selectedBlockClientId,
 		blockType,
-		topLevelLockedBlock,
+		isSectionBlock,
 	} = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientId,
 			getSelectedBlockCount,
 			getBlockName,
-			getContentLockingParent,
-			getTemplateLock,
+			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:
-				getContentLockingParent( _selectedBlockClientId ) ||
-				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly' ||
-				_selectedBlockName === 'core/block'
-					? _selectedBlockClientId
-					: undefined ),
+			isSectionBlock: _isSectionBlock( renderedBlockClientId ),
 		};
 	}, [] );
 
@@ -119,7 +90,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		blockName: selectedBlockName,
 	} );
 
-	if ( count > 1 ) {
+	if ( count > 1 && ! isSectionBlock ) {
 		return (
 			<div className="block-editor-block-inspector">
 				<MultiSelectionInspector />
@@ -177,13 +148,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		}
 		return null;
 	}
-	if ( topLevelLockedBlock ) {
-		return (
-			<BlockInspectorLockedBlocks
-				topLevelLockedBlock={ topLevelLockedBlock }
-			/>
-		);
-	}
 
 	return (
 		<BlockInspectorSingleBlockWrapper
@@ -202,6 +166,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			<BlockInspectorSingleBlock
 				clientId={ selectedBlockClientId }
 				blockName={ blockType.name }
+				isSectionBlock={ isSectionBlock }
 			/>
 		</BlockInspectorSingleBlockWrapper>
 	);
@@ -243,9 +208,13 @@ const AnimatedContainer = ( {
 	);
 };
 
-const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
+const BlockInspectorSingleBlock = ( {
+	clientId,
+	blockName,
+	isSectionBlock,
+} ) => {
 	const availableTabs = useInspectorControlsTabs( blockName );
-	const showTabs = availableTabs?.length > 1;
+	const showTabs = ! isSectionBlock && availableTabs?.length > 1;
 
 	const hasBlockStyles = useSelect(
 		( select ) => {
@@ -257,6 +226,26 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 	);
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const borderPanelLabel = useBorderPanelLabel( { blockName } );
+	const contentClientIds = useSelect(
+		( select ) => {
+			// Avoid unnecessary subscription.
+			if ( ! isSectionBlock ) {
+				return;
+			}
+
+			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">
@@ -280,11 +269,49 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 			{ ! showTabs && (
 				<>
 					{ hasBlockStyles && (
-						<div>
-							<PanelBody title={ __( 'Styles' ) }>
-								<BlockStyles clientId={ clientId } />
-							</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 group="list" />
diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss
index cf7131722722c..92a9a0dd03ab3 100644
--- a/packages/block-editor/src/components/block-inspector/style.scss
+++ b/packages/block-editor/src/components/block-inspector/style.scss
@@ -11,10 +11,8 @@
 	}
 
 	.components-base-control {
-		margin-bottom: #{ $grid-unit-30 };
-
-		&:last-child {
-			margin-bottom: $grid-unit-10;
+		&:where(:not(:last-child)) {
+			margin-bottom: $grid-unit-20;
 		}
 	}
 
@@ -51,4 +49,6 @@
 
 .block-editor-block-inspector__tab-item {
 	flex: 1 1 0px;
+	display: flex;
+	justify-content: center;
 }
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 a3ece994916a4..a35ecaf6bae8e 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
@@ -101,16 +101,17 @@ export default function BlockInvalidWarning( { clientId } ) {
 			<Warning
 				actions={ [
 					<Button
+						__next40pxDefaultSize
 						key="recover"
 						onClick={ convert.toRecoveredBlock }
 						variant="primary"
 					>
-						{ __( 'Attempt Block Recovery' ) }
+						{ __( 'Attempt recovery' ) }
 					</Button>,
 				] }
 				secondaryActions={ secondaryActions }
 			>
-				{ __( 'This block contains unexpected or invalid content.' ) }
+				{ __( 'Block contains unexpected or invalid content.' ) }
 			</Warning>
 			{ compare && (
 				<Modal
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index bdf33c944deb1..783b45da932a3 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -25,6 +25,7 @@ import {
 	getBlockDefaultClassName,
 	hasBlockSupport,
 	store as blocksStore,
+	privateApis as blocksPrivateApis,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
@@ -46,6 +47,8 @@ import { PrivateBlockContext } from './private-block-context';
 
 import { unlock } from '../../lock-unlock';
 
+const { isUnmodifiedBlockContent } = unlock( blocksPrivateApis );
+
 /**
  * Merges wrapper props with special handling for classNames and styles.
  *
@@ -350,12 +353,48 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					removeBlock( _clientId );
 				} else {
 					registry.batch( () => {
+						const firstBlock = getBlock( firstClientId );
+						const isFirstBlockContentUnmodified =
+							isUnmodifiedBlockContent( firstBlock );
+						const defaultBlockName = getDefaultBlockName();
+						const replacement = switchToBlockType(
+							firstBlock,
+							defaultBlockName
+						);
+						const canTransformToDefaultBlock =
+							!! replacement?.length &&
+							replacement.every( ( block ) =>
+								canInsertBlockType( block.name, _clientId )
+							);
+
 						if (
+							isFirstBlockContentUnmodified &&
+							canTransformToDefaultBlock
+						) {
+							// Step 1: If the block is empty and can be transformed to the default block type.
+							replaceBlocks(
+								firstClientId,
+								replacement,
+								changeSelection
+							);
+						} else if (
+							isFirstBlockContentUnmodified &&
+							firstBlock.name === defaultBlockName
+						) {
+							// Step 2: If the block is empty and is already the default block type.
+							removeBlock( firstClientId );
+							const nextBlockClientId =
+								getNextBlockClientId( clientId );
+							if ( nextBlockClientId ) {
+								selectBlock( nextBlockClientId );
+							}
+						} else if (
 							canInsertBlockType(
-								getBlockName( firstClientId ),
+								firstBlock.name,
 								targetRootClientId
 							)
 						) {
+							// Step 3: If the block can be moved up.
 							moveBlocksToPosition(
 								[ firstClientId ],
 								_clientId,
@@ -363,21 +402,17 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 								getBlockIndex( _clientId )
 							);
 						} else {
-							const replacement = switchToBlockType(
-								getBlock( firstClientId ),
-								getDefaultBlockName()
-							);
-
-							if (
-								replacement &&
-								replacement.length &&
+							const canLiftAndTransformToDefaultBlock =
+								!! replacement?.length &&
 								replacement.every( ( block ) =>
 									canInsertBlockType(
 										block.name,
 										targetRootClientId
 									)
-								)
-							) {
+								);
+
+							if ( canLiftAndTransformToDefaultBlock ) {
+								// Step 4: If the block can be transformed to the default block type and moved up.
 								insertBlocks(
 									replacement,
 									getBlockIndex( _clientId ),
@@ -386,6 +421,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 								);
 								removeBlock( firstClientId, false );
 							} else {
+								// Step 5: Continue the default behavior.
 								switchToDefaultOrRemove();
 							}
 						}
@@ -549,6 +585,7 @@ function BlockListBlockProvider( props ) {
 				getBlockMode,
 				isSelectionEnabled,
 				getTemplateLock,
+				isSectionBlock: _isSectionBlock,
 				getBlockWithoutAttributes,
 				getBlockAttributes,
 				canRemoveBlock,
@@ -571,10 +608,7 @@ function BlockListBlockProvider( props ) {
 				__unstableSelectionHasUnmergeableBlock,
 				isBlockBeingDragged,
 				isDragging,
-				hasBlockMovingClientId,
-				canInsertBlockType,
 				__unstableHasActiveBlockOverlayActive,
-				__unstableGetEditorMode,
 				getSelectedBlocksInitialCaretPosition,
 			} = unlock( select( blockEditorStore ) );
 			const blockWithoutAttributes =
@@ -632,7 +666,6 @@ function BlockListBlockProvider( props ) {
 				clientId,
 				checkDeep
 			);
-			const movingClientId = hasBlockMovingClientId();
 			const blockEditingMode = getBlockEditingMode( clientId );
 
 			const multiple = hasBlockSupport( blockName, 'multiple', true );
@@ -651,7 +684,7 @@ function BlockListBlockProvider( props ) {
 				mode: getBlockMode( clientId ),
 				isSelectionEnabled: isSelectionEnabled(),
 				isLocked: !! getTemplateLock( rootClientId ),
-				templateLock: getTemplateLock( clientId ),
+				isSectionBlock: _isSectionBlock( clientId ),
 				canRemove,
 				canMove,
 				isSelected: _isSelected,
@@ -678,12 +711,9 @@ function BlockListBlockProvider( props ) {
 				hasOverlay:
 					__unstableHasActiveBlockOverlayActive( clientId ) &&
 					! isDragging(),
-				initialPosition:
-					_isSelected &&
-					( __unstableGetEditorMode() === 'edit' ||
-						__unstableGetEditorMode() === 'zoom-out' ) // Don't recalculate the initialPosition when toggling in/out of zoom-out mode
-						? getSelectedBlocksInitialCaretPosition()
-						: undefined,
+				initialPosition: _isSelected
+					? getSelectedBlocksInitialCaretPosition()
+					: undefined,
 				isHighlighted: isBlockHighlighted( clientId ),
 				isMultiSelected,
 				isPartiallySelected:
@@ -692,13 +722,6 @@ function BlockListBlockProvider( props ) {
 					! __unstableSelectionHasUnmergeableBlock(),
 				isDragging: isBlockBeingDragged( clientId ),
 				hasChildSelected: isAncestorOfSelectedBlock,
-				isBlockMovingMode: !! movingClientId,
-				canInsertMovingBlock:
-					movingClientId &&
-					canInsertBlockType(
-						getBlockName( movingClientId ),
-						rootClientId
-					),
 				isEditingDisabled: blockEditingMode === 'disabled',
 				hasEditableOutline:
 					blockEditingMode !== 'disabled' &&
@@ -742,9 +765,7 @@ function BlockListBlockProvider( props ) {
 		isReusable,
 		isDragging,
 		hasChildSelected,
-		isBlockMovingMode,
-		canInsertMovingBlock,
-		templateLock,
+		isSectionBlock,
 		isEditingDisabled,
 		hasEditableOutline,
 		className,
@@ -788,9 +809,7 @@ function BlockListBlockProvider( props ) {
 		isReusable,
 		isDragging,
 		hasChildSelected,
-		isBlockMovingMode,
-		canInsertMovingBlock,
-		templateLock,
+		isSectionBlock,
 		isEditingDisabled,
 		hasEditableOutline,
 		isTemporarilyEditingAsBlocks,
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index 17ebad06c4d78..6a88813b0c604 100644
--- a/packages/block-editor/src/components/block-list/content.scss
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -80,7 +80,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	// 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,
-	&.is-navigate-mode .block-editor-block-list__block.is-selected,
 	.block-editor-block-list__block:not([contenteditable="true"]):focus {
 		outline: none;
 
@@ -89,64 +88,15 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		&::after {
 			@include selected-block-focus();
 			z-index: 1;
-
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				outline-color: $dark-theme-focus;
-			}
 		}
 	}
 
-	// Moving blocks using keyboard (Ellipsis > Move).
-	& .is-block-moving-mode.block-editor-block-list__block.is-selected {
-
-		&::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;
-			bottom: auto;
-			box-shadow: none;
-		}
-	}
-
-	& .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;
-}
-
 .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
@@ -159,11 +109,9 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	overflow-wrap: break-word;
 
 	pointer-events: auto;
-	user-select: text;
 
 	&.is-editing-disabled {
 		pointer-events: none;
-		user-select: none;
 	}
 
 	&.has-negative-margin {
@@ -220,7 +168,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		right: 0;
 		bottom: 0;
 		left: 0;
-		border-radius: $radius-block-ui;
 		background-color: rgba($white, 0.4);
 	}
 
@@ -229,19 +176,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		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);
@@ -255,11 +189,13 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
 
-	&.is-selected {
+	&.is-selected,
+	&.is-hovered {
 		cursor: default;
 
-		&.rich-text {
-			cursor: unset;
+		&.rich-text,
+		.rich-text {
+			cursor: auto;
 		}
 	}
 
@@ -285,11 +221,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	&.block-editor-block-list__block:not([contenteditable]):focus {
 		&::after {
 			outline-color: var(--wp-block-synced-color);
-
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				outline-color: $dark-theme-focus;
-			}
 		}
 	}
 }
@@ -316,7 +247,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	}
 }
 
-.is-root-container:not([inert]) .block-editor-block-list__block.is-reusable.is-selected .block-editor-block-list__block.has-editable-outline::after {
+.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;
@@ -429,7 +360,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	width: 100%;
 	border: none;
 	outline: none;
-	border-radius: 2px;
+	border-radius: $radius-small;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 	resize: none;
 	overflow: hidden;
@@ -462,3 +393,36 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		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;
+	font-size: $default-font-size;
+	font-family: $default-font;
+	color: $black;
+	font-weight: normal;
+
+	.is-zoomed-out & {
+		// Scale the font size based on the zoom level.
+		font-size: calc(#{$default-font-size} * ( 2 - 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;
+}
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 37dba80511d92..e2e019d4a9bf6 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -39,6 +39,7 @@ import {
 	DEFAULT_BLOCK_EDIT_CONTEXT,
 } from '../block-edit/context';
 import { useTypingObserver } from '../observe-typing';
+import { ZoomOutSeparator } from './zoom-out-separator';
 import { unlock } from '../../lock-unlock';
 
 export const IntersectionObserver = createContext();
@@ -46,26 +47,17 @@ const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
 
 function Root( { className, ...settings } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const {
-		isOutlineMode,
-		isFocusMode,
-		editorMode,
-		temporarilyEditingAsBlocks,
-	} = useSelect( ( select ) => {
-		const {
-			getSettings,
-			__unstableGetEditorMode,
-			getTemporarilyEditingAsBlocks,
-			isTyping,
-		} = unlock( select( blockEditorStore ) );
-		const { outlineMode, focusMode } = getSettings();
-		return {
-			isOutlineMode: outlineMode && ! isTyping(),
-			isFocusMode: focusMode,
-			editorMode: __unstableGetEditorMode(),
-			temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),
-		};
-	}, [] );
+	const { isOutlineMode, isFocusMode, temporarilyEditingAsBlocks } =
+		useSelect( ( select ) => {
+			const { getSettings, getTemporarilyEditingAsBlocks, isTyping } =
+				unlock( select( blockEditorStore ) );
+			const { outlineMode, focusMode } = getSettings();
+			return {
+				isOutlineMode: outlineMode && ! isTyping(),
+				isFocusMode: focusMode,
+				temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),
+			};
+		}, [] );
 	const registry = useRegistry();
 	const { setBlockVisibility } = useDispatch( blockEditorStore );
 
@@ -114,7 +106,6 @@ function Root( { className, ...settings } ) {
 			className: clsx( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,
 				'is-focus-mode': isFocusMode && isLargeViewport,
-				'is-navigate-mode': editorMode === 'navigation',
 			} ),
 		},
 		settings
@@ -174,49 +165,57 @@ function Items( {
 	// function on every render.
 	const hasAppender = CustomAppender !== false;
 	const hasCustomAppender = !! CustomAppender;
-	const { order, selectedBlocks, visibleBlocks, shouldRenderAppender } =
-		useSelect(
-			( select ) => {
-				const {
-					getSettings,
-					getBlockOrder,
-					getSelectedBlockClientId,
-					getSelectedBlockClientIds,
-					__unstableGetVisibleBlocks,
-					getTemplateLock,
-					getBlockEditingMode,
-					__unstableGetEditorMode,
-				} = select( blockEditorStore );
-
-				const _order = getBlockOrder( rootClientId );
+	const {
+		order,
+		isZoomOut,
+		selectedBlocks,
+		visibleBlocks,
+		shouldRenderAppender,
+	} = useSelect(
+		( select ) => {
+			const {
+				getSettings,
+				getBlockOrder,
+				getSelectedBlockClientId,
+				getSelectedBlockClientIds,
+				__unstableGetVisibleBlocks,
+				getTemplateLock,
+				getBlockEditingMode,
+				__unstableGetEditorMode,
+				isSectionBlock,
+			} = unlock( select( blockEditorStore ) );
 
-				if ( getSettings().__unstableIsPreviewMode ) {
-					return {
-						order: _order,
-						selectedBlocks: EMPTY_ARRAY,
-						visibleBlocks: EMPTY_SET,
-					};
-				}
+			const _order = getBlockOrder( rootClientId );
 
-				const selectedBlockClientId = getSelectedBlockClientId();
+			if ( getSettings().__unstableIsPreviewMode ) {
 				return {
 					order: _order,
-					selectedBlocks: getSelectedBlockClientIds(),
-					visibleBlocks: __unstableGetVisibleBlocks(),
-					shouldRenderAppender:
-						hasAppender &&
-						__unstableGetEditorMode() !== 'zoom-out' &&
-						( hasCustomAppender
-							? ! getTemplateLock( rootClientId ) &&
-							  getBlockEditingMode( rootClientId ) !== 'disabled'
-							: rootClientId === selectedBlockClientId ||
-							  ( ! rootClientId &&
-									! selectedBlockClientId &&
-									! _order.length ) ),
+					selectedBlocks: EMPTY_ARRAY,
+					visibleBlocks: EMPTY_SET,
 				};
-			},
-			[ rootClientId, hasAppender, hasCustomAppender ]
-		);
+			}
+
+			const selectedBlockClientId = getSelectedBlockClientId();
+			return {
+				order: _order,
+				selectedBlocks: getSelectedBlockClientIds(),
+				visibleBlocks: __unstableGetVisibleBlocks(),
+				isZoomOut: __unstableGetEditorMode() === 'zoom-out',
+				shouldRenderAppender:
+					! isSectionBlock( rootClientId ) &&
+					getBlockEditingMode( rootClientId ) !== 'disabled' &&
+					! getTemplateLock( rootClientId ) &&
+					hasAppender &&
+					__unstableGetEditorMode() !== 'zoom-out' &&
+					( hasCustomAppender ||
+						rootClientId === selectedBlockClientId ||
+						( ! rootClientId &&
+							! selectedBlockClientId &&
+							! _order.length ) ),
+			};
+		},
+		[ rootClientId, hasAppender, hasCustomAppender ]
+	);
 
 	return (
 		<LayoutProvider value={ layout }>
@@ -230,10 +229,24 @@ 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 }
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 6c44aa5c5d970..45fc1d9eb5ea1 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
@@ -25,7 +25,7 @@ import {
 } 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 { useZoomOutModeExit } from './use-zoom-out-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { useScrollIntoView } from './use-scroll-into-view';
@@ -49,13 +49,13 @@ import { canBindBlock } from '../../../hooks/use-bindings-attributes';
  *
  * export default function Edit() {
  *
- *   const blockProps = useBlockProps(
+ *   const blockProps = useBlockProps( {
  *     className: 'my-custom-class',
  *     style: {
  *       color: '#222222',
  *       backgroundColor: '#eeeeee'
  *     }
- *   )
+ *   } )
  *
  *   return (
  *	    <div { ...blockProps }>
@@ -96,13 +96,11 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		isReusable,
 		isDragging,
 		hasChildSelected,
-		isBlockMovingMode,
-		canInsertMovingBlock,
 		isEditingDisabled,
 		hasEditableOutline,
 		isTemporarilyEditingAsBlocks,
 		defaultClassName,
-		templateLock,
+		isSectionBlock,
 	} = useContext( PrivateBlockContext );
 
 	// translators: %s: Type of block (i.e. Text, Image etc)
@@ -114,14 +112,14 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useBlockRefProvider( clientId ),
 		useFocusHandler( clientId ),
 		useEventHandlers( { clientId, isSelected } ),
-		useNavModeExit( clientId ),
+		useZoomOutModeExit(),
 		useIsHovered( { clientId } ),
 		useIntersectionObserver(),
 		useMovingAnimation( { triggerAnimationOnChange: index, clientId } ),
 		useDisabled( { isDisabled: ! hasOverlay } ),
 		useFlashEditableBlocks( {
 			clientId,
-			isEnabled: name === 'core/block' || templateLock === 'contentOnly',
+			isEnabled: isSectionBlock,
 		} ),
 		useScrollIntoView( { isSelected } ),
 	] );
@@ -179,8 +177,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				'is-reusable': isReusable,
 				'is-dragging': isDragging,
 				'has-child-selected': hasChildSelected,
-				'is-block-moving-mode': isBlockMovingMode,
-				'can-insert-moving-block': canInsertMovingBlock,
 				'is-editing-disabled': isEditingDisabled,
 				'has-editable-outline': hasEditableOutline,
 				'has-negative-margin': hasNegativeMargin,
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 056ade045d165..16fd3ff1ca81d 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,
-	useMemo,
-	useRef,
-	useState,
-	useLayoutEffect,
-} 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.
@@ -36,31 +30,33 @@ export function useBlockRefProvider( 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 the same
- * stable ref object even if the `clientId` argument changes. This hook is not
- * reactive, i.e., it won't trigger a rerender of the calling component if the
- * ref value changes. For reactive use cases there is the `useBlockElement` hook.
- *
- * @param {string} clientId The client ID to get a ref for.
+ * Tracks the DOM element for the block identified by `clientId` and assigns it to the `ref`
+ * whenever it changes.
  *
- * @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 ) {
+export function useBlockElementRef( clientId, ref ) {
 	const { refsMap } = useContext( BlockRefs );
-	const latestClientId = useRef();
-	latestClientId.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() {
-				return refsMap.get( latestClientId.current ) ?? null;
-			},
-		} ),
-		[ refsMap ]
-	);
+	useLayoutEffect( () => {
+		assignRef( ref, refsMap.get( clientId ) );
+		const unsubscribe = refsMap.subscribe( clientId, () =>
+			assignRef( ref, refsMap.get( clientId ) )
+		);
+		return () => {
+			unsubscribe();
+			assignRef( ref, null );
+		};
+	}, [ refsMap, clientId, ref ] );
 }
 
 /**
@@ -71,20 +67,8 @@ function useBlockRef( clientId ) {
  *
  * @return {Element|null} The block's wrapper element.
  */
-function useBlockElement( clientId ) {
-	const { refsMap } = useContext( BlockRefs );
+export function useBlockElement( clientId ) {
 	const [ blockElement, setBlockElement ] = useState( null );
-	// Delay setting the resulting `blockElement` until an effect. If the block element
-	// changes (i.e., the block is unmounted and re-mounted), this allows enough time
-	// for the ref callbacks to clean up the old element and set the new one.
-	useLayoutEffect( () => {
-		setBlockElement( refsMap.get( clientId ) );
-		return refsMap.subscribe( clientId, () =>
-			setBlockElement( refsMap.get( clientId ) )
-		);
-	}, [ refsMap, clientId ] );
+	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-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 aa9c0a630c5bd..0000000000000
--- 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.removeEventListener( 'mousedown', onMouseDown );
-			};
-		},
-		[ clientId, isNavigationMode, isBlockSelected, setNavigationMode ]
-	);
-}
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 01cc462e507ec..19b778ca8fccf 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
@@ -10,6 +10,7 @@ import { useRefEffect } from '@wordpress/compose';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
 /**
  * Adds block behaviour:
@@ -20,9 +21,18 @@ import { store as blockEditorStore } from '../../../store';
  * @param {string} clientId Block client ID.
  */
 export function useEventHandlers( { clientId, isSelected } ) {
-	const { getBlockRootClientId, getBlockIndex } =
-		useSelect( blockEditorStore );
-	const { insertAfterBlock, removeBlock } = useDispatch( blockEditorStore );
+	const {
+		getBlockRootClientId,
+		getBlockIndex,
+		isZoomOut,
+		__unstableGetEditorMode,
+	} = unlock( useSelect( blockEditorStore ) );
+	const {
+		insertAfterBlock,
+		removeBlock,
+		__unstableSetEditorMode,
+		resetZoomLevel,
+	} = unlock( useDispatch( blockEditorStore ) );
 
 	return useRefEffect(
 		( node ) => {
@@ -56,7 +66,14 @@ export function useEventHandlers( { clientId, isSelected } ) {
 
 				event.preventDefault();
 
-				if ( keyCode === ENTER ) {
+				if (
+					keyCode === ENTER &&
+					__unstableGetEditorMode() === 'zoom-out' &&
+					isZoomOut()
+				) {
+					__unstableSetEditorMode( 'edit' );
+					resetZoomLevel();
+				} else if ( keyCode === ENTER ) {
 					insertAfterBlock( clientId );
 				} else {
 					removeBlock( clientId );
@@ -88,6 +105,10 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			getBlockIndex,
 			insertAfterBlock,
 			removeBlock,
+			__unstableGetEditorMode,
+			__unstableSetEditorMode,
+			isZoomOut,
+			resetZoomLevel,
 		]
 	);
 }
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js b/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js
new file mode 100644
index 0000000000000..494694952110b
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js
@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+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, __unstableGetEditorMode } = unlock(
+		useSelect( blockEditorStore )
+	);
+
+	const { __unstableSetEditorMode, resetZoomLevel } = unlock(
+		useDispatch( blockEditorStore )
+	);
+
+	return useRefEffect(
+		( node ) => {
+			function onDoubleClick( event ) {
+				// In "compose" mode.
+				const composeMode =
+					__unstableGetEditorMode() === 'zoom-out' && isZoomOut();
+
+				if ( ! composeMode ) {
+					return;
+				}
+
+				if ( ! event.defaultPrevented ) {
+					event.preventDefault();
+
+					const { __experimentalSetIsInserterOpened } = getSettings();
+
+					if (
+						typeof __experimentalSetIsInserterOpened === 'function'
+					) {
+						__experimentalSetIsInserterOpened( false );
+					}
+					__unstableSetEditorMode( 'edit' );
+					resetZoomLevel();
+				}
+			}
+
+			node.addEventListener( 'dblclick', onDoubleClick );
+
+			return () => {
+				node.removeEventListener( 'dblclick', onDoubleClick );
+			};
+		},
+		[
+			getSettings,
+			__unstableSetEditorMode,
+			__unstableGetEditorMode,
+			isZoomOut,
+			resetZoomLevel,
+		]
+	);
+}
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 74151fb3b070b..2b76804785a57 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
@@ -11,6 +11,7 @@ import { isRTL } from '@wordpress/i18n';
  */
 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 );
@@ -25,12 +26,14 @@ export function useInBetweenInserter() {
 		getBlockIndex,
 		isMultiSelecting,
 		getSelectedBlockClientIds,
+		getSettings,
 		getTemplateLock,
 		__unstableIsWithinBlockOverlay,
 		getBlockEditingMode,
 		getBlockName,
 		getBlockAttributes,
-	} = useSelect( blockEditorStore );
+		getParentSectionBlock,
+	} = unlock( useSelect( blockEditorStore ) );
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
 
@@ -88,9 +91,11 @@ export function useInBetweenInserter() {
 					return;
 				}
 
+				const blockListSettings = getBlockListSettings( rootClientId );
 				const orientation =
-					getBlockListSettings( rootClientId )?.orientation ||
-					'vertical';
+					blockListSettings?.orientation || 'vertical';
+				const captureToolbars =
+					!! blockListSettings?.__experimentalCaptureToolbars;
 				const offsetTop = event.clientY;
 				const offsetLeft = event.clientX;
 
@@ -130,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();
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 0000000000000..9e0d087c2267c
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/zoom-out-separator.js
@@ -0,0 +1,139 @@
+/**
+ * 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
+					as="button"
+					layout={ ! isReducedMotion }
+					initial={ { height: 0 } }
+					animate={ { height: '120px' } }
+					exit={ { height: 0 } }
+					transition={ {
+						type: 'tween',
+						duration: 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={ {
+							type: 'tween',
+							duration: 0.1,
+						} }
+					>
+						{ __( 'Drop pattern.' ) }
+					</motion.div>
+				</motion.div>
+			) }
+		</AnimatePresence>
+	);
+}
diff --git a/packages/block-editor/src/components/block-lock/modal.js b/packages/block-editor/src/components/block-lock/modal.js
index 11a03c5aff4dd..7d09f7b63f8cd 100644
--- a/packages/block-editor/src/components/block-lock/modal.js
+++ b/packages/block-editor/src/components/block-lock/modal.js
@@ -217,12 +217,20 @@ export default function BlockLockModal( { clientId, onClose } ) {
 					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 0a43985a83847..ad59030a8f440 100644
--- a/packages/block-editor/src/components/block-lock/style.scss
+++ b/packages/block-editor/src/components/block-lock/style.scss
@@ -8,13 +8,9 @@
 	}
 }
 
-.block-editor-block-lock-modal__options {
-	margin-top: $grid-unit-20;
-
-	legend {
-		margin-bottom: $grid-unit-20;
-		padding: 0;
-	}
+.block-editor-block-lock-modal__options legend {
+	margin-bottom: $grid-unit-20;
+	padding: 0;
 }
 
 .block-editor-block-lock-modal__checklist {
@@ -45,14 +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;
+	padding-top: $grid-unit-20;
 }
 
 .block-editor-block-lock-modal__actions {
diff --git a/packages/block-editor/src/components/block-lock/toolbar.js b/packages/block-editor/src/components/block-lock/toolbar.js
index 29bf0cdd6a60c..12376a7b56a5e 100644
--- a/packages/block-editor/src/components/block-lock/toolbar.js
+++ b/packages/block-editor/src/components/block-lock/toolbar.js
@@ -20,7 +20,7 @@ export default function BlockLockToolbar( { clientId } ) {
 		false
 	);
 
-	const hasLockButtonShown = useRef( false );
+	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.
@@ -29,11 +29,11 @@ export default function BlockLockToolbar( { clientId } ) {
 	// whence it came, and to do that, we need to leave the button in the toolbar.
 	useEffect( () => {
 		if ( isLocked ) {
-			hasLockButtonShown.current = true;
+			hasLockButtonShownRef.current = true;
 		}
 	}, [ isLocked ] );
 
-	if ( ! isLocked && ! hasLockButtonShown.current ) {
+	if ( ! isLocked && ! hasLockButtonShownRef.current ) {
 		return null;
 	}
 
diff --git a/packages/block-editor/src/components/block-mover/button.js b/packages/block-editor/src/components/block-mover/button.js
index 7e01ee4a359db..76b46701758e8 100644
--- a/packages/block-editor/src/components/block-mover/button.js
+++ b/packages/block-editor/src/components/block-mover/button.js
@@ -129,6 +129,7 @@ const BlockMoverButton = forwardRef(
 		return (
 			<>
 				<Button
+					__next40pxDefaultSize
 					ref={ ref }
 					className={ clsx(
 						'block-editor-block-mover-button',
diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
index aaaf6c64b5595..4e993252ef974 100644
--- a/packages/block-editor/src/components/block-mover/index.js
+++ b/packages/block-editor/src/components/block-mover/index.js
@@ -69,7 +69,11 @@ function BlockMover( {
 		[ clientIds ]
 	);
 
-	if ( ! canMove || ( isFirst && isLast && ! rootClientId ) ) {
+	if (
+		! canMove ||
+		( isFirst && isLast && ! rootClientId ) ||
+		( hideDragHandle && isManualGrid )
+	) {
 		return null;
 	}
 
@@ -83,9 +87,9 @@ function BlockMover( {
 				<BlockDraggable clientIds={ clientIds } fadeWhenDisabled>
 					{ ( draggableProps ) => (
 						<Button
+							__next40pxDefaultSize
 							icon={ dragHandle }
 							className="block-editor-block-mover__drag-handle"
-							aria-hidden="true"
 							label={ __( 'Drag' ) }
 							// Should not be able to tab to drag handle as this
 							// button can only be used with a pointer device.
diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
index 11bc362663a4d..c58ac9f19673f 100644
--- a/packages/block-editor/src/components/block-mover/style.scss
+++ b/packages/block-editor/src/components/block-mover/style.scss
@@ -76,7 +76,7 @@
 		content: "";
 		position: absolute;
 		display: block;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		height: $grid-unit-40;
 
 		// Position the focus rectangle.
diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js
index e04589d002c53..0bf8fd0532018 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 }
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 80b314eeb42e5..9090de42f8b7d 100644
--- a/packages/block-editor/src/components/block-parent-selector/index.js
+++ b/packages/block-editor/src/components/block-parent-selector/index.js
@@ -14,6 +14,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
 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
@@ -23,24 +24,26 @@ import { store as blockEditorStore } from '../../store';
  */
 export default function BlockParentSelector() {
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const { firstParentClientId, isVisible } = useSelect( ( select ) => {
+	const { parentClientId, isVisible } = useSelect( ( select ) => {
 		const {
 			getBlockName,
 			getBlockParents,
 			getSelectedBlockClientId,
 			getBlockEditingMode,
-		} = select( blockEditorStore );
+			getParentSectionBlock,
+		} = unlock( select( blockEditorStore ) );
 		const { hasBlockSupport } = select( blocksStore );
 		const selectedBlockClientId = getSelectedBlockClientId();
+		const parentSection = getParentSectionBlock( selectedBlockClientId );
 		const parents = getBlockParents( selectedBlockClientId );
-		const _firstParentClientId = parents[ parents.length - 1 ];
-		const parentBlockName = getBlockName( _firstParentClientId );
+		const _parentClientId = parentSection ?? parents[ parents.length - 1 ];
+		const parentBlockName = getBlockName( _parentClientId );
 		const _parentBlockType = getBlockType( parentBlockName );
 		return {
-			firstParentClientId: _firstParentClientId,
+			parentClientId: _parentClientId,
 			isVisible:
-				_firstParentClientId &&
-				getBlockEditingMode( _firstParentClientId ) === 'default' &&
+				_parentClientId &&
+				getBlockEditingMode( _parentClientId ) !== 'disabled' &&
 				hasBlockSupport(
 					_parentBlockType,
 					'__experimentalParentSelector',
@@ -48,7 +51,7 @@ export default function BlockParentSelector() {
 				),
 		};
 	}, [] );
-	const blockInformation = useBlockDisplayInformation( firstParentClientId );
+	const blockInformation = useBlockDisplayInformation( parentClientId );
 
 	// Allows highlighting the parent block outline when focusing or hovering
 	// the parent block selector within the child.
@@ -65,13 +68,13 @@ export default function BlockParentSelector() {
 	return (
 		<div
 			className="block-editor-block-parent-selector"
-			key={ firstParentClientId }
+			key={ parentClientId }
 			ref={ nodeRef }
 			{ ...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 parent block: %s' ),
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 edd55e90dc3e2..83cceca7a20a7 100644
--- a/packages/block-editor/src/components/block-pattern-setup/index.js
+++ b/packages/block-editor/src/components/block-pattern-setup/index.js
@@ -3,10 +3,7 @@
  */
 import { useDispatch } from '@wordpress/data';
 import { cloneBlock } from '@wordpress/blocks';
-import {
-	VisuallyHidden,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { Composite, VisuallyHidden } from '@wordpress/components';
 
 import { useState } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
@@ -20,13 +17,6 @@ import BlockPreview from '../block-preview';
 import SetupToolbar from './setup-toolbar';
 import usePatternsSetup from './use-patterns-setup';
 import { VIEWMODES } from './constants';
-import { unlock } from '../../lock-unlock';
-
-const {
-	CompositeV2: Composite,
-	CompositeItemV2: CompositeItem,
-	useCompositeStoreV2: useCompositeStore,
-} = unlock( componentsPrivateApis );
 
 const SetupContent = ( {
 	viewMode,
@@ -35,7 +25,6 @@ const SetupContent = ( {
 	onBlockPatternSelect,
 	showTitles,
 } ) => {
-	const compositeStore = useCompositeStore();
 	const containerClass = 'block-editor-block-pattern-setup__container';
 
 	if ( viewMode === VIEWMODES.carousel ) {
@@ -65,7 +54,6 @@ const SetupContent = ( {
 	return (
 		<div className="block-editor-block-pattern-setup__grid">
 			<Composite
-				store={ compositeStore }
 				role="listbox"
 				className={ containerClass }
 				aria-label={ __( 'Patterns list' ) }
@@ -92,7 +80,7 @@ function BlockPattern( { pattern, onSelect, showTitles } ) {
 	);
 	return (
 		<div className={ `${ baseClassName }__list-item` }>
-			<CompositeItem
+			<Composite.Item
 				render={
 					<div
 						aria-describedby={
@@ -120,7 +108,7 @@ function BlockPattern( { pattern, onSelect, showTitles } ) {
 						{ description }
 					</VisuallyHidden>
 				) }
-			</CompositeItem>
+			</Composite.Item>
 		</div>
 	);
 }
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 df559194e5b78..d571e0fef5dcc 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,14 +35,16 @@ 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 }
@@ -60,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 3474eed5be517..10582a7a2ce49 100644
--- a/packages/block-editor/src/components/block-pattern-setup/style.scss
+++ b/packages/block-editor/src/components/block-pattern-setup/style.scss
@@ -4,7 +4,7 @@
 	justify-content: center;
 	align-items: flex-start;
 	width: 100%;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 
 	&.view-mode-grid {
 		padding-top: $grid-unit-05;
@@ -60,7 +60,7 @@
 
 				.block-editor-block-preview__container {
 					min-height: 100px;
-					border-radius: $radius-block-ui;
+					border-radius: $radius-medium;
 					border: $border-width solid $gray-300;
 				}
 
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 b2af3456be7b0..2609cc2db97a1 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -9,9 +9,9 @@ import clsx from 'clsx';
 import { cloneBlock } from '@wordpress/blocks';
 import { useEffect, useState, forwardRef, useMemo } from '@wordpress/element';
 import {
+	Composite,
 	VisuallyHidden,
 	Tooltip,
-	privateApis as componentsPrivateApis,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
@@ -21,18 +21,11 @@ import { Icon, symbol } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
 import BlockPreview from '../block-preview';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
 import BlockPatternsPaging from '../block-patterns-paging';
 import { INSERTER_PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
 
-const {
-	CompositeV2: Composite,
-	CompositeItemV2: CompositeItem,
-	useCompositeStoreV2: useCompositeStore,
-} = unlock( componentsPrivateApis );
-
 const WithToolTip = ( { showTooltip, title, children } ) => {
 	if ( showTooltip ) {
 		return <Tooltip text={ title }>{ children }</Tooltip>;
@@ -107,7 +100,7 @@ function BlockPattern( {
 						}
 						title={ pattern.title }
 					>
-						<CompositeItem
+						<Composite.Item
 							render={
 								<div
 									role="option"
@@ -176,7 +169,7 @@ function BlockPattern( {
 									{ pattern.description }
 								</VisuallyHidden>
 							) }
-						</CompositeItem>
+						</Composite.Item>
 					</WithToolTip>
 				</div>
 			) }
@@ -206,19 +199,23 @@ function BlockPatternsList(
 	},
 	ref
 ) {
-	const compositeStore = useCompositeStore( { orientation } );
-	const { setActiveId } = compositeStore;
+	const [ activeCompositeId, setActiveCompositeId ] = useState( undefined );
 
 	useEffect( () => {
-		// We reset the active composite item whenever the
-		// available patterns change, to make sure that
-		// focus is put back to the start.
-		setActiveId( undefined );
-	}, [ setActiveId, shownPatterns, blockPatterns ] );
+		// 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.find( ( pattern ) =>
+			shownPatterns.includes( pattern )
+		)?.name;
+		setActiveCompositeId( firstCompositeItemId );
+	}, [ shownPatterns, blockPatterns ] );
 
 	return (
 		<Composite
-			store={ compositeStore }
+			orientation={ orientation }
+			activeId={ activeCompositeId }
+			setActiveId={ setActiveCompositeId }
 			role="listbox"
 			className="block-editor-block-patterns-list"
 			aria-label={ label }
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 6b23c1e844dad..84e95563737c3 100644
--- a/packages/block-editor/src/components/block-patterns-list/style.scss
+++ b/packages/block-editor/src/components/block-patterns-list/style.scss
@@ -36,12 +36,12 @@
 		display: flex;
 		align-items: center;
 		overflow: hidden;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-medium;
 
 		&::after {
 			outline: $border-width solid rgba($black, 0.1);
 			outline-offset: -$border-width;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-medium;
 		}
 	}
 
diff --git a/packages/block-editor/src/components/block-patterns-paging/index.js b/packages/block-editor/src/components/block-patterns-paging/index.js
index 7ddbfc4702bf2..e4d7ce49b90f3 100644
--- a/packages/block-editor/src/components/block-patterns-paging/index.js
+++ b/packages/block-editor/src/components/block-patterns-paging/index.js
@@ -42,7 +42,9 @@ export default function Pagination( {
 							onClick={ () => changePage( 1 ) }
 							disabled={ currentPage === 1 }
 							aria-label={ __( 'First page' ) }
+							size="compact"
 							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
 						>
 							<span>«</span>
 						</Button>
@@ -51,7 +53,9 @@ export default function Pagination( {
 							onClick={ () => changePage( currentPage - 1 ) }
 							disabled={ currentPage === 1 }
 							aria-label={ __( 'Previous page' ) }
+							size="compact"
 							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
 						>
 							<span>‹</span>
 						</Button>
@@ -74,7 +78,9 @@ export default function Pagination( {
 							onClick={ () => changePage( currentPage + 1 ) }
 							disabled={ currentPage === numPages }
 							aria-label={ __( 'Next page' ) }
+							size="compact"
 							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
 						>
 							<span>›</span>
 						</Button>
@@ -83,8 +89,9 @@ export default function Pagination( {
 							onClick={ () => changePage( numPages ) }
 							disabled={ currentPage === numPages }
 							aria-label={ __( 'Last page' ) }
-							size="default"
+							size="compact"
 							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
 						>
 							<span>»</span>
 						</Button>
diff --git a/packages/block-editor/src/components/block-patterns-paging/style.scss b/packages/block-editor/src/components/block-patterns-paging/style.scss
index f5f34d821233a..85d39f9a36577 100644
--- a/packages/block-editor/src/components/block-patterns-paging/style.scss
+++ b/packages/block-editor/src/components/block-patterns-paging/style.scss
@@ -4,37 +4,20 @@
 		border-top: 1px solid $gray-800;
 		padding: $grid-unit-05;
 		justify-content: center;
-		.components-button.is-tertiary {
-			width: auto;
-			height: $button-size-compact;
-			justify-content: center;
-
-			&:disabled {
-				color: $gray-600;
-				background: none;
-			}
-
-			&:hover:not(:disabled) {
-				color: $white;
-				background-color: $gray-700;
-			}
-		}
 	}
 }
 
 .show-icon-labels {
-	.block-editor-patterns__grid-pagination {
-		.components-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);
-			}
+	.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/cover.js b/packages/block-editor/src/components/block-popover/cover.js
index caad2ddbb7ec5..401431defe4fd 100644
--- a/packages/block-editor/src/components/block-popover/cover.js
+++ b/packages/block-editor/src/components/block-popover/cover.js
@@ -6,7 +6,7 @@ import { useEffect, useState, useMemo, forwardRef } from '@wordpress/element';
 /**
  * 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 { PrivateBlockPopover } from '.';
 
 function BlockPopoverCover(
diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js
index bc2eaeae0be60..2ed9ee0bcb284 100644
--- a/packages/block-editor/src/components/block-popover/inbetween.js
+++ b/packages/block-editor/src/components/block-popover/inbetween.js
@@ -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;
diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js
index cc8d832c31bc7..47022e336e486 100644
--- a/packages/block-editor/src/components/block-popover/index.js
+++ b/packages/block-editor/src/components/block-popover/index.js
@@ -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, getVisibleElementBounds } from '../../utils/dom';
 
 const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
 
@@ -87,34 +88,12 @@ 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(
+							getVisibleElementBounds( selectedElement ),
+							getVisibleElementBounds( lastSelectedElement )
+					  )
+					: getVisibleElementBounds( selectedElement );
 			},
 			contextElement: selectedElement,
 		};
diff --git a/packages/block-editor/src/components/block-popover/style.scss b/packages/block-editor/src/components/block-popover/style.scss
index e393e77c63b05..c49538378a12c 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-quick-navigation/index.js b/packages/block-editor/src/components/block-quick-navigation/index.js
index 63d0edbb868aa..fdb3475b3e180 100644
--- a/packages/block-editor/src/components/block-quick-navigation/index.js
+++ b/packages/block-editor/src/components/block-quick-navigation/index.js
@@ -59,6 +59,7 @@ function BlockQuickNavigationItem( { clientId, onSelect } ) {
 
 	return (
 		<Button
+			__next40pxDefaultSize
 			isPressed={ isSelected }
 			onClick={ async () => {
 				await selectBlock( clientId );
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 1edf02eb36894..4ebce4172e9b3 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
@@ -4,12 +4,9 @@
 import {
 	createSlotFill,
 	MenuGroup,
-	MenuItem,
 	__experimentalStyleProvider as StyleProvider,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { pipe } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -21,7 +18,7 @@ import {
 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' );
@@ -96,18 +93,12 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 							/>
 						) }
 						{ fills }
-						{ fillProps?.canMove &&
-							! fillProps?.onlyBlock &&
-							! isContentOnly && (
-								<MenuItem
-									onClick={ pipe(
-										fillProps?.onClose,
-										fillProps?.onMoveTo
-									) }
-								>
-									{ __( 'Move to' ) }
-								</MenuItem>
-							) }
+						{ selectedClientIds.length === 1 && (
+							<ModifyContentLockMenuItem
+								clientId={ selectedClientIds[ 0 ] }
+								onClose={ fillProps?.onClose }
+							/>
+						) }
 						{ fillProps?.count === 1 && ! isContentOnly && (
 							<BlockModeToggle
 								clientId={ fillProps?.firstBlockClientId }
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 6810a21581f12..7ca294a289415 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-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
index 069bd2c9ff1ee..ac2b99ac2bb62 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
@@ -58,7 +58,6 @@ export function BlockSettingsDropdown( {
 	const firstBlockClientId = clientIds[ 0 ];
 	const {
 		firstParentClientId,
-		onlyBlock,
 		parentBlockType,
 		previousBlockClientId,
 		selectedBlockClientIds,
@@ -67,7 +66,6 @@ export function BlockSettingsDropdown( {
 	} = useSelect(
 		( select ) => {
 			const {
-				getBlockCount,
 				getBlockName,
 				getBlockRootClientId,
 				getPreviousBlockClientId,
@@ -86,7 +84,6 @@ export function BlockSettingsDropdown( {
 
 			return {
 				firstParentClientId: _firstParentClientId,
-				onlyBlock: 1 === getBlockCount( _firstParentClientId ),
 				parentBlockType:
 					_firstParentClientId &&
 					( getActiveBlockVariation(
@@ -186,6 +183,9 @@ export function BlockSettingsDropdown( {
 		}
 	}
 
+	const shouldShowBlockParentMenuItem =
+		! parentBlockIsSelected && !! firstParentClientId;
+
 	return (
 		<BlockActions
 			clientIds={ clientIds }
@@ -195,7 +195,6 @@ export function BlockSettingsDropdown( {
 				canCopyStyles,
 				canDuplicate,
 				canInsertBlock,
-				canMove,
 				canRemove,
 				onDuplicate,
 				onInsertAfter,
@@ -203,26 +202,39 @@ export function BlockSettingsDropdown( {
 				onRemove,
 				onCopy,
 				onPasteStyles,
-				onMoveTo,
-			} ) => (
-				<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 } }
-								/>
-								{ ! parentBlockIsSelected &&
-									!! firstParentClientId && (
+			} ) => {
+				// 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
@@ -230,101 +242,103 @@ export function BlockSettingsDropdown( {
 											parentBlockType={ parentBlockType }
 										/>
 									) }
-								{ count === 1 && (
-									<BlockHTMLConvertButton
-										clientId={ firstBlockClientId }
-									/>
-								) }
-								{ ! isContentOnly && (
-									<CopyMenuItem
-										clientIds={ clientIds }
-										onCopy={ onCopy }
-										shortcut={ displayShortcut.primary(
-											'c'
-										) }
-									/>
-								) }
-								{ canDuplicate && (
-									<MenuItem
-										onClick={ pipe(
-											onClose,
-											onDuplicate,
-											updateSelectionAfterDuplicate
-										) }
-										shortcut={ shortcuts.duplicate }
-									>
-										{ __( 'Duplicate' ) }
-									</MenuItem>
-								) }
-								{ canInsertBlock && ! isContentOnly && (
-									<>
+									{ count === 1 && (
+										<BlockHTMLConvertButton
+											clientId={ firstBlockClientId }
+										/>
+									) }
+									{ ! isContentOnly && (
+										<CopyMenuItem
+											clientIds={ clientIds }
+											onCopy={ onCopy }
+											shortcut={ displayShortcut.primary(
+												'c'
+											) }
+										/>
+									) }
+									{ canDuplicate && (
 										<MenuItem
 											onClick={ pipe(
 												onClose,
-												onInsertBefore
+												onDuplicate,
+												updateSelectionAfterDuplicate
 											) }
-											shortcut={ shortcuts.insertBefore }
+											shortcut={ shortcuts.duplicate }
 										>
-											{ __( 'Add 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>
+										</>
+									) }
+								</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 }
 										>
-											{ __( 'Add after' ) }
+											{ __( 'Delete' ) }
 										</MenuItem>
-									</>
+									</MenuGroup>
 								) }
-							</MenuGroup>
-							{ canCopyStyles && ! isContentOnly && (
-								<MenuGroup>
-									<CopyMenuItem
-										clientIds={ clientIds }
-										onCopy={ onCopy }
-										label={ __( 'Copy styles' ) }
-									/>
-									<MenuItem onClick={ onPasteStyles }>
-										{ __( 'Paste styles' ) }
-									</MenuItem>
-								</MenuGroup>
-							) }
-							<BlockSettingsMenuControls.Slot
-								fillProps={ {
-									onClose,
-									canMove,
-									onMoveTo,
-									onlyBlock,
-									count,
-									firstBlockClientId,
-								} }
-								clientIds={ clientIds }
-							/>
-							{ typeof children === 'function'
-								? children( { onClose } )
-								: Children.map( ( child ) =>
-										cloneElement( child, { onClose } )
-								  ) }
-							{ canRemove && (
-								<MenuGroup>
-									<MenuItem
-										onClick={ pipe(
-											onClose,
-											onRemove,
-											updateSelectionAfterRemove
-										) }
-										shortcut={ shortcuts.remove }
-									>
-										{ __( 'Delete' ) }
-									</MenuItem>
-								</MenuGroup>
-							) }
-						</>
-					) }
-				</DropdownMenu>
-			) }
+							</>
+						) }
+					</DropdownMenu>
+				);
+			} }
 		</BlockActions>
 	);
 }
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 c297bad15f29e..67d88125e3429 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-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
index f28d0e4933381..79f33bd30d753 100644
--- a/packages/block-editor/src/components/block-switcher/index.js
+++ b/packages/block-editor/src/components/block-switcher/index.js
@@ -35,36 +35,40 @@ function BlockSwitcherDropdownMenuContents( {
 	clientIds,
 	hasBlockStyles,
 	canRemove,
-	isUsingBindings,
 } ) {
 	const { replaceBlocks, multiSelect, updateBlockAttributes } =
 		useDispatch( blockEditorStore );
-	const { possibleBlockTransformations, patterns, blocks } = useSelect(
-		( select ) => {
-			const {
-				getBlocksByClientId,
-				getBlockRootClientId,
-				getBlockTransformItems,
-				__experimentalGetPatternTransformItems,
-			} = select( blockEditorStore );
-			const rootClientId = getBlockRootClientId(
-				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
-			);
-			const _blocks = getBlocksByClientId( clientIds );
-			return {
-				blocks: _blocks,
-				possibleBlockTransformations: getBlockTransformItems(
-					_blocks,
-					rootClientId
-				),
-				patterns: __experimentalGetPatternTransformItems(
-					_blocks,
-					rootClientId
-				),
-			};
-		},
-		[ clientIds ]
-	);
+	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,
@@ -181,18 +185,40 @@ function BlockSwitcherDropdownMenuContents( {
 	);
 }
 
-export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
+const BlockIndicator = ( { icon, showTitle, blockTitle } ) => (
+	<>
+		<BlockIcon
+			className="block-editor-block-switcher__toggle"
+			icon={ icon }
+			showColors
+		/>
+		{ showTitle && blockTitle && (
+			<span className="block-editor-block-switcher__toggle-text">
+				{ blockTitle }
+			</span>
+		) }
+	</>
+);
+
+export const BlockSwitcher = ( { clientIds } ) => {
 	const {
+		hasContentOnlyLocking,
 		canRemove,
 		hasBlockStyles,
 		icon,
 		invalidBlocks,
 		isReusable,
 		isTemplate,
+		isDisabled,
 	} = useSelect(
 		( select ) => {
-			const { getBlocksByClientId, getBlockAttributes, canRemoveBlocks } =
-				select( blockEditorStore );
+			const {
+				getTemplateLock,
+				getBlocksByClientId,
+				getBlockAttributes,
+				canRemoveBlocks,
+				getBlockEditingMode,
+			} = select( blockEditorStore );
 			const { getBlockStyles, getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
 			const _blocks = getBlocksByClientId( clientIds );
@@ -202,8 +228,10 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 			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,
@@ -211,9 +239,14 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 				);
 				// 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;
@@ -229,6 +262,8 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 					_isSingleBlockSelected && isReusableBlock( _blocks[ 0 ] ),
 				isTemplate:
 					_isSingleBlockSelected && isTemplatePart( _blocks[ 0 ] ),
+				hasContentOnlyLocking: _hasTemplateLock,
+				isDisabled: editingMode !== 'default',
 			};
 		},
 		[ clientIds ]
@@ -237,6 +272,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 		clientId: clientIds?.[ 0 ],
 		maximumLength: 35,
 	} );
+
 	if ( invalidBlocks ) {
 		return null;
 	}
@@ -246,7 +282,11 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 		? blockTitle
 		: __( 'Multiple blocks selected' );
 
-	const hideDropdown = disabled || ( ! hasBlockStyles && ! canRemove );
+	const hideDropdown =
+		isDisabled ||
+		( ! hasBlockStyles && ! canRemove ) ||
+		hasContentOnlyLocking;
+
 	if ( hideDropdown ) {
 		return (
 			<ToolbarGroup>
@@ -255,14 +295,11 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 					className="block-editor-block-switcher__no-switcher-icon"
 					title={ blockSwitcherLabel }
 					icon={
-						<>
-							<BlockIcon icon={ icon } showColors />
-							{ ( isReusable || isTemplate ) && (
-								<span className="block-editor-block-switcher__toggle-text">
-									{ blockTitle }
-								</span>
-							) }
-						</>
+						<BlockIndicator
+							icon={ icon }
+							showTitle={ isReusable || isTemplate }
+							blockTitle={ blockTitle }
+						/>
 					}
 				/>
 			</ToolbarGroup>
@@ -292,18 +329,11 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 							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>
-								) }
-							</>
+							<BlockIndicator
+								icon={ icon }
+								showTitle={ isReusable || isTemplate }
+								blockTitle={ blockTitle }
+							/>
 						}
 						toggleProps={ {
 							description: blockSwitcherDescription,
@@ -317,7 +347,6 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 								clientIds={ clientIds }
 								hasBlockStyles={ hasBlockStyles }
 								canRemove={ canRemove }
-								isUsingBindings={ isUsingBindings }
 							/>
 						) }
 					</DropdownMenu>
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 46fd83c92d91f..7d66e19a214a2 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
@@ -7,11 +7,11 @@ import { useInstanceId, useViewportMatch } from '@wordpress/compose';
 import { chevronRight } from '@wordpress/icons';
 
 import {
+	Composite,
 	MenuGroup,
 	MenuItem,
 	Popover,
 	VisuallyHidden,
-	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 
 /**
@@ -19,13 +19,6 @@ import {
  */
 import BlockPreview from '../block-preview';
 import useTransformedPatterns from './use-transformed-patterns';
-import { unlock } from '../../lock-unlock';
-
-const {
-	CompositeV2: Composite,
-	CompositeItemV2: CompositeItem,
-	useCompositeStoreV2: useCompositeStore,
-} = unlock( componentsPrivateApis );
 
 function PatternTransformationsMenu( {
 	blocks,
@@ -82,10 +75,8 @@ function PreviewPatternsPopover( { patterns, onSelect } ) {
 }
 
 function BlockPatternsList( { patterns, onSelect } ) {
-	const composite = useCompositeStore();
 	return (
 		<Composite
-			store={ composite }
 			role="listbox"
 			className="block-editor-block-switcher__preview-patterns-container"
 			aria-label={ __( 'Patterns list' ) }
@@ -111,7 +102,7 @@ function BlockPattern( { pattern, onSelect } ) {
 	);
 	return (
 		<div className={ `${ baseClassName }-list__list-item` }>
-			<CompositeItem
+			<Composite.Item
 				render={
 					<div
 						role="option"
@@ -131,7 +122,7 @@ function BlockPattern( { pattern, onSelect } ) {
 				<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/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
index afcb576bd8db4..3dc2a7d591c92 100644
--- a/packages/block-editor/src/components/block-switcher/style.scss
+++ b/packages/block-editor/src/components/block-switcher/style.scss
@@ -46,40 +46,15 @@
 }
 
 // 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;
 }
@@ -100,7 +75,7 @@
 		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;
@@ -162,7 +137,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;
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 05ce545667d46..4d63c76317479 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 38009601e1646..eafe5e8a4d937 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/utils.js b/packages/block-editor/src/components/block-switcher/utils.js
index ebd95fc460e33..49257a2126cbe 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
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 6c6acd662ed96..2ac2cbb12ff35 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -34,8 +34,8 @@ import { useShowHoveredOrFocusedGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
-import Shuffle from './shuffle';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Renders the block toolbar.
@@ -65,6 +65,8 @@ export function PrivateBlockToolbar( {
 		shouldShowVisualToolbar,
 		showParentSelector,
 		isUsingBindings,
+		hasParentPattern,
+		hasContentOnlyLocking,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -72,19 +74,21 @@ export function PrivateBlockToolbar( {
 			getBlockParents,
 			getSelectedBlockClientIds,
 			isBlockValid,
-			getBlockRootClientId,
 			getBlockEditingMode,
 			getBlockAttributes,
-		} = select( blockEditorStore );
+			getBlockParentsByBlockName,
+			getTemplateLock,
+			getParentSectionBlock,
+		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
-		const blockRootClientId = getBlockRootClientId( selectedBlockClientId );
 		const parents = getBlockParents( selectedBlockClientId );
-		const firstParentClientId = parents[ parents.length - 1 ];
-		const parentBlockName = getBlockName( firstParentClientId );
+		const parentSection = getParentSectionBlock( selectedBlockClientId );
+		const parentClientId = parentSection ?? parents[ parents.length - 1 ];
+		const parentBlockName = getBlockName( parentClientId );
 		const parentBlockType = getBlockType( parentBlockName );
-		const _isDefaultEditingMode =
-			getBlockEditingMode( selectedBlockClientId ) === 'default';
+		const editingMode = getBlockEditingMode( selectedBlockClientId );
+		const _isDefaultEditingMode = editingMode === 'default';
 		const _blockName = getBlockName( selectedBlockClientId );
 		const isValid = selectedBlockClientIds.every( ( id ) =>
 			isBlockValid( id )
@@ -96,25 +100,36 @@ export function PrivateBlockToolbar( {
 			( 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'
+		);
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
 			isDefaultEditingMode: _isDefaultEditingMode,
 			blockType: selectedBlockClientId && getBlockType( _blockName ),
 			shouldShowVisualToolbar: isValid && isVisual,
-			rootClientId: blockRootClientId,
-			toolbarKey: `${ selectedBlockClientId }${ firstParentClientId }`,
+			toolbarKey: `${ selectedBlockClientId }${ parentClientId }`,
 			showParentSelector:
 				parentBlockType &&
-				getBlockEditingMode( firstParentClientId ) === 'default' &&
+				getBlockEditingMode( parentClientId ) !== 'disabled' &&
 				hasBlockSupport(
 					parentBlockType,
 					'__experimentalParentSelector',
 					true
 				) &&
-				selectedBlockClientIds.length === 1 &&
-				_isDefaultEditingMode,
+				selectedBlockClientIds.length === 1,
 			isUsingBindings: _isUsingBindings,
+			hasParentPattern: _hasParentPattern,
+			hasContentOnlyLocking: _hasTemplateLock,
 		};
 	}, [] );
 
@@ -164,41 +179,32 @@ export function PrivateBlockToolbar( {
 			key={ toolbarKey }
 		>
 			<div ref={ toolbarWrapperRef } className={ innerClasses }>
-				{ ! isMultiToolbar &&
-					isLargeViewport &&
-					isDefaultEditingMode && <BlockParentSelector /> }
+				{ ! isMultiToolbar && isLargeViewport && (
+					<BlockParentSelector />
+				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
-					( isDefaultEditingMode || isSynced ) && (
+					! hasParentPattern && (
 						<div
 							ref={ nodeRef }
 							{ ...showHoveredOrFocusedGestures }
 						>
 							<ToolbarGroup className="block-editor-block-toolbar__block-controls">
-								<BlockSwitcher
+								<BlockSwitcher clientIds={ blockClientIds } />
+								{ ! isMultiToolbar && isDefaultEditingMode && (
+									<BlockLockToolbar
+										clientId={ blockClientId }
+									/>
+								) }
+								<BlockMover
 									clientIds={ blockClientIds }
-									disabled={ ! isDefaultEditingMode }
-									isUsingBindings={ isUsingBindings }
+									hideDragHandle={ hideDragHandle }
 								/>
-								{ isDefaultEditingMode && (
-									<>
-										{ ! isMultiToolbar && (
-											<BlockLockToolbar
-												clientId={ blockClientId }
-											/>
-										) }
-										<BlockMover
-											clientIds={ blockClientIds }
-											hideDragHandle={ hideDragHandle }
-										/>
-									</>
-								) }
 							</ToolbarGroup>
 						</div>
 					) }
-				<Shuffle clientId={ blockClientId } />
-				{ shouldShowVisualToolbar && isMultiToolbar && (
-					<BlockGroupToolbar />
-				) }
+				{ ! hasContentOnlyLocking &&
+					shouldShowVisualToolbar &&
+					isMultiToolbar && <BlockGroupToolbar /> }
 				{ shouldShowVisualToolbar && (
 					<>
 						<BlockControls.Slot
@@ -226,9 +232,7 @@ export function PrivateBlockToolbar( {
 					</>
 				) }
 				<BlockEditVisuallyButton clientIds={ blockClientIds } />
-				{ isDefaultEditingMode && (
-					<BlockSettingsMenu clientIds={ blockClientIds } />
-				) }
+				<BlockSettingsMenu clientIds={ blockClientIds } />
 			</div>
 		</NavigableToolbar>
 	);
diff --git a/packages/block-editor/src/components/block-toolbar/shuffle.js b/packages/block-editor/src/components/block-toolbar/shuffle.js
index d86bfa8201569..954c7ff22d68c 100644
--- a/packages/block-editor/src/components/block-toolbar/shuffle.js
+++ b/packages/block-editor/src/components/block-toolbar/shuffle.js
@@ -34,7 +34,14 @@ export default function Shuffle( { clientId, as = Container } ) {
 			const _categories = attributes?.metadata?.categories || EMPTY_ARRAY;
 			const _patternName = attributes?.metadata?.patternName;
 			const rootBlock = getBlockRootClientId( clientId );
-			const _patterns = __experimentalGetAllowedPatterns( rootBlock );
+
+			// Calling `__experimentalGetAllowedPatterns` is expensive.
+			// Checking if the block can be shuffled prevents unnecessary selector calls.
+			// See: https://github.com/WordPress/gutenberg/pull/64736.
+			const _patterns =
+				_categories.length > 0
+					? __experimentalGetAllowedPatterns( rootBlock )
+					: EMPTY_ARRAY;
 			return {
 				categories: _categories,
 				patterns: _patterns,
@@ -45,19 +52,20 @@ export default function Shuffle( { clientId, as = Container } ) {
 	);
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const sameCategoryPatternsWithSingleWrapper = useMemo( () => {
-		if (
-			! categories ||
-			categories.length === 0 ||
-			! patterns ||
-			patterns.length === 0
-		) {
+		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 shuffle to pattern that will not allow to continue shuffling.
 				pattern.blocks.length === 1 &&
+				// We exclude the core patterns and pattern directory patterns that are not theme patterns.
+				! isCorePattern &&
 				pattern.categories?.some( ( category ) => {
 					return categories.includes( category );
 				} ) &&
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 0c2ed94c01e3f..ae03eeed1a817 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -37,6 +37,13 @@
 		border-right: $border-width solid $gray-300;
 	}
 
+	&.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,
 	&.is-connected {
 		.block-editor-block-switcher .components-button .block-editor-block-icon {
@@ -52,9 +59,18 @@
 
 	> :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 {
@@ -70,10 +86,13 @@
 	// Raise the specificity.
 	&.components-accessible-toolbar {
 		border: none;
-		border-bottom: $border-width solid $gray-200;
 		border-radius: 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;
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
index c4e228f8a3c07..80ce369114783 100644
--- 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
@@ -7,7 +7,6 @@ import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
 
 /**
  * Returns true if the block toolbar should be shown.
@@ -15,40 +14,29 @@ import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls
  * @return {boolean} Whether the block toolbar component will be rendered.
  */
 export function useHasBlockToolbar() {
-	const { isToolbarEnabled, isDefaultEditingMode } = useSelect(
-		( select ) => {
-			const {
-				getBlockEditingMode,
-				getBlockName,
-				getBlockSelectionStart,
-			} = select( blockEditorStore );
+	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();
+		// 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 ) );
+		const blockType =
+			selectedBlockClientId &&
+			getBlockType( getBlockName( selectedBlockClientId ) );
 
-			return {
-				isToolbarEnabled:
-					blockType &&
-					hasBlockSupport( blockType, '__experimentalToolbar', true ),
-				isDefaultEditingMode:
-					getBlockEditingMode( selectedBlockClientId ) === 'default',
-			};
-		},
-		[]
-	);
+		return {
+			isToolbarEnabled:
+				blockType &&
+				hasBlockSupport( blockType, '__experimentalToolbar', true ),
+			isBlockDisabled:
+				getBlockEditingMode( selectedBlockClientId ) === 'disabled',
+		};
+	}, [] );
 
-	const hasAnyBlockControls = useHasAnyBlockControls();
-
-	if (
-		! isToolbarEnabled ||
-		( ! isDefaultEditingMode && ! hasAnyBlockControls )
-	) {
+	if ( ! isToolbarEnabled || isBlockDisabled ) {
 		return false;
 	}
 
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 036aef4f135d3..0000000000000
--- a/packages/block-editor/src/components/block-tools/block-selection-button.js
+++ /dev/null
@@ -1,299 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { dragHandle } from '@wordpress/icons';
-import { Button, Flex, FlexItem } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { forwardRef, useEffect } from '@wordpress/element';
-import {
-	BACKSPACE,
-	DELETE,
-	UP,
-	DOWN,
-	LEFT,
-	RIGHT,
-	TAB,
-	ESCAPE,
-	ENTER,
-	SPACE,
-} from '@wordpress/keycodes';
-import {
-	__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,
-	store as blocksStore,
-} 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 { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
-
-/**
- * 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.
- * @param {Object} ref            Reference to the component.
- *
- * @return {Component} The component to be rendered.
- */
-function BlockSelectionButton( { clientId, rootClientId }, ref ) {
-	const selected = useSelect(
-		( select ) => {
-			const {
-				getBlock,
-				getBlockIndex,
-				hasBlockMovingClientId,
-				getBlockListSettings,
-				__unstableGetEditorMode,
-				getNextBlockClientId,
-				getPreviousBlockClientId,
-				canMoveBlock,
-			} = select( blockEditorStore );
-			const { getActiveBlockVariation, getBlockType } =
-				select( blocksStore );
-			const index = getBlockIndex( clientId );
-			const { name, attributes } = getBlock( clientId );
-			const blockType = getBlockType( name );
-			const orientation =
-				getBlockListSettings( rootClientId )?.orientation;
-			const match = getActiveBlockVariation( name, attributes );
-
-			return {
-				blockMovingMode: hasBlockMovingClientId(),
-				editorMode: __unstableGetEditorMode(),
-				icon: match?.icon || blockType.icon,
-				label: getAccessibleBlockLabel(
-					blockType,
-					attributes,
-					index + 1,
-					orientation
-				),
-				canMove: canMoveBlock( clientId, rootClientId ),
-				getNextBlockClientId,
-				getPreviousBlockClientId,
-			};
-		},
-		[ clientId, rootClientId ]
-	);
-	const { label, icon, blockMovingMode, editorMode, canMove } = selected;
-	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
-
-	// Focus the breadcrumb in navigation mode.
-	useEffect( () => {
-		if ( editorMode === 'navigation' ) {
-			ref.current.focus();
-			speak( label );
-		}
-	}, [ label, editorMode ] );
-	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 );
-		}
-		// Prevent the block from being moved into itself.
-		if (
-			startingBlockClientId &&
-			selectedBlockClientId === startingBlockClientId &&
-			navigateIn
-		) {
-			return;
-		}
-		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 = clsx(
-		'block-editor-block-list__block-selection-button',
-		{
-			'is-block-moving-mode': !! blockMovingMode,
-		}
-	);
-
-	const dragHandleLabel = __( 'Drag' );
-	const showBlockDraggable = canMove && editorMode === 'navigation';
-
-	return (
-		<div className={ classNames }>
-			<Flex
-				justify="center"
-				className="block-editor-block-list__block-selection-button__content"
-			>
-				<FlexItem>
-					<BlockIcon icon={ icon } showColors />
-				</FlexItem>
-				{ showBlockDraggable && (
-					<FlexItem>
-						<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>
-				) }
-				{ editorMode === 'navigation' && (
-					<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 forwardRef( BlockSelectionButton );
diff --git a/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js b/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js
deleted file mode 100644
index ae03bdb4f5164..0000000000000
--- a/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import BlockSelectionButton from './block-selection-button';
-import { PrivateBlockPopover } from '../block-popover';
-import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
-import useSelectedBlockToolProps from './use-selected-block-tool-props';
-
-function BlockToolbarBreadcrumb( { clientId, __unstableContentRef }, ref ) {
-	const {
-		capturingClientId,
-		isInsertionPointVisible,
-		lastClientId,
-		rootClientId,
-	} = useSelectedBlockToolProps( clientId );
-
-	const popoverProps = useBlockToolbarPopoverProps( {
-		contentElement: __unstableContentRef?.current,
-		clientId,
-	} );
-
-	return (
-		<PrivateBlockPopover
-			clientId={ capturingClientId || clientId }
-			bottomClientId={ lastClientId }
-			className={ clsx( 'block-editor-block-list__block-popover', {
-				'is-insertion-point-visible': isInsertionPointVisible,
-			} ) }
-			resize={ false }
-			{ ...popoverProps }
-		>
-			<BlockSelectionButton
-				ref={ ref }
-				clientId={ clientId }
-				rootClientId={ rootClientId }
-			/>
-		</PrivateBlockPopover>
-	);
-}
-
-export default forwardRef( BlockToolbarBreadcrumb );
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
index eef5b5afca304..c6378130b7da4 100644
--- a/packages/block-editor/src/components/block-tools/block-toolbar-popover.js
+++ b/packages/block-editor/src/components/block-tools/block-toolbar-popover.js
@@ -36,26 +36,30 @@ export default function BlockToolbarPopover( {
 	}, [ clientId ] );
 
 	const { stopTyping } = useDispatch( blockEditorStore );
-	const isToolbarForced = useRef( false );
+	const isToolbarForcedRef = useRef( false );
 
 	useShortcut( 'core/block-editor/focus-toolbar', () => {
-		isToolbarForced.current = true;
+		isToolbarForcedRef.current = true;
 		stopTyping( true );
 	} );
 
 	useEffect( () => {
-		isToolbarForced.current = false;
+		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,
+		clientId: clientIdToPositionOver,
 	} );
 
 	return (
 		! isTyping && (
 			<BlockPopover
-				clientId={ capturingClientId || clientId }
+				clientId={ clientIdToPositionOver }
 				bottomClientId={ lastClientId }
 				className={ clsx( 'block-editor-block-list__block-popover', {
 					'is-insertion-point-visible': isInsertionPointVisible,
@@ -66,7 +70,7 @@ export default function BlockToolbarPopover( {
 				<PrivateBlockToolbar
 					// If the toolbar is being shown because of being forced
 					// it should focus the toolbar right after the mount.
-					focusOnMount={ isToolbarForced.current }
+					focusOnMount={ isToolbarForcedRef.current }
 					__experimentalInitialIndex={
 						initialToolbarItemIndexRef.current
 					}
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
index c07adb34e584f..bad331561317f 100644
--- a/packages/block-editor/src/components/block-tools/index.js
+++ b/packages/block-editor/src/components/block-tools/index.js
@@ -19,7 +19,6 @@ import {
 	default as InsertionPoint,
 } from './insertion-point';
 import BlockToolbarPopover from './block-toolbar-popover';
-import BlockToolbarBreadcrumb from './block-toolbar-breadcrumb';
 import ZoomOutPopover from './zoom-out-popover';
 import { store as blockEditorStore } from '../../store';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
@@ -35,7 +34,8 @@ function selector( select ) {
 		getSettings,
 		__unstableGetEditorMode,
 		isTyping,
-	} = select( blockEditorStore );
+		isDragging,
+	} = unlock( select( blockEditorStore ) );
 
 	const clientId =
 		getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
@@ -47,6 +47,7 @@ function selector( select ) {
 		hasFixedToolbar: getSettings().hasFixedToolbar,
 		isTyping: isTyping(),
 		isZoomOutMode: editorMode === 'zoom-out',
+		isDragging: isDragging(),
 	};
 }
 
@@ -64,10 +65,9 @@ export default function BlockTools( {
 	__unstableContentRef,
 	...props
 } ) {
-	const { clientId, hasFixedToolbar, isTyping, isZoomOutMode } = useSelect(
-		selector,
-		[]
-	);
+	const { clientId, hasFixedToolbar, isTyping, isZoomOutMode, isDragging } =
+		useSelect( selector, [] );
+
 	const isMatch = useShortcutEventMatch();
 	const {
 		getBlocksByClientId,
@@ -78,7 +78,6 @@ export default function BlockTools( {
 	const { getGroupingBlockName } = useSelect( blocksStore );
 	const {
 		showEmptyBlockSideInserter,
-		showBreadcrumb,
 		showBlockToolbarPopover,
 		showZoomOutToolbar,
 	} = useShowBlockTools();
@@ -202,7 +201,7 @@ 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 }
 					/>
@@ -223,14 +222,6 @@ export default function BlockTools( {
 					/>
 				) }
 
-				{ showBreadcrumb && (
-					<BlockToolbarBreadcrumb
-						ref={ blockSelectionButtonRef }
-						__unstableContentRef={ __unstableContentRef }
-						clientId={ clientId }
-					/>
-				) }
-
 				{ showZoomOutToolbar && (
 					<ZoomOutPopover
 						__unstableContentRef={ __unstableContentRef }
@@ -251,12 +242,11 @@ export default function BlockTools( {
 					name="__unstable-block-tools-after"
 					ref={ blockToolbarAfterRef }
 				/>
-				{ window.__experimentalEnableZoomedOutPatternsTab &&
-					isZoomOutMode && (
-						<ZoomOutModeInserters
-							__unstableContentRef={ __unstableContentRef }
-						/>
-					) }
+				{ isZoomOutMode && ! isDragging && (
+					<ZoomOutModeInserters
+						__unstableContentRef={ __unstableContentRef }
+					/>
+				) }
 			</InsertionPointOpenRef.Provider>
 		</div>
 	);
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 9dac99e5e9312..891a32eaa5dc9 100644
--- a/packages/block-editor/src/components/block-tools/insertion-point.js
+++ b/packages/block-editor/src/components/block-tools/insertion-point.js
@@ -37,7 +37,7 @@ function InbetweenInsertionPointPopover( {
 		rootClientId,
 		isInserterShown,
 		isDistractionFree,
-		isNavigationMode,
+		isZoomOutMode,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockOrder,
@@ -47,7 +47,7 @@ function InbetweenInsertionPointPopover( {
 			getPreviousBlockClientId,
 			getNextBlockClientId,
 			getSettings,
-			isNavigationMode: _isNavigationMode,
+			__unstableGetEditorMode,
 		} = select( blockEditorStore );
 		const insertionPoint = getBlockInsertionPoint();
 		const order = getBlockOrder( insertionPoint.rootClientId );
@@ -76,9 +76,9 @@ function InbetweenInsertionPointPopover( {
 				getBlockListSettings( insertionPoint.rootClientId )
 					?.orientation || 'vertical',
 			rootClientId: insertionPoint.rootClientId,
-			isNavigationMode: _isNavigationMode(),
 			isDistractionFree: settings.isDistractionFree,
 			isInserterShown: insertionPoint?.__unstableWithInserter,
+			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 	const { getBlockEditingMode } = useSelect( blockEditorStore );
@@ -141,7 +141,15 @@ function InbetweenInsertionPointPopover( {
 		},
 	};
 
-	if ( isDistractionFree && ! isNavigationMode ) {
+	if ( isDistractionFree ) {
+		return null;
+	}
+
+	// Zoom out mode should only show the insertion point for the insert operation.
+	// Other operations such as "group" are when the editor tries to create a row
+	// block by grouping the block being dragged with the block it's being dropped
+	// onto.
+	if ( isZoomOutMode && operation !== 'insert' ) {
 		return null;
 	}
 
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index 6bf1f91cb0868..bfb8b958f01ca 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -13,7 +13,7 @@
 .block-editor-block-list__insertion-point-indicator {
 	position: absolute;
 	background: var(--wp-admin-theme-color);
-	border-radius: 2px;
+	border-radius: $radius-small;
 	transform-origin: center;
 	opacity: 0;
 	will-change: transform, opacity;
@@ -63,7 +63,6 @@
 	.block-editor-inserter__toggle.components-button.has-icon {
 		// Basic look
 		background: $gray-900;
-		border-radius: $radius-block-ui;
 		color: $white;
 		padding: 0;
 
@@ -85,84 +84,6 @@
 	}
 }
 
-/**
- * Block Label for Navigation/Selection Mode
- */
-
-.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");
-
-	// Dark block UI appearance.
-	border-radius: $radius-block-ui;
-	background-color: $gray-900;
-
-	font-size: $default-font-size;
-	height: $block-toolbar-height;
-
-	.block-editor-block-list__block-selection-button__content {
-		margin: auto;
-		display: inline-flex;
-		align-items: center;
-
-		> .components-flex__item {
-			margin-right: $grid-unit-15 * 0.5;
-		}
-	}
-	.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;
-		}
-
-		&:active {
-			color: $white;
-		}
-
-		// Make sure the button has no hover style when it's disabled.
-		&[aria-disabled="true"]:hover {
-			color: $white;
-		}
-
-		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,
@@ -179,16 +100,12 @@
 .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-10;
 		margin-bottom: $grid-unit-10;
-	}
-
-	.block-editor-block-contextual-toolbar {
 		border: $border-width solid $gray-900;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		overflow: visible; // allow the parent selector to be visible
 		position: static;
 		width: auto;
@@ -231,7 +148,7 @@
 		}
 
 		.block-editor-block-parent-selector__button {
-			border: 1px solid $gray-900;
+			border: $border-width solid $gray-900;
 			padding-right: 6px;
 			padding-left: 6px;
 			background-color: $white;
@@ -284,12 +201,9 @@
 		background: none;
 		border: none;
 	}
-}
-
-.block-editor-block-tools__zoom-out-mode-inserter-button {
-	visibility: hidden;
 
-	&.is-visible {
-		visibility: visible;
+	// Make the spacing consistent between controls.
+	.zoom-out-toolbar-button {
+		height: $button-size-next-default-40px;
 	}
 }
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 f99323dd5c80a..6d64f5a5882cb 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
@@ -15,8 +15,9 @@ import {
  * 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 { getVisibleElementBounds } from '../../utils/dom';
 
 const COMMON_PROPS = {
 	placement: 'top-start',
@@ -67,7 +68,7 @@ function getProps(
 	// Get how far the content area has been scrolled.
 	const scrollTop = scrollContainer?.scrollTop || 0;
 
-	const blockRect = selectedBlockElement.getBoundingClientRect();
+	const blockRect = getVisibleElementBounds( selectedBlockElement );
 	const contentRect = contentElement.getBoundingClientRect();
 
 	// Get the vertical position of top of the visible content area.
diff --git a/packages/block-editor/src/components/block-tools/use-show-block-tools.js b/packages/block-editor/src/components/block-tools/use-show-block-tools.js
index 70a0b9f53a342..02a8f0583bcdd 100644
--- a/packages/block-editor/src/components/block-tools/use-show-block-tools.js
+++ b/packages/block-editor/src/components/block-tools/use-show-block-tools.js
@@ -20,8 +20,8 @@ export function useShowBlockTools() {
 			getSelectedBlockClientId,
 			getFirstMultiSelectedBlockClientId,
 			getBlock,
+			getBlockMode,
 			getSettings,
-			hasMultiSelection,
 			__unstableGetEditorMode,
 			isTyping,
 		} = select( blockEditorStore );
@@ -33,37 +33,30 @@ export function useShowBlockTools() {
 		const editorMode = __unstableGetEditorMode();
 		const hasSelectedBlock = !! clientId && !! block;
 		const isEmptyDefaultBlock =
-			hasSelectedBlock && isUnmodifiedDefaultBlock( block );
+			hasSelectedBlock &&
+			isUnmodifiedDefaultBlock( block ) &&
+			getBlockMode( clientId ) !== 'html';
 		const _showEmptyBlockSideInserter =
 			clientId &&
 			! isTyping() &&
 			editorMode === 'edit' &&
 			isEmptyDefaultBlock;
-		const maybeShowBreadcrumb =
-			hasSelectedBlock &&
-			! hasMultiSelection() &&
-			editorMode === 'navigation';
-
 		const isZoomOut = editorMode === 'zoom-out';
+		const _showZoomOutToolbar =
+			isZoomOut &&
+			block?.attributes?.align === 'full' &&
+			! _showEmptyBlockSideInserter;
 		const _showBlockToolbarPopover =
-			! isZoomOut &&
+			! _showZoomOutToolbar &&
 			! getSettings().hasFixedToolbar &&
 			! _showEmptyBlockSideInserter &&
 			hasSelectedBlock &&
-			! isEmptyDefaultBlock &&
-			! maybeShowBreadcrumb;
+			! isEmptyDefaultBlock;
 
 		return {
 			showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
-			showBreadcrumb:
-				! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
 			showBlockToolbarPopover: _showBlockToolbarPopover,
-			showZoomOutToolbar:
-				hasSelectedBlock &&
-				isZoomOut &&
-				! _showEmptyBlockSideInserter &&
-				! maybeShowBreadcrumb &&
-				! _showBlockToolbarPopover,
+			showZoomOutToolbar: _showZoomOutToolbar,
 		};
 	}, [] );
 }
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
index 8ea80a5383013..961552caa66e0 100644
--- 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
@@ -6,17 +6,11 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 import { plus } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
 
-function ZoomOutModeInserterButton( { isVisible, onClick } ) {
-	const [
-		zoomOutModeInserterButtonHovered,
-		setZoomOutModeInserterButtonHovered,
-	] = useState( false );
-
+function ZoomOutModeInserterButton( { onClick } ) {
 	return (
 		<Button
 			variant="primary"
@@ -24,18 +18,9 @@ function ZoomOutModeInserterButton( { isVisible, onClick } ) {
 			size="compact"
 			className={ clsx(
 				'block-editor-button-pattern-inserter__button',
-				'block-editor-block-tools__zoom-out-mode-inserter-button',
-				{
-					'is-visible': isVisible || zoomOutModeInserterButtonHovered,
-				}
+				'block-editor-block-tools__zoom-out-mode-inserter-button'
 			) }
 			onClick={ onClick }
-			onMouseOver={ () => {
-				setZoomOutModeInserterButtonHovered( true );
-			} }
-			onMouseOut={ () => {
-				setZoomOutModeInserterButtonHovered( false );
-			} }
 			label={ _x(
 				'Add pattern',
 				'Generic label for pattern inserter button'
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 5f5b0401b512e..c279cb3678202 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,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,50 +16,39 @@ function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
 	const {
 		hasSelection,
-		blockOrder,
 		insertionPoint,
+		blockOrder,
+		blockInsertionPointVisible,
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
-		hoveredBlockClientId,
 	} = useSelect( ( select ) => {
 		const {
 			getSettings,
+			getInsertionPoint,
 			getBlockOrder,
 			getSelectionStart,
 			getSelectedBlockClientId,
-			getHoveredBlockClientId,
-		} = select( blockEditorStore );
-		const { sectionRootClientId: root } = unlock( getSettings() );
-		// To do: move ZoomOutModeInserters to core/editor.
-		// Or we perhaps we should move the insertion point state to the
-		// block-editor store. I'm not sure what it was ever moved to the editor
-		// store, because all the inserter components all live in the
-		// block-editor package.
-		// eslint-disable-next-line @wordpress/data-no-store-string-literals
-		const editor = select( 'core/editor' );
+			getSectionRootClientId,
+			isBlockInsertionPointVisible,
+		} = unlock( select( blockEditorStore ) );
+
+		const root = getSectionRootClientId();
+
 		return {
 			hasSelection: !! getSelectionStart().clientId,
+			insertionPoint: getInsertionPoint(),
 			blockOrder: getBlockOrder( root ),
-			insertionPoint: unlock( editor ).getInsertionPoint(),
+			blockInsertionPointVisible: isBlockInsertionPointVisible(),
 			sectionRootClientId: root,
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
 			selectedBlockClientId: getSelectedBlockClientId(),
-			hoveredBlockClientId: getHoveredBlockClientId(),
 		};
 	}, [] );
 
-	const isMounted = useRef( false );
-
-	useEffect( () => {
-		if ( ! isMounted.current ) {
-			isMounted.current = true;
-			return;
-		}
-		// reset insertion point when the block order changes
-		setInserterIsOpened( true );
-	}, [ blockOrder, setInserterIsOpened ] );
+	// 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( () => {
@@ -71,31 +60,20 @@ function ZoomOutModeInserters() {
 		};
 	}, [] );
 
-	if ( ! isReady ) {
+	if ( ! isReady || ! hasSelection ) {
 		return null;
 	}
 
 	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
-		const shouldRenderInserter = insertionPoint.insertionIndex !== index;
-
 		const shouldRenderInsertionPoint =
-			insertionPoint.insertionIndex === index;
-
-		if ( ! shouldRenderInserter && ! shouldRenderInsertionPoint ) {
-			return null;
-		}
+			blockInsertionPointVisible && insertionPoint?.index === index;
 
 		const previousClientId = clientId;
 		const nextClientId = blockOrder[ index ];
 
 		const isSelected =
-			hasSelection &&
-			( selectedBlockClientId === previousClientId ||
-				selectedBlockClientId === nextClientId );
-
-		const isHovered =
-			hoveredBlockClientId === previousClientId ||
-			hoveredBlockClientId === nextClientId;
+			selectedBlockClientId === previousClientId ||
+			selectedBlockClientId === nextClientId;
 
 		return (
 			<BlockPopoverInbetween
@@ -103,21 +81,8 @@ function ZoomOutModeInserters() {
 				previousClientId={ previousClientId }
 				nextClientId={ nextClientId }
 			>
-				{ shouldRenderInsertionPoint && (
-					<div
-						style={ {
-							borderRadius: '0',
-							height: '12px',
-							opacity: 1,
-							transform: 'translateY(-50%)',
-							width: '100%',
-						} }
-						className="block-editor-block-list__insertion-point-indicator"
-					/>
-				) }
-				{ shouldRenderInserter && (
+				{ ! shouldRenderInsertionPoint && isSelected && (
 					<ZoomOutModeInserterButton
-						isVisible={ isSelected || isHovered }
 						onClick={ () => {
 							setInserterIsOpened( {
 								rootClientId: sectionRootClientId,
@@ -125,6 +90,9 @@ function ZoomOutModeInserters() {
 								tab: 'patterns',
 								category: 'all',
 							} );
+							showInsertionPoint( sectionRootClientId, index, {
+								operation: 'insert',
+							} );
 						} }
 					/>
 				) }
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-popover.js b/packages/block-editor/src/components/block-tools/zoom-out-popover.js
index 0a7ab6d31fab8..a1f2990a5cc1e 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-popover.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-popover.js
@@ -11,12 +11,8 @@ import useSelectedBlockToolProps from './use-selected-block-tool-props';
 import ZoomOutToolbar from './zoom-out-toolbar';
 
 export default function ZoomOutPopover( { clientId, __unstableContentRef } ) {
-	const {
-		capturingClientId,
-		isInsertionPointVisible,
-		lastClientId,
-		rootClientId,
-	} = useSelectedBlockToolProps( clientId );
+	const { capturingClientId, isInsertionPointVisible, lastClientId } =
+		useSelectedBlockToolProps( clientId );
 
 	const popoverProps = useBlockToolbarPopoverProps( {
 		contentElement: __unstableContentRef?.current,
@@ -42,8 +38,8 @@ export default function ZoomOutPopover( { clientId, __unstableContentRef } ) {
 			{ ...props }
 		>
 			<ZoomOutToolbar
+				__unstableContentRef={ __unstableContentRef }
 				clientId={ clientId }
-				rootClientId={ rootClientId }
 			/>
 		</BlockPopover>
 	);
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
index bb5955244cd82..2b5c6a3e3cea6 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -21,17 +16,21 @@ import BlockMover from '../block-mover';
 import Shuffle from '../block-toolbar/shuffle';
 import NavigableToolbar from '../navigable-toolbar';
 
-export default function ZoomOutToolbar( { clientId, rootClientId } ) {
+export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 	const selected = useSelect(
 		( select ) => {
 			const {
 				getBlock,
-				hasBlockMovingClientId,
 				getNextBlockClientId,
 				getPreviousBlockClientId,
 				canRemoveBlock,
 				canMoveBlock,
+				getSettings,
 			} = select( blockEditorStore );
+
+			const { __experimentalSetIsInserterOpened: setIsInserterOpened } =
+				getSettings();
+
 			const { getBlockType } = select( blocksStore );
 			const { name } = getBlock( clientId );
 			const blockType = getBlockType( name );
@@ -57,19 +56,18 @@ export default function ZoomOutToolbar( { clientId, rootClientId } ) {
 			}
 
 			return {
-				blockMovingMode: hasBlockMovingClientId(),
 				isBlockTemplatePart,
 				isNextBlockTemplatePart,
 				isPrevBlockTemplatePart,
-				canRemove: canRemoveBlock( clientId, rootClientId ),
-				canMove: canMoveBlock( clientId, rootClientId ),
+				canRemove: canRemoveBlock( clientId ),
+				canMove: canMoveBlock( clientId ),
+				setIsInserterOpened,
 			};
 		},
-		[ clientId, rootClientId ]
+		[ clientId ]
 	);
 
 	const {
-		blockMovingMode,
 		isBlockTemplatePart,
 		isNextBlockTemplatePart,
 		isPrevBlockTemplatePart,
@@ -79,15 +77,11 @@ export default function ZoomOutToolbar( { clientId, rootClientId } ) {
 
 	const { removeBlock } = useDispatch( blockEditorStore );
 
-	const classNames = clsx( 'zoom-out-toolbar', {
-		'is-block-moving-mode': !! blockMovingMode,
-	} );
-
 	const showBlockDraggable = canMove && ! isBlockTemplatePart;
 
 	return (
 		<NavigableToolbar
-			className={ classNames }
+			className="zoom-out-toolbar"
 			/* 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.
@@ -100,7 +94,6 @@ export default function ZoomOutToolbar( { clientId, rootClientId } ) {
 						<Button
 							icon={ dragHandle }
 							className="block-selection-button_drag-handle zoom-out-toolbar-button"
-							aria-hidden="true"
 							label={ __( 'Drag' ) }
 							iconSize={ 24 }
 							size="compact"
@@ -125,6 +118,7 @@ export default function ZoomOutToolbar( { clientId, rootClientId } ) {
 			{ canMove && canRemove && (
 				<Shuffle clientId={ clientId } as={ ToolbarButton } />
 			) }
+
 			{ canRemove && ! isBlockTemplatePart && (
 				<ToolbarButton
 					className="zoom-out-toolbar-button"
@@ -132,6 +126,7 @@ export default function ZoomOutToolbar( { clientId, rootClientId } ) {
 					label={ __( 'Delete' ) }
 					onClick={ () => {
 						removeBlock( clientId );
+						__unstableContentRef.current?.focus();
 					} }
 				/>
 			) }
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 84aae55616066..891cd21b1f50c 100644
--- a/packages/block-editor/src/components/block-variation-picker/README.md
+++ b/packages/block-editor/src/components/block-variation-picker/README.md
@@ -19,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/index.js b/packages/block-editor/src/components/block-variation-picker/index.js
index 2bba44d4bedfe..f3687a305e84f 100644
--- a/packages/block-editor/src/components/block-variation-picker/index.js
+++ b/packages/block-editor/src/components/block-variation-picker/index.js
@@ -63,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-transforms/index.js b/packages/block-editor/src/components/block-variation-transforms/index.js
index b7ecaad635e44..5850fc52b37b6 100644
--- a/packages/block-editor/src/components/block-variation-transforms/index.js
+++ b/packages/block-editor/src/components/block-variation-transforms/index.js
@@ -21,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,
@@ -35,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 }
@@ -138,19 +141,28 @@ function VariationsToggleGroupControl( {
 
 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 ]
@@ -179,8 +191,7 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 		} );
 	};
 
-	// Skip rendering if there are no variations
-	if ( ! variations?.length ) {
+	if ( ! variations?.length || isContentOnly ) {
 		return null;
 	}
 
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 b828bc6020bfb..b8d2a1d4649fa 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/border-radius-control/index.js b/packages/block-editor/src/components/border-radius-control/index.js
index 4c614084a7e20..cab9b87b3b29c 100644
--- a/packages/block-editor/src/components/border-radius-control/index.js
+++ b/packages/block-editor/src/components/border-radius-control/index.js
@@ -104,6 +104,7 @@ export default function BorderRadiusControl( { onChange, values } ) {
 							units={ units }
 						/>
 						<RangeControl
+							__next40pxDefaultSize
 							label={ __( 'Border radius' ) }
 							hideLabelFromVision
 							className="components-border-radius-control__range-control"
diff --git a/packages/block-editor/src/components/border-radius-control/style.scss b/packages/block-editor/src/components/border-radius-control/style.scss
index c94dfbbd0a8fd..18360cf3162ab 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
index 87243ea927182..f5486d3f6f608 100644
--- a/packages/block-editor/src/components/button-block-appender/content.scss
+++ b/packages/block-editor/src/components/button-block-appender/content.scss
@@ -8,11 +8,6 @@
 	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;
@@ -52,7 +47,6 @@
 			left: 0;
 			pointer-events: none;
 			border: $border-width dashed currentColor;
-			@include placeholder-style();
 		}
 
 		.block-editor-inserter {
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 3ac1ef62e1e24..53b15e2fd2cfd 100644
--- a/packages/block-editor/src/components/button-block-appender/index.js
+++ b/packages/block-editor/src/components/button-block-appender/index.js
@@ -6,8 +6,8 @@ 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,17 +16,26 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import Inserter from '../inserter';
+import { useMergeRefs } from '@wordpress/compose';
 
 function ButtonBlockAppender(
 	{ rootClientId, className, onFocus, tabIndex, onSelect },
 	ref
 ) {
+	const inserterButtonRef = useRef();
+
+	const mergedInserterButtonRef = useMergeRefs( [ inserterButtonRef, ref ] );
 	return (
 		<Inserter
 			position="bottom center"
 			rootClientId={ rootClientId }
 			__experimentalIsQuick
-			onSelectOrClose={ onSelect }
+			onSelectOrClose={ ( ...args ) => {
+				if ( onSelect && typeof onSelect === 'function' ) {
+					onSelect( ...args );
+				}
+				inserterButtonRef.current?.focus();
+			} }
 			renderToggle={ ( {
 				onToggle,
 				disabled,
@@ -34,24 +43,25 @@ 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={ clsx(
@@ -65,20 +75,11 @@ function ButtonBlockAppender(
 						// 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/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js
index 698ea2d2d74a4..022acf2e1074a 100644
--- a/packages/block-editor/src/components/child-layout-control/index.js
+++ b/packages/block-editor/src/components/child-layout-control/index.js
@@ -174,6 +174,8 @@ function FlexControls( {
 						} );
 					} }
 					value={ flexSize }
+					label={ flexResetLabel }
+					hideLabelFromVision
 				/>
 			) }
 		</VStack>
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 7a04f41a29b05..3c4cef664a310 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
@@ -45,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;
 }
@@ -220,7 +220,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                           aria-label="Color: red"
                           aria-selected="true"
                           class="components-button components-circular-option-picker__option"
-                          data-active-item=""
+                          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);"
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 3a5dcc657a94c..e1a5529544f79 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/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js
index 7033c2ebde48f..71b27c06e7ccf 100644
--- a/packages/block-editor/src/components/colors-gradients/dropdown.js
+++ b/packages/block-editor/src/components/colors-gradients/dropdown.js
@@ -88,7 +88,7 @@ const renderToggle =
 		};
 
 		return (
-			<Button { ...toggleProps }>
+			<Button __next40pxDefaultSize { ...toggleProps }>
 				<LabeledColorIndicator
 					colorValue={ colorValue }
 					label={ label }
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index b3539637a9904..fc1b1a4d46903 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -73,15 +73,15 @@ $swatch-gap: 12px;
 	// 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: $radius-block-ui;
-		border-top-right-radius: $radius-block-ui;
+		border-top-left-radius: $radius-small;
+		border-top-right-radius: $radius-small;
 		border-top: 1px solid $gray-300;
 	}
 
 	// Identify the last visible instance as placeholder items will not have this class.
 	&:nth-last-child(1 of &) {
-		border-bottom-left-radius: $radius-block-ui;
-		border-bottom-right-radius: $radius-block-ui;
+		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 0bda16071ef99..19640d41daeb3 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"
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 0000000000000..651bf885a7d1e
--- /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 0000000000000..18c4d0763cd52
--- /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/convert-to-group-buttons/index.js b/packages/block-editor/src/components/convert-to-group-buttons/index.js
index 2a015d569e85b..d2e5fda1e96b7 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
@@ -82,7 +82,7 @@ function ConvertToGroupButton( {
 				>
 					{ _x(
 						'Ungroup',
-						'Ungrouping blocks from within a grouping 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/date-format-picker/index.js b/packages/block-editor/src/components/date-format-picker/index.js
index 15beec4ac6ed5..eb269e03ca5ab 100644
--- a/packages/block-editor/src/components/date-format-picker/index.js
+++ b/packages/block-editor/src/components/date-format-picker/index.js
@@ -129,6 +129,7 @@ function NonDefaultControls( { format, onChange } ) {
 	return (
 		<VStack>
 			<CustomSelectControl
+				__next40pxDefaultSize
 				label={ __( 'Choose a format' ) }
 				options={ [ ...suggestedOptions, customOption ] }
 				value={
@@ -149,6 +150,7 @@ function NonDefaultControls( { format, onChange } ) {
 			/>
 			{ isCustom && (
 				<TextControl
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ __( 'Custom format' ) }
 					hideLabelFromVision
diff --git a/packages/block-editor/src/components/default-block-appender/content.scss b/packages/block-editor/src/components/default-block-appender/content.scss
index 77725d2508ec5..51e0b4381a15d 100644
--- a/packages/block-editor/src/components/default-block-appender/content.scss
+++ b/packages/block-editor/src/components/default-block-appender/content.scss
@@ -48,7 +48,6 @@
 	.block-editor-inserter__toggle.components-button.has-icon {
 		// Basic look
 		background: $gray-900;
-		border-radius: $radius-block-ui;
 		color: $white;
 		padding: 0;
 
diff --git a/packages/block-editor/src/components/dimensions-tool/scale-tool.js b/packages/block-editor/src/components/dimensions-tool/scale-tool.js
index 05a7d2f4d251a..a23fad586d470 100644
--- a/packages/block-editor/src/components/dimensions-tool/scale-tool.js
+++ b/packages/block-editor/src/components/dimensions-tool/scale-tool.js
@@ -105,6 +105,7 @@ export default function ScaleTool( {
 			panelId={ panelId }
 		>
 			<ToggleGroupControl
+				__nextHasNoMarginBottom
 				label={ __( 'Scale' ) }
 				isBlock
 				help={ scaleHelp[ displayValue ] }
diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
index 34c4a90020e3b..a59ac310bcd30 100644
--- a/packages/block-editor/src/components/editor-styles/index.js
+++ b/packages/block-editor/src/components/editor-styles/index.js
@@ -67,7 +67,7 @@ function useDarkThemeBodyClassName( styles, scope ) {
 	);
 }
 
-function EditorStyles( { styles, scope } ) {
+function EditorStyles( { styles, scope, transformOptions } ) {
 	const overrides = useSelect(
 		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
 		[]
@@ -88,14 +88,15 @@ function EditorStyles( { styles, scope } ) {
 		return [
 			transformStyles(
 				_styles.filter( ( style ) => style?.css ),
-				scope
+				scope,
+				transformOptions
 			),
 			_styles
 				.filter( ( style ) => style.__unstableType === 'svgs' )
 				.map( ( style ) => style.assets )
 				.join( '' ),
 		];
-	}, [ styles, overrides, scope ] );
+	}, [ styles, overrides, scope, transformOptions ] );
 
 	return (
 		<>
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 418d43e322ac8..38cb42e394a3b 100644
--- a/packages/block-editor/src/components/font-appearance-control/index.js
+++ b/packages/block-editor/src/components/font-appearance-control/index.js
@@ -39,6 +39,8 @@ const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
  */
 export default function FontAppearanceControl( props ) {
 	const {
+		/** Start opting into the larger default height that will become the default size in a future version. */
+		__next40pxDefaultSize = false,
 		onChange,
 		hasFontStyles = true,
 		hasFontWeights = true,
@@ -150,6 +152,7 @@ export default function FontAppearanceControl( props ) {
 			<CustomSelectControl
 				{ ...otherProps }
 				className="components-font-appearance-control"
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				label={ label }
 				describedBy={ getDescribedBy() }
 				options={ selectOptions }
diff --git a/packages/block-editor/src/components/font-family/README.md b/packages/block-editor/src/components/font-family/README.md
index 5300873ab8345..57697f595cc80 100644
--- a/packages/block-editor/src/components/font-family/README.md
+++ b/packages/block-editor/src/components/font-family/README.md
@@ -1,5 +1,9 @@
 # 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.
@@ -10,7 +14,7 @@ Optionally, you can provide a `fontFamilies` prop that overrides the predefined
 
 ```jsx
 import { useState } from 'react';
-import { FontFamilyControl } from '@wordpress/block-editor';
+import { __experimentalFontFamilyControl as FontFamilyControl } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 // ...
@@ -24,6 +28,7 @@ const MyFontFamilyControl = () => {
 			onChange={ ( newFontFamily ) => {
 				setFontFamily( newFontFamily );
 			} }
+			__nextHasNoMarginBottom
 		/>
 	);
 };
@@ -69,3 +74,19 @@ The current font family value.
 - 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 4a40a880e537c..c87a52b4c676d 100644
--- a/packages/block-editor/src/components/font-family/index.js
+++ b/packages/block-editor/src/components/font-family/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { SelectControl } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -10,6 +11,10 @@ import { __ } from '@wordpress/i18n';
 import { useSettings } from '../use-settings';
 
 export default function FontFamilyControl( {
+	/** Start opting into the larger default height that will become the default size in a future version. */
+	__next40pxDefaultSize = false,
+	/** Start opting into the new margin-free styles that will become the default in a future version. */
+	__nextHasNoMarginBottom = false,
 	value = '',
 	onChange,
 	fontFamilies,
@@ -33,8 +38,22 @@ export default function FontFamilyControl( {
 			};
 		} ),
 	];
+
+	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
+			__next40pxDefaultSize={ __next40pxDefaultSize }
+			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			label={ __( 'Font' ) }
 			options={ options }
 			value={ value }
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 0000000000000..54dadeb213f12
--- /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/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index 25ff5887eb5e6..c66ea01bce549 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -1,64 +1,22 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	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,
-	__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 {
-	useCallback,
-	Platform,
-	useRef,
-	useState,
-	useEffect,
-} from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { focus } from '@wordpress/dom';
-import { isBlobURL } from '@wordpress/blob';
-
+import { useCallback, Platform } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import BackgroundImageControl from '../background-image-control';
 import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
-import MediaReplaceFlow from '../media-replace-flow';
-import { store as blockEditorStore } from '../../store';
-import { getResolvedThemeFilePath } from './theme-file-uri-utils';
+import { __ } from '@wordpress/i18n';
 
-const IMAGE_BACKGROUND_TYPE = 'image';
 const DEFAULT_CONTROLS = {
 	backgroundImage: true,
 };
-const BACKGROUND_POPOVER_PROPS = {
-	placement: 'left-start',
-	offset: 36,
-	shift: true,
-	className: 'block-editor-global-styles-background-panel__popover',
-};
-const noop = () => {};
 
 /**
  * Checks site settings to see if the background panel may be used.
@@ -103,539 +61,6 @@ export function hasBackgroundImageValue( style ) {
 	);
 }
 
-/**
- * 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 BackgroundImageControls( {
-	onChange,
-	style,
-	inheritedValue,
-	onRemoveImage = noop,
-	displayInPanel,
-	themeFileURIs,
-} ) {
-	const mediaUpload = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
-		[]
-	);
-
-	const { id, title, url } = style?.background?.backgroundImage || {
-		...inheritedValue?.background?.backgroundImage,
-	};
-	const replaceContainerRef = useRef();
-	const { createErrorNotice } = useDispatch( noticesStore );
-	const onUploadError = ( message ) => {
-		createErrorNotice( message, { type: 'snackbar' } );
-	};
-
-	const resetBackgroundImage = () =>
-		onChange(
-			setImmutably(
-				style,
-				[ 'background', 'backgroundImage' ],
-				undefined
-			)
-		);
-
-	const onSelectMedia = ( media ) => {
-		if ( ! media || ! media.url ) {
-			resetBackgroundImage();
-			return;
-		}
-
-		if ( isBlobURL( media.url ) ) {
-			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;
-		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:
-					! positionValue && ( 'auto' === sizeValue || ! sizeValue )
-						? '50% 0'
-						: positionValue,
-			} )
-		);
-	};
-
-	const onFilesDrop = ( filesList ) => {
-		mediaUpload( {
-			allowedTypes: [ IMAGE_BACKGROUND_TYPE ],
-			filesList,
-			onFileChange( [ image ] ) {
-				if ( isBlobURL( image?.url ) ) {
-					return;
-				}
-				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"
-		>
-			<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={ getResolvedThemeFilePath(
-							url,
-							themeFileURIs
-						) }
-						filename={ title }
-						label={ imgLabel }
-					/>
-				}
-				variant="secondary"
-			>
-				{ canRemove && (
-					<MenuItem
-						onClick={ () => {
-							closeAndFocus();
-							onRemove();
-						} }
-					>
-						{ __( 'Remove' ) }
-					</MenuItem>
-				) }
-				{ hasValue && (
-					<MenuItem
-						onClick={ () => {
-							closeAndFocus();
-							onRemoveImage();
-						} }
-					>
-						{ __( 'Reset ' ) }
-					</MenuItem>
-				) }
-			</MediaReplaceFlow>
-			<DropZone
-				onFilesDrop={ onFilesDrop }
-				label={ __( 'Drop to upload' ) }
-			/>
-		</div>
-	);
-}
-
-function BackgroundSizeControls( {
-	onChange,
-	style,
-	inheritedValue,
-	defaultValues,
-	themeFileURIs,
-} ) {
-	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 positionValue =
-		style?.background?.backgroundPosition ||
-		inheritedValue?.background?.backgroundPosition;
-	const attachmentValue =
-		style?.background?.backgroundAttachment ||
-		inheritedValue?.background?.backgroundAttachment;
-
-	/*
-	 * An `undefined` value is replaced with any supplied
-	 * default control value for the toggle group control.
-	 * An empty string is treated as `auto` - this allows a user
-	 * to select "Size" and then enter a custom value, with an
-	 * empty value being treated as `auto`.
-	 */
-	const currentValueForToggle =
-		( sizeValue !== undefined &&
-			sizeValue !== 'cover' &&
-			sizeValue !== 'contain' ) ||
-		sizeValue === ''
-			? 'auto'
-			: sizeValue || defaultValues?.backgroundSize;
-
-	/*
-	 * 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.
-			 */
-			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'
-			)
-		);
-
-	return (
-		<VStack spacing={ 4 } className="single-column">
-			<FocalPointPicker
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				label={ __( 'Focal point' ) }
-				url={ getResolvedThemeFilePath( imageValue, themeFileURIs ) }
-				value={ backgroundPositionToCoords( positionValue ) }
-				onChange={ updateBackgroundPosition }
-			/>
-			<ToggleControl
-				label={ __( 'Fixed background' ) }
-				checked={ attachmentValue === 'fixed' }
-				onChange={ toggleScrollWithPage }
-				help={ __(
-					'Whether your image should scroll with the page or stay fixed in place.'
-				) }
-			/>
-			<ToggleGroupControl
-				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
-					label={ __( 'Repeat' ) }
-					checked={ repeatCheckedValue }
-					onChange={ toggleIsRepeated }
-					disabled={ currentValueForToggle === 'cover' }
-				/>
-			</HStack>
-		</VStack>
-	);
-}
-
 function BackgroundToolsPanel( {
 	resetAllFilter,
 	onChange,
@@ -651,31 +76,31 @@ function BackgroundToolsPanel( {
 	};
 
 	return (
-		<VStack
-			as={ ToolsPanel }
-			spacing={ 4 }
+		<ToolsPanel
 			label={ headerLabel }
 			resetAll={ resetAll }
 			panelId={ panelId }
 			dropdownMenuProps={ dropdownMenuProps }
 		>
 			{ children }
-		</VStack>
+		</ToolsPanel>
 	);
 }
 
-export default function BackgroundPanel( {
+export default function BackgroundImagePanel( {
 	as: Wrapper = BackgroundToolsPanel,
 	value,
 	onChange,
-	inheritedValue = value,
+	inheritedValue,
 	settings,
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
 	defaultValues = {},
 	headerLabel = __( 'Background image' ),
-	themeFileURIs,
 } ) {
+	const showBackgroundImageControl = useHasBackgroundPanel( settings );
+	const resetBackground = () =>
+		onChange( setImmutably( value, [ 'background' ], {} ) );
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
 			...previousValue,
@@ -683,24 +108,6 @@ export default function BackgroundPanel( {
 		};
 	}, [] );
 
-	const resetBackground = () =>
-		onChange( setImmutably( value, [ 'background' ], {} ) );
-
-	const { title, url } = value?.background?.backgroundImage || {
-		...inheritedValue?.background?.backgroundImage,
-	};
-	const hasImageValue =
-		hasBackgroundImageValue( value ) ||
-		hasBackgroundImageValue( inheritedValue );
-
-	const shouldShowBackgroundImageControls =
-		hasImageValue &&
-		( settings?.background?.backgroundSize ||
-			settings?.background?.backgroundPosition ||
-			settings?.background?.backgroundRepeat );
-
-	const [ isDropDownOpen, setIsDropDownOpen ] = useState( false );
-
 	return (
 		<Wrapper
 			resetAllFilter={ resetAllFilter }
@@ -709,63 +116,24 @@ export default function BackgroundPanel( {
 			panelId={ panelId }
 			headerLabel={ headerLabel }
 		>
-			<div
-				className={ clsx(
-					'block-editor-global-styles-background-panel__inspector-media-replace-container',
-					{
-						'is-open': isDropDownOpen,
-					}
-				) }
-			>
-				{ shouldShowBackgroundImageControls ? (
-					<BackgroundControlsPanel
-						label={ title }
-						filename={ title }
-						url={ getResolvedThemeFilePath( url, themeFileURIs ) }
-						onToggle={ setIsDropDownOpen }
-						hasImageValue={ hasImageValue }
-					>
-						<VStack spacing={ 3 } className="single-column">
-							<BackgroundImageControls
-								onChange={ onChange }
-								style={ value }
-								inheritedValue={ inheritedValue }
-								themeFileURIs={ themeFileURIs }
-								displayInPanel
-								onRemoveImage={ () => {
-									setIsDropDownOpen( false );
-									resetBackground();
-								} }
-							/>
-							<BackgroundSizeControls
-								onChange={ onChange }
-								panelId={ panelId }
-								style={ value }
-								defaultValues={ defaultValues }
-								inheritedValue={ inheritedValue }
-								themeFileURIs={ themeFileURIs }
-							/>
-						</VStack>
-					</BackgroundControlsPanel>
-				) : (
-					<BackgroundImageControls
+			{ showBackgroundImageControl && (
+				<ToolsPanelItem
+					hasValue={ () => !! value?.background }
+					label={ __( 'Image' ) }
+					onDeselect={ resetBackground }
+					isShownByDefault={ defaultControls.backgroundImage }
+					panelId={ panelId }
+				>
+					<BackgroundImageControl
+						value={ value }
 						onChange={ onChange }
-						style={ value }
+						settings={ settings }
 						inheritedValue={ inheritedValue }
-						themeFileURIs={ themeFileURIs }
+						defaultControls={ defaultControls }
+						defaultValues={ defaultValues }
 					/>
-				) }
-			</div>
-
-			{ /* Dummy ToolsPanel items, so we can control what's in the dropdown popover */ }
-			<ToolsPanelItem
-				hasValue={ () => hasImageValue }
-				label={ __( 'Image' ) }
-				onDeselect={ resetBackground }
-				isShownByDefault={ defaultControls.backgroundImage }
-				panelId={ panelId }
-				className="block-editor-global-styles-background-panel__hidden-tools-panel-item"
-			/>
+				</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
index cc7a464f8634a..aea8e67f5b594 100644
--- a/packages/block-editor/src/components/global-styles/border-panel.js
+++ b/packages/block-editor/src/components/global-styles/border-panel.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import {
-	__experimentalBorderBoxControl as BorderBoxControl,
+	BorderBoxControl,
 	__experimentalHasSplitBorders as hasSplitBorders,
 	__experimentalIsDefinedBorder as isDefinedBorder,
 	__experimentalToolsPanel as ToolsPanel,
diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
index 957d68edaf849..a55a7b331bd0d 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -33,7 +33,7 @@ import { unlock } from '../../lock-unlock';
 
 export function useHasColorPanel( settings ) {
 	const hasTextPanel = useHasTextPanel( settings );
-	const hasBackgroundPanel = useHasBackgroundPanel( settings );
+	const hasBackgroundPanel = useHasBackgroundColorPanel( settings );
 	const hasLinkPanel = useHasLinkPanel( settings );
 	const hasHeadingPanel = useHasHeadingPanel( settings );
 	const hasButtonPanel = useHasButtonPanel( settings );
@@ -97,7 +97,7 @@ export function useHasButtonPanel( settings ) {
 	);
 }
 
-export function useHasBackgroundPanel( settings ) {
+export function useHasBackgroundColorPanel( settings ) {
 	const colors = useColorsPerOrigin( settings );
 	const gradients = useGradientsPerOrigin( settings );
 	return (
@@ -239,7 +239,7 @@ function ColorPanelDropdown( {
 					};
 
 					return (
-						<Button { ...toggleProps }>
+						<Button __next40pxDefaultSize { ...toggleProps }>
 							<LabeledColorIndicators
 								indicators={ indicators }
 								label={ label }
@@ -343,7 +343,7 @@ export default function ColorPanel( {
 	};
 
 	// BackgroundColor
-	const showBackgroundPanel = useHasBackgroundPanel( settings );
+	const showBackgroundPanel = useHasBackgroundColorPanel( settings );
 	const backgroundColor = decodeValue( inheritedValue?.color?.background );
 	const userBackgroundColor = decodeValue( value?.color?.background );
 	const gradient = decodeValue( inheritedValue?.color?.gradient );
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
index fcbff4e5a07d7..87002b5fa3e22 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.native.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.native.js
@@ -18,7 +18,7 @@ import InspectorControls from '../inspector-controls';
 import {
 	useHasColorPanel,
 	useHasTextPanel,
-	useHasBackgroundPanel,
+	useHasBackgroundColorPanel,
 } from './color-panel.js';
 import { useGlobalStyles } from './use-global-styles-context';
 
@@ -95,7 +95,7 @@ const ColorPanel = ( {
 	);
 
 	// BackgroundColor
-	const showBackgroundPanel = useHasBackgroundPanel( settings );
+	const showBackgroundPanel = useHasBackgroundColorPanel( settings );
 	const backgroundColor = decodeValue( inheritedValue?.color?.background );
 	const gradient = decodeValue( inheritedValue?.color?.gradient );
 	const setBackgroundColor = useCallback(
diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js
index 5711e16ffadcb..4c52de6a3d7d1 100644
--- a/packages/block-editor/src/components/global-styles/dimensions-panel.js
+++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -10,13 +10,12 @@ import { __ } from '@wordpress/i18n';
 import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalBoxControl as BoxControl,
-	__experimentalHStack as HStack,
+	BoxControl,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalView as View,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
 } from '@wordpress/components';
-import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
+import { Icon, alignNone, stretchWide } from '@wordpress/icons';
 import { useCallback, useState, Platform } from '@wordpress/element';
 
 /**
@@ -252,7 +251,7 @@ export default function DimensionsPanel( {
 	const minimumMargin = -Infinity;
 	const [ minMarginValue, setMinMarginValue ] = useState( minimumMargin );
 
-	// Content Size
+	// Content Width
 	const showContentSizeControl =
 		useHasContentSize( settings ) && includeLayoutControls;
 	const contentSizeValue = decodeValue( inheritedValue?.layout?.contentSize );
@@ -268,7 +267,7 @@ export default function DimensionsPanel( {
 	const hasUserSetContentSizeValue = () => !! value?.layout?.contentSize;
 	const resetContentSizeValue = () => setContentSizeValue( undefined );
 
-	// Wide Size
+	// Wide Width
 	const showWideSizeControl =
 		useHasWideSize( settings ) && includeLayoutControls;
 	const wideSizeValue = decodeValue( inheritedValue?.layout?.wideSize );
@@ -464,8 +463,7 @@ export default function DimensionsPanel( {
 			) }
 			{ showContentSizeControl && (
 				<ToolsPanelItem
-					className="single-column"
-					label={ __( 'Content size' ) }
+					label={ __( 'Content width' ) }
 					hasValue={ hasUserSetContentSizeValue }
 					onDeselect={ resetContentSizeValue }
 					isShownByDefault={
@@ -474,27 +472,26 @@ export default function DimensionsPanel( {
 					}
 					panelId={ panelId }
 				>
-					<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>
+					<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
-					className="single-column"
-					label={ __( 'Wide size' ) }
+					label={ __( 'Wide width' ) }
 					hasValue={ hasUserSetWideSizeValue }
 					onDeselect={ resetWideSizeValue }
 					isShownByDefault={
@@ -502,21 +499,21 @@ export default function DimensionsPanel( {
 					}
 					panelId={ panelId }
 				>
-					<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>
+					<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 && (
@@ -534,6 +531,7 @@ export default function DimensionsPanel( {
 				>
 					{ ! showSpacingPresetsControl && (
 						<BoxControl
+							__next40pxDefaultSize
 							values={ paddingValues }
 							onChange={ setPaddingValues }
 							label={ __( 'Padding' ) }
@@ -574,6 +572,7 @@ export default function DimensionsPanel( {
 				>
 					{ ! showSpacingPresetsControl && (
 						<BoxControl
+							__next40pxDefaultSize
 							values={ marginValues }
 							onChange={ setMarginValues }
 							inputProps={ inputProps }
@@ -611,12 +610,16 @@ export default function DimensionsPanel( {
 					}
 					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 }
@@ -628,8 +631,8 @@ export default function DimensionsPanel( {
 							/>
 						) : (
 							<UnitControl
+								__next40pxDefaultSize
 								label={ __( 'Block spacing' ) }
-								__unstableInputWidth="80px"
 								min={ 0 }
 								onChange={ setGapValue }
 								units={ units }
diff --git a/packages/block-editor/src/components/global-styles/filters-panel.js b/packages/block-editor/src/components/global-styles/filters-panel.js
index 9eee1b3ff0ec7..581661e0c8407 100644
--- a/packages/block-editor/src/components/global-styles/filters-panel.js
+++ b/packages/block-editor/src/components/global-styles/filters-panel.js
@@ -189,7 +189,10 @@ export default function FiltersPanel( {
 
 							return (
 								<ItemGroup isBordered isSeparated>
-									<Button { ...toggleProps }>
+									<Button
+										__next40pxDefaultSize
+										{ ...toggleProps }
+									>
 										<LabeledColorIndicator
 											indicator={ duotone }
 											label={ __( 'Duotone' ) }
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
index c525cf45c6d52..51e9b16d8048f 100644
--- 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
@@ -202,7 +202,10 @@ export default function getGlobalStylesChanges( next, previous, options = {} ) {
 			}, {} )
 		).map( ( [ key, changeValues ] ) => {
 			const changeValuesLength = changeValues.length;
-			const joinedChangesValue = changeValues.join( __( ', ' ) );
+			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(
diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js
index a1a4fc1a0a6ae..2be77aec18a2c 100644
--- a/packages/block-editor/src/components/global-styles/hooks.js
+++ b/packages/block-editor/src/components/global-styles/hooks.js
@@ -209,11 +209,6 @@ export function useGlobalStyle(
 	return [ result, setStyle ];
 }
 
-export function useGlobalStyleLinks() {
-	const { merged: mergedConfig } = useContext( GlobalStylesContext );
-	return mergedConfig?._links;
-}
-
 /**
  * React hook that overrides a global settings object with block and element specific settings.
  *
diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js
index f668e7e5efc24..4ebc20ab20198 100644
--- a/packages/block-editor/src/components/global-styles/image-settings-panel.js
+++ b/packages/block-editor/src/components/global-styles/image-settings-panel.js
@@ -67,6 +67,7 @@ export default function ImageSettingsPanel( {
 					panelId={ panelId }
 				>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Expand on click' ) }
 						checked={ lightboxChecked }
 						onChange={ onChangeLightbox }
diff --git a/packages/block-editor/src/components/global-styles/index.js b/packages/block-editor/src/components/global-styles/index.js
index 062df0a5606e9..8096a48569f19 100644
--- a/packages/block-editor/src/components/global-styles/index.js
+++ b/packages/block-editor/src/components/global-styles/index.js
@@ -3,7 +3,6 @@ export {
 	useGlobalSetting,
 	useGlobalStyle,
 	useSettingsForBlockElement,
-	useGlobalStyleLinks,
 } from './hooks';
 export { getBlockCSSSelector } from './get-block-css-selector';
 export {
diff --git a/packages/block-editor/src/components/global-styles/shadow-panel-components.js b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
index a30e209027a2b..1cfdff0be286e 100644
--- a/packages/block-editor/src/components/global-styles/shadow-panel-components.js
+++ b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
@@ -10,7 +10,8 @@ import {
 	Button,
 	FlexItem,
 	Dropdown,
-	privateApis as componentsPrivateApis,
+	Composite,
+	Tooltip,
 } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
@@ -20,11 +21,6 @@ import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
  */
 import clsx from 'clsx';
 
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
 /**
  * Shared reference to an empty array for cases where it is important to avoid
  * returning a new array reference on every invocation.
@@ -32,11 +28,6 @@ import { unlock } from '../../lock-unlock';
  * @type {Array}
  */
 const EMPTY_ARRAY = [];
-const {
-	CompositeItemV2: CompositeItem,
-	CompositeV2: Composite,
-	useCompositeStoreV2: useCompositeStore,
-} = unlock( componentsPrivateApis );
 
 export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 	const shadows = useShadowPresets( settings );
@@ -52,6 +43,7 @@ export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 				/>
 				<div className="block-editor-global-styles__clear-shadow">
 					<Button
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ () => onShadowChange( undefined ) }
 					>
@@ -64,10 +56,8 @@ export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 }
 
 export function ShadowPresets( { presets, activeShadow, onSelect } ) {
-	const compositeStore = useCompositeStore();
 	return ! presets ? null : (
 		<Composite
-			store={ compositeStore }
 			role="listbox"
 			className="block-editor-global-styles__shadow__list"
 			aria-label={ __( 'Drop shadows' ) }
@@ -90,30 +80,31 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) {
 
 export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) {
 	return (
-		<CompositeItem
-			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 }
-					label={ label }
-					style={ { boxShadow: shadow } }
-					showTooltip
-				>
-					{ isActive && <Icon icon={ check } /> }
-				</Button>
-			}
-		/>
+		<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>
 	);
 }
 
@@ -151,7 +142,7 @@ function renderShadowToggle() {
 		};
 
 		return (
-			<Button { ...toggleProps }>
+			<Button __next40pxDefaultSize { ...toggleProps }>
 				<HStack justify="flex-start">
 					<Icon
 						className="block-editor-global-styles__toggle-icon"
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index f901506b6b188..e0782fdb01b1d 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -37,10 +37,15 @@
 
 // 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-block-ui;
+	border-radius: $radius-small;
 	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+
 	padding: 0;
 
 	height: $button-size-small + 2 * $border-width;
@@ -70,171 +75,3 @@
 	/*rtl:ignore*/
 	direction: ltr;
 }
-
-
-.block-editor-global-styles-background-panel__inspector-media-replace-container {
-	border: 1px solid $gray-300;
-	border-radius: 2px;
-	// 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: 1px solid $gray-300;
-	border-radius: 2px;
-
-	// 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__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-base-control__help,
-	.components-toggle-control {
-		margin-bottom: 0;
-	}
-
-	.components-focal-point-picker-wrapper {
-		background-color: $gray-100;
-		width: 100%;
-		border-radius: $radius-block-ui;
-		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;
-	}
-}
-
-.block-editor-global-styles-background-panel__hidden-tools-panel-item {
-	height: 0;
-	width: 0;
-	position: absolute;
-}
-
-// Push control panel into the background when the media modal is open.
-.modal-open .block-editor-global-styles-background-panel__popover {
-	z-index: z-index(".block-editor-global-styles-background-panel__popover");
-}
-
-.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/global-styles/test/background-panel.js b/packages/block-editor/src/components/global-styles/test/background-panel.js
index d0b3a8ad60170..ad2c55e747f70 100644
--- a/packages/block-editor/src/components/global-styles/test/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/test/background-panel.js
@@ -2,53 +2,7 @@
  * Internal dependencies
  */
 
-import {
-	backgroundPositionToCoords,
-	coordsToBackgroundPosition,
-	hasBackgroundImageValue,
-} from '../background-panel';
-
-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();
-	} );
-} );
+import { hasBackgroundImageValue } from '../background-panel';
 
 describe( 'hasBackgroundImageValue', () => {
 	it( 'should return `true` when id and url exist', () => {
diff --git a/packages/block-editor/src/components/global-styles/test/theme-file-uri-utils.js b/packages/block-editor/src/components/global-styles/test/theme-file-uri-utils.js
deleted file mode 100644
index 06c482b67826b..0000000000000
--- a/packages/block-editor/src/components/global-styles/test/theme-file-uri-utils.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	setThemeFileUris,
-	getResolvedThemeFilePath,
-} from '../theme-file-uri-utils';
-
-const themeFileURIs = [
-	{
-		name: 'file:./assets/image.jpg',
-		href: 'https://wordpress.org/assets/image.jpg',
-		target: 'styles.background.backgroundImage.url',
-	},
-	{
-		name: 'file:./assets/other/image.jpg',
-		href: 'https://wordpress.org/assets/other/image.jpg',
-		target: "styles.blocks.['core/group].background.backgroundImage.url",
-	},
-];
-
-describe( 'setThemeFileUris()', () => {
-	const themeJson = {
-		styles: {
-			background: {
-				backgroundImage: {
-					url: 'file:./assets/image.jpg',
-				},
-			},
-		},
-	};
-
-	it( 'should replace relative paths with resolved URIs if found in themeFileURIs', () => {
-		const newThemeJson = setThemeFileUris( themeJson, themeFileURIs );
-		expect(
-			newThemeJson.styles.background.backgroundImage.url ===
-				'https://wordpress.org/assets/image.jpg'
-		).toBe( true );
-		// Object reference should be the same as the function is mutating the object.
-		expect( newThemeJson ).toEqual( themeJson );
-	} );
-} );
-
-describe( 'getResolvedThemeFilePath()', () => {
-	it.each( [
-		[
-			'file:./assets/image.jpg',
-			'https://wordpress.org/assets/image.jpg',
-			'Should return absolute URL if found in themeFileURIs',
-		],
-		[
-			'file:./misc/image.jpg',
-			'file:./misc/image.jpg',
-			'Should return value if not found in themeFileURIs',
-		],
-		[
-			'https://wordpress.org/assets/image.jpg',
-			'https://wordpress.org/assets/image.jpg',
-			'Should not match absolute URLs',
-		],
-	] )( 'Given file %s and return value %s: %s', ( file, returnedValue ) => {
-		expect(
-			getResolvedThemeFilePath( file, themeFileURIs ) === returnedValue
-		).toBe( true );
-	} );
-} );
diff --git a/packages/block-editor/src/components/global-styles/test/typography-utils.js b/packages/block-editor/src/components/global-styles/test/typography-utils.js
index 41a7d6b5e37b8..b094d1e827783 100644
--- a/packages/block-editor/src/components/global-styles/test/typography-utils.js
+++ b/packages/block-editor/src/components/global-styles/test/typography-utils.js
@@ -28,7 +28,9 @@ describe( 'typography utils', () => {
 				preset: {
 					size: 0,
 				},
-				typographySettings: undefined,
+				typographySettings: {
+					fluid: true,
+				},
 				expected: 0,
 			},
 
@@ -37,7 +39,9 @@ describe( 'typography utils', () => {
 				preset: {
 					size: '0',
 				},
-				typographySettings: undefined,
+				typographySettings: {
+					fluid: true,
+				},
 				expected: '0',
 			},
 
@@ -46,7 +50,9 @@ describe( 'typography utils', () => {
 				preset: {
 					size: null,
 				},
-				typographySettings: null,
+				typographySettings: {
+					fluid: true,
+				},
 				expected: null,
 			},
 
@@ -153,7 +159,6 @@ describe( 'typography utils', () => {
 				message: 'should return already clamped value',
 				preset: {
 					size: 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
-					fluid: false,
 				},
 				settings: {
 					typography: {
@@ -168,7 +173,6 @@ describe( 'typography utils', () => {
 				message: 'should return value with unsupported unit',
 				preset: {
 					size: '1000%',
-					fluid: false,
 				},
 				settings: {
 					typography: {
@@ -677,6 +681,38 @@ describe( 'typography utils', () => {
 				},
 				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(
@@ -1255,6 +1291,61 @@ describe( 'typography utils', () => {
 					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,
diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
index 525a8a1d53d07..5022e8ba591db 100644
--- a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
@@ -763,7 +763,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'.is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.is-layout-flow > * + * { margin-block-start: 0.5em; margin-block-end: 0; }.is-layout-flex { gap: 0.5em; }:root { --wp--style--block-gap: 0.5em; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }'
+				':root :where(.is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:root :where(.is-layout-flow) > * + * { margin-block-start: 0.5em; margin-block-end: 0; }:root :where(.is-layout-flex) { gap: 0.5em; }:root { --wp--style--block-gap: 0.5em; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }'
 			);
 		} );
 
@@ -780,7 +780,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'.is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.is-layout-flex { gap: 12px; }:root { --wp--style--block-gap: 12px; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }'
+				':root :where(.is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:root :where(.is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:root :where(.is-layout-flex) { gap: 12px; }:root { --wp--style--block-gap: 12px; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }'
 			);
 		} );
 
@@ -797,7 +797,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'.wp-block-group-is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.wp-block-group-is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.wp-block-group-is-layout-flex { gap: 12px; }'
+				':root :where(.wp-block-group-is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:root :where(.wp-block-group-is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:root :where(.wp-block-group-is-layout-flex) { gap: 12px; }'
 			);
 		} );
 
@@ -1008,9 +1008,23 @@ describe( 'global styles renderer', () => {
 						ref: 'styles.elements.h1.typography.letterSpacing',
 					},
 				},
+				background: {
+					backgroundImage: {
+						ref: 'styles.background.backgroundImage',
+					},
+					backgroundSize: {
+						ref: 'styles.background.backgroundSize',
+					},
+				},
 			};
 			const tree = {
 				styles: {
+					background: {
+						backgroundImage: {
+							url: 'http://my-image.org/image.gif',
+						},
+						backgroundSize: 'cover',
+					},
 					elements: {
 						h1: {
 							typography: {
@@ -1026,16 +1040,63 @@ describe( 'global styles renderer', () => {
 			).toEqual( [
 				'font-size: var(--wp--preset--font-size--xx-large)',
 				'letter-spacing: 2px',
+				"background-image: url( 'http://my-image.org/image.gif' )",
+				'background-size: cover',
+			] );
+		} );
+		it( 'should set default values for block background styles', () => {
+			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(
@@ -1049,21 +1110,21 @@ describe( 'global styles renderer', () => {
 		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;}',
+					'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){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;}',
+					'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::before, .bar::before){color: yellow;}:root :where(.foo ::before, .bar ::before){color: purple;}:root :where(.foo.three::before, .bar.three::before){color: orange;}:root :where(.foo .four::before, .bar .four::before){color: skyblue;}'
+				':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
index f06a09494ab9f..57a157662969e 100644
--- a/packages/block-editor/src/components/global-styles/test/utils.js
+++ b/packages/block-editor/src/components/global-styles/test/utils.js
@@ -7,6 +7,9 @@ import {
 	getPresetVariableFromValue,
 	getValueFromVariable,
 	scopeFeatureSelectors,
+	getResolvedThemeFilePath,
+	getResolvedRefValue,
+	getResolvedValue,
 } from '../utils';
 
 describe( 'editor utils', () => {
@@ -52,6 +55,46 @@ describe( 'editor utils', () => {
 				},
 			},
 		},
+		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,
 	};
 
@@ -366,4 +409,91 @@ describe( 'editor utils', () => {
 			} );
 		} );
 	} );
+
+	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/theme-file-uri-utils.js b/packages/block-editor/src/components/global-styles/theme-file-uri-utils.js
deleted file mode 100644
index 1ab05a45f0d54..0000000000000
--- a/packages/block-editor/src/components/global-styles/theme-file-uri-utils.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getValueFromObjectPath } from '../../utils/object';
-
-/**
- * Looks up a theme file URI based on a relative path.
- *
- * @param {string}        file          A relative path.
- * @param {Array<Object>} themeFileURIs A collection of absolute theme file URIs and their corresponding file paths.
- * @return {string?} A resolved theme file URI, if one is found in the themeFileURIs collection.
- */
-export function getResolvedThemeFilePath( file, themeFileURIs = [] ) {
-	const uri = themeFileURIs.find(
-		( themeFileUri ) => themeFileUri.name === file
-	);
-
-	if ( ! uri?.href ) {
-		return file;
-	}
-
-	return uri?.href;
-}
-
-/**
- * Mutates an object by settings a value at the provided path.
- *
- * @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} Object with the new value set.
- */
-function setMutably( object, path, value ) {
-	path = path.split( '.' );
-	const finalValueKey = path.pop();
-	let prev = object;
-
-	for ( const key of path ) {
-		const current = prev[ key ];
-		prev = current;
-	}
-
-	prev[ finalValueKey ] = value;
-
-	return object;
-}
-
-/**
- * Resolves any relative paths if a corresponding theme file URI is available.
- * Note: this function mutates the object and is specifically to be used in
- * an async styles build context in useGlobalStylesOutput
- *
- * @param {Object}        themeJson     Theme.json/Global styles tree.
- * @param {Array<Object>} themeFileURIs A collection of absolute theme file URIs and their corresponding file paths.
- * @return {Object} Returns mutated object.
- */
-export function setThemeFileUris( themeJson, themeFileURIs ) {
-	if ( ! themeJson?.styles || ! themeFileURIs ) {
-		return themeJson;
-	}
-
-	themeFileURIs.forEach( ( { name, href, target } ) => {
-		const value = getValueFromObjectPath( themeJson, target );
-		if ( value === name ) {
-			/*
-			 * The object must not be updated immutably here because the
-			 * themeJson is a reference to the global styles tree used as a dependency in the
-			 * useGlobalStylesOutputWithConfig() hook. If we don't mutate the object,
-			 * the hook will detect the change and re-render the component, resulting
-			 * in a maximum depth exceeded error.
-			 */
-			themeJson = setMutably( themeJson, target, href );
-		}
-	} );
-
-	return themeJson;
-}
diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js
index f6a389a5bc96d..9bc875cdc0a30 100644
--- a/packages/block-editor/src/components/global-styles/typography-panel.js
+++ b/packages/block-editor/src/components/global-styles/typography-panel.js
@@ -474,7 +474,6 @@ export default function TypographyPanel( {
 					panelId={ panelId }
 				>
 					<LineHeightControl
-						__nextHasNoMarginBottom
 						__unstableInputWidth="auto"
 						value={ lineHeight }
 						onChange={ setLineHeight }
diff --git a/packages/block-editor/src/components/global-styles/typography-utils.js b/packages/block-editor/src/components/global-styles/typography-utils.js
index 59ff04bf21ebc..4b7c90ae4f222 100644
--- a/packages/block-editor/src/components/global-styles/typography-utils.js
+++ b/packages/block-editor/src/components/global-styles/typography-utils.js
@@ -40,6 +40,8 @@ import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights
  * 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.
@@ -50,15 +52,25 @@ import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights
 export function getTypographyFontSizeValue( preset, settings ) {
 	const { size: defaultSize } = preset;
 
-	if ( ! isFluidTypographyEnabled( settings?.typography ) ) {
+	/*
+	 * 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;
 	}
+
 	/*
-	 * Checks whether a font size has explicitly bypassed fluid calculations.
-	 * Also catches falsy values and 0/'0'.
-	 * Fluid calculations cannot be performed on `0`.
+	 * 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 ( ! defaultSize || '0' === defaultSize || false === preset?.fluid ) {
+	if (
+		! isFluidTypographyEnabled( settings?.typography ) &&
+		! isFluidTypographyEnabled( preset )
+	) {
 		return defaultSize;
 	}
 
@@ -162,6 +174,10 @@ export function findNearestFontWeight(
 	availableFontWeights,
 	newFontWeightValue
 ) {
+	newFontWeightValue =
+		'number' === typeof newFontWeightValue
+			? newFontWeightValue.toString()
+			: newFontWeightValue;
 	if ( ! newFontWeightValue || typeof newFontWeightValue !== 'string' ) {
 		return '';
 	}
@@ -248,7 +264,7 @@ export function findNearestStyleAndWeight(
 		( { value: fs } ) => fs === fontStyle
 	);
 	const hasFontWeight = fontWeights?.some(
-		( { value: fw } ) => fw === fontWeight
+		( { value: fw } ) => fw?.toString() === fontWeight?.toString()
 	);
 
 	if ( ! hasFontStyle ) {
diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
index 63d6a2fb22dd7..cd4ad0cea50e0 100644
--- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -10,7 +10,7 @@ import {
 } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { useContext, useMemo } from '@wordpress/element';
-import { getCSSRules } from '@wordpress/style-engine';
+import { getCSSRules, getCSSValueFromRawStyle } from '@wordpress/style-engine';
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
@@ -24,6 +24,7 @@ import {
 	scopeFeatureSelectors,
 	appendToSelector,
 	getBlockStyleVariationSelector,
+	getResolvedValue,
 } from './utils';
 import { getBlockCSSSelector } from './get-block-css-selector';
 import { getTypographyFontSizeValue } from './typography-utils';
@@ -36,7 +37,6 @@ import { store as blockEditorStore } from '../../store';
 import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
 import { getValueFromObjectPath, setImmutably } from '../../utils/object';
 import { unlock } from '../../lock-unlock';
-import { setThemeFileUris } from './theme-file-uri-utils';
 
 // Elements that rely on class names in their selectors.
 const ELEMENT_CLASS_NAMES = {
@@ -54,21 +54,6 @@ const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
 };
 const { kebabCase } = unlock( componentsPrivateApis );
 
-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.
  *
@@ -371,7 +356,7 @@ export function getStylesDeclarations(
 						? name
 						: kebabCase( name );
 					declarations.push(
-						`${ cssProperty }: ${ compileStyleValue(
+						`${ cssProperty }: ${ getCSSValueFromRawStyle(
 							getValueFromObjectPath( styleValue, [ prop ] )
 						) }`
 					);
@@ -383,7 +368,7 @@ export function getStylesDeclarations(
 					? key
 					: kebabCase( key );
 				declarations.push(
-					`${ cssProperty }: ${ compileStyleValue(
+					`${ cssProperty }: ${ getCSSValueFromRawStyle(
 						getValueFromObjectPath( blockStyles, pathToValue )
 					) }`
 				);
@@ -395,21 +380,40 @@ export function getStylesDeclarations(
 	);
 
 	/*
-	 * Set background defaults.
-	 * Applies to all background styles except the top-level site background.
+	 * 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 ( ! isRoot && !! blockStyles.background ) {
-		blockStyles = {
-			...blockStyles,
-			background: {
-				...blockStyles.background,
-				...setBackgroundStyleDefaults( blockStyles.background ),
-			},
-		};
+	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 ),
+				},
+			};
+		}
 	}
 
-	// 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 or if we're not editing a full template.
@@ -424,18 +428,7 @@ export function getStylesDeclarations(
 			? rule.key
 			: kebabCase( rule.key );
 
-		let ruleValue = rule.value;
-		if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
-			const refPath = ruleValue.ref.split( '.' );
-			ruleValue = compileStyleValue(
-				getValueFromObjectPath( 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;
-			}
-		}
+		let ruleValue = getResolvedValue( rule.value, tree, null );
 
 		// Calculate fluid typography rules where available.
 		if ( cssProperty === 'font-size' ) {
@@ -544,10 +537,10 @@ export function getLayoutStyles( {
 							} else {
 								combinedSelector =
 									selector === ROOT_BLOCK_SELECTOR
-										? `.${ className }${
+										? `:root :where(.${ className })${
 												spacingStyle?.selector || ''
 										  }`
-										: `${ selector }-${ className }${
+										: `:root :where(${ selector }-${ className })${
 												spacingStyle?.selector || ''
 										  }`;
 							}
@@ -1327,9 +1320,17 @@ function updateConfigWithSeparator( 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.
@@ -1342,11 +1343,32 @@ export function processCSSNesting( css, blockSelector ) {
 			}
 
 			const [ nestedSelector, cssValue ] = splittedPart;
-			const combinedSelector = nestedSelector.startsWith( ' ' )
-				? scopeSelector( blockSelector, nestedSelector )
-				: appendToSelector( blockSelector, nestedSelector );
 
-			processedCSS += `:root :where(${ combinedSelector }){${ cssValue.trim() }}`;
+			// 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;
@@ -1369,10 +1391,6 @@ export function useGlobalStylesOutputWithConfig(
 	disableRootPadding
 ) {
 	const [ blockGap ] = useGlobalSetting( 'spacing.blockGap' );
-	mergedConfig = setThemeFileUris(
-		mergedConfig,
-		mergedConfig?._links?.[ 'wp:theme-file' ]
-	);
 	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 ) => {
diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js
index bf84e6f0b5765..f5dc157d1df8e 100644
--- a/packages/block-editor/src/components/global-styles/utils.js
+++ b/packages/block-editor/src/components/global-styles/utils.js
@@ -7,6 +7,7 @@ import fastDeepEqual from 'fast-deep-equal/es6';
  * WordPress dependencies
  */
 import { useViewportMatch } from '@wordpress/compose';
+import { getCSSValueFromRawStyle } from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
@@ -305,9 +306,8 @@ function getValueFromCustomVariable( features, blockName, variable, path ) {
  */
 export function getValueFromVariable( features, blockName, variable ) {
 	if ( ! variable || typeof variable !== 'string' ) {
-		if ( variable?.ref && typeof variable?.ref === 'string' ) {
-			const refPath = variable.ref.split( '.' );
-			variable = getValueFromObjectPath( features, refPath );
+		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 ) {
@@ -525,3 +525,91 @@ export function getBlockStyleVariationSelector( variation, blockSelector ) {
 
 	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/grid/grid-item-movers.js b/packages/block-editor/src/components/grid/grid-item-movers.js
index adda11b7a45a6..a7f21181eb9a5 100644
--- a/packages/block-editor/src/components/grid/grid-item-movers.js
+++ b/packages/block-editor/src/components/grid/grid-item-movers.js
@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import {
 	VisuallyHidden,
 	ToolbarButton,
@@ -55,28 +55,29 @@ export function GridItemMovers( {
 	return (
 		<BlockControls group="parent">
 			<ToolbarGroup className="block-editor-grid-item-mover__move-button-container">
-				<GridItemMover
-					className="is-left-button"
-					icon={ 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 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"
@@ -123,28 +124,29 @@ export function GridItemMovers( {
 						} }
 					/>
 				</div>
-				<GridItemMover
-					className="is-right-button"
-					icon={ 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 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>
 	);
diff --git a/packages/block-editor/src/components/grid/grid-item-resizer.js b/packages/block-editor/src/components/grid/grid-item-resizer.js
index 6f6fa655b3556..1277ac2a23953 100644
--- a/packages/block-editor/src/components/grid/grid-item-resizer.js
+++ b/packages/block-editor/src/components/grid/grid-item-resizer.js
@@ -7,7 +7,7 @@ import { useState, useEffect } from '@wordpress/element';
 /**
  * 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 BlockPopoverCover from '../block-popover/cover';
 import { getComputedCSS, getGridTracks, getClosestTrack } from './utils';
 
@@ -73,8 +73,8 @@ function GridItemResizerInner( {
 	}, [ blockElement, rootBlockElement ] );
 
 	const justification = {
-		right: 'flex-start',
-		left: 'flex-end',
+		right: 'left',
+		left: 'right',
 	};
 
 	const alignment = {
@@ -98,7 +98,7 @@ function GridItemResizerInner( {
 		<BlockPopoverCover
 			className="block-editor-grid-item-resizer"
 			clientId={ clientId }
-			__unstablePopoverSlot="block-toolbar"
+			__unstablePopoverSlot="__unstable-block-tools-after"
 			additionalStyles={ styles }
 		>
 			<ResizableBox
@@ -119,6 +119,15 @@ function GridItemResizerInner( {
 				} }
 				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
@@ -126,21 +135,6 @@ function GridItemResizerInner( {
 					 * so that it resizes in the right direction.
 					 */
 					setResizeDirection( direction );
-
-					/*
-					 * The mouseup event on the resize handle doesn't trigger if the mouse
-					 * isn't directly above the handle, so we try to detect if it happens
-					 * outside the grid and dispatch a mouseup event on the handle.
-					 */
-					blockElement.ownerDocument.addEventListener(
-						'mouseup',
-						() => {
-							event.target.dispatchEvent(
-								new Event( 'mouseup', { bubbles: true } )
-							);
-						},
-						{ once: true }
-					);
 				} }
 				onResizeStop={ ( event, direction, boxElement ) => {
 					const columnGap = parseFloat(
diff --git a/packages/block-editor/src/components/grid/grid-visualizer.js b/packages/block-editor/src/components/grid/grid-visualizer.js
index 5e5e1e3bfa2f7..81da0457ffc5c 100644
--- a/packages/block-editor/src/components/grid/grid-visualizer.js
+++ b/packages/block-editor/src/components/grid/grid-visualizer.js
@@ -13,12 +13,13 @@ import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';
 /**
  * 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 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(
@@ -118,19 +119,25 @@ const GridVisualizerGrid = forwardRef(
 function ManualGridVisualizer( { gridClientId, gridInfo } ) {
 	const [ highlightedRect, setHighlightedRect ] = useState( null );
 
-	const gridItems = useSelect(
-		( select ) => select( blockEditorStore ).getBlocks( gridClientId ),
+	const gridItemStyles = useSelect(
+		( select ) => {
+			const { getBlockOrder, getBlockStyles } = unlock(
+				select( blockEditorStore )
+			);
+			const blockOrder = getBlockOrder( gridClientId );
+			return getBlockStyles( blockOrder );
+		},
 		[ gridClientId ]
 	);
 	const occupiedRects = useMemo( () => {
 		const rects = [];
-		for ( const block of gridItems ) {
+		for ( const style of Object.values( gridItemStyles ) ) {
 			const {
 				columnStart,
 				rowStart,
 				columnSpan = 1,
 				rowSpan = 1,
-			} = block.attributes.style?.layout || {};
+			} = style?.layout ?? {};
 			if ( ! columnStart || ! rowStart ) {
 				continue;
 			}
@@ -144,7 +151,7 @@ function ManualGridVisualizer( { gridClientId, gridInfo } ) {
 			);
 		}
 		return rects;
-	}, [ gridItems ] );
+	}, [ gridItemStyles ] );
 
 	return range( 1, gridInfo.numRows ).map( ( row ) =>
 		range( 1, gridInfo.numColumns ).map( ( column ) => {
@@ -206,8 +213,12 @@ function useGridVisualizerDropZone(
 	gridInfo,
 	setHighlightedRect
 ) {
-	const { getBlockAttributes, getBlockRootClientId } =
-		useSelect( blockEditorStore );
+	const {
+		getBlockAttributes,
+		getBlockRootClientId,
+		canInsertBlockType,
+		getBlockName,
+	} = useSelect( blockEditorStore );
 	const {
 		updateBlockAttributes,
 		moveBlocksToPosition,
@@ -221,6 +232,10 @@ function useGridVisualizerDropZone(
 
 	return useDropZoneWithValidation( {
 		validateDrag( srcClientId ) {
+			const blockName = getBlockName( srcClientId );
+			if ( ! canInsertBlockType( blockName, gridClientId ) ) {
+				return false;
+			}
 			const attributes = getBlockAttributes( srcClientId );
 			const rect = new GridRect( {
 				columnStart: column,
diff --git a/packages/block-editor/src/components/grid/style.scss b/packages/block-editor/src/components/grid/style.scss
index 32f0cfc0c62dc..3a04eb006e791 100644
--- a/packages/block-editor/src/components/grid/style.scss
+++ b/packages/block-editor/src/components/grid/style.scss
@@ -105,7 +105,6 @@
 	.block-editor-grid-item-mover-button {
 		width: $block-toolbar-height * 0.5;
 		min-width: 0 !important; // overrides default button width.
-		overflow: hidden;
 		padding-left: 0;
 		padding-right: 0;
 
@@ -118,7 +117,7 @@
 			content: "";
 			position: absolute;
 			display: block;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
 			height: $grid-unit-40;
 
 			// Position the focus rectangle.
@@ -155,7 +154,7 @@
 		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;
+			height: $block-toolbar-height * 0.5 - $grid-unit-05 !important; // overrides toolbar button height.
 			width: 100%;
 			min-width: 0 !important; // overrides default button width.
 
@@ -173,18 +172,53 @@
 	}
 }
 
+.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-button.block-editor-grid-item-mover-button.is-left-button {
-		border-right: 1px solid $gray-700;
-		padding-right: 12px;
-	}
+	.block-editor-grid-item-mover__move-horizontal-button-container {
+		position: relative;
 
-	.block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-right-button {
-		border-left: 1px solid $gray-700;
-		padding-left: 12px;
-	}
+		&::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 {
@@ -208,5 +242,21 @@
 		}
 	}
 
+	.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-grid-layout-sync.js b/packages/block-editor/src/components/grid/use-grid-layout-sync.js
index ed368714d63d3..3e31530d4e526 100644
--- a/packages/block-editor/src/components/grid/use-grid-layout-sync.js
+++ b/packages/block-editor/src/components/grid/use-grid-layout-sync.js
@@ -10,6 +10,7 @@ import { usePrevious } from '@wordpress/compose';
  */
 import { store as blockEditorStore } from '../../store';
 import { GridRect } from './utils';
+import { setImmutably } from '../../utils/object';
 
 export function useGridLayoutSync( { clientId: gridClientId } ) {
 	const { gridLayout, blockOrder, selectedBlockLayout } = useSelect(
@@ -26,7 +27,8 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 		[ gridClientId ]
 	);
 
-	const { getBlockAttributes } = useSelect( blockEditorStore );
+	const { getBlockAttributes, getBlockRootClientId } =
+		useSelect( blockEditorStore );
 	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
@@ -37,6 +39,10 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 	);
 
 	const previouslySelectedBlockRect = usePrevious( selectedBlockRect );
+	const previousIsManualPlacement = usePrevious(
+		gridLayout.isManualPlacement
+	);
+	const previousBlockOrder = usePrevious( blockOrder );
 
 	useEffect( () => {
 		const updates = {};
@@ -120,20 +126,65 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 					},
 				};
 			}
+
+			// Unset grid layout attributes for blocks removed from the grid.
+			for ( const clientId of previousBlockOrder ?? [] ) {
+				if ( ! blockOrder.includes( clientId ) ) {
+					const rootClientId = getBlockRootClientId( clientId );
+
+					// Block was removed from the editor, so nothing to do.
+					if ( rootClientId === null ) {
+						continue;
+					}
+
+					// Check if the block is being moved to another grid.
+					// If so, do nothing and let the new grid parent handle
+					// the attributes.
+					const rootAttributes = getBlockAttributes( rootClientId );
+					if ( rootAttributes?.layout?.type === 'grid' ) {
+						continue;
+					}
+
+					const attributes = getBlockAttributes( clientId );
+					const {
+						columnStart,
+						rowStart,
+						columnSpan,
+						rowSpan,
+						...layout
+					} = attributes.style?.layout ?? {};
+
+					if ( columnStart || rowStart || columnSpan || rowSpan ) {
+						const hasEmptyLayoutAttribute =
+							Object.keys( layout ).length === 0;
+
+						updates[ clientId ] = setImmutably(
+							attributes,
+							[ 'style', 'layout' ],
+							hasEmptyLayoutAttribute ? undefined : layout
+						);
+					}
+				}
+			}
 		} else {
-			// When in auto mode, remove all of the columnStart and rowStart values.
-			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 ) {
-					updates[ clientId ] = {
-						style: {
-							...attributes.style,
-							layout,
-						},
-					};
+			// 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
+						);
+					}
 				}
 			}
 
@@ -160,11 +211,14 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 		// Actual deps to sync:
 		gridClientId,
 		gridLayout,
+		previousBlockOrder,
 		blockOrder,
 		previouslySelectedBlockRect,
+		previousIsManualPlacement,
 		// These won't change, but the linter thinks they might:
 		__unstableMarkNextChangeAsNotPersistent,
 		getBlockAttributes,
+		getBlockRootClientId,
 		updateBlockAttributes,
 	] );
 }
diff --git a/packages/block-editor/src/components/height-control/index.js b/packages/block-editor/src/components/height-control/index.js
index 71753a67beb02..5d42e217776d6 100644
--- a/packages/block-editor/src/components/height-control/index.js
+++ b/packages/block-editor/src/components/height-control/index.js
@@ -164,6 +164,7 @@ export default function HeightControl( {
 				<FlexItem isBlock>
 					<Spacer marginX={ 2 } marginBottom={ 0 }>
 						<RangeControl
+							__next40pxDefaultSize
 							value={ customRangeValue }
 							min={ 0 }
 							max={
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index caae348a0ab76..90b887993bf6d 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -22,9 +22,9 @@
 }
 
 .block-editor-iframe__html {
+	border: 0 solid $gray-300;
 	transform-origin: top center;
-	transition: transform 0.3s;
-	@include reduce-motion("transition");
+	@include editor-canvas-resize-animation;
 }
 
 .block-editor-iframe__html.is-zoomed-out {
@@ -54,7 +54,7 @@
 		display: flex;
 		flex-direction: column;
 
-		> .is-root-container {
+		> .is-root-container:not(.wp-block-post-content) {
 			flex: 1;
 			display: flex;
 			flex-direction: column;
diff --git a/packages/block-editor/src/components/iframe/get-compatibility-styles.js b/packages/block-editor/src/components/iframe/get-compatibility-styles.js
index ab80e0e8eb43e..0eae82b11e01f 100644
--- a/packages/block-editor/src/components/iframe/get-compatibility-styles.js
+++ b/packages/block-editor/src/components/iframe/get-compatibility-styles.js
@@ -40,7 +40,12 @@ export function getCompatibilityStyles() {
 			// 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' ) {
+			if (
+				[
+					'wp-reset-editor-styles-css',
+					'wp-reset-editor-styles-rtl-css',
+				].includes( ownerNode.id )
+			) {
 				return accumulator;
 			}
 
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 669e2fe25a9fb..3e022cf95ae55 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -122,7 +122,7 @@ function Iframe( {
 	}, [] );
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
-	const prevContainerWidth = useRef();
+	const prevContainerWidthRef = useRef();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -243,7 +243,7 @@ function Iframe( {
 
 	useEffect( () => {
 		if ( ! isZoomedOut ) {
-			prevContainerWidth.current = containerWidth;
+			prevContainerWidthRef.current = containerWidth;
 		}
 	}, [ containerWidth, isZoomedOut ] );
 
@@ -305,12 +305,12 @@ function Iframe( {
 
 		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
 
-		const maxWidth = 800;
+		const maxWidth = 750;
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale',
 			scale === 'default'
 				? Math.min( containerWidth, maxWidth ) /
-						prevContainerWidth.current
+						prevContainerWidthRef.current
 				: scale
 		);
 		iframeDocument.documentElement.style.setProperty(
@@ -331,7 +331,7 @@ function Iframe( {
 		);
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-prev-container-width',
-			`${ prevContainerWidth.current }px`
+			`${ prevContainerWidthRef.current }px`
 		);
 
 		return () => {
@@ -378,10 +378,8 @@ function Iframe( {
 			<iframe
 				{ ...props }
 				style={ {
-					border: 0,
 					...props.style,
 					height: props.style?.height,
-					transition: 'all .3s',
 				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }
@@ -458,7 +456,7 @@ function Iframe( {
 					'--wp-block-editor-iframe-zoom-out-container-width':
 						isZoomedOut && `${ containerWidth }px`,
 					'--wp-block-editor-iframe-zoom-out-prev-container-width':
-						isZoomedOut && `${ prevContainerWidth.current }px`,
+						isZoomedOut && `${ prevContainerWidthRef.current }px`,
 				} }
 			>
 				{ iframe }
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 ff91a9794ca15..094ce1600545b 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
@@ -54,6 +54,13 @@ export default function useSaveImage( {
 			} );
 		}
 
+		if ( modifiers.length === 0 ) {
+			// No changes to apply.
+			setIsInProgress( false );
+			onFinishEditing();
+			return;
+		}
+
 		apiFetch( {
 			path: `/wp/v2/media/${ id }/edit`,
 			method: 'POST',
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 70baa28b2e112..5093b11feb6d8 100644
--- a/packages/block-editor/src/components/image-editor/zoom-dropdown.js
+++ b/packages/block-editor/src/components/image-editor/zoom-dropdown.js
@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarButton, RangeControl, Dropdown } from '@wordpress/components';
+import {
+	ToolbarButton,
+	RangeControl,
+	Dropdown,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { search } from '@wordpress/icons';
 
@@ -27,14 +32,17 @@ export default function ZoomDropdown() {
 				/>
 			) }
 			renderContent={ () => (
-				<RangeControl
-					__nextHasNoMarginBottom
-					label={ __( 'Zoom' ) }
-					min={ MIN_ZOOM }
-					max={ MAX_ZOOM }
-					value={ Math.round( zoom ) }
-					onChange={ setZoom }
-				/>
+				<DropdownContentWrapper paddingSize="medium">
+					<RangeControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Zoom' ) }
+						min={ MIN_ZOOM }
+						max={ MAX_ZOOM }
+						value={ Math.round( zoom ) }
+						onChange={ setZoom }
+					/>
+				</DropdownContentWrapper>
 			) }
 		/>
 	);
diff --git a/packages/block-editor/src/components/inner-blocks/button-block-appender.js b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
index 500e59863db42..5bc788d58582f 100644
--- a/packages/block-editor/src/components/inner-blocks/button-block-appender.js
+++ b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
@@ -7,15 +7,15 @@ import clsx from 'clsx';
  * Internal dependencies
  */
 import BaseButtonBlockAppender from '../button-block-appender';
-import withClientId from './with-client-id';
+import { useBlockEditContext } from '../block-edit/context';
 
-export const ButtonBlockAppender = ( {
-	clientId,
+export default function ButtonBlockAppender( {
 	showSeparator,
 	isFloating,
 	onAddBlock,
 	isToggle,
-} ) => {
+} ) {
+	const { clientId } = useBlockEditContext();
 	return (
 		<BaseButtonBlockAppender
 			className={ clsx( {
@@ -27,6 +27,4 @@ export const ButtonBlockAppender = ( {
 			onAddBlock={ onAddBlock }
 		/>
 	);
-};
-
-export default withClientId( ButtonBlockAppender );
+}
diff --git a/packages/block-editor/src/components/inner-blocks/content.scss b/packages/block-editor/src/components/inner-blocks/content.scss
deleted file mode 100644
index 05259ede35daa..0000000000000
--- a/packages/block-editor/src/components/inner-blocks/content.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/default-block-appender.js b/packages/block-editor/src/components/inner-blocks/default-block-appender.js
index d2e137004d83b..91e48a2854b51 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/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 27e5064eeb632..1583031a8ea18 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -195,38 +195,34 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		( select ) => {
 			const {
 				getBlockName,
-				isBlockSelected,
-				hasSelectedInnerBlock,
 				__unstableGetEditorMode,
 				getTemplateLock,
 				getBlockRootClientId,
 				getBlockEditingMode,
 				getBlockSettings,
-				isDragging,
-				getSettings,
+				getSectionRootClientId,
 			} = unlock( select( blockEditorStore ) );
 			let _isDropZoneDisabled;
-			// In zoom out mode, we want to disable the drop zone for the sections.
-			// The inner blocks belonging to the section drop zone is
-			// already disabled by the blocks themselves being disabled.
-			if ( __unstableGetEditorMode() === 'zoom-out' ) {
-				const { sectionRootClientId } = unlock( getSettings() );
-				_isDropZoneDisabled = clientId !== sectionRootClientId;
-			}
+
 			if ( ! clientId ) {
 				return { isDropZoneDisabled: _isDropZoneDisabled };
 			}
 
 			const { hasBlockSupport, getBlockType } = select( blocksStore );
 			const blockName = getBlockName( clientId );
-			const enableClickThrough =
-				__unstableGetEditorMode() === 'navigation';
 			const blockEditingMode = getBlockEditingMode( clientId );
 			const parentClientId = getBlockRootClientId( clientId );
 			const [ defaultLayout ] = getBlockSettings( clientId, 'layout' );
 
-			if ( _isDropZoneDisabled !== undefined ) {
-				_isDropZoneDisabled = blockEditingMode === 'disabled';
+			_isDropZoneDisabled = blockEditingMode === 'disabled';
+
+			if ( __unstableGetEditorMode() === 'zoom-out' ) {
+				// In zoom out mode, we want to disable the drop zone for the sections.
+				// The inner blocks belonging to the section drop zone is
+				// already disabled by the blocks themselves being disabled.
+				const sectionRootClientId = getSectionRootClientId();
+
+				_isDropZoneDisabled = clientId !== sectionRootClientId;
 			}
 
 			return {
@@ -235,12 +231,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 					'__experimentalExposeControlsToChildren',
 					false
 				),
-				hasOverlay:
-					blockName !== 'core/template' &&
-					! isBlockSelected( clientId ) &&
-					! hasSelectedInnerBlock( clientId, true ) &&
-					enableClickThrough &&
-					! isDragging(),
 				name: blockName,
 				blockType: getBlockType( blockName ),
 				parentLock: getTemplateLock( parentClientId ),
@@ -253,7 +243,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	);
 	const {
 		__experimentalCaptureToolbars,
-		hasOverlay,
 		name,
 		blockType,
 		parentLock,
@@ -298,10 +287,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		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/use-inner-block-template-sync.js b/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js
index 020b391039a01..fd801779372aa 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
@@ -52,7 +52,7 @@ export default function useInnerBlockTemplateSync(
 		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;
@@ -76,14 +76,14 @@ export default function useInnerBlockTemplateSync(
 
 			const hasTemplateChanged = ! fastDeepEqual(
 				template,
-				existingTemplate.current
+				existingTemplateRef.current
 			);
 
 			if ( ! shouldApplyTemplate || ! hasTemplateChanged ) {
 				return;
 			}
 
-			existingTemplate.current = template;
+			existingTemplateRef.current = template;
 			const nextBlocks = synchronizeBlocksWithTemplate(
 				currentInnerBlocks,
 				template
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 97c73ae280393..0000000000000
--- 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/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
index 4a0ef102e84b0..c5bf211070262 100644
--- a/packages/block-editor/src/components/inserter-list-item/index.js
+++ b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -32,7 +32,7 @@ function InserterListItem( {
 	isDraggable,
 	...props
 } ) {
-	const isDragging = useRef( false );
+	const isDraggingRef = useRef( false );
 	const itemIconStyle = item.icon
 		? {
 				backgroundColor: item.icon.background,
@@ -70,14 +70,14 @@ function InserterListItem( {
 					) }
 					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 );
 						}
@@ -110,7 +110,7 @@ function InserterListItem( {
 							}
 						} }
 						onMouseEnter={ () => {
-							if ( isDragging.current ) {
+							if ( isDraggingRef.current ) {
 								return;
 							}
 							onHover( item );
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 fb15113400522..435f60ed9e2f1 100644
--- a/packages/block-editor/src/components/inserter-list-item/style.scss
+++ b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -43,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;
@@ -72,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.
@@ -97,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");
@@ -120,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 6af26a1d746bf..bc833b0e4c36b 100644
--- a/packages/block-editor/src/components/inserter-listbox/index.js
+++ b/packages/block-editor/src/components/inserter-listbox/index.js
@@ -1,28 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { Composite } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
 
 export { default as InserterListboxGroup } from './group';
 export { default as InserterListboxRow } from './row';
 export { default as InserterListboxItem } from './item';
 
-const { CompositeV2: Composite, useCompositeStoreV2: useCompositeStore } =
-	unlock( componentsPrivateApis );
-
 function InserterListbox( { children } ) {
-	const store = useCompositeStore( {
-		focusShift: true,
-		focusWrap: 'horizontal',
-	} );
-
 	return (
-		<Composite store={ store } render={ <></> }>
+		<Composite focusShift focusWrap="horizontal" render={ <></> }>
 			{ children }
 		</Composite>
 	);
diff --git a/packages/block-editor/src/components/inserter-listbox/item.js b/packages/block-editor/src/components/inserter-listbox/item.js
index 951eb86223ce8..06c266d793d2f 100644
--- a/packages/block-editor/src/components/inserter-listbox/item.js
+++ b/packages/block-editor/src/components/inserter-listbox/item.js
@@ -1,28 +1,18 @@
 /**
  * WordPress dependencies
  */
-import {
-	Button,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { Button, Composite } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { CompositeItemV2: CompositeItem } = unlock( componentsPrivateApis );
-
 function InserterListboxItem(
 	{ isFirst, as: Component, children, ...props },
 	ref
 ) {
 	return (
-		<CompositeItem
+		<Composite.Item
 			ref={ ref }
 			role="option"
-			// Use the CompositeItem `accessibleWhenDisabled` prop
+			// 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
@@ -42,7 +32,11 @@ function InserterListboxItem(
 				if ( typeof children === 'function' ) {
 					return children( propsWithTabIndex );
 				}
-				return <Button { ...propsWithTabIndex }>{ children }</Button>;
+				return (
+					<Button __next40pxDefaultSize { ...propsWithTabIndex }>
+						{ children }
+					</Button>
+				);
 			} }
 		/>
 	);
diff --git a/packages/block-editor/src/components/inserter-listbox/row.js b/packages/block-editor/src/components/inserter-listbox/row.js
index f9827f08b3fa3..bafdbf8f5593c 100644
--- a/packages/block-editor/src/components/inserter-listbox/row.js
+++ b/packages/block-editor/src/components/inserter-listbox/row.js
@@ -2,17 +2,10 @@
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { CompositeGroupV2: CompositeGroup } = unlock( componentsPrivateApis );
+import { Composite } from '@wordpress/components';
 
 function InserterListboxRow( props, ref ) {
-	return <CompositeGroup 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/pattern-explorer-sidebar.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js
index bc5e4d37ab2c2..d258c24da10cf 100644
--- 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
@@ -15,6 +15,7 @@ function PatternCategoriesList( {
 			{ patternCategories.map( ( { name, label } ) => {
 				return (
 					<Button
+						__next40pxDefaultSize
 						key={ name }
 						label={ label }
 						className={ `${ baseClassName }__categories-list__item` }
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
index 65b477d09069f..141ebf8cc8401 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
@@ -61,6 +61,7 @@ function BlockPatternsTab( {
 						{ children }
 					</CategoryTabs>
 					<Button
+						__next40pxDefaultSize
 						className="block-editor-inserter__patterns-explore-button"
 						onClick={ () => setShowPatternsExplorer( true ) }
 						variant="secondary"
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js
deleted file mode 100644
index 505f8d1486372..0000000000000
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Internal dependencies
- */
-import { PatternCategoryPreviews } from './pattern-category-previews';
-
-export function PatternCategoryPreviewPanel( {
-	rootClientId,
-	onInsert,
-	onHover,
-	category,
-	showTitlesAsTooltip,
-	patternFilter,
-} ) {
-	return (
-		<PatternCategoryPreviews
-			key={ category.name }
-			rootClientId={ rootClientId }
-			onInsert={ onInsert }
-			onHover={ onHover }
-			category={ category }
-			showTitlesAsTooltip={ showTitlesAsTooltip }
-			patternFilter={ patternFilter }
-		/>
-	);
-}
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
index 3703381b23a14..61716f616dafa 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
@@ -17,6 +17,7 @@ import {
 	__experimentalText as Text,
 	FlexBlock,
 } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -32,6 +33,7 @@ import {
 	myPatternsCategory,
 	INSERTER_PATTERN_TYPES,
 } from './utils';
+import { store as blockEditorStore } from '../../../store';
 
 const noop = () => {};
 
@@ -42,6 +44,11 @@ export function PatternCategoryPreviews( {
 	category,
 	showTitlesAsTooltip,
 } ) {
+	const isZoomOutMode = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
+		[]
+	);
 	const [ allPatterns, , onClickPattern ] = usePatternsState(
 		onInsert,
 		rootClientId,
@@ -163,22 +170,32 @@ export function PatternCategoryPreviews( {
 					</Text>
 				) }
 			</VStack>
-
 			{ currentCategoryPatterns.length > 0 && (
-				<BlockPatternsList
-					ref={ scrollContainerRef }
-					shownPatterns={ pagingProps.categoryPatternsAsyncList }
-					blockPatterns={ pagingProps.categoryPatterns }
-					onClickPattern={ onClickPattern }
-					onHover={ onHover }
-					label={ category.label }
-					orientation="vertical"
-					category={ category.name }
-					isDraggable
-					showTitlesAsTooltip={ showTitlesAsTooltip }
-					patternFilter={ patternSourceFilter }
-					pagingProps={ pagingProps }
-				/>
+				<>
+					{ isZoomOutMode && (
+						<Text
+							size="12"
+							as="p"
+							className="block-editor-inserter__help-text"
+						>
+							{ __( 'Drag and drop patterns into the canvas.' ) }
+						</Text>
+					) }
+					<BlockPatternsList
+						ref={ scrollContainerRef }
+						shownPatterns={ pagingProps.categoryPatternsAsyncList }
+						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
index 9e57f00b6b466..fd7458a52bf33 100644
--- 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
@@ -22,11 +22,31 @@ import {
 	INSERTER_PATTERN_TYPES,
 } from './utils';
 
-const getShouldDisableSyncFilter = ( sourceFilter ) => sourceFilter !== 'all';
-const getShouldDisableNonUserSources = ( category ) => {
+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,
@@ -50,10 +70,9 @@ export function PatternsFilter( {
 		currentPatternSourceFilter
 	);
 
-	// We also need to disable the directory and theme source filter options if the category
-	// is `myPatterns` otherwise applying them will also just result in no patterns being shown.
-	const shouldDisableNonUserSources =
-		getShouldDisableNonUserSources( category );
+	// 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(
 		() => [
@@ -75,31 +94,6 @@ export function PatternsFilter( {
 		[ shouldDisableSyncFilter ]
 	);
 
-	const patternSourceMenuOptions = useMemo(
-		() => [
-			{
-				value: 'all',
-				label: _x( 'All', 'patterns' ),
-				disabled: shouldDisableNonUserSources,
-			},
-			{
-				value: INSERTER_PATTERN_TYPES.directory,
-				label: __( 'Pattern Directory' ),
-				disabled: shouldDisableNonUserSources,
-			},
-			{
-				value: INSERTER_PATTERN_TYPES.theme,
-				label: __( 'Theme & Plugins' ),
-				disabled: shouldDisableNonUserSources,
-			},
-			{
-				value: INSERTER_PATTERN_TYPES.user,
-				label: __( 'User' ),
-			},
-		],
-		[ shouldDisableNonUserSources ]
-	);
-
 	function handleSetSourceFilterChange( newSourceFilter ) {
 		setPatternSourceFilter( newSourceFilter );
 		if ( getShouldDisableSyncFilter( newSourceFilter ) ) {
@@ -136,19 +130,21 @@ export function PatternsFilter( {
 			>
 				{ () => (
 					<>
-						<MenuGroup label={ __( 'Source' ) }>
-							<MenuItemsChoice
-								choices={ patternSourceMenuOptions }
-								onSelect={ ( value ) => {
-									handleSetSourceFilterChange( value );
-									scrollContainerRef.current?.scrollTo(
-										0,
-										0
-									);
-								} }
-								value={ currentPatternSourceFilter }
-							/>
-						</MenuGroup>
+						{ ! 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 }
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 50a8b46b46427..844d5dd341437 100644
--- a/packages/block-editor/src/components/inserter/block-types-tab.js
+++ b/packages/block-editor/src/components/inserter/block-types-tab.js
@@ -186,7 +186,7 @@ export function BlockTypesTab(
 			continue;
 		}
 
-		if ( rootClientId && item.rootClientId === rootClientId ) {
+		if ( rootClientId && item.isAllowedInCurrentRoot ) {
 			itemsForCurrentRoot.push( item );
 		} else {
 			itemsRemaining.push( item );
diff --git a/packages/block-editor/src/components/inserter/category-tabs/index.js b/packages/block-editor/src/components/inserter/category-tabs/index.js
index a379f4719556b..6a02cf1a170c4 100644
--- a/packages/block-editor/src/components/inserter/category-tabs/index.js
+++ b/packages/block-editor/src/components/inserter/category-tabs/index.js
@@ -1,11 +1,13 @@
 /**
  * WordPress dependencies
  */
+import { usePrevious, useReducedMotion } from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
 import {
 	__experimentalHStack as HStack,
 	FlexBlock,
 	privateApis as componentsPrivateApis,
+	__unstableMotion as motion,
 } from '@wordpress/components';
 import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 
@@ -22,6 +24,17 @@ function CategoryTabs( {
 	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 );
+
 	return (
 		<Tabs
 			className="block-editor-inserter__category-tabs"
@@ -62,9 +75,29 @@ function CategoryTabs( {
 					key={ category.name }
 					tabId={ category.name }
 					focusable={ false }
-					className="block-editor-inserter__category-panel"
 				>
-					{ children }
+					<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>
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 8db23267eee8f..6f11060c75c49 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,19 +2,23 @@
  * WordPress dependencies
  */
 import {
+	getBlockType,
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
 	store as blocksStore,
 	parse,
 } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
+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 { withRootClientIdOptionKey } from '../../../store/utils';
+import { isFiltered } from '../../../store/utils';
+import { unlock } from '../../../lock-unlock';
 
 /**
  * Retrieves the block types inserter state.
@@ -26,7 +30,7 @@ import { withRootClientIdOptionKey } from '../../../store/utils';
  */
 const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 	const options = useMemo(
-		() => ( { [ withRootClientIdOptionKey ]: ! isQuick } ),
+		() => ( { [ isFiltered ]: !! isQuick } ),
 		[ isQuick ]
 	);
 	const [ items ] = useSelect(
@@ -38,6 +42,10 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 		],
 		[ rootClientId, options ]
 	);
+	const { getClosestAllowedInsertionPoint } = unlock(
+		useSelect( blockEditorStore )
+	);
+	const { createErrorNotice } = useDispatch( noticesStore );
 
 	const [ categories, collections ] = useSelect( ( select ) => {
 		const { getCategories, getCollections } = select( blocksStore );
@@ -46,16 +54,29 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 
 	const onSelectItem = useCallback(
 		(
-			{
-				name,
-				initialAttributes,
-				innerBlocks,
-				syncStatus,
-				content,
-				rootClientId: _rootClientId,
-			},
+			{ name, initialAttributes, innerBlocks, syncStatus, content },
 			shouldFocusBlock
 		) => {
+			const destinationClientId = getClosestAllowedInsertionPoint(
+				name,
+				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;
+			}
+
 			const insertedBlock =
 				syncStatus === 'unsynced'
 					? parse( content, {
@@ -66,15 +87,14 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 							initialAttributes,
 							createBlocksFromInnerBlocksTemplate( innerBlocks )
 					  );
-
 			onInsert(
 				insertedBlock,
 				undefined,
 				shouldFocusBlock,
-				_rootClientId
+				destinationClientId
 			);
 		},
-		[ onInsert ]
+		[ onInsert, getClosestAllowedInsertionPoint, rootClientId ]
 	);
 
 	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 24074ec500456..de814152c620b 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
@@ -71,7 +71,11 @@ function useInsertionPoint( {
 	selectBlockOnInsert = true,
 } ) {
 	const registry = useRegistry();
-	const { getSelectedBlock } = useSelect( blockEditorStore );
+	const {
+		getSelectedBlock,
+		getClosestAllowedInsertionPoint,
+		isBlockInsertionPointVisible,
+	} = unlock( useSelect( blockEditorStore ) );
 	const { destinationRootClientId, destinationIndex } = useSelect(
 		( select ) => {
 			const {
@@ -79,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 );
@@ -193,21 +206,30 @@ function useInsertionPoint( {
 
 	const onToggleInsertionPoint = useCallback(
 		( item ) => {
-			if ( item?.hasOwnProperty( 'rootClientId' ) ) {
-				showInsertionPoint(
-					item.rootClientId,
-					getIndex( {
-						destinationRootClientId,
-						destinationIndex,
-						rootClientId: item.rootClientId,
-						registry,
-					} )
-				);
+			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-state.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
index 6483dc58ae8b9..91b34c0ec72c3 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
@@ -11,33 +11,52 @@ 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 {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, selectedCategory ) => {
+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 ),
+				patterns: __experimentalGetAllowedPatterns(
+					rootClientId,
+					options
+				),
 				userPatternCategories: __experimentalUserPatternCategories,
 				patternCategories: __experimentalBlockPatternCategories,
 			};
 		},
-		[ rootClientId ]
+		[ rootClientId, options ]
+	);
+	const { getClosestAllowedInsertionPointForPattern } = unlock(
+		useSelect( blockEditorStore )
 	);
 
 	const allCategories = useMemo( () => {
@@ -58,6 +77,15 @@ const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => {
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	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'
@@ -77,7 +105,9 @@ const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => {
 					}
 					return clonedBlock;
 				} ),
-				pattern.name
+				pattern.name,
+				false,
+				destinationRootClientId
 			);
 			createSuccessNotice(
 				sprintf(
@@ -87,11 +117,18 @@ const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => {
 				),
 				{
 					type: 'snackbar',
-					id: 'block-pattern-inserted-notice',
+					id: 'inserter-notice',
 				}
 			);
 		},
-		[ createSuccessNotice, onInsert, selectedCategory ]
+		[
+			createSuccessNotice,
+			onInsert,
+			selectedCategory,
+			rootClientId,
+			getClosestAllowedInsertionPointForPattern,
+			isQuick,
+		]
 	);
 
 	return [ patterns, allCategories, onClickPattern ];
diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
index d3e7dba0df683..1af81d0231a1a 100644
--- a/packages/block-editor/src/components/inserter/index.js
+++ b/packages/block-editor/src/components/inserter/index.js
@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { speak } from '@wordpress/a11y';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { Dropdown, Button } from '@wordpress/components';
-import { forwardRef, Component } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, ifCondition } from '@wordpress/compose';
 import { createBlock, store as blocksStore } from '@wordpress/blocks';
@@ -76,7 +76,7 @@ const defaultRenderToggle = ( {
 	);
 };
 
-class PrivateInserter extends Component {
+class Inserter extends Component {
 	constructor() {
 		super( ...arguments );
 
@@ -222,7 +222,7 @@ class PrivateInserter extends Component {
 	}
 }
 
-export const ComposedPrivateInserter = compose( [
+export default compose( [
 	withSelect(
 		( select, { clientId, rootClientId, shouldDirectInsert = true } ) => {
 			const {
@@ -418,10 +418,4 @@ export const ComposedPrivateInserter = compose( [
 		( { hasItems, isAppender, rootClientId, clientId } ) =>
 			hasItems || ( ! isAppender && ! rootClientId && ! clientId )
 	),
-] )( PrivateInserter );
-
-const Inserter = forwardRef( ( props, ref ) => {
-	return <ComposedPrivateInserter ref={ ref } { ...props } />;
-} );
-
-export default Inserter;
+] )( Inserter );
diff --git a/packages/block-editor/src/components/inserter/media-tab/hooks.js b/packages/block-editor/src/components/inserter/media-tab/hooks.js
index 3a4c8fa9da7df..694b321832422 100644
--- a/packages/block-editor/src/components/inserter/media-tab/hooks.js
+++ b/packages/block-editor/src/components/inserter/media-tab/hooks.js
@@ -31,18 +31,18 @@ export function useMediaResults( category, query = {} ) {
 	// 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 lastRequest = useRef();
+	const lastRequestRef = useRef();
 	useEffect( () => {
 		( async () => {
 			const key = JSON.stringify( {
 				category: category.name,
 				...query,
 			} );
-			lastRequest.current = key;
+			lastRequestRef.current = key;
 			setIsLoading( true );
 			setMediaList( [] ); // Empty the previous results.
 			const _media = await category.fetch?.( query );
-			if ( key === lastRequest.current ) {
+			if ( key === lastRequestRef.current ) {
 				setMediaList( _media );
 				setIsLoading( false );
 			}
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
index bfc858bc8c4de..73f38cfc306fb 100644
--- a/packages/block-editor/src/components/inserter/media-tab/media-list.js
+++ b/packages/block-editor/src/components/inserter/media-tab/media-list.js
@@ -1,17 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { Composite } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { MediaPreview } from './media-preview';
-import { unlock } from '../../../lock-unlock';
-
-const { CompositeV2: Composite, useCompositeStoreV2: useCompositeStore } =
-	unlock( componentsPrivateApis );
 
 function MediaList( {
 	mediaList,
@@ -19,10 +15,8 @@ function MediaList( {
 	onClick,
 	label = __( 'Media List' ),
 } ) {
-	const compositeStore = useCompositeStore();
 	return (
 		<Composite
-			store={ compositeStore }
 			role="listbox"
 			className="block-editor-inserter__media-list"
 			aria-label={ label }
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
index 816cc9373ea08..319c25c01831c 100644
--- a/packages/block-editor/src/components/inserter/media-tab/media-preview.js
+++ b/packages/block-editor/src/components/inserter/media-tab/media-preview.js
@@ -16,7 +16,7 @@ import {
 	Flex,
 	FlexItem,
 	Button,
-	privateApis as componentsPrivateApis,
+	Composite,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
@@ -26,6 +26,7 @@ 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
@@ -33,7 +34,6 @@ import { isBlobURL } from '@wordpress/blob';
 import InserterDraggableBlocks from '../../inserter-draggable-blocks';
 import { getBlockAndPreviewFromMedia } from './utils';
 import { store as blockEditorStore } from '../../../store';
-import { unlock } from '../../../lock-unlock';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const MAXIMUM_TITLE_LENGTH = 25;
@@ -43,8 +43,6 @@ const MEDIA_OPTIONS_POPOVER_PROPS = {
 		'block-editor-inserter__media-list__item-preview-options__popover',
 };
 
-const { CompositeItemV2: CompositeItem } = unlock( componentsPrivateApis );
-
 function MediaPreviewOptions( { category, media } ) {
 	if ( ! category.getReportUrl ) {
 		return null;
@@ -102,12 +100,20 @@ function InsertExternalImageModal( { onClose, onSubmit } ) {
 				expanded={ false }
 			>
 				<FlexItem>
-					<Button variant="tertiary" onClick={ onClose }>
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ onClose }
+					>
 						{ __( 'Cancel' ) }
 					</Button>
 				</FlexItem>
 				<FlexItem>
-					<Button variant="primary" onClick={ onSubmit }>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						onClick={ onSubmit }
+					>
 						{ __( 'Insert' ) }
 					</Button>
 				</FlexItem>
@@ -127,7 +133,8 @@ export function MediaPreview( { media, onClick, category } ) {
 	);
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
-	const { getSettings } = useSelect( blockEditorStore );
+	const { getSettings, getBlock } = useSelect( blockEditorStore );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	const onMediaInsert = useCallback(
 		( previewBlock ) => {
@@ -162,30 +169,51 @@ export function MediaPreview( { media, onClick, category } ) {
 				.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: [ blob ],
+						filesList: [ file ],
 						additionalData: { caption },
 						onFileChange( [ img ] ) {
 							if ( isBlobURL( img.url ) ) {
 								return;
 							}
-							onClick( {
-								...clonedBlock,
-								attributes: {
+
+							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,
-								},
-							} );
-							createSuccessNotice(
-								__( 'Image uploaded and inserted.' ),
-								{ type: 'snackbar' }
-							);
+								} );
+							}
+
 							setIsInserting( false );
 						},
 						allowedTypes: ALLOWED_MEDIA_TYPES,
 						onError( message ) {
-							createErrorNotice( message, { type: 'snackbar' } );
+							createErrorNotice( message, {
+								type: 'snackbar',
+								id: 'inserter-notice',
+							} );
 							setIsInserting( false );
 						},
 					} );
@@ -200,7 +228,9 @@ export function MediaPreview( { media, onClick, category } ) {
 			getSettings,
 			onClick,
 			createSuccessNotice,
+			updateBlockAttributes,
 			createErrorNotice,
+			getBlock,
 		]
 	);
 
@@ -239,7 +269,7 @@ export function MediaPreview( { media, onClick, category } ) {
 							onMouseLeave={ onMouseLeave }
 						>
 							<Tooltip text={ truncatedTitle || title }>
-								<CompositeItem
+								<Composite.Item
 									render={
 										<div
 											aria-label={ title }
@@ -257,7 +287,7 @@ export function MediaPreview( { media, onClick, category } ) {
 											</div>
 										) }
 									</div>
-								</CompositeItem>
+								</Composite.Item>
 							</Tooltip>
 							{ ! isInserting && (
 								<MediaPreviewOptions
@@ -276,6 +306,7 @@ export function MediaPreview( { media, onClick, category } ) {
 						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
index 2f3985aef569c..ca901a127e5b4 100644
--- a/packages/block-editor/src/components/inserter/media-tab/media-tab.js
+++ b/packages/block-editor/src/components/inserter/media-tab/media-tab.js
@@ -71,6 +71,7 @@ function MediaTab( {
 							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.
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 17a9857084301..4bc26196cb524 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -26,13 +26,12 @@ import Tips from './tips';
 import InserterPreviewPanel from './preview-panel';
 import BlockTypesTab from './block-types-tab';
 import BlockPatternsTab from './block-patterns-tab';
-import { PatternCategoryPreviewPanel } from './block-patterns-tab/pattern-category-preview-panel';
+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 { store as blockEditorStore } from '../../store';
 import TabbedSidebar from '../tabbed-sidebar';
-import { useZoomOut } from '../../hooks/use-zoom-out';
 
 const NOOP = () => {};
 function InserterMenu(
@@ -67,9 +66,16 @@ function InserterMenu(
 	const [ patternFilter, setPatternFilter ] = useState( 'all' );
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
-	const [ selectedTab, setSelectedTab ] = useState(
-		__experimentalInitialTab
-	);
+	function getInitialTab() {
+		if ( __experimentalInitialTab ) {
+			return __experimentalInitialTab;
+		}
+
+		if ( isZoomOutMode ) {
+			return 'patterns';
+		}
+	}
+	const [ selectedTab, setSelectedTab ] = useState( getInitialTab() );
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {
@@ -95,12 +101,12 @@ function InserterMenu(
 			window.requestAnimationFrame( () => {
 				if (
 					! shouldFocusBlock &&
-					! blockTypesTabRef?.current.contains(
+					! 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();
+					blockTypesTabRef.current?.querySelector( 'button' ).focus();
 				}
 			} );
 		},
@@ -108,8 +114,9 @@ function InserterMenu(
 	);
 
 	const onInsertPattern = useCallback(
-		( blocks, patternName ) => {
-			onInsertBlocks( blocks, { patternName } );
+		( blocks, patternName, ...args ) => {
+			onToggleInsertionPoint( false );
+			onInsertBlocks( blocks, { patternName }, ...args );
 			onSelect();
 		},
 		[ onInsertBlocks, onSelect ]
@@ -123,13 +130,6 @@ function InserterMenu(
 		[ onToggleInsertionPoint, setHoveredItem ]
 	);
 
-	const onHoverPattern = useCallback(
-		( item ) => {
-			onToggleInsertionPoint( !! item );
-		},
-		[ onToggleInsertionPoint ]
-	);
-
 	const onClickPatternCategory = useCallback(
 		( patternCategory, filter ) => {
 			setSelectedPatternCategory( patternCategory );
@@ -146,11 +146,6 @@ function InserterMenu(
 
 	const showMediaPanel = selectedTab === 'media' && !! selectedMediaCategory;
 
-	const showZoomOut =
-		showPatternPanel && !! window.__experimentalEnableZoomedOutPatternsTab;
-
-	useZoomOut( showZoomOut );
-
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {
 			return null;
@@ -176,7 +171,6 @@ function InserterMenu(
 						filterValue={ delayedFilterValue }
 						onSelect={ onSelect }
 						onHover={ onHover }
-						onHoverPattern={ onHoverPattern }
 						rootClientId={ rootClientId }
 						clientId={ clientId }
 						isAppender={ isAppender }
@@ -199,7 +193,6 @@ function InserterMenu(
 		delayedFilterValue,
 		onSelect,
 		onHover,
-		onHoverPattern,
 		shouldFocusBlock,
 		clientId,
 		rootClientId,
@@ -246,10 +239,9 @@ function InserterMenu(
 				selectedCategory={ selectedPatternCategory }
 			>
 				{ showPatternPanel && (
-					<PatternCategoryPreviewPanel
+					<PatternCategoryPreviews
 						rootClientId={ destinationRootClientId }
 						onInsert={ onInsertPattern }
-						onHover={ onHoverPattern }
 						category={ selectedPatternCategory }
 						patternFilter={ patternFilter }
 						showTitlesAsTooltip
@@ -259,7 +251,6 @@ function InserterMenu(
 		);
 	}, [
 		destinationRootClientId,
-		onHoverPattern,
 		onInsertPattern,
 		onClickPatternCategory,
 		patternFilter,
diff --git a/packages/block-editor/src/components/inserter/mobile-tab-navigation.js b/packages/block-editor/src/components/inserter/mobile-tab-navigation.js
index fa8191cc5eaaa..5f34c3c21d832 100644
--- a/packages/block-editor/src/components/inserter/mobile-tab-navigation.js
+++ b/packages/block-editor/src/components/inserter/mobile-tab-navigation.js
@@ -10,10 +10,7 @@ import {
 	__experimentalSpacer as Spacer,
 	__experimentalHeading as Heading,
 	__experimentalView as View,
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
+	Navigator,
 	FlexBlock,
 } from '@wordpress/components';
 import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
@@ -24,7 +21,7 @@ function ScreenHeader( { title } ) {
 			<View>
 				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
 					<HStack spacing={ 2 }>
-						<NavigatorBackButton
+						<Navigator.BackButton
 							style={
 								// TODO: This style override is also used in ToolsPanelHeader.
 								// It should be supported out-of-the-box by Button.
@@ -46,14 +43,14 @@ function ScreenHeader( { title } ) {
 
 export default function MobileTabNavigation( { categories, children } ) {
 	return (
-		<NavigatorProvider
+		<Navigator
 			initialPath="/"
 			className="block-editor-inserter__mobile-tab-navigation"
 		>
-			<NavigatorScreen path="/">
+			<Navigator.Screen path="/">
 				<ItemGroup>
 					{ categories.map( ( category ) => (
-						<NavigatorButton
+						<Navigator.Button
 							key={ category.name }
 							path={ `/category/${ category.name }` }
 							as={ Item }
@@ -67,19 +64,19 @@ export default function MobileTabNavigation( { categories, children } ) {
 									}
 								/>
 							</HStack>
-						</NavigatorButton>
+						</Navigator.Button>
 					) ) }
 				</ItemGroup>
-			</NavigatorScreen>
+			</Navigator.Screen>
 			{ categories.map( ( category ) => (
-				<NavigatorScreen
+				<Navigator.Screen
 					key={ category.name }
 					path={ `/category/${ category.name }` }
 				>
 					<ScreenHeader title={ __( 'Back' ) } />
 					{ children( category ) }
-				</NavigatorScreen>
+				</Navigator.Screen>
 			) ) }
-		</NavigatorProvider>
+		</Navigator>
 	);
 }
diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
index aa3d54e87a7fd..7c7f836842b41 100644
--- a/packages/block-editor/src/components/inserter/quick-inserter.js
+++ b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -47,10 +47,11 @@ export default function QuickInserter( {
 		onInsertBlocks,
 		true
 	);
-
 	const [ patterns ] = usePatternsState(
 		onInsertBlocks,
-		destinationRootClientId
+		destinationRootClientId,
+		undefined,
+		true
 	);
 
 	const { setInserterIsOpened, insertionIndex } = useSelect(
@@ -86,10 +87,10 @@ export default function QuickInserter( {
 	// the insertion point can work as expected.
 	const onBrowseAll = () => {
 		setInserterIsOpened( {
-			rootClientId,
-			insertionIndex,
 			filterValue,
 			onSelect,
+			rootClientId,
+			insertionIndex,
 		} );
 	};
 
@@ -138,6 +139,7 @@ export default function QuickInserter( {
 
 			{ setInserterIsOpened && (
 				<Button
+					__next40pxDefaultSize
 					className="block-editor-inserter__quick-inserter-expand"
 					onClick={ onBrowseAll }
 					aria-label={ __(
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index c7398aadb56ba..f3fa8d1e7df04 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 {
@@ -24,13 +24,19 @@ $block-inserter-tabs-height: 44px;
 	&.show-as-tabs {
 		gap: 0;
 	}
+
+	.block-editor-tabbed-sidebar {
+		@include break-medium() {
+			width: $secondary-sidebar-width;
+		}
+	}
 }
 
 .block-editor-inserter__popover.is-quick {
 	.components-popover__content {
 		border: none;
 		outline: none;
-		box-shadow: $shadow-popover;
+		box-shadow: $elevation-x-small;
 
 		.block-editor-inserter__quick-inserter > * {
 			border-left: $border-width solid $gray-400;
@@ -38,12 +44,12 @@ $block-inserter-tabs-height: 44px;
 
 			&:first-child {
 				border-top: $border-width solid $gray-400;
-				border-radius: $radius-block-ui $radius-block-ui 0 0;
+				border-radius: $radius-medium $radius-medium 0 0;
 			}
 
 			&:last-child {
 				border-bottom: $border-width solid $gray-400;
-				border-radius: 0 0 $radius-block-ui $radius-block-ui;
+				border-radius: 0 0 $radius-medium $radius-medium;
 			}
 
 			&.components-button {
@@ -85,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 {
@@ -143,15 +155,6 @@ $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__patterns-loading {
 	padding: $grid-unit-40;
@@ -254,39 +257,11 @@ $block-inserter-tabs-height: 44px;
 			svg {
 				fill: var(--wp-admin-theme-color);
 			}
-
-			&::after {
-				content: "";
-				display: block;
-				outline: none;
-				position: absolute;
-				top: 0;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				border-radius: $radius-block-ui;
-				opacity: 0.04;
-				background: var(--wp-admin-theme-color);
-				height: 100%;
-			}
-		}
-
-		&:focus-visible,
-		&:focus:not(:disabled) {
-			border-radius: 2px;
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			// Windows high contrast mode.
-			outline: 2px solid transparent;
-			outline-offset: 0;
 		}
 
 		&::before {
 			display: none;
 		}
-
-		&::after {
-			display: none;
-		}
 	}
 }
 
@@ -299,14 +274,13 @@ $block-inserter-tabs-height: 44px;
 	@include break-medium {
 		border-left: $border-width solid $gray-200;
 		padding: 0;
-		left: 100%;
-		width: 300px;
+		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;
-		box-shadow: $border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
 
 		.block-editor-inserter__media-list,
 		.block-editor-block-patterns-list {
@@ -348,7 +322,7 @@ $block-inserter-tabs-height: 44px;
 	min-height: $grid-unit-60 * 3;
 	color: $gray-700;
 	background: $gray-100;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 }
 
 .block-editor-inserter__tips {
@@ -366,7 +340,7 @@ $block-inserter-tabs-height: 44px;
 	max-width: 100%;
 
 	@include break-medium {
-		width: $block-inserter-width;
+		width: $block-quick-inserter-width;
 	}
 }
 
@@ -408,7 +382,6 @@ $block-inserter-tabs-height: 44px;
 	background: $gray-900;
 	color: $white;
 	width: 100%;
-	height: ($button-size + $grid-unit-10);
 	border-radius: 0;
 
 	&:hover {
@@ -566,7 +539,6 @@ $block-inserter-tabs-height: 44px;
 
 		> button {
 			background: $white;
-			border-radius: $radius-block-ui;
 			display: none;
 
 			// These styles are important so as focus isn't lost
@@ -593,14 +565,13 @@ $block-inserter-tabs-height: 44px;
 		display: flex;
 		align-items: center;
 		overflow: hidden;
-		border-radius: 2px;
+		border-radius: $radius-small;
 
 		> * {
 			margin: 0 auto;
 			max-width: 100%;
 			outline: $border-width solid rgba($black, 0.1);
 			outline-offset: -$border-width;
-			border-radius: $radius-block-ui;
 		}
 
 		.block-editor-inserter__media-list__item-preview-spinner {
@@ -679,12 +650,6 @@ $block-inserter-tabs-height: 44px;
 			height: 100%;
 		}
 	}
-
-	// Remove doubled-up shadow that occurs when categories panel is opened, only in zoom out.
-	// Shadow cannot be removed from the source, as it is required when not zoomed out.
-	.block-editor-inserter__category-panel {
-		box-shadow: none;
-	}
 }
 
 .show-icon-labels {
@@ -706,3 +671,7 @@ $block-inserter-tabs-height: 44px;
 		}
 	}
 }
+
+.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 b46e4bfdaf014..0000000000000
--- a/packages/block-editor/src/components/inserter/tabs.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	Button,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { forwardRef } from '@wordpress/element';
-import { closeSmall } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { Tabs } = unlock( componentsPrivateApis );
-
-const blocksTab = {
-	name: 'blocks',
-	/* translators: Blocks tab title in the block inserter. */
-	title: __( 'Blocks' ),
-};
-const patternsTab = {
-	name: 'patterns',
-	/* translators: Theme and Directory Patterns tab title in the block inserter. */
-	title: __( 'Patterns' ),
-};
-
-const mediaTab = {
-	name: 'media',
-	/* translators: Media tab title in the block inserter. */
-	title: __( 'Media' ),
-};
-
-function InserterTabs( { onSelect, children, onClose, selectedTab }, ref ) {
-	const tabs = [ blocksTab, patternsTab, mediaTab ];
-
-	return (
-		<div className="block-editor-inserter__tabs" ref={ ref }>
-			<Tabs onSelect={ onSelect } selectedTabId={ selectedTab }>
-				<div className="block-editor-inserter__tablist-and-close-button">
-					<Button
-						className="block-editor-inserter__close-button"
-						icon={ closeSmall }
-						label={ __( 'Close block inserter' ) }
-						onClick={ () => onClose() }
-						size="small"
-					/>
-
-					<Tabs.TabList className="block-editor-inserter__tablist">
-						{ tabs.map( ( tab ) => (
-							<Tabs.Tab
-								key={ tab.name }
-								tabId={ tab.name }
-								className="block-editor-inserter__tab"
-							>
-								{ tab.title }
-							</Tabs.Tab>
-						) ) }
-					</Tabs.TabList>
-				</div>
-				{ tabs.map( ( tab ) => (
-					<Tabs.TabPanel
-						key={ tab.name }
-						tabId={ tab.name }
-						focusable={ false }
-						className="block-editor-inserter__tabpanel"
-					>
-						{ children }
-					</Tabs.TabPanel>
-				) ) }
-			</Tabs>
-		</div>
-	);
-}
-
-export default forwardRef( InserterTabs );
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 925570130359a..0000000000000
--- 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/inspector-controls-tabs/index.js b/packages/block-editor/src/components/inspector-controls-tabs/index.js
index 9e348ab4b1ed1..c8d9536aeb9ca 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/index.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/index.js
@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import {
-	Button,
+	Icon,
+	Tooltip,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -43,25 +44,27 @@ export default function InspectorControlsTabs( {
 		<div className="block-editor-block-inspector__tabs">
 			<Tabs defaultTabId={ initialTabName } key={ clientId }>
 				<Tabs.TabList>
-					{ tabs.map( ( tab ) => (
-						<Tabs.Tab
-							key={ tab.name }
-							tabId={ tab.name }
-							render={
-								<Button
-									icon={
-										! showIconLabels ? tab.icon : undefined
-									}
-									label={
-										! showIconLabels ? tab.title : undefined
-									}
+					{ tabs.map( ( tab ) =>
+						showIconLabels ? (
+							<Tabs.Tab
+								key={ tab.name }
+								tabId={ tab.name }
+								className={ tab.className }
+							>
+								{ tab.title }
+							</Tabs.Tab>
+						) : (
+							<Tooltip text={ tab.title } key={ tab.name }>
+								<Tabs.Tab
+									tabId={ tab.name }
 									className={ tab.className }
+									aria-label={ tab.title }
 								>
-									{ showIconLabels && tab.title }
-								</Button>
-							}
-						/>
-					) ) }
+									<Icon icon={ tab.icon } />
+								</Tabs.Tab>
+							</Tooltip>
+						)
+					) }
 				</Tabs.TabList>
 				<Tabs.TabPanel tabId={ TAB_SETTINGS.name } focusable={ false }>
 					<SettingsTab showAdvancedControls={ !! blockName } />
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 ec34035b754a9..ea2f45114bf9c 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
@@ -9,6 +9,7 @@ const SettingsTab = ( { showAdvancedControls = false } ) => (
 	<>
 		<InspectorControls.Slot />
 		<PositionControls />
+		<InspectorControls.Slot group="bindings" />
 		{ showAdvancedControls && (
 			<div>
 				<AdvancedControls />
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/style.scss b/packages/block-editor/src/components/inspector-controls-tabs/style.scss
index 863ac3d9bed03..9c9b04f7b8473 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/style.scss
+++ b/packages/block-editor/src/components/inspector-controls-tabs/style.scss
@@ -1,7 +1,3 @@
-.show-icon-labels {
-	.block-editor-block-inspector__tabs [role="tablist"] {
-		.components-button {
-			justify-content: center;
-		}
-	}
+.block-editor-block-inspector__tabs [role="tablist"] {
+	width: 100%;
 }
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
index ff68be82a829f..6a80d47f02481 100644
--- 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
@@ -32,6 +32,7 @@ function getShowTabs( blockName, tabSettings = {} ) {
 export default function useInspectorControlsTabs( blockName ) {
 	const tabs = [];
 	const {
+		bindings: bindingsGroup,
 		border: borderGroup,
 		color: colorGroup,
 		default: defaultGroup,
@@ -64,8 +65,10 @@ export default function useInspectorControlsTabs( blockName ) {
 	// (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 ) || [];
+	const advancedFills = [
+		...( useSlotFills( InspectorAdvancedControls.slotName ) || [] ),
+		...( useSlotFills( bindingsGroup.Slot.__unstableName ) || [] ),
+	];
 
 	const settingsFills = [
 		...( useSlotFills( defaultGroup.Slot.__unstableName ) || [] ),
diff --git a/packages/block-editor/src/components/inspector-controls/README.md b/packages/block-editor/src/components/inspector-controls/README.md
index cc68c7cae7c78..fd4847f53472b 100644
--- a/packages/block-editor/src/components/inspector-controls/README.md
+++ b/packages/block-editor/src/components/inspector-controls/README.md
@@ -96,6 +96,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 				<InspectorControls>
 					<PanelBody title={ __( 'Settings' ) }>
 						<CheckboxControl
+							__nextHasNoMarginBottom
 							heading="Checkbox Field"
 							label="Tick Me"
 							help="Additional help text"
@@ -114,6 +115,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 						/>
 
 						<TextControl
+							__nextHasNoMarginBottom
 							label="Text Field"
 							help="Additional help text"
 							value={ textField }
@@ -121,12 +123,14 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 						/>
 
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label="Toggle Field"
 							checked={ toggleField }
 							onChange={ onChangeToggleField }
 						/>
 
 						<SelectControl
+							__nextHasNoMarginBottom
 							label="Select Control"
 							value={ selectField }
 							options={ [
@@ -203,6 +207,7 @@ function MyBlockEdit( { attributes, setAttributes } ) {
 			</InspectorControls>
 			<InspectorAdvancedControls>
 				<TextControl
+					__nextHasNoMarginBottom
 					label="HTML anchor"
 					value={ attributes.anchor }
 					onChange={ ( nextValue ) => {
diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js
index 9ca1a72b9918a..34ec49a5e1cb4 100644
--- a/packages/block-editor/src/components/inspector-controls/groups.js
+++ b/packages/block-editor/src/components/inspector-controls/groups.js
@@ -5,6 +5,7 @@ import { createSlotFill } from '@wordpress/components';
 
 const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
 const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
+const InspectorControlsBindings = createSlotFill( 'InspectorControlsBindings' );
 const InspectorControlsBackground = createSlotFill(
 	'InspectorControlsBackground'
 );
@@ -26,6 +27,7 @@ const groups = {
 	default: InspectorControlsDefault,
 	advanced: InspectorControlsAdvanced,
 	background: InspectorControlsBackground,
+	bindings: InspectorControlsBindings,
 	border: InspectorControlsBorder,
 	color: InspectorControlsColor,
 	dimensions: InspectorControlsDimensions,
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 e5f492eddd2b7..cf6bf0d3d6796 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 ebb76aab23e28..1ce9ec07f6409 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/letter-spacing-control/README.md b/packages/block-editor/src/components/letter-spacing-control/README.md
index 4288f67a2aa99..ef119bbc943d2 100644
--- a/packages/block-editor/src/components/letter-spacing-control/README.md
+++ b/packages/block-editor/src/components/letter-spacing-control/README.md
@@ -38,13 +38,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 2c36e59cd8241..1577e184c4a06 100644
--- a/packages/block-editor/src/components/letter-spacing-control/index.js
+++ b/packages/block-editor/src/components/letter-spacing-control/index.js
@@ -15,14 +15,16 @@ 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 {Element} Letter-spacing control.
  */
 export default function LetterSpacingControl( {
+	__next40pxDefaultSize = false,
 	value,
 	onChange,
 	__unstableInputWidth = '60px',
@@ -35,6 +37,7 @@ export default function LetterSpacingControl( {
 	} );
 	return (
 		<UnitControl
+			__next40pxDefaultSize={ __next40pxDefaultSize }
 			{ ...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 38ab5c3f779a7..89bcc69622367 100644
--- a/packages/block-editor/src/components/line-height-control/README.md
+++ b/packages/block-editor/src/components/line-height-control/README.md
@@ -18,7 +18,6 @@ const MyLineHeightControl = () => (
 	<LineHeightControl
 		value={ lineHeight }
 		onChange={ onChange }
-		__nextHasNoMarginBottom={ true }
 	/>
 );
 ```
@@ -37,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 8150c2d60027e..b2c99c03f8784 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';
 
@@ -17,10 +16,10 @@ import {
 } from './utils';
 
 const LineHeightControl = ( {
+	/** Start opting into the larger default height that will become the default size in a future version. */
+	__next40pxDefaultSize = false,
 	value: lineHeight,
 	onChange,
-	/** Start opting into the new margin-free styles that will become the default in a future version. */
-	__nextHasNoMarginBottom = false,
 	__unstableInputWidth = '60px',
 	...otherProps
 } ) => {
@@ -76,20 +75,6 @@ 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();
@@ -105,12 +90,10 @@ const LineHeightControl = ( {
 	};
 
 	return (
-		<div
-			className="block-editor-line-height-control"
-			style={ deprecatedStyles }
-		>
+		<div className="block-editor-line-height-control">
 			<NumberControl
 				{ ...otherProps }
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				__unstableInputWidth={ __unstableInputWidth }
 				__unstableStateReducer={ stateReducer }
 				onChange={ handleOnChange }
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
index 76da83304d489..6d26fe2220fd2 100644
--- 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
@@ -22,7 +22,6 @@ const Template = ( props ) => {
 
 export const Default = Template.bind( {} );
 Default.args = {
-	__nextHasNoMarginBottom: true,
 	__unstableInputWidth: '100px',
 };
 
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 7a101219f2f82..b98bc93c48a83 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
@@ -19,13 +19,7 @@ const SPIN = STEP * SPIN_FACTOR;
 
 const ControlledLineHeightControl = () => {
 	const [ value, setValue ] = useState();
-	return (
-		<LineHeightControl
-			value={ value }
-			onChange={ setValue }
-			__nextHasNoMarginBottom
-		/>
-	);
+	return <LineHeightControl value={ value } onChange={ setValue } />;
 };
 
 describe( 'LineHeightControl', () => {
diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index 576556519fb2f..0f2ae4a0e05d2 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -12,6 +12,7 @@ import {
 	Notice,
 	TextControl,
 	__experimentalHStack as HStack,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useRef, useState, useEffect } from '@wordpress/element';
@@ -180,10 +181,10 @@ function LinkControl( {
 	// Therefore a local state is used as a fallback.
 	const isSettingsOpen = advancedSettingsPreference || settingsOpen;
 
-	const isMounting = useRef( true );
+	const isMountingRef = useRef( true );
 	const wrapperNode = useRef();
 	const textInputRef = useRef();
-	const isEndingEditWithFocus = useRef( false );
+	const isEndingEditWithFocusRef = useRef( false );
 
 	const settingsKeys = settings.map( ( { id } ) => id );
 
@@ -219,7 +220,7 @@ function LinkControl( {
 		// 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 ) {
+		if ( isMountingRef.current ) {
 			return;
 		}
 
@@ -234,16 +235,16 @@ function LinkControl( {
 
 		nextFocusTarget.focus();
 
-		isEndingEditWithFocus.current = false;
+		isEndingEditWithFocusRef.current = false;
 	}, [ isEditingLink, isCreatingPage ] );
 
 	// The component mounting reference is maintained separately
 	// to correctly reset values in `StrictMode`.
 	useEffect( () => {
-		isMounting.current = false;
+		isMountingRef.current = false;
 
 		return () => {
-			isMounting.current = true;
+			isMountingRef.current = true;
 		};
 	}, [] );
 
@@ -254,7 +255,7 @@ function LinkControl( {
 	 * 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
 		);
 
@@ -383,7 +384,7 @@ function LinkControl( {
 								value={ internalControlValue?.title }
 								onChange={ setInternalTextInputValue }
 								onKeyDown={ handleSubmitWithEnter }
-								size="__unstable-large"
+								__next40pxDefaultSize
 							/>
 						) }
 						<LinkControlSearchInput
@@ -404,18 +405,23 @@ function LinkControl( {
 								createSuggestionButtonText
 							}
 							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>
+								)
+							}
 						/>
-						{ ! showActions && (
-							<div className="block-editor-link-control__search-enter">
-								<Button
-									onClick={ isDisabled ? noop : handleSubmit }
-									label={ __( 'Submit' ) }
-									icon={ keyboardReturn }
-									className="block-editor-link-control__search-submit"
-									aria-disabled={ isDisabled }
-								/>
-							</div>
-						) }
 					</div>
 					{ errorMessage && (
 						<Notice
@@ -467,10 +473,15 @@ function LinkControl( {
 					justify="right"
 					className="block-editor-link-control__search-actions"
 				>
-					<Button variant="tertiary" onClick={ handleCancel }>
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ handleCancel }
+					>
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
+						__next40pxDefaultSize
 						variant="primary"
 						onClick={ isDisabled ? noop : handleSubmit }
 						className="block-editor-link-control__search-submit"
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 78730463389e2..f41884092e489 100644
--- a/packages/block-editor/src/components/link-control/search-input.js
+++ b/packages/block-editor/src/components/link-control/search-input.js
@@ -43,6 +43,7 @@ const LinkControlSearchInput = forwardRef(
 			withURLSuggestion = true,
 			createSuggestionButtonText,
 			hideLabelFromVision = false,
+			suffix,
 		},
 		ref
 	) => {
@@ -119,7 +120,6 @@ const LinkControlSearchInput = forwardRef(
 			<div className="block-editor-link-control__search-input-container">
 				<URLInput
 					disableSuggestions={ currentLink?.url === value }
-					__nextHasNoMarginBottom
 					label={ __( 'Link' ) }
 					hideLabelFromVision={ hideLabelFromVision }
 					className={ className }
@@ -148,6 +148,7 @@ const LinkControlSearchInput = forwardRef(
 						}
 					} }
 					ref={ ref }
+					suffix={ suffix }
 				/>
 				{ children }
 			</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 8d0c717b1af6c..935a50ac99a6f 100644
--- a/packages/block-editor/src/components/link-control/settings-drawer.js
+++ b/packages/block-editor/src/components/link-control/settings-drawer.js
@@ -25,6 +25,7 @@ function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
 	return (
 		<>
 			<Button
+				__next40pxDefaultSize
 				className="block-editor-link-control__drawer-toggle"
 				aria-expanded={ settingsOpen }
 				onClick={ () => setSettingsOpen( ! settingsOpen ) }
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index c0cf8a3bc2afe..16493e1a5aa7f 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -72,35 +72,12 @@ $block-editor-link-control-number-of-actions: 1;
 		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;
-		display: block;
-		border: 1px solid $gray-600;
-		border-radius: $radius-block-ui;
-		height: $button-size-next-default-40px; // components do not properly support unstable-large yet.
-		margin: 0;
-		padding: $grid-unit-10 $button-size-next-default-40px $grid-unit-10 $grid-unit-20;
-		position: relative;
-		width: 100%;
-
-		.has-actions & {
-			padding-right: $grid-unit-20;
-		}
-	}
 }
 
 .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
 }
 
-.block-editor-link-control__search-enter {
-	position: absolute;
-	right: 19px; // specific to place the button properly.
-	top: 3px;
-}
-
 .block-editor-link-control__search-actions {
 	padding: $grid-unit-10 $grid-unit-20 $grid-unit-20;
 }
@@ -230,7 +207,7 @@ $block-editor-link-control-number-of-actions: 1;
 		background-color: $gray-100;
 		width: $grid-unit-40;
 		height: $grid-unit-40;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 	}
 
 	.block-editor-link-control__search-item-icon {
@@ -252,7 +229,6 @@ $block-editor-link-control-number-of-actions: 1;
 	}
 
 	.block-editor-link-control__search-item-title {
-		border-radius: $radius-block-ui;
 		line-height: 1.1;
 
 
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 91bfbd7eddaa0..0ed2b162b127b 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 clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
 
 /**
@@ -14,7 +8,6 @@ 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(
@@ -34,29 +27,9 @@ const ListViewBlockContents = forwardRef(
 		ref
 	) => {
 		const { clientId } = block;
-
-		const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
-			( select ) => {
-				const { hasBlockMovingClientId, getSelectedBlockClientId } =
-					select( blockEditorStore );
-				return {
-					blockMovingClientId: hasBlockMovingClientId(),
-					selectedBlockInBlockEditor: getSelectedBlockClientId(),
-				};
-			},
-			[]
-		);
-
 		const { AdditionalBlockContent, insertedBlock, setInsertedBlock } =
 			useListViewContext();
 
-		const isBlockMoveTarget =
-			blockMovingClientId && selectedBlockInBlockEditor === clientId;
-
-		const className = clsx( '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
@@ -82,7 +55,7 @@ const ListViewBlockContents = forwardRef(
 					{ ( { draggable, onDragStart, onDragEnd } ) => (
 						<ListViewBlockSelectButton
 							ref={ ref }
-							className={ className }
+							className="block-editor-list-view-block-contents"
 							block={ block }
 							onClick={ onClick }
 							onToggleExpanded={ onToggleExpanded }
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 605e22f226b25..3b21fd4a04e6d 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
@@ -7,15 +7,12 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
-	Button,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
-	Tooltip,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
-import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -65,14 +62,6 @@ function ListViewBlockSelectButton(
 	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
 
-	const positionLabel = blockInformation?.positionLabel
-		? sprintf(
-				// translators: 1: Position of selected block, e.g. "Sticky" or "Fixed".
-				__( 'Position: %1$s' ),
-				blockInformation.positionLabel
-		  )
-		: '';
-
 	// 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
@@ -92,7 +81,7 @@ function ListViewBlockSelectButton(
 	}
 
 	return (
-		<Button
+		<a
 			className={ clsx(
 				'block-editor-list-view-block-select-button',
 				className
@@ -136,10 +125,10 @@ function ListViewBlockSelectButton(
 						</Truncate>
 					</span>
 				) }
-				{ positionLabel && isSticky && (
-					<Tooltip text={ positionLabel }>
+				{ isSticky && (
+					<span className="block-editor-list-view-block-select-button__sticky">
 						<Icon icon={ pinSmall } />
-					</Tooltip>
+					</span>
 				) }
 				{ images.length ? (
 					<span
@@ -164,7 +153,7 @@ function ListViewBlockSelectButton(
 					</span>
 				) }
 			</HStack>
-		</Button>
+		</a>
 	);
 }
 
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
index 0f6541f9f5b3b..f4dcf8caef449 100644
--- a/packages/block-editor/src/components/list-view/block.js
+++ b/packages/block-editor/src/components/list-view/block.js
@@ -465,8 +465,10 @@ function ListViewBlock( {
 		level
 	);
 
-	const blockPropertiesDescription =
-		getBlockPropertiesDescription( isLocked );
+	const blockPropertiesDescription = getBlockPropertiesDescription(
+		blockInformation,
+		isLocked
+	);
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
@@ -562,7 +564,12 @@ function ListViewBlock( {
 							ariaDescribedBy={ descriptionId }
 						/>
 						<AriaReferencedText id={ descriptionId }>
-							{ `${ blockPositionDescription } ${ blockPropertiesDescription }` }
+							{ [
+								blockPositionDescription,
+								blockPropertiesDescription,
+							]
+								.filter( Boolean )
+								.join( ' ' ) }
 						</AriaReferencedText>
 					</div>
 				) }
diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
index 1493fa655a5aa..87599ea870913 100644
--- a/packages/block-editor/src/components/list-view/index.js
+++ b/packages/block-editor/src/components/list-view/index.js
@@ -119,20 +119,16 @@ function ListViewComponent(
 	const blockIndexes = useListViewBlockIndexes( clientIdsTree );
 
 	const { getBlock } = useSelect( blockEditorStore );
-	const { visibleBlockCount, shouldShowInnerBlocks } = useSelect(
+	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 ]
@@ -397,7 +393,6 @@ function ListViewComponent(
 						fixedListWindow={ fixedListWindow }
 						selectedClientIds={ selectedClientIds }
 						isExpanded={ isExpanded }
-						shouldShowInnerBlocks={ shouldShowInnerBlocks }
 						showAppender={ showAppender }
 					/>
 				</ListViewContext.Provider>
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index ea3cc5bb78cdf..2916622efabee 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -41,6 +41,15 @@
 		&: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 {
@@ -101,16 +110,16 @@
 
 	// 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);
@@ -119,23 +128,23 @@
 		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;
 	}
 	&[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 {
@@ -214,23 +223,17 @@
 		height: $grid-unit-40;
 		padding: ($grid-unit-15 * 0.5) $grid-unit-05 ($grid-unit-15 * 0.5) 0;
 		text-align: left;
-		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;
@@ -273,7 +276,7 @@
 
 	&.is-visible .block-editor-list-view-block-contents {
 		opacity: 1;
-		@include edit-post__fade-in-animation;
+		@include animation__fade-in;
 	}
 
 	.block-editor-block-icon {
@@ -406,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;
@@ -416,7 +419,8 @@
 		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;
 	}
 
@@ -428,10 +432,10 @@
 		background-size: cover;
 		width: 18px;
 		height: 18px;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-x-small;
 
 		&:not(:only-child) {
-			box-shadow: 0 0 0 $radius-block-ui $white;
+			box-shadow: 0 0 0 $radius-small $white;
 		}
 
 		&:not(:first-child) {
@@ -441,7 +445,7 @@
 
 	&.is-selected .block-editor-list-view-block-select-button__image {
 		&:not(:only-child) {
-			box-shadow: 0 0 0 $radius-block-ui var(--wp-admin-theme-color);
+			box-shadow: 0 0 0 $radius-small var(--wp-admin-theme-color);
 		}
 	}
 }
@@ -552,7 +556,6 @@ svg {
 	background-color: #1e1e1e;
 	color: #fff;
 	margin: $grid-unit-10 0 0 24px;
-	border-radius: 2px;
 	height: 24px;
 	min-width: 24px;
 	padding: 0;
diff --git a/packages/block-editor/src/components/list-view/utils.js b/packages/block-editor/src/components/list-view/utils.js
index d6ca4a1f2e005..2b8454924c513 100644
--- a/packages/block-editor/src/components/list-view/utils.js
+++ b/packages/block-editor/src/components/list-view/utils.js
@@ -13,8 +13,19 @@ export const getBlockPositionDescription = ( position, siblingCount, level ) =>
 		level
 	);
 
-export const getBlockPropertiesDescription = ( isLocked ) =>
-	isLocked ? __( 'This block is locked.' ) : '';
+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,
diff --git a/packages/block-editor/src/components/media-placeholder/README.md b/packages/block-editor/src/components/media-placeholder/README.md
index 6cb00206d93d7..68fcf150c4edc 100644
--- a/packages/block-editor/src/components/media-placeholder/README.md
+++ b/packages/block-editor/src/components/media-placeholder/README.md
@@ -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
diff --git a/packages/block-editor/src/components/media-placeholder/content.scss b/packages/block-editor/src/components/media-placeholder/content.scss
index eeb2928df80ba..2f7bb2e673f12 100644
--- a/packages/block-editor/src/components/media-placeholder/content.scss
+++ b/packages/block-editor/src/components/media-placeholder/content.scss
@@ -1,27 +1,11 @@
 .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;
+	min-width: 260px;
 
+	@include break-small() {
+		width: 300px;
 	}
 }
 
-.block-editor-media-placeholder__url-input-submit-button {
-	flex-shrink: 1;
-}
-
 .block-editor-media-placeholder__cancel-button.is-link {
 	margin: 1em;
 	display: block;
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index 347cd3e42d130..f16e431722723 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -11,6 +11,8 @@ import {
 	FormFileUpload,
 	Placeholder,
 	DropZone,
+	__experimentalInputControl as InputControl,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 	withFilters,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -42,19 +44,23 @@ const InsertFromURLPopover = ( {
 			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>
@@ -85,6 +91,7 @@ const URLSelectionUI = ( { src, onChangeSrc, onSelectURL } ) => {
 	return (
 		<div className="block-editor-media-placeholder__url-input-container">
 			<Button
+				__next40pxDefaultSize
 				className="block-editor-media-placeholder__button"
 				onClick={ openURLInput }
 				isPressed={ isURLInputVisible }
@@ -163,12 +170,11 @@ export function MediaPlaceholder( {
 		);
 	};
 
-	const onChangeSrc = ( event ) => {
-		setSrc( event.target.value );
-	};
-
 	const onFilesUpload = ( files ) => {
-		if ( ! handleUpload ) {
+		if (
+			! handleUpload ||
+			( typeof handleUpload === 'function' && ! handleUpload( files ) )
+		) {
 			return onSelect( files );
 		}
 		onFilesPreUpload( files );
@@ -316,15 +322,15 @@ export function MediaPlaceholder( {
 
 				if ( isAudio ) {
 					instructions = __(
-						'Upload an audio file, pick one from your media library, or add one with a URL.'
+						'Upload or drag an audio file here, or pick one from your library.'
 					);
 				} else if ( isImage ) {
 					instructions = __(
-						'Upload an image file, pick one from your media library, or add one with a URL.'
+						'Upload or drag an image file here, or pick one from your library.'
 					);
 				} else if ( isVideo ) {
 					instructions = __(
-						'Upload a video file, pick one from your media library, or add one with a URL.'
+						'Upload or drag a video file here, or pick one from your library.'
 					);
 				}
 			}
@@ -382,6 +388,7 @@ export function MediaPlaceholder( {
 		return (
 			onCancel && (
 				<Button
+					__next40pxDefaultSize
 					className="block-editor-media-placeholder__cancel-button"
 					title={ __( 'Cancel' ) }
 					variant="link"
@@ -398,7 +405,7 @@ export function MediaPlaceholder( {
 			onSelectURL && (
 				<URLSelectionUI
 					src={ src }
-					onChangeSrc={ onChangeSrc }
+					onChangeSrc={ setSrc }
 					onSelectURL={ onSelectURL }
 				/>
 			)
@@ -410,6 +417,7 @@ export function MediaPlaceholder( {
 			onToggleFeaturedImage && (
 				<div className="block-editor-media-placeholder__url-input-container">
 					<Button
+						__next40pxDefaultSize
 						className="block-editor-media-placeholder__button"
 						onClick={ onToggleFeaturedImage }
 						variant="secondary"
@@ -425,6 +433,7 @@ export function MediaPlaceholder( {
 		const defaultButton = ( { open } ) => {
 			return (
 				<Button
+					__next40pxDefaultSize
 					variant="secondary"
 					onClick={ () => {
 						open();
@@ -464,6 +473,7 @@ export function MediaPlaceholder( {
 							const content = (
 								<>
 									<Button
+										__next40pxDefaultSize
 										variant="primary"
 										className={ clsx(
 											'block-editor-media-placeholder__button',
@@ -491,17 +501,23 @@ export function MediaPlaceholder( {
 				<>
 					{ renderDropZone() }
 					<FormFileUpload
-						variant="primary"
-						className={ clsx(
-							'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>
+					/>
 					{ uploadMediaLibraryButton }
 					{ renderUrlSelectionUI() }
 					{ renderFeaturedImageToggle() }
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 2f3cffde4b4a7..a5808ab956198 100644
--- a/packages/block-editor/src/components/media-replace-flow/README.md
+++ b/packages/block-editor/src/components/media-replace-flow/README.md
@@ -91,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 318eb166734ee..0da15033a86bf 100644
--- a/packages/block-editor/src/components/media-replace-flow/index.js
+++ b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -48,6 +48,7 @@ const MediaReplaceFlow = ( {
 	onError,
 	onSelect,
 	onSelectURL,
+	onReset,
 	onToggleFeaturedImage,
 	useFeaturedImage,
 	onFilesUpload = noop,
@@ -75,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.
@@ -202,7 +203,19 @@ 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
diff --git a/packages/block-editor/src/components/media-upload/README.md b/packages/block-editor/src/components/media-upload/README.md
index 592d64e42f497..27bbc93d8a2b6 100644
--- a/packages/block-editor/src/components/media-upload/README.md
+++ b/packages/block-editor/src/components/media-upload/README.md
@@ -105,6 +105,8 @@ Callback called when the media modal is closed after media is selected.
 
 This is called subsequent to `onClose` when media is selected. The selected media are passed as an argument.
 
+The `image.sizes.full` resolution does always exist. Other defined sizes are only available when the image is larger and thus could be scaled down.
+
 -   Type: `Function`
 -   Required: Yes
 -   Platform: Web | Mobile
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 05a36d7a09bca..c4871d48ebe12 100644
--- a/packages/block-editor/src/components/media-upload/index.native.js
+++ b/packages/block-editor/src/components/media-upload/index.native.js
@@ -327,6 +327,8 @@ function URLInput( props ) {
 		>
 			<PanelBody style={ styles[ 'media-upload__link-input' ] }>
 				<TextControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					// eslint-disable-next-line jsx-a11y/no-autofocus
 					autoFocus
 					autoCapitalize="none"
diff --git a/packages/block-editor/src/components/multi-selection-inspector/index.js b/packages/block-editor/src/components/multi-selection-inspector/index.js
index 14eda5f930cad..f5e7f69634768 100644
--- a/packages/block-editor/src/components/multi-selection-inspector/index.js
+++ b/packages/block-editor/src/components/multi-selection-inspector/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { sprintf, _n } from '@wordpress/i18n';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { serialize } from '@wordpress/blocks';
 import { count as wordCount } from '@wordpress/wordcount';
 import { copy } from '@wordpress/icons';
@@ -13,7 +13,13 @@ import { copy } from '@wordpress/icons';
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
-function MultiSelectionInspector( { blocks } ) {
+export default function MultiSelectionInspector() {
+	const { blocks } = useSelect( ( select ) => {
+		const { getMultiSelectedBlocks } = select( blockEditorStore );
+		return {
+			blocks: getMultiSelectedBlocks(),
+		};
+	}, [] );
 	const words = wordCount( serialize( blocks ), 'words' );
 
 	return (
@@ -38,10 +44,3 @@ function MultiSelectionInspector( { blocks } ) {
 		</div>
 	);
 }
-
-export default withSelect( ( select ) => {
-	const { getMultiSelectedBlocks } = select( blockEditorStore );
-	return {
-		blocks: getMultiSelectedBlocks(),
-	};
-} )( MultiSelectionInspector );
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 4e9cc9784554f..fa148109d510f 100644
--- a/packages/block-editor/src/components/provider/use-block-sync.js
+++ b/packages/block-editor/src/components/provider/use-block-sync.js
@@ -91,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 ) {
@@ -113,15 +113,15 @@ 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 );
 		}
@@ -153,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
@@ -161,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 ) {
@@ -185,19 +185,19 @@ export default function useBlockSync( {
 		}
 	}, [ controlledBlocks, clientId ] );
 
-	const isMounted = useRef( false );
+	const isMountedRef = useRef( false );
 
 	useEffect( () => {
 		// On mount, controlled blocks are already set in the effect above.
-		if ( ! isMounted.current ) {
-			isMounted.current = true;
+		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 ] );
@@ -214,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
@@ -243,10 +243,10 @@ export default function useBlockSync( {
 			blocks = newBlocks;
 			if (
 				areBlocksDifferent &&
-				( pendingChanges.current.incoming ||
+				( pendingChangesRef.current.incoming ||
 					__unstableIsLastBlockChangeIgnored() )
 			) {
-				pendingChanges.current.incoming = null;
+				pendingChangesRef.current.incoming = null;
 				isPersistent = newIsPersistent;
 				return;
 			}
@@ -266,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.
@@ -286,7 +286,7 @@ export default function useBlockSync( {
 		}, blockEditorStore );
 
 		return () => {
-			subscribed.current = false;
+			subscribedRef.current = false;
 			unsubscribe();
 		};
 	}, [ registry, clientId ] );
diff --git a/packages/block-editor/src/components/resolution-tool/index.js b/packages/block-editor/src/components/resolution-tool/index.js
index 42fea6e8655a8..df43cb6acb096 100644
--- a/packages/block-editor/src/components/resolution-tool/index.js
+++ b/packages/block-editor/src/components/resolution-tool/index.js
@@ -44,6 +44,7 @@ export default function ResolutionTool( {
 			panelId={ panelId }
 		>
 			<SelectControl
+				__nextHasNoMarginBottom
 				label={ __( 'Resolution' ) }
 				value={ displayValue }
 				options={ options }
diff --git a/packages/block-editor/src/components/responsive-block-control/README.md b/packages/block-editor/src/components/responsive-block-control/README.md
index 1d99caa024a41..16183ccd6314f 100644
--- a/packages/block-editor/src/components/responsive-block-control/README.md
+++ b/packages/block-editor/src/components/responsive-block-control/README.md
@@ -27,9 +27,6 @@ import {
 	InspectorControls,
 	__experimentalResponsiveBlockControl as ResponsiveBlockControl,
 } from '@wordpress/block-editor';
-import {
-	DimensionControl,
-} from '@wordpress/components';
 
 registerBlockType( 'my-plugin/my-block', {
 	// ...
@@ -37,33 +34,13 @@ 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 }
@@ -154,7 +131,7 @@ const renderDefaultControl = ( labelComponent, viewport ) => {
 	// 	id: 'small',
 	// 	label: 'All'
 	// }
-	return <DimensionControl label={ labelComponent } />;
+	return <SelectControl label={ labelComponent } />;
 };
 ```
 
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 5d01d8e35ff20..ef32c60722f54 100644
--- a/packages/block-editor/src/components/responsive-block-control/test/index.js
+++ b/packages/block-editor/src/components/responsive-block-control/test/index.js
@@ -39,7 +39,12 @@ const sizeOptions = [
 const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 	return (
 		<>
-			<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.
diff --git a/packages/block-editor/src/components/rich-text/content.scss b/packages/block-editor/src/components/rich-text/content.scss
index 6f6d88c777ea7..6f118479fc6b0 100644
--- a/packages/block-editor/src/components/rich-text/content.scss
+++ b/packages/block-editor/src/components/rich-text/content.scss
@@ -15,7 +15,7 @@
 		outline: none;
 
 		[data-rich-text-format-boundary] {
-			border-radius: 2px;
+			border-radius: $radius-small;
 		}
 	}
 }
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
index 59633f4750ff9..ef1833bda88e6 100644
--- 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
@@ -28,8 +28,8 @@ export default ( props ) => ( element ) => {
 		} = props.current;
 
 		// The event listener is attached to the window, so we need to check if
-		// the target is the element.
-		if ( event.target !== element ) {
+		// the target is the element or inside the element.
+		if ( ! element.contains( event.target ) ) {
 			return;
 		}
 
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index 68f00ca1b5d14..8a5d99a7eb9f0 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -20,8 +20,9 @@ import {
 	removeFormat,
 } from '@wordpress/rich-text';
 import { Popover } from '@wordpress/components';
-import { getBlockType, store as blocksStore } from '@wordpress/blocks';
+import { getBlockBindingsSource } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -38,7 +39,6 @@ import FormatEdit from './format-edit';
 import { getAllowedFormats } from './utils';
 import { Content, valueToHTMLString } from './content';
 import { withDeprecations } from './with-deprecations';
-import { unlock } from '../../lock-unlock';
 import { canBindBlock } from '../../hooks/use-bindings-attributes';
 import BlockContext from '../block-context';
 
@@ -124,6 +124,7 @@ export function RichTextWrapper(
 	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.
@@ -163,49 +164,79 @@ export function RichTextWrapper(
 		isBlockSelected,
 	] );
 
-	const disableBoundBlocks = useSelect(
+	const { disableBoundBlock, bindingsPlaceholder, bindingsLabel } = useSelect(
 		( select ) => {
-			// Disable Rich Text editing if block bindings specify that.
-			let _disableBoundBlocks = false;
-			if ( blockBindings && canBindBlock( blockName ) ) {
-				const blockTypeAttributes =
-					getBlockType( blockName ).attributes;
-				const { getBlockBindingsSource } = unlock(
-					select( blocksStore )
-				);
-				for ( const [ attribute, binding ] of Object.entries(
-					blockBindings
-				) ) {
-					if (
-						blockTypeAttributes?.[ attribute ]?.source !==
-						'rich-text'
-					) {
-						break;
-					}
-
-					// If the source is not defined, or if its value of `canUserEditValue` is `false`, disable it.
-					const blockBindingsSource = getBlockBindingsSource(
-						binding.source
-					);
-					if (
-						! blockBindingsSource?.canUserEditValue?.( {
-							select,
-							context: blockContext,
-							args: binding.args,
-						} )
-					) {
-						_disableBoundBlocks = true;
-						break;
-					}
+			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 ];
 				}
 			}
 
-			return _disableBoundBlocks;
+			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, blockName ]
+		[ blockBindings, identifier, blockName, blockContext, adjustedValue ]
 	);
 
-	const shouldDisableEditing = readOnly || disableBoundBlocks;
+	const shouldDisableEditing = readOnly || disableBoundBlock;
 
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
 		useSelect( blockEditorStore );
@@ -335,7 +366,7 @@ export function RichTextWrapper(
 		selectionStart,
 		selectionEnd,
 		onSelectionChange,
-		placeholder,
+		placeholder: bindingsPlaceholder || placeholder,
 		__unstableIsSelected: isSelected,
 		__unstableDisableFormats: disableFormats,
 		preserveWhiteSpace,
@@ -360,7 +391,6 @@ export function RichTextWrapper(
 		anchorRef.current?.focus();
 	}
 
-	const registry = useRegistry();
 	const TagName = tagName;
 	return (
 		<>
@@ -392,9 +422,11 @@ export function RichTextWrapper(
 				// Overridable props.
 				role="textbox"
 				aria-multiline={ ! disableLineBreaks }
-				aria-label={ placeholder }
 				aria-readonly={ shouldDisableEditing }
 				{ ...props }
+				aria-label={
+					bindingsLabel || props[ 'aria-label' ] || placeholder
+				}
 				{ ...autocompleteProps }
 				ref={ useMergeRefs( [
 					// Rich text ref must be first because its focus listener
diff --git a/packages/block-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss
index a3bb78b2521db..ca274d378d408 100644
--- a/packages/block-editor/src/components/rich-text/style.scss
+++ b/packages/block-editor/src/components/rich-text/style.scss
@@ -12,7 +12,7 @@
 	}
 
 	.components-toolbar {
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 	}
 
 	.components-toolbar__control,
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 10e157452fbe2..0be460fedd92f 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,7 +10,7 @@ import { useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '../../store';
 
 export function useMarkPersistent( { html, value } ) {
-	const previousText = useRef();
+	const previousTextRef = useRef();
 	const hasActiveFormats = !! value.activeFormats?.length;
 	const { __unstableMarkLastChangeAsPersistent } =
 		useDispatch( blockEditorStore );
@@ -18,18 +18,18 @@ export function useMarkPersistent( { html, value } ) {
 	// 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/segmented-text-control/index.js b/packages/block-editor/src/components/segmented-text-control/index.js
deleted file mode 100644
index 28f049bfb40ec..0000000000000
--- a/packages/block-editor/src/components/segmented-text-control/index.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { BaseControl, Button } from '@wordpress/components';
-
-/**
- * @typedef {Object} Option
- * @property {string} label The label of the option.
- * @property {string} value The value of the option.
- * @property {string} icon  The icon of the option.
- */
-
-/**
- * Control to facilitate selecting a text style from a set of options.
- *
- * @param {Object}   props           Component props.
- * @param {string}   props.label     A label for the option.
- * @param {string}   props.value     Currently selected value.
- * @param {Function} props.onChange  Callback to handle onChange.
- * @param {Option[]} props.options   Array of options to display.
- * @param {string}   props.className Additional class name to apply.
- *
- * @return {Element} Element to render.
- */
-export default function SegmentedTextControl( {
-	label,
-	value,
-	options,
-	onChange,
-	className,
-} ) {
-	return (
-		<fieldset
-			className={ clsx(
-				'block-editor-segmented-text-control',
-				className
-			) }
-		>
-			<BaseControl.VisualLabel as="legend">
-				{ label }
-			</BaseControl.VisualLabel>
-			<div className="block-editor-segmented-text-control__buttons">
-				{ options.map( ( option ) => {
-					return (
-						<Button
-							size="compact"
-							key={ option.value }
-							icon={ option.icon }
-							label={ option.label }
-							isPressed={ option.value === value }
-							onClick={ () => onChange( option.value ) }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
-	);
-}
diff --git a/packages/block-editor/src/components/segmented-text-control/style.scss b/packages/block-editor/src/components/segmented-text-control/style.scss
deleted file mode 100644
index 7a4a3bbea7cb3..0000000000000
--- a/packages/block-editor/src/components/segmented-text-control/style.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.block-editor-segmented-text-control {
-	border: 0;
-	margin: 0;
-	padding: 0;
-
-	.block-editor-segmented-text-control__buttons {
-		// 4px of padding makes the row 40px high, same as an input.
-		padding: $grid-unit-05 0;
-		display: flex;
-	}
-
-	.components-button.has-icon {
-		margin-right: $grid-unit-05;
-	}
-}
diff --git a/packages/block-editor/src/components/skip-to-selected-block/index.js b/packages/block-editor/src/components/skip-to-selected-block/index.js
index 51062e32934f0..2b52433480f3e 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
@@ -4,12 +4,13 @@
 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';
 
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/skip-to-selected-block/README.md
@@ -19,13 +20,15 @@ export default function SkipToSelectedBlock() {
 		( select ) => select( blockEditorStore ).getBlockSelectionStart(),
 		[]
 	);
-	const ref = useBlockRef( selectedBlockClientId );
+	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 }
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 075e9d3c52265..8a1933423e2f9 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/index.js b/packages/block-editor/src/components/spacing-sizes-control/index.js
index 6886670f54115..6ca143d14706a 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/index.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/index.js
@@ -7,7 +7,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
-import { __, _x, sprintf } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -15,7 +15,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import AxialInputControls from './input-controls/axial';
 import SeparatedInputControls from './input-controls/separated';
 import SingleInputControl from './input-controls/single';
-import SidesDropdown from './sides-dropdown';
+import LinkedButton from './linked-button';
 import useSpacingSizes from './hooks/use-spacing-sizes';
 import {
 	ALL_SIDES,
@@ -47,6 +47,10 @@ export default function SpacingSizesControl( {
 
 	const [ view, setView ] = useState( getInitialView( inputValues, sides ) );
 
+	const toggleLinked = () => {
+		setView( view === VIEWS.axial ? VIEWS.custom : VIEWS.axial );
+	};
+
 	const handleOnChange = ( nextValue ) => {
 		const newValues = { ...values, ...nextValue };
 		onChange( newValues );
@@ -91,12 +95,6 @@ export default function SpacingSizesControl( {
 		sideLabel
 	).trim();
 
-	const dropdownLabelText = sprintf(
-		// translators: %s: The current spacing property e.g. "Padding", "Margin".
-		_x( '%s options', 'Button label to reveal side configuration options' ),
-		labelProp
-	);
-
 	return (
 		<fieldset className="spacing-sizes-control">
 			<HStack className="spacing-sizes-control__header">
@@ -107,11 +105,10 @@ export default function SpacingSizesControl( {
 					{ label }
 				</BaseControl.VisualLabel>
 				{ ! hasOneSide && ! hasOnlyAxialSides && (
-					<SidesDropdown
-						label={ dropdownLabelText }
-						onChange={ setView }
-						sides={ sides }
-						value={ view }
+					<LinkedButton
+						label={ labelProp }
+						onClick={ toggleLinked }
+						isLinked={ view === VIEWS.axial }
 					/>
 				) }
 			</HStack>
diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js
index bec589f2ed9aa..d00feed704d17 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js
@@ -9,7 +9,7 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
-	privateApis as componentsPrivateApis,
+	CustomSelectControl,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useState, useMemo } from '@wordpress/element';
@@ -31,11 +31,6 @@ import {
 	getPresetValueFromCustomValue,
 	isValueSpacingPreset,
 } from '../utils';
-import { unlock } from '../../../lock-unlock';
-
-const { CustomSelectControlV2Legacy: CustomSelectControl } = unlock(
-	componentsPrivateApis
-);
 
 const CUSTOM_VALUE_SETTINGS = {
 	px: { max: 300, steps: 1 },
@@ -193,10 +188,12 @@ export default function SpacingInputControl( {
 		name: size.name,
 	} ) );
 
-	const marks = spacingSizes.map( ( _newValue, index ) => ( {
-		value: index,
-		label: undefined,
-	} ) );
+	const marks = spacingSizes
+		.slice( 1, spacingSizes.length - 1 )
+		.map( ( _newValue, index ) => ( {
+			value: index + 1,
+			label: undefined,
+		} ) );
 
 	const sideLabel =
 		ALL_SIDES.includes( side ) && showSideInLabel ? LABELS[ side ] : '';
@@ -252,6 +249,7 @@ export default function SpacingInputControl( {
 						} }
 					/>
 					<RangeControl
+						__next40pxDefaultSize
 						onMouseOver={ onMouseOver }
 						onMouseOut={ onMouseOut }
 						onFocus={ onMouseOver }
@@ -266,11 +264,14 @@ export default function SpacingInputControl( {
 						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"
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
new file mode 100644
index 0000000000000..e9ca68aaa2b31
--- /dev/null
+++ b/packages/block-editor/src/components/spacing-sizes-control/linked-button.js
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Tooltip } from '@wordpress/components';
+import { link, linkOff } from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+
+export default function LinkedButton( { isLinked, ...props } ) {
+	const label = isLinked
+		? sprintf(
+				// translators: 1. Type of spacing being modified (padding, margin, etc).
+				__( 'Unlink %1$s' ),
+				props.label.toLowerCase()
+		  ).trim()
+		: sprintf(
+				// translators: 1. Type of spacing being modified (padding, margin, etc).
+				__( 'Link %1$s' ),
+				props.label.toLowerCase()
+		  ).trim();
+
+	return (
+		<Tooltip text={ label }>
+			<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/sides-dropdown/index.js b/packages/block-editor/src/components/spacing-sizes-control/sides-dropdown/index.js
deleted file mode 100644
index e399efa5b4467..0000000000000
--- a/packages/block-editor/src/components/spacing-sizes-control/sides-dropdown/index.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { DropdownMenu, Icon, MenuGroup, MenuItem } from '@wordpress/components';
-import { check } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { getSupportedMenuItems, VIEWS } from '../utils';
-
-const checkIcon = <Icon icon={ check } size={ 24 } />;
-
-export default function SidesDropdown( {
-	label: labelProp,
-	onChange,
-	sides,
-	value,
-} ) {
-	if ( ! sides || ! sides.length ) {
-		return;
-	}
-
-	const supportedItems = getSupportedMenuItems( sides );
-	const sideIcon = supportedItems[ value ].icon;
-	const { custom: customItem, ...menuItems } = supportedItems;
-
-	return (
-		<DropdownMenu
-			icon={ sideIcon }
-			label={ labelProp }
-			className="spacing-sizes-control__dropdown"
-			toggleProps={ { size: 'small' } }
-		>
-			{ ( { onClose } ) => {
-				return (
-					<>
-						<MenuGroup>
-							{ Object.entries( menuItems ).map(
-								( [ slug, { label, icon } ] ) => {
-									const isSelected = value === slug;
-									return (
-										<MenuItem
-											key={ slug }
-											icon={ icon }
-											iconPosition="left"
-											isSelected={ isSelected }
-											role="menuitemradio"
-											onClick={ () => {
-												onChange( slug );
-												onClose();
-											} }
-											suffix={
-												isSelected
-													? checkIcon
-													: undefined
-											}
-										>
-											{ label }
-										</MenuItem>
-									);
-								}
-							) }
-						</MenuGroup>
-						{ !! customItem && (
-							<MenuGroup>
-								<MenuItem
-									icon={ customItem.icon }
-									iconPosition="left"
-									isSelected={ value === VIEWS.custom }
-									role="menuitemradio"
-									onClick={ () => {
-										onChange( VIEWS.custom );
-										onClose();
-									} }
-									suffix={
-										value === VIEWS.custom
-											? checkIcon
-											: undefined
-									}
-								>
-									{ customItem.label }
-								</MenuItem>
-							</MenuGroup>
-						) }
-					</>
-				);
-			} }
-		</DropdownMenu>
-	);
-}
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 2fb33b5c565fb..a387e5369d01e 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/style.scss
+++ b/packages/block-editor/src/components/spacing-sizes-control/style.scss
@@ -4,34 +4,35 @@
 		margin-bottom: 0;
 	}
 
+	.is-marked {
+		.components-range-control__track {
+			transition: width ease 0.1s;
+			@include reduce-motion("transition");
+		}
+
+		.components-range-control__thumb-wrapper {
+			transition: left ease 0.1s;
+			@include reduce-motion("transition");
+		}
+	}
+
 	.spacing-sizes-control__range-control,
 	.spacing-sizes-control__custom-value-range {
-		height: 40px;
-		/* Vertically center the RangeControl until it has true 40px height. */
-		display: flex;
-		align-items: center;
-		margin-bottom: 0;
 		flex: 1;
-
-		> .components-base-control__field {
-			/* Fixes RangeControl contents when the outer wrapper is flex */
-			flex: 1;
-		}
+		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;
-		}
 	}
 
 	.components-range-control__thumb-wrapper {
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 a631cbfcff3ef..a8440bb5be8ca 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
@@ -373,47 +373,39 @@ describe( 'getInitialView', () => {
 				getInitialView( { top: '1em', right: '10px' }, ALL_SIDES )
 			).toBe( VIEWS.custom );
 		} );
-		it( 'should not return custom view if there is only a single side value', () => {
-			expect( getInitialView( { top: '1em' }, ALL_SIDES ) ).not.toBe(
-				VIEWS.custom
-			);
-		} );
-	} );
-
-	describe( 'Single side view', () => {
-		it( 'should return single side when only single side supported', () => {
-			expect( getInitialView( { top: '1em' }, [ 'top' ] ) ).toBe(
-				VIEWS.top
-			);
-		} );
-
-		it( 'should return the single side view if there is only a single side value set and supported sides > 1', () => {
+		it( 'should return custom view if there is only a single side value', () => {
 			expect( getInitialView( { top: '1em' }, ALL_SIDES ) ).toBe(
-				VIEWS.top
-			);
-			expect( getInitialView( { right: '1em' }, ALL_SIDES ) ).toBe(
-				VIEWS.right
-			);
-			expect( getInitialView( { bottom: '1em' }, ALL_SIDES ) ).toBe(
-				VIEWS.bottom
-			);
-			expect( getInitialView( { left: '1em' }, ALL_SIDES ) ).toBe(
-				VIEWS.left
+				VIEWS.custom
 			);
 		} );
-		it( 'should return single side view when only one side is supported', () => {
+		it( 'should return custom view even if only single side supported', () => {
 			expect( getInitialView( { top: '1em' }, [ 'top' ] ) ).toBe(
-				VIEWS.top
+				VIEWS.custom
 			);
 			expect( getInitialView( { right: '1em' }, [ 'right' ] ) ).toBe(
-				VIEWS.right
+				VIEWS.custom
 			);
 			expect( getInitialView( { bottom: '1em' }, [ 'bottom' ] ) ).toBe(
-				VIEWS.bottom
+				VIEWS.custom
 			);
 			expect( getInitialView( { left: '1em' }, [ 'left' ] ) ).toBe(
-				VIEWS.left
+				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 91c5a91934f6e..046bee98761bf 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/utils.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/utils.js
@@ -363,6 +363,10 @@ export function getInitialView( values = {}, sides ) {
 		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 ) &&
@@ -371,9 +375,9 @@ export function getInitialView( values = {}, sides ) {
 		return VIEWS.axial;
 	}
 
-	// Single side.
+	// Only axial sides are supported and single value defined.
 	// - Ensure the side returned is the first side that has a value.
-	if ( sideValues.length === 1 ) {
+	if ( hasOnlyAxialSides && sideValues.length === 1 ) {
 		let side;
 
 		Object.entries( values ).some( ( [ key, value ] ) => {
diff --git a/packages/block-editor/src/components/tabbed-sidebar/style.scss b/packages/block-editor/src/components/tabbed-sidebar/style.scss
index e392cf955ed06..f7fba1c000346 100644
--- a/packages/block-editor/src/components/tabbed-sidebar/style.scss
+++ b/packages/block-editor/src/components/tabbed-sidebar/style.scss
@@ -1,13 +1,10 @@
 .block-editor-tabbed-sidebar {
+	background-color: $white;
 	height: 100%;
 	display: flex;
 	flex-direction: column;
 	flex-grow: 1;
 	overflow: hidden;
-
-	@include break-medium() {
-		width: 350px;
-	}
 }
 
 .block-editor-tabbed-sidebar__tablist-and-close-button {
@@ -26,22 +23,7 @@
 }
 
 .block-editor-tabbed-sidebar__tablist {
-	box-sizing: border-box;
-	flex-grow: 1;
 	margin-bottom: -$border-width;
-	width: 100%;
-}
-
-.block-editor-tabbed-sidebar__tab {
-	flex-grow: 1;
-	margin-bottom: -$border-width;
-
-	&[id$="reusable"] {
-		flex-grow: inherit;
-		// These are to align the `reusable` icon with the search icon.
-		padding-left: $grid-unit-20;
-		padding-right: $grid-unit-20;
-	}
 }
 
 .block-editor-tabbed-sidebar__tabpanel {
diff --git a/packages/block-editor/src/components/text-alignment-control/index.js b/packages/block-editor/src/components/text-alignment-control/index.js
index 88a6fe274ea09..6eeaad784db0f 100644
--- a/packages/block-editor/src/components/text-alignment-control/index.js
+++ b/packages/block-editor/src/components/text-alignment-control/index.js
@@ -14,11 +14,10 @@ import {
 	alignJustify,
 } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import SegmentedTextControl from '../segmented-text-control';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 
 const TEXT_ALIGNMENT_OPTIONS = [
 	{
@@ -75,9 +74,11 @@ export default function TextAlignmentControl( {
 	}
 
 	return (
-		<SegmentedTextControl
+		<ToggleGroupControl
+			isDeselectable
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ __( 'Text alignment' ) }
-			options={ validOptions }
 			className={ clsx(
 				'block-editor-text-alignment-control',
 				className
@@ -86,6 +87,17 @@ export default function TextAlignmentControl( {
 			onChange={ ( newValue ) => {
 				onChange( newValue === value ? undefined : newValue );
 			} }
-		/>
+		>
+			{ validOptions.map( ( option ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ option.value }
+						value={ option.value }
+						icon={ option.icon }
+						label={ option.label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }
diff --git a/packages/block-editor/src/components/text-decoration-control/index.js b/packages/block-editor/src/components/text-decoration-control/index.js
index d06632afdbb3c..720f3d2d9558e 100644
--- a/packages/block-editor/src/components/text-decoration-control/index.js
+++ b/packages/block-editor/src/components/text-decoration-control/index.js
@@ -8,11 +8,10 @@ import clsx from 'clsx';
  */
 import { reset, formatStrikethrough, formatUnderline } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import SegmentedTextControl from '../segmented-text-control';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 
 const TEXT_DECORATIONS = [
 	{
@@ -48,9 +47,11 @@ export default function TextDecorationControl( {
 	className,
 } ) {
 	return (
-		<SegmentedTextControl
+		<ToggleGroupControl
+			isDeselectable
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ __( 'Decoration' ) }
-			options={ TEXT_DECORATIONS }
 			className={ clsx(
 				'block-editor-text-decoration-control',
 				className
@@ -59,6 +60,17 @@ export default function TextDecorationControl( {
 			onChange={ ( newValue ) => {
 				onChange( newValue === value ? undefined : newValue );
 			} }
-		/>
+		>
+			{ TEXT_DECORATIONS.map( ( option ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ option.value }
+						value={ option.value }
+						icon={ option.icon }
+						label={ option.label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }
diff --git a/packages/block-editor/src/components/text-decoration-control/stories/index.story.js b/packages/block-editor/src/components/text-decoration-control/stories/index.story.js
index cb50e4cd6c6f7..2212b484185cd 100644
--- a/packages/block-editor/src/components/text-decoration-control/stories/index.story.js
+++ b/packages/block-editor/src/components/text-decoration-control/stories/index.story.js
@@ -13,10 +13,6 @@ export default {
 	component: TextDecorationControl,
 	argTypes: {
 		onChange: { action: 'onChange' },
-		size: {
-			options: [ 'default', '__unstable-large' ],
-			control: { type: 'radio' },
-		},
 	},
 };
 
diff --git a/packages/block-editor/src/components/text-transform-control/index.js b/packages/block-editor/src/components/text-transform-control/index.js
index f448a55ed946c..a3183e630c328 100644
--- a/packages/block-editor/src/components/text-transform-control/index.js
+++ b/packages/block-editor/src/components/text-transform-control/index.js
@@ -13,11 +13,10 @@ import {
 	formatLowercase,
 	formatUppercase,
 } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import SegmentedTextControl from '../segmented-text-control';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 
 const TEXT_TRANSFORMS = [
 	{
@@ -54,9 +53,11 @@ const TEXT_TRANSFORMS = [
  */
 export default function TextTransformControl( { className, value, onChange } ) {
 	return (
-		<SegmentedTextControl
+		<ToggleGroupControl
+			isDeselectable
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ __( 'Letter case' ) }
-			options={ TEXT_TRANSFORMS }
 			className={ clsx(
 				'block-editor-text-transform-control',
 				className
@@ -65,6 +66,17 @@ export default function TextTransformControl( { className, value, onChange } ) {
 			onChange={ ( newValue ) => {
 				onChange( newValue === value ? undefined : newValue );
 			} }
-		/>
+		>
+			{ TEXT_TRANSFORMS.map( ( option ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ option.value }
+						value={ option.value }
+						icon={ option.icon }
+						label={ option.label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }
diff --git a/packages/block-editor/src/components/text-transform-control/stories/index.story.js b/packages/block-editor/src/components/text-transform-control/stories/index.story.js
index 3219d714257e8..96dd8ed479dc4 100644
--- a/packages/block-editor/src/components/text-transform-control/stories/index.story.js
+++ b/packages/block-editor/src/components/text-transform-control/stories/index.story.js
@@ -13,10 +13,6 @@ export default {
 	component: TextTransformControl,
 	argTypes: {
 		onChange: { action: 'onChange' },
-		size: {
-			options: [ 'default', '__unstable-large' ],
-			control: { type: 'radio' },
-		},
 	},
 };
 
diff --git a/packages/block-editor/src/components/tool-selector/index.js b/packages/block-editor/src/components/tool-selector/index.js
index 1e93a18cf6bb9..fbbf03af7921a 100644
--- a/packages/block-editor/src/components/tool-selector/index.js
+++ b/packages/block-editor/src/components/tool-selector/index.js
@@ -18,6 +18,7 @@ import { Icon, edit as editIcon } from '@wordpress/icons';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 const selectIcon = (
 	<SVG
@@ -35,15 +36,18 @@ function ToolSelector( props, ref ) {
 		( select ) => select( blockEditorStore ).__unstableGetEditorMode(),
 		[]
 	);
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const { __unstableSetEditorMode } = unlock(
+		useDispatch( blockEditorStore )
+	);
 
 	return (
 		<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 }
@@ -54,7 +58,11 @@ function ToolSelector( props, ref ) {
 			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'
@@ -62,29 +70,31 @@ function ToolSelector( props, ref ) {
 							onSelect={ __unstableSetEditorMode }
 							choices={ [
 								{
-									value: 'edit',
+									value: 'navigation',
 									label: (
 										<>
 											<Icon icon={ editIcon } />
-											{ __( 'Edit' ) }
+											{ __( 'Write' ) }
 										</>
 									),
+									info: __( 'Focus on content.' ),
 								},
 								{
-									value: 'navigation',
+									value: 'edit',
 									label: (
 										<>
 											{ selectIcon }
-											{ __( 'Select' ) }
+											{ __( 'Design' ) }
 										</>
 									),
+									info: __( 'Edit layout and styles.' ),
 								},
 							] }
 						/>
 					</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 03774fe0f6b9d..07ca91d346d90 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/url-input/README.md b/packages/block-editor/src/components/url-input/README.md
index 9d3e340371a60..714f7f062990f 100644
--- a/packages/block-editor/src/components/url-input/README.md
+++ b/packages/block-editor/src/components/url-input/README.md
@@ -130,10 +130,6 @@ When hiding the URLInput using CSS (as is sometimes done for accessibility purpo
 
 This prop allows the suggestions list to be programmatically not rendered by passing a boolean—it can be `true` to make sure suggestions aren't rendered, or `false`/`undefined` to fall back to the default behaviour of showing suggestions when matching autocompletion items are found.
 
-### `__nextHasNoMarginBottom: 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.)
-
 ## Example
 
 
@@ -156,7 +152,6 @@ registerBlockType( /* ... */, {
 	edit( { className, attributes, setAttributes } ) {
 		return (
 			<URLInput
-				__nextHasNoMarginBottom
 				className={ className }
 				value={ attributes.url }
 				onChange={ ( url, post ) => setAttributes( { url, text: (post && post.title) || 'Click here' } ) }
diff --git a/packages/block-editor/src/components/url-input/button.js b/packages/block-editor/src/components/url-input/button.js
index fca054993e7c3..560f5cd7d3d5d 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,20 +55,25 @@ 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' ) }
 								onClick={ this.toggle }
 							/>
 							<URLInput
-								__nextHasNoMarginBottom
 								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 36e279f94cc79..cb058be5c932f 100644
--- a/packages/block-editor/src/components/url-input/index.js
+++ b/packages/block-editor/src/components/url-input/index.js
@@ -6,13 +6,13 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import deprecated from '@wordpress/deprecated';
 import { __, sprintf, _n } from '@wordpress/i18n';
 import { Component, createRef } from '@wordpress/element';
 import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
 import {
 	BaseControl,
 	Button,
+	__experimentalInputControl as InputControl,
 	Spinner,
 	withSpokenMessages,
 	Popover,
@@ -235,8 +235,8 @@ class URLInput extends Component {
 		this.suggestionsRequest = request;
 	}
 
-	onChange( event ) {
-		this.props.onChange( event.target.value );
+	onChange( newValue ) {
+		this.props.onChange( newValue );
 	}
 
 	onFocus() {
@@ -416,8 +416,6 @@ class URLInput extends Component {
 
 	renderControl() {
 		const {
-			/** Start opting into the new margin-free styles that will become the default in a future version. */
-			__nextHasNoMarginBottom = false,
 			label = null,
 			className,
 			isFullWidth,
@@ -451,7 +449,6 @@ class URLInput extends Component {
 			id: inputId,
 			value,
 			required: true,
-			className: 'block-editor-url-input__input',
 			type: 'text',
 			onChange: this.onChange,
 			onFocus: this.onFocus,
@@ -467,26 +464,16 @@ class URLInput extends Component {
 					? `${ suggestionOptionIdPrefix }-${ selectedSuggestion }`
 					: undefined,
 			ref: this.inputRef,
+			suffix: this.props.suffix,
 		};
 
 		if ( renderControl ) {
 			return renderControl( controlProps, inputProps, loading );
 		}
 
-		if ( ! __nextHasNoMarginBottom ) {
-			deprecated( 'Bottom margin styles for wp.blockEditor.URLInput', {
-				since: '6.2',
-				version: '6.5',
-				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',
-			} );
-		}
-
 		return (
-			<BaseControl
-				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-				{ ...controlProps }
-			>
-				<input { ...inputProps } />
+			<BaseControl __nextHasNoMarginBottom { ...controlProps }>
+				<InputControl { ...inputProps } __next40pxDefaultSize />
 				{ loading && <Spinner /> }
 			</BaseControl>
 		);
@@ -553,6 +540,7 @@ class URLInput extends Component {
 				>
 					{ suggestions.map( ( suggestion, index ) => (
 						<Button
+							__next40pxDefaultSize
 							{ ...buildSuggestionItemProps( suggestion, index ) }
 							key={ suggestion.id }
 							className={ clsx(
diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss
index f8d84ae43b808..ef37566f8e34e 100644
--- a/packages/block-editor/src/components/url-input/style.scss
+++ b/packages/block-editor/src/components/url-input/style.scss
@@ -9,33 +9,14 @@ $input-size: 300px;
 	position: relative;
 	padding: 1px;
 
-	input[type="text"] {
-		width: 100%;
-		@include break-small() {
-			width: $input-size;
-		}
-		padding: $input-padding;
-		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%;
 		}
@@ -49,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;
@@ -120,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;
 }
 
@@ -132,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-popover/image-url-input-ui.js b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
index a7b40b42f6dd7..c68cf5e58b953 100644
--- a/packages/block-editor/src/components/url-popover/image-url-input-ui.js
+++ b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
@@ -227,12 +227,14 @@ const ImageURLInputUI = ( {
 				checked={ linkTarget === '_blank' }
 			/>
 			<TextControl
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				label={ __( 'Link rel' ) }
 				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
 			/>
 			<TextControl
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				label={ __( 'Link CSS class' ) }
 				value={ linkClass || '' }
@@ -272,7 +274,7 @@ const ImageURLInputUI = ( {
 						icon={ linkOff }
 						label={ __( 'Disable expand on click' ) }
 						onClick={ () => {
-							onSetLightbox( false );
+							onSetLightbox?.( false );
 						} }
 						size="compact"
 					/>
@@ -302,7 +304,7 @@ const ImageURLInputUI = ( {
 						label={ __( 'Remove link' ) }
 						onClick={ () => {
 							onLinkRemove();
-							resetLightbox();
+							resetLightbox?.();
 						} }
 						size="compact"
 					/>
@@ -366,7 +368,7 @@ const ImageURLInputUI = ( {
 													LINK_DESTINATION_NONE,
 												href: '',
 											} );
-											onSetLightbox( true );
+											onSetLightbox?.( true );
 											stopEditLink();
 										} }
 									>
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 dc9d6d45590d3..e7d39eed764b8 100644
--- a/packages/block-editor/src/components/url-popover/link-editor.js
+++ b/packages/block-editor/src/components/url-popover/link-editor.js
@@ -31,7 +31,6 @@ export default function LinkEditor( {
 			{ ...props }
 		>
 			<URLInput
-				__nextHasNoMarginBottom
 				value={ value }
 				onChange={ onChangeInputValue }
 				autocompleteRef={ autocompleteRef }
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
index 5d548f964062a..ceed23eed6b84 100644
--- a/packages/block-editor/src/components/url-popover/stories/index.story.js
+++ b/packages/block-editor/src/components/url-popover/stories/index.story.js
@@ -22,7 +22,12 @@ const TestURLPopover = () => {
 
 	return (
 		<>
-			<Button onClick={ () => setVisiblility( true ) }>Edit URL</Button>
+			<Button
+				__next40pxDefaultSize
+				onClick={ () => setVisiblility( true ) }
+			>
+				Edit URL
+			</Button>
 			{ isVisible && (
 				<URLPopover
 					onClose={ close }
@@ -37,6 +42,7 @@ const TestURLPopover = () => {
 					<form onSubmit={ close }>
 						<input type="url" value={ url } onChange={ setUrl } />
 						<Button
+							__next40pxDefaultSize
 							icon={ keyboardReturn }
 							label={ __( 'Apply' ) }
 							type="submit"
diff --git a/packages/block-editor/src/components/use-block-commands/index.js b/packages/block-editor/src/components/use-block-commands/index.js
index 8a09999ecdff3..c88ec4e537892 100644
--- a/packages/block-editor/src/components/use-block-commands/index.js
+++ b/packages/block-editor/src/components/use-block-commands/index.js
@@ -16,7 +16,6 @@ import {
 	plus as add,
 	group,
 	ungroup,
-	moveTo as move,
 } from '@wordpress/icons';
 
 /**
@@ -127,59 +126,6 @@ export const useTransformCommands = () => {
 	return { isLoading: false, commands };
 };
 
-const useActionsCommands = () => {
-	const { clientIds } = useSelect( ( select ) => {
-		const { getSelectedBlockClientIds } = select( blockEditorStore );
-		const selectedBlockClientIds = getSelectedBlockClientIds();
-
-		return {
-			clientIds: selectedBlockClientIds,
-		};
-	}, [] );
-
-	const { getBlockRootClientId, canMoveBlocks, getBlockCount } =
-		useSelect( blockEditorStore );
-
-	const { setBlockMovingClientId, setNavigationMode, selectBlock } =
-		useDispatch( blockEditorStore );
-
-	if ( ! clientIds || clientIds.length < 1 ) {
-		return { isLoading: false, commands: [] };
-	}
-
-	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-
-	const canMove =
-		canMoveBlocks( clientIds ) && getBlockCount( rootClientId ) !== 1;
-
-	const commands = [];
-
-	if ( canMove ) {
-		commands.push( {
-			name: 'move-to',
-			label: __( 'Move to' ),
-			callback: () => {
-				setNavigationMode( true );
-				selectBlock( clientIds[ 0 ] );
-				setBlockMovingClientId( clientIds[ 0 ] );
-			},
-			icon: move,
-		} );
-	}
-
-	return {
-		isLoading: false,
-		commands: commands.map( ( command ) => ( {
-			...command,
-			name: 'core/block-editor/action-' + command.name,
-			callback: ( { close } ) => {
-				command.callback();
-				close();
-			},
-		} ) ),
-	};
-};
-
 const useQuickActionsCommands = () => {
 	const { clientIds, isUngroupable, isGroupable } = useSelect( ( select ) => {
 		const {
@@ -344,10 +290,6 @@ export const useBlockCommands = () => {
 		name: 'core/block-editor/blockTransforms',
 		hook: useTransformCommands,
 	} );
-	useCommandLoader( {
-		name: 'core/block-editor/blockActions',
-		hook: useActionsCommands,
-	} );
 	useCommandLoader( {
 		name: 'core/block-editor/blockQuickActions',
 		hook: useQuickActionsCommands,
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 857a132f1f9fa..ff4d52aaa493b 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
@@ -274,6 +274,23 @@ export function isDropTargetValid(
 	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.dataset.isInsertionPoint
+	);
+}
+
 /**
  * @typedef  {Object} WPBlockDropZoneConfig
  * @property {?HTMLElement} dropZoneElement Optional element to be used as the drop zone.
@@ -301,8 +318,10 @@ export default function useBlockDropZone( {
 		operation: 'insert',
 	} );
 
-	const { getBlockType } = useSelect( blocksStore );
+	const { getBlockType, getBlockVariations, getGroupingBlockName } =
+		useSelect( blocksStore );
 	const {
+		canInsertBlockType,
 		getBlockListSettings,
 		getBlocks,
 		getBlockIndex,
@@ -310,6 +329,9 @@ export default function useBlockDropZone( {
 		getBlockNamesByClientId,
 		getAllowedBlocks,
 		isDragging,
+		isGroupable,
+		isZoomOutMode,
+		getSectionRootClientId,
 	} = unlock( useSelect( blockEditorStore ) );
 	const {
 		showInsertionPoint,
@@ -340,6 +362,7 @@ export default function useBlockDropZone( {
 				const targetBlockName = getBlockNamesByClientId( [
 					targetRootClientId,
 				] )[ 0 ];
+
 				const draggedBlockNames = getBlockNamesByClientId(
 					getDraggedBlockClientIds()
 				);
@@ -349,10 +372,23 @@ export default function useBlockDropZone( {
 					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 (
+					isZoomOutMode() &&
+					sectionRootClientId !== targetRootClientId
+				) {
+					return;
+				}
+
 				const blocks = getBlocks( targetRootClientId );
 
 				// The block list is empty, don't show the insertion point but still allow dropping.
@@ -385,21 +421,70 @@ export default function useBlockDropZone( {
 					};
 				} );
 
+				const dropTargetPosition = getDropTargetPosition(
+					blocksData,
+					{ x: event.clientX, y: event.clientY },
+					getBlockListSettings( targetRootClientId )?.orientation,
+					{
+						dropZoneElement,
+						parentBlockClientId,
+						parentBlockOrientation: parentBlockClientId
+							? getBlockListSettings( parentBlockClientId )
+									?.orientation
+							: undefined,
+						rootBlockIndex: getBlockIndex( targetRootClientId ),
+					}
+				);
+
 				const [ targetIndex, operation, nearestSide ] =
-					getDropTargetPosition(
-						blocksData,
-						{ x: event.clientX, y: event.clientY },
-						getBlockListSettings( targetRootClientId )?.orientation,
-						{
-							dropZoneElement,
-							parentBlockClientId,
-							parentBlockOrientation: parentBlockClientId
-								? getBlockListSettings( parentBlockClientId )
-										?.orientation
-								: undefined,
-							rootBlockIndex: getBlockIndex( targetRootClientId ),
-						}
+					dropTargetPosition;
+
+				if ( isZoomOutMode() && 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( {
@@ -422,20 +507,26 @@ export default function useBlockDropZone( {
 				} );
 			},
 			[
+				isDragging,
 				getAllowedBlocks,
 				targetRootClientId,
 				getBlockNamesByClientId,
 				getDraggedBlockClientIds,
 				getBlockType,
+				getSectionRootClientId,
+				isZoomOutMode,
 				getBlocks,
 				getBlockListSettings,
 				dropZoneElement,
 				parentBlockClientId,
 				getBlockIndex,
 				registry,
-				showInsertionPoint,
-				isDragging,
 				startDragging,
+				showInsertionPoint,
+				canInsertBlockType,
+				isGroupable,
+				getBlockVariations,
+				getGroupingBlockName,
 			]
 		),
 		200
@@ -451,7 +542,18 @@ 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();
 		},
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 420cd398edfa3..75b9a44e166f5 100644
--- a/packages/block-editor/src/components/use-on-block-drop/index.js
+++ b/packages/block-editor/src/components/use-on-block-drop/index.js
@@ -232,7 +232,6 @@ export default function useOnBlockDrop(
 		getBlocksByClientId,
 		getSettings,
 		getBlock,
-		isGroupable,
 	} = useSelect( blockEditorStore );
 	const { getGroupingBlockName } = useSelect( blocksStore );
 	const {
@@ -255,17 +254,11 @@ export default function useOnBlockDrop(
 			if ( ! Array.isArray( blocks ) ) {
 				blocks = [ blocks ];
 			}
-
 			const clientIds = getBlockOrder( targetRootClientId );
 			const clientId = clientIds[ targetBlockIndex ];
-			const blocksClientIds = blocks.map( ( block ) => block.clientId );
-			const areGroupableBlocks = isGroupable( [
-				...blocksClientIds,
-				clientId,
-			] );
 			if ( operation === 'replace' ) {
 				replaceBlocks( clientId, blocks, undefined, initialPosition );
-			} else if ( operation === 'group' && areGroupableBlocks ) {
+			} else if ( operation === 'group' ) {
 				const targetBlock = getBlock( clientId );
 				if ( nearestSide === 'left' ) {
 					blocks.push( targetBlock );
@@ -325,7 +318,6 @@ export default function useOnBlockDrop(
 			getBlockOrder,
 			targetRootClientId,
 			targetBlockIndex,
-			isGroupable,
 			operation,
 			replaceBlocks,
 			getBlock,
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 a843f16005636..7243b0f1b0b82 100644
--- a/packages/block-editor/src/components/use-resize-canvas/index.js
+++ b/packages/block-editor/src/components/use-resize-canvas/index.js
@@ -43,7 +43,7 @@ export default function useResizeCanvas( deviceType ) {
 		return deviceWidth < actualWidth ? deviceWidth : actualWidth;
 	};
 
-	const marginValue = () => ( window.innerHeight < 800 ? 36 : 72 );
+	const marginValue = () => ( window.innerHeight < 800 ? 36 : 64 );
 
 	const contentInlineStyles = ( device ) => {
 		const height = device === 'Mobile' ? '768px' : '1024px';
@@ -62,8 +62,6 @@ export default function useResizeCanvas( deviceType ) {
 					marginLeft: marginHorizontal,
 					marginRight: marginHorizontal,
 					height,
-					borderRadius: '2px 2px 2px 2px',
-					border: '1px solid #ddd',
 					overflowY: 'auto',
 				};
 			default:
diff --git a/packages/block-editor/src/components/use-settings/index.js b/packages/block-editor/src/components/use-settings/index.js
index b0410b404d5e9..e356260c2d6b3 100644
--- a/packages/block-editor/src/components/use-settings/index.js
+++ b/packages/block-editor/src/components/use-settings/index.js
@@ -43,9 +43,10 @@ export function useSettings( ...paths ) {
  * 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.
- * @deprecated 6.5.0 Use useSettings instead.
  * @example
  * ```js
  * const isEnabled = useSetting( 'typography.dropCap' );
diff --git a/packages/block-editor/src/components/warning/content.scss b/packages/block-editor/src/components/warning/content.scss
index f4eeb253c1c2f..9380a224b2ff9 100644
--- a/packages/block-editor/src/components/warning/content.scss
+++ b/packages/block-editor/src/components/warning/content.scss
@@ -7,7 +7,7 @@
 
 	// Block UI appearance.
 	border: $border-width solid $gray-900;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	background-color: $white;
 
 	.block-editor-warning__message {
@@ -30,21 +30,14 @@
 		flex-wrap: wrap;
 		align-items: baseline;
 		width: 100%;
+		gap: $grid-unit-15;
 	}
 
 	.block-editor-warning__actions {
 		align-items: center;
 		display: flex;
-		margin-top: 1em;
+		gap: $grid-unit-10;
 	}
-
-	.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 {
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 57082f90c055f..c7ce5d259d875 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
@@ -4,6 +4,7 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 import { create } from '@wordpress/rich-text';
+import { isSelectionForward } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -53,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 ];
 }
 
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 1394fbbd37e25..216e7b6e04ad5 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';
@@ -19,29 +19,26 @@ export default function useTabNav() {
 	const focusCaptureBeforeRef = useRef();
 	const focusCaptureAfterRef = useRef();
 
-	const { hasMultiSelection, getSelectedBlockClientId, getBlockCount } =
-		useSelect( blockEditorStore );
-	const { setNavigationMode, setLastFocus } = unlock(
-		useDispatch( blockEditorStore )
-	);
-	const isNavigationMode = useSelect(
-		( select ) => select( blockEditorStore ).isNavigationMode(),
-		[]
-	);
-
-	const { getLastFocus } = unlock( useSelect( blockEditorStore ) );
-
-	// Don't allow tabbing to this element in Navigation mode.
-	const focusCaptureTabIndex = ! isNavigationMode ? '0' : undefined;
+	const {
+		hasMultiSelection,
+		getSelectedBlockClientId,
+		getBlockCount,
+		getBlockOrder,
+		getLastFocus,
+		getSectionRootClientId,
+		isZoomOut,
+		__unstableGetEditorMode,
+	} = 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 ) {
 		// 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() ) {
@@ -55,9 +52,25 @@ export default function useTabNav() {
 					)
 					.focus();
 			}
-		} else {
-			setNavigationMode( true );
+		}
+		// In "compose" mode without a selected ID, we want to place focus on the section root when tabbing to the canvas.
+		else if ( __unstableGetEditorMode() === 'zoom-out' && 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 {
+				container.current
+					.querySelector( `[data-block="${ sectionRootClientId }"]` )
+					.focus();
+			}
+		} else {
 			const canvasElement =
 				container.current.ownerDocument === event.target.ownerDocument
 					? container.current
@@ -73,7 +86,6 @@ export default function useTabNav() {
 				const next = isBefore
 					? tabbables[ 0 ]
 					: tabbables[ tabbables.length - 1 ];
-
 				next.focus();
 			}
 		}
@@ -82,7 +94,7 @@ export default function useTabNav() {
 	const before = (
 		<div
 			ref={ focusCaptureBeforeRef }
-			tabIndex={ focusCaptureTabIndex }
+			tabIndex="0"
 			onFocus={ onFocusCapture }
 		/>
 	);
@@ -90,7 +102,7 @@ export default function useTabNav() {
 	const after = (
 		<div
 			ref={ focusCaptureAfterRef }
-			tabIndex={ focusCaptureTabIndex }
+			tabIndex="0"
 			onFocus={ onFocusCapture }
 		/>
 	);
@@ -101,12 +113,6 @@ export default function useTabNav() {
 				return;
 			}
 
-			if ( event.keyCode === ESCAPE && ! hasMultiSelection() ) {
-				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
@@ -119,20 +125,6 @@ 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.
@@ -165,7 +157,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
diff --git a/packages/block-editor/src/components/writing-mode-control/index.js b/packages/block-editor/src/components/writing-mode-control/index.js
index 7732f54b1569a..bffccfd579c6b 100644
--- a/packages/block-editor/src/components/writing-mode-control/index.js
+++ b/packages/block-editor/src/components/writing-mode-control/index.js
@@ -8,11 +8,10 @@ import clsx from 'clsx';
  */
 import { __, isRTL } from '@wordpress/i18n';
 import { textHorizontal, textVertical } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import SegmentedTextControl from '../segmented-text-control';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 
 const WRITING_MODES = [
 	{
@@ -39,14 +38,27 @@ const WRITING_MODES = [
  */
 export default function WritingModeControl( { className, value, onChange } ) {
 	return (
-		<SegmentedTextControl
+		<ToggleGroupControl
+			isDeselectable
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ __( 'Orientation' ) }
-			options={ WRITING_MODES }
 			className={ clsx( 'block-editor-writing-mode-control', className ) }
 			value={ value }
 			onChange={ ( newValue ) => {
 				onChange( newValue === value ? undefined : newValue );
 			} }
-		/>
+		>
+			{ WRITING_MODES.map( ( option ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ option.value }
+						value={ option.value }
+						icon={ option.icon }
+						label={ option.label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }
diff --git a/packages/block-editor/src/content.scss b/packages/block-editor/src/content.scss
index 36d428dca6b76..1ef4e118fb1bb 100644
--- a/packages/block-editor/src/content.scss
+++ b/packages/block-editor/src/content.scss
@@ -8,7 +8,6 @@
 @import "./components/button-block-appender/content.scss";
 @import "./components/default-block-appender/content.scss";
 @import "./components/iframe/content.scss";
-@import "./components/inner-blocks/content.scss";
 @import "./components/media-placeholder/content.scss";
 @import "./components/plain-text/content.scss";
 @import "./components/rich-text/content.scss";
diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
index cd0b017831b79..3755aecbcb9d0 100644
--- a/packages/block-editor/src/hooks/background.js
+++ b/packages/block-editor/src/hooks/background.js
@@ -16,16 +16,14 @@ import {
 	useHasBackgroundPanel,
 	hasBackgroundImageValue,
 } from '../components/global-styles/background-panel';
-import {
-	globalStylesDataKey,
-	globalStylesLinksDataKey,
-} from '../store/private-keys';
+import { globalStylesDataKey } from '../store/private-keys';
 
 export const BACKGROUND_SUPPORT_KEY = 'background';
 
-// Initial control values where no block style is set.
-const BACKGROUND_DEFAULT_VALUES = {
+// Initial control values.
+export const BACKGROUND_BLOCK_DEFAULT_VALUES = {
 	backgroundSize: 'cover',
+	backgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.
 };
 
 /**
@@ -55,31 +53,28 @@ export function hasBackgroundSupport( blockName, feature = 'any' ) {
 }
 
 export function setBackgroundStyleDefaults( backgroundStyle ) {
-	if ( ! backgroundStyle ) {
+	if ( ! backgroundStyle || ! backgroundStyle?.backgroundImage?.url ) {
 		return;
 	}
 
-	const backgroundImage = backgroundStyle?.backgroundImage;
 	let backgroundStylesWithDefaults;
 
 	// Set block background defaults.
-	if ( !! backgroundImage?.url ) {
-		if ( ! backgroundStyle?.backgroundSize ) {
-			backgroundStylesWithDefaults = {
-				backgroundSize: 'cover',
-			};
-		}
-
-		if (
-			'contain' === backgroundStyle?.backgroundSize &&
-			! backgroundStyle?.backgroundPosition
-		) {
-			backgroundStylesWithDefaults = {
-				backgroundPosition: 'center',
-			};
-		}
+	if ( ! backgroundStyle?.backgroundSize ) {
+		backgroundStylesWithDefaults = {
+			backgroundSize: BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundSize,
+		};
 	}
 
+	if (
+		'contain' === backgroundStyle?.backgroundSize &&
+		! backgroundStyle?.backgroundPosition
+	) {
+		backgroundStylesWithDefaults = {
+			backgroundPosition:
+				BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundPosition,
+		};
+	}
 	return backgroundStylesWithDefaults;
 }
 
@@ -138,15 +133,15 @@ export function BackgroundImagePanel( {
 	setAttributes,
 	settings,
 } ) {
-	const { style, inheritedValue, _links } = useSelect(
+	const { style, inheritedValue } = useSelect(
 		( select ) => {
 			const { getBlockAttributes, getSettings } =
 				select( blockEditorStore );
 			const _settings = getSettings();
 			return {
 				style: getBlockAttributes( clientId )?.style,
-				_links: _settings[ globalStylesLinksDataKey ],
 				/*
+				 * To ensure we pass down the right inherited values:
 				 * @TODO 1. Pass inherited value down to all block style controls,
 				 *   See: packages/block-editor/src/hooks/style.js
 				 * @TODO 2. Add support for block style variations,
@@ -187,11 +182,10 @@ export function BackgroundImagePanel( {
 			inheritedValue={ inheritedValue }
 			as={ BackgroundInspectorControl }
 			panelId={ clientId }
-			defaultValues={ BACKGROUND_DEFAULT_VALUES }
+			defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
 			settings={ updatedSettings }
 			onChange={ onChange }
 			value={ style }
-			themeFileURIs={ _links?.[ 'wp:theme-file' ] }
 		/>
 	);
 }
diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js
index c61f586575a53..5c002613831ce 100644
--- a/packages/block-editor/src/hooks/block-bindings.js
+++ b/packages/block-editor/src/hooks/block-bindings.js
@@ -2,89 +2,295 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { store as blocksStore } from '@wordpress/blocks';
 import {
-	BaseControl,
-	PanelBody,
-	__experimentalHStack as HStack,
+	getBlockBindingsSource,
+	getBlockBindingsSources,
+} 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 } from '../hooks/use-bindings-attributes';
+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 { useBlockBindingsUtils } from '../utils/block-bindings';
+import { store as blockEditorStore } from '../store';
 
-export const BlockBindingsPanel = ( { name, metadata } ) => {
-	const { bindings } = metadata || {};
-	const { sources } = useSelect( ( select ) => {
-		const _sources = unlock(
-			select( blocksStore )
-		).getAllBlockBindingsSources();
+const { DropdownMenuV2 } = 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 registeredSources = getBlockBindingsSources();
+	const { updateBlockBindings } = useBlockBindingsUtils();
+	const currentKey = binding?.args?.key;
+	return (
+		<>
+			{ Object.entries( fieldsList ).map( ( [ name, fields ], i ) => (
+				<Fragment key={ name }>
+					<DropdownMenuV2.Group>
+						{ Object.keys( fieldsList ).length > 1 && (
+							<DropdownMenuV2.GroupLabel>
+								{ registeredSources[ name ].label }
+							</DropdownMenuV2.GroupLabel>
+						) }
+						{ Object.entries( fields ).map( ( [ key, args ] ) => (
+							<DropdownMenuV2.RadioItem
+								key={ key }
+								onChange={ () =>
+									updateBlockBindings( {
+										[ attribute ]: {
+											source: name,
+											args: { key },
+										},
+									} )
+								}
+								name={ attribute + '-binding' }
+								value={ key }
+								checked={ key === currentKey }
+							>
+								<DropdownMenuV2.ItemLabel>
+									{ args?.label }
+								</DropdownMenuV2.ItemLabel>
+								<DropdownMenuV2.ItemHelpText>
+									{ args?.value }
+								</DropdownMenuV2.ItemHelpText>
+							</DropdownMenuV2.RadioItem>
+						) ) }
+					</DropdownMenuV2.Group>
+					{ i !== Object.keys( fieldsList ).length - 1 && (
+						<DropdownMenuV2.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>
+	);
+}
 
-		return {
-			sources: _sources,
-		};
-	}, [] );
+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,
+							} );
+						} }
+					>
+						<DropdownMenuV2
+							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 }
+							/>
+						</DropdownMenuV2>
+					</ToolsPanelItem>
+				);
+			} ) }
+		</>
+	);
+}
+
+export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
+	const blockContext = useContext( BlockContext );
+	const { removeAllBlockBindings } = useBlockBindingsUtils();
+	const bindableAttributes = getBindableAttributes( blockName );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
-	if ( ! bindings ) {
+	// `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;
 	}
-
-	// Don't show not allowed attributes.
-	// Don't show the bindings connected to pattern overrides in the inspectors panel.
-	// TODO: Explore if this should be abstracted to let other sources decide.
+	// Filter bindings to only show bindable attributes and remove pattern overrides.
+	const { bindings } = metadata || {};
 	const filteredBindings = { ...bindings };
 	Object.keys( filteredBindings ).forEach( ( key ) => {
 		if (
-			! canBindAttribute( name, key ) ||
+			! canBindAttribute( blockName, key ) ||
 			filteredBindings[ key ].source === 'core/pattern-overrides'
 		) {
 			delete filteredBindings[ key ];
 		}
 	} );
 
-	if ( Object.keys( filteredBindings ).length === 0 ) {
+	// 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>
-			<PanelBody
-				title={ __( 'Attributes' ) }
-				className="components-panel__block-bindings-panel"
+		<InspectorControls group="bindings">
+			<ToolsPanel
+				label={ __( 'Attributes' ) }
+				resetAll={ () => {
+					removeAllBlockBindings();
+				} }
+				dropdownMenuProps={ dropdownMenuProps }
+				className="block-editor-bindings__panel"
 			>
-				<BaseControl
-					help={ __( 'Attributes connected to various sources.' ) }
-				>
-					<ItemGroup isBordered isSeparated size="large">
-						{ Object.keys( filteredBindings ).map( ( key ) => {
-							return (
-								<Item key={ key }>
-									<HStack>
-										<span>{ key }</span>
-										<span className="components-item__block-bindings-source">
-											{ sources[
-												filteredBindings[ key ].source
-											]
-												? sources[
-														filteredBindings[ key ]
-															.source
-												  ].label
-												: filteredBindings[ key ]
-														.source }
-										</span>
-									</HStack>
-								</Item>
-							);
-						} ) }
-					</ItemGroup>
-				</BaseControl>
-			</PanelBody>
+				<ItemGroup isBordered isSeparated>
+					{ readOnly ? (
+						<ReadOnlyBlockBindingsPanelItems
+							bindings={ filteredBindings }
+							fieldsList={ fieldsList }
+						/>
+					) : (
+						<EditableBlockBindingsPanelItems
+							attributes={ bindableAttributes }
+							bindings={ filteredBindings }
+							fieldsList={ fieldsList }
+						/>
+					) }
+				</ItemGroup>
+				<ItemGroup>
+					<Text variant="muted">
+						{ __(
+							'Attributes connected to custom fields or other dynamic data.'
+						) }
+					</Text>
+				</ItemGroup>
+			</ToolsPanel>
 		</InspectorControls>
 	);
 };
diff --git a/packages/block-editor/src/hooks/block-bindings.scss b/packages/block-editor/src/hooks/block-bindings.scss
index fd46674ad1142..e8f05895922f0 100644
--- a/packages/block-editor/src/hooks/block-bindings.scss
+++ b/packages/block-editor/src/hooks/block-bindings.scss
@@ -1,3 +1,6 @@
-.components-panel__block-bindings-panel .components-item__block-bindings-source {
-	color: $gray-700;
+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
index 04cd6d4cfc023..04a2313b629ba 100644
--- a/packages/block-editor/src/hooks/block-hooks.js
+++ b/packages/block-editor/src/hooks/block-hooks.js
@@ -3,18 +3,14 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Fragment, useMemo } from '@wordpress/element';
-import {
-	__experimentalHStack as HStack,
-	PanelBody,
-	ToggleControl,
-} from '@wordpress/components';
+import { PanelBody, ToggleControl } from '@wordpress/components';
 import { createBlock, store as blocksStore } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { BlockIcon, InspectorControls } from '../components';
+import { InspectorControls } from '../components';
 import { store as blockEditorStore } from '../store';
 
 const EMPTY_OBJECT = {};
@@ -201,16 +197,10 @@ function BlockHooksControlPure( {
 
 								return (
 									<ToggleControl
+										__nextHasNoMarginBottom
 										checked={ checked }
 										key={ block.title }
-										label={
-											<HStack justify="flex-start">
-												<BlockIcon
-													icon={ block.icon }
-												/>
-												<span>{ block.title }</span>
-											</HStack>
-										}
+										label={ block.title }
 										onChange={ () => {
 											if ( ! checked ) {
 												// Create and insert block.
diff --git a/packages/block-editor/src/hooks/block-hooks.scss b/packages/block-editor/src/hooks/block-hooks.scss
index 4d871233de482..03cabd638d868 100644
--- a/packages/block-editor/src/hooks/block-hooks.scss
+++ b/packages/block-editor/src/hooks/block-hooks.scss
@@ -1,12 +1,4 @@
 .block-editor-hooks__block-hooks {
-	/**
-	 * Since we're displaying the block icon alongside the block name,
-	 * we need to right-align the toggle.
-	 */
-	.components-toggle-control .components-h-stack {
-		flex-direction: row-reverse;
-	}
-
 	/**
 	 * Un-reverse the flex direction for the toggle's label.
 	 */
diff --git a/packages/block-editor/src/hooks/block-style-variation.js b/packages/block-editor/src/hooks/block-style-variation.js
index f302cf2aa3a2a..65582d0c0cf94 100644
--- a/packages/block-editor/src/hooks/block-style-variation.js
+++ b/packages/block-editor/src/hooks/block-style-variation.js
@@ -13,7 +13,7 @@ import {
 	toStyles,
 	getBlockSelectors,
 } from '../components/global-styles';
-import { useStyleOverride } from './utils';
+import { usePrivateStyleOverride } from './utils';
 import { getValueFromObjectPath } from '../utils/object';
 import { store as blockEditorStore } from '../store';
 import { globalStylesDataKey } from '../store/private-keys';
@@ -63,7 +63,7 @@ function getVariationNameFromClass( className, registeredStyles = [] ) {
 
 // A helper component to apply a style override using the useStyleOverride hook.
 function OverrideStyles( { override } ) {
-	useStyleOverride( override );
+	usePrivateStyleOverride( override );
 }
 
 /**
@@ -351,7 +351,7 @@ function useBlockProps( { name, className, clientId } ) {
 		);
 	}, [ variation, settings, styles, getBlockStyles, clientId ] );
 
-	useStyleOverride( {
+	usePrivateStyleOverride( {
 		id: `variation-${ clientId }`,
 		css: variationStyles,
 		__unstableType: 'variation',
diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js
index 7cca4b325b09d..f5e3bde31ce50 100644
--- a/packages/block-editor/src/hooks/content-lock-ui.js
+++ b/packages/block-editor/src/hooks/content-lock-ui.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarButton, MenuItem } from '@wordpress/components';
+import { ToolbarButton } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { useCallback } from '@wordpress/element';
@@ -10,7 +10,7 @@ import { useCallback } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
-import { BlockControls, BlockSettingsMenuControls } from '../components';
+import { BlockControls } from '../components';
 import { unlock } from '../lock-unlock';
 
 // The implementation of content locking is mainly in this file, although the mechanism
@@ -19,7 +19,7 @@ import { unlock } from '../lock-unlock';
 // 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, isSelected } ) {
+function ContentLockControlsPure( { clientId } ) {
 	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
 		( select ) => {
 			const {
@@ -36,9 +36,7 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 		[ clientId ]
 	);
 
-	const { stopEditingAsBlocks, modifyContentLockBlock } = unlock(
-		useDispatch( blockEditorStore )
-	);
+	const { stopEditingAsBlocks } = unlock( useDispatch( blockEditorStore ) );
 	const isContentLocked =
 		! isLockedByParent && templateLock === 'contentOnly';
 
@@ -51,38 +49,15 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 	}
 
 	const showStopEditingAsBlocks = isEditingAsBlocks && ! isContentLocked;
-	const showStartEditingAsBlocks =
-		! isEditingAsBlocks && isContentLocked && isSelected;
 
 	return (
-		<>
-			{ showStopEditingAsBlocks && (
-				<>
-					<BlockControls group="other">
-						<ToolbarButton onClick={ stopEditingAsBlockCallback }>
-							{ __( 'Done' ) }
-						</ToolbarButton>
-					</BlockControls>
-				</>
-			) }
-			{ showStartEditingAsBlocks && (
-				<BlockSettingsMenuControls>
-					{ ( { selectedClientIds, onClose } ) =>
-						selectedClientIds.length === 1 &&
-						selectedClientIds[ 0 ] === clientId && (
-							<MenuItem
-								onClick={ () => {
-									modifyContentLockBlock( clientId );
-									onClose();
-								} }
-							>
-								{ __( 'Modify' ) }
-							</MenuItem>
-						)
-					}
-				</BlockSettingsMenuControls>
-			) }
-		</>
+		showStopEditingAsBlocks && (
+			<BlockControls group="other">
+				<ToolbarButton onClick={ stopEditingAsBlockCallback }>
+					{ __( 'Done' ) }
+				</ToolbarButton>
+			</BlockControls>
+		)
 	);
 }
 
diff --git a/packages/block-editor/src/hooks/contrast-checker.js b/packages/block-editor/src/hooks/contrast-checker.js
index ef04da63e4946..6e503ae8f3319 100644
--- a/packages/block-editor/src/hooks/contrast-checker.js
+++ b/packages/block-editor/src/hooks/contrast-checker.js
@@ -7,7 +7,7 @@ import { useState, useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import ContrastChecker from '../components/contrast-checker';
-import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
@@ -17,23 +17,23 @@ export default function BlockColorContrastChecker( { clientId } ) {
 	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
 	const [ detectedColor, setDetectedColor ] = useState();
 	const [ detectedLinkColor, setDetectedLinkColor ] = useState();
-	const ref = useBlockRef( clientId );
+	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.
 	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect( () => {
-		if ( ! ref.current ) {
+		if ( ! blockEl ) {
 			return;
 		}
-		setDetectedColor( getComputedStyle( ref.current ).color );
+		setDetectedColor( getComputedStyle( blockEl ).color );
 
-		const firstLinkElement = ref.current?.querySelector( 'a' );
+		const firstLinkElement = blockEl.querySelector( 'a' );
 		if ( firstLinkElement && !! firstLinkElement.innerText ) {
 			setDetectedLinkColor( getComputedStyle( firstLinkElement ).color );
 		}
 
-		let backgroundColorNode = ref.current;
+		let backgroundColorNode = blockEl;
 		let backgroundColor =
 			getComputedStyle( backgroundColorNode ).backgroundColor;
 		while (
@@ -48,7 +48,7 @@ export default function BlockColorContrastChecker( { clientId } ) {
 		}
 
 		setDetectedBackgroundColor( backgroundColor );
-	} );
+	}, [ blockEl ] );
 
 	return (
 		<ContrastChecker
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index c52cec46051e0..dbd47831c4266 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -32,10 +32,10 @@ import {
 } from '../components/duotone/utils';
 import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
 import { scopeSelector } from '../components/global-styles/utils';
-import { useBlockSettings, useStyleOverride } from './utils';
+import { useBlockSettings, usePrivateStyleOverride } from './utils';
 import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
 import { useBlockEditingMode } from '../components/block-editing-mode';
-import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 
 const EMPTY_ARRAY = [];
 
@@ -251,10 +251,6 @@ function useDuotoneStyles( {
 	const selectors = duotoneSelector.split( ',' );
 
 	const selectorsScoped = selectors.map( ( selectorPart ) => {
-		// 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.
-
 		// 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.
@@ -265,7 +261,7 @@ function useDuotoneStyles( {
 
 	const isValidFilter = Array.isArray( colors ) || colors === 'unset';
 
-	useStyleOverride(
+	usePrivateStyleOverride(
 		isValidFilter
 			? {
 					css:
@@ -276,7 +272,7 @@ function useDuotoneStyles( {
 			  }
 			: undefined
 	);
-	useStyleOverride(
+	usePrivateStyleOverride(
 		isValidFilter
 			? {
 					assets:
@@ -318,8 +314,11 @@ function useDuotoneStyles( {
 	}, [ isValidFilter, blockElement, colors ] );
 }
 
+// Used for generating the instance ID
+const DUOTONE_BLOCK_PROPS_REFERENCE = {};
+
 function useBlockProps( { clientId, name, style } ) {
-	const id = useInstanceId( useBlockProps );
+	const id = useInstanceId( DUOTONE_BLOCK_PROPS_REFERENCE );
 	const selector = useMemo( () => {
 		const blockType = getBlockType( name );
 
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index b58ede2e9d389..66ff60b691b66 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -37,7 +37,6 @@ import './grid-visualizer';
 
 createBlockEditFilter(
 	[
-		blockBindingsPanel,
 		align,
 		textAlign,
 		anchor,
@@ -48,6 +47,7 @@ createBlockEditFilter(
 		layout,
 		contentLockUI,
 		blockHooks,
+		blockBindingsPanel,
 		childLayout,
 	].filter( Boolean )
 );
@@ -91,3 +91,4 @@ 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/layout-child.js b/packages/block-editor/src/hooks/layout-child.js
index 8beb50c1b8284..558d5e2cc626b 100644
--- a/packages/block-editor/src/hooks/layout-child.js
+++ b/packages/block-editor/src/hooks/layout-child.js
@@ -17,6 +17,9 @@ import {
 	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;
@@ -32,7 +35,7 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 	} = layout;
 	const parentLayout = useLayout() || {};
 	const { columnCount, minimumColumnWidth } = parentLayout;
-	const id = useInstanceId( useBlockPropsChildLayoutStyles );
+	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
diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index a19c5604701f6..54a376a0c6a4f 100644
--- a/packages/block-editor/src/hooks/layout.js
+++ b/packages/block-editor/src/hooks/layout.js
@@ -11,8 +11,8 @@ 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,
@@ -233,7 +233,6 @@ function LayoutPanelPure( {
 						<>
 							<ToggleControl
 								__nextHasNoMarginBottom
-								className="block-editor-hooks__toggle-control"
 								label={ __( 'Inner blocks use content width' ) }
 								checked={
 									layoutType?.name === 'constrained' ||
@@ -316,19 +315,26 @@ export default {
 
 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>
 	);
 }
 
diff --git a/packages/block-editor/src/hooks/layout.scss b/packages/block-editor/src/hooks/layout.scss
index 83a044e3cdca7..400b09490bbe5 100644
--- a/packages/block-editor/src/hooks/layout.scss
+++ b/packages/block-editor/src/hooks/layout.scss
@@ -1,31 +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-block-inspector .block-editor-hooks__layout-controls-unit-input {
-	margin-bottom: 0;
-}
-
-.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,
@@ -35,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/line-height.js b/packages/block-editor/src/hooks/line-height.js
index fc8bd194c1210..9c27b9d026972 100644
--- a/packages/block-editor/src/hooks/line-height.js
+++ b/packages/block-editor/src/hooks/line-height.js
@@ -39,7 +39,6 @@ export function LineHeightEdit( props ) {
 	return (
 		<LineHeightControl
 			__unstableInputWidth="100%"
-			__nextHasNoMarginBottom
 			value={ style?.typography?.lineHeight }
 			onChange={ onChange }
 			size="__unstable-large"
diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js
index 95a9c2198e4c7..bf1b730cd67d1 100644
--- a/packages/block-editor/src/hooks/position.js
+++ b/packages/block-editor/src/hooks/position.js
@@ -310,6 +310,9 @@ export default {
 	},
 };
 
+// Used for generating the instance ID
+const POSITION_BLOCK_PROPS_REFERENCE = {};
+
 function useBlockProps( { name, style } ) {
 	const hasPositionBlockSupport = hasBlockSupport(
 		name,
@@ -318,7 +321,7 @@ function useBlockProps( { name, style } ) {
 	const isPositionDisabled = useIsPositionDisabled( { name } );
 	const allowPositionStyles = hasPositionBlockSupport && ! isPositionDisabled;
 
-	const id = useInstanceId( useBlockProps );
+	const id = useInstanceId( POSITION_BLOCK_PROPS_REFERENCE );
 
 	// Higher specificity to override defaults in editor UI.
 	const positionSelector = `.wp-container-${ id }.wp-container-${ id }`;
diff --git a/packages/block-editor/src/hooks/spacing-visualizer.js b/packages/block-editor/src/hooks/spacing-visualizer.js
index 7189b0f480d2c..2f0abe8e0d293 100644
--- a/packages/block-editor/src/hooks/spacing-visualizer.js
+++ b/packages/block-editor/src/hooks/spacing-visualizer.js
@@ -14,7 +14,7 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
  * Internal dependencies
  */
 import BlockPopoverCover from '../components/block-popover/cover';
-import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 
 function SpacingVisualizer( { clientId, value, computeStyle, forceShow } ) {
 	const blockElement = useBlockElement( clientId );
@@ -36,16 +36,16 @@ function SpacingVisualizer( { clientId, value, computeStyle, forceShow } ) {
 		);
 	}, [ blockElement, value ] );
 
-	const previousValue = useRef( value );
+	const previousValueRef = useRef( value );
 	const [ isActive, setIsActive ] = useState( false );
 
 	useEffect( () => {
-		if ( isShallowEqual( value, previousValue.current ) || forceShow ) {
+		if ( isShallowEqual( value, previousValueRef.current ) || forceShow ) {
 			return;
 		}
 
 		setIsActive( true );
-		previousValue.current = value;
+		previousValueRef.current = value;
 
 		const timeout = setTimeout( () => {
 			setIsActive( false );
diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index 4cd3335022454..2dcc19f424b2c 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -381,10 +381,7 @@ function useBlockProps( { name, style } ) {
 		useBlockProps
 	) }`;
 
-	// 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.
-	const baseElementSelector = `.editor-styles-wrapper .${ blockElementsContainerIdentifier }`;
+	const baseElementSelector = `.${ blockElementsContainerIdentifier }`;
 	const blockElementStyles = style?.elements;
 
 	const styles = useMemo( () => {
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 0000000000000..030e88ae67fbd
--- /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/use-bindings-attributes.js b/packages/block-editor/src/hooks/use-bindings-attributes.js
index 410ad93bd971a..fdc617fda20c0 100644
--- a/packages/block-editor/src/hooks/use-bindings-attributes.js
+++ b/packages/block-editor/src/hooks/use-bindings-attributes.js
@@ -4,13 +4,15 @@
 import { store as blocksStore } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useRegistry, useSelect } from '@wordpress/data';
-import { useCallback, useMemo } from '@wordpress/element';
+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 */
@@ -90,17 +92,18 @@ export function canBindAttribute( blockName, 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 } = props;
-		const hasParentPattern = !! props.context[ 'pattern/overrides' ];
-		const hasPatternOverridesDefaultBinding =
-			props.attributes.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
-				?.source === 'core/pattern-overrides';
+		const { name, clientId, context, setAttributes } = props;
 		const blockBindings = useMemo(
 			() =>
 				replacePatternOverrideDefaultBindings(
@@ -114,72 +117,87 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 		// used purposely here to ensure `boundAttributes` is updated whenever
 		// there are attribute updates.
 		// `source.getValues` may also call a selector via `registry.select`.
-		const boundAttributes = useSelect( () => {
-			if ( ! blockBindings ) {
-				return;
-			}
+		const updatedContext = {};
+		const boundAttributes = useSelect(
+			( select ) => {
+				if ( ! blockBindings ) {
+					return;
+				}
 
-			const attributes = {};
+				const attributes = {};
 
-			const blockBindingsBySource = new Map();
+				const blockBindingsBySource = new Map();
 
-			for ( const [ attributeName, binding ] of Object.entries(
-				blockBindings
-			) ) {
-				const { source: sourceName, args: sourceArgs } = binding;
-				const source = sources[ sourceName ];
-				if (
-					! source?.getValues ||
-					! canBindAttribute( name, attributeName )
-				) {
-					continue;
-				}
+				for ( const [ attributeName, binding ] of Object.entries(
+					blockBindings
+				) ) {
+					const { source: sourceName, args: sourceArgs } = binding;
+					const source = sources[ sourceName ];
+					if (
+						! source ||
+						! canBindAttribute( name, attributeName )
+					) {
+						continue;
+					}
 
-				blockBindingsBySource.set( source, {
-					...blockBindingsBySource.get( source ),
-					[ attributeName ]: {
-						args: sourceArgs,
-					},
-				} );
-			}
+					// Populate context.
+					for ( const key of source.usesContext || [] ) {
+						updatedContext[ key ] = blockContext[ key ];
+					}
 
-			if ( blockBindingsBySource.size ) {
-				for ( const [ source, bindings ] of blockBindingsBySource ) {
-					// Get values in batch if the source supports it.
-					const values = source.getValues( {
-						registry,
-						context,
-						clientId,
-						bindings,
+					blockBindingsBySource.set( source, {
+						...blockBindingsBySource.get( source ),
+						[ attributeName ]: {
+							args: sourceArgs,
+						},
 					} );
-					for ( const [ attributeName, value ] of Object.entries(
-						values
-					) ) {
-						// Use placeholder when value is undefined.
-						if ( value === undefined ) {
-							if ( attributeName === 'url' ) {
+				}
+
+				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 ] =
-									source.getPlaceholder?.( {
-										registry,
-										context,
-										clientId,
-										attributeName,
-										args: bindings[ attributeName ].args,
-									} );
+								attributes[ attributeName ] = value;
 							}
-						} else {
-							attributes[ attributeName ] = value;
 						}
 					}
 				}
-			}
 
-			return attributes;
-		}, [ blockBindings, name, clientId, context, registry, sources ] );
+				return attributes;
+			},
+			[ blockBindings, name, clientId, updatedContext, sources ]
+		);
 
-		const { setAttributes } = props;
+		const hasParentPattern = !! updatedContext[ 'pattern/overrides' ];
+		const hasPatternOverridesDefaultBinding =
+			props.attributes.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
+				?.source === 'core/pattern-overrides';
 
 		const _setAttributes = useCallback(
 			( nextAttributes ) => {
@@ -224,8 +242,9 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 							bindings,
 						] of blockBindingsBySource ) {
 							source.setValues( {
-								registry,
-								context,
+								select: registry.select,
+								dispatch: registry.dispatch,
+								context: updatedContext,
 								clientId,
 								bindings,
 							} );
@@ -255,7 +274,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 				blockBindings,
 				name,
 				clientId,
-				context,
+				updatedContext,
 				setAttributes,
 				sources,
 				hasPatternOverridesDefaultBinding,
@@ -269,6 +288,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 					{ ...props }
 					attributes={ { ...props.attributes, ...boundAttributes } }
 					setAttributes={ _setAttributes }
+					context={ { ...context, ...updatedContext } }
 				/>
 			</>
 		);
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
index c980253ee6425..2ae4ed8b86144 100644
--- a/packages/block-editor/src/hooks/use-editor-wrapper-styles.native.scss
+++ b/packages/block-editor/src/hooks/use-editor-wrapper-styles.native.scss
@@ -5,6 +5,7 @@
 }
 
 .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-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index 3ec701cfc4a14..2a1b43060c00a 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -8,46 +8,40 @@ import { useEffect, useRef } 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.
+ * A hook used to set the zoomed out view, invoking the hook sets the mode.
  *
- * @param {boolean} zoomOut If we should enter into zoomOut mode or not
+ * @param {boolean} zoomOut If we should zoom out or not.
  */
 export function useZoomOut( zoomOut = true ) {
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
-	const { __unstableGetEditorMode } = useSelect( blockEditorStore );
+	const { setZoomLevel } = unlock( useDispatch( blockEditorStore ) );
+	const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
 
-	const originalEditingMode = useRef( null );
-	const mode = __unstableGetEditorMode();
+	const originalIsZoomOutRef = useRef( null );
 
 	useEffect( () => {
 		// Only set this on mount so we know what to return to when we unmount.
-		if ( ! originalEditingMode.current ) {
-			originalEditingMode.current = mode;
+		if ( ! originalIsZoomOutRef.current ) {
+			originalIsZoomOutRef.current = isZoomOut();
 		}
 
-		return () => {
-			// We need to use  __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount
-			if (
-				__unstableGetEditorMode() === 'zoom-out' &&
-				__unstableGetEditorMode() !== originalEditingMode.current
-			) {
-				__unstableSetEditorMode( originalEditingMode.current );
-			}
-		};
-	}, [] );
-
-	// The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode.
-	useEffect( () => {
-		if ( zoomOut && mode !== 'zoom-out' ) {
-			__unstableSetEditorMode( 'zoom-out' );
+		// The effect opens the zoom-out view if we want it open and the canvas is not currently zoomed-out.
+		if ( zoomOut && isZoomOut() === false ) {
+			setZoomLevel( 50 );
 		} else if (
 			! zoomOut &&
-			__unstableGetEditorMode() === 'zoom-out' &&
-			originalEditingMode.current !== mode
+			isZoomOut() &&
+			originalIsZoomOutRef.current !== isZoomOut()
 		) {
-			__unstableSetEditorMode( originalEditingMode.current );
+			setZoomLevel( originalIsZoomOutRef.current ? 50 : 100 );
 		}
-	}, [ __unstableSetEditorMode, zoomOut, mode ] );
+
+		return () => {
+			if ( isZoomOut() && isZoomOut() !== originalIsZoomOutRef.current ) {
+				setZoomLevel( originalIsZoomOutRef.current ? 50 : 100 );
+			}
+		};
+	}, [ isZoomOut, setZoomLevel, zoomOut ] );
 }
diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js
index 26700ecf7b3fa..fa710fa7f08eb 100644
--- a/packages/block-editor/src/hooks/utils.js
+++ b/packages/block-editor/src/hooks/utils.js
@@ -135,7 +135,20 @@ export function shouldSkipSerialization(
 
 const pendingStyleOverrides = new WeakMap();
 
-export function useStyleOverride( {
+/**
+ * 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,
diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js
index 53ae7dfeb778f..db1bc0a06ec6d 100644
--- a/packages/block-editor/src/index.js
+++ b/packages/block-editor/src/index.js
@@ -14,6 +14,7 @@ export {
 	getShadowClassesAndStyles as __experimentalGetShadowClassesAndStyles,
 	useCachedTruthy,
 	useZoomOut,
+	useStyleOverride,
 } from './hooks';
 export * from './components';
 export * from './elements';
diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js
index 2e671e8e53975..7bf6badf00870 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,
@@ -69,54 +71,57 @@ export default {
 			availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 		} );
 		return (
-			<>
+			<VStack
+				spacing={ 4 }
+				className="block-editor-hooks__layout-constrained"
+			>
 				{ allowCustomContentAndWideSize && (
 					<>
-						<div className="block-editor-hooks__layout-controls">
-							<div className="block-editor-hooks__layout-controls-unit">
-								<UnitControl
-									className="block-editor-hooks__layout-controls-unit-input"
-									label={ __( 'Content' ) }
-									labelPosition="top"
-									__unstableInputWidth="80px"
-									value={ contentSize || wideSize || '' }
-									onChange={ ( nextWidth ) => {
-										nextWidth =
-											0 > parseFloat( nextWidth )
-												? '0'
-												: nextWidth;
-										onChange( {
-											...layout,
-											contentSize: nextWidth,
-										} );
-									} }
-									units={ units }
-								/>
-								<Icon icon={ positionCenter } />
-							</div>
-							<div className="block-editor-hooks__layout-controls-unit">
-								<UnitControl
-									className="block-editor-hooks__layout-controls-unit-input"
-									label={ __( 'Wide' ) }
-									labelPosition="top"
-									__unstableInputWidth="80px"
-									value={ wideSize || contentSize || '' }
-									onChange={ ( nextWidth ) => {
-										nextWidth =
-											0 > parseFloat( nextWidth )
-												? '0'
-												: nextWidth;
-										onChange( {
-											...layout,
-											wideSize: nextWidth,
-										} );
-									} }
-									units={ units }
-								/>
-								<Icon icon={ stretchWide } />
-							</div>
-						</div>
-						<p className="block-editor-hooks__layout-controls-helptext">
+						<UnitControl
+							__next40pxDefaultSize
+							label={ __( 'Content width' ) }
+							labelPosition="top"
+							value={ contentSize || wideSize || '' }
+							onChange={ ( nextWidth ) => {
+								nextWidth =
+									0 > parseFloat( nextWidth )
+										? '0'
+										: nextWidth;
+								onChange( {
+									...layout,
+									contentSize: nextWidth,
+								} );
+							} }
+							units={ units }
+							prefix={
+								<InputControlPrefixWrapper variant="icon">
+									<Icon icon={ alignNone } />
+								</InputControlPrefixWrapper>
+							}
+						/>
+						<UnitControl
+							__next40pxDefaultSize
+							label={ __( 'Wide width' ) }
+							labelPosition="top"
+							value={ wideSize || contentSize || '' }
+							onChange={ ( nextWidth ) => {
+								nextWidth =
+									0 > parseFloat( nextWidth )
+										? '0'
+										: nextWidth;
+								onChange( {
+									...layout,
+									wideSize: nextWidth,
+								} );
+							} }
+							units={ units }
+							prefix={
+								<InputControlPrefixWrapper variant="icon">
+									<Icon icon={ stretchWide } />
+								</InputControlPrefixWrapper>
+							}
+						/>
+						<p className="block-editor-hooks__layout-constrained-helptext">
 							{ __(
 								'Customize the width for all elements that are assigned to the center or wide columns.'
 							) }
@@ -125,6 +130,7 @@ export default {
 				) }
 				{ allowJustification && (
 					<ToggleGroupControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Justification' ) }
 						value={ justifyContent }
@@ -144,7 +150,7 @@ export default {
 						) }
 					</ToggleGroupControl>
 				) }
-			</>
+			</VStack>
 		);
 	},
 	toolBarControls: function DefaultLayoutToolbarControls( {
diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
index 72beca11b3f0c..8171844969565 100644
--- a/packages/block-editor/src/layouts/flex.js
+++ b/packages/block-editor/src/layouts/flex.js
@@ -12,7 +12,6 @@ import {
 	arrowDown,
 } from '@wordpress/icons';
 import {
-	Button,
 	ToggleControl,
 	Flex,
 	FlexItem,
@@ -110,7 +109,6 @@ export default {
 					<FlexLayoutVerticalAlignmentControl
 						layout={ layout }
 						onChange={ onChange }
-						isToolbar
 					/>
 				) }
 			</BlockControls>
@@ -190,11 +188,7 @@ export default {
 	},
 };
 
-function FlexLayoutVerticalAlignmentControl( {
-	layout,
-	onChange,
-	isToolbar = false,
-} ) {
+function FlexLayoutVerticalAlignmentControl( { layout, onChange } ) {
 	const { orientation = 'horizontal' } = layout;
 
 	const defaultVerticalAlignment =
@@ -210,52 +204,17 @@ function FlexLayoutVerticalAlignmentControl( {
 			verticalAlignment: value,
 		} );
 	};
-	if ( isToolbar ) {
-		return (
-			<BlockVerticalAlignmentControl
-				onChange={ onVerticalAlignmentChange }
-				value={ verticalAlignment }
-				controls={
-					orientation === 'horizontal'
-						? [ 'top', 'center', 'bottom', 'stretch' ]
-						: [ 'top', 'center', 'bottom', 'space-between' ]
-				}
-			/>
-		);
-	}
-
-	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' ]
+			}
+		/>
 	);
 }
 
@@ -325,6 +284,7 @@ function FlexLayoutJustifyContentControl( {
 
 	return (
 		<ToggleGroupControl
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label={ __( 'Justification' ) }
 			value={ justifyContent }
@@ -370,6 +330,7 @@ function OrientationControl( { layout, onChange } ) {
 	} = layout;
 	return (
 		<ToggleGroupControl
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			className="block-editor-hooks__flex-layout-orientation-controls"
 			label={ __( 'Orientation' ) }
diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js
index 975b79f4ba570..f1573b5c94960 100644
--- a/packages/block-editor/src/layouts/grid.js
+++ b/packages/block-editor/src/layouts/grid.js
@@ -13,6 +13,7 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
@@ -74,7 +75,8 @@ export default {
 		// 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;
+			window.__experimentalEnableGridInteractivity ||
+			!! layout?.columnCount;
 		const showMinWidthControl =
 			window.__experimentalEnableGridInteractivity ||
 			! layout?.columnCount;
@@ -84,19 +86,21 @@ export default {
 					layout={ layout }
 					onChange={ onChange }
 				/>
-				{ showColumnsControl && (
-					<GridLayoutColumnsAndRowsControl
-						layout={ layout }
-						onChange={ onChange }
-						allowSizingOnChildren={ allowSizingOnChildren }
-					/>
-				) }
-				{ showMinWidthControl && (
-					<GridLayoutMinimumWidthControl
-						layout={ layout }
-						onChange={ onChange }
-					/>
-				) }
+				<VStack spacing={ 4 }>
+					{ showColumnsControl && (
+						<GridLayoutColumnsAndRowsControl
+							layout={ layout }
+							onChange={ onChange }
+							allowSizingOnChildren={ allowSizingOnChildren }
+						/>
+					) }
+					{ showMinWidthControl && (
+						<GridLayoutMinimumWidthControl
+							layout={ layout }
+							onChange={ onChange }
+						/>
+					) }
+				</VStack>
 			</>
 		);
 	},
@@ -264,6 +268,8 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 				</FlexItem>
 				<FlexItem isBlock>
 					<RangeControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						onChange={ handleSliderChange }
 						value={ quantity || 0 }
 						min={ 0 }
@@ -315,7 +321,7 @@ function GridLayoutColumnsAndRowsControl( {
 									const defaultNewColumnCount =
 										isManualPlacement ? 1 : undefined;
 									const newColumnCount =
-										value === ''
+										value === '' || value === '0'
 											? defaultNewColumnCount
 											: parseInt( value, 10 );
 									onChange( {
@@ -325,7 +331,7 @@ function GridLayoutColumnsAndRowsControl( {
 								} else {
 									// Don't allow unsetting the column count.
 									const newColumnCount =
-										value === ''
+										value === '' || value === '0'
 											? 1
 											: parseInt( value, 10 );
 									onChange( {
@@ -335,7 +341,7 @@ function GridLayoutColumnsAndRowsControl( {
 								}
 							} }
 							value={ columnCount }
-							min={ 0 }
+							min={ 1 }
 							label={ __( 'Columns' ) }
 							hideLabelFromVision={
 								! window.__experimentalEnableGridInteractivity ||
@@ -353,7 +359,7 @@ function GridLayoutColumnsAndRowsControl( {
 								onChange={ ( value ) => {
 									// Don't allow unsetting the row count.
 									const newRowCount =
-										value === ''
+										value === '' || value === '0'
 											? 1
 											: parseInt( value, 10 );
 									onChange( {
@@ -362,19 +368,24 @@ function GridLayoutColumnsAndRowsControl( {
 									} );
 								} }
 								value={ rowCount }
-								min={ 0 }
+								min={ 1 }
 								label={ __( 'Rows' ) }
 							/>
 						) : (
 							<RangeControl
-								value={ columnCount ?? 0 }
+								__next40pxDefaultSize
+								__nextHasNoMarginBottom
+								value={ columnCount ?? 1 }
 								onChange={ ( value ) =>
 									onChange( {
 										...layout,
-										columnCount: value,
+										columnCount:
+											value === '' || value === '0'
+												? 1
+												: value,
 									} )
 								}
-								min={ 0 }
+								min={ 1 }
 								max={ 16 }
 								withInputField={ false }
 								label={ __( 'Columns' ) }
@@ -447,6 +458,7 @@ function GridLayoutTypeControl( { layout, onChange } ) {
 
 	return (
 		<ToggleGroupControl
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label={ __( 'Grid item position' ) }
 			value={ gridPlacement }
diff --git a/packages/block-editor/src/layouts/test/grid.js b/packages/block-editor/src/layouts/test/grid.js
index 79257ec0200be..ab7b279aaae78 100644
--- a/packages/block-editor/src/layouts/test/grid.js
+++ b/packages/block-editor/src/layouts/test/grid.js
@@ -5,7 +5,7 @@ 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 = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); container-type: inline-size; }`;
+		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',
@@ -19,7 +19,7 @@ describe( 'getLayoutStyle', () => {
 		expect( result ).toBe( expected );
 	} );
 	it( 'should return only `grid-template-columns` if columnCount property is provided', () => {
-		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }`;
+		const expected = `.my-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }`;
 
 		const result = grid.getLayoutStyle( {
 			selector: '.my-container',
diff --git a/packages/block-editor/src/layouts/test/utils.js b/packages/block-editor/src/layouts/test/utils.js
index a2a3ac644d7ba..09cfef8f48f8f 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',
@@ -97,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',
@@ -113,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 30280b8906e7a..15a8d2cef8373 100644
--- a/packages/block-editor/src/layouts/utils.js
+++ b/packages/block-editor/src/layouts/utils.js
@@ -17,19 +17,11 @@ import { LAYOUT_DEFINITIONS } from './definitions';
  * @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( ',' );
 }
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
index 26d8a78c5cabb..76fd9105c7fb9 100644
--- a/packages/block-editor/src/private-apis.js
+++ b/packages/block-editor/src/private-apis.js
@@ -6,7 +6,6 @@ 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 { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { default as PrivateQuickInserter } from './components/inserter/quick-inserter';
 import {
 	extractWords,
@@ -17,7 +16,7 @@ import { PrivateListView } from './components/list-view';
 import BlockInfo from './components/block-info-slot-fill';
 import InspectorControlsLastItem from './components/inspector-controls-last-item-slot-fill';
 import { useHasBlockToolbar } from './components/block-toolbar/use-has-block-toolbar';
-import { cleanEmptyObject, useStyleOverride } from './hooks/utils';
+import { cleanEmptyObject } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
 import { BlockRemovalWarningModal } from './components/block-removal-warning-modal';
@@ -39,6 +38,7 @@ import {
 	reusableBlocksSelectKey,
 	globalStylesDataKey,
 	globalStylesLinksDataKey,
+	sectionRootClientIdKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
@@ -59,7 +59,6 @@ lock( privateApis, {
 	ExperimentalBlockEditorProvider,
 	getDuotoneFilter,
 	getRichTextValues,
-	PrivateInserter,
 	PrivateQuickInserter,
 	extractWords,
 	getNormalizedSearchTerms,
@@ -70,7 +69,6 @@ lock( privateApis, {
 	InspectorControlsLastItem,
 	useHasBlockToolbar,
 	cleanEmptyObject,
-	useStyleOverride,
 	BlockQuickNavigation,
 	LayoutStyle,
 	BlockRemovalWarningModal,
@@ -95,4 +93,5 @@ lock( privateApis, {
 	useBlockDisplayTitle,
 	__unstableBlockStyleVariationOverridesWithConfig,
 	setBackgroundStyleDefaults,
+	sectionRootClientIdKey,
 } );
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index f7da8fa14b382..ee11838395ec5 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -34,8 +34,6 @@ import {
 	__experimentalUpdateSettings,
 	privateRemoveBlocks,
 } from './private-actions';
-import { STORE_NAME } from './constants';
-import { unlock } from '../lock-unlock';
 
 /** @typedef {import('../components/use-on-block-drop/types').WPDropOperation} WPDropOperation */
 
@@ -1670,24 +1668,32 @@ export const setNavigationMode =
  */
 export const __unstableSetEditorMode =
 	( mode ) =>
-	( { dispatch, select, registry } ) => {
+	( { dispatch, select } ) => {
 		// When switching to zoom-out mode, we need to select the parent section
 		if ( mode === 'zoom-out' ) {
 			const firstSelectedClientId = select.getBlockSelectionStart();
-			const { sectionRootClientId } = unlock(
-				registry.select( STORE_NAME ).getSettings()
-			);
+
+			const sectionRootClientId = select.getSectionRootClientId();
+
 			if ( firstSelectedClientId ) {
 				let sectionClientId;
 
 				if ( sectionRootClientId ) {
 					const sectionClientIds =
 						select.getBlockOrder( sectionRootClientId );
-					sectionClientId = select
-						.getBlockParents( firstSelectedClientId )
-						.find( ( parent ) =>
-							sectionClientIds.includes( parent )
-						);
+
+					// 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
@@ -1722,23 +1728,24 @@ export const __unstableSetEditorMode =
 	};
 
 /**
- * Action that enables or disables the block moving mode.
+ * Set the block moving client ID.
+ *
+ * @deprecated
  *
- * @param {string|null} hasBlockMovingClientId Enable/Disable block moving mode.
+ * @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.
diff --git a/packages/block-editor/src/store/private-actions.js b/packages/block-editor/src/store/private-actions.js
index 74aec3c49d1e8..5571db0ce9106 100644
--- a/packages/block-editor/src/store/private-actions.js
+++ b/packages/block-editor/src/store/private-actions.js
@@ -359,6 +359,20 @@ export function expandBlock( 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.
  *
@@ -367,6 +381,7 @@ export function expandBlock( clientId ) {
 export const modifyContentLockBlock =
 	( clientId ) =>
 	( { select, dispatch } ) => {
+		dispatch.selectBlock( clientId );
 		dispatch.__unstableMarkNextChangeAsNotPersistent();
 		dispatch.updateBlockAttributes( clientId, {
 			templateLock: undefined,
@@ -382,3 +397,26 @@ export const modifyContentLockBlock =
 			focusModeToRevert
 		);
 	};
+
+/**
+ * Sets the zoom level.
+ *
+ * @param {number} zoom the new zoom level
+ * @return {Object} Action object.
+ */
+export function setZoomLevel( zoom = 100 ) {
+	return {
+		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
index 00fac5531b9c3..e24b4a6264e72 100644
--- a/packages/block-editor/src/store/private-keys.js
+++ b/packages/block-editor/src/store/private-keys.js
@@ -2,3 +2,4 @@ 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
index c534c65b8defe..c322898031065 100644
--- a/packages/block-editor/src/store/private-selectors.js
+++ b/packages/block-editor/src/store/private-selectors.js
@@ -15,11 +15,14 @@ import {
 	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';
@@ -27,6 +30,7 @@ import { unlock } from '../lock-unlock';
 import {
 	selectBlockPatternsKey,
 	reusableBlocksSelectKey,
+	sectionRootClientIdKey,
 } from './private-keys';
 
 export { getBlockSettings } from './get-block-settings';
@@ -112,6 +116,8 @@ export const getEnabledClientIdsTree = createSelector(
 		state.blockEditingModes,
 		state.settings.templateLock,
 		state.blockListSettings,
+		state.editorMode,
+		getSectionRootClientId( state ),
 	]
 );
 
@@ -291,19 +297,18 @@ export const getInserterMediaCategories = createSelector(
 export const hasAllowedPatterns = createRegistrySelector( ( select ) =>
 	createSelector(
 		( state, rootClientId = null ) => {
-			const { getAllPatterns, __experimentalGetParsedPattern } = unlock(
-				select( STORE_NAME )
-			);
+			const { getAllPatterns } = unlock( select( STORE_NAME ) );
 			const patterns = getAllPatterns();
 			const { allowedBlockTypes } = getSettings( state );
-			return patterns.some( ( { name, inserter = true } ) => {
+			return patterns.some( ( pattern ) => {
+				const { inserter = true } = pattern;
 				if ( ! inserter ) {
 					return false;
 				}
-				const { blocks } = __experimentalGetParsedPattern( name );
+				const grammar = getGrammar( pattern );
 				return (
-					checkAllowListRecursive( blocks, allowedBlockTypes ) &&
-					blocks.every( ( { name: blockName } ) =>
+					checkAllowListRecursive( grammar, allowedBlockTypes ) &&
+					grammar.every( ( { name: blockName } ) =>
 						canInsertBlockType( state, blockName, rootClientId )
 					)
 				);
@@ -421,9 +426,11 @@ const EMPTY_ARRAY = [];
 export const getReusableBlocks = createRegistrySelector(
 	( select ) => ( state ) => {
 		const reusableBlocksSelect = state.settings[ reusableBlocksSelectKey ];
-		return reusableBlocksSelect
-			? reusableBlocksSelect( select )
-			: state.settings.__experimentalReusableBlocks ?? EMPTY_ARRAY;
+		return (
+			( reusableBlocksSelect
+				? reusableBlocksSelect( select )
+				: state.settings.__experimentalReusableBlocks ) ?? EMPTY_ARRAY
+		);
 	}
 );
 
@@ -467,26 +474,57 @@ export function getExpandedBlock( state ) {
  * with the provided client ID.
  *
  * @param {Object} state    Global application state.
- * @param {Object} clientId Client Id of the block.
+ * @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 = createSelector(
-	( state, clientId ) => {
-		let current = clientId;
-		let result;
-		while ( ( current = state.blocks.parents.get( current ) ) ) {
-			if (
-				getBlockName( state, current ) === 'core/block' ||
-				getTemplateLock( state, current ) === 'contentOnly'
-			) {
-				result = current;
-			}
+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;
-	},
-	( state ) => [ state.blocks.parents, state.blockListSettings ]
-);
+	}
+	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
@@ -511,3 +549,138 @@ export function getTemporarilyEditingAsBlocks( state ) {
 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
+		),
+	]
+);
+
+/**
+ * Returns whether zoom out mode is enabled.
+ *
+ * @param {Object} state Editor state.
+ *
+ * @return {boolean} Is zoom out mode enabled.
+ */
+export function isZoomOutMode( state ) {
+	return state.editorMode === 'zoom-out';
+}
+
+/**
+ * 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 the zoom out state.
+ *
+ * @param {Object} state Global application state.
+ * @return {boolean} The zoom out state.
+ */
+export function getZoomLevel( state ) {
+	return state.zoomLevel;
+}
+
+/**
+ * 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 getZoomLevel( state ) < 100;
+}
+
+/**
+ * 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 cd4569c45e580..f6445f8a3681c 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -1601,7 +1601,7 @@ 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 {
@@ -1795,11 +1795,6 @@ export const blockListSettings = ( state = {}, 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;
 	}
@@ -1807,26 +1802,6 @@ export function editorMode( state = 'edit', action ) {
 	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
@@ -2085,6 +2060,44 @@ export function hoveredBlockClientId( state = false, action ) {
 	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,
@@ -2098,13 +2111,13 @@ const combinedReducers = combineReducers( {
 	blocksMode,
 	blockListSettings,
 	insertionPoint,
+	insertionCue,
 	template,
 	settings,
 	preferences,
 	lastBlockAttributesChange,
 	lastFocus,
 	editorMode,
-	hasBlockMovingClientId,
 	expandedBlock,
 	highlightedBlock,
 	lastBlockInserted,
@@ -2118,6 +2131,7 @@ const combinedReducers = combineReducers( {
 	openedBlockSettingsMenu,
 	registeredInserterMediaCategories,
 	hoveredBlockClientId,
+	zoomLevel,
 } );
 
 function withAutomaticChangeReset( reducer ) {
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index d6d09b5910611..6cf6aae296141 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -7,7 +7,6 @@ import {
 	getBlockVariations,
 	hasBlockSupport,
 	getPossibleBlockTransformations,
-	parse,
 	switchToBlockType,
 	store as blocksStore,
 } from '@wordpress/blocks';
@@ -22,11 +21,13 @@ import { createSelector, createRegistrySelector } from '@wordpress/data';
  * Internal dependencies
  */
 import {
-	withRootClientIdOptionKey,
+	isFiltered,
 	checkAllowListRecursive,
 	checkAllowList,
 	getAllPatternsDependants,
 	getInsertBlockTypeDependants,
+	getParsedPattern,
+	getGrammar,
 } from './utils';
 import { orderBy } from '../utils/sorting';
 import { STORE_NAME } from './constants';
@@ -36,6 +37,9 @@ import {
 	getContentLockingParent,
 	getTemporarilyEditingAsBlocks,
 	getTemporarilyEditingFocusModeToRevert,
+	getSectionRootClientId,
+	isSectionBlock,
+	getParentSectionBlock,
 } from './private-selectors';
 
 /**
@@ -76,7 +80,9 @@ const EMPTY_ARRAY = [];
  */
 const EMPTY_SET = new Set();
 
-const EMPTY_OBJECT = {};
+const DEFAULT_INSERTER_OPTIONS = {
+	[ isFiltered ]: true,
+};
 
 /**
  * Returns a block's name given its client ID, or null if no block exists with
@@ -334,8 +340,8 @@ export const getGlobalBlockCount = createSelector(
 /**
  * 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.
  */
@@ -362,8 +368,8 @@ export const getBlocksByName = createSelector(
  *
  * @deprecated
  *
- * @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.
  */
@@ -1448,8 +1454,7 @@ 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.
  *
@@ -1460,11 +1465,11 @@ export const getBlockInsertionPoint = createSelector(
 		let rootClientId, index;
 
 		const {
-			insertionPoint,
+			insertionCue,
 			selection: { selectionEnd },
 		} = state;
-		if ( insertionPoint !== null ) {
-			return insertionPoint;
+		if ( insertionCue !== null ) {
+			return insertionCue;
 		}
 
 		const { clientId } = selectionEnd;
@@ -1479,7 +1484,7 @@ export const getBlockInsertionPoint = createSelector(
 		return { rootClientId, index };
 	},
 	( state ) => [
-		state.insertionPoint,
+		state.insertionCue,
 		state.selection.selectionEnd.clientId,
 		state.blocks.parents,
 		state.blocks.order,
@@ -1487,14 +1492,14 @@ export const getBlockInsertionPoint = createSelector(
 );
 
 /**
- * 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;
 }
 
 /**
@@ -1535,6 +1540,59 @@ export function getTemplateLock( state, rootClientId ) {
 	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'.
+ *
+ * @return {boolean} Whether the given block type is allowed to be inserted.
+ */
+const isBlockVisibleInTheInserter = ( state, blockNameOrType ) => {
+	let blockType;
+	let blockName;
+	if ( blockNameOrType && 'object' === typeof blockNameOrType ) {
+		blockType = blockNameOrType;
+		blockName = blockNameOrType.name;
+	} else {
+		blockType = getBlockType( blockNameOrType );
+		blockName = blockNameOrType;
+	}
+	if ( ! blockType ) {
+		return false;
+	}
+
+	const { allowedBlockTypes } = getSettings( state );
+
+	const isBlockAllowedInEditor = checkAllowList(
+		allowedBlockTypes,
+		blockName,
+		true
+	);
+	if ( ! isBlockAllowedInEditor ) {
+		return false;
+	}
+
+	// If parent blocks are not visible, child blocks should be hidden too.
+	if ( !! blockType.parent?.length ) {
+		return blockType.parent.some(
+			( name ) =>
+				isBlockVisibleInTheInserter( state, name ) ||
+				// 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 true;
+};
+
 /**
  * Determines if the given block type is allowed to be inserted into the block list.
  * This function is not exported and not memoized because using a memoized selector
@@ -1553,6 +1611,10 @@ const canInsertBlockTypeUnmemoized = (
 	blockName,
 	rootClientId = null
 ) => {
+	if ( ! isBlockVisibleInTheInserter( state, blockName ) ) {
+		return false;
+	}
+
 	let blockType;
 	if ( blockName && 'object' === typeof blockName ) {
 		blockType = blockName;
@@ -1560,23 +1622,14 @@ const canInsertBlockTypeUnmemoized = (
 	} else {
 		blockType = getBlockType( blockName );
 	}
-	if ( ! blockType ) {
-		return false;
-	}
-
-	const { allowedBlockTypes } = getSettings( state );
 
-	const isBlockAllowedInEditor = checkAllowList(
-		allowedBlockTypes,
-		blockName,
-		true
-	);
-	if ( ! isBlockAllowedInEditor ) {
+	const isLocked = !! getTemplateLock( state, rootClientId );
+	if ( isLocked ) {
 		return false;
 	}
 
-	const isLocked = !! getTemplateLock( state, rootClientId );
-	if ( isLocked ) {
+	const _isSectionBlock = !! isSectionBlock( state, rootClientId );
+	if ( _isSectionBlock ) {
 		return false;
 	}
 
@@ -1731,6 +1784,11 @@ export function canRemoveBlock( state, clientId ) {
 		return false;
 	}
 
+	const isBlockWithinSection = !! getParentSectionBlock( state, clientId );
+	if ( isBlockWithinSection ) {
+		return false;
+	}
+
 	return getBlockEditingMode( state, rootClientId ) !== 'disabled';
 }
 
@@ -1752,7 +1810,7 @@ export function canRemoveBlocks( state, clientIds ) {
  * @param {Object} state    Editor state.
  * @param {string} clientId The block client Id.
  *
- * @return {boolean | undefined} Whether the given block is allowed to be moved.
+ * @return {boolean} Whether the given block is allowed to be moved.
  */
 export function canMoveBlock( state, clientId ) {
 	const attributes = getBlockAttributes( state, clientId );
@@ -1957,6 +2015,7 @@ const buildBlockTypeItem =
 			description: blockType.description,
 			category: blockType.category,
 			keywords: blockType.keywords,
+			parent: blockType.parent,
 			variations: inserterVariations,
 			example: blockType.example,
 			utility: 1, // Deprecated.
@@ -1994,7 +2053,7 @@ const buildBlockTypeItem =
  */
 export const getInserterItems = createRegistrySelector( ( select ) =>
 	createSelector(
-		( state, rootClientId = null, options = EMPTY_OBJECT ) => {
+		( state, rootClientId = null, options = DEFAULT_INSERTER_OPTIONS ) => {
 			const buildReusableBlockInserterItem = ( reusableBlock ) => {
 				const icon = ! reusableBlock.wp_pattern_sync_status
 					? {
@@ -2042,57 +2101,7 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 				)
 				.map( buildBlockTypeInserterItem );
 
-			if ( options[ withRootClientIdOptionKey ] ) {
-				blockTypeInserterItems = blockTypeInserterItems.reduce(
-					( accumulator, item ) => {
-						item.rootClientId = rootClientId ?? '';
-
-						while (
-							! canInsertBlockTypeUnmemoized(
-								state,
-								item.name,
-								item.rootClientId
-							)
-						) {
-							if ( ! item.rootClientId ) {
-								let sectionRootClientId;
-								try {
-									sectionRootClientId = unlock(
-										getSettings( state )
-									).sectionRootClientId;
-								} catch ( e ) {}
-								if (
-									sectionRootClientId &&
-									canInsertBlockTypeUnmemoized(
-										state,
-										item.name,
-										sectionRootClientId
-									)
-								) {
-									item.rootClientId = sectionRootClientId;
-								} else {
-									delete item.rootClientId;
-								}
-								break;
-							} else {
-								const parentClientId = getBlockRootClientId(
-									state,
-									item.rootClientId
-								);
-								item.rootClientId = parentClientId;
-							}
-						}
-
-						// We could also add non insertable items and gray them out.
-						if ( item.hasOwnProperty( 'rootClientId' ) ) {
-							accumulator.push( item );
-						}
-
-						return accumulator;
-					},
-					[]
-				);
-			} else {
+			if ( options[ isFiltered ] !== false ) {
 				blockTypeInserterItems = blockTypeInserterItems.filter(
 					( blockType ) =>
 						canIncludeBlockTypeInInserter(
@@ -2101,6 +2110,19 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 							rootClientId
 						)
 				);
+			} else {
+				blockTypeInserterItems = blockTypeInserterItems
+					.filter( ( blockType ) =>
+						isBlockVisibleInTheInserter( state, blockType )
+					)
+					.map( ( blockType ) => ( {
+						...blockType,
+						isAllowedInCurrentRoot: canIncludeBlockTypeInInserter(
+							state,
+							blockType,
+							rootClientId
+						),
+					} ) );
 			}
 
 			const items = blockTypeInserterItems.reduce(
@@ -2349,40 +2371,12 @@ export function __experimentalGetDirectInsertBlock(
 }
 
 export const __experimentalGetParsedPattern = createRegistrySelector(
-	( select ) =>
-		createSelector(
-			( state, patternName ) => {
-				const pattern = unlock( select( STORE_NAME ) ).getPatternBySlug(
-					patternName
-				);
-				if ( ! pattern ) {
-					return null;
-				}
-				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 {
-					...pattern,
-					blocks,
-				};
-			},
-			( state, patternName ) => [
-				unlock( select( STORE_NAME ) ).getPatternBySlug( patternName ),
-			]
-		)
+	( select ) => ( state, patternName ) => {
+		const pattern = unlock( select( STORE_NAME ) ).getPatternBySlug(
+			patternName
+		);
+		return pattern ? getParsedPattern( pattern ) : null;
+	}
 );
 
 const getAllowedPatternsDependants = ( select ) => ( state, rootClientId ) => [
@@ -2400,30 +2394,50 @@ const getAllowedPatternsDependants = ( select ) => ( state, rootClientId ) => [
  */
 export const __experimentalGetAllowedPatterns = createRegistrySelector(
 	( select ) => {
-		return createSelector( ( state, rootClientId = null ) => {
-			const {
-				getAllPatterns,
-				__experimentalGetParsedPattern: getParsedPattern,
-			} = unlock( select( STORE_NAME ) );
-			const patterns = getAllPatterns();
-			const { allowedBlockTypes } = getSettings( state );
-
-			const parsedPatterns = patterns
-				.filter( ( { inserter = true } ) => !! inserter )
-				.map( ( { name } ) => getParsedPattern( name ) );
-			const availableParsedPatterns = parsedPatterns.filter(
-				( { blocks } ) =>
-					checkAllowListRecursive( blocks, allowedBlockTypes )
-			);
-			const patternsAllowed = availableParsedPatterns.filter(
-				( { blocks } ) =>
-					blocks.every( ( { name } ) =>
-						canInsertBlockType( state, name, rootClientId )
-					)
-			);
+		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( ( pattern ) => {
+						return {
+							...pattern,
+							get blocks() {
+								return getParsedPattern( pattern ).blocks;
+							},
+						};
+					} );
+
+				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;
-		}, getAllowedPatternsDependants( select ) );
+				return patternsAllowed;
+			},
+			getAllowedPatternsDependants( select )
+		);
 	}
 );
 
@@ -2487,7 +2501,7 @@ export const __experimentalGetPatternsByBlockTypes = createRegistrySelector(
  * 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
@@ -2509,7 +2523,7 @@ export const __experimentalGetPatternTransformItems = createRegistrySelector(
 				}
 				/**
 				 * 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.
 				 * 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.
@@ -2694,12 +2708,17 @@ export function __unstableGetEditorMode( state ) {
 /**
  * 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;
 }
 
 /**
@@ -2858,7 +2877,7 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
 
 	// In zoom-out mode, the block overlay is always active for section level blocks.
 	if ( editorMode === 'zoom-out' ) {
-		const { sectionRootClientId } = unlock( getSettings( state ) );
+		const sectionRootClientId = getSectionRootClientId( state );
 		if ( sectionRootClientId ) {
 			const sectionClientIds = getBlockOrder(
 				state,
@@ -2882,11 +2901,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 &&
@@ -2906,6 +2923,14 @@ export function __unstableIsWithinBlockOverlay( state, clientId ) {
 	return false;
 }
 
+function isWithinBlock( state, clientId, parentClientId ) {
+	let parent = state.blocks.parents.get( clientId );
+	while ( !! parent && parent !== parentClientId ) {
+		parent = state.blocks.parents.get( parent );
+	}
+	return parent === parentClientId;
+}
+
 /**
  * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
  */
@@ -2946,12 +2971,14 @@ export const getBlockEditingMode = createRegistrySelector(
 			if ( clientId === null ) {
 				clientId = '';
 			}
+
 			// In zoom-out mode, override the behavior set by
 			// __unstableSetBlockEditingMode to only allow editing the top-level
 			// sections.
 			const editorMode = __unstableGetEditorMode( state );
 			if ( editorMode === 'zoom-out' ) {
-				const { sectionRootClientId } = unlock( getSettings( state ) );
+				const sectionRootClientId = getSectionRootClientId( state );
+
 				if ( clientId === '' /* ROOT_CONTAINER_CLIENT_ID */ ) {
 					return sectionRootClientId ? 'disabled' : 'contentOnly';
 				}
@@ -2962,28 +2989,76 @@ export const getBlockEditingMode = createRegistrySelector(
 					state,
 					sectionRootClientId
 				);
-				if ( ! sectionsClientIds?.includes( clientId ) ) {
+
+				// Sections are always contentOnly.
+				if ( sectionsClientIds?.includes( clientId ) ) {
+					return 'contentOnly';
+				}
+
+				return 'disabled';
+			}
+
+			if ( editorMode === 'navigation' ) {
+				const sectionRootClientId = getSectionRootClientId( state );
+
+				// The root section is "default mode"
+				if ( clientId === sectionRootClientId ) {
+					return 'default';
+				}
+
+				// Sections should always be contentOnly in navigation mode.
+				const sectionsClientIds = getBlockOrder(
+					state,
+					sectionRootClientId
+				);
+				if ( sectionsClientIds.includes( clientId ) ) {
+					return 'contentOnly';
+				}
+
+				// Blocks outside sections should be disabled.
+				const isWithinSectionRoot = isWithinBlock(
+					state,
+					clientId,
+					sectionRootClientId
+				);
+				if ( ! isWithinSectionRoot ) {
 					return 'disabled';
 				}
+
+				// The rest of the blocks depend on whether they are content blocks or not.
+				// This "flattens" the sections tree.
+				const name = getBlockName( state, clientId );
+				const { hasContentRoleAttribute } = unlock(
+					select( blocksStore )
+				);
+				const isContent = hasContentRoleAttribute( name );
+
+				return isContent ? 'contentOnly' : 'disabled';
 			}
 
+			// 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 isContent =
-					select( blocksStore ).__experimentalHasContentRoleAttribute(
-						name
-					);
+				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;
 		}
diff --git a/packages/block-editor/src/store/test/private-actions.js b/packages/block-editor/src/store/test/private-actions.js
index 7576b95866306..d54a519c9056b 100644
--- a/packages/block-editor/src/store/test/private-actions.js
+++ b/packages/block-editor/src/store/test/private-actions.js
@@ -6,6 +6,7 @@ import {
 	showBlockInterface,
 	expandBlock,
 	__experimentalUpdateSettings,
+	setInsertionPoint,
 	setOpenedBlockSettingsMenu,
 	startDragging,
 	stopDragging,
@@ -123,4 +124,18 @@ describe( 'private actions', () => {
 			} );
 		} );
 	} );
+
+	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
index 185da1ffb9804..cbb75daa4baaa 100644
--- a/packages/block-editor/src/store/test/private-selectors.js
+++ b/packages/block-editor/src/store/test/private-selectors.js
@@ -9,6 +9,7 @@ import {
 	getEnabledBlockParents,
 	getExpandedBlock,
 	isDragging,
+	getBlockStyles,
 } from '../private-selectors';
 import { getBlockEditingMode } from '../selectors';
 
@@ -123,10 +124,10 @@ describe( 'private selectors', () => {
 			blockEditingModes: new Map( [] ),
 		};
 
-		const __experimentalHasContentRoleAttribute = jest.fn( () => false );
+		const hasContentRoleAttribute = jest.fn( () => false );
 		getBlockEditingMode.registry = {
 			select: jest.fn( () => ( {
-				__experimentalHasContentRoleAttribute,
+				hasContentRoleAttribute,
 			} ) ),
 		};
 
@@ -393,6 +394,10 @@ describe( 'private selectors', () => {
 					parents: new Map( [
 						[ '6cf70164-9097-4460-bcbf-200560546988', '' ],
 					] ),
+					order: new Map( [
+						[ '6cf70164-9097-4460-bcbf-200560546988', [] ],
+						[ '', [ '6cf70164-9097-4460-bcbf-200560546988' ] ],
+					] ),
 				},
 				blockEditingModes: new Map(),
 			};
@@ -423,6 +428,21 @@ describe( 'private selectors', () => {
 							'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' ],
@@ -460,6 +480,21 @@ describe( 'private selectors', () => {
 							'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' ],
@@ -509,4 +544,92 @@ describe( 'private selectors', () => {
 			);
 		} );
 	} );
+
+	describe( 'getBlockStyles', () => {
+		it( 'should return an empty object when no client IDs are provided', () => {
+			const state = {
+				blocks: {
+					attributes: new Map(),
+				},
+			};
+			const result = getBlockStyles( state, [] );
+			expect( result ).toEqual( {} );
+		} );
+
+		it( 'should return styles for a single block', () => {
+			const state = {
+				blocks: {
+					attributes: new Map( [
+						[ 'block-1', { style: { color: 'red' } } ],
+					] ),
+				},
+			};
+			const result = getBlockStyles( state, [ 'block-1' ] );
+			expect( result ).toEqual( {
+				'block-1': { color: 'red' },
+			} );
+		} );
+
+		it( 'should return styles for multiple blocks', () => {
+			const state = {
+				blocks: {
+					attributes: new Map( [
+						[ 'block-1', { style: { color: 'red' } } ],
+						[ 'block-2', { style: { fontSize: '16px' } } ],
+						[ 'block-3', { style: { margin: '10px' } } ],
+					] ),
+				},
+			};
+			const result = getBlockStyles( state, [
+				'block-1',
+				'block-2',
+				'block-3',
+			] );
+			expect( result ).toEqual( {
+				'block-1': { color: 'red' },
+				'block-2': { fontSize: '16px' },
+				'block-3': { margin: '10px' },
+			} );
+		} );
+
+		it( 'should return undefined for blocks without styles', () => {
+			const state = {
+				blocks: {
+					attributes: new Map( [
+						[ 'block-1', { style: { color: 'red' } } ],
+						[ 'block-2', {} ],
+						[ 'block-3', { style: { margin: '10px' } } ],
+					] ),
+				},
+			};
+			const result = getBlockStyles( state, [
+				'block-1',
+				'block-2',
+				'block-3',
+			] );
+			expect( result ).toEqual( {
+				'block-1': { color: 'red' },
+				'block-2': undefined,
+				'block-3': { margin: '10px' },
+			} );
+		} );
+
+		it( 'should return undefined for non-existent blocks', () => {
+			const state = {
+				blocks: {
+					attributes: new Map( [
+						[ 'block-1', { style: { color: 'red' } } ],
+					] ),
+				},
+			};
+			const result = getBlockStyles( state, [
+				'block-1',
+				'non-existent-block',
+			] );
+			expect( result ).toEqual( {
+				'block-1': { color: 'red' },
+				'non-existent-block': undefined,
+			} );
+		} );
+	} );
 } );
diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js
index cd472fa59ac72..1f1b9a9143d98 100644
--- a/packages/block-editor/src/store/test/reducer.js
+++ b/packages/block-editor/src/store/test/reducer.js
@@ -28,6 +28,7 @@ import {
 	isMultiSelecting,
 	preferences,
 	blocksMode,
+	insertionCue,
 	insertionPoint,
 	template,
 	blockListSettings,
@@ -2378,15 +2379,15 @@ describe( 'state', () => {
 		} );
 	} );
 
-	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,
@@ -2403,7 +2404,7 @@ describe( 'state', () => {
 				rootClientId: 'clientId1',
 				index: 0,
 			} );
-			const state = insertionPoint( original, {
+			const state = insertionCue( original, {
 				type: 'HIDE_INSERTION_POINT',
 			} );
 
@@ -3485,4 +3486,39 @@ describe( 'state', () => {
 			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 );
+		} );
+	} );
 } );
diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js
index 85006621c4701..a08c2e0dde150 100644
--- a/packages/block-editor/src/store/test/selectors.js
+++ b/packages/block-editor/src/store/test/selectors.js
@@ -15,6 +15,8 @@ import { select, dispatch } from '@wordpress/data';
  */
 import * as selectors from '../selectors';
 import { store } from '../';
+import { sectionRootClientIdKey } from '../private-keys';
+import { lock } from '../../lock-unlock';
 
 const {
 	getBlockName,
@@ -2423,7 +2425,7 @@ describe( 'selectors', () => {
 						} )
 					),
 				},
-				insertionPoint: {
+				insertionCue: {
 					rootClientId: undefined,
 					index: 0,
 				},
@@ -2464,7 +2466,7 @@ describe( 'selectors', () => {
 						} )
 					),
 				},
-				insertionPoint: null,
+				insertionCue: null,
 			};
 
 			expect( getBlockInsertionPoint( state ) ).toEqual( {
@@ -2502,7 +2504,7 @@ describe( 'selectors', () => {
 						} )
 					),
 				},
-				insertionPoint: null,
+				insertionCue: null,
 			};
 
 			const insertionPoint1 = getBlockInsertionPoint( state );
@@ -2544,7 +2546,7 @@ describe( 'selectors', () => {
 						} )
 					),
 				},
-				insertionPoint: null,
+				insertionCue: null,
 			};
 
 			expect( getBlockInsertionPoint( state ) ).toEqual( {
@@ -2586,7 +2588,7 @@ describe( 'selectors', () => {
 						} )
 					),
 				},
-				insertionPoint: null,
+				insertionCue: null,
 			};
 
 			expect( getBlockInsertionPoint( state ) ).toEqual( {
@@ -2628,7 +2630,7 @@ describe( 'selectors', () => {
 						} )
 					),
 				},
-				insertionPoint: null,
+				insertionCue: null,
 			};
 
 			expect( getBlockInsertionPoint( state ) ).toEqual( {
@@ -2641,7 +2643,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 );
@@ -2649,7 +2651,7 @@ describe( 'selectors', () => {
 
 		it( 'should return true if assigned insertion point', () => {
 			const state = {
-				insertionPoint: {
+				insertionCue: {
 					rootClientId: undefined,
 					index: 5,
 				},
@@ -2694,6 +2696,7 @@ describe( 'selectors', () => {
 					byClientId: new Map(),
 					attributes: new Map(),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {
@@ -2711,6 +2714,7 @@ describe( 'selectors', () => {
 				blocks: {
 					byClientId: new Map(),
 					attributes: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {
@@ -2728,6 +2732,7 @@ describe( 'selectors', () => {
 					byClientId: new Map(),
 					attributes: new Map(),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
@@ -2748,6 +2753,7 @@ describe( 'selectors', () => {
 					byClientId: new Map(),
 					attributes: new Map(),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
@@ -2772,6 +2778,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
@@ -2796,6 +2803,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					block1: {},
@@ -2822,6 +2830,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					block1: {},
@@ -2848,6 +2857,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					block1: {
@@ -2876,6 +2886,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					block1: {
@@ -2904,6 +2915,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
@@ -2932,6 +2944,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					block1: {
@@ -2960,6 +2973,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
@@ -2976,6 +2990,7 @@ describe( 'selectors', () => {
 					byClientId: new Map(),
 					attributes: new Map(),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
@@ -2992,7 +3007,7 @@ describe( 'selectors', () => {
 					byClientId: new Map(
 						Object.entries( {
 							block1: { name: 'core/test-block-ancestor' },
-							block2: { name: 'core/block' },
+							block2: { name: 'core/block1' },
 						} )
 					),
 					attributes: new Map(
@@ -3006,6 +3021,10 @@ describe( 'selectors', () => {
 							block2: 'block1',
 						} )
 					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -3023,6 +3042,37 @@ 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: {
@@ -3046,6 +3096,11 @@ describe( 'selectors', () => {
 							block3: 'block2',
 						} )
 					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+						[ 'block2', [ 'block3' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -3086,6 +3141,11 @@ describe( 'selectors', () => {
 							block3: 'block2',
 						} )
 					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+						[ 'block2', [ 'block3' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -3126,6 +3186,11 @@ describe( 'selectors', () => {
 							block3: 'block2',
 						} )
 					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+						[ 'block2', [ 'block3' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -3159,11 +3224,14 @@ describe( 'selectors', () => {
 							block2: {},
 						} )
 					),
-					parents: new Map(
-						Object.entries( {
-							block2: 'block1',
-						} )
-					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+					] ),
+					parents: new Map( [
+						[ 'block2', 'block1' ],
+						[ 'block1', '' ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -3203,6 +3271,10 @@ describe( 'selectors', () => {
 							block2: 'block1',
 						} )
 					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -3240,6 +3312,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					1: {
@@ -3273,6 +3346,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					1: {
@@ -4310,12 +4384,28 @@ describe( 'getBlockEditingMode', () => {
 		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
+				[
+					'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( [
 				[
@@ -4339,10 +4429,12 @@ describe( 'getBlockEditingMode', () => {
 					[
 						'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', '' ],
@@ -4363,6 +4455,10 @@ describe( 'getBlockEditingMode', () => {
 					'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
 					'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
 				],
+				[
+					'9b9c5c3f-2e46-4f02-9e14-9fed515b958s',
+					'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+				],
 			] ),
 		},
 		blockListSettings: {
@@ -4372,11 +4468,22 @@ describe( 'getBlockEditingMode', () => {
 		blockEditingModes: new Map( [] ),
 	};
 
-	const __experimentalHasContentRoleAttribute = jest.fn( () => false );
+	const navigationModeStateWithRootSection = {
+		...baseState,
+		editorMode: 'navigation',
+		settings: {
+			[ sectionRootClientIdKey ]: 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', // The group is the "main" container
+		},
+	};
+
+	const hasContentRoleAttribute = jest.fn( () => false );
+
+	const fauxPrivateAPIs = {};
+
+	lock( fauxPrivateAPIs, { hasContentRoleAttribute } );
+
 	getBlockEditingMode.registry = {
-		select: jest.fn( () => ( {
-			__experimentalHasContentRoleAttribute,
-		} ) ),
+		select: jest.fn( () => fauxPrivateAPIs ),
 	};
 
 	it( 'should return default by default', () => {
@@ -4480,7 +4587,7 @@ describe( 'getBlockEditingMode', () => {
 				},
 			},
 		};
-		__experimentalHasContentRoleAttribute.mockReturnValueOnce( false );
+		hasContentRoleAttribute.mockReturnValueOnce( false );
 		expect(
 			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
 		).toBe( 'disabled' );
@@ -4496,9 +4603,69 @@ describe( 'getBlockEditingMode', () => {
 				},
 			},
 		};
-		__experimentalHasContentRoleAttribute.mockReturnValueOnce( true );
+		hasContentRoleAttribute.mockReturnValueOnce( true );
 		expect(
 			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
 		).toBe( 'contentOnly' );
 	} );
+
+	it( 'in navigation mode, the root section container is default', () => {
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337'
+			)
+		).toBe( 'default' );
+	} );
+
+	it( 'in navigation mode, anything outside the section container is disabled', () => {
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'6cf70164-9097-4460-bcbf-200560546988'
+			)
+		).toBe( 'disabled' );
+	} );
+
+	it( 'in navigation mode, sections are contentOnly', () => {
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'b26fc763-417d-4f01-b81c-2ec61e14a972'
+			)
+		).toBe( 'contentOnly' );
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f'
+			)
+		).toBe( 'contentOnly' );
+	} );
+
+	it( 'in navigation mode, blocks with content attributes within sections are contentOnly', () => {
+		hasContentRoleAttribute.mockReturnValueOnce( true );
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'b3247f75-fd94-4fef-97f9-5bfd162cc416'
+			)
+		).toBe( 'contentOnly' );
+
+		hasContentRoleAttribute.mockReturnValueOnce( true );
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c'
+			)
+		).toBe( 'contentOnly' );
+	} );
+
+	it( 'in navigation mode, blocks without content attributes within sections are disabled', () => {
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'9b9c5c3f-2e46-4f02-9e14-9fed515b958s'
+			)
+		).toBe( 'disabled' );
+	} );
 } );
diff --git a/packages/block-editor/src/store/utils.js b/packages/block-editor/src/store/utils.js
index c94453e99c60a..9b83a8f74cf9a 100644
--- a/packages/block-editor/src/store/utils.js
+++ b/packages/block-editor/src/store/utils.js
@@ -1,11 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+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 {
+		...pattern,
+		blocks,
+	};
+}
+
+export function getParsedPattern( pattern ) {
+	let parsedPattern = parsedPatternCache.get( pattern );
+	if ( ! parsedPattern ) {
+		parsedPattern = parsePattern( pattern );
+		parsedPatternCache.set( pattern, parsedPattern );
+	}
+	return parsedPattern;
+}
 
-export const withRootClientIdOptionKey = Symbol( 'withRootClientId' );
+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' ) {
@@ -67,5 +117,7 @@ export function getInsertBlockTypeDependants( state, rootClientId ) {
 		state.settings.allowedBlockTypes,
 		state.settings.templateLock,
 		state.blockEditingModes,
+		state.editorMode,
+		getSectionRootClientId( state ),
 	];
 }
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index e7e4b75d0a30f..e6ec77b55a0ec 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -1,4 +1,5 @@
 @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";
@@ -40,14 +41,13 @@
 @import "./components/multi-selection-inspector/style.scss";
 @import "./components/responsive-block-control/style.scss";
 @import "./components/rich-text/style.scss";
-@import "./components/segmented-text-control/style.scss";
 @import "./components/skip-to-selected-block/style.scss";
 @import "./components/tabbed-sidebar/style.scss";
 @import "./components/tool-selector/style.scss";
 @import "./components/url-input/style.scss";
 @import "./components/url-popover/style.scss";
-@import "./hooks/block-bindings.scss";
 @import "./hooks/block-hooks.scss";
+@import "./hooks/block-bindings.scss";
 @import "./hooks/border.scss";
 @import "./hooks/color.scss";
 @import "./hooks/dimensions.scss";
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 0000000000000..2deeb95937174
--- /dev/null
+++ b/packages/block-editor/src/utils/block-bindings.js
@@ -0,0 +1,146 @@
+/**
+ * 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.
+ *
+ * @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() {
+	const { clientId } = useBlockEditContext();
+	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( clientId );
+		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( clientId, {
+			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( clientId );
+		updateBlockAttributes( clientId, {
+			metadata: isObjectEmpty( metadata ) ? undefined : metadata,
+		} );
+	};
+
+	return { updateBlockBindings, removeAllBlockBindings };
+}
diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js
index 6af35aff73015..9c2e813ef742b 100644
--- a/packages/block-editor/src/utils/dom.js
+++ b/packages/block-editor/src/utils/dom.js
@@ -57,3 +57,120 @@ 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;
+}
+
+/**
+ * Returns the rect of the element including all visible nested elements.
+ *
+ * Visible nested elements, including elements that overflow the parent, are
+ * taken into account.
+ *
+ * This function is useful for calculating the visible area of a block that
+ * contains nested elements that overflow the block, e.g. the Navigation block,
+ * which can contain overflowing Submenu blocks.
+ *
+ * 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 getVisibleElementBounds( element ) {
+	const viewport = element.ownerDocument.defaultView;
+	if ( ! viewport ) {
+		return new window.DOMRectReadOnly();
+	}
+
+	let bounds = element.getBoundingClientRect();
+
+	const stack = [ element ];
+	let currentElement;
+
+	while ( ( currentElement = stack.pop() ) ) {
+		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/get-editor-region.js b/packages/block-editor/src/utils/get-editor-region.js
index 7edc57d1157fb..16561b26b88ae 100644
--- a/packages/block-editor/src/utils/get-editor-region.js
+++ b/packages/block-editor/src/utils/get-editor-region.js
@@ -23,7 +23,7 @@ export default function getEditorRegion( editor ) {
 			return iframeDocument === editor.ownerDocument;
 		} ) ?? editor;
 
-	// The region is provivided by the editor, not the block-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.
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
index 88b40a5aacfeb..dcb56fc86b267 100644
--- a/packages/block-editor/src/utils/get-font-styles-and-weights.js
+++ b/packages/block-editor/src/utils/get-font-styles-and-weights.js
@@ -79,7 +79,10 @@ export function getFontStylesAndWeights( fontFamilyFaces ) {
 
 	fontFamilyFaces?.forEach( ( face ) => {
 		// Check for variable font by looking for a space in the font weight value. e.g. "100 900"
-		if ( /\s/.test( face.fontWeight.trim() ) ) {
+		if (
+			'string' === typeof face.fontWeight &&
+			/\s/.test( face.fontWeight.trim() )
+		) {
 			isVariableFont = true;
 
 			// Find font weight start and end values.
@@ -105,11 +108,15 @@ export function getFontStylesAndWeights( fontFamilyFaces ) {
 		}
 
 		// Format font style and weight values.
-		const fontWeight = formatFontWeight( face.fontWeight );
+		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 ) {
+		if ( fontStyle && Object.keys( fontStyle ).length ) {
 			if (
 				! fontStyles.some(
 					( style ) => style.value === fontStyle.value
@@ -118,7 +125,8 @@ export function getFontStylesAndWeights( fontFamilyFaces ) {
 				fontStyles.push( fontStyle );
 			}
 		}
-		if ( fontWeight ) {
+
+		if ( fontWeight && Object.keys( fontWeight ).length ) {
 			if (
 				! fontWeights.some(
 					( weight ) => weight.value === fontWeight.value
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
index f1ee9fbcafb13..57e5e9827def8 100644
--- a/packages/block-editor/src/utils/get-px-from-css-unit.js
+++ b/packages/block-editor/src/utils/get-px-from-css-unit.js
@@ -1,5 +1,5 @@
 /**
- * This function was accidentially exposed for mobile/native usage.
+ * This function was accidentally exposed for mobile/native usage.
  *
  * @deprecated
  *
diff --git a/packages/block-editor/src/utils/index.js b/packages/block-editor/src/utils/index.js
index 6f53ba585e5ec..1b5aa769a13b2 100644
--- a/packages/block-editor/src/utils/index.js
+++ b/packages/block-editor/src/utils/index.js
@@ -1,2 +1,3 @@
 export { default as transformStyles } from './transform-styles';
 export { default as getPxFromCssUnit } from './get-px-from-css-unit';
+export { useBlockBindingsUtils } from './block-bindings';
diff --git a/packages/block-editor/src/utils/test/__snapshots__/transform-styles.js.snap b/packages/block-editor/src/utils/test/__snapshots__/transform-styles.js.snap
deleted file mode 100644
index 9da07667d0a3e..0000000000000
--- a/packages/block-editor/src/utils/test/__snapshots__/transform-styles.js.snap
+++ /dev/null
@@ -1,109 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`transformStyles URL rewrite should not replace absolute paths 1`] = `
-[
-  "h1 { background: url(/images/test.png); }",
-]
-`;
-
-exports[`transformStyles URL rewrite should not replace remote paths 1`] = `
-[
-  "h1 { background: url(http://wp.org/images/test.png); }",
-]
-`;
-
-exports[`transformStyles URL rewrite should replace complex relative paths 1`] = `
-[
-  "h1 { background: url(http://wp-site.local/themes/gut/images/test.png); }",
-]
-`;
-
-exports[`transformStyles URL rewrite should rewrite relative paths 1`] = `
-[
-  "h1 { background: url(http://wp-site.local/themes/gut/css/images/test.png); }",
-]
-`;
-
-exports[`transformStyles error handling should handle multiple instances of \`:root :where(body)\` 1`] = `
-[
-  ".my-namespace { color: pink; } .my-namespace { color: orange; }",
-]
-`;
-
-exports[`transformStyles selector wrap should ignore font-face selectors 1`] = `
-[
-  "
-			@font-face {
-				font-family: myFirstFont;
-				src: url(sansation_light.woff);
-			}",
-]
-`;
-
-exports[`transformStyles selector wrap should ignore keyframes 1`] = `
-[
-  "
-			@keyframes edit-post__fade-in-animation {
-				from {
-					opacity: 0;
-				}
-			}",
-]
-`;
-
-exports[`transformStyles selector wrap should ignore selectors 1`] = `
-[
-  ".my-namespace h1, body { color: red; }",
-]
-`;
-
-exports[`transformStyles selector wrap should not double wrap selectors 1`] = `
-[
-  " .my-namespace h1, .my-namespace .red { color: red; }",
-]
-`;
-
-exports[`transformStyles selector wrap should replace :root selectors 1`] = `
-[
-  "
-			.my-namespace {
-				--my-color: #ff0000;
-			}",
-]
-`;
-
-exports[`transformStyles selector wrap should replace root tags 1`] = `
-[
-  ".my-namespace, .my-namespace h1 { color: red; }",
-]
-`;
-
-exports[`transformStyles selector wrap should wrap multiple selectors 1`] = `
-[
-  ".my-namespace h1, .my-namespace h2 { color: red; }",
-]
-`;
-
-exports[`transformStyles selector wrap should wrap regular selectors 1`] = `
-[
-  ".my-namespace h1 { color: red; }",
-]
-`;
-
-exports[`transformStyles selector wrap should wrap selectors inside container queries 1`] = `
-[
-  "
-			@container (width > 400px) {
-				  .my-namespace h1 { color: red; }
-			}",
-]
-`;
-
-exports[`transformStyles should not break with data urls 1`] = `
-[
-  ".wp-block-group {
-			background-image: url("data:image/svg+xml,%3Csvg%3E.b%7Bclip-path:url(test);%7D%3C/svg%3E");
-			color: red !important;
-		  }",
-]
-`;
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
index ffc1a635aa1fb..7c50409bae1ac 100644
--- 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
@@ -343,6 +343,17 @@ describe( 'getFontStylesAndWeights', () => {
 				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',
@@ -378,6 +389,10 @@ describe( 'getFontStylesAndWeights', () => {
 					name: 'Regular',
 					value: '400',
 				},
+				{
+					name: 'Semi Bold',
+					value: '600',
+				},
 				{
 					name: 'Black',
 					value: '900',
@@ -396,6 +411,14 @@ describe( 'getFontStylesAndWeights', () => {
 						fontWeight: '400',
 					},
 				},
+				{
+					key: 'normal-600',
+					name: 'Semi Bold',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '600',
+					},
+				},
 				{
 					key: 'normal-900',
 					name: 'Black',
@@ -420,6 +443,14 @@ describe( 'getFontStylesAndWeights', () => {
 						fontWeight: '400',
 					},
 				},
+				{
+					key: 'italic-600',
+					name: 'Semi Bold Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '600',
+					},
+				},
 				{
 					key: 'italic-900',
 					name: 'Black Italic',
@@ -510,4 +541,121 @@ describe( 'getFontStylesAndWeights', () => {
 			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/transform-styles.js b/packages/block-editor/src/utils/test/transform-styles.js
index 8245ce6283107..efe92cea63d0f 100644
--- a/packages/block-editor/src/utils/test/transform-styles.js
+++ b/packages/block-editor/src/utils/test/transform-styles.js
@@ -62,8 +62,169 @@ describe( 'transformStyles', () => {
 				],
 				'.my-namespace'
 			);
+			const expected =
+				':root :where(body) .my-namespace { color: pink; } :root :where(body) .my-namespace { color: orange; }';
 
-			expect( output ).toMatchSnapshot();
+			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 ] );
 		} );
 	} );
 
@@ -78,8 +239,9 @@ describe( 'transformStyles', () => {
 				],
 				'.my-namespace'
 			);
+			const expected = '.my-namespace h1 { color: red; }';
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ expected ] );
 		} );
 
 		it( 'should wrap multiple selectors', () => {
@@ -92,11 +254,13 @@ describe( 'transformStyles', () => {
 				],
 				'.my-namespace'
 			);
+			const expected =
+				'.my-namespace h1, .my-namespace h2 { color: red; }';
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ expected ] );
 		} );
 
-		it( 'should ignore selectors', () => {
+		it( 'should ignore ignored selectors', () => {
 			const input = `h1, body { color: red; }`;
 			const output = transformStyles(
 				[
@@ -107,12 +271,13 @@ describe( 'transformStyles', () => {
 				],
 				'.my-namespace'
 			);
+			const expected = '.my-namespace h1, body { color: red; }';
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ expected ] );
 		} );
 
-		it( 'should replace root tags', () => {
-			const input = `body, h1 { color: red; }`;
+		it( `should not try to replace 'body' in the middle of a classname`, () => {
+			const input = '.has-body-text { color: red; }';
 			const output = transformStyles(
 				[
 					{
@@ -121,13 +286,14 @@ describe( 'transformStyles', () => {
 				],
 				'.my-namespace'
 			);
+			const expected = '.my-namespace .has-body-text { color: red; }';
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ expected ] );
 		} );
 
 		it( 'should ignore keyframes', () => {
 			const input = `
-			@keyframes edit-post__fade-in-animation {
+			@keyframes __wp-base-styles-fade-in {
 				from {
 					opacity: 0;
 				}
@@ -141,7 +307,7 @@ describe( 'transformStyles', () => {
 				'.my-namespace'
 			);
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ input ] );
 		} );
 
 		it( 'should wrap selectors inside container queries', () => {
@@ -157,8 +323,12 @@ describe( 'transformStyles', () => {
 				],
 				'.my-namespace'
 			);
+			const expected = `
+			@container (width > 400px) {
+				  .my-namespace h1 { color: red; }
+			}`;
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ expected ] );
 		} );
 
 		it( 'should ignore font-face selectors', () => {
@@ -176,14 +346,11 @@ describe( 'transformStyles', () => {
 				'.my-namespace'
 			);
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ input ] );
 		} );
 
-		it( 'should replace :root selectors', () => {
-			const input = `
-			:root {
-				--my-color: #ff0000;
-			}`;
+		it( 'should not double wrap selectors', () => {
+			const input = ' .my-namespace h1, .red { color: red; }';
 			const output = transformStyles(
 				[
 					{
@@ -192,13 +359,82 @@ describe( 'transformStyles', () => {
 				],
 				'.my-namespace'
 			);
+			const expected = ` .my-namespace h1, .my-namespace .red { color: red; }`;
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ expected ] );
 		} );
 
-		it( 'should not double wrap selectors', () => {
-			const input = ` .my-namespace h1, .red { color: red; }`;
+		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(
 				[
 					{
@@ -207,8 +443,27 @@ describe( 'transformStyles', () => {
 				],
 				'.my-namespace'
 			);
+			const expected =
+				'.my-namespace :where(.wp-element-button:active, .wp-block-button__link:active) { color: blue; }';
 
-			expect( output ).toMatchSnapshot();
+			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 ] );
 		} );
 	} );
 
@@ -225,7 +480,7 @@ describe( 'transformStyles', () => {
 			},
 		] );
 
-		expect( output ).toMatchSnapshot();
+		expect( output ).toEqual( [ input ] );
 	} );
 
 	describe( 'URL rewrite', () => {
@@ -237,8 +492,10 @@ describe( 'transformStyles', () => {
 					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 ).toMatchSnapshot();
+			expect( output ).toEqual( [ expected ] );
 		} );
 
 		it( 'should replace complex relative paths', () => {
@@ -249,8 +506,10 @@ describe( 'transformStyles', () => {
 					baseURL: 'http://wp-site.local/themes/gut/css/',
 				},
 			] );
+			const expected =
+				'h1 { background: url(http://wp-site.local/themes/gut/images/test.png); }';
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ expected ] );
 		} );
 
 		it( 'should not replace absolute paths', () => {
@@ -261,8 +520,7 @@ describe( 'transformStyles', () => {
 					baseURL: 'http://wp-site.local/themes/gut/css/',
 				},
 			] );
-
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ input ] );
 		} );
 
 		it( 'should not replace remote paths', () => {
@@ -274,7 +532,7 @@ describe( 'transformStyles', () => {
 				},
 			] );
 
-			expect( output ).toMatchSnapshot();
+			expect( output ).toEqual( [ input ] );
 		} );
 	} );
 } );
diff --git a/packages/block-editor/src/utils/transform-styles/index.js b/packages/block-editor/src/utils/transform-styles/index.js
index 9d57de3fa3833..936ebb016fa1b 100644
--- a/packages/block-editor/src/utils/transform-styles/index.js
+++ b/packages/block-editor/src/utils/transform-styles/index.js
@@ -1,39 +1,142 @@
 /**
  * External dependencies
  */
+import * as parsel from 'parsel-js';
 import postcss, { CssSyntaxError } from 'postcss';
-import wrap from 'postcss-prefixwrap';
+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)' },
+];
+
+/**
+ * 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.
+ */
+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 = ''
+	wrapperSelector = '',
+	transformOptions
 ) {
-	// When there is no wrapper selector or base URL, there is no need
+	// 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;
 	}
-	const postcssFriendlyCSS = css
-		.replace( /:root :where\(body\)/g, 'body' )
-		.replace( /:where\(body\)/g, 'body' );
+
 	try {
+		const excludedSelectors = [
+			...ignoredSelectors,
+			...( transformOptions?.ignoredSelectors ?? [] ),
+			wrapperSelector,
+		];
+
 		return postcss(
 			[
 				wrapperSelector &&
-					wrap( wrapperSelector, {
-						ignoredSelectors: [
-							...ignoredSelectors,
-							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( postcssFriendlyCSS, {} ).css; // use sync PostCSS API
+		).process( css, {} ).css; // use sync PostCSS API
 	} catch ( error ) {
 		if ( error instanceof CssSyntaxError ) {
 			// eslint-disable-next-line no-console
@@ -54,18 +157,26 @@ function transformStyle(
 }
 
 /**
- * Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.
- *
  * @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.
+ * @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.
+ */
+
+/**
+ * Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.
  *
- * @param    {EditorStyle[]} styles           CSS rules.
- * @param    {string}        wrapperSelector  Wrapper selector.
+ * @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, wrapperSelector = '' ) => {
+const transformStyles = ( styles, wrapperSelector = '', transformOptions ) => {
 	let cache = cacheByWrapperSelector.get( wrapperSelector );
 	if ( ! cache ) {
 		cache = new WeakMap();
@@ -74,7 +185,7 @@ const transformStyles = ( styles, wrapperSelector = '' ) => {
 	return styles.map( ( style ) => {
 		let css = cache.get( style );
 		if ( ! css ) {
-			css = transformStyle( style, wrapperSelector );
+			css = transformStyle( style, wrapperSelector, transformOptions );
 			cache.set( style, css );
 		}
 		return css;
diff --git a/packages/block-editor/tsconfig.json b/packages/block-editor/tsconfig.json
index 192b6f7de7e12..37fb61895d252 100644
--- a/packages/block-editor/tsconfig.json
+++ b/packages/block-editor/tsconfig.json
@@ -8,6 +8,7 @@
 	"references": [
 		{ "path": "../a11y" },
 		{ "path": "../api-fetch" },
+		{ "path": "../block-serialization-default-parser" },
 		{ "path": "../blob" },
 		{ "path": "../components" },
 		{ "path": "../compose" },
diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
index 8200d6005fe9a..5ffd428b6dbdc 100644
--- a/packages/block-library/CHANGELOG.md
+++ b/packages/block-library/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index 9102e822e59d1..ac25e1cdb815a 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.3.0",
+	"version": "9.9.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,6 +30,13 @@
 		"src/**/*.scss",
 		"{src,build,build-module}/*/init.js"
 	],
+	"wpScriptModuleExports": {
+		"./file/view": "./build-module/file/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"
+	},
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/a11y": "file:../a11y",
diff --git a/packages/block-library/src/archives/edit.js b/packages/block-library/src/archives/edit.js
index 4eed206314e42..60b8715988ed9 100644
--- a/packages/block-library/src/archives/edit.js
+++ b/packages/block-library/src/archives/edit.js
@@ -51,8 +51,9 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 						}
 					/>
 					<SelectControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
-						label={ __( 'Group by:' ) }
+						label={ __( 'Group by' ) }
 						options={ [
 							{ label: __( 'Year' ), value: 'yearly' },
 							{ label: __( 'Month' ), value: 'monthly' },
diff --git a/packages/block-library/src/audio/block.json b/packages/block-library/src/audio/block.json
index bee2ff6d534a7..9b77efee23cce 100644
--- a/packages/block-library/src/audio/block.json
+++ b/packages/block-library/src/audio/block.json
@@ -10,24 +10,24 @@
 	"attributes": {
 		"blob": {
 			"type": "string",
-			"__experimentalRole": "local"
+			"role": "local"
 		},
 		"src": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "audio",
 			"attribute": "src",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"caption": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "figcaption",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"id": {
 			"type": "number",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"autoplay": {
 			"type": "boolean",
diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
index 97d3c9c5a1ae3..e3b4ca670f957 100644
--- a/packages/block-library/src/audio/edit.js
+++ b/packages/block-library/src/audio/edit.js
@@ -155,6 +155,7 @@ function AudioEdit( {
 						onSelect={ onSelectAudio }
 						onSelectURL={ onSelectURL }
 						onError={ onUploadError }
+						onReset={ () => onSelectAudio( undefined ) }
 					/>
 				</BlockControls>
 			) }
@@ -174,6 +175,7 @@ function AudioEdit( {
 						checked={ loop }
 					/>
 					<SelectControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ _x( 'Preload', 'noun; Audio block parameter' ) }
 						value={ preload || '' }
@@ -197,9 +199,9 @@ function AudioEdit( {
 			</InspectorControls>
 			<figure { ...blockProps }>
 				{ /*
-					Disable the audio tag if the block is not selected
-					so the user clicking on it won't play the
-					file or change the position slider when the controls are enabled.
+				Disable the audio tag if the block is not selected
+				so the user clicking on it won't play the
+				file or change the position slider when the controls are enabled.
 				*/ }
 				<Disabled isDisabled={ ! isSingleSelected }>
 					<audio controls="controls" src={ src ?? temporaryURL } />
diff --git a/packages/block-library/src/avatar/edit.js b/packages/block-library/src/avatar/edit.js
index 4fad0fb09f883..8309bc5e878a0 100644
--- a/packages/block-library/src/avatar/edit.js
+++ b/packages/block-library/src/avatar/edit.js
@@ -58,6 +58,7 @@ const AvatarInspectorControls = ( {
 			/>
 			{ attributes.isLink && (
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Open in new tab' ) }
 					onChange={ ( value ) =>
 						setAttributes( {
diff --git a/packages/block-library/src/avatar/index.js b/packages/block-library/src/avatar/index.js
index d318450aec390..0b3ad9c62c4e3 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/user-control.js b/packages/block-library/src/avatar/user-control.js
index 598c05011eaed..235202ffec90d 100644
--- a/packages/block-library/src/avatar/user-control.js
+++ b/packages/block-library/src/avatar/user-control.js
@@ -33,6 +33,7 @@ function UserControl( { value, onChange } ) {
 
 	return (
 		<ComboboxControl
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label={ __( 'User' ) }
 			help={ __(
diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
index 53422e1c4cb8c..104b07157cba7 100644
--- a/packages/block-library/src/block/edit.js
+++ b/packages/block-library/src/block/edit.js
@@ -29,9 +29,10 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 	BlockControls,
+	InnerBlocks,
 } from '@wordpress/block-editor';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
-import { store as blocksStore } from '@wordpress/blocks';
+import { getBlockBindingsSource } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -193,19 +194,14 @@ function ReusableBlockEdit( {
 		hasPatternOverridesSource,
 	} = useSelect(
 		( select ) => {
-			const {
-				getBlocks,
-				getSettings,
-				getBlockEditingMode: _getBlockEditingMode,
-			} = select( blockEditorStore );
-			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
+			const { getBlocks, getSettings, getBlockEditingMode } =
+				select( blockEditorStore );
 			// For editing link to the site editor if the theme and user permissions support it.
 			return {
 				innerBlocks: getBlocks( patternClientId ),
-				getBlockEditingMode: _getBlockEditingMode,
 				onNavigateToEntityRecord:
 					getSettings().onNavigateToEntityRecord,
-				editingMode: _getBlockEditingMode( patternClientId ),
+				editingMode: getBlockEditingMode( patternClientId ),
 				hasPatternOverridesSource: !! getBlockBindingsSource(
 					'core/pattern-overrides'
 				),
@@ -247,14 +243,15 @@ function ReusableBlockEdit( {
 		),
 	} );
 
-	// Use `blocks` variable until `innerBlocks` is populated, which has the proper clientIds.
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		templateLock: 'all',
 		layout,
-		value: innerBlocks.length > 0 ? innerBlocks : blocks,
+		value: blocks,
 		onInput: NOOP,
 		onChange: NOOP,
-		renderAppender: blocks?.length ? undefined : blocks.ButtonBlockAppender,
+		renderAppender: blocks?.length
+			? undefined
+			: InnerBlocks.ButtonBlockAppender,
 	} );
 
 	const handleEditOriginal = () => {
@@ -292,7 +289,7 @@ function ReusableBlockEdit( {
 
 	return (
 		<>
-			{ hasResolved && (
+			{ hasResolved && ! isMissing && (
 				<ReusableBlockControl
 					recordId={ ref }
 					canOverrideBlocks={ canOverrideBlocks }
diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
index d0f90b93467c9..2c1c05baa20dd 100644
--- a/packages/block-library/src/button/block.json
+++ b/packages/block-library/src/button/block.json
@@ -26,34 +26,34 @@
 			"source": "attribute",
 			"selector": "a",
 			"attribute": "href",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"title": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a,button",
 			"attribute": "title",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"text": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "a,button",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"linkTarget": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a",
 			"attribute": "target",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"rel": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a",
 			"attribute": "rel",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"placeholder": {
 			"type": "string"
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 3b2bb562e63c0..3539fd54f4eec 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -9,7 +9,6 @@ import clsx from 'clsx';
 import { NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
 import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
 import removeAnchorTag from '../utils/remove-anchor-tag';
-import { unlock } from '../lock-unlock';
 
 /**
  * WordPress dependencies
@@ -45,7 +44,7 @@ import {
 	createBlock,
 	cloneBlock,
 	getDefaultBlockName,
-	store as blocksStore,
+	getBlockBindingsSource,
 } from '@wordpress/blocks';
 import { useMergeRefs, useRefEffect } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -240,9 +239,9 @@ function ButtonEdit( props ) {
 				return {};
 			}
 
-			const blockBindingsSource = unlock(
-				select( blocksStore )
-			).getBlockBindingsSource( metadata?.bindings?.url?.source );
+			const blockBindingsSource = getBlockBindingsSource(
+				metadata?.bindings?.url?.source
+			);
 
 			return {
 				lockUrlControls:
@@ -254,7 +253,7 @@ function ButtonEdit( props ) {
 					} ),
 			};
 		},
-		[ isSelected, metadata?.bindings?.url ]
+		[ context, isSelected, metadata?.bindings?.url ]
 	);
 
 	return (
@@ -380,6 +379,7 @@ function ButtonEdit( props ) {
 			<InspectorControls group="advanced">
 				{ isLinkTag && (
 					<TextControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Link rel' ) }
 						value={ rel || '' }
diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index 8c879c7e3b7c9..8531f810e59e2 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -32,8 +32,3 @@
 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/index.php b/packages/block-library/src/button/index.php
index 4a53952ef537f..f272fa9eb62b1 100644
--- a/packages/block-library/src/button/index.php
+++ b/packages/block-library/src/button/index.php
@@ -17,20 +17,7 @@
  * @return string The block content.
  */
 function render_block_core_button( $attributes, $content ) {
-	/*
-	 * The current Gutenberg plugin supports WordPress 6.4, but the next_token()
-	 * method does not exist in WordPress 6.4. Therefore, if Gutenberg is used
-	 * as a plugin, use the Gutenberg class that has the `next_token()` method.
-	 *
-	 * TODO: After the Gutenberg plugin drops support for WordPress 6.4, this
-	 * conditional statement will be removed and the core class `WP_HTML_Tag_Processor`
-	 * should be used.
-	 */
-	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && class_exists( 'Gutenberg_HTML_Tag_Processor_6_7' ) ) {
-		$p = new Gutenberg_HTML_Tag_Processor_6_7( $content );
-	} else {
-		$p = new WP_HTML_Tag_Processor( $content );
-	}
+	$p = new WP_HTML_Tag_Processor( $content );
 
 	/*
 	 * The button block can render an `<a>` or `<button>` and also has a
diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json
index 220f6ef8fd1e2..bb4c370158ad5 100644
--- a/packages/block-library/src/buttons/block.json
+++ b/packages/block-library/src/buttons/block.json
@@ -21,7 +21,7 @@
 			}
 		},
 		"spacing": {
-			"blockGap": true,
+			"blockGap": [ "horizontal", "vertical" ],
 			"padding": true,
 			"margin": [ "top", "bottom" ],
 			"__experimentalDefaultControls": {
diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
index b97c915671ad9..f0a1e930d40bb 100644
--- a/packages/block-library/src/buttons/editor.scss
+++ b/packages/block-library/src/buttons/editor.scss
@@ -33,14 +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.
-	/* stylelint-disable indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
+	/* 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;
@@ -52,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/style.scss b/packages/block-library/src/buttons/style.scss
index 7e8bd61b03eaf..e563f3957f374 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,14 +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.
-	/* stylelint-disable indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
+	/* 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/categories/block.json b/packages/block-library/src/categories/block.json
index 7f74befa3b681..3609bdf9ab97c 100644
--- a/packages/block-library/src/categories/block.json
+++ b/packages/block-library/src/categories/block.json
@@ -2,11 +2,16 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"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
@@ -29,13 +34,14 @@
 		},
 		"label": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"showLabel": {
 			"type": "boolean",
 			"default": true
 		}
 	},
+	"usesContext": [ "enhancedPagination" ],
 	"supports": {
 		"align": true,
 		"html": false,
@@ -62,6 +68,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-categories-editor",
diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js
index 48d505eeb75ae..8bd2769b0ec71 100644
--- a/packages/block-library/src/categories/edit.js
+++ b/packages/block-library/src/categories/edit.js
@@ -9,6 +9,7 @@ import clsx from 'clsx';
 import {
 	PanelBody,
 	Placeholder,
+	SelectControl,
 	Spinner,
 	ToggleControl,
 	VisuallyHidden,
@@ -20,7 +21,7 @@ import {
 	RichText,
 } from '@wordpress/block-editor';
 import { decodeEntities } from '@wordpress/html-entities';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { pin } from '@wordpress/icons';
 import { useEntityRecords } from '@wordpress/core-data';
 
@@ -33,19 +34,33 @@ export default function CategoriesEdit( {
 		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
 	);
 
@@ -66,7 +81,7 @@ export default function CategoriesEdit( {
 		! 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 )
@@ -82,19 +97,21 @@ 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 (
 			<>
@@ -102,7 +119,7 @@ export default function CategoriesEdit( {
 					<RichText
 						className="wp-block-categories__label"
 						aria-label={ __( 'Label text' ) }
-						placeholder={ __( 'Categories' ) }
+						placeholder={ taxonomy.name }
 						withoutInteractiveFormatting
 						value={ label }
 						onChange={ ( html ) =>
@@ -111,11 +128,17 @@ export default function CategoriesEdit( {
 					/>
 				) : (
 					<VisuallyHidden as="label" htmlFor={ selectId }>
-						{ label ? label : __( 'Categories' ) }
+						{ 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 )
 					) }
@@ -133,7 +156,8 @@ export default function CategoriesEdit( {
 				{ renderCategoryName( name ) }
 				{ showPostCounts && ` (${ count })` }
 			</option>,
-			showHierarchy &&
+			isHierarchicalTaxonomy &&
+				showHierarchy &&
 				!! childCategories.length &&
 				childCategories.map( ( childCategory ) =>
 					renderCategoryDropdownItem( childCategory, level + 1 )
@@ -161,6 +185,23 @@ 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' ) }
@@ -182,19 +223,21 @@ export default function CategoriesEdit( {
 						checked={ showPostCounts }
 						onChange={ toggleAttribute( 'showPostCounts' ) }
 					/>
+					{ isHierarchicalTaxonomy && (
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show only top level terms' ) }
+							checked={ showOnlyTopLevel }
+							onChange={ toggleAttribute( 'showOnlyTopLevel' ) }
+						/>
+					) }
 					<ToggleControl
 						__nextHasNoMarginBottom
-						label={ __( 'Show only top level categories' ) }
-						checked={ showOnlyTopLevel }
-						onChange={ toggleAttribute( 'showOnlyTopLevel' ) }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Show empty categories' ) }
+						label={ __( 'Show empty terms' ) }
 						checked={ showEmpty }
 						onChange={ toggleAttribute( 'showEmpty' ) }
 					/>
-					{ ! showOnlyTopLevel && (
+					{ isHierarchicalTaxonomy && ! showOnlyTopLevel && (
 						<ToggleControl
 							__nextHasNoMarginBottom
 							label={ __( 'Show hierarchy' ) }
@@ -205,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/index.js b/packages/block-library/src/categories/index.js
index 8cdcad450862a..d30c55667d106 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 062130e85010a..60a29713b4660 100644
--- a/packages/block-library/src/categories/index.php
+++ b/packages/block-library/src/categories/index.php
@@ -9,20 +9,26 @@
  * Renders the `core/categories` block on server.
  *
  * @since 5.0.0
+ * @since 6.7.0 Enable client-side rendering if enhancedPagination context is true.
  *
- * @param array $attributes The block attributes.
+ * @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'] ),
 	);
@@ -33,13 +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' );
-		$show_label               = empty( $attributes['showLabel'] ) ? ' screen-reader-text' : '';
-		$default_label            = __( 'Categories' );
-		$label_text               = ! empty( $attributes['label'] ) ? $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';
+		$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.
@@ -51,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}" ) );
@@ -81,8 +104,8 @@ function build_dropdown_script_block_core_categories( $dropdown_id ) {
 	( 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;
diff --git a/packages/block-library/src/categories/variations.js b/packages/block-library/src/categories/variations.js
new file mode 100644
index 0000000000000..94f3fb8efa6b9
--- /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/column/block.json b/packages/block-library/src/column/block.json
index 0857abb47ffdc..33bd528b35688 100644
--- a/packages/block-library/src/column/block.json
+++ b/packages/block-library/src/column/block.json
@@ -48,10 +48,12 @@
 		},
 		"__experimentalBorder": {
 			"color": true,
+			"radius": true,
 			"style": true,
 			"width": true,
 			"__experimentalDefaultControls": {
 				"color": true,
+				"radius": true,
 				"style": true,
 				"width": true
 			}
diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js
index 2d399f392278c..a0f3cdcf65393 100644
--- a/packages/block-library/src/column/edit.js
+++ b/packages/block-library/src/column/edit.js
@@ -33,8 +33,8 @@ function ColumnInspectorControls( { width, setAttributes } ) {
 		<PanelBody title={ __( 'Settings' ) }>
 			<UnitControl
 				label={ __( 'Width' ) }
-				labelPosition="edge"
-				__unstableInputWidth="80px"
+				__unstableInputWidth="calc(50% - 8px)"
+				__next40pxDefaultSize
 				value={ width || '' }
 				onChange={ ( nextWidth ) => {
 					nextWidth = 0 > parseFloat( nextWidth ) ? '0' : nextWidth;
diff --git a/packages/block-library/src/comment-author-name/block.json b/packages/block-library/src/comment-author-name/block.json
index f3422faf0264d..1889d054c940e 100644
--- a/packages/block-library/src/comment-author-name/block.json
+++ b/packages/block-library/src/comment-author-name/block.json
@@ -51,6 +51,19 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
-	}
+	},
+	"style": "wp-block-comment-author-name"
 }
diff --git a/packages/block-library/src/comment-author-name/index.js b/packages/block-library/src/comment-author-name/index.js
index 4d85bbebe047b..5bcb689656480 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/style.scss b/packages/block-library/src/comment-author-name/style.scss
new file mode 100644
index 0000000000000..1e8c5eeb154b0
--- /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 9ac4b5453365b..0e812299a45e8 100644
--- a/packages/block-library/src/comment-content/block.json
+++ b/packages/block-library/src/comment-content/block.json
@@ -35,6 +35,18 @@
 				"fontSize": true
 			}
 		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
+		},
 		"spacing": {
 			"padding": [ "horizontal", "vertical" ],
 			"__experimentalDefaultControls": {
@@ -42,5 +54,6 @@
 			}
 		},
 		"html": false
-	}
+	},
+	"style": "wp-block-comment-content"
 }
diff --git a/packages/block-library/src/comment-content/index.js b/packages/block-library/src/comment-content/index.js
index 130f1d3012555..aefcef75acf8a 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/style.scss b/packages/block-library/src/comment-content/style.scss
index dd9c4b22ae99c..a94048de6014d 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 ddc0281e6c668..1e8110f836d93 100644
--- a/packages/block-library/src/comment-date/block.json
+++ b/packages/block-library/src/comment-date/block.json
@@ -47,6 +47,19 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
-	}
+	},
+	"style": "wp-block-comment-date"
 }
diff --git a/packages/block-library/src/comment-date/index.js b/packages/block-library/src/comment-date/index.js
index fddae539acfa3..d95c0a958f9ed 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 8deed94132488..bdb6fd5ba42ae 100644
--- a/packages/block-library/src/comment-date/index.php
+++ b/packages/block-library/src/comment-date/index.php
@@ -30,7 +30,7 @@ function render_block_core_comment_date( $attributes, $content, $block ) {
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 	if ( isset( $attributes['format'] ) && 'human-diff' === $attributes['format'] ) {
 		// translators: %s: human-readable time difference.
-		$formatted_date = sprintf( __( '%s ago', 'gutenberg' ), human_time_diff( get_comment_date( 'U', $comment ) ) );
+		$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 );
 	}
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 0000000000000..9b897defa655b
--- /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 a49f9a23161b8..578b284715c2a 100644
--- a/packages/block-library/src/comment-edit-link/block.json
+++ b/packages/block-library/src/comment-edit-link/block.json
@@ -30,7 +30,11 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,
@@ -47,6 +51,13 @@
 		},
 		"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/index.js b/packages/block-library/src/comment-edit-link/index.js
index 6639dda86a7a4..ffe8c98a75dfd 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/style.scss b/packages/block-library/src/comment-edit-link/style.scss
new file mode 100644
index 0000000000000..1ae7daf55009e
--- /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 c10129412145c..68aa93c3c1526 100644
--- a/packages/block-library/src/comment-reply-link/block.json
+++ b/packages/block-library/src/comment-reply-link/block.json
@@ -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/index.js b/packages/block-library/src/comment-reply-link/index.js
index c04f8ce7b1bba..a8287f6b08ff3 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/style.scss b/packages/block-library/src/comment-reply-link/style.scss
new file mode 100644
index 0000000000000..7eca6cee1aa97
--- /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 70238c45a3d92..08fd591b42409 100644
--- a/packages/block-library/src/comment-template/block.json
+++ b/packages/block-library/src/comment-template/block.json
@@ -31,6 +31,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-comment-template"
diff --git a/packages/block-library/src/comments-pagination-next/block.json b/packages/block-library/src/comments-pagination-next/block.json
index 22e20bfa8dbf2..3f7ebe677328d 100644
--- a/packages/block-library/src/comments-pagination-next/block.json
+++ b/packages/block-library/src/comments-pagination-next/block.json
@@ -12,6 +12,11 @@
 			"type": "string"
 		}
 	},
+	"example": {
+		"attributes": {
+			"label": "Comments Next Page"
+		}
+	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
 		"reusable": false,
diff --git a/packages/block-library/src/comments-pagination-next/index.php b/packages/block-library/src/comments-pagination-next/index.php
index cb8350e561b6e..0fd9519a56d30 100644
--- a/packages/block-library/src/comments-pagination-next/index.php
+++ b/packages/block-library/src/comments-pagination-next/index.php
@@ -37,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 );
 
diff --git a/packages/block-library/src/comments-pagination-numbers/index.js b/packages/block-library/src/comments-pagination-numbers/index.js
index 3fd903e2d9ef4..f769f54b4ac03 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-previous/block.json b/packages/block-library/src/comments-pagination-previous/block.json
index 0871b000c569d..eb5203af33c86 100644
--- a/packages/block-library/src/comments-pagination-previous/block.json
+++ b/packages/block-library/src/comments-pagination-previous/block.json
@@ -12,6 +12,11 @@
 			"type": "string"
 		}
 	},
+	"example": {
+		"attributes": {
+			"label": "Comments Previous Page"
+		}
+	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
 		"reusable": false,
diff --git a/packages/block-library/src/comments-pagination-previous/index.php b/packages/block-library/src/comments-pagination-previous/index.php
index 092a28da67792..ba9bef97ad34d 100644
--- a/packages/block-library/src/comments-pagination-previous/index.php
+++ b/packages/block-library/src/comments-pagination-previous/index.php
@@ -29,7 +29,8 @@ function render_block_core_comments_pagination_previous( $attributes, $content,
 	};
 	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 );
 
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 ac3c17a2c4e72..c3a2d1dae648a 100644
--- a/packages/block-library/src/comments-pagination/comments-pagination-arrow-controls.js
+++ b/packages/block-library/src/comments-pagination/comments-pagination-arrow-controls.js
@@ -10,6 +10,7 @@ import {
 export function CommentsPaginationArrowControls( { value, onChange } ) {
 	return (
 		<ToggleGroupControl
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label={ __( 'Arrow' ) }
 			value={ value }
diff --git a/packages/block-library/src/comments-pagination/editor.scss b/packages/block-library/src/comments-pagination/editor.scss
index dbf7e60ff65c0..a875c9e0ee21c 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 {
diff --git a/packages/block-library/src/comments-title/block.json b/packages/block-library/src/comments-title/block.json
index f8a02f2e5089b..b66b741e1916a 100644
--- a/packages/block-library/src/comments-title/block.json
+++ b/packages/block-library/src/comments-title/block.json
@@ -23,6 +23,9 @@
 		"level": {
 			"type": "number",
 			"default": 2
+		},
+		"levelOptions": {
+			"type": "array"
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js
index 07149607bfc39..f2a9d23ddf6ca 100644
--- a/packages/block-library/src/comments-title/edit.js
+++ b/packages/block-library/src/comments-title/edit.js
@@ -23,7 +23,13 @@ import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 
 export default function Edit( {
-	attributes: { textAlign, showPostTitle, showCommentsCount, level },
+	attributes: {
+		textAlign,
+		showPostTitle,
+		showCommentsCount,
+		level,
+		levelOptions,
+	},
 	setAttributes,
 	context: { postType, postId },
 } ) {
@@ -95,6 +101,7 @@ export default function Edit( {
 			/>
 			<HeadingLevelDropdown
 				value={ level }
+				options={ levelOptions }
 				onChange={ ( newLevel ) =>
 					setAttributes( { level: newLevel } )
 				}
diff --git a/packages/block-library/src/comments-title/index.js b/packages/block-library/src/comments-title/index.js
index 86bdab0dbccbf..69b8228eab892 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/edit/comments-legacy.js b/packages/block-library/src/comments/edit/comments-legacy.js
index be460dbbcb0b5..dbe89a4e3a83e 100644
--- a/packages/block-library/src/comments/edit/comments-legacy.js
+++ b/packages/block-library/src/comments/edit/comments-legacy.js
@@ -29,6 +29,7 @@ export default function CommentsLegacy( {
 
 	const actions = [
 		<Button
+			__next40pxDefaultSize
 			key="convert"
 			onClick={ () => void setAttributes( { legacy: false } ) }
 			variant="primary"
diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js
index c5f430eead685..5e5fc64d12c16 100644
--- a/packages/block-library/src/cover/deprecated.js
+++ b/packages/block-library/src/cover/deprecated.js
@@ -400,8 +400,9 @@ const v12 = {
 	supports: v12BlockSupports,
 	isEligible( attributes ) {
 		return (
-			attributes.customOverlayColor !== undefined ||
-			attributes.overlayColor !== undefined
+			( attributes.customOverlayColor !== undefined ||
+				attributes.overlayColor !== undefined ) &&
+			attributes.isUserOverlayColor === undefined
 		);
 	},
 	migrate( attributes ) {
diff --git a/packages/block-library/src/cover/edit/block-controls.js b/packages/block-library/src/cover/edit/block-controls.js
index c4137ad2a8409..041566c0a5197 100644
--- a/packages/block-library/src/cover/edit/block-controls.js
+++ b/packages/block-library/src/cover/edit/block-controls.js
@@ -26,6 +26,7 @@ export default function CoverBlockControls( {
 	onSelectMedia,
 	currentSettings,
 	toggleUseFeaturedImage,
+	onClearMedia,
 } ) {
 	const { contentPosition, id, useFeaturedImage, minHeight, minHeightUnit } =
 		attributes;
@@ -101,6 +102,7 @@ export default function CoverBlockControls( {
 					onToggleFeaturedImage={ toggleUseFeaturedImage }
 					useFeaturedImage={ useFeaturedImage }
 					name={ ! url ? __( 'Add Media' ) : __( 'Replace' ) }
+					onReset={ onClearMedia }
 				/>
 			</BlockControls>
 		</>
diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js
index 458f279e8748b..804027708881b 100644
--- a/packages/block-library/src/cover/edit/index.js
+++ b/packages/block-library/src/cover/edit/index.js
@@ -18,6 +18,7 @@ import {
 	useInnerBlocksProps,
 	__experimentalUseGradient,
 	store as blockEditorStore,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -143,7 +144,10 @@ function CoverEdit( {
 				averageBackgroundColor
 			);
 			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( { isDark: newIsDark } );
+			setAttributes( {
+				isDark: newIsDark,
+				isUserOverlayColor: isUserOverlayColor || false,
+			} );
 		} )();
 		// Disable reason: Update the block only when the featured image changes.
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -201,6 +205,7 @@ function CoverEdit( {
 			useFeaturedImage: undefined,
 			dimRatio: newDimRatio,
 			isDark: newIsDark,
+			isUserOverlayColor: isUserOverlayColor || false,
 		} );
 	};
 
@@ -274,6 +279,9 @@ function CoverEdit( {
 	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 {
@@ -398,6 +406,7 @@ function CoverEdit( {
 			onSelectMedia={ onSelectMedia }
 			currentSettings={ currentSettings }
 			toggleUseFeaturedImage={ toggleUseFeaturedImage }
+			onClearMedia={ onClearMedia }
 		/>
 	);
 
@@ -442,7 +451,7 @@ function CoverEdit( {
 			<>
 				{ blockControls }
 				{ inspectorControls }
-				{ isSelected && (
+				{ hasNonContentControls && isSelected && (
 					<ResizableCoverPopover { ...resizableCoverProps } />
 				) }
 				<TagName
@@ -571,7 +580,7 @@ function CoverEdit( {
 				/>
 				<div { ...innerBlocksProps } />
 			</TagName>
-			{ isSelected && (
+			{ 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 5f93df58ad6fa..fd83ba716ddd4 100644
--- a/packages/block-library/src/cover/edit/inspector-controls.js
+++ b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -3,11 +3,9 @@
  */
 import { useMemo } from '@wordpress/element';
 import {
-	Button,
 	ExternalLink,
 	FocalPointPicker,
 	PanelBody,
-	PanelRow,
 	RangeControl,
 	TextareaControl,
 	ToggleControl,
@@ -73,13 +71,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 }
 		/>
@@ -93,7 +91,6 @@ export default function CoverInspectorControls( {
 	coverRef,
 	currentSettings,
 	updateDimRatio,
-	onClearMedia,
 } ) {
 	const {
 		useFeaturedImage,
@@ -188,7 +185,6 @@ export default function CoverInspectorControls( {
 						{ showFocalPointPicker && (
 							<FocalPointPicker
 								__nextHasNoMarginBottom
-								__next40pxDefaultSize
 								label={ __( 'Focal point' ) }
 								url={ url }
 								value={ focalPoint }
@@ -229,16 +225,6 @@ export default function CoverInspectorControls( {
 								}
 							/>
 						) }
-						<PanelRow>
-							<Button
-								variant="secondary"
-								size="small"
-								className="block-library-cover__reset-button"
-								onClick={ onClearMedia }
-							>
-								{ __( 'Clear Media' ) }
-							</Button>
-						</PanelRow>
 					</PanelBody>
 				) }
 			</InspectorControls>
@@ -300,6 +286,7 @@ export default function CoverInspectorControls( {
 			) }
 			<InspectorControls group="dimensions">
 				<ToolsPanelItem
+					className="single-column"
 					hasValue={ () => !! minHeight }
 					label={ __( 'Minimum height' ) }
 					onDeselect={ () =>
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index 189d658e955c9..b92c401311bee 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -1,9 +1,4 @@
 .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 {
diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js
index ab99d3c555e3b..97c52a47ec4d7 100644
--- a/packages/block-library/src/cover/test/edit.js
+++ b/packages/block-library/src/cover/test/edit.js
@@ -155,6 +155,34 @@ describe( 'Cover block', () => {
 				'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', () => {
@@ -242,30 +270,6 @@ describe( 'Cover block', () => {
 			expect( screen.getByAltText( 'Me' ) ).toBeInTheDocument();
 		} );
 
-		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: 'Clear Media',
-				} )
-			);
-			expect(
-				within( screen.getByLabelText( 'Block: Cover' ) ).queryByRole(
-					'img'
-				)
-			).not.toBeInTheDocument();
-		} );
-
 		describe( 'Color panel', () => {
 			test( 'applies selected opacity to block when number control value changed', async () => {
 				const { container } = await setup();
@@ -372,10 +376,10 @@ describe( 'Cover block', () => {
 					} )
 				);
 				await userEvent.clear(
-					screen.getByLabelText( 'Minimum height of cover' )
+					screen.getByLabelText( 'Minimum height' )
 				);
 				await userEvent.type(
-					screen.getByLabelText( 'Minimum height of cover' ),
+					screen.getByLabelText( 'Minimum height' ),
 					'300'
 				);
 
diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index 3432c00d7ab0c..314556ba6d591 100644
--- a/packages/block-library/src/details/edit.js
+++ b/packages/block-library/src/details/edit.js
@@ -48,6 +48,7 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Open by default' ) }
 						checked={ showContent }
 						onChange={ () =>
diff --git a/packages/block-library/src/details/index.js b/packages/block-library/src/details/index.js
index e30d1a8e04974..3ba5efb04e27d 100644
--- a/packages/block-library/src/details/index.js
+++ b/packages/block-library/src/details/index.js
@@ -11,6 +11,7 @@ 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 };
@@ -35,6 +36,7 @@ export const settings = {
 	},
 	save,
 	edit,
+	transforms,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/details/transforms.js b/packages/block-library/src/details/transforms.js
new file mode 100644
index 0000000000000..e8a30dbe34759
--- /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 b5277cf6fa2f4..a16d5a6c2c69c 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -45,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";
@@ -54,7 +55,6 @@
 @import "./query-pagination-numbers/editor.scss";
 @import "./post-featured-image/editor.scss";
 @import "./post-comments-form/editor.scss";
-@import "./post-content/editor.scss";
 @import "./editor-elements.scss";
 
 :root .editor-styles-wrapper {
diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json
index a42aafbab4b0b..5bfb63b0fa9e9 100644
--- a/packages/block-library/src/embed/block.json
+++ b/packages/block-library/src/embed/block.json
@@ -9,21 +9,21 @@
 	"attributes": {
 		"url": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"caption": {
 			"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,12 +32,12 @@
 		"responsive": {
 			"type": "boolean",
 			"default": false,
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"previewable": {
 			"type": "boolean",
 			"default": true,
-			"__experimentalRole": "content"
+			"role": "content"
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js
index 12265883d6963..da3dac3e3d62b 100644
--- a/packages/block-library/src/embed/edit.js
+++ b/packages/block-library/src/embed/edit.js
@@ -225,7 +225,7 @@ const EmbedEdit = ( props ) => {
 					} }
 					value={ url }
 					cannotEmbed={ cannotEmbed }
-					onChange={ ( event ) => setURL( event.target.value ) }
+					onChange={ ( value ) => setURL( value ) }
 					fallback={ () => fallback( url, onReplace ) }
 					tryAgain={ () => {
 						invalidateResolution( 'getEmbedPreview', [ url ] );
@@ -276,6 +276,8 @@ const EmbedEdit = ( props ) => {
 					icon={ icon }
 					label={ label }
 					insertBlocksAfter={ insertBlocksAfter }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
 				/>
 			</View>
 		</>
diff --git a/packages/block-library/src/embed/editor.scss b/packages/block-library/src/embed/editor.scss
index 6d1fc5496bc73..eda859eee9040 100644
--- a/packages/block-library/src/embed/editor.scss
+++ b/packages/block-library/src/embed/editor.scss
@@ -12,6 +12,10 @@
 		justify-content: center;
 	}
 
+	.wp-block-embed__placeholder-input {
+		flex: 1 1 auto;
+	}
+
 	// Stops long URLs from breaking out of the no preview available screen
 	.components-placeholder__error {
 		word-break: break-word;
diff --git a/packages/block-library/src/embed/embed-placeholder.js b/packages/block-library/src/embed/embed-placeholder.js
index 7b4cd5f8db9aa..1626aca5c9c9c 100644
--- a/packages/block-library/src/embed/embed-placeholder.js
+++ b/packages/block-library/src/embed/embed-placeholder.js
@@ -8,6 +8,7 @@ import {
 	ExternalLink,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	__experimentalInputControl as InputControl,
 } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
 
@@ -31,15 +32,17 @@ const EmbedPlaceholder = ( {
 			) }
 		>
 			<form onSubmit={ onSubmit }>
-				<input
+				<InputControl
+					__next40pxDefaultSize
 					type="url"
 					value={ value || '' }
-					className="components-placeholder__input"
-					aria-label={ label }
+					className="wp-block-embed__placeholder-input"
+					label={ label }
+					hideLabelFromVision
 					placeholder={ __( 'Enter URL to embed here…' ) }
 					onChange={ onChange }
 				/>
-				<Button variant="primary" type="submit">
+				<Button __next40pxDefaultSize variant="primary" type="submit">
 					{ _x( 'Embed', 'button label' ) }
 				</Button>
 			</form>
@@ -62,10 +65,18 @@ const EmbedPlaceholder = ( {
 						spacing={ 3 }
 						justify="flex-start"
 					>
-						<Button variant="secondary" onClick={ tryAgain }>
+						<Button
+							__next40pxDefaultSize
+							variant="secondary"
+							onClick={ tryAgain }
+						>
 							{ _x( 'Try again', 'button label' ) }
 						</Button>{ ' ' }
-						<Button variant="secondary" onClick={ fallback }>
+						<Button
+							__next40pxDefaultSize
+							variant="secondary"
+							onClick={ fallback }
+						>
 							{ _x( 'Convert to link', 'button label' ) }
 						</Button>
 					</HStack>
diff --git a/packages/block-library/src/embed/embed-preview.js b/packages/block-library/src/embed/embed-preview.js
index ba079cc2e1e8b..1a230faf0c3d5 100644
--- a/packages/block-library/src/embed/embed-preview.js
+++ b/packages/block-library/src/embed/embed-preview.js
@@ -13,153 +13,123 @@ import clsx from 'clsx';
  */
 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';
+import { Caption } from '../utils/caption';
 
-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,
+	insertBlocksAfter,
+	attributes,
+	setAttributes,
+} ) {
+	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 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'
-		);
+	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={ clsx( 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."
-								),
-								embedSourceUrl
-							) }
-						</p>
-					</Placeholder>
 				) }
-				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
-					<RichText
-						identifier="caption"
-						tagName="figcaption"
-						className={ __experimentalGetElementClassName(
-							'caption'
-						) }
-						placeholder={ __( 'Add caption' ) }
-						value={ caption }
-						onChange={ onCaptionChange }
-						inlineToolbar
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter(
-								createBlock( getDefaultBlockName() )
-							)
-						}
-					/>
-				) }
-			</figure>
+			</div>
 		);
-	}
-}
+	/* eslint-enable jsx-a11y/no-static-element-interactions */
 
-export default EmbedPreview;
+	return (
+		<figure
+			className={ clsx( 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."
+							),
+							embedSourceUrl
+						) }
+					</p>
+				</Placeholder>
+			) }
+			<Caption
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				isSelected={ isSelected }
+				insertBlocksAfter={ insertBlocksAfter }
+				label={ __( 'Embed caption text' ) }
+				showToolbarButton={ isSelected }
+			/>
+		</figure>
+	);
+}
diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json
index a5dbaae0c1025..2c5e888c2aff6 100644
--- a/packages/block-library/src/file/block.json
+++ b/packages/block-library/src/file/block.json
@@ -13,10 +13,11 @@
 		},
 		"blob": {
 			"type": "string",
-			"__experimentalRole": "local"
+			"role": "local"
 		},
 		"href": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"fileId": {
 			"type": "string",
@@ -27,13 +28,15 @@
 		"fileName": {
 			"type": "rich-text",
 			"source": "rich-text",
-			"selector": "a:not([download])"
+			"selector": "a:not([download])",
+			"role": "content"
 		},
 		"textLinkHref": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a:not([download])",
-			"attribute": "href"
+			"attribute": "href",
+			"role": "content"
 		},
 		"textLinkTarget": {
 			"type": "string",
@@ -48,7 +51,8 @@
 		"downloadButtonText": {
 			"type": "rich-text",
 			"source": "rich-text",
-			"selector": "a[download]"
+			"selector": "a[download]",
+			"role": "content"
 		},
 		"displayPreview": {
 			"type": "boolean"
@@ -74,6 +78,18 @@
 				"link": true
 			}
 		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
+		},
 		"interactivity": true
 	},
 	"editorStyle": "wp-block-file-editor",
diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
index 448b6f5ec73d1..be061d357bffd 100644
--- a/packages/block-library/src/file/edit.js
+++ b/packages/block-library/src/file/edit.js
@@ -109,6 +109,16 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 
 	function onSelectFile( newMedia ) {
 		if ( ! newMedia || ! newMedia.url ) {
+			// Reset attributes.
+			setAttributes( {
+				href: undefined,
+				fileName: undefined,
+				textLinkHref: undefined,
+				id: undefined,
+				fileId: undefined,
+				displayPreview: undefined,
+				previewHeight: undefined,
+			} );
 			setTemporaryURL();
 			return;
 		}
@@ -230,6 +240,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 					accept="*"
 					onSelect={ onSelectFile }
 					onError={ onUploadError }
+					onReset={ () => onSelectFile( undefined ) }
 				/>
 				<ClipboardToolbarButton
 					text={ href }
diff --git a/packages/block-library/src/file/index.php b/packages/block-library/src/file/index.php
index 87910f0e66a0c..8ea668d56d854 100644
--- a/packages/block-library/src/file/index.php
+++ b/packages/block-library/src/file/index.php
@@ -19,18 +19,7 @@
 function render_block_core_file( $attributes, $content ) {
 	// If it's interactive, enqueue the script module and add the directives.
 	if ( ! empty( $attributes['displayPreview'] ) ) {
-		$suffix = wp_scripts_get_suffix();
-		if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-			$module_url = gutenberg_url( '/build/interactivity/file.min.js' );
-		}
-
-		wp_register_script_module(
-			'@wordpress/block-library/file',
-			isset( $module_url ) ? $module_url : includes_url( "blocks/file/view{$suffix}.js" ),
-			array( '@wordpress/interactivity' ),
-			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-		);
-		wp_enqueue_script_module( '@wordpress/block-library/file' );
+		wp_enqueue_script_module( '@wordpress/block-library/file/view' );
 
 		$processor = new WP_HTML_Tag_Processor( $content );
 		$processor->next_tag();
diff --git a/packages/block-library/src/file/inspector.js b/packages/block-library/src/file/inspector.js
index 76ed28d124600..c29f84f60ebac 100644
--- a/packages/block-library/src/file/inspector.js
+++ b/packages/block-library/src/file/inspector.js
@@ -73,6 +73,7 @@ export default function FileBlockInspector( {
 				) }
 				<PanelBody title={ __( 'Settings' ) }>
 					<SelectControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Link to' ) }
 						value={ textLinkHref }
diff --git a/packages/block-library/src/file/transforms.js b/packages/block-library/src/file/transforms.js
index b925e80e59503..c381a62f78386 100644
--- a/packages/block-library/src/file/transforms.js
+++ b/packages/block-library/src/file/transforms.js
@@ -24,12 +24,32 @@ const transforms = {
 					const blobURL = createBlobURL( file );
 
 					// File will be uploaded in componentDidMount()
-					blocks.push(
-						createBlock( 'core/file', {
-							blob: blobURL,
-							fileName: file.name,
-						} )
-					);
+					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/form-input/block.json b/packages/block-library/src/form-input/block.json
index 53aa0be6744cb..386c90ac207ad 100644
--- a/packages/block-library/src/form-input/block.json
+++ b/packages/block-library/src/form-input/block.json
@@ -23,7 +23,7 @@
 			"default": "Label",
 			"selector": ".wp-block-form-input__label-content",
 			"source": "rich-text",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"inlineLabel": {
 			"type": "boolean",
@@ -41,7 +41,7 @@
 			"selector": ".wp-block-form-input__input",
 			"source": "attribute",
 			"attribute": "placeholder",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"value": {
 			"type": "string",
diff --git a/packages/block-library/src/form-input/deprecated.js b/packages/block-library/src/form-input/deprecated.js
index 9cd49d5b0011b..d974cca387a18 100644
--- a/packages/block-library/src/form-input/deprecated.js
+++ b/packages/block-library/src/form-input/deprecated.js
@@ -9,6 +9,7 @@ import removeAccents from 'remove-accents';
  */
 import {
 	RichText,
+	useBlockProps,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 } from '@wordpress/block-editor';
@@ -26,6 +27,118 @@ const getNameFromLabelV1 = ( content ) => {
 	);
 };
 
+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 = {
@@ -42,7 +155,7 @@ const v1 = {
 			default: 'Label',
 			selector: '.wp-block-form-input__label-content',
 			source: 'html',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		inlineLabel: {
 			type: 'boolean',
@@ -60,7 +173,7 @@ const v1 = {
 			selector: '.wp-block-form-input__input',
 			source: 'attribute',
 			attribute: 'placeholder',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		value: {
 			type: 'string',
@@ -137,6 +250,6 @@ const v1 = {
 	},
 };
 
-const deprecated = [ v1 ];
+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
index 855fdbf468462..5f3713e83975f 100644
--- a/packages/block-library/src/form-input/edit.js
+++ b/packages/block-library/src/form-input/edit.js
@@ -31,6 +31,9 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 		ref.current.focus();
 	}
 
+	// Note: radio inputs aren't implemented yet.
+	const isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
+
 	const controls = (
 		<>
 			{ 'hidden' !== type && (
@@ -63,6 +66,8 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 			) }
 			<InspectorControls group="advanced">
 				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					autoComplete="off"
 					label={ __( 'Name' ) }
 					value={ name }
@@ -79,6 +84,18 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 		</>
 	);
 
+	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 (
 			<>
@@ -109,17 +126,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 					'is-label-inline': inlineLabel || 'checkbox' === type,
 				} ) }
 			>
-				<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 ? false : true }
-					placeholder={ __( 'Type the label for this input' ) }
-				/>
+				{ ! isCheckboxOrRadio && content }
 				<TagName
 					type={ 'textarea' === type ? undefined : type }
 					className={ clsx(
@@ -145,6 +152,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 						...colorProps.style,
 					} }
 				/>
+				{ isCheckboxOrRadio && content }
 			</span>
 		</div>
 	);
diff --git a/packages/block-library/src/form-input/save.js b/packages/block-library/src/form-input/save.js
index c408e06923ca9..941c23dc2014d 100644
--- a/packages/block-library/src/form-input/save.js
+++ b/packages/block-library/src/form-input/save.js
@@ -55,6 +55,9 @@ export default function save( { attributes } ) {
 
 	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 } />;
 	}
@@ -67,9 +70,11 @@ export default function save( { attributes } ) {
 					'is-label-inline': inlineLabel,
 				} ) }
 			>
-				<span className="wp-block-form-input__label-content">
-					<RichText.Content value={ label } />
-				</span>
+				{ ! isCheckboxOrRadio && (
+					<span className="wp-block-form-input__label-content">
+						<RichText.Content value={ label } />
+					</span>
+				) }
 				<TagName
 					className={ inputClasses }
 					type={ 'textarea' === type ? undefined : type }
@@ -79,6 +84,11 @@ export default function save( { attributes } ) {
 					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
index d45fc8d7f1f72..7b1ac53cc89c0 100644
--- a/packages/block-library/src/form-input/style.scss
+++ b/packages/block-library/src/form-input/style.scss
@@ -15,15 +15,17 @@
 		}
 	}
 
-	/*
-	Small tweak to left-align the checkbox.
-	Even though `:has` is not currently supported in Firefox, this is a small tweak
-	and does not affect the functionality of the block or the user's experience.
-	There will be a minor inconsistency between browsers. However, it's more important to provide
-	a better experience for 80+% of users, until Firefox catches up and supports `:has`.
-	*/
 	&: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;
 	}
 }
diff --git a/packages/block-library/src/form/edit.js b/packages/block-library/src/form/edit.js
index bea513a3785dc..a7260afabedf3 100644
--- a/packages/block-library/src/form/edit.js
+++ b/packages/block-library/src/form/edit.js
@@ -77,8 +77,8 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<SelectControl
-						// __nextHasNoMarginBottom
-						// size={ '__unstable-large' }
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						label={ __( 'Submissions method' ) }
 						options={ [
 							// TODO: Allow plugins to add their own submission methods.
@@ -108,6 +108,7 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 					{ submissionMethod === 'email' && (
 						<TextControl
 							__nextHasNoMarginBottom
+							__next40pxDefaultSize
 							autoComplete="off"
 							label={ __( 'Email for form submissions' ) }
 							value={ email }
@@ -129,6 +130,7 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 			{ submissionMethod !== 'email' && (
 				<InspectorControls group="advanced">
 					<SelectControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Method' ) }
 						options={ [
@@ -144,6 +146,7 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 						) }
 					/>
 					<TextControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						autoComplete="off"
 						label={ __( 'Form action' ) }
diff --git a/packages/block-library/src/form/index.php b/packages/block-library/src/form/index.php
index 8c63594671ca6..c887d46ad8618 100644
--- a/packages/block-library/src/form/index.php
+++ b/packages/block-library/src/form/index.php
@@ -92,7 +92,7 @@ function block_core_form_send_email() {
 	// Start building the email content.
 	$content = sprintf(
 		/* translators: %s: The request URI. */
-		__( 'Form submission from %1$s', 'gutenberg' ) . '</br>',
+		__( 'Form submission from %1$s' ) . '</br>',
 		'<a href="' . esc_url( get_site_url( null, $params['_wp_http_referer'] ) ) . '">' . get_bloginfo( 'name' ) . '</a>'
 	);
 
@@ -110,7 +110,7 @@ function block_core_form_send_email() {
 	// Send the email.
 	$result = wp_mail(
 		str_replace( 'mailto:', '', $params['formAction'] ),
-		__( 'Form submission', 'gutenberg' ),
+		__( 'Form submission' ),
 		$content
 	);
 
diff --git a/packages/block-library/src/freeform/edit.js b/packages/block-library/src/freeform/edit.js
index 9e432992a3005..b0ba245a6e702 100644
--- a/packages/block-library/src/freeform/edit.js
+++ b/packages/block-library/src/freeform/edit.js
@@ -75,10 +75,10 @@ function ClassicEdit( {
 	onReplace,
 } ) {
 	const { getMultiSelectedBlockClientIds } = useSelect( blockEditorStore );
-	const didMount = useRef( false );
+	const didMountRef = useRef( false );
 
 	useEffect( () => {
-		if ( ! didMount.current ) {
+		if ( ! didMountRef.current ) {
 			return;
 		}
 
@@ -96,7 +96,7 @@ function ClassicEdit( {
 	useEffect( () => {
 		const { baseURL, suffix } = window.wpEditorL10n.tinymce;
 
-		didMount.current = true;
+		didMountRef.current = true;
 
 		window.tinymce.EditorManager.overrideDefaults( {
 			base_url: baseURL,
@@ -230,7 +230,7 @@ function ClassicEdit( {
 				onReadyStateChange
 			);
 			wp.oldEditor.remove( `editor-${ clientId }` );
-			didMount.current = false;
+			didMountRef.current = false;
 		};
 	}, [] );
 
diff --git a/packages/block-library/src/freeform/editor.scss b/packages/block-library/src/freeform/editor.scss
index 7329eb6e5fb06..c2256ecd7a795 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.
diff --git a/packages/block-library/src/freeform/modal.js b/packages/block-library/src/freeform/modal.js
index c1b10a61de808..4ed4ef4d3a07c 100644
--- a/packages/block-library/src/freeform/modal.js
+++ b/packages/block-library/src/freeform/modal.js
@@ -25,6 +25,7 @@ function ModalAuxiliaryActions( { onClick, isModalFullScreen } ) {
 
 	return (
 		<Button
+			size="small"
 			onClick={ onClick }
 			icon={ fullscreen }
 			isPressed={ isModalFullScreen }
@@ -120,12 +121,17 @@ export default function ModalEdit( props ) {
 						expanded={ false }
 					>
 						<FlexItem>
-							<Button variant="tertiary" onClick={ onClose }>
+							<Button
+								__next40pxDefaultSize
+								variant="tertiary"
+								onClick={ onClose }
+							>
 								{ __( 'Cancel' ) }
 							</Button>
 						</FlexItem>
 						<FlexItem>
 							<Button
+								__next40pxDefaultSize
 								variant="primary"
 								onClick={ () => {
 									setAttributes( {
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index e853e20f23319..c73fe1977ce4c 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -6,7 +6,6 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
 import {
 	BaseControl,
 	PanelBody,
@@ -14,7 +13,9 @@ import {
 	ToggleControl,
 	RangeControl,
 	Spinner,
-	withNotices,
+	MenuGroup,
+	MenuItem,
+	ToolbarDropdownMenu,
 } from '@wordpress/components';
 import {
 	store as blockEditorStore,
@@ -28,11 +29,16 @@ import {
 import { Platform, useEffect, useMemo } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { withViewportMatch } from '@wordpress/viewport';
 import { View } from '@wordpress/primitives';
 import { createBlock } from '@wordpress/blocks';
 import { createBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
+import {
+	link as linkIcon,
+	customLink,
+	image as imageIcon,
+	linkOff,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -57,11 +63,23 @@ 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' ) },
 	{
-		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: linkOff,
 		label: _x( 'None', 'Media item link option' ),
+		value: LINK_DESTINATION_NONE,
+		noticeText: __( 'None' ),
 	},
 ];
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
@@ -77,7 +95,7 @@ const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.isNative
 const DEFAULT_BLOCK = { name: 'core/image' };
 const EMPTY_ARRAY = [];
 
-function GalleryEdit( props ) {
+export default function GalleryEdit( props ) {
 	const {
 		setAttributes,
 		attributes,
@@ -359,7 +377,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',
@@ -552,15 +570,17 @@ function GalleryEdit( props ) {
 							size="__unstable-large"
 						/>
 					) }
-					<SelectControl
-						__nextHasNoMarginBottom
-						label={ __( 'Link to' ) }
-						value={ linkTo }
-						onChange={ setLinkTo }
-						options={ linkOptions }
-						hideCancelButton
-						size="__unstable-large"
-					/>
+					{ Platform.isNative ? (
+						<SelectControl
+							__nextHasNoMarginBottom
+							label={ __( 'Link' ) }
+							value={ linkTo }
+							onChange={ setLinkTo }
+							options={ linkOptions }
+							hideCancelButton
+							size="__unstable-large"
+						/>
+					) : null }
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Crop images to fit' ) }
@@ -582,7 +602,10 @@ function GalleryEdit( props ) {
 						/>
 					) }
 					{ Platform.isWeb && ! imageSizeOptions && hasImageIds && (
-						<BaseControl className="gallery-image-sizes">
+						<BaseControl
+							className="gallery-image-sizes"
+							__nextHasNoMarginBottom
+						>
 							<BaseControl.VisualLabel>
 								{ __( 'Resolution' ) }
 							</BaseControl.VisualLabel>
@@ -594,6 +617,45 @@ function GalleryEdit( props ) {
 					) }
 				</PanelBody>
 			</InspectorControls>
+			{ 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"
+										>
+											{ linkItem.label }
+										</MenuItem>
+									);
+								} ) }
+							</MenuGroup>
+						) }
+					</ToolbarDropdownMenu>
+				</BlockControls>
+			) : null }
 			{ Platform.isWeb && (
 				<>
 					{ ! multiGallerySelection && (
@@ -634,7 +696,3 @@ function GalleryEdit( props ) {
 		</>
 	);
 }
-export default compose( [
-	withNotices,
-	withViewportMatch( { isNarrow: '< small' } ),
-] )( GalleryEdit );
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index 9efaf88e5acc7..61121f3dd866d 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -70,7 +70,6 @@
 
 .gallery-image-sizes {
 	.components-base-control__label {
-		display: block;
 		margin-bottom: 4px;
 	}
 
@@ -140,12 +139,12 @@
 	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.native.js b/packages/block-library/src/gallery/gallery.native.js
index 7fc280809db84..a5fa2db4fcf02 100644
--- a/packages/block-library/src/gallery/gallery.native.js
+++ b/packages/block-library/src/gallery/gallery.native.js
@@ -22,6 +22,7 @@ import { useState, useEffect } from '@wordpress/element';
 import { mediaUploadSync } from '@wordpress/react-native-bridge';
 import { WIDE_ALIGNMENTS } from '@wordpress/components';
 import { useResizeObserver } from '@wordpress/compose';
+import { withViewportMatch } from '@wordpress/viewport';
 
 const TILE_SPACING = 8;
 
@@ -120,4 +121,4 @@ export const Gallery = ( props ) => {
 	);
 };
 
-export default Gallery;
+export default withViewportMatch( { isNarrow: '< small' } )( Gallery );
diff --git a/packages/block-library/src/gallery/gap-styles.js b/packages/block-library/src/gallery/gap-styles.js
index 4c2002d4b7ddc..a1ad61f02b995 100644
--- a/packages/block-library/src/gallery/gap-styles.js
+++ b/packages/block-library/src/gallery/gap-styles.js
@@ -3,16 +3,9 @@
  */
 import {
 	__experimentalGetGapCSSValue as getGapCSSValue,
-	privateApis as blockEditorPrivateApis,
+	useStyleOverride,
 } from '@wordpress/block-editor';
 
-/**
- * Internal dependencies
- */
-import { unlock } from '../lock-unlock';
-
-const { useStyleOverride } = unlock( blockEditorPrivateApis );
-
 export default function GapStyles( { blockGap, clientId } ) {
 	// --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.
diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
index afbc308804985..1c4d5549339e1 100644
--- a/packages/block-library/src/gallery/style.scss
+++ b/packages/block-library/src/gallery/style.scss
@@ -43,22 +43,44 @@ figure.wp-block-gallery.has-nested-images {
 			width: auto;
 		}
 
+		// Position caption and scrim at the bottom.
+		&:has(figcaption)::before,
 		figcaption {
-			background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 70%, transparent);
+			position: absolute;
 			bottom: 0;
+			right: 0;
+			left: 0;
+			max-height: 100%;
+		}
+
+		// Create a background blur layer.
+		&:has(figcaption)::before {
+			content: "";
+			height: 100%;
+			max-height: 40%;
+
+			// Blur the background under the gradient scrim.
+			backdrop-filter: blur(3px);
+
+			// Crop the caption so the blur is only on the edge.
+			mask-image: linear-gradient(0deg, $black 20%, transparent 100%);
+		}
+
+		// Place the caption at the bottom.
+		figcaption {
 			color: $white;
+			text-shadow: 0 0 1.5px $black;
 			font-size: $default-font-size;
-			left: 0;
-			margin-bottom: 0;
-			max-height: 60%;
+			margin: 0;
 			overflow: auto;
-			padding: 0 8px 8px;
-			position: absolute;
+			padding: 1em;
 			text-align: center;
-			width: 100%;
 			box-sizing: border-box;
 			@include custom-scrollbars-on-hover(transparent, rgba($white, 0.8));
 
+			// Dark gradient scrim.
+			background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.4) 0%, transparent 100%);
+
 			img {
 				display: inline;
 			}
@@ -85,6 +107,10 @@ figure.wp-block-gallery.has-nested-images {
 				margin: 0;
 				padding: 10px 10px 9px;
 				position: relative;
+				text-shadow: none;
+			}
+			&::before {
+				content: none;
 			}
 		}
 	}
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 b79bd7c3877c7..088a7d2528245 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
@@ -82,7 +82,7 @@ exports[`Gallery block inserts block 1`] = `
 <!-- /wp:gallery -->"
 `;
 
-exports[`Gallery block overrides "Link to" setting of gallery items 1`] = `
+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>
diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js
index fd95053bea62c..f294555e41f2c 100644
--- a/packages/block-library/src/gallery/test/index.native.js
+++ b/packages/block-library/src/gallery/test/index.native.js
@@ -594,9 +594,9 @@ 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"} -->
@@ -612,10 +612,10 @@ 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();
 	} );
diff --git a/packages/block-library/src/gallery/use-image-sizes.js b/packages/block-library/src/gallery/use-image-sizes.js
index c96cd8dbaf578..8dcc3eca61115 100644
--- a/packages/block-library/src/gallery/use-image-sizes.js
+++ b/packages/block-library/src/gallery/use-image-sizes.js
@@ -4,10 +4,10 @@
 import { useMemo } from '@wordpress/element';
 
 /**
- * Calculates the image sizes that are avaible for the current gallery images in order to
+ * 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.
  *
diff --git a/packages/block-library/src/group/deprecated.js b/packages/block-library/src/group/deprecated.js
index fcc2b249d2229..ff7ed7e42d093 100644
--- a/packages/block-library/src/group/deprecated.js
+++ b/packages/block-library/src/group/deprecated.js
@@ -109,15 +109,11 @@ const deprecated = [
 			);
 		},
 		isEligible: ( { layout } ) =>
-			! layout ||
-			layout.inherit ||
-			( layout.contentSize && layout.type !== 'constrained' ),
+			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: {
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index a763bc95e60d7..352a6fbc77819 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -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."
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index a2926c89ae802..739a9cd0cf852 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -39,11 +39,10 @@
 	&::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.
diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js
index 1ccfa4fa89c1a..06ed4aa1001ed 100644
--- a/packages/block-library/src/group/index.js
+++ b/packages/block-library/src/group/index.js
@@ -22,56 +22,53 @@ export { metadata, name };
 export const settings = {
 	icon,
 	example: {
-		innerBlocks: [
-			{
-				name: 'core/paragraph',
-				attributes: {
-					customTextColor: '#cf2e2e',
-					fontSize: 'large',
-					content: __( 'One.' ),
-				},
+		attributes: {
+			layout: {
+				type: 'constrained',
+				justifyContent: 'center',
 			},
-			{
-				name: 'core/paragraph',
-				attributes: {
-					customTextColor: '#ff6900',
-					fontSize: 'large',
-					content: __( 'Two.' ),
+			style: {
+				spacing: {
+					padding: {
+						top: '4em',
+						right: '3em',
+						bottom: '4em',
+						left: '3em',
+					},
 				},
 			},
+		},
+		innerBlocks: [
 			{
-				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/variations.js b/packages/block-library/src/group/variations.js
index 8589b7f73fed4..5ded2c724bfa9 100644
--- a/packages/block-library/src/group/variations.js
+++ b/packages/block-library/src/group/variations.js
@@ -4,6 +4,59 @@
 import { __, _x } from '@wordpress/i18n';
 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 = [
 	{
 		name: 'group',
@@ -30,6 +83,7 @@ const variations = [
 			( ! blockAttributes.layout?.orientation ||
 				blockAttributes.layout?.orientation === 'horizontal' ),
 		icon: row,
+		example,
 	},
 	{
 		name: 'group-stack',
@@ -41,6 +95,7 @@ const variations = [
 			blockAttributes.layout?.type === 'flex' &&
 			blockAttributes.layout?.orientation === 'vertical',
 		icon: stack,
+		example,
 	},
 	{
 		name: 'group-grid',
@@ -51,6 +106,7 @@ const variations = [
 		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 0bbe19b01098e..2276bcbbb5017 100644
--- a/packages/block-library/src/heading/block.json
+++ b/packages/block-library/src/heading/block.json
@@ -15,12 +15,15 @@
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "h1,h2,h3,h4,h5,h6",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"level": {
 			"type": "number",
 			"default": 2
 		},
+		"levelOptions": {
+			"type": "array"
+		},
 		"placeholder": {
 			"type": "string"
 		}
diff --git a/packages/block-library/src/heading/deprecated.js b/packages/block-library/src/heading/deprecated.js
index a97415712bf07..76b175ac44fc4 100644
--- a/packages/block-library/src/heading/deprecated.js
+++ b/packages/block-library/src/heading/deprecated.js
@@ -259,7 +259,7 @@ const v5 = {
 			source: 'html',
 			selector: 'h1,h2,h3,h4,h5,h6',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		level: {
 			type: 'number',
diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js
index 86ac776b9b16e..ea58a75d51cda 100644
--- a/packages/block-library/src/heading/edit.js
+++ b/packages/block-library/src/heading/edit.js
@@ -32,7 +32,8 @@ 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: clsx( {
@@ -95,6 +96,7 @@ function HeadingEdit( {
 				<BlockControls group="block">
 					<HeadingLevelDropdown
 						value={ level }
+						options={ levelOptions }
 						onChange={ ( newLevel ) =>
 							setAttributes( { level: newLevel } )
 						}
diff --git a/packages/block-library/src/home-link/edit.js b/packages/block-library/src/home-link/edit.js
index ec9ae2864e3d5..fa6b27a3e2128 100644
--- a/packages/block-library/src/home-link/edit.js
+++ b/packages/block-library/src/home-link/edit.js
@@ -19,13 +19,10 @@ 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 );
diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
index 6417879164a22..f441a6e893290 100644
--- a/packages/block-library/src/image/block.json
+++ b/packages/block-library/src/image/block.json
@@ -11,14 +11,14 @@
 	"attributes": {
 		"blob": {
 			"type": "string",
-			"__experimentalRole": "local"
+			"role": "local"
 		},
 		"url": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "img",
 			"attribute": "src",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"alt": {
 			"type": "string",
@@ -26,13 +26,13 @@
 			"selector": "img",
 			"attribute": "alt",
 			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"caption": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "figcaption",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"lightbox": {
 			"type": "object",
@@ -45,14 +45,14 @@
 			"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",
@@ -68,7 +68,7 @@
 		},
 		"id": {
 			"type": "number",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"width": {
 			"type": "string"
diff --git a/packages/block-library/src/image/deprecated.js b/packages/block-library/src/image/deprecated.js
index 135463a377131..6c1db75c5e2aa 100644
--- a/packages/block-library/src/image/deprecated.js
+++ b/packages/block-library/src/image/deprecated.js
@@ -559,7 +559,7 @@ const v6 = {
 			source: 'attribute',
 			selector: 'img',
 			attribute: 'src',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		alt: {
 			type: 'string',
@@ -567,27 +567,27 @@ const v6 = {
 			selector: 'img',
 			attribute: 'alt',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		caption: {
 			type: 'string',
 			source: 'html',
 			selector: 'figcaption',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		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',
@@ -603,7 +603,7 @@ const v6 = {
 		},
 		id: {
 			type: 'number',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		width: {
 			type: 'number',
@@ -762,7 +762,7 @@ const v7 = {
 			source: 'attribute',
 			selector: 'img',
 			attribute: 'src',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		alt: {
 			type: 'string',
@@ -770,27 +770,27 @@ const v7 = {
 			selector: 'img',
 			attribute: 'alt',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		caption: {
 			type: 'string',
 			source: 'html',
 			selector: 'figcaption',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		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',
@@ -806,7 +806,7 @@ const v7 = {
 		},
 		id: {
 			type: 'number',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		width: {
 			type: 'number',
@@ -962,7 +962,7 @@ const v8 = {
 			source: 'attribute',
 			selector: 'img',
 			attribute: 'src',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		alt: {
 			type: 'string',
@@ -970,27 +970,27 @@ const v8 = {
 			selector: 'img',
 			attribute: 'alt',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		caption: {
 			type: 'string',
 			source: 'html',
 			selector: 'figcaption',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		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',
@@ -1006,7 +1006,7 @@ const v8 = {
 		},
 		id: {
 			type: 'number',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		width: {
 			type: 'string',
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index 9eba4dacb57c3..360c4b8e6127b 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -6,14 +6,14 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { isBlobURL } from '@wordpress/blob';
-import { store as blocksStore } from '@wordpress/blocks';
+import { isBlobURL, createBlobURL } from '@wordpress/blob';
+import { createBlock, getBlockBindingsSource } from '@wordpress/blocks';
 import { Placeholder } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	BlockIcon,
-	MediaPlaceholder,
 	useBlockProps,
+	MediaPlaceholder,
 	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
@@ -23,13 +23,15 @@ import { useEffect, useRef, useState } from '@wordpress/element';
 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 { unlock } from '../lock-unlock';
 import { useUploadMediaFromBlobURL } from '../utils/hooks';
 import Image from './image';
+import { isValidFileType } from './utils';
+import { useMaxWidthObserver } from './use-max-width-observer';
 
 /**
  * Module constants
@@ -107,8 +109,23 @@ export function ImageEdit( {
 		align,
 		metadata,
 	} = attributes;
+
 	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( () => {
 		altRef.current = alt;
@@ -119,7 +136,7 @@ export function ImageEdit( {
 		captionRef.current = caption;
 	}, [ caption ] );
 
-	const { __unstableMarkNextChangeAsNotPersistent } =
+	const { __unstableMarkNextChangeAsNotPersistent, replaceBlock } =
 		useDispatch( blockEditorStore );
 
 	useEffect( () => {
@@ -134,7 +151,12 @@ export function ImageEdit( {
 		}
 	}, [ __unstableMarkNextChangeAsNotPersistent, align, setAttributes ] );
 
-	const { getSettings } = useSelect( blockEditorStore );
+	const {
+		getSettings,
+		getBlockRootClientId,
+		getBlockName,
+		canInsertBlockType,
+	} = useSelect( blockEditorStore );
 	const blockEditingMode = useBlockEditingMode();
 
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -148,7 +170,52 @@ export function ImageEdit( {
 		} );
 	}
 
+	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,
@@ -292,7 +359,10 @@ export function ImageEdit( {
 				Object.keys( borderProps.style ).length > 0 ),
 	} );
 
-	const blockProps = useBlockProps( { className: classes } );
+	const blockProps = useBlockProps( {
+		ref: containerRef,
+		className: classes,
+	} );
 
 	// Much of this description is duplicated from MediaPlaceholder.
 	const { lockUrlControls = false, lockUrlControlsMessage } = useSelect(
@@ -301,9 +371,9 @@ export function ImageEdit( {
 				return {};
 			}
 
-			const blockBindingsSource = unlock(
-				select( blocksStore )
-			).getBlockBindingsSource( metadata?.bindings?.url?.source );
+			const blockBindingsSource = getBlockBindingsSource(
+				metadata?.bindings?.url?.source
+			);
 
 			return {
 				lockUrlControls:
@@ -322,7 +392,7 @@ export function ImageEdit( {
 					: __( 'Connected to dynamic data' ),
 			};
 		},
-		[ isSingleSelected, metadata?.bindings?.url ]
+		[ context, isSingleSelected, metadata?.bindings?.url ]
 	);
 	const placeholder = ( content ) => {
 		return (
@@ -331,13 +401,17 @@ export function ImageEdit( {
 					[ borderProps.className ]:
 						!! borderProps.className && ! isSingleSelected,
 				} ) }
-				withIllustration
-				icon={ lockUrlControls ? pluginsIcon : icon }
-				label={ __( 'Image' ) }
+				icon={
+					! isSmallContainer &&
+					( lockUrlControls ? pluginsIcon : icon )
+				}
+				withIllustration={ ! isSingleSelected || isSmallContainer }
+				label={ ! isSmallContainer && __( 'Image' ) }
 				instructions={
 					! lockUrlControls &&
+					! isSmallContainer &&
 					__(
-						'Upload an image file, pick one from your media library, or add one with a URL.'
+						'Upload or drag an image file here, or pick one from your library.'
 					)
 				}
 				style={ {
@@ -352,47 +426,55 @@ export function ImageEdit( {
 					...shadowProps.style,
 				} }
 			>
-				{ lockUrlControls ? (
-					<span className="block-bindings-media-placeholder-message">
-						{ lockUrlControlsMessage }
-					</span>
-				) : (
-					content
-				) }
+				{ lockUrlControls &&
+					! isSmallContainer &&
+					lockUrlControlsMessage }
+
+				{ ! lockUrlControls && ! isSmallContainer && content }
+				{ placeholderResizeListener }
 			</Placeholder>
 		);
 	};
 
 	return (
-		<figure { ...blockProps }>
-			<Image
-				temporaryURL={ temporaryURL }
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				isSingleSelected={ isSingleSelected }
-				insertBlocksAfter={ insertBlocksAfter }
-				onReplace={ onReplace }
-				onSelectImage={ onSelectImage }
-				onSelectURL={ onSelectURL }
-				onUploadError={ onUploadError }
-				context={ context }
-				clientId={ clientId }
-				blockEditingMode={ blockEditingMode }
-				parentLayoutType={ parentLayout?.type }
-			/>
-			<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 { ...blockProps }>
+				<Image
+					temporaryURL={ temporaryURL }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSingleSelected={ isSingleSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					onReplace={ onReplace }
+					onSelectImage={ onSelectImage }
+					onSelectURL={ onSelectURL }
+					onUploadError={ onUploadError }
+					context={ context }
+					clientId={ clientId }
+					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 }
+				/>
+			</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/editor.scss b/packages/block-library/src/image/editor.scss
index 18344eec9126e..34f65d690d3d7 100644
--- a/packages/block-library/src/image/editor.scss
+++ b/packages/block-library/src/image/editor.scss
@@ -1,47 +1,8 @@
 // Provide special styling for the placeholder.
 // @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 !important;
-
-		// @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;
-		}
-	}
-	.block-bindings-media-placeholder-message {
-		opacity: 0;
-	}
-	&.is-selected .block-bindings-media-placeholder-message {
-		opacity: 1;
-	}
-
-	// 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;
 	}
 }
 
@@ -67,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;
 	}
 }
 
@@ -135,6 +113,11 @@ 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%;
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 5f376ffdac862..89bf31f92664b 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -14,6 +14,7 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUseCustomUnits as useCustomUnits,
+	Placeholder,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -33,7 +34,7 @@ import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
 import { getFilename } from '@wordpress/url';
-import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
+import { getBlockBindingsSource, switchToBlockType } from '@wordpress/blocks';
 import { crop, overlayText, upload } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
@@ -107,6 +108,7 @@ export default function Image( {
 	clientId,
 	blockEditingMode,
 	parentLayoutType,
+	maxContentWidth,
 } ) {
 	const {
 		url = '',
@@ -176,6 +178,7 @@ export default function Image( {
 	] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const [ externalBlob, setExternalBlob ] = useState();
+	const [ hasImageErrored, setHasImageErrored ] = useState( false );
 	const hasNonContentControls = blockEditingMode === 'default';
 	const isContentOnlyMode = blockEditingMode === 'contentOnly';
 	const isResizable =
@@ -245,15 +248,24 @@ 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 );
 	}
@@ -345,7 +357,11 @@ export default function Image( {
 	}, [ isSingleSelected ] );
 
 	const canEditImage = id && naturalWidth && naturalHeight && imageEditing;
-	const allowCrop = isSingleSelected && canEditImage && ! isEditingImage;
+	const allowCrop =
+		isSingleSelected &&
+		canEditImage &&
+		! isEditingImage &&
+		! isContentOnlyMode;
 
 	function switchToCover() {
 		replaceBlocks(
@@ -460,7 +476,6 @@ export default function Image( {
 			if ( ! isSingleSelected ) {
 				return {};
 			}
-			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
 			const {
 				url: urlBinding,
 				alt: altBinding,
@@ -540,6 +555,25 @@ export default function Image( {
 
 	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 = (
 		<>
 			{ showBlockControls && (
@@ -576,19 +610,6 @@ export default function Image( {
 					) }
 				</BlockControls>
 			) }
-			{ isSingleSelected && ! isEditingImage && ! lockUrlControls && (
-				<BlockControls group="other">
-					<MediaReplaceFlow
-						mediaId={ id }
-						mediaURL={ url }
-						allowedTypes={ ALLOWED_MEDIA_TYPES }
-						accept="image/*"
-						onSelect={ onSelectImage }
-						onSelectURL={ onSelectURL }
-						onError={ onUploadError }
-					/>
-				</BlockControls>
-			) }
 			{ isSingleSelected && externalBlob && (
 				<BlockControls>
 					<ToolbarGroup>
@@ -620,7 +641,7 @@ export default function Image( {
 								} }
 							>
 								{ _x(
-									'Alt',
+									'Alternative text',
 									'Alternative text for an image. Block toolbar label, a low character count is preferred.'
 								) }
 							</ToolbarButton>
@@ -660,50 +681,56 @@ export default function Image( {
 							/>
 						) }
 					/>
-					<Dropdown
-						popoverProps={ { position: 'bottom right' } }
-						renderToggle={ ( { isOpen, onToggle } ) => (
-							<ToolbarButton
-								onClick={ onToggle }
-								aria-haspopup="true"
-								aria-expanded={ isOpen }
-								onKeyDown={ ( event ) => {
-									if ( ! isOpen && event.keyCode === DOWN ) {
-										event.preventDefault();
-										onToggle();
-									}
-								} }
-							>
-								{ __( 'Title' ) }
-							</ToolbarButton>
-						) }
-						renderContent={ () => (
-							<TextControl
-								className="wp-block-image__toolbar_content_textarea"
-								__nextHasNoMarginBottom
-								label={ __( 'Title attribute' ) }
-								value={ title || '' }
-								onChange={ onSetTitle }
-								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">
+					{ title && (
+						<Dropdown
+							popoverProps={ { position: 'bottom right' } }
+							renderToggle={ ( { isOpen, onToggle } ) => (
+								<ToolbarButton
+									onClick={ onToggle }
+									aria-haspopup="true"
+									aria-expanded={ isOpen }
+									onKeyDown={ ( event ) => {
+										if (
+											! isOpen &&
+											event.keyCode === DOWN
+										) {
+											event.preventDefault();
+											onToggle();
+										}
+									} }
+								>
+									{ __( 'Title' ) }
+								</ToolbarButton>
+							) }
+							renderContent={ () => (
+								<TextControl
+									__next40pxDefaultSize
+									className="wp-block-image__toolbar_content_textarea"
+									__nextHasNoMarginBottom
+									label={ __( 'Title attribute' ) }
+									value={ title || '' }
+									onChange={ onSetTitle }
+									disabled={ lockTitleControls }
+									help={
+										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>
+											</>
+										)
+									}
+								/>
+							) }
+						/>
+					) }
 				</BlockControls>
 			) }
 			<InspectorControls>
@@ -815,37 +842,46 @@ export default function Image( {
 	const shadowProps = getShadowClassesAndStyles( attributes );
 	const isRounded = attributes.className?.includes( 'is-style-rounded' );
 
-	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={ {
-					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 */
-	);
+	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 = (
@@ -902,6 +938,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;
@@ -947,9 +984,9 @@ export default function Image( {
 				} }
 				showHandle={ isSingleSelected }
 				minWidth={ minWidth }
-				maxWidth={ maxWidthBuffer }
+				maxWidth={ maxResizeWidth }
 				minHeight={ minHeight }
-				maxHeight={ maxWidthBuffer / ratio }
+				maxHeight={ maxResizeWidth / ratio }
 				lockAspectRatio={ ratio }
 				enable={ {
 					top: false,
@@ -960,6 +997,22 @@ export default function Image( {
 				onResizeStart={ onResizeStart }
 				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
@@ -981,12 +1034,18 @@ export default function Image( {
 	}
 
 	if ( ! url && ! temporaryURL ) {
-		// Add all controls if the image attributes are connected.
-		return metadata?.bindings ? controls : sizeControls;
+		return (
+			<>
+				{ mediaReplaceFlow }
+				{ /* Add all controls if the image attributes are connected. */ }
+				{ metadata?.bindings ? controls : sizeControls }
+			</>
+		);
 	}
 
 	return (
 		<>
+			{ mediaReplaceFlow }
 			{ controls }
 			{ img }
 
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index 75f0d404e4820..5d7815a1f2f3f 100644
--- a/packages/block-library/src/image/index.php
+++ b/packages/block-library/src/image/index.php
@@ -70,19 +70,7 @@ function render_block_core_image( $attributes, $content, $block ) {
 		isset( $lightbox_settings['enabled'] ) &&
 		true === $lightbox_settings['enabled']
 	) {
-		$suffix = wp_scripts_get_suffix();
-		if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-			$module_url = gutenberg_url( '/build/interactivity/image.min.js' );
-		}
-
-		wp_register_script_module(
-			'@wordpress/block-library/image',
-			isset( $module_url ) ? $module_url : includes_url( "blocks/image/view{$suffix}.js" ),
-			array( '@wordpress/interactivity' ),
-			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-		);
-
-		wp_enqueue_script_module( '@wordpress/block-library/image' );
+		wp_enqueue_script_module( '@wordpress/block-library/image/view' );
 
 		/*
 		 * This render needs to happen in a filter with priority 15 to ensure that
diff --git a/packages/block-library/src/image/transforms.js b/packages/block-library/src/image/transforms.js
index fda29a2ca2530..347d240828017 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
 				);
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 0000000000000..684392537fac7
--- /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 1ef7973b4e57a..1541c3daac3aa 100644
--- a/packages/block-library/src/image/utils.js
+++ b/packages/block-library/src/image/utils.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { NEW_TAB_REL } from './constants';
+import { NEW_TAB_REL, ALLOWED_MEDIA_TYPES } from './constants';
 
 /**
  * Evaluates a CSS aspect-ratio property value as a number.
@@ -81,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
index 7010e9b7b2219..0bc0dfaacea1a 100644
--- a/packages/block-library/src/image/view.js
+++ b/packages/block-library/src/image/view.js
@@ -188,7 +188,7 @@ const { state, actions, callbacks } = store(
 		},
 		callbacks: {
 			setOverlayStyles() {
-				if ( ! state.currentImage.imageRef ) {
+				if ( ! state.overlayEnabled ) {
 					return;
 				}
 
diff --git a/packages/block-library/src/latest-comments/block.json b/packages/block-library/src/latest-comments/block.json
index aee42f1d15b48..543512ddf3ce7 100644
--- a/packages/block-library/src/latest-comments/block.json
+++ b/packages/block-library/src/latest-comments/block.json
@@ -29,6 +29,15 @@
 	},
 	"supports": {
 		"align": true,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
 		"html": false,
 		"spacing": {
 			"margin": true,
diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
index ce8f75c671c83..ab792ae0e353d 100644
--- a/packages/block-library/src/latest-posts/edit.js
+++ b/packages/block-library/src/latest-posts/edit.js
@@ -7,7 +7,6 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
-	BaseControl,
 	PanelBody,
 	Placeholder,
 	QueryControls,
@@ -16,19 +15,28 @@ import {
 	Spinner,
 	ToggleControl,
 	ToolbarGroup,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { dateI18n, format, getSettings } from '@wordpress/date';
 import {
 	InspectorControls,
-	BlockAlignmentToolbar,
 	BlockControls,
 	__experimentalImageSizeControl as ImageSizeControl,
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { pin, list, grid } from '@wordpress/icons';
+import {
+	pin,
+	list,
+	grid,
+	alignNone,
+	positionLeft,
+	positionCenter,
+	positionRight,
+} from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticeStore } from '@wordpress/notices';
 import { useInstanceId } from '@wordpress/compose';
@@ -197,11 +205,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' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Post content' ) }
 					checked={ displayPostContent }
 					onChange={ ( value ) =>
@@ -210,7 +242,8 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				/>
 				{ displayPostContent && (
 					<RadioControl
-						label={ __( 'Show:' ) }
+						className="wp-block-latest-posts__post-content-radio"
+						label={ __( 'Show' ) }
 						selected={ displayPostContentRadio }
 						options={ [
 							{ label: __( 'Excerpt' ), value: 'excerpt' },
@@ -302,21 +335,32 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								} )
 							}
 						/>
-						<BaseControl className="editor-latest-posts-image-alignment-control">
-							<BaseControl.VisualLabel>
-								{ __( 'Image alignment' ) }
-							</BaseControl.VisualLabel>
-							<BlockAlignmentToolbar
-								value={ featuredImageAlign }
-								onChange={ ( value ) =>
-									setAttributes( {
-										featuredImageAlign: value,
-									} )
+						<ToggleGroupControl
+							className="editor-latest-posts-image-alignment-control"
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Image alignment' ) }
+							value={ featuredImageAlign || 'none' }
+							onChange={ ( value ) =>
+								setAttributes( {
+									featuredImageAlign:
+										value !== 'none' ? value : undefined,
+								} )
+							}
+						>
+							{ imageAlignmentOptions.map(
+								( { value, icon, label } ) => {
+									return (
+										<ToggleGroupControlOptionIcon
+											key={ value }
+											value={ value }
+											icon={ icon }
+											label={ label }
+										/>
+									);
 								}
-								controls={ [ 'left', 'center', 'right' ] }
-								isCollapsed={ false }
-							/>
-						</BaseControl>
+							) }
+						</ToggleGroupControl>
 						<ToggleControl
 							__nextHasNoMarginBottom
 							label={ __( 'Add link to featured image' ) }
diff --git a/packages/block-library/src/latest-posts/editor.scss b/packages/block-library/src/latest-posts/editor.scss
index d3f0b5275653e..aaab74cc0ef2d 100644
--- a/packages/block-library/src/latest-posts/editor.scss
+++ b/packages/block-library/src/latest-posts/editor.scss
@@ -9,16 +9,6 @@
 	display: inline;
 }
 
-.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) {
 	padding-left: 2.5em;
 }
@@ -28,3 +18,14 @@
 		padding-left: 0;
 	}
 }
+
+// Apply the same styles that would be applied to
+// ".block-editor-block-inspector .components-base-control"
+// (see packages/block-editor/src/components/block-inspector/style.scss)
+.wp-block-latest-posts__post-content-radio {
+	margin-bottom: #{ $grid-unit-30 };
+
+	&:last-child {
+		margin-bottom: $grid-unit-10;
+	}
+}
diff --git a/packages/block-library/src/list-item/block.json b/packages/block-library/src/list-item/block.json
index 6110df530bf5e..6eb30cfe6d0af 100644
--- a/packages/block-library/src/list-item/block.json
+++ b/packages/block-library/src/list-item/block.json
@@ -6,7 +6,7 @@
 	"category": "text",
 	"parent": [ "core/list" ],
 	"allowedBlocks": [ "core/list" ],
-	"description": "Create a list item.",
+	"description": "An individual item within a list.",
 	"textdomain": "default",
 	"attributes": {
 		"placeholder": {
@@ -16,17 +16,24 @@
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "li",
-			"__experimentalRole": "content"
+			"role": "content"
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"className": false,
 		"splitting": true,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true
+		},
 		"color": {
 			"gradients": true,
 			"link": true,
+			"background": true,
 			"__experimentalDefaultControls": {
-				"background": true,
 				"text": true
 			}
 		},
@@ -56,6 +63,7 @@
 		}
 	},
 	"selectors": {
-		"root": ".wp-block-list > li"
+		"root": ".wp-block-list > li",
+		"border": ".wp-block-list:not(.wp-block-list .wp-block-list) > li"
 	}
 }
diff --git a/packages/block-library/src/list-item/hooks/index.js b/packages/block-library/src/list-item/hooks/index.js
index 1687adbe740d0..6220f92851a32 100644
--- a/packages/block-library/src/list-item/hooks/index.js
+++ b/packages/block-library/src/list-item/hooks/index.js
@@ -2,5 +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';
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 51ede7de45c45..0000000000000
--- 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/block.json b/packages/block-library/src/list/block.json
index 157aaf7c0cf63..4a86def8d687b 100644
--- a/packages/block-library/src/list/block.json
+++ b/packages/block-library/src/list/block.json
@@ -5,14 +5,14 @@
 	"title": "List",
 	"category": "text",
 	"allowedBlocks": [ "core/list-item" ],
-	"description": "Create a bulleted or numbered list.",
+	"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",
@@ -21,7 +21,7 @@
 			"multiline": "li",
 			"__unstableMultilineWrapperTags": [ "ol", "ul" ],
 			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"type": {
 			"type": "string"
@@ -39,6 +39,12 @@
 	"supports": {
 		"anchor": true,
 		"html": false,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -75,6 +81,9 @@
 			"clientNavigation": true
 		}
 	},
+	"selectors": {
+		"border": ".wp-block-list:not(.wp-block-list .wp-block-list)"
+	},
 	"editorStyle": "wp-block-list-editor",
 	"style": "wp-block-list"
 }
diff --git a/packages/block-library/src/list/deprecated.js b/packages/block-library/src/list/deprecated.js
index edb04dff27c90..13804b7040ed4 100644
--- a/packages/block-library/src/list/deprecated.js
+++ b/packages/block-library/src/list/deprecated.js
@@ -14,7 +14,7 @@ const v0 = {
 		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',
@@ -144,7 +144,7 @@ const v2 = {
 		ordered: {
 			type: 'boolean',
 			default: false,
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		values: {
 			type: 'string',
@@ -153,7 +153,7 @@ const v2 = {
 			multiline: 'li',
 			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		type: {
 			type: 'string',
@@ -225,7 +225,7 @@ const v3 = {
 		ordered: {
 			type: 'boolean',
 			default: false,
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		values: {
 			type: 'string',
@@ -234,7 +234,7 @@ const v3 = {
 			multiline: 'li',
 			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		type: {
 			type: 'string',
diff --git a/packages/block-library/src/list/ordered-list-settings.js b/packages/block-library/src/list/ordered-list-settings.js
index 8c433a465638f..6681766980623 100644
--- a/packages/block-library/src/list/ordered-list-settings.js
+++ b/packages/block-library/src/list/ordered-list-settings.js
@@ -13,25 +13,10 @@ import {
 const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => (
 	<InspectorControls>
 		<PanelBody title={ __( 'Settings' ) }>
-			<TextControl
-				__nextHasNoMarginBottom
-				label={ __( 'Start value' ) }
-				type="number"
-				onChange={ ( value ) => {
-					const int = parseInt( value, 10 );
-
-					setAttributes( {
-						// It should be possible to unset the value,
-						// e.g. with an empty string.
-						start: isNaN( int ) ? undefined : int,
-					} );
-				} }
-				value={ Number.isInteger( start ) ? start.toString( 10 ) : '' }
-				step="1"
-			/>
 			<SelectControl
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
-				label={ __( 'Numbering style' ) }
+				label={ __( 'List style' ) }
 				options={ [
 					{
 						label: __( 'Numbers' ),
@@ -57,9 +42,26 @@ const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => (
 				value={ type }
 				onChange={ ( newValue ) => setAttributes( { type: newValue } ) }
 			/>
+			<TextControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				label={ __( 'Start value' ) }
+				type="number"
+				onChange={ ( value ) => {
+					const int = parseInt( value, 10 );
+
+					setAttributes( {
+						// It should be possible to unset the value,
+						// e.g. with an empty string.
+						start: isNaN( int ) ? undefined : int,
+					} );
+				} }
+				value={ Number.isInteger( start ) ? start.toString( 10 ) : '' }
+				step="1"
+			/>
 			<ToggleControl
 				__nextHasNoMarginBottom
-				label={ __( 'Reverse list numbering' ) }
+				label={ __( 'Reverse order' ) }
 				checked={ reversed || false }
 				onChange={ ( value ) => {
 					setAttributes( {
diff --git a/packages/block-library/src/list/test/edit.native.js b/packages/block-library/src/list/test/edit.native.js
index a33bce32e5bca..2393f2820cfc2 100644
--- a/packages/block-library/src/list/test/edit.native.js
+++ b/packages/block-library/src/list/test/edit.native.js
@@ -289,9 +289,7 @@ describe( 'List block', () => {
 			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
-		const reverseButton = screen.getByLabelText(
-			/Reverse list numbering\. Off/
-		);
+		const reverseButton = screen.getByLabelText( /Reverse order\. Off/ );
 		fireEvent.press( reverseButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
diff --git a/packages/block-library/src/loginout/block.json b/packages/block-library/src/loginout/block.json
index 52619b1a3ba8b..f2aaafd60fde0 100644
--- a/packages/block-library/src/loginout/block.json
+++ b/packages/block-library/src/loginout/block.json
@@ -22,6 +22,12 @@
 	},
 	"supports": {
 		"className": true,
+		"color": {
+			"background": true,
+			"text": false,
+			"gradients": true,
+			"link": true
+		},
 		"spacing": {
 			"margin": true,
 			"padding": true,
@@ -43,8 +49,15 @@
 				"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/style.scss b/packages/block-library/src/loginout/style.scss
new file mode 100644
index 0000000000000..f13bb5ded552d
--- /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 42384c0c4478e..0c2cfc4a14995 100644
--- a/packages/block-library/src/media-text/block.json
+++ b/packages/block-library/src/media-text/block.json
@@ -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",
diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js
index 1cd1472f876c0..24f239a41ed29 100644
--- a/packages/block-library/src/media-text/deprecated.js
+++ b/packages/block-library/src/media-text/deprecated.js
@@ -30,7 +30,7 @@ const v1ToV5ImageFillStyles = ( url, focalPoint ) => {
 		: {};
 };
 
-const v6ImageFillStyles = ( url, focalPoint ) => {
+const v6ToV7ImageFillStyles = ( url, focalPoint ) => {
 	return url
 		? {
 				backgroundImage: `url(${ url })`,
@@ -172,29 +172,43 @@ const v6Attributes = {
 		selector: 'figure img',
 		attribute: 'alt',
 		default: '',
-		__experimentalRole: 'content',
+		role: 'content',
 	},
 	mediaId: {
 		type: 'number',
-		__experimentalRole: 'content',
+		role: 'content',
 	},
 	mediaUrl: {
 		type: 'string',
 		source: 'attribute',
 		selector: 'figure video,figure img',
 		attribute: 'src',
-		__experimentalRole: 'content',
+		role: 'content',
 	},
 	href: {
 		type: 'string',
 		source: 'attribute',
 		selector: 'figure a',
 		attribute: 'href',
-		__experimentalRole: 'content',
+		role: 'content',
 	},
 	mediaType: {
 		type: 'string',
-		__experimentalRole: 'content',
+		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,
 	},
 };
 
@@ -237,6 +251,148 @@ const v6Supports = {
 	},
 };
 
+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 = {
@@ -301,7 +457,7 @@ const v6 = {
 			'is-image-fill': imageFill,
 		} );
 		const backgroundStyles = imageFill
-			? v6ImageFillStyles( mediaUrl, focalPoint )
+			? v6ToV7ImageFillStyles( mediaUrl, focalPoint )
 			: {};
 
 		let gridTemplateColumns;
@@ -902,4 +1058,4 @@ const v1 = {
 	},
 };
 
-export default [ v6, 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 5a3b4fab04ab6..a946a499b26f2 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -213,11 +213,11 @@ function MediaTextEdit( {
 		[ 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 );
@@ -243,7 +243,7 @@ function MediaTextEdit( {
 		'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 =
@@ -360,7 +360,6 @@ function MediaTextEdit( {
 					>
 						<FocalPointPicker
 							__nextHasNoMarginBottom
-							__next40pxDefaultSize
 							label={ __( 'Focal point' ) }
 							url={
 								useFeaturedImage && featuredImageURL
@@ -481,7 +480,7 @@ function MediaTextEdit( {
 					onSelectMedia={ onSelectMedia }
 					onWidthChange={ onWidthChange }
 					commitWidthChange={ commitWidthChange }
-					ref={ refMediaContainer }
+					refMedia={ refMedia }
 					enableResize={ blockEditingMode === 'default' }
 					toggleUseFeaturedImage={ toggleUseFeaturedImage }
 					{ ...{
diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
index b417fb951e99d..639ceaed8ea99 100644
--- a/packages/block-library/src/media-text/editor.scss
+++ b/packages/block-library/src/media-text/editor.scss
@@ -27,7 +27,9 @@
 }
 
 .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 .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;
 }
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 0000000000000..c277c49b5c310
--- /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
index 87be164a04bb9..b65137b150ba5 100644
--- a/packages/block-library/src/media-text/index.php
+++ b/packages/block-library/src/media-text/index.php
@@ -29,15 +29,32 @@ function render_block_core_media_text( $attributes, $content ) {
 		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',
 	);
-	$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();
 
 	if ( $has_media_on_right ) {
 		// Loop through all the figure tags and set a bookmark on the last figure tag.
@@ -46,59 +63,52 @@ function render_block_core_media_text( $attributes, $content ) {
 		}
 		if ( $media_tag_processor->has_bookmark( 'last_figure' ) ) {
 			$media_tag_processor->seek( 'last_figure' );
-			if ( $image_fill ) {
-				$media_tag_processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $focal_point . ';' );
-			} else {
-				// Insert a unique ID to identify the figure tag.
-				$media_tag_processor->set_attribute( 'id', $unique_id );
-			}
+			// 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 ) ) {
-			if ( $image_fill ) {
-				$media_tag_processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $focal_point . ';' );
-			} else {
-				// Insert a unique ID to identify the figure tag.
-				$media_tag_processor->set_attribute( 'id', $unique_id );
-			}
+			// Insert a unique ID to identify the figure tag.
+			$media_tag_processor->set_attribute( 'id', $unique_id );
 		}
 	}
 
 	$content = $media_tag_processor->get_updated_html();
 
-	// If the image is not set to fill, add the image tag inside the figure tag,
-	// and update the image attributes in order to display the featured image.
-	if ( ! $image_fill ) {
-		$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
-		);
+	// 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 );
+	$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' => 'figure',
-				'id'       => $unique_id,
+				'tag_name'   => 'img',
+				'class_name' => 'wp-block-media-text__featured_image',
 			)
 		) ) {
-			// 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 ) ) ) );
-
-				$content = $image_tag_processor->get_updated_html();
+			$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();
 		}
 	}
 
diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js
index 2d8556f9ebe32..735aaf73b88aa 100644
--- a/packages/block-library/src/media-text/media-container.js
+++ b/packages/block-library/src/media-text/media-container.js
@@ -22,25 +22,17 @@ import { isBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
 import { media as icon } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { imageFillStyles } from './image-fill';
+
 /**
  * Constants
  */
 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', '<' );
@@ -62,22 +54,18 @@ function ToolbarEditButton( {
 	onSelectMedia,
 	toggleUseFeaturedImage,
 	useFeaturedImage,
-	featuredImageURL,
 } ) {
 	return (
 		<BlockControls group="other">
 			<MediaReplaceFlow
 				mediaId={ mediaId }
-				mediaUrl={
-					useFeaturedImage && featuredImageURL
-						? featuredImageURL
-						: mediaUrl
-				}
+				mediaURL={ mediaUrl }
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				accept="image/*,video/*"
 				onSelect={ onSelectMedia }
 				onToggleFeaturedImage={ toggleUseFeaturedImage }
 				useFeaturedImage={ useFeaturedImage }
+				onReset={ () => onSelectMedia( undefined ) }
 			/>
 		</BlockControls>
 	);
@@ -133,6 +121,7 @@ function MediaContainer( props, ref ) {
 		useFeaturedImage,
 		featuredImageURL,
 		featuredImageAlt,
+		refMedia,
 	} = props;
 
 	const isTemporaryMedia = ! mediaId && isBlobURL( mediaUrl );
@@ -155,7 +144,7 @@ function MediaContainer( props, ref ) {
 			left: enableResize && mediaPosition === 'right',
 		};
 
-		const backgroundStyles =
+		const positionStyles =
 			mediaType === 'image' && imageFill
 				? imageFillStyles( mediaUrl || featuredImageURL, focalPoint )
 				: {};
@@ -163,11 +152,23 @@ function MediaContainer( props, ref ) {
 		const mediaTypeRenderers = {
 			image: () =>
 				useFeaturedImage && featuredImageURL ? (
-					<img src={ featuredImageURL } alt={ featuredImageAlt } />
+					<img
+						ref={ refMedia }
+						src={ featuredImageURL }
+						alt={ featuredImageAlt }
+						style={ positionStyles }
+					/>
 				) : (
-					mediaUrl && <img src={ mediaUrl } alt={ mediaAlt } />
+					mediaUrl && (
+						<img
+							ref={ refMedia }
+							src={ mediaUrl }
+							alt={ mediaAlt }
+							style={ positionStyles }
+						/>
+					)
 				),
-			video: () => <video controls src={ mediaUrl } />,
+			video: () => <video controls ref={ refMedia } src={ mediaUrl } />,
 		};
 
 		return (
@@ -178,7 +179,6 @@ function MediaContainer( props, ref ) {
 					'editor-media-container__resizer',
 					{ 'is-transient': isTemporaryMedia }
 				) }
-				style={ backgroundStyles }
 				size={ { width: mediaWidth + '%' } }
 				minWidth="10%"
 				maxWidth="100%"
@@ -200,7 +200,6 @@ function MediaContainer( props, ref ) {
 					}
 					mediaId={ mediaId }
 					toggleUseFeaturedImage={ toggleUseFeaturedImage }
-					useFeaturedImage={ useFeaturedImage }
 				/>
 				{ ( mediaTypeRenderers[ mediaType ] || noop )() }
 				{ isTemporaryMedia && <Spinner /> }
@@ -208,6 +207,7 @@ function MediaContainer( props, ref ) {
 				{ ! featuredImageURL && useFeaturedImage && (
 					<Placeholder
 						className="wp-block-media-text--placeholder-image"
+						style={ positionStyles }
 						withIllustration
 					/>
 				) }
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 eaee027c06185..3bf4fbf25d8f2 100644
--- a/packages/block-library/src/media-text/media-container.native.js
+++ b/packages/block-library/src/media-text/media-container.native.js
@@ -44,8 +44,6 @@ const ICON_TYPE = {
 	RETRY: 'retry',
 };
 
-export { imageFillStyles } from './media-container.js';
-
 class MediaContainer extends Component {
 	constructor() {
 		super( ...arguments );
diff --git a/packages/block-library/src/media-text/save.js b/packages/block-library/src/media-text/save.js
index 5bf9517adae66..3e660d94e789e 100644
--- a/packages/block-library/src/media-text/save.js
+++ b/packages/block-library/src/media-text/save.js
@@ -11,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;
@@ -42,11 +42,16 @@ export default function save( { attributes } ) {
 		[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
 	} );
 
+	const positionStyles = imageFill
+		? imageFillStyles( mediaUrl, focalPoint )
+		: {};
+
 	let image = mediaUrl ? (
 		<img
 			src={ mediaUrl }
 			alt={ mediaAlt }
 			className={ imageClasses || null }
+			style={ positionStyles }
 		/>
 	) : null;
 
@@ -71,11 +76,8 @@ export default function save( { attributes } ) {
 		'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 ) {
@@ -96,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>
@@ -107,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 07b584059203e..4c0f80a5008a8 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 de020611b36ce..0f7a34f05548c 100644
--- a/packages/block-library/src/media-text/style.scss
+++ b/packages/block-library/src/media-text/style.scss
@@ -80,6 +80,7 @@
 	vertical-align: middle;
 }
 
+/* `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;
@@ -102,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,
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 0000000000000..4862fcbfb0245
--- /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 582ec2be8d5ad..0000000000000
--- 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/missing/edit.js b/packages/block-library/src/missing/edit.js
index f7aef453b5447..e7744839b0888 100644
--- a/packages/block-library/src/missing/edit.js
+++ b/packages/block-library/src/missing/edit.js
@@ -5,7 +5,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { RawHTML } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 import { createBlock } from '@wordpress/blocks';
-import { withDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	Warning,
 	useBlockProps,
@@ -13,7 +13,7 @@ import {
 } from '@wordpress/block-editor';
 import { safeHTML } from '@wordpress/dom';
 
-function MissingBlockWarning( { attributes, convertToHTML, clientId } ) {
+export default function MissingEdit( { attributes, clientId } ) {
 	const { originalName, originalUndelimitedContent } = attributes;
 	const hasContent = !! originalUndelimitedContent;
 	const { hasFreeformBlock, hasHTMLBlock } = useSelect(
@@ -34,12 +34,27 @@ function MissingBlockWarning( { attributes, convertToHTML, clientId } ) {
 		},
 		[ clientId ]
 	);
+	const { replaceBlock } = useDispatch( blockEditorStore );
+
+	function convertToHTML() {
+		replaceBlock(
+			clientId,
+			createBlock( 'core/html', {
+				content: originalUndelimitedContent,
+			} )
+		);
+	}
 
 	const actions = [];
 	let messageHTML;
 
 	const convertToHtmlButton = (
-		<Button key="convert" onClick={ convertToHTML } variant="primary">
+		<Button
+			__next40pxDefaultSize
+			key="convert"
+			onClick={ convertToHTML }
+			variant="primary"
+		>
 			{ __( 'Keep as HTML' ) }
 		</Button>
 	);
@@ -59,7 +74,7 @@ function MissingBlockWarning( { attributes, convertToHTML, clientId } ) {
 		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
 		);
@@ -68,7 +83,7 @@ function MissingBlockWarning( { attributes, convertToHTML, clientId } ) {
 		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
 		);
@@ -81,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/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
index 6d1dc32e5310b..84cd6f6d4ee36 100644
--- a/packages/block-library/src/navigation-link/editor.scss
+++ b/packages/block-library/src/navigation-link/editor.scss
@@ -87,9 +87,6 @@
 		$stop2: 64%;
 
 		--wp-underline-color: var(--wp-admin-theme-color);
-		.is-dark-theme & {
-			--wp-underline-color: #{ $dark-theme-focus };
-		}
 
 		background-image:
 			linear-gradient(45deg, transparent ($stop1 - $blur), var(--wp-underline-color) $stop1, var(--wp-underline-color) ($stop1 + $width), transparent ($stop1 + $width + $blur)),
diff --git a/packages/block-library/src/navigation-link/link-ui.js b/packages/block-library/src/navigation-link/link-ui.js
index 6619c46253546..ee238c71ed28e 100644
--- a/packages/block-library/src/navigation-link/link-ui.js
+++ b/packages/block-library/src/navigation-link/link-ui.js
@@ -8,7 +8,7 @@ import {
 	VisuallyHidden,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import {
 	__experimentalLinkControl as LinkControl,
 	store as blockEditorStore,
@@ -28,7 +28,7 @@ import {
 } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { chevronLeftSmall, plus } from '@wordpress/icons';
+import { chevronLeftSmall, chevronRightSmall, plus } from '@wordpress/icons';
 import { useInstanceId, useFocusOnMount } from '@wordpress/compose';
 
 /**
@@ -123,7 +123,7 @@ function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
 
 			<Button
 				className="link-ui-block-inserter__back"
-				icon={ chevronLeftSmall }
+				icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
 				onClick={ ( e ) => {
 					e.preventDefault();
 					onBack();
@@ -147,15 +147,18 @@ function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
 }
 
 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 pagesPermissions = useResourcePermissions( 'pages' );
-	const postsPermissions = useResourcePermissions( 'posts' );
+	const permissions = useResourcePermissions( {
+		kind: 'postType',
+		name: postType,
+	} );
 
 	async function handleCreate( pageTitle ) {
-		const postType = props.link.type || 'page';
-
 		const page = await saveEntityRecord( 'postType', postType, {
 			title: pageTitle,
 			status: 'draft',
@@ -180,15 +183,6 @@ function UnforwardedLinkUI( props, ref ) {
 		};
 	}
 
-	const { label, url, opensInNewTab, type, kind } = props.link;
-
-	let userCanCreate = false;
-	if ( ! type || type === 'page' ) {
-		userCanCreate = pagesPermissions.canCreate;
-	} else if ( type === 'post' ) {
-		userCanCreate = postsPermissions.canCreate;
-	}
-
 	// 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(
@@ -241,7 +235,7 @@ function UnforwardedLinkUI( props, ref ) {
 						hasRichPreviews
 						value={ link }
 						showInitialSuggestions
-						withCreateSuggestion={ userCanCreate }
+						withCreateSuggestion={ permissions.canCreate }
 						createSuggestion={ handleCreate }
 						createSuggestionButtonText={ ( searchTerm ) => {
 							let format;
@@ -316,6 +310,7 @@ const LinkUITools = ( { setAddingBlock, focusAddBlockButton } ) => {
 	return (
 		<VStack className="link-ui-tools">
 			<Button
+				__next40pxDefaultSize
 				ref={ addBlockButtonRef }
 				icon={ plus }
 				onClick={ ( e ) => {
diff --git a/packages/block-library/src/navigation-submenu/block.json b/packages/block-library/src/navigation-submenu/block.json
index 0bcf8a1a47f38..e767b60aec3a6 100644
--- a/packages/block-library/src/navigation-submenu/block.json
+++ b/packages/block-library/src/navigation-submenu/block.json
@@ -59,6 +59,19 @@
 	"supports": {
 		"reusable": 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
 		}
diff --git a/packages/block-library/src/navigation/edit/deleted-navigation-warning.js b/packages/block-library/src/navigation/edit/deleted-navigation-warning.js
index 915e19694085d..22d1e339c5c00 100644
--- a/packages/block-library/src/navigation/edit/deleted-navigation-warning.js
+++ b/packages/block-library/src/navigation/edit/deleted-navigation-warning.js
@@ -2,22 +2,32 @@
  * WordPress dependencies
  */
 import { Warning } from '@wordpress/block-editor';
-import { Button } from '@wordpress/components';
+import { Button, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
 
-function DeletedNavigationWarning( { onCreateNew } ) {
-	return (
-		<Warning>
-			{ createInterpolateElement(
-				__(
-					'Navigation Menu has been deleted or is unavailable. <button>Create a new Menu?</button>'
-				),
-				{
-					button: <Button onClick={ onCreateNew } variant="link" />,
-				}
-			) }
-		</Warning>
+function DeletedNavigationWarning( { onCreateNew, isNotice = false } ) {
+	const message = createInterpolateElement(
+		__(
+			'Navigation Menu has been deleted or is unavailable. <button>Create a new Menu?</button>'
+		),
+		{
+			button: (
+				<Button
+					__next40pxDefaultSize
+					onClick={ onCreateNew }
+					variant="link"
+				/>
+			),
+		}
+	);
+
+	return isNotice ? (
+		<Notice status="warning" isDismissible={ false }>
+			{ message }
+		</Notice>
+	) : (
+		<Warning>{ message }</Warning>
 	);
 }
 
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 5477dc1aeebf3..ae7dd60bd0c5b 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -591,6 +591,7 @@ function Navigation( {
 						{ isResponsive && (
 							<>
 								<Button
+									__next40pxDefaultSize
 									className={ overlayMenuPreviewClasses }
 									onClick={ () => {
 										setOverlayMenuPreview(
@@ -626,10 +627,11 @@ function Navigation( {
 								</div>
 							</>
 						) }
-						<h3>{ __( 'Overlay Menu' ) }</h3>
 						<ToggleGroupControl
+							__next40pxDefaultSize
 							__nextHasNoMarginBottom
-							label={ __( 'Configure overlay menu' ) }
+							label={ __( 'Overlay Menu' ) }
+							aria-label={ __( 'Configure overlay menu' ) }
 							value={ overlayMenu }
 							help={ __(
 								'Collapses the navigation options in a menu icon opening an overlay.'
@@ -638,7 +640,6 @@ function Navigation( {
 								setAttributes( { overlayMenu: value } )
 							}
 							isBlock
-							hideLabelFromVision
 						>
 							<ToggleGroupControlOption
 								value="never"
@@ -721,7 +722,7 @@ function Navigation( {
 	);
 
 	const accessibleDescriptionId = `${ clientId }-desc`;
-
+	const isHiddenByDefault = 'always' === overlayMenu;
 	const isManageMenusButtonDisabled =
 		! hasManagePermissions || ! hasResolvedNavigationMenus;
 
@@ -760,7 +761,7 @@ function Navigation( {
 					hasIcon={ hasIcon }
 					icon={ icon }
 					isResponsive={ isResponsive }
-					isHiddenByDefault={ 'always' === overlayMenu }
+					isHiddenByDefault={ isHiddenByDefault }
 					overlayBackgroundColor={ overlayBackgroundColor }
 					overlayTextColor={ overlayTextColor }
 				>
@@ -899,13 +900,13 @@ function Navigation( {
 							: undefined
 					}
 				>
-					{ isLoading && (
+					{ isLoading && ! isHiddenByDefault && (
 						<div className="wp-block-navigation__loading-indicator-container">
 							<Spinner className="wp-block-navigation__loading-indicator" />
 						</div>
 					) }
 
-					{ ! isLoading && (
+					{ ( ! isLoading || isHiddenByDefault ) && (
 						<>
 							<AccessibleMenuDescription
 								id={ accessibleDescriptionId }
@@ -917,7 +918,7 @@ function Navigation( {
 								icon={ icon }
 								isOpen={ isResponsiveMenuOpen }
 								isResponsive={ isResponsive }
-								isHiddenByDefault={ 'always' === overlayMenu }
+								isHiddenByDefault={ isHiddenByDefault }
 								overlayBackgroundColor={
 									overlayBackgroundColor
 								}
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 e21655eef9071..8f6c2e47fe775 100644
--- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js
+++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
@@ -94,7 +94,9 @@ const MainContent = ( {
 	const { navigationMenu } = useNavigationMenu( currentMenuId );
 
 	if ( currentMenuId && isNavigationMenuMissing ) {
-		return <DeletedNavigationWarning onCreateNew={ onCreateNew } />;
+		return (
+			<DeletedNavigationWarning onCreateNew={ onCreateNew } isNotice />
+		);
 	}
 
 	if ( isLoading ) {
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 dcef345581a76..e95e07ab778c2 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
@@ -19,6 +19,7 @@ export default function NavigationMenuDeleteControl( { onDelete } ) {
 	return (
 		<>
 			<Button
+				__next40pxDefaultSize
 				className="wp-block-navigation-delete-menu-button"
 				variant="secondary"
 				isDestructive
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 fe1075f004407..db895b0b644aa 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,7 @@ export default function NavigationMenuNameControl() {
 
 	return (
 		<TextControl
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label={ __( 'Menu name' ) }
 			value={ title }
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 8ea07351821c8..cdd4d6e3263c9 100644
--- a/packages/block-library/src/navigation/edit/overlay-menu-preview.js
+++ b/packages/block-library/src/navigation/edit/overlay-menu-preview.js
@@ -27,7 +27,9 @@ export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
 			/>
 
 			<ToggleGroupControl
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
+				className="wp-block-navigation__overlay-menu-icon-toggle-group"
 				label={ __( 'Icon' ) }
 				value={ icon }
 				onChange={ ( value ) => setAttributes( { icon: value } ) }
diff --git a/packages/block-library/src/navigation/edit/placeholder/index.js b/packages/block-library/src/navigation/edit/placeholder/index.js
index 0d7c1a7c863b5..7b989de1490af 100644
--- a/packages/block-library/src/navigation/edit/placeholder/index.js
+++ b/packages/block-library/src/navigation/edit/placeholder/index.js
@@ -76,6 +76,7 @@ export default function NavigationPlaceholder( {
 
 						{ 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 0c6fa0e3b9128..886e808965ce4 100644
--- a/packages/block-library/src/navigation/edit/responsive-wrapper.js
+++ b/packages/block-library/src/navigation/edit/responsive-wrapper.js
@@ -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/unsaved-inner-blocks.js b/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js
index e5afbc66dd8b5..6cdcaa46f2bac 100644
--- a/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js
+++ b/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js
@@ -20,13 +20,13 @@ export default function UnsavedInnerBlocks( {
 	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 ] );
 
@@ -38,7 +38,7 @@ export default function UnsavedInnerBlocks( {
 	// entity records. As a result we need to perform a deep equality check skipping
 	// the page list's inner blocks.
 	const innerBlocksAreDirty = areBlocksDirty(
-		originalBlocks?.current,
+		originalBlocksRef?.current,
 		blocks
 	);
 
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index c62cbe9614c91..1d37186e4ae98 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;
@@ -100,7 +104,6 @@
 		background: $gray-900;
 		padding: 0;
 		width: $button-size-small;
-		border-radius: $radius-block-ui;
 		margin-right: 0;
 		margin-left: auto;
 	}
@@ -287,7 +290,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;
@@ -323,7 +325,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;
@@ -479,7 +481,7 @@ $color-control-label-height: 20px;
 	}
 }
 
-// The iframe makes these rules a lot simpler.
+// `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;
@@ -561,7 +563,11 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 	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 {
@@ -629,3 +635,8 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 .wp-block-navigation__menu-inspector-controls__empty-message {
 	margin-left: 24px;
 }
+
+.wp-block-navigation__overlay-menu-icon-toggle-group {
+	// Counteract the margin added by the block inspector.
+	margin-bottom: $grid-unit-20;
+}
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index a73aa682f596c..fa9bb5a56f801 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -241,13 +241,11 @@ private static function get_inner_blocks_from_navigation_post( $attributes ) {
 			// it encounters whitespace. This code strips it.
 			$blocks = block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
 
-			if ( function_exists( 'set_ignored_hooked_blocks_metadata' ) ) {
-				// 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];
+			// 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;
-			}
+			$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.
@@ -624,18 +622,7 @@ private static function get_nav_element_directives( $is_interactive ) {
 	 */
 	private static function handle_view_script_module_loading( $attributes, $block, $inner_blocks ) {
 		if ( static::is_interactive( $attributes, $inner_blocks ) ) {
-			$suffix = wp_scripts_get_suffix();
-			if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-				$module_url = gutenberg_url( '/build/interactivity/navigation.min.js' );
-			}
-
-			wp_register_script_module(
-				'@wordpress/block-library/navigation',
-				isset( $module_url ) ? $module_url : includes_url( "blocks/navigation/view{$suffix}.js" ),
-				array( '@wordpress/interactivity' ),
-				defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-			);
-			wp_enqueue_script_module( '@wordpress/block-library/navigation' );
+			wp_enqueue_script_module( '@wordpress/block-library/navigation/view' );
 		}
 	}
 
@@ -1083,15 +1070,13 @@ function block_core_navigation_get_fallback_blocks() {
 		// In this case default to the (Page List) fallback.
 		$fallback_blocks = ! empty( $maybe_fallback ) ? $maybe_fallback : $fallback_blocks;
 
-		if ( function_exists( 'set_ignored_hooked_blocks_metadata' ) ) {
-			// 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 );
+		// 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'];
-			}
+		if ( isset( $blocks[0]['innerBlocks'] ) ) {
+			$fallback_blocks = $blocks[0]['innerBlocks'];
 		}
 	}
 
@@ -1514,9 +1499,15 @@ function block_core_navigation_mock_parsed_block( $inner_blocks, $post ) {
  */
 function block_core_navigation_insert_hooked_blocks( $inner_blocks, $post ) {
 	$mock_navigation_block = block_core_navigation_mock_parsed_block( $inner_blocks, $post );
-	$hooked_blocks         = get_hooked_blocks();
-	$before_block_visitor  = null;
-	$after_block_visitor   = null;
+
+	if ( function_exists( 'apply_block_hooks_to_content' ) ) {
+		$mock_navigation_block_markup = serialize_block( $mock_navigation_block );
+		return apply_block_hooks_to_content( $mock_navigation_block_markup, $post, 'insert_hooked_blocks' );
+	}
+
+	$hooked_blocks        = get_hooked_blocks();
+	$before_block_visitor = null;
+	$after_block_visitor  = null;
 
 	if ( ! empty( $hooked_blocks ) || has_filter( 'hooked_block_types' ) ) {
 		$before_block_visitor = make_before_block_visitor( $hooked_blocks, $post, 'insert_hooked_blocks' );
@@ -1621,26 +1612,15 @@ function block_core_navigation_update_ignore_hooked_blocks_meta( $post ) {
 /*
  * Do not add the `block_core_navigation_update_ignore_hooked_blocks_meta` filter in the following cases:
  * - If Core has added the `update_ignored_hooked_blocks_postmeta` filter already (WP >= 6.6);
- * - or if the `set_ignored_hooked_blocks_metadata` function is unavailable (which is required for the filter to work. It was introduced by WP 6.5 but is not present in Gutenberg's WP 6.5 compatibility layer);
  * - or if the `$rest_insert_wp_navigation_core_callback` filter has already been added.
  */
 if (
 	! has_filter( 'rest_pre_insert_wp_navigation', 'update_ignored_hooked_blocks_postmeta' ) &&
-	function_exists( 'set_ignored_hooked_blocks_metadata' ) &&
 	! has_filter( 'rest_pre_insert_wp_navigation', $rest_insert_wp_navigation_core_callback )
 ) {
 	add_filter( 'rest_pre_insert_wp_navigation', 'block_core_navigation_update_ignore_hooked_blocks_meta' );
 }
 
-/*
- * Previous versions of Gutenberg were attaching the block_core_navigation_update_ignore_hooked_blocks_meta
- * function to the `rest_insert_wp_navigation` _action_ (rather than the `rest_pre_insert_wp_navigation` _filter_).
- * To avoid collisions, we need to remove the filter from that action if it's present.
- */
-if ( has_filter( 'rest_insert_wp_navigation', $rest_insert_wp_navigation_core_callback ) ) {
-	remove_filter( 'rest_insert_wp_navigation', $rest_insert_wp_navigation_core_callback );
-}
-
 /**
  * Hooks into the REST API response for the core/navigation block and adds the first and last inner blocks.
  *
@@ -1678,12 +1658,10 @@ function block_core_navigation_insert_hooked_blocks_into_rest_response( $respons
 /*
  * Do not add the `block_core_navigation_insert_hooked_blocks_into_rest_response` filter in the following cases:
  * - If Core has added the `insert_hooked_blocks_into_rest_response` filter already (WP >= 6.6);
- * - or if the `set_ignored_hooked_blocks_metadata` function is unavailable (which is required for the filter to work. It was introduced by WP 6.5 but is not present in Gutenberg's WP 6.5 compatibility layer);
  * - or if the `$rest_prepare_wp_navigation_core_callback` filter has already been added.
  */
 if (
 	! has_filter( 'rest_prepare_wp_navigation', 'insert_hooked_blocks_into_rest_response' ) &&
-	function_exists( 'set_ignored_hooked_blocks_metadata' ) &&
 	! has_filter( 'rest_prepare_wp_navigation', $rest_prepare_wp_navigation_core_callback )
 ) {
 	add_filter( 'rest_prepare_wp_navigation', 'block_core_navigation_insert_hooked_blocks_into_rest_response', 10, 3 );
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 eb7e90aff22d1..7eaf648fab936 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();
@@ -63,37 +69,70 @@ function resolveRecords( registry, menus ) {
 
 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', () => {
diff --git a/packages/block-library/src/navigation/use-navigation-menu.js b/packages/block-library/src/navigation/use-navigation-menu.js
index 3834661ed6101..5fd942c485bf8 100644
--- a/packages/block-library/src/navigation/use-navigation-menu.js
+++ b/packages/block-library/src/navigation/use-navigation-menu.js
@@ -14,7 +14,11 @@ import { useSelect } from '@wordpress/data';
 import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants';
 
 export default function useNavigationMenu( ref ) {
-	const permissions = useResourcePermissions( 'navigation', ref );
+	const permissions = useResourcePermissions( {
+		kind: 'postType',
+		name: 'wp_navigation',
+		id: ref,
+	} );
 
 	const {
 		navigationMenu,
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 209987b194238..f2ab425a1ef10 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
@@ -31,10 +31,15 @@ export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
 				{ 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"
 					accessibleWhenDisabled
 					disabled={ disabled }
diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
index 2b7f31c3c7c5e..31e400b867671 100644
--- a/packages/block-library/src/page-list/edit.js
+++ b/packages/block-library/src/page-list/edit.js
@@ -225,7 +225,11 @@ export default function PageListEdit( {
 						page.title?.rendered?.trim() !== ''
 							? page.title?.rendered
 							: __( '(no title)' ),
-					title: page.title?.rendered,
+					title:
+						// translators: displayed when a page has an empty title.
+						page.title?.rendered?.trim() !== ''
+							? page.title?.rendered
+							: __( '(no title)' ),
 					link: page.url,
 					hasChildren,
 				};
@@ -338,6 +342,7 @@ export default function PageListEdit( {
 					<PanelBody title={ __( 'Edit this menu' ) }>
 						<p>{ convertDescription }</p>
 						<Button
+							__next40pxDefaultSize
 							variant="primary"
 							accessibleWhenDisabled
 							disabled={ ! hasResolvedPages }
diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php
index 4ff57e1a36a23..a574633d4ddf4 100644
--- a/packages/block-library/src/page-list/index.php
+++ b/packages/block-library/src/page-list/index.php
@@ -192,7 +192,9 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 			$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' ),
diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json
index f16a7cf041144..7e004019cbf28 100644
--- a/packages/block-library/src/paragraph/block.json
+++ b/packages/block-library/src/paragraph/block.json
@@ -15,7 +15,7 @@
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "p",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"dropCap": {
 			"type": "boolean",
diff --git a/packages/block-library/src/post-author-biography/block.json b/packages/block-library/src/post-author-biography/block.json
index c3845c77d6dbe..c6e27bc484dfd 100644
--- a/packages/block-library/src/post-author-biography/block.json
+++ b/packages/block-library/src/post-author-biography/block.json
@@ -43,6 +43,19 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
-	}
+	},
+	"style": "wp-block-post-author-biography"
 }
diff --git a/packages/block-library/src/post-author-biography/style.scss b/packages/block-library/src/post-author-biography/style.scss
new file mode 100644
index 0000000000000..9a69fac9ba95b
--- /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 31874ddbf9bc5..68d2c49bd9105 100644
--- a/packages/block-library/src/post-author-name/block.json
+++ b/packages/block-library/src/post-author-name/block.json
@@ -53,6 +53,19 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
-	}
+	},
+	"style": "wp-block-post-author-name"
 }
diff --git a/packages/block-library/src/post-author-name/style.scss b/packages/block-library/src/post-author-name/style.scss
new file mode 100644
index 0000000000000..0f57b30490fa6
--- /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 c8ac0af71d34d..7626774798ab0 100644
--- a/packages/block-library/src/post-author/block.json
+++ b/packages/block-library/src/post-author/block.json
@@ -65,7 +65,20 @@
 		},
 		"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",
 	"style": "wp-block-post-author"
 }
diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js
index 01eae7b575470..ea12f1e8d0fc2 100644
--- a/packages/block-library/src/post-author/edit.js
+++ b/packages/block-library/src/post-author/edit.js
@@ -119,72 +119,82 @@ function PostAuthorEdit( {
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
-					{ showAuthorControl &&
-						( ( showCombobox && (
-							<ComboboxControl
-								__nextHasNoMarginBottom
-								label={ __( 'Author' ) }
-								options={ authorOptions }
-								value={ authorId }
-								onChange={ handleSelect }
-								allowReset={ false }
-							/>
-						) ) || (
+					<VStack
+						spacing={ 4 }
+						className="wp-block-post-author__inspector-settings"
+					>
+						{ showAuthorControl &&
+							( ( showCombobox && (
+								<ComboboxControl
+									__next40pxDefaultSize
+									__nextHasNoMarginBottom
+									label={ __( 'Author' ) }
+									options={ authorOptions }
+									value={ authorId }
+									onChange={ handleSelect }
+									allowReset={ false }
+								/>
+							) ) || (
+								<SelectControl
+									__next40pxDefaultSize
+									__nextHasNoMarginBottom
+									label={ __( 'Author' ) }
+									value={ authorId }
+									options={ authorOptions }
+									onChange={ handleSelect }
+								/>
+							) ) }
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show avatar' ) }
+							checked={ showAvatar }
+							onChange={ () =>
+								setAttributes( { showAvatar: ! showAvatar } )
+							}
+						/>
+						{ showAvatar && (
 							<SelectControl
+								__next40pxDefaultSize
 								__nextHasNoMarginBottom
-								label={ __( 'Author' ) }
-								value={ authorId }
-								options={ authorOptions }
-								onChange={ handleSelect }
+								label={ __( 'Avatar size' ) }
+								value={ attributes.avatarSize }
+								options={ avatarSizes }
+								onChange={ ( size ) => {
+									setAttributes( {
+										avatarSize: Number( size ),
+									} );
+								} }
 							/>
-						) ) }
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Show avatar' ) }
-						checked={ showAvatar }
-						onChange={ () =>
-							setAttributes( { showAvatar: ! showAvatar } )
-						}
-					/>
-					{ showAvatar && (
-						<SelectControl
+						) }
+						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Avatar size' ) }
-							value={ attributes.avatarSize }
-							options={ avatarSizes }
-							onChange={ ( size ) => {
-								setAttributes( {
-									avatarSize: Number( size ),
-								} );
-							} }
+							label={ __( 'Show bio' ) }
+							checked={ showBio }
+							onChange={ () =>
+								setAttributes( { showBio: ! showBio } )
+							}
 						/>
-					) }
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Show bio' ) }
-						checked={ showBio }
-						onChange={ () =>
-							setAttributes( { showBio: ! showBio } )
-						}
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Link author name to author page' ) }
-						checked={ isLink }
-						onChange={ () => setAttributes( { isLink: ! isLink } ) }
-					/>
-					{ isLink && (
 						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Open in new tab' ) }
-							onChange={ ( value ) =>
-								setAttributes( {
-									linkTarget: value ? '_blank' : '_self',
-								} )
+							label={ __( 'Link author name to author page' ) }
+							checked={ isLink }
+							onChange={ () =>
+								setAttributes( { isLink: ! isLink } )
 							}
-							checked={ linkTarget === '_blank' }
 						/>
-					) }
+						{ isLink && (
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Open in new tab' ) }
+								onChange={ ( value ) =>
+									setAttributes( {
+										linkTarget: value ? '_blank' : '_self',
+									} )
+								}
+								checked={ linkTarget === '_blank' }
+							/>
+						) }
+					</VStack>
 				</PanelBody>
 			</InspectorControls>
 			<InspectorControlsLastItem>
diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss
index 42c269cda97a4..ba9a88a01ea93 100644
--- a/packages/block-library/src/post-author/editor.scss
+++ b/packages/block-library/src/post-author/editor.scss
@@ -4,3 +4,11 @@
 	margin: $grid-unit-20;
 	padding: $grid-unit-20;
 }
+
+.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/style.scss b/packages/block-library/src/post-author/style.scss
index 0b2d63aab44f6..28fd4fad3cf5a 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/edit.js b/packages/block-library/src/post-comment/edit.js
index 54ad72be30d7c..a5193e427fa98 100644
--- a/packages/block-library/src/post-comment/edit.js
+++ b/packages/block-library/src/post-comment/edit.js
@@ -34,6 +34,7 @@ export default function Edit( { attributes: { commentId }, setAttributes } ) {
 					) }
 				>
 					<TextControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						value={ commentId }
 						onChange={ ( val ) =>
@@ -42,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-form/block.json b/packages/block-library/src/post-comments-form/block.json
index ff157beb5ced9..af893ccb67a08 100644
--- a/packages/block-library/src/post-comments-form/block.json
+++ b/packages/block-library/src/post-comments-form/block.json
@@ -37,6 +37,18 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-post-comments-form-editor",
diff --git a/packages/block-library/src/post-comments-form/form.js b/packages/block-library/src/post-comments-form/form.js
index f6ab07ed897d7..20f0ebca61ead 100644
--- a/packages/block-library/src/post-comments-form/form.js
+++ b/packages/block-library/src/post-comments-form/form.js
@@ -84,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/style.scss b/packages/block-library/src/post-comments-form/style.scss
index 7bb7e150e6824..b400849ba83bd 100644
--- a/packages/block-library/src/post-comments-form/style.scss
+++ b/packages/block-library/src/post-comments-form/style.scss
@@ -38,7 +38,7 @@
 	}
 
 	// Styles copied from button block styles.
-	input[type="submit"] {
+	:where(input[type="submit"]) {
 		box-shadow: none;
 		cursor: pointer;
 		display: inline-block;
diff --git a/packages/block-library/src/post-content/block.json b/packages/block-library/src/post-content/block.json
index 5ca3892f567a5..1b9de707cb322 100644
--- a/packages/block-library/src/post-content/block.json
+++ b/packages/block-library/src/post-content/block.json
@@ -54,5 +54,6 @@
 			}
 		}
 	},
+	"style": "wp-block-post-content",
 	"editorStyle": "wp-block-post-content-editor"
 }
diff --git a/packages/block-library/src/post-content/editor.scss b/packages/block-library/src/post-content/editor.scss
deleted file mode 100644
index 626774697aec5..0000000000000
--- a/packages/block-library/src/post-content/editor.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Disable text selection in the post content placeholder.
-.wp-block-post-content.wp-block-post-content {
-	user-select: none;
-}
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 0000000000000..96e27d04679d4
--- /dev/null
+++ b/packages/block-library/src/post-content/style.scss
@@ -0,0 +1,5 @@
+.wp-block-post-content::after {
+	content: "";
+	display: table;
+	clear: both;
+}
diff --git a/packages/block-library/src/post-date/block.json b/packages/block-library/src/post-date/block.json
index a57d45ceed149..470bddae53bdf 100644
--- a/packages/block-library/src/post-date/block.json
+++ b/packages/block-library/src/post-date/block.json
@@ -56,6 +56,18 @@
 		},
 		"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/index.php b/packages/block-library/src/post-date/index.php
index 3e79855aa25b7..79aa81e7f9c11 100644
--- a/packages/block-library/src/post-date/index.php
+++ b/packages/block-library/src/post-date/index.php
@@ -26,10 +26,10 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 		$post_timestamp = get_post_timestamp( $post_ID );
 		if ( $post_timestamp > time() ) {
 			// translators: %s: human-readable time difference.
-			$formatted_date = sprintf( __( '%s from now', 'gutenberg' ), human_time_diff( $post_timestamp ) );
+			$formatted_date = sprintf( __( '%s from now' ), human_time_diff( $post_timestamp ) );
 		} else {
 			// translators: %s: human-readable time difference.
-			$formatted_date = sprintf( __( '%s ago', 'gutenberg' ), human_time_diff( $post_timestamp ) );
+			$formatted_date = sprintf( __( '%s ago' ), human_time_diff( $post_timestamp ) );
 		}
 	} else {
 		$formatted_date = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
@@ -52,7 +52,7 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 		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', 'gutenberg' ), human_time_diff( get_post_timestamp( $post_ID, 'modified' ) ) );
+				$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 );
 			}
diff --git a/packages/block-library/src/post-excerpt/block.json b/packages/block-library/src/post-excerpt/block.json
index 9809d10ab426b..61888ced43e67 100644
--- a/packages/block-library/src/post-excerpt/block.json
+++ b/packages/block-library/src/post-excerpt/block.json
@@ -56,6 +56,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-post-excerpt-editor",
diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js
index 702219e06a969..05aaf543b5919 100644
--- a/packages/block-library/src/post-excerpt/edit.js
+++ b/packages/block-library/src/post-excerpt/edit.js
@@ -231,6 +231,8 @@ export default function PostExcerptEditor( {
 						}
 					/>
 					<RangeControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						label={ __( 'Max number of words' ) }
 						value={ excerptLength }
 						onChange={ ( value ) => {
diff --git a/packages/block-library/src/post-excerpt/style.scss b/packages/block-library/src/post-excerpt/style.scss
index 1562bca962c1c..b44108f67b5dd 100644
--- a/packages/block-library/src/post-excerpt/style.scss
+++ b/packages/block-library/src/post-excerpt/style.scss
@@ -1,5 +1,8 @@
 // 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);
 }
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 c8e8c0005cfef..5a3e40a126bf8 100644
--- a/packages/block-library/src/post-featured-image/dimension-controls.js
+++ b/packages/block-library/src/post-featured-image/dimension-controls.js
@@ -134,6 +134,7 @@ const DimensionControls = ( {
 				panelId={ clientId }
 			>
 				<SelectControl
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ __( 'Aspect ratio' ) }
 					value={ aspectRatio }
@@ -155,6 +156,7 @@ const DimensionControls = ( {
 				panelId={ clientId }
 			>
 				<UnitControl
+					__next40pxDefaultSize
 					label={ __( 'Height' ) }
 					labelPosition="top"
 					value={ height || '' }
@@ -177,6 +179,7 @@ const DimensionControls = ( {
 				panelId={ clientId }
 			>
 				<UnitControl
+					__next40pxDefaultSize
 					label={ __( 'Width' ) }
 					labelPosition="top"
 					value={ width || '' }
@@ -203,6 +206,7 @@ const DimensionControls = ( {
 					panelId={ clientId }
 				>
 					<ToggleGroupControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ scaleLabel }
 						value={ scale }
@@ -232,6 +236,7 @@ const DimensionControls = ( {
 					panelId={ clientId }
 				>
 					<SelectControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Resolution' ) }
 						value={ sizeSlug || DEFAULT_SIZE }
diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index c9f4645e5e865..dff34379e4f3b 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -10,7 +10,6 @@ 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,
@@ -230,6 +229,7 @@ export default function PostFeaturedImageEdit( {
 								checked={ linkTarget === '_blank' }
 							/>
 							<TextControl
+								__next40pxDefaultSize
 								__nextHasNoMarginBottom
 								label={ __( 'Link rel' ) }
 								value={ rel }
@@ -308,6 +308,7 @@ export default function PostFeaturedImageEdit( {
 				mediaLibraryButton={ ( { open } ) => {
 					return (
 						<Button
+							__next40pxDefaultSize
 							icon={ upload }
 							variant="primary"
 							label={ label }
@@ -365,11 +366,8 @@ export default function PostFeaturedImageEdit( {
 						accept="image/*"
 						onSelect={ onSelectImage }
 						onError={ onUploadError }
-					>
-						<MenuItem onClick={ () => setFeaturedImage( 0 ) }>
-							{ __( 'Reset' ) }
-						</MenuItem>
-					</MediaReplaceFlow>
+						onReset={ () => setFeaturedImage( 0 ) }
+					/>
 				</BlockControls>
 			) }
 			<figure { ...blockProps }>
diff --git a/packages/block-library/src/post-featured-image/style.scss b/packages/block-library/src/post-featured-image/style.scss
index e740b8c56e608..70022d82902f8 100644
--- a/packages/block-library/src/post-featured-image/style.scss
+++ b/packages/block-library/src/post-featured-image/style.scss
@@ -5,7 +5,7 @@
 		display: block;
 		height: 100%;
 	}
-	img {
+	:where(img) {
 		max-width: 100%;
 		width: 100%;
 		height: auto;
diff --git a/packages/block-library/src/post-navigation-link/block.json b/packages/block-library/src/post-navigation-link/block.json
index ce733759846fe..5f1b295119822 100644
--- a/packages/block-library/src/post-navigation-link/block.json
+++ b/packages/block-library/src/post-navigation-link/block.json
@@ -34,6 +34,12 @@
 			"default": ""
 		}
 	},
+	"example": {
+		"attributes": {
+			"label": "Next post",
+			"arrow": "arrow"
+		}
+	},
 	"usesContext": [ "postType" ],
 	"supports": {
 		"reusable": false,
diff --git a/packages/block-library/src/post-navigation-link/edit.js b/packages/block-library/src/post-navigation-link/edit.js
index 25cabe442b9c0..e27d094feb79a 100644
--- a/packages/block-library/src/post-navigation-link/edit.js
+++ b/packages/block-library/src/post-navigation-link/edit.js
@@ -49,8 +49,11 @@ 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' );
@@ -120,6 +123,7 @@ export default function PostNavigationLinkEdit( {
 						/>
 					) }
 					<ToggleGroupControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Arrow' ) }
 						value={ arrow }
@@ -157,6 +161,8 @@ export default function PostNavigationLinkEdit( {
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<SelectControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					label={ __( 'Filter by taxonomy' ) }
 					value={ taxonomy }
 					options={ getTaxonomyOptions() }
diff --git a/packages/block-library/src/post-navigation-link/variations.js b/packages/block-library/src/post-navigation-link/variations.js
index 945d6eb550f27..4f52b21338af1 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',
+			},
+		},
 	},
 ];
 
diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js
index 70f960a219743..a9e279ee2c305 100644
--- a/packages/block-library/src/post-template/edit.js
+++ b/packages/block-library/src/post-template/edit.js
@@ -90,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.
@@ -163,6 +164,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`.
@@ -205,6 +210,7 @@ export default function PostTemplateEdit( {
 			templateSlug,
 			taxQuery,
 			parents,
+			format,
 			restQueryArgs,
 			previewPostType,
 		]
diff --git a/packages/block-library/src/post-terms/block.json b/packages/block-library/src/post-terms/block.json
index 957181affb722..165f50109616e 100644
--- a/packages/block-library/src/post-terms/block.json
+++ b/packages/block-library/src/post-terms/block.json
@@ -60,6 +60,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-post-terms"
diff --git a/packages/block-library/src/post-terms/edit.js b/packages/block-library/src/post-terms/edit.js
index b822e457ffcae..13d5b61ad13d6 100644
--- a/packages/block-library/src/post-terms/edit.js
+++ b/packages/block-library/src/post-terms/edit.js
@@ -83,6 +83,7 @@ export default function PostTermsEdit( {
 			</BlockControls>
 			<InspectorControls group="advanced">
 				<TextControl
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					autoComplete="off"
 					label={ __( 'Separator' ) }
diff --git a/packages/block-library/src/post-terms/index.php b/packages/block-library/src/post-terms/index.php
index 69d7b04b096b5..3e7a05f10117e 100644
--- a/packages/block-library/src/post-terms/index.php
+++ b/packages/block-library/src/post-terms/index.php
@@ -24,11 +24,6 @@ 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 = array( 'taxonomy-' . $attributes['term'] );
 	if ( isset( $attributes['textAlign'] ) ) {
 		$classes[] = 'has-text-align-' . $attributes['textAlign'];
@@ -51,13 +46,19 @@ 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;
 }
 
 /**
diff --git a/packages/block-library/src/post-time-to-read/block.json b/packages/block-library/src/post-time-to-read/block.json
index d19c6e553046c..ce0ab2be6c02f 100644
--- a/packages/block-library/src/post-time-to-read/block.json
+++ b/packages/block-library/src/post-time-to-read/block.json
@@ -45,6 +45,12 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
 		}
 	}
 }
diff --git a/packages/block-library/src/post-time-to-read/index.js b/packages/block-library/src/post-time-to-read/index.js
index 95b379f55f0b3..039923161ca81 100644
--- a/packages/block-library/src/post-time-to-read/index.js
+++ b/packages/block-library/src/post-time-to-read/index.js
@@ -12,6 +12,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/post-title/block.json b/packages/block-library/src/post-title/block.json
index 796da166710eb..ecb5053d6cd39 100644
--- a/packages/block-library/src/post-title/block.json
+++ b/packages/block-library/src/post-title/block.json
@@ -15,6 +15,9 @@
 			"type": "number",
 			"default": 2
 		},
+		"levelOptions": {
+			"type": "array"
+		},
 		"isLink": {
 			"type": "boolean",
 			"default": false
@@ -63,6 +66,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-post-title"
diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js
index 3963016e34282..fdfb8e7c2c6cd 100644
--- a/packages/block-library/src/post-title/edit.js
+++ b/packages/block-library/src/post-title/edit.js
@@ -22,7 +22,7 @@ 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,
@@ -73,7 +73,7 @@ export default function PostTitleEdit( {
 		titleElement = userCanEdit ? (
 			<PlainText
 				tagName={ TagName }
-				placeholder={ __( 'No Title' ) }
+				placeholder={ __( 'No title' ) }
 				value={ rawTitle }
 				onChange={ setTitle }
 				__experimentalVersion={ 2 }
@@ -96,7 +96,7 @@ export default function PostTitleEdit( {
 					href={ link }
 					target={ linkTarget }
 					rel={ rel }
-					placeholder={ ! rawTitle.length ? __( 'No Title' ) : null }
+					placeholder={ ! rawTitle.length ? __( 'No title' ) : null }
 					value={ rawTitle }
 					onChange={ setTitle }
 					__experimentalVersion={ 2 }
@@ -125,6 +125,7 @@ export default function PostTitleEdit( {
 					<BlockControls group="block">
 						<HeadingLevelDropdown
 							value={ level }
+							options={ levelOptions }
 							onChange={ ( newLevel ) =>
 								setAttributes( { level: newLevel } )
 							}
@@ -161,6 +162,7 @@ export default function PostTitleEdit( {
 										checked={ linkTarget === '_blank' }
 									/>
 									<TextControl
+										__next40pxDefaultSize
 										__nextHasNoMarginBottom
 										label={ __( 'Link rel' ) }
 										value={ rel }
diff --git a/packages/block-library/src/post-title/style.scss b/packages/block-library/src/post-title/style.scss
index abeb4454bcb2c..8dfd25b1a0786 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 fbec3581bc9d4..c25b8ce37093a 100644
--- a/packages/block-library/src/preformatted/block.json
+++ b/packages/block-library/src/preformatted/block.json
@@ -12,7 +12,7 @@
 			"source": "rich-text",
 			"selector": "pre",
 			"__unstablePreserveWhiteSpace": true,
-			"__experimentalRole": "content"
+			"role": "content"
 		}
 	},
 	"supports": {
@@ -43,6 +43,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-preformatted"
diff --git a/packages/block-library/src/pullquote/block.json b/packages/block-library/src/pullquote/block.json
index 0935f9759668d..271bba74d0252 100644
--- a/packages/block-library/src/pullquote/block.json
+++ b/packages/block-library/src/pullquote/block.json
@@ -11,13 +11,13 @@
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "p",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"citation": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "cite",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"textAlign": {
 			"type": "string"
diff --git a/packages/block-library/src/pullquote/deprecated.js b/packages/block-library/src/pullquote/deprecated.js
index 6e6f49da91c6a..18e4799755078 100644
--- a/packages/block-library/src/pullquote/deprecated.js
+++ b/packages/block-library/src/pullquote/deprecated.js
@@ -75,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',
diff --git a/packages/block-library/src/query-no-results/block.json b/packages/block-library/src/query-no-results/block.json
index 8f3ba56adcc36..2f656594afa30 100644
--- a/packages/block-library/src/query-no-results/block.json
+++ b/packages/block-library/src/query-no-results/block.json
@@ -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,
diff --git a/packages/block-library/src/query-pagination-numbers/edit.js b/packages/block-library/src/query-pagination-numbers/edit.js
index eb83204b2cca2..b8d8c160cc874 100644
--- a/packages/block-library/src/query-pagination-numbers/edit.js
+++ b/packages/block-library/src/query-pagination-numbers/edit.js
@@ -51,6 +51,8 @@ export default function QueryPaginationNumbersEdit( {
 			<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.'
diff --git a/packages/block-library/src/query-pagination-numbers/index.js b/packages/block-library/src/query-pagination-numbers/index.js
index 3fd903e2d9ef4..f769f54b4ac03 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/editor.scss b/packages/block-library/src/query-pagination/editor.scss
index 169f2b5ca72af..ed8a2cc47a30f 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/query-pagination-arrow-controls.js b/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js
index d5b3353a7187e..0f2e9c1788bf7 100644
--- a/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js
+++ b/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js
@@ -10,6 +10,7 @@ import {
 export function QueryPaginationArrowControls( { value, onChange } ) {
 	return (
 		<ToggleGroupControl
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label={ __( 'Arrow' ) }
 			value={ value }
diff --git a/packages/block-library/src/query-pagination/style.scss b/packages/block-library/src/query-pagination/style.scss
index a7f2832af48c7..e949c766e5651 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 674daadee3bb6..5d5c9113bda08 100644
--- a/packages/block-library/src/query-title/block.json
+++ b/packages/block-library/src/query-title/block.json
@@ -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,
@@ -55,6 +63,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-query-title"
diff --git a/packages/block-library/src/query-title/edit.js b/packages/block-library/src/query-title/edit.js
index 71f0e26d70684..845809a930013 100644
--- a/packages/block-library/src/query-title/edit.js
+++ b/packages/block-library/src/query-title/edit.js
@@ -25,7 +25,14 @@ 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();
@@ -130,6 +137,7 @@ export default function QueryTitleEdit( {
 			<BlockControls group="block">
 				<HeadingLevelDropdown
 					value={ level }
+					options={ levelOptions }
 					onChange={ ( newLevel ) =>
 						setAttributes( { level: newLevel } )
 					}
diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json
index b602032df3600..b2225192c6b21 100644
--- a/packages/block-library/src/query/block.json
+++ b/packages/block-library/src/query/block.json
@@ -5,6 +5,7 @@
 	"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,7 +26,8 @@
 				"sticky": "",
 				"inherit": true,
 				"taxQuery": null,
-				"parents": []
+				"parents": [],
+				"format": []
 			}
 		},
 		"tagName": {
@@ -40,6 +42,7 @@
 			"default": false
 		}
 	},
+	"usesContext": [ "postType" ],
 	"providesContext": {
 		"queryId": "queryId",
 		"query": "query",
diff --git a/packages/block-library/src/query/edit/enhanced-pagination-modal.js b/packages/block-library/src/query/edit/enhanced-pagination-modal.js
index bc8e05f67a01e..332cc337bb0f6 100644
--- a/packages/block-library/src/query/edit/enhanced-pagination-modal.js
+++ b/packages/block-library/src/query/edit/enhanced-pagination-modal.js
@@ -42,7 +42,7 @@ export default function EnhancedPaginationModal( {
 	};
 
 	let notice = __(
-		'If you still want to prevent full page reloads, remove that block, then disable "Force page reload" again in the Query Block settings.'
+		'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 =
@@ -63,7 +63,7 @@ export default function EnhancedPaginationModal( {
 	return (
 		isOpen && (
 			<Modal
-				title={ __( 'Query block: Force page reload enabled' ) }
+				title={ __( 'Query block: Reload full page enabled' ) }
 				className="wp-block-query__enhanced-pagination-modal"
 				aria={ {
 					describedby: modalDescriptionId,
@@ -75,7 +75,11 @@ export default function EnhancedPaginationModal( {
 			>
 				<VStack alignment="right" spacing={ 5 }>
 					<span id={ modalDescriptionId }>{ notice }</span>
-					<Button variant="primary" onClick={ closeModal }>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						onClick={ closeModal }
+					>
 						{ __( 'OK' ) }
 					</Button>
 				</VStack>
diff --git a/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js b/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js
index 293baead3f5c6..9d47d67e61d78 100644
--- a/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js
@@ -25,18 +25,19 @@ export default function EnhancedPaginationControl( {
 		);
 	} else if ( enhancedPagination ) {
 		help = __(
-			"Browsing between pages won't require a full page reload, unless non-compatible blocks are detected."
+			'Reload the full page—instead of just the posts list—when visitors navigate between pages.'
 		);
 	} else if ( hasUnsupportedBlocks ) {
 		help = __(
-			"Force page reload can't be disabled because there are non-compatible blocks inside the Query block."
+			'Enhancement disabled because there are non-compatible blocks inside the Query block.'
 		);
 	}
 
 	return (
 		<>
 			<ToggleControl
-				label={ __( 'Force page reload' ) }
+				__nextHasNoMarginBottom
+				label={ __( 'Reload full page' ) }
 				help={ help }
 				checked={
 					! enhancedPagination && ! fullPageClientSideNavigation
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 0000000000000..15c95f3bbba2e
--- /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 cd6b7a262c008..28a6113620fb7 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,14 @@ 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 { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { debounce } from '@wordpress/compose';
@@ -25,9 +26,12 @@ 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 EnhancedPaginationControl from './enhanced-pagination-control';
 import CreateNewPostLink from './create-new-post-link';
+import PerPageControl from './per-page-control';
+import OffsetControl from './offset-controls';
+import PagesControl from './pages-control';
 import { unlock } from '../../../lock-unlock';
 import {
 	usePostTypes,
@@ -41,22 +45,29 @@ import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 const { BlockInfo } = unlock( blockEditorPrivateApis );
 
 export default function QueryInspectorControls( props ) {
-	const { attributes, setQuery, setDisplayLayout, setAttributes, clientId } =
-		props;
-	const { query, displayLayout, enhancedPagination } = attributes;
+	const { attributes, setQuery, setDisplayLayout, isTemplate } = 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 {
+		postTypesTaxonomiesMap,
+		postTypesSelectOptions,
+		postTypeFormatSupportMap,
+	} = usePostTypes();
 	const taxonomies = useTaxonomies( postType );
 	const isPostTypeHierarchical = useIsPostTypeHierarchical( postType );
 	useEffect( () => {
@@ -85,6 +96,14 @@ export default function QueryInspectorControls( props ) {
 		}
 		// 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 );
@@ -100,20 +119,25 @@ export default function QueryInspectorControls( props ) {
 		onChangeDebounced();
 		return onChangeDebounced.cancel;
 	}, [ querySearch, onChangeDebounced ] );
-	const showInheritControl = isControlAllowed( allowedControls, 'inherit' );
+
+	const showInheritControl =
+		isTemplate && isControlAllowed( allowedControls, 'inherit' );
 	const showPostTypeControl =
-		! inherit && isControlAllowed( allowedControls, 'postType' );
-	const postTypeControlLabel = __( 'Content type' );
+		( ! inherit && isControlAllowed( allowedControls, 'postType' ) ) ||
+		! isTemplate;
+	const postTypeControlLabel = __( 'Post type' );
 	const postTypeControlHelp = __(
-		'WordPress contains different types of content you can filter by. Posts and pages are the default types, but plugins could add more.'
+		'Select the type of content to display: posts, pages, or custom post types.'
 	);
 	const showColumnsControl = false;
 	const showOrderControl =
-		! inherit && isControlAllowed( allowedControls, 'order' );
+		( ! inherit && isControlAllowed( allowedControls, 'order' ) ) ||
+		! isTemplate;
 	const showStickyControl =
-		! inherit &&
-		showSticky &&
-		isControlAllowed( allowedControls, 'sticky' );
+		( ! inherit &&
+			showSticky &&
+			isControlAllowed( allowedControls, 'sticky' ) ) ||
+		( showSticky && ! isTemplate );
 	const showSettingsPanel =
 		showInheritControl ||
 		showPostTypeControl ||
@@ -129,13 +153,48 @@ export default function QueryInspectorControls( props ) {
 		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;
+		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 (
 		<>
 			{ !! postType && (
@@ -146,17 +205,34 @@ export default function QueryInspectorControls( props ) {
 			{ showSettingsPanel && (
 				<PanelBody title={ __( 'Settings' ) }>
 					{ showInheritControl && (
-						<ToggleControl
+						<ToggleGroupControl
+							__next40pxDefaultSize
 							__nextHasNoMarginBottom
-							label={ __( 'Inherit query from template' ) }
-							help={ __(
-								'Enable 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 } )
+							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' ) }
+							/>
+							<ToggleGroupControlOption
+								value="custom"
+								label={ __( 'Custom' ) }
+							/>
+						</ToggleGroupControl>
 					) }
 					{ showPostTypeControl &&
 						( postTypesSelectOptions.length > 2 ? (
@@ -230,13 +306,49 @@ export default function QueryInspectorControls( props ) {
 							}
 						/>
 					) }
-					<EnhancedPaginationControl
-						enhancedPagination={ enhancedPagination }
-						setAttributes={ setAttributes }
-						clientId={ clientId }
-					/>
 				</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
@@ -247,6 +359,7 @@ export default function QueryInspectorControls( props ) {
 							parents: [],
 							search: '',
 							taxQuery: null,
+							format: [],
 						} );
 						setQuerySearch( '' );
 					} }
@@ -308,6 +421,18 @@ export default function QueryInspectorControls( props ) {
 							/>
 						</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 0000000000000..ff755c95f8b0a
--- /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/pages-control.js b/packages/block-library/src/query/edit/inspector-controls/pages-control.js
new file mode 100644
index 0000000000000..06c6e32b66ad2
--- /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 33cc1f83eda59..5fb9ffaad20e8 100644
--- a/packages/block-library/src/query/edit/inspector-controls/parent-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/parent-control.js
@@ -132,6 +132,7 @@ function ParentControl( { parents, postType, onChange } ) {
 	};
 	return (
 		<FormTokenField
+			__next40pxDefaultSize
 			label={ __( 'Parents' ) }
 			value={ value }
 			onInputChange={ debouncedSearch }
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 0000000000000..933bb0851e625
--- /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 98bec75ad933b..ee7ee31ba977a 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
@@ -20,7 +20,7 @@ export default function StickyControl( { value, onChange } ) {
 			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/query-content.js b/packages/block-library/src/query/edit/query-content.js
index be10f88cb911e..8b3ff09b17934 100644
--- a/packages/block-library/src/query/edit/query-content.js
+++ b/packages/block-library/src/query/edit/query-content.js
@@ -3,7 +3,7 @@
  */
 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,
@@ -18,6 +18,7 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
+import EnhancedPaginationControl from './inspector-controls/enhanced-pagination-control';
 import QueryToolbar from './query-toolbar';
 import QueryInspectorControls from './inspector-controls';
 import EnhancedPaginationModal from './enhanced-pagination-modal';
@@ -31,14 +32,17 @@ export default function QueryContent( {
 	openPatternSelectionModal,
 	name,
 	clientId,
+	context,
 } ) {
 	const {
 		queryId,
 		query,
 		displayLayout,
+		enhancedPagination,
 		tagName: TagName = 'div',
 		query: { inherit } = {},
 	} = attributes;
+	const { postType } = context;
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 	const instanceId = useInstanceId( QueryContent );
@@ -46,6 +50,16 @@ export default function QueryContent( {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 	} );
+	const isTemplate = useSelect(
+		( select ) => {
+			const currentTemplate =
+				select( coreStore ).__experimentalGetTemplateForLink()?.type;
+			const isInTemplate = 'wp_template' === currentTemplate;
+			const isInSingularContent = postType !== undefined;
+			return isInTemplate && ! isInSingularContent;
+		},
+		[ postType ]
+	);
 	const { postsPerPage } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		const { getEntityRecord, getEntityRecordEdits, canUser } =
@@ -79,6 +93,10 @@ 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 = {};
 		// When we inherit from global query always need to set the `perPage`
@@ -88,11 +106,24 @@ export default function QueryContent( {
 		} else if ( ! query.perPage && postsPerPage ) {
 			newQuery.perPage = postsPerPage;
 		}
+		// We need to reset the `inherit` value if not in a template, as queries
+		// are not inherited when outside a template (e.g. when in singular content).
+		if ( ! isTemplate && query.inherit ) {
+			newQuery.inherit = false;
+		}
 		if ( !! Object.keys( newQuery ).length ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			updateQuery( newQuery );
 		}
-	}, [ query.perPage, postsPerPage, inherit ] );
+	}, [
+		query.perPage,
+		postsPerPage,
+		inherit,
+		isTemplate,
+		query.inherit,
+		__unstableMarkNextChangeAsNotPersistent,
+		updateQuery,
+	] );
 	// We need this for multi-query block pagination.
 	// Query parameters for each block are scoped to their ID.
 	useEffect( () => {
@@ -100,16 +131,19 @@ 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. '
+			'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."
@@ -133,6 +167,7 @@ export default function QueryContent( {
 					setDisplayLayout={ updateDisplayLayout }
 					setAttributes={ setAttributes }
 					clientId={ clientId }
+					isTemplate={ isTemplate }
 				/>
 			</InspectorControls>
 			<BlockControls>
@@ -161,6 +196,11 @@ export default function QueryContent( {
 					}
 					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 eec982c9750cf..631eb64de0715 100644
--- a/packages/block-library/src/query/edit/query-placeholder.js
+++ b/packages/block-library/src/query/edit/query-placeholder.js
@@ -79,6 +79,7 @@ export default function QueryPlaceholder( {
 			>
 				{ !! hasPatterns && (
 					<Button
+						__next40pxDefaultSize
 						variant="primary"
 						onClick={ openPatternSelectionModal }
 					>
@@ -87,6 +88,7 @@ export default function QueryPlaceholder( {
 				) }
 
 				<Button
+					__next40pxDefaultSize
 					variant="secondary"
 					onClick={ () => {
 						setIsStartingBlank( true );
diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js
index ff670d7c001a6..cc2d62a54d529 100644
--- a/packages/block-library/src/query/edit/query-toolbar.js
+++ b/packages/block-library/src/query/edit/query-toolbar.js
@@ -1,14 +1,8 @@
 /**
  * WordPress dependencies
  */
-import {
-	ToolbarGroup,
-	Dropdown,
-	ToolbarButton,
-	__experimentalNumberControl as NumberControl,
-} from '@wordpress/components';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { settings } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -16,8 +10,6 @@ import { settings } from '@wordpress/icons';
 import { usePatterns } from '../utils';
 
 export default function QueryToolbar( {
-	attributes: { query },
-	setQuery,
 	openPatternSelectionModal,
 	name,
 	clientId,
@@ -26,87 +18,6 @@ export default function QueryToolbar( {
 
 	return (
 		<>
-			{ ! query.inherit && (
-				<ToolbarGroup>
-					<Dropdown
-						contentClassName="block-library-query-toolbar__popover"
-						renderToggle={ ( { onToggle } ) => (
-							<ToolbarButton
-								icon={ settings }
-								label={ __( 'Display settings' ) }
-								onClick={ onToggle }
-							/>
-						) }
-						renderContent={ () => (
-							<>
-								<NumberControl
-									__unstableInputWidth="60px"
-									className="block-library-query-toolbar__popover-number-control"
-									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 }
-								/>
-								<NumberControl
-									__unstableInputWidth="60px"
-									className="block-library-query-toolbar__popover-number-control"
-									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 }
-								/>
-								<NumberControl
-									__unstableInputWidth="60px"
-									className="block-library-query-toolbar__popover-number-control"
-									label={ __( 'Max pages to show' ) }
-									labelPosition="edge"
-									min={ 0 }
-									onChange={ ( value ) => {
-										if ( isNaN( value ) || value < 0 ) {
-											return;
-										}
-										setQuery( { pages: value } );
-									} }
-									step="1"
-									value={ query.pages }
-									isDragEnabled={ false }
-									help={ __(
-										'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).'
-									) }
-								/>
-							</>
-						) }
-					/>
-				</ToolbarGroup>
-			) }
 			{ hasPatterns && (
 				<ToolbarGroup className="wp-block-template-part__block-control-group">
 					<ToolbarButton onClick={ openPatternSelectionModal }>
diff --git a/packages/block-library/src/query/index.php b/packages/block-library/src/query/index.php
index 6cc57dc08388c..043f351e11d7f 100644
--- a/packages/block-library/src/query/index.php
+++ b/packages/block-library/src/query/index.php
@@ -24,27 +24,7 @@ function render_block_core_query( $attributes, $content, $block ) {
 	// Enqueue the script module and add the necessary directives if the block is
 	// interactive.
 	if ( $is_interactive ) {
-		$suffix = wp_scripts_get_suffix();
-		if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-			$module_url = gutenberg_url( '/build/interactivity/query.min.js' );
-		}
-
-		wp_register_script_module(
-			'@wordpress/block-library/query',
-			isset( $module_url ) ? $module_url : includes_url( "blocks/query/view{$suffix}.js" ),
-			array(
-				array(
-					'id'     => '@wordpress/interactivity',
-					'import' => 'static',
-				),
-				array(
-					'id'     => '@wordpress/interactivity-router',
-					'import' => 'dynamic',
-				),
-			),
-			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-		);
-		wp_enqueue_script_module( '@wordpress/block-library/query' );
+		wp_enqueue_script_module( '@wordpress/block-library/query/view' );
 
 		$p = new WP_HTML_Tag_Processor( $content );
 		if ( $p->next_tag() ) {
diff --git a/packages/block-library/src/query/utils.js b/packages/block-library/src/query/utils.js
index 73af87f684e2a..68da2573bab0f 100644
--- a/packages/block-library/src/query/utils.js
+++ b/packages/block-library/src/query/utils.js
@@ -94,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.
  */
@@ -124,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,
+	};
 };
 
 /**
@@ -136,11 +151,15 @@ export const usePostTypes = () => {
 export const useTaxonomies = ( postType ) => {
 	const taxonomies = useSelect(
 		( select ) => {
-			const { getTaxonomies } = select( coreStore );
-			return getTaxonomies( {
-				type: postType,
-				per_page: -1,
-			} );
+			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 ]
 	);
diff --git a/packages/block-library/src/quote/block.json b/packages/block-library/src/quote/block.json
index c695c938923ae..2ae37f9f36f76 100644
--- a/packages/block-library/src/quote/block.json
+++ b/packages/block-library/src/quote/block.json
@@ -14,13 +14,13 @@
 			"selector": "blockquote",
 			"multiline": "p",
 			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"citation": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "cite",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"textAlign": {
 			"type": "string"
@@ -28,6 +28,7 @@
 	},
 	"supports": {
 		"anchor": true,
+		"align": [ "left", "right", "wide", "full" ],
 		"html": false,
 		"background": {
 			"backgroundImage": true,
diff --git a/packages/block-library/src/quote/deprecated.js b/packages/block-library/src/quote/deprecated.js
index 77098b6e75313..4d3efd28e3a22 100644
--- a/packages/block-library/src/quote/deprecated.js
+++ b/packages/block-library/src/quote/deprecated.js
@@ -70,14 +70,14 @@ const v4 = {
 			selector: 'blockquote',
 			multiline: 'p',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		citation: {
 			type: 'string',
 			source: 'html',
 			selector: 'cite',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		align: {
 			type: 'string',
@@ -138,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',
diff --git a/packages/block-library/src/quote/test/transforms.native.js b/packages/block-library/src/quote/test/transforms.native.js
index 25030e0a018d4..3d2bc8ae60918 100644
--- a/packages/block-library/src/quote/test/transforms.native.js
+++ b/packages/block-library/src/quote/test/transforms.native.js
@@ -14,7 +14,7 @@ import {
 
 const block = 'Quote';
 const initialHtml = `
-<!-- wp:quote {"align":"left","className":"is-style-large"} -->
+<!-- wp:quote {"textAlign":"left","className":"is-style-large"} -->
 <blockquote class="wp-block-quote has-text-align-left is-style-large"><!-- wp:paragraph -->
 <p>"This will make running your own blog a viable alternative again."</p>
 <!-- /wp:paragraph --><cite>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></cite></blockquote>
diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss
index 5bcccbd60eefc..2c5983003986a 100644
--- a/packages/block-library/src/quote/theme.scss
+++ b/packages/block-library/src/quote/theme.scss
@@ -10,19 +10,21 @@
 		font-style: normal;
 	}
 
-	&.has-text-align-right {
+	&:where(.has-text-align-right) {
 		border-left: none;
 		border-right: 0.25em solid currentColor;
 		padding-left: 0;
 		padding-right: 1em;
 	}
 
-	&.has-text-align-center {
+	&:where(.has-text-align-center) {
 		border: none;
 		padding-left: 0;
 	}
 	// .is-style-large and .is-large are kept for backwards compatibility.
-	&.is-style-plain,
+	// They are not wrapped in `:where()` to keep specificity as it was before
+	// they were deprecated.
+	&:where(.is-style-plain),
 	&.is-style-large,
 	&.is-large {
 		border: none;
diff --git a/packages/block-library/src/quote/transforms.js b/packages/block-library/src/quote/transforms.js
index f9b3970433fad..c960759691bf1 100644
--- a/packages/block-library/src/quote/transforms.js
+++ b/packages/block-library/src/quote/transforms.js
@@ -9,10 +9,18 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/pullquote' ],
-			transform: ( { value, citation, anchor, fontSize, style } ) => {
+			transform: ( {
+				value,
+				align,
+				citation,
+				anchor,
+				fontSize,
+				style,
+			} ) => {
 				return createBlock(
 					'core/quote',
 					{
+						align,
 						citation,
 						anchor,
 						fontSize,
@@ -95,7 +103,7 @@ const transforms = {
 				);
 			},
 			transform: (
-				{ citation, anchor, fontSize, style },
+				{ align, citation, anchor, fontSize, style },
 				innerBlocks
 			) => {
 				const value = innerBlocks
@@ -103,6 +111,7 @@ const transforms = {
 					.join( '<br>' );
 				return createBlock( 'core/pullquote', {
 					value,
+					align,
 					citation,
 					anchor,
 					fontSize,
diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json
index dac4c6b488a97..c5af5a29d21be 100644
--- a/packages/block-library/src/search/block.json
+++ b/packages/block-library/src/search/block.json
@@ -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",
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index cfe7b29caf5de..d4ed5b7e3a405 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -28,7 +28,7 @@ import {
 	ToolbarButton,
 	ResizableBox,
 	PanelBody,
-	BaseControl,
+	__experimentalVStack as VStack,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
@@ -408,12 +408,14 @@ export default function SearchEdit( {
 
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
-					<BaseControl
-						label={ __( 'Width' ) }
-						id={ unitControlInputId }
+					<VStack
+						className="wp-block-search__inspector-controls"
+						spacing={ 4 }
 					>
 						<UnitControl
-							id={ unitControlInputId }
+							__next40pxDefaultSize
+							label={ __( 'Width' ) }
+							id={ unitControlInputId } // unused, kept for backwards compatibility
 							min={
 								isPercentageUnit( widthUnit ) ? 0 : MIN_WIDTH
 							}
@@ -422,14 +424,12 @@ export default function SearchEdit( {
 							}
 							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 ) => {
@@ -445,9 +445,8 @@ export default function SearchEdit( {
 							value={ `${ width }${ widthUnit }` }
 							units={ units }
 						/>
-
 						<ButtonGroup
-							className="wp-block-search__components-button-group"
+							className="wp-block-search__components-button-group" // unused, kept for backwards compatibility
 							aria-label={ __( 'Percentage Width' ) }
 						>
 							{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
@@ -473,7 +472,7 @@ export default function SearchEdit( {
 								);
 							} ) }
 						</ButtonGroup>
-					</BaseControl>
+					</VStack>
 				</PanelBody>
 			</InspectorControls>
 		</>
@@ -566,7 +565,11 @@ export default function SearchEdit( {
 
 			<ResizableBox
 				size={ {
-					width: `${ width }${ widthUnit }`,
+					width:
+						width === undefined
+							? 'auto'
+							: `${ width }${ widthUnit }`,
+					height: 'auto',
 				} }
 				className={ clsx(
 					'wp-block-search__inside-wrapper',
diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss
index effa741249e91..ecc244d3341e1 100644
--- a/packages/block-library/src/search/editor.scss
+++ b/packages/block-library/src/search/editor.scss
@@ -7,7 +7,7 @@
 }
 
 .wp-block-search {
-	.wp-block-search__button {
+	:where(.wp-block-search__button) {
 		height: auto;
 		border-radius: initial;
 		display: flex;
@@ -15,8 +15,11 @@
 		justify-content: center;
 		text-align: center;
 	}
+}
 
-	&__components-button-group {
-		margin-top: 10px;
+.wp-block-search__inspector-controls {
+	.components-base-control {
+		// Counteract the margin added by the block inspector.
+		margin-bottom: 0;
 	}
 }
diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 39b8591c86600..e4259bb0ce2c7 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -80,18 +80,7 @@ function render_block_core_search( $attributes ) {
 		// If it's interactive, enqueue the script module and add the directives.
 		$is_expandable_searchfield = 'button-only' === $button_position;
 		if ( $is_expandable_searchfield ) {
-			$suffix = wp_scripts_get_suffix();
-			if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-				$module_url = gutenberg_url( '/build/interactivity/search.min.js' );
-			}
-
-			wp_register_script_module(
-				'@wordpress/block-library/search',
-				isset( $module_url ) ? $module_url : includes_url( "blocks/search/view{$suffix}.js" ),
-				array( '@wordpress/interactivity' ),
-				defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-			);
-			wp_enqueue_script_module( '@wordpress/block-library/search' );
+			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' );
diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index f3e2f9e13a11a..36c217c1bf0c7 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -14,7 +14,6 @@ import {
 } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
 import {
-	MenuItem,
 	PanelBody,
 	RangeControl,
 	ResizableBox,
@@ -348,15 +347,19 @@ 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( { onRemoveLogo, ...mediaReplaceProps } ) {
+function SiteLogoReplaceFlow( {
+	mediaURL,
+	onRemoveLogo,
+	...mediaReplaceProps
+} ) {
 	return (
 		<MediaReplaceFlow
 			{ ...mediaReplaceProps }
+			mediaURL={ mediaURL }
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			accept={ ACCEPT_MEDIA_STRING }
-		>
-			<MenuItem onClick={ onRemoveLogo }>{ __( 'Reset' ) }</MenuItem>
-		</MediaReplaceFlow>
+			onReset={ onRemoveLogo }
+		/>
 	);
 }
 
@@ -392,7 +395,6 @@ export default function LogoEdit( {
 	isSelected,
 } ) {
 	const { width, shouldSyncIcon } = attributes;
-
 	const {
 		siteLogoId,
 		canUserEdit,
@@ -421,7 +423,7 @@ export default function LogoEdit( {
 				context: 'view',
 			} );
 		const _isRequestingMediaItem =
-			_siteLogoId &&
+			!! _siteLogoId &&
 			! select( coreStore ).hasFinishedResolution( 'getMedia', [
 				_siteLogoId,
 				{ context: 'view' },
@@ -515,16 +517,18 @@ export default function LogoEdit( {
 				onInitialSelectLogo( image );
 			},
 			onError: onUploadError,
+			onRemoveLogo,
 		} );
 	};
 
 	const mediaReplaceFlowProps = {
 		mediaURL: logoUrl,
+		name: ! logoUrl ? __( 'Choose logo' ) : __( 'Replace' ),
 		onSelect: onSelectLogo,
 		onError: onUploadError,
 		onRemoveLogo,
 	};
-	const controls = canUserEdit && logoUrl && ! temporaryURL && (
+	const controls = canUserEdit && (
 		<BlockControls group="other">
 			<SiteLogoReplaceFlow { ...mediaReplaceFlowProps } />
 		</BlockControls>
@@ -560,6 +564,7 @@ export default function LogoEdit( {
 					iconId={ siteIconId }
 					canUserEdit={ canUserEdit }
 				/>
+				{ canUserEdit && <DropZone onFilesDrop={ onFilesDrop } /> }
 			</>
 		);
 	}
@@ -590,8 +595,6 @@ export default function LogoEdit( {
 
 	const blockProps = useBlockProps( { className: classes } );
 
-	const label = __( 'Add a site logo' );
-
 	const mediaInspectorPanel = ( canUserEdit || logoUrl ) && (
 		<InspectorControls>
 			<PanelBody title={ __( 'Media' ) }>
@@ -625,13 +628,14 @@ export default function LogoEdit( {
 								render={ ( { open } ) => (
 									<div className="block-library-site-logo__inspector-upload-container">
 										<Button
+											__next40pxDefaultSize
 											onClick={ open }
 											variant="secondary"
 										>
 											{ isLoading ? (
 												<Spinner />
 											) : (
-												__( 'Add media' )
+												__( 'Choose logo' )
 											) }
 										</Button>
 										<DropZone onFilesDrop={ onFilesDrop } />
@@ -650,16 +654,17 @@ export default function LogoEdit( {
 			{ controls }
 			{ mediaInspectorPanel }
 			{ ( !! logoUrl || !! temporaryURL ) && logoImage }
-			{ ! temporaryURL && ! logoUrl && ! canUserEdit && (
-				<Placeholder className="site-logo_placeholder">
-					{ !! isLoading && (
+			{ ( isLoading ||
+				( ! temporaryURL && ! logoUrl && ! canUserEdit ) ) && (
+				<Placeholder className="site-logo_placeholder" withIllustration>
+					{ isLoading && (
 						<span className="components-placeholder__preview">
 							<Spinner />
 						</span>
 					) }
 				</Placeholder>
 			) }
-			{ ! temporaryURL && ! logoUrl && canUserEdit && (
+			{ ! isLoading && ! temporaryURL && ! logoUrl && canUserEdit && (
 				<MediaPlaceholder
 					onSelect={ onInitialSelectLogo }
 					accept={ ACCEPT_MEDIA_STRING }
@@ -669,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-tagline/block.json b/packages/block-library/src/site-tagline/block.json
index c2061726d62a9..d42b7bcd4bed6 100644
--- a/packages/block-library/src/site-tagline/block.json
+++ b/packages/block-library/src/site-tagline/block.json
@@ -14,6 +14,10 @@
 		"level": {
 			"type": "number",
 			"default": 0
+		},
+		"levelOptions": {
+			"type": "array",
+			"default": [ 0, 1, 2, 3, 4, 5, 6 ]
 		}
 	},
 	"example": {
@@ -56,7 +60,14 @@
 		},
 		"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 15f8a789dfbe9..52b9c761ba4f5 100644
--- a/packages/block-library/src/site-tagline/edit.js
+++ b/packages/block-library/src/site-tagline/edit.js
@@ -18,14 +18,12 @@ import {
 import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
-const HEADING_LEVELS = [ 0, 1, 2, 3, 4, 5, 6 ];
-
 export default function SiteTaglineEdit( {
 	attributes,
 	setAttributes,
 	insertBlocksAfter,
 } ) {
-	const { textAlign, level } = attributes;
+	const { textAlign, level, levelOptions } = attributes;
 	const { canUserEdit, tagline } = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
@@ -82,8 +80,8 @@ export default function SiteTaglineEdit( {
 		<>
 			<BlockControls group="block">
 				<HeadingLevelDropdown
-					options={ HEADING_LEVELS }
 					value={ level }
+					options={ levelOptions }
 					onChange={ ( newLevel ) =>
 						setAttributes( { level: newLevel } )
 					}
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 0000000000000..a22eeebb6e277
--- /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 518b458184e94..c75b1bc229beb 100644
--- a/packages/block-library/src/site-title/block.json
+++ b/packages/block-library/src/site-title/block.json
@@ -11,6 +11,10 @@
 			"type": "number",
 			"default": 1
 		},
+		"levelOptions": {
+			"type": "array",
+			"default": [ 0, 1, 2, 3, 4, 5, 6 ]
+		},
 		"textAlign": {
 			"type": "string"
 		},
@@ -62,6 +66,12 @@
 		},
 		"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
index 76519ac1297b1..82e3c1d7f7bb4 100644
--- a/packages/block-library/src/site-title/edit.js
+++ b/packages/block-library/src/site-title/edit.js
@@ -21,14 +21,12 @@ import { ToggleControl, PanelBody } from '@wordpress/components';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 
-const HEADING_LEVELS = [ 0, 1, 2, 3, 4, 5, 6 ];
-
 export default function SiteTitleEdit( {
 	attributes,
 	setAttributes,
 	insertBlocksAfter,
 } ) {
-	const { level, textAlign, isLink, linkTarget } = attributes;
+	const { level, levelOptions, textAlign, isLink, linkTarget } = attributes;
 	const { canUserEdit, title } = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
@@ -97,8 +95,8 @@ export default function SiteTitleEdit( {
 		<>
 			<BlockControls group="block">
 				<HeadingLevelDropdown
-					options={ HEADING_LEVELS }
 					value={ level }
+					options={ levelOptions }
 					onChange={ ( newLevel ) =>
 						setAttributes( { level: newLevel } )
 					}
diff --git a/packages/block-library/src/site-title/editor.scss b/packages/block-library/src/site-title/editor.scss
index ce83659170ff6..372a85db2f4b1 100644
--- a/packages/block-library/src/site-title/editor.scss
+++ b/packages/block-library/src/site-title/editor.scss
@@ -2,7 +2,3 @@
 	padding: 1em 0;
 	border: 1px dashed;
 }
-
-.editor-styles-wrapper :where(.wp-block-site-title a) {
-	color: inherit;
-}
diff --git a/packages/block-library/src/site-title/style.scss b/packages/block-library/src/site-title/style.scss
index 337c82f79ad35..3b332e35c6523 100644
--- a/packages/block-library/src/site-title/style.scss
+++ b/packages/block-library/src/site-title/style.scss
@@ -1,3 +1,15 @@
-:root :where(.wp-block-site-title a) {
-	color: inherit;
+.wp-block-site-title {
+	// 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/edit.js b/packages/block-library/src/social-link/edit.js
index 6afcedfd76356..47af181bfe17e 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -22,6 +22,7 @@ import {
 	PanelBody,
 	PanelRow,
 	TextControl,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { keyboardReturn } from '@wordpress/icons';
@@ -58,7 +59,6 @@ const SocialLinkURLPopover = ( {
 			>
 				<div className="block-editor-url-input">
 					<URLInput
-						__nextHasNoMarginBottom
 						value={ url }
 						onChange={ ( nextURL ) =>
 							setAttributes( { url: nextURL } )
@@ -79,13 +79,18 @@ const SocialLinkURLPopover = ( {
 							}
 							removeBlock( clientId );
 						} }
+						suffix={
+							<InputControlSuffixWrapper variant="control">
+								<Button
+									icon={ keyboardReturn }
+									label={ __( 'Apply' ) }
+									type="submit"
+									size="small"
+								/>
+							</InputControlSuffixWrapper>
+						}
 					/>
 				</div>
-				<Button
-					icon={ keyboardReturn }
-					label={ __( 'Apply' ) }
-					type="submit"
-				/>
 			</form>
 		</URLPopover>
 	);
@@ -140,6 +145,7 @@ const SocialLinkEdit = ( {
 				<PanelBody title={ __( 'Settings' ) }>
 					<PanelRow>
 						<TextControl
+							__next40pxDefaultSize
 							__nextHasNoMarginBottom
 							label={ __( 'Text' ) }
 							help={ __(
@@ -156,6 +162,7 @@ const SocialLinkEdit = ( {
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<TextControl
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ __( 'Link rel' ) }
 					value={ rel || '' }
diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
index bea4a4e6721ec..d4dfae70aac5a 100644
--- a/packages/block-library/src/social-links/edit.js
+++ b/packages/block-library/src/social-links/edit.js
@@ -14,8 +14,10 @@ import {
 	InspectorControls,
 	ContrastChecker,
 	withColors,
+	InnerBlocks,
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
 	MenuGroup,
@@ -26,6 +28,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { check } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
 
 const sizeOptions = [
 	{ name: __( 'Small' ), value: 'has-small-icon-size' },
@@ -55,14 +58,22 @@ export function SocialLinksEdit( props ) {
 		size,
 	} = attributes;
 
+	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,
@@ -73,8 +84,9 @@ export function SocialLinksEdit( props ) {
 				iconBackgroundColorValue: undefined,
 			} );
 		} else {
-			setAttributes( { ...backgroundBackup.current } );
+			setAttributes( { ...backgroundBackupRef.current } );
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ logosOnly ] );
 
 	const SocialPlaceholder = (
@@ -87,12 +99,6 @@ 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 = clsx( size, {
@@ -104,10 +110,11 @@ export function SocialLinksEdit( props ) {
 
 	const blockProps = useBlockProps( { className } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		placeholder: isSelected ? SelectedSocialPlaceholder : SocialPlaceholder,
+		placeholder: ! isSelected && SocialPlaceholder,
 		templateLock: false,
 		orientation: attributes.layout?.orientation ?? 'horizontal',
 		__experimentalAppenderTagName: 'li',
+		renderAppender: hasAnySelected && InnerBlocks.ButtonBlockAppender,
 	} );
 
 	const POPOVER_PROPS = {
diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss
index 6f07ea209ecbe..11f1ed86d1122 100644
--- a/packages/block-library/src/social-links/editor.scss
+++ b/packages/block-library/src/social-links/editor.scss
@@ -1,11 +1,10 @@
 // Editor specific styles for Social Links.
-.wp-block-social-links {
-	div.block-editor-url-input {
-		display: inline-block;
-		margin-left: $grid-unit-10;
-	}
+.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;
@@ -98,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/spacer/controls.js b/packages/block-library/src/spacer/controls.js
index 160335fcc092e..1e899e15aff0d 100644
--- a/packages/block-library/src/spacer/controls.js
+++ b/packages/block-library/src/spacer/controls.js
@@ -10,7 +10,6 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import {
-	BaseControl,
 	PanelBody,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
@@ -57,19 +56,17 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	return (
 		<>
 			{ ( ! spacingSizes || spacingSizes?.length === 0 ) && (
-				<BaseControl label={ label } id={ inputId }>
-					<UnitControl
-						id={ inputId }
-						isResetValueOnUnitChange
-						min={ MIN_SPACER_SIZE }
-						onChange={ handleOnChange }
-						style={ { maxWidth: 80 } }
-						value={ computedValue }
-						units={ units }
-					/>
-				</BaseControl>
+				<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
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 790e09535f4b6..a8819c2084dc2 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -10,6 +10,11 @@
 @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";
@@ -22,13 +27,16 @@
 @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";
@@ -36,6 +44,7 @@
 @import "./post-terms/style.scss";
 @import "./post-time-to-read/style.scss";
 @import "./post-title/style.scss";
+@import "./post-author-name/style.scss";
 @import "./preformatted/style.scss";
 @import "./pullquote/style.scss";
 @import "./post-template/style.scss";
@@ -47,11 +56,13 @@
 @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";
diff --git a/packages/block-library/src/table-of-contents/block.json b/packages/block-library/src/table-of-contents/block.json
index 0c9c4bb4a2868..5eb6e729d3f03 100644
--- a/packages/block-library/src/table-of-contents/block.json
+++ b/packages/block-library/src/table-of-contents/block.json
@@ -48,7 +48,71 @@
 		},
 		"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/style.scss b/packages/block-library/src/table-of-contents/style.scss
new file mode 100644
index 0000000000000..4a3fbb6108bee
--- /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/edit.js b/packages/block-library/src/table/edit.js
index 5510d0031ff6b..95162f4e14c00 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -95,7 +95,7 @@ function TableEdit( {
 	attributes,
 	setAttributes,
 	insertBlocksAfter,
-	isSelected,
+	isSelected: isSingleSelected,
 } ) {
 	const { hasFixedLayout, head, foot } = attributes;
 	const [ initialRowCount, setInitialRowCount ] = useState( 2 );
@@ -340,10 +340,10 @@ function TableEdit( {
 	}
 
 	useEffect( () => {
-		if ( ! isSelected ) {
+		if ( ! isSingleSelected ) {
 			setSelectedCell();
 		}
-	}, [ isSelected ] );
+	}, [ isSingleSelected ] );
 
 	useEffect( () => {
 		if ( hasTableCreated ) {
@@ -565,9 +565,10 @@ function TableEdit( {
 				<Caption
 					attributes={ attributes }
 					setAttributes={ setAttributes }
-					isSelected={ isSelected }
+					isSelected={ isSingleSelected }
 					insertBlocksAfter={ insertBlocksAfter }
 					label={ __( 'Table caption text' ) }
+					showToolbarButton={ isSingleSelected }
 				/>
 			) }
 		</figure>
diff --git a/packages/block-library/src/tag-cloud/block.json b/packages/block-library/src/tag-cloud/block.json
index b95e02204faa2..044bc0c533376 100644
--- a/packages/block-library/src/tag-cloud/block.json
+++ b/packages/block-library/src/tag-cloud/block.json
@@ -4,7 +4,7 @@
 	"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": {
@@ -51,6 +51,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-tag-cloud-editor"
diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js
index 29f4823a19b42..eeb568e7a89ef 100644
--- a/packages/block-library/src/tag-cloud/edit.js
+++ b/packages/block-library/src/tag-cloud/edit.js
@@ -11,6 +11,7 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	__experimentalVStack as VStack,
 	Disabled,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -106,64 +107,87 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 		setAttributes( updateObj );
 	};
 
+	// Remove border styles from the server-side attributes to prevent duplicate border.
+	const serverSideAttributes = {
+		...attributes,
+		style: {
+			...attributes?.style,
+			border: undefined,
+		},
+	};
+
 	const inspectorControls = (
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
-				<SelectControl
-					__nextHasNoMarginBottom
-					label={ __( 'Taxonomy' ) }
-					options={ getTaxonomyOptions() }
-					value={ taxonomy }
-					onChange={ ( selectedTaxonomy ) =>
-						setAttributes( { taxonomy: selectedTaxonomy } )
-					}
-				/>
-				<ToggleControl
-					__nextHasNoMarginBottom
-					label={ __( 'Show post counts' ) }
-					checked={ showTagCounts }
-					onChange={ () =>
-						setAttributes( { showTagCounts: ! showTagCounts } )
-					}
-				/>
-				<RangeControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'Number of tags' ) }
-					value={ numberOfTags }
-					onChange={ ( value ) =>
-						setAttributes( { numberOfTags: value } )
-					}
-					min={ MIN_TAGS }
-					max={ MAX_TAGS }
-					required
-				/>
-				<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>
 	);
@@ -176,7 +200,7 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 					<ServerSideRender
 						skipBlockSupportAttributes
 						block="core/tag-cloud"
-						attributes={ attributes }
+						attributes={ serverSideAttributes }
 					/>
 				</Disabled>
 			</div>
diff --git a/packages/block-library/src/tag-cloud/editor.scss b/packages/block-library/src/tag-cloud/editor.scss
new file mode 100644
index 0000000000000..e85129e22f1ac
--- /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 69b8c25ec8720..8949dd8e5b11f 100644
--- a/packages/block-library/src/tag-cloud/index.php
+++ b/packages/block-library/src/tag-cloud/index.php
@@ -29,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();
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 44562c472dd4f..3c319a7ec0fe7 100644
--- a/packages/block-library/src/template-part/edit/advanced-controls.js
+++ b/packages/block-library/src/template-part/edit/advanced-controls.js
@@ -73,6 +73,7 @@ export function TemplatePartAdvancedControls( {
 			{ isEntityAvailable && (
 				<>
 					<TextControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Title' ) }
 						value={ title }
@@ -81,8 +82,8 @@ export function TemplatePartAdvancedControls( {
 						} }
 						onFocus={ ( event ) => event.target.select() }
 					/>
-
 					<SelectControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Area' ) }
 						labelPosition="top"
diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index 0cb6cfc8996ce..951f875143b0f 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -128,7 +128,7 @@ export default function TemplatePartEdit( {
 		area,
 		onNavigateToEntityRecord,
 		title,
-		canEditTemplate,
+		canUserEdit,
 	} = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, hasFinishedResolution } =
@@ -151,10 +151,13 @@ export default function TemplatePartEdit( {
 				  )
 				: false;
 
-			const _canEditTemplate = select( coreStore ).canUser( 'create', {
-				kind: 'postType',
-				name: 'wp_template_part',
-			} );
+			const _canUserEdit = hasResolvedEntity
+				? select( coreStore ).canUser( 'update', {
+						kind: 'postType',
+						name: 'wp_template_part',
+						id: templatePartId,
+				  } )
+				: false;
 
 			return {
 				hasInnerBlocks: getBlockCount( clientId ) > 0,
@@ -167,7 +170,7 @@ export default function TemplatePartEdit( {
 				onNavigateToEntityRecord:
 					getSettings().onNavigateToEntityRecord,
 				title: entityRecord?.title,
-				canEditTemplate: !! _canEditTemplate,
+				canUserEdit: !! _canUserEdit,
 			};
 		},
 		[ templatePartId, attributes.area, clientId ]
@@ -237,7 +240,7 @@ export default function TemplatePartEdit( {
 			<RecursionProvider uniqueId={ templatePartId }>
 				{ isEntityAvailable &&
 					onNavigateToEntityRecord &&
-					canEditTemplate && (
+					canUserEdit && (
 						<BlockControls group="other">
 							<ToolbarButton
 								onClick={ () =>
@@ -251,16 +254,18 @@ export default function TemplatePartEdit( {
 							</ToolbarButton>
 						</BlockControls>
 					) }
-				<InspectorControls group="advanced">
-					<TemplatePartAdvancedControls
-						tagName={ tagName }
-						setAttributes={ setAttributes }
-						isEntityAvailable={ isEntityAvailable }
-						templatePartId={ templatePartId }
-						defaultWrapper={ areaObject.tagName }
-						hasInnerBlocks={ hasInnerBlocks }
-					/>
-				</InspectorControls>
+				{ canUserEdit && (
+					<InspectorControls group="advanced">
+						<TemplatePartAdvancedControls
+							tagName={ tagName }
+							setAttributes={ setAttributes }
+							isEntityAvailable={ isEntityAvailable }
+							templatePartId={ templatePartId }
+							defaultWrapper={ areaObject.tagName }
+							hasInnerBlocks={ hasInnerBlocks }
+						/>
+					</InspectorControls>
+				) }
 				{ isPlaceholder && (
 					<TagName { ...blockProps }>
 						<TemplatePartPlaceholder
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 ef7d85948626d..8582caba4cde4 100644
--- a/packages/block-library/src/template-part/edit/inner-blocks.js
+++ b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -100,6 +100,12 @@ function EditableTemplatePartInnerBlocks( {
 	tagName: TagName,
 	blockProps,
 } ) {
+	const onNavigateToEntityRecord = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().onNavigateToEntityRecord,
+		[]
+	);
+
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		'wp_template_part',
@@ -114,7 +120,20 @@ function EditableTemplatePartInnerBlocks( {
 		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( {
@@ -129,15 +148,17 @@ export default function TemplatePartInnerBlocks( {
 			return {
 				canViewTemplatePart: !! select( coreStore ).canUser( 'read', {
 					kind: 'postType',
-					name: 'wp_template',
+					name: 'wp_template_part',
+					id,
 				} ),
-				canEditTemplatePart: !! select( coreStore ).canUser( 'create', {
+				canEditTemplatePart: !! select( coreStore ).canUser( 'update', {
 					kind: 'postType',
-					name: 'wp_template',
+					name: 'wp_template_part',
+					id,
 				} ),
 			};
 		},
-		[]
+		[ id ]
 	);
 
 	if ( ! canViewTemplatePart ) {
diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder.js
index c7e5e70c970e0..0b8a980b8b7e3 100644
--- a/packages/block-library/src/template-part/edit/placeholder.js
+++ b/packages/block-library/src/template-part/edit/placeholder.js
@@ -74,13 +74,18 @@ export default function TemplatePartPlaceholder( {
 
 			{ ! isResolving &&
 				!! ( templateParts.length || blockPatterns.length ) && (
-					<Button variant="primary" onClick={ onOpenSelectionModal }>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						onClick={ onOpenSelectionModal }
+					>
 						{ __( 'Choose' ) }
 					</Button>
 				) }
 
 			{ ! isResolving && isBlockBasedTheme && canCreateTemplatePart && (
 				<Button
+					__next40pxDefaultSize
 					variant="secondary"
 					onClick={ () => {
 						setShowTitleModal( true );
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 71659ce6ba717..735c9370099d9 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -35,11 +35,6 @@
 	&.block-editor-block-list__block:not([contenteditable]):focus {
 		&::after {
 			outline-color: var(--wp-block-synced-color);
-
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				outline-color: $dark-theme-focus;
-			}
 		}
 	}
 }
diff --git a/packages/block-library/src/term-description/index.js b/packages/block-library/src/term-description/index.js
index 0ff710a91f5d5..330ca05bd174e 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/utils/hooks.js b/packages/block-library/src/utils/hooks.js
index f9ad52297c53e..61515306e8bfd 100644
--- a/packages/block-library/src/utils/hooks.js
+++ b/packages/block-library/src/utils/hooks.js
@@ -37,36 +37,36 @@ export function useCanEditEntity( kind, name, recordId ) {
  * @param {Function} args.onError      Function called when an error happens.
  */
 export function useUploadMediaFromBlobURL( args = {} ) {
-	const latestArgs = useRef( args );
-	const hasUploadStarted = useRef( false );
+	const latestArgsRef = useRef( args );
+	const hasUploadStartedRef = useRef( false );
 	const { getSettings } = useSelect( blockEditorStore );
 
 	useLayoutEffect( () => {
-		latestArgs.current = args;
+		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 ( hasUploadStarted.current ) {
+		if ( hasUploadStartedRef.current ) {
 			return;
 		}
 		if (
-			! latestArgs.current.url ||
-			! isBlobURL( latestArgs.current.url )
+			! latestArgsRef.current.url ||
+			! isBlobURL( latestArgsRef.current.url )
 		) {
 			return;
 		}
 
-		const file = getBlobByURL( latestArgs.current.url );
+		const file = getBlobByURL( latestArgsRef.current.url );
 		if ( ! file ) {
 			return;
 		}
 
-		const { url, allowedTypes, onChange, onError } = latestArgs.current;
+		const { url, allowedTypes, onChange, onError } = latestArgsRef.current;
 		const { mediaUpload } = getSettings();
 
-		hasUploadStarted.current = true;
+		hasUploadStartedRef.current = true;
 
 		mediaUpload( {
 			filesList: [ file ],
@@ -78,12 +78,12 @@ export function useUploadMediaFromBlobURL( args = {} ) {
 
 				revokeBlobURL( url );
 				onChange( media );
-				hasUploadStarted.current = false;
+				hasUploadStartedRef.current = false;
 			},
 			onError: ( message ) => {
 				revokeBlobURL( url );
 				onError( message );
-				hasUploadStarted.current = false;
+				hasUploadStartedRef.current = false;
 			},
 		} );
 	}, [ getSettings ] );
diff --git a/packages/block-library/src/verse/block.json b/packages/block-library/src/verse/block.json
index 387ff3dfe1712..81cccd72965b1 100644
--- a/packages/block-library/src/verse/block.json
+++ b/packages/block-library/src/verse/block.json
@@ -13,7 +13,7 @@
 			"source": "rich-text",
 			"selector": "pre",
 			"__unstablePreserveWhiteSpace": true,
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"textAlign": {
 			"type": "string"
diff --git a/packages/block-library/src/verse/deprecated.js b/packages/block-library/src/verse/deprecated.js
index 7e3c96bc80cd9..bd4edc46738c5 100644
--- a/packages/block-library/src/verse/deprecated.js
+++ b/packages/block-library/src/verse/deprecated.js
@@ -46,7 +46,7 @@ const v2 = {
 			selector: 'pre',
 			default: '',
 			__unstablePreserveWhiteSpace: true,
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		textAlign: {
 			type: 'string',
diff --git a/packages/block-library/src/video/block.json b/packages/block-library/src/video/block.json
index 1d3dc75961e8f..d2dcd95365c3b 100644
--- a/packages/block-library/src/video/block.json
+++ b/packages/block-library/src/video/block.json
@@ -18,7 +18,7 @@
 			"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",
@@ -58,14 +58,14 @@
 		},
 		"blob": {
 			"type": "string",
-			"__experimentalRole": "local"
+			"role": "local"
 		},
 		"src": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "video",
 			"attribute": "src",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"playsInline": {
 			"type": "boolean",
@@ -74,7 +74,7 @@
 			"attribute": "playsinline"
 		},
 		"tracks": {
-			"__experimentalRole": "content",
+			"role": "content",
 			"type": "array",
 			"items": {
 				"type": "object"
diff --git a/packages/block-library/src/video/edit-common-settings.js b/packages/block-library/src/video/edit-common-settings.js
index 5ebf431ade3fc..9394bfaf5c614 100644
--- a/packages/block-library/src/video/edit-common-settings.js
+++ b/packages/block-library/src/video/edit-common-settings.js
@@ -83,6 +83,7 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 				) }
 			/>
 			<SelectControl
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				label={ __( 'Preload' ) }
 				value={ preload }
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index 97a6e148d5d06..ba6b4c869aefc 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -42,23 +42,6 @@ import TracksEditor from './tracks-editor';
 import Tracks from './tracks';
 import { Caption } from '../utils/caption';
 
-// Much of this description is duplicated from MediaPlaceholder.
-const placeholder = ( content ) => {
-	return (
-		<Placeholder
-			className="block-editor-media-placeholder"
-			withIllustration
-			icon={ icon }
-			label={ __( 'Video' ) }
-			instructions={ __(
-				'Upload a video file, pick one from your media library, or add one with a URL.'
-			) }
-		>
-			{ content }
-		</Placeholder>
-	);
-};
-
 const ALLOWED_MEDIA_TYPES = [ 'video' ];
 const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
 
@@ -149,6 +132,23 @@ function VideoEdit( {
 		createErrorNotice( message, { type: 'snackbar' } );
 	}
 
+	// 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={ __(
+					'Upload a video file, pick one from your media library, or add one with a URL.'
+				) }
+			>
+				{ content }
+			</Placeholder>
+		);
+	};
+
 	const classes = clsx( className, {
 		'is-transient': !! temporaryURL,
 	} );
@@ -208,6 +208,7 @@ function VideoEdit( {
 							onSelect={ onSelectVideo }
 							onSelectURL={ onSelectURL }
 							onError={ onUploadError }
+							onReset={ () => onSelectVideo( undefined ) }
 						/>
 					</BlockControls>
 				</>
@@ -219,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>
@@ -231,6 +232,7 @@ function VideoEdit( {
 								}
 								render={ ( { open } ) => (
 									<Button
+										__next40pxDefaultSize
 										variant="primary"
 										onClick={ open }
 										ref={ posterImageButton }
@@ -259,22 +261,23 @@ 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.
-				*/ }
+                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 }
diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss
index bfdeadab4d332..dd50ecc6c066f 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;
 	}
@@ -89,7 +48,6 @@
 
 .block-library-video-tracks-editor > .components-popover__content {
 	width: 360px;
-	padding: 0;
 }
 
 .block-library-video-tracks-editor__track-list,
@@ -98,10 +56,3 @@
 		padding: 0;
 	}
 }
-
-.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;
-}
-
diff --git a/packages/block-library/src/video/tracks-editor.js b/packages/block-library/src/video/tracks-editor.js
index 366d521f5aa62..d01e365985bc9 100644
--- a/packages/block-library/src/video/tracks-editor.js
+++ b/packages/block-library/src/video/tracks-editor.js
@@ -58,6 +58,7 @@ function TrackList( { tracks, onEditPress } ) {
 				>
 					<span>{ track.label } </span>
 					<Button
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ () => onEditPress( index ) }
 						aria-label={ sprintf(
@@ -99,6 +100,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 				</span>
 				<Grid columns={ 2 } gap={ 4 }>
 					<TextControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						/* eslint-disable jsx-a11y/no-autofocus */
 						autoFocus
@@ -114,6 +116,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 						help={ __( 'Title of track' ) }
 					/>
 					<TextControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						onChange={ ( newSrcLang ) =>
 							onChange( {
@@ -128,6 +131,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 				</Grid>
 				<VStack spacing="8">
 					<SelectControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						className="block-library-video-tracks-editor__single-track-editor-kind-select"
 						options={ KIND_OPTIONS }
@@ -142,6 +146,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 					/>
 					<HStack className="block-library-video-tracks-editor__single-track-editor-buttons-container">
 						<Button
+							__next40pxDefaultSize
 							variant="secondary"
 							onClick={ () => {
 								const changes = {};
@@ -170,6 +175,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 							{ __( 'Close' ) }
 						</Button>
 						<Button
+							__next40pxDefaultSize
 							isDestructive
 							variant="link"
 							onClick={ onRemove }
diff --git a/packages/block-library/src/video/transforms.js b/packages/block-library/src/video/transforms.js
index c1bbb3431aaf3..4325cd1e7e7e9 100644
--- a/packages/block-library/src/video/transforms.js
+++ b/packages/block-library/src/video/transforms.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createBlobURL } from '@wordpress/blob';
+import { createBlobURL, isBlobURL } from '@wordpress/blob';
 import { createBlock } from '@wordpress/blocks';
 
 const transforms = {
@@ -92,6 +92,10 @@ const transforms = {
 					poster: videoElement.getAttribute( 'poster' ) || undefined,
 					src: videoElement.getAttribute( 'src' ) || undefined,
 				};
+				if ( isBlobURL( attributes.src ) ) {
+					attributes.blob = attributes.src;
+					delete attributes.src;
+				}
 				return createBlock( 'core/video', attributes );
 			},
 		},
diff --git a/packages/block-serialization-default-parser/CHANGELOG.md b/packages/block-serialization-default-parser/CHANGELOG.md
index e03be10bf1ef8..4104f5282ce3f 100644
--- a/packages/block-serialization-default-parser/CHANGELOG.md
+++ b/packages/block-serialization-default-parser/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/block-serialization-default-parser/package.json b/packages/block-serialization-default-parser/package.json
index cecbecde17771..5dabca2d12945 100644
--- a/packages/block-serialization-default-parser/package.json
+++ b/packages/block-serialization-default-parser/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-serialization-default-parser",
-	"version": "5.3.0",
+	"version": "5.9.0",
 	"description": "Block serialization specification parser for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-serialization-spec-parser/CHANGELOG.md b/packages/block-serialization-spec-parser/CHANGELOG.md
index d150b6a0333df..87c683849585e 100644
--- a/packages/block-serialization-spec-parser/CHANGELOG.md
+++ b/packages/block-serialization-spec-parser/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/block-serialization-spec-parser/package.json b/packages/block-serialization-spec-parser/package.json
index 6a9ca868a938f..38469f4d29529 100644
--- a/packages/block-serialization-spec-parser/package.json
+++ b/packages/block-serialization-spec-parser/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-serialization-spec-parser",
-	"version": "5.3.0",
+	"version": "5.9.0",
 	"description": "Block serialization specification parser for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/blocks/CHANGELOG.md b/packages/blocks/CHANGELOG.md
index 618a6015ce00e..7e163fec2ad16 100644
--- a/packages/blocks/CHANGELOG.md
+++ b/packages/blocks/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/blocks/README.md b/packages/blocks/README.md
index d724f986b0ca8..f4805e1c60b38 100644
--- a/packages/blocks/README.md
+++ b/packages/blocks/README.md
@@ -102,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.
@@ -479,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.
@@ -780,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.
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
index 89dad22f8041e..644e428cb686b 100644
--- a/packages/blocks/package.json
+++ b/packages/blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/blocks",
-	"version": "13.3.0",
+	"version": "13.9.0",
 	"description": "Block API for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js
index 803467cb2187e..0b38b8e29e68a 100644
--- a/packages/blocks/src/api/index.js
+++ b/packages/blocks/src/api/index.js
@@ -2,12 +2,7 @@
  * Internal dependencies
  */
 import { lock } from '../lock-unlock';
-import {
-	registerBlockBindingsSource,
-	unregisterBlockBindingsSource,
-	getBlockBindingsSource,
-	getBlockBindingsSources,
-} from './registration';
+import { isUnmodifiedBlockContent } 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`
@@ -146,6 +141,10 @@ export {
 	unregisterBlockStyle,
 	registerBlockVariation,
 	unregisterBlockVariation,
+	registerBlockBindingsSource,
+	unregisterBlockBindingsSource,
+	getBlockBindingsSource,
+	getBlockBindingsSources,
 } from './registration';
 export {
 	isUnmodifiedBlock,
@@ -155,6 +154,7 @@ export {
 	getBlockLabel as __experimentalGetBlockLabel,
 	getAccessibleBlockLabel as __experimentalGetAccessibleBlockLabel,
 	__experimentalSanitizeBlockAttributes,
+	getBlockAttributesNamesByRole,
 	__experimentalGetBlockAttributesNamesByRole,
 } from './utils';
 
@@ -177,9 +177,4 @@ export {
 } from './constants';
 
 export const privateApis = {};
-lock( privateApis, {
-	registerBlockBindingsSource,
-	unregisterBlockBindingsSource,
-	getBlockBindingsSource,
-	getBlockBindingsSources,
-} );
+lock( privateApis, { isUnmodifiedBlockContent } );
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 4dfb24f2c9781..4c8c1a8dd736b 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/registration.js b/packages/blocks/src/api/registration.js
index 886309d8bd8f3..31be38b861c28 100644
--- a/packages/blocks/src/api/registration.js
+++ b/packages/blocks/src/api/registration.js
@@ -767,13 +767,15 @@ export const unregisterBlockVariation = ( blockName, variationName ) => {
  * 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.
- * @param {Function} [source.getValues]        Function to get the values from the source.
- * @param {Function} [source.setValues]        Function to update multiple values connected to the source.
- * @param {Function} [source.getPlaceholder]   Function to get the placeholder when the value is undefined.
- * @param {Function} [source.canUserEditValue] Function to determine if the user can edit the value.
+ * @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
@@ -783,9 +785,9 @@ export const unregisterBlockVariation = ( blockName, variationName ) => {
  * registerBlockBindingsSource( {
  *     name: 'plugin/my-custom-source',
  *     label: _x( 'My Custom Source', 'block bindings source' ),
- *     getValues: () => getSourceValues(),
- *     setValues: () => updateMyCustomValuesInBatch(),
- *     getPlaceholder: () => 'Placeholder text when the value is undefined',
+ *     usesContext: [ 'postType' ],
+ *     getValues: getSourceValues,
+ *     setValues: updateMyCustomValuesInBatch,
  *     canUserEditValue: () => true,
  * } );
  * ```
@@ -794,10 +796,11 @@ export const registerBlockBindingsSource = ( source ) => {
 	const {
 		name,
 		label,
+		usesContext,
 		getValues,
 		setValues,
-		getPlaceholder,
 		canUserEditValue,
+		getFieldsList,
 	} = source;
 
 	const existingSource = unlock(
@@ -867,6 +870,12 @@ export const registerBlockBindingsSource = ( source ) => {
 		return;
 	}
 
+	// 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.' );
@@ -879,15 +888,16 @@ export const registerBlockBindingsSource = ( source ) => {
 		return;
 	}
 
-	// Check the `getPlaceholder` property is correct.
-	if ( getPlaceholder && typeof getPlaceholder !== 'function' ) {
-		warning( 'Block bindings source getPlaceholder must be a function.' );
+	// Check the `canUserEditValue` property is correct.
+	if ( canUserEditValue && typeof canUserEditValue !== 'function' ) {
+		warning( 'Block bindings source canUserEditValue must be a function.' );
 		return;
 	}
 
-	// Check the `getPlaceholder` property is correct.
-	if ( canUserEditValue && typeof canUserEditValue !== 'function' ) {
-		warning( 'Block bindings source canUserEditValue must be a function.' );
+	// 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;
 	}
 
@@ -895,7 +905,9 @@ export const registerBlockBindingsSource = ( source ) => {
 };
 
 /**
- * Unregisters a block bindings 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.
  *
@@ -916,7 +928,9 @@ export function unregisterBlockBindingsSource( name ) {
 }
 
 /**
- * Returns a registered block bindings source.
+ * Returns a registered block bindings source by its name.
+ *
+ * @since 6.7.0 Introduced in WordPress core.
  *
  * @param {string} name Block bindings source name.
  *
@@ -929,6 +943,8 @@ export function getBlockBindingsSource( name ) {
 /**
  * Returns all registered block bindings sources.
  *
+ * @since 6.7.0 Introduced in WordPress core.
+ *
  * @return {Array} Block bindings sources.
  */
 export function getBlockBindingsSources() {
diff --git a/packages/blocks/src/api/serializer.js b/packages/blocks/src/api/serializer.js
index 2e7246ce9584a..f1fb28e9d9a36 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
@@ -238,7 +239,17 @@ export function getCommentAttributes( blockType, attributes ) {
 			}
 
 			// 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;
 			}
 
diff --git a/packages/blocks/src/api/test/registration.js b/packages/blocks/src/api/test/registration.js
index d36abee2930bf..483949af4fe5f 100644
--- a/packages/blocks/src/api/test/registration.js
+++ b/packages/blocks/src/api/test/registration.js
@@ -1513,8 +1513,10 @@ describe( 'blocks', () => {
 		} );
 
 		it( 'should not override label from the server', () => {
-			// Simulate bootstrapping a source from the server registration.
-			registerBlockBindingsSource( {
+			// Bootstrap source from the server.
+			unlock(
+				dispatch( blocksStore )
+			).addBootstrappedBlockBindingsSource( {
 				name: 'core/server',
 				label: 'Server label',
 			} );
@@ -1528,6 +1530,80 @@ describe( 'blocks', () => {
 			);
 		} );
 
+		// 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', () => {
+			// Bootstrap source from the server.
+			unlock(
+				dispatch( blocksStore )
+			).addBootstrappedBlockBindingsSource( {
+				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', () => {
+			// Bootstrap source from the server.
+			unlock(
+				dispatch( blocksStore )
+			).addBootstrappedBlockBindingsSource( {
+				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', () => {
+			// Bootstrap source from the server.
+			unlock(
+				dispatch( blocksStore )
+			).addBootstrappedBlockBindingsSource( {
+				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( {
@@ -1554,28 +1630,28 @@ describe( 'blocks', () => {
 			expect( getBlockBindingsSource( 'core/testing' ) ).toBeUndefined();
 		} );
 
-		// Check the `getPlaceholder` callback is correct.
-		it( 'should reject invalid getPlaceholder callback', () => {
+		// Check the `canUserEditValue` callback is correct.
+		it( 'should reject invalid canUserEditValue callback', () => {
 			registerBlockBindingsSource( {
 				name: 'core/testing',
 				label: 'testing',
-				getPlaceholder: 'should be a function',
+				canUserEditValue: 'should be a function',
 			} );
 			expect( console ).toHaveWarnedWith(
-				'Block bindings source getPlaceholder must be a function.'
+				'Block bindings source canUserEditValue must be a function.'
 			);
 			expect( getBlockBindingsSource( 'core/testing' ) ).toBeUndefined();
 		} );
 
-		// Check the `canUserEditValue` callback is correct.
-		it( 'should reject invalid canUserEditValue callback', () => {
+		// Check the `getFieldsList` callback is correct.
+		it( 'should reject invalid getFieldsList callback', () => {
 			registerBlockBindingsSource( {
 				name: 'core/testing',
 				label: 'testing',
-				canUserEditValue: 'should be a function',
+				getFieldsList: 'should be a function',
 			} );
 			expect( console ).toHaveWarnedWith(
-				'Block bindings source canUserEditValue must be a function.'
+				'Block bindings source getFieldsList must be a function.'
 			);
 			expect( getBlockBindingsSource( 'core/testing' ) ).toBeUndefined();
 		} );
@@ -1584,10 +1660,13 @@ describe( 'blocks', () => {
 		it( 'should register a valid source', () => {
 			const sourceProperties = {
 				label: 'Valid Source',
+				usesContext: [ 'postId' ],
 				getValues: () => 'value',
 				setValues: () => 'new values',
-				getPlaceholder: () => 'placeholder',
 				canUserEditValue: () => true,
+				getFieldsList: () => {
+					return { field: 'value' };
+				},
 			};
 			registerBlockBindingsSource( {
 				name: 'core/valid-source',
@@ -1605,10 +1684,11 @@ describe( 'blocks', () => {
 				label: 'Valid Source',
 			} );
 			const source = getBlockBindingsSource( 'core/valid-source' );
+			expect( source.usesContext ).toBeUndefined();
 			expect( source.getValues ).toBeUndefined();
 			expect( source.setValues ).toBeUndefined();
-			expect( source.getPlaceholder ).toBeUndefined();
 			expect( source.canUserEditValue ).toBeUndefined();
+			expect( source.getFieldsList ).toBeUndefined();
 			unregisterBlockBindingsSource( 'core/valid-source' );
 		} );
 
@@ -1625,6 +1705,42 @@ describe( 'blocks', () => {
 				'Block bindings source "core/test-source" is already registered.'
 			);
 		} );
+
+		it( 'should correctly merge properties when bootstrap happens after registration', () => {
+			// Register source in the client.
+			const clientOnlyProperties = {
+				getValues: () => 'values',
+				setValues: () => 'new values',
+				canUserEditValue: () => true,
+			};
+			registerBlockBindingsSource( {
+				name: 'core/custom-source',
+				label: 'Client Label',
+				usesContext: [ 'postId', 'postType' ],
+				...clientOnlyProperties,
+			} );
+
+			// Bootstrap source from the server.
+			unlock(
+				dispatch( blocksStore )
+			).addBootstrappedBlockBindingsSource( {
+				name: 'core/custom-source',
+				label: 'Server Label',
+				usesContext: [ 'postId', 'serverContext' ],
+			} );
+
+			// Check that the bootstrap values prevail and the client properties are still there.
+			expect( getBlockBindingsSource( 'core/custom-source' ) ).toEqual( {
+				// Should use the server label.
+				label: 'Server Label',
+				// Should merge usesContext from server and client.
+				usesContext: [ 'postId', 'postType', 'serverContext' ],
+				// Should keep client properties.
+				...clientOnlyProperties,
+			} );
+
+			unregisterBlockBindingsSource( 'core/custom-source' );
+		} );
 	} );
 
 	describe( 'unregisterBlockBindingsSource', () => {
diff --git a/packages/blocks/src/api/test/serializer.js b/packages/blocks/src/api/test/serializer.js
index 7fed23041daaa..3c1cbd6d1e74f 100644
--- a/packages/blocks/src/api/test/serializer.js
+++ b/packages/blocks/src/api/test/serializer.js
@@ -155,7 +155,7 @@ describe( 'block serializer', () => {
 					attributes: {
 						blob: {
 							type: 'string',
-							__experimentalRole: 'local',
+							role: 'local',
 						},
 						url: {
 							type: 'string',
diff --git a/packages/blocks/src/api/test/utils.js b/packages/blocks/src/api/test/utils.js
index 9bfef69c4c142..ad76e89aafe5f 100644
--- a/packages/blocks/src/api/test/utils.js
+++ b/packages/blocks/src/api/test/utils.js
@@ -13,7 +13,7 @@ import {
 	getAccessibleBlockLabel,
 	getBlockLabel,
 	__experimentalSanitizeBlockAttributes,
-	__experimentalGetBlockAttributesNamesByRole,
+	getBlockAttributesNamesByRole,
 } from '../utils';
 
 const noop = () => {};
@@ -309,7 +309,7 @@ describe( 'sanitizeBlockAttributes', () => {
 	} );
 } );
 
-describe( '__experimentalGetBlockAttributesNamesByRole', () => {
+describe( 'getBlockAttributesNamesByRole', () => {
 	beforeAll( () => {
 		registerBlockType( 'core/test-block-1', {
 			attributes: {
@@ -318,15 +318,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 +357,28 @@ 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( [] );
 	} );
 } );
diff --git a/packages/blocks/src/api/utils.js b/packages/blocks/src/api/utils.js
index a68937586f927..7bace4ff84c29 100644
--- a/packages/blocks/src/api/utils.js
+++ b/packages/blocks/src/api/utils.js
@@ -12,6 +12,7 @@ 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
@@ -29,6 +30,30 @@ extend( [ namesPlugin, a11yPlugin ] );
  */
 const ICON_COLORS = [ '#191e23', '#f8f9f9' ];
 
+/**
+ * Determines whether the block's attribute is equal to the default attribute
+ * which means the attribute is unmodified.
+ * @param {Object} attributeDefinition The attribute's definition of the block type.
+ * @param {*}      value               The attribute's value.
+ * @return {boolean} Whether the attribute is unmodified.
+ */
+function isUnmodifiedAttribute( attributeDefinition, value ) {
+	// Every attribute that has a default must match the default.
+	if ( attributeDefinition.hasOwnProperty( 'default' ) ) {
+		return value === attributeDefinition.default;
+	}
+
+	// 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 ( attributeDefinition.type === 'rich-text' ) {
+		return ! value?.length;
+	}
+
+	// Every attribute that doesn't have a default should be undefined.
+	return value === undefined;
+}
+
 /**
  * Determines whether the block's attributes are equal to the default attributes
  * which means the block is unmodified.
@@ -42,20 +67,7 @@ export function isUnmodifiedBlock( block ) {
 		( [ 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;
-			}
-
-			// 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;
-			}
-
-			// Every attribute that doesn't have a default should be undefined.
-			return value === undefined;
+			return isUnmodifiedAttribute( definition, value );
 		}
 	);
 }
@@ -72,6 +84,35 @@ export function isUnmodifiedDefaultBlock( block ) {
 	return block.name === getDefaultBlockName() && isUnmodifiedBlock( block );
 }
 
+/**
+ * Determines whether the block content is unmodified. A block content is
+ * considered unmodified if all the attributes that have a role of 'content'
+ * are equal to the default attributes (or undefined).
+ * If the block does not have any attributes with a role of 'content', it
+ * will be considered unmodified if all the attributes are equal to the default
+ * attributes (or undefined).
+ *
+ * @param {WPBlock} block Block Object
+ * @return {boolean} Whether the block content is unmodified.
+ */
+export function isUnmodifiedBlockContent( block ) {
+	const contentAttributes = getBlockAttributesNamesByRole(
+		block.name,
+		'content'
+	);
+
+	if ( contentAttributes.length === 0 ) {
+		return isUnmodifiedBlock( block );
+	}
+
+	return contentAttributes.every( ( key ) => {
+		const definition = getBlockType( block.name )?.attributes[ key ];
+		const value = block.attributes[ key ];
+
+		return isUnmodifiedAttribute( definition, value );
+	} );
+}
+
 /**
  * Function that checks if the parameter is a valid icon.
  *
@@ -332,7 +373,7 @@ 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 [];
@@ -341,12 +382,34 @@ export function __experimentalGetBlockAttributesNamesByRole( name, role ) {
 	if ( ! role ) {
 		return attributesNames;
 	}
-	return attributesNames.filter(
-		( attributeName ) =>
-			attributes[ attributeName ]?.__experimentalRole === role
-	);
+
+	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 );
+};
+
 /**
  * Return a new object with the specified keys omitted.
  *
diff --git a/packages/blocks/src/store/private-actions.js b/packages/blocks/src/store/private-actions.js
index 6f7581da53de3..02f8506b3c3bf 100644
--- a/packages/blocks/src/store/private-actions.js
+++ b/packages/blocks/src/store/private-actions.js
@@ -51,10 +51,11 @@ export function addBlockBindingsSource( source ) {
 		type: 'ADD_BLOCK_BINDINGS_SOURCE',
 		name: source.name,
 		label: source.label,
+		usesContext: source.usesContext,
 		getValues: source.getValues,
 		setValues: source.setValues,
-		getPlaceholder: source.getPlaceholder,
 		canUserEditValue: source.canUserEditValue,
+		getFieldsList: source.getFieldsList,
 	};
 }
 
diff --git a/packages/blocks/src/store/private-selectors.js b/packages/blocks/src/store/private-selectors.js
index 4cded8268ae97..d5665323859e4 100644
--- a/packages/blocks/src/store/private-selectors.js
+++ b/packages/blocks/src/store/private-selectors.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { createSelector } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -209,3 +210,36 @@ export function getAllBlockBindingsSources( state ) {
 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/reducer.js b/packages/blocks/src/store/reducer.js
index 5cffb0abc9197..7c7fb4763a1cb 100644
--- a/packages/blocks/src/store/reducer.js
+++ b/packages/blocks/src/store/reducer.js
@@ -328,7 +328,12 @@ 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 ||
@@ -371,26 +376,61 @@ 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 ]: {
 					// Don't override the label if it's already set.
 					label: state[ action.name ]?.label || action.label,
+					usesContext: getMergedUsesContext(
+						state[ action.name ]?.usesContext,
+						action.usesContext
+					),
 					getValues: action.getValues,
 					setValues: action.setValues,
-					getPlaceholder: action.getPlaceholder,
-					canUserEditValue: action.canUserEditValue,
+					// Only set `canUserEditValue` if `setValues` is also defined.
+					canUserEditValue:
+						action.setValues && action.canUserEditValue,
+					getFieldsList,
 				},
 			};
 		case 'ADD_BOOTSTRAPPED_BLOCK_BINDINGS_SOURCE':
 			return {
 				...state,
 				[ action.name ]: {
+					/*
+					 * Keep the exisitng properties in case the source has been registered
+					 * in the client before bootstrapping.
+					 */
+					...state[ action.name ],
 					label: action.label,
-					usesContext: action.usesContext,
+					usesContext: getMergedUsesContext(
+						state[ action.name ]?.usesContext,
+						action.usesContext
+					),
 				},
 			};
 		case 'REMOVE_BLOCK_BINDINGS_SOURCE':
diff --git a/packages/blocks/src/store/selectors.js b/packages/blocks/src/store/selectors.js
index e97048e92b0c0..79e88073ba20d 100644
--- a/packages/blocks/src/store/selectors.js
+++ b/packages/blocks/src/store/selectors.js
@@ -8,11 +8,13 @@ import removeAccents from 'remove-accents';
  */
 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 */
@@ -822,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/reducer.js b/packages/blocks/src/store/test/reducer.js
index babaaad4e0e0d..1a295f1efc30d 100644
--- a/packages/blocks/src/store/test/reducer.js
+++ b/packages/blocks/src/store/test/reducer.js
@@ -420,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/browserslist-config/CHANGELOG.md b/packages/browserslist-config/CHANGELOG.md
index 39283b8e3aa38..9dae2564c1a32 100644
--- a/packages/browserslist-config/CHANGELOG.md
+++ b/packages/browserslist-config/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/browserslist-config/package.json b/packages/browserslist-config/package.json
index d5365f24c58b4..0c4d314203483 100644
--- a/packages/browserslist-config/package.json
+++ b/packages/browserslist-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/browserslist-config",
-	"version": "6.3.0",
+	"version": "6.9.0",
 	"description": "WordPress Browserslist shared configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/commands/CHANGELOG.md b/packages/commands/CHANGELOG.md
index 0225c5b369749..2b268bd66f404 100644
--- a/packages/commands/CHANGELOG.md
+++ b/packages/commands/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/commands/package.json b/packages/commands/package.json
index c6e47a15f57c7..6fd5fdf9971e4 100644
--- a/packages/commands/package.json
+++ b/packages/commands/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/commands",
-	"version": "1.3.0",
+	"version": "1.9.0",
 	"description": "Handles the commands menu.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/commands/src/components/command-menu.js b/packages/commands/src/components/command-menu.js
index ac305246fefb7..55f78ac02c655 100644
--- a/packages/commands/src/components/command-menu.js
+++ b/packages/commands/src/components/command-menu.js
@@ -79,11 +79,11 @@ export function CommandMenuLoaderWrapper( { hook, search, setLoader, close } ) {
 	// 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 currentLoader = useRef( hook );
+	const currentLoaderRef = useRef( hook );
 	const [ key, setKey ] = useState( 0 );
 	useEffect( () => {
-		if ( currentLoader.current !== hook ) {
-			currentLoader.current = hook;
+		if ( currentLoaderRef.current !== hook ) {
+			currentLoaderRef.current = hook;
 			setKey( ( prevKey ) => prevKey + 1 );
 		}
 	}, [ hook ] );
@@ -91,7 +91,7 @@ export function CommandMenuLoaderWrapper( { hook, search, setLoader, close } ) {
 	return (
 		<CommandMenuLoader
 			key={ key }
-			hook={ currentLoader.current }
+			hook={ currentLoaderRef.current }
 			search={ search }
 			setLoader={ setLoader }
 			close={ close }
diff --git a/packages/commands/src/components/style.scss b/packages/commands/src/components/style.scss
index ff6bf1090b0dc..bcf3d17d7baa6 100644
--- a/packages/commands/src/components/style.scss
+++ b/packages/commands/src/components/style.scss
@@ -30,10 +30,10 @@
 	.components-button {
 		height: $grid-unit-70;
 		width: $grid-unit-70;
-		border: 1px solid $gray-600;
+		border: $border-width solid $gray-600;
 		border-right: 0;
 		justify-content: center;
-		border-radius: $radius-block-ui 0 0 $radius-block-ui;
+		border-radius: $radius-small 0 0 $radius-small;
 
 		& + [cmdk-input] {
 			border-top-left-radius: 0;
@@ -68,7 +68,7 @@
 	}
 
 	[cmdk-item] {
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		cursor: pointer;
 		display: flex;
 		align-items: center;
diff --git a/packages/commands/src/hooks/use-command.js b/packages/commands/src/hooks/use-command.js
index 416ffbd7f73c6..32ff6336a7d46 100644
--- a/packages/commands/src/hooks/use-command.js
+++ b/packages/commands/src/hooks/use-command.js
@@ -32,9 +32,9 @@ import { store as commandsStore } from '../store';
  */
 export default function useCommand( command ) {
 	const { registerCommand, unregisterCommand } = useDispatch( commandsStore );
-	const currentCallback = useRef( command.callback );
+	const currentCallbackRef = useRef( command.callback );
 	useEffect( () => {
-		currentCallback.current = command.callback;
+		currentCallbackRef.current = command.callback;
 	}, [ command.callback ] );
 
 	useEffect( () => {
@@ -47,7 +47,7 @@ export default function useCommand( command ) {
 			label: command.label,
 			searchLabel: command.searchLabel,
 			icon: command.icon,
-			callback: ( ...args ) => currentCallback.current( ...args ),
+			callback: ( ...args ) => currentCallbackRef.current( ...args ),
 		} );
 		return () => {
 			unregisterCommand( command.name );
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index ec1736e3adafa..f7f22160c2187 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,14 +2,289 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   `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)).
+
+## 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)).
+
+### 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
 
@@ -18,6 +293,10 @@
 -   `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
 
@@ -27,6 +306,8 @@
 -   `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
 
@@ -61,7 +342,7 @@
 
 ### Internal
 
--   `Allow ariakit and framer motion imports in the components package. ([#63123](https://github.com/WordPress/gutenberg/pull/63123))
+-   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))
diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
index f1245da7a409c..8af8bbf801edf 100644
--- a/packages/components/CONTRIBUTING.md
+++ b/packages/components/CONTRIBUTING.md
@@ -6,20 +6,20 @@ The following is a set of guidelines for contributing to the `@wordpress/compone
 
 This set of guidelines should apply especially to newly introduced components. In fact, while these guidelines should also be retroactively applied to existing components, it is sometimes impossible to do so for legacy/compatibility reasons.
 
-For an example of a component that follows these requirements, take a look at [`ItemGroup`](/packages/components/src/item-group).
-- [Introducing new components](#introducing-new-components)
-- [Compatibility](#compatibility)
-- [Compound components](#compound-components)
-- [Components & Hooks](#components--hooks)
-- [TypeScript](#typescript)
-- [Styling](#styling)
-- [Context system](#context-system)
-- [Unit tests](#unit-tests)
-- [Storybook](#storybook)
-- [Documentation](#documentation)
-- [README example](#README-example)
-- [Folder structure](#folder-structure)
-- [Component versioning](#component-versioning)
+-   [Introducing new components](#introducing-new-components)
+-   [Compatibility](#compatibility)
+-   [Compound components](#compound-components)
+-   [Components & Hooks](#components--hooks)
+-   [Naming Conventions](#naming-conventions)
+-   [TypeScript](#typescript)
+-   [Styling](#styling)
+-   [Context system](#context-system)
+-   [Unit tests](#unit-tests)
+-   [Storybook](#storybook)
+-   [Documentation](#documentation)
+-   [README example](#README-example)
+-   [Folder structure](#folder-structure)
+-   [Component versioning](#component-versioning)
 
 ## Introducing new components
 
@@ -95,13 +95,13 @@ In these situations, one possible approach is to "soft-deprecate" a given legacy
 2. Updating all places in Gutenberg that use that API.
 3. Adding deprecation warnings (only after the previous point is completed, otherwise the Browser Console will be polluted by all those warnings and some e2e tests may fail).
 
-When adding new components or new props to existing components, it's recommended to prefix them with `__unstable` or `__experimental` until they're stable enough to be exposed as part of the public API.
+When adding new components or new props to existing components, it's recommended to create a [private version](/packages/private-apis/README.md)) of the component until the changes are stable enough to be exposed as part of the public API.
 
 ### Learn more
 
-- [How to preserve backward compatibility for a React Component](/docs/contributors/code/backward-compatibility.md#how-to-preserve-backward-compatibility-for-a-react-component)
-- [Experimental and Unstable APIs](/docs/contributors/code/coding-guidelines.md#experimental-and-unstable-apis)
-- [Deprecating styles](#deprecating-styles)
+-   [How to preserve backward compatibility for a React Component](/docs/contributors/code/backward-compatibility.md#how-to-preserve-backward-compatibility-for-a-react-component)
+-   [Experimental and Unstable APIs](/docs/contributors/code/coding-guidelines.md#legacy-experimental-apis-plugin-only-apis-and-private-apis)
+-   [Deprecating styles](#deprecating-styles)
 
 <!-- ## Polymorphic Components (i.e. the `as` prop)
 
@@ -121,20 +121,16 @@ When creating components that render a list of subcomponents, prefer to expose t
 ```jsx
 // ❌ Don't:
 <List
-	items={ [
-		{ value: 'Item 1' },
-		{ value: 'Item 2' },
-		{ value: 'Item 3' },
-	] }
+	items={ [ { value: 'Item 1' }, { value: 'Item 2' }, { value: 'Item 3' } ] }
 />
 ```
 
 ```jsx
 // ✅ Do:
 <List>
-	<ListItem value="Item 1" />
-	<ListItem value="Item 2" />
-	<ListItem value="Item 3" />
+	<List.Item value="Item 1" />
+	<List.Item value="Item 2" />
+	<List.Item value="Item 3" />
 </List>
 ```
 
@@ -185,25 +181,25 @@ One way to enable reusability and composition is to extract a component's underl
 
 ```tsx
 // in `hook.ts`
-function useExampleComponent( props: PolymorphicComponentProps< ExampleProps, 'div' > ) {
+function useExampleComponent(
+	props: PolymorphicComponentProps< ExampleProps, 'div' >
+) {
 	// Merge received props with the context system.
-	const { isVisible, className, ...otherProps } = useContextSystem( props, 'Example' );
+	const { isVisible, className, ...otherProps } = useContextSystem(
+		props,
+		'Example'
+	);
 
 	// Any other reusable rendering logic (e.g. computing className, state, event listeners...)
 	const cx = useCx();
 	const classes = useMemo(
-		() =>
-			cx(
-				styles.example,
-				isVisible && styles.visible,
-				className
-			),
+		() => cx( styles.example, isVisible && styles.visible, className ),
 		[ className, isVisible ]
 	);
 
 	return {
 		...otherProps,
-		className: classes
+		className: classes,
 	};
 }
 
@@ -220,8 +216,8 @@ function Example(
 
 A couple of good examples of how hooks are used for composition are:
 
-- the `Card` component, which builds on top of the `Surface` component by [calling the `useSurface` hook inside its own hook](/packages/components/src/card/card/hook.ts);
-- the `HStack` component, which builds on top of the `Flex` component and [calls the `useFlex` hook inside its own hook](/packages/components/src/h-stack/hook.tsx).
+-   the `Card` component, which builds on top of the `Surface` component by [calling the `useSurface` hook inside its own hook](/packages/components/src/card/card/hook.ts);
+-   the `HStack` component, which builds on top of the `Flex` component and [calls the `useFlex` hook inside its own hook](/packages/components/src/h-stack/hook.tsx).
 
 <!-- ## API Consinstency
 
@@ -236,6 +232,118 @@ A couple of good examples of how hooks are used for composition are:
 
 TDB -->
 
+## Naming Conventions
+
+It is recommended that compound components use dot notation to separate the namespace from the individual component names. The top-level compound component should be called the namespace (no dot notation).
+
+Dedicated React context should also use dot notation, while hooks should not.
+
+When exporting compound components and preparing them to be consumed, it is important that:
+
+-   the JSDocs appear correctly in IntelliSense;
+-   the top-level component's JSDoc appears in the Storybook docs page;
+-   the top-level and subcomponent's prop types appear correctly in the Storybook props table.
+
+To meet the above requirements, we recommend:
+
+-   using `Object.assign()` to add subcomponents as properties of the top-level component;
+-   using named functions for all components;
+-   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.
+
+The following example implements all of the above recommendations.
+
+```tsx
+//=======================
+// subcomponent.tsx
+//=======================
+import { forwardRef } from '@wordpress/element';
+
+export const ComponentSubcomponent = forwardRef(
+	function UnforwardedComponentSubcomponent( props, ref ) {
+		/* ... */
+	}
+);
+
+//=======================
+// 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'
+		}),
+	}
+);
+
+export default Component;
+
+//=======================
+// App.tsx
+//=======================
+import { Component, useComponent } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+function CompoundComponentExample() {
+	return (
+		<Component>
+			<Component.SubComponent />
+		</Component>
+	);
+}
+
+function ContextProviderExample() {
+	return (
+		<Component.Context.Provider value={ /* ... */ }>
+			{ /* React tree */ }
+		</Component.Context.Provider>
+	);
+}
+
+function ContextConsumerExample() {
+	const componentContext = useContext( Component.Context );
+
+	// etc
+}
+
+function HookExample() {
+	const hookReturnValue = useComponent();
+
+	// etc.
+}
+```
+
 ## TypeScript
 
 We strongly encourage using TypeScript for all new components.
@@ -278,8 +386,10 @@ function UnconnectedMyComponent(
 	//   parameter (`div` in this example)
 	// - the special `as` prop (which marks the component as polymorphic),
 	//   unless the third parameter is `false`
-	props:  WordPressComponentProps< ComponentOwnProps, 'div', true >
-) { /* ... */ }
+	props: WordPressComponentProps< ComponentOwnProps, 'div', true >
+) {
+	/* ... */
+}
 ```
 
 ### Considerations for the docgen
@@ -287,10 +397,15 @@ function UnconnectedMyComponent(
 Make sure you have a **named** export for the component, not just the default export ([example](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/divider/component.tsx)). This ensures that the docgen can properly extract the types data. The naming should be so that the connected/forwarded component has the plain component name (`MyComponent`), and the raw component is prefixed (`UnconnectedMyComponent` or `UnforwardedMyComponent`). This makes the component's `displayName` look nicer in React devtools and in the autogenerated Storybook code snippets.
 
 ```js
-function UnconnectedMyComponent() { /* ... */ }
+function UnconnectedMyComponent() {
+	/* ... */
+}
 
 // 👇 Without this named export, the docgen will not work!
-export const MyComponent = contextConnect( UnconnectedMyComponent, 'MyComponent' );
+export const MyComponent = contextConnect(
+	UnconnectedMyComponent,
+	'MyComponent'
+);
 export default MyComponent;
 ```
 
@@ -314,16 +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 } />;
 }
 ```
 
@@ -331,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;
@@ -342,7 +456,7 @@ const deprecatedMargins = ({ __nextHasNoOuterMargins }) => {
 export const Wrapper = styled.div`
 	margin: 0;
 
-	${deprecatedMargins}
+	${ deprecatedMargins }
 `;
 ```
 
@@ -358,14 +472,14 @@ Not all style changes justify a formal deprecation process. The main thing to lo
 
 ##### DOES need formal deprecation
 
-- Removing an outer margin.
-- Substantial changes to width/height, such as adding or removing a size restriction.
+-   Removing an outer margin.
+-   Substantial changes to width/height, such as adding or removing a size restriction.
 
 ##### DOES NOT need formal deprecation
 
-- Breakage only occurs in non-standard usage, such as when the consumer is overriding component internals.
-- Minor layout shifts of a few pixels.
-- Internal layout changes of a higher-level component.
+-   Breakage only occurs in non-standard usage, such as when the consumer is overriding component internals.
+-   Minor layout shifts of a few pixels.
+-   Internal layout changes of a higher-level component.
 
 ## Context system
 
@@ -373,9 +487,9 @@ The `@wordpress/components` context system is based on [React's `Context` API](h
 
 Components can use this system via a couple of functions:
 
-- they can provide values using a shared `ContextSystemProvider` component
-- they can connect to the Context via `contextConnect`
-- they can read the "computed" values from the context via `useContextSystem`
+-   they can provide values using a shared `ContextSystemProvider` component
+-   they can connect to the Context via `contextConnect`
+-   they can read the "computed" values from the context via `useContextSystem`
 
 An example of how this is used can be found in the [`Card` component family](/packages/components/src/card). For example, this is how the `Card` component injects the `size` and `isBorderless` props down to its `CardBody` subcomponent — which makes it use the correct spacing and border settings "auto-magically".
 
@@ -400,11 +514,7 @@ export function useCard( props ) {
 import { contextConnect, ContextSystemProvider } from '../../context';
 
 function Card( props, forwardedRef ) {
-	const {
-		size,
-		isBorderless,
-		...otherComputedHookProps
-	} = useCard( props );
+	const { size, isBorderless, ...otherComputedHookProps } = useCard( props );
 
 	// [...]
 
@@ -441,7 +551,10 @@ export function useCardBody( props ) {
 	// If a `CardBody` component is rendered as a child of a `Card` component, the value of
 	// the `size` prop will be the one set by the parent `Card` component via the Context
 	// System (unless the prop gets explicitely set on the `CardBody` component).
-	const { size = 'medium', ...otherDerivedProps } = useContextSystem( props, 'CardBody' );
+	const { size = 'medium', ...otherDerivedProps } = useContextSystem(
+		props,
+		'CardBody'
+	);
 
 	// [...]
 
@@ -457,7 +570,7 @@ Please refer to the [JavaScript Testing Overview docs](/docs/contributors/code/t
 
 All new components should add stories to the project's [Storybook](https://storybook.js.org/). Each [story](https://storybook.js.org/docs/react/get-started/whats-a-story) captures the rendered state of a UI component in isolation. This greatly simplifies working on a given component, while also serving as an interactive form of documentation.
 
-A component's story should be showcasing its different states — for example, the different variants of a  `Button`:
+A component's story should be showcasing its different states — for example, the different variants of a `Button`:
 
 ```jsx
 import Button from '../';
@@ -543,6 +656,7 @@ Prop description. With a new line before and after the description and before an
 Add this section when there are props that are drilled down into an internal component. See [ClipboardButton](/packages/components/src/clipboard-button/README.md) for an example.
 
 <!-- Only add the next section if the component relies on the [Context System](#context-system) -->
+
 ## Context
 
 See examples for this section for the [ItemGroup](/packages/components/src/item-group/item-group/README.md#context) and [`Card`](/packages/components/src/card/card/README.md#context) components.
@@ -601,8 +715,8 @@ As the needs of the package evolve with time, sometimes we may opt to fully rewr
 
 Here is some terminology that will be used in the upcoming sections:
 
-- "Legacy" component: the version(s) of the component that existsted on `trunk` before the rewrite;
-- API surface: the component's public APIs. It includes the list of components (and sub-components) exported from the package, their props, any associated React context. It does not include internal classnames and internal DOM structure of the components.
+-   "Legacy" component: the version(s) of the component that existsted on `trunk` before the rewrite;
+-   API surface: the component's public APIs. It includes the list of components (and subcomponents) exported from the package, their props, any associated React context. It does not include internal classnames and internal DOM structure of the components.
 
 ### Approaches
 
diff --git a/packages/components/package.json b/packages/components/package.json
index 626b80d6ff7ac..0a2b7b0d0431b 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "28.3.0",
+	"version": "28.9.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,7 +31,7 @@
 	],
 	"types": "build-types",
 	"dependencies": {
-		"@ariakit/react": "^0.3.12",
+		"@ariakit/react": "^0.4.10",
 		"@babel/runtime": "^7.16.0",
 		"@emotion/cache": "^11.7.1",
 		"@emotion/css": "^11.7.1",
@@ -75,7 +75,6 @@
 		"re-resizable": "^6.4.0",
 		"react-colorful": "^5.3.1",
 		"remove-accents": "^0.5.0",
-		"use-lilius": "^2.0.5",
 		"uuid": "^9.0.1"
 	},
 	"peerDependencies": {
diff --git a/packages/components/src/alignment-matrix-control/README.md b/packages/components/src/alignment-matrix-control/README.md
index d087a177d8d41..68ecab6b7adb4 100644
--- a/packages/components/src/alignment-matrix-control/README.md
+++ b/packages/components/src/alignment-matrix-control/README.md
@@ -1,16 +1,12 @@
 # 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>
-
 AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
 
 ## Usage
 
 ```jsx
 import { useState } from 'react';
-import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
+import { AlignmentMatrixControl } from '@wordpress/components';
 
 const Example = () => {
 	const [ alignment, setAlignment ] = useState( 'center center' );
diff --git a/packages/components/src/alignment-matrix-control/cell.tsx b/packages/components/src/alignment-matrix-control/cell.tsx
index 162ca879f1a7e..8a3d1735b5ecf 100644
--- a/packages/components/src/alignment-matrix-control/cell.tsx
+++ b/packages/components/src/alignment-matrix-control/cell.tsx
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { CompositeItem } from '../composite/v2';
+import { Composite } from '../composite';
 import Tooltip from '../tooltip';
 import { VisuallyHidden } from '../visually-hidden';
 
@@ -9,24 +9,18 @@ import { VisuallyHidden } from '../visually-hidden';
  * Internal dependencies
  */
 import { ALIGNMENT_LABEL } from './utils';
-import {
-	Cell as CellView,
-	Point,
-} from './styles/alignment-matrix-control-styles';
+import { Cell as CellView, Point } from './styles';
 import type { AlignmentMatrixControlCellProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
 export default function Cell( {
 	id,
-	isActive = false,
 	value,
 	...props
 }: WordPressComponentProps< AlignmentMatrixControlCellProps, 'span', false > ) {
-	const tooltipText = ALIGNMENT_LABEL[ value ];
-
 	return (
-		<Tooltip text={ tooltipText }>
-			<CompositeItem
+		<Tooltip text={ ALIGNMENT_LABEL[ value ] }>
+			<Composite.Item
 				id={ id }
 				render={ <CellView { ...props } role="gridcell" /> }
 			>
@@ -34,8 +28,8 @@ export default function 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>
+				<Point role="presentation" />
+			</Composite.Item>
 		</Tooltip>
 	);
 }
diff --git a/packages/components/src/alignment-matrix-control/icon.tsx b/packages/components/src/alignment-matrix-control/icon.tsx
index bacc9771cf3e4..24cf54c021493 100644
--- a/packages/components/src/alignment-matrix-control/icon.tsx
+++ b/packages/components/src/alignment-matrix-control/icon.tsx
@@ -3,59 +3,77 @@
  */
 import clsx from 'clsx';
 
+/**
+ * WordPress dependencies
+ */
+import { Rect, SVG } from '@wordpress/primitives';
+
 /**
  * Internal dependencies
  */
 import { ALIGNMENTS, getAlignmentIndex } from './utils';
-import {
-	Root,
-	Cell,
-	Point,
-} from './styles/alignment-matrix-control-icon-styles';
 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 = BASE_SIZE,
+	size,
+	width,
+	height,
 	style = {},
 	value = 'center',
 	...props
-}: WordPressComponentProps< AlignmentMatrixControlIconProps, 'div', false > ) {
-	const alignIndex = getAlignmentIndex( value );
-	const scale = ( size / BASE_SIZE ).toFixed( 2 );
-
-	const classes = clsx(
-		'component-alignment-matrix-control-icon',
-		className
-	);
-
-	const styles = {
-		...style,
-		transform: `scale(${ scale })`,
-	};
-
+}: WordPressComponentProps< AlignmentMatrixControlIconProps, 'svg', false > ) {
 	return (
-		<Root
-			{ ...props }
-			className={ classes }
-			disablePointerEvents={ disablePointerEvents }
+		<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"
-			style={ styles }
+			className={ clsx(
+				'component-alignment-matrix-control-icon',
+				className
+			) }
+			style={ {
+				pointerEvents: disablePointerEvents ? 'none' : undefined,
+				...style,
+			} }
+			{ ...props }
 		>
 			{ ALIGNMENTS.map( ( align, index ) => {
-				const isActive = alignIndex === index;
+				const dotSize =
+					getAlignmentIndex( value ) === index
+						? DOT_SIZE_SELECTED
+						: DOT_SIZE;
 
 				return (
-					<Cell key={ align }>
-						<Point isActive={ isActive } />
-					</Cell>
+					<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"
+					/>
 				);
 			} ) }
-		</Root>
+		</SVG>
 	);
 }
 
diff --git a/packages/components/src/alignment-matrix-control/index.tsx b/packages/components/src/alignment-matrix-control/index.tsx
index eaec8a285b0c5..0e3c23623883f 100644
--- a/packages/components/src/alignment-matrix-control/index.tsx
+++ b/packages/components/src/alignment-matrix-control/index.tsx
@@ -8,39 +8,20 @@ import clsx from 'clsx';
  */
 import { __, isRTL } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Cell from './cell';
-import { Composite, CompositeRow, useCompositeStore } from '../composite/v2';
-import { Root, Row } from './styles/alignment-matrix-control-styles';
+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';
 
-/**
- *
- * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
- *
- * ```jsx
- * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const Example = () => {
- * 	const [ alignment, setAlignment ] = useState( 'center center' );
- *
- * 	return (
- * 		<AlignmentMatrixControl
- * 			value={ alignment }
- * 			onChange={ setAlignment }
- * 		/>
- * 	);
- * };
- * ```
- */
-export function AlignmentMatrixControl( {
+function UnforwardedAlignmentMatrixControl( {
 	className,
 	id,
 	label = __( 'Alignment Matrix Control' ),
@@ -51,32 +32,33 @@ export function AlignmentMatrixControl( {
 	...props
 }: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {
 	const baseId = useInstanceId(
-		AlignmentMatrixControl,
+		UnforwardedAlignmentMatrixControl,
 		'alignment-matrix-control',
 		id
 	);
 
-	const compositeStore = useCompositeStore( {
-		defaultActiveId: getItemId( baseId, defaultValue ),
-		activeId: getItemId( baseId, value ),
-		setActiveId: ( nextActiveId ) => {
+	const setActiveId = useCallback<
+		NonNullable< React.ComponentProps< typeof Composite >[ 'setActiveId' ] >
+	>(
+		( nextActiveId ) => {
 			const nextValue = getItemValue( baseId, nextActiveId );
 			if ( nextValue ) {
 				onChange?.( nextValue );
 			}
 		},
-		rtl: isRTL(),
-	} );
-
-	const activeId = compositeStore.useState( 'activeId' );
+		[ baseId, onChange ]
+	);
 
 	const classes = clsx( 'component-alignment-matrix-control', className );
 
 	return (
 		<Composite
-			store={ compositeStore }
+			defaultActiveId={ getItemId( baseId, defaultValue ) }
+			activeId={ getItemId( baseId, value ) }
+			setActiveId={ setActiveId }
+			rtl={ isRTL() }
 			render={
-				<Root
+				<GridContainer
 					{ ...props }
 					aria-label={ label }
 					className={ classes }
@@ -87,26 +69,55 @@ export function AlignmentMatrixControl( {
 			}
 		>
 			{ GRID.map( ( cells, index ) => (
-				<CompositeRow render={ <Row role="row" /> } key={ index }>
-					{ cells.map( ( cell ) => {
-						const cellId = getItemId( baseId, cell );
-						const isActive = cellId === activeId;
-
-						return (
-							<Cell
-								id={ cellId }
-								isActive={ isActive }
-								key={ cell }
-								value={ cell }
-							/>
-						);
-					} ) }
-				</CompositeRow>
+				<Composite.Row render={ <GridRow role="row" /> } key={ index }>
+					{ cells.map( ( cell ) => (
+						<Cell
+							id={ getItemId( baseId, cell ) }
+							key={ cell }
+							value={ cell }
+						/>
+					) ) }
+				</Composite.Row>
 			) ) }
 		</Composite>
 	);
 }
 
-AlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;
+/**
+ * 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.story.tsx b/packages/components/src/alignment-matrix-control/stories/index.story.tsx
index 03bec9d92a8b7..433d7540197da 100644
--- a/packages/components/src/alignment-matrix-control/stories/index.story.tsx
+++ b/packages/components/src/alignment-matrix-control/stories/index.story.tsx
@@ -17,7 +17,7 @@ import { HStack } from '../../h-stack';
 import type { AlignmentMatrixControlProps } from '../types';
 
 const meta: Meta< typeof AlignmentMatrixControl > = {
-	title: 'Components (Experimental)/AlignmentMatrixControl',
+	title: 'Components/AlignmentMatrixControl',
 	component: AlignmentMatrixControl,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
@@ -59,18 +59,9 @@ export const Default = Template.bind( {} );
 export const IconSubcomponent = () => {
 	return (
 		<HStack justify="flex-start">
+			<Icon icon={ <AlignmentMatrixControl.Icon value="top left" /> } />
 			<Icon
-				icon={
-					<AlignmentMatrixControl.Icon size={ 24 } value="top left" />
-				}
-			/>
-			<Icon
-				icon={
-					<AlignmentMatrixControl.Icon
-						size={ 24 }
-						value="center center"
-					/>
-				}
+				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 0000000000000..73a20c2a37564
--- /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.ts b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.ts
deleted file mode 100644
index a14894633e05d..0000000000000
--- a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.ts
+++ /dev/null
@@ -1,77 +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';
-import type {
-	AlignmentMatrixControlIconProps,
-	AlignmentMatrixControlCellProps,
-} from '../types';
-
-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,
-}: Pick< AlignmentMatrixControlIconProps, 'disablePointerEvents' > ) => {
-	return css( {
-		pointerEvents: disablePointerEvents ? 'none' : undefined,
-	} );
-};
-
-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,
-}: Pick< AlignmentMatrixControlCellProps, '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.ts b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts
deleted file mode 100644
index bdb015ec64c6a..0000000000000
--- a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { COLORS } from '../../utils';
-import type {
-	AlignmentMatrixControlProps,
-	AlignmentMatrixControlCellProps,
-} from '../types';
-
-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< {
-	size: AlignmentMatrixControlProps[ 'width' ];
-} >`
-	${ 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,
-}: Pick< AlignmentMatrixControlCellProps, '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.theme.accent;
-
-	return css`
-		box-shadow: ${ boxShadow };
-		color: ${ pointColor };
-
-		*:hover > & {
-			color: ${ pointColorHover };
-		}
-	`;
-};
-
-export const pointBase = (
-	props: Pick< AlignmentMatrixControlCellProps, 'isActive' >
-) => {
-	return css`
-		background: currentColor;
-		box-sizing: border-box;
-		display: grid;
-		margin: auto;
-		@media not ( prefers-reduced-motion ) {
-			transition: all 120ms linear;
-		}
-
-		${ 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.tsx b/packages/components/src/alignment-matrix-control/test/index.tsx
index 57c13f8c92eee..a820b69b26c8f 100644
--- a/packages/components/src/alignment-matrix-control/test/index.tsx
+++ b/packages/components/src/alignment-matrix-control/test/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor, within } from '@testing-library/react';
-import { press, click, sleep } from '@ariakit/test';
+import { press, click } from '@ariakit/test';
 
 /**
  * Internal dependencies
@@ -39,7 +39,6 @@ describe( 'AlignmentMatrixControl', () => {
 		it( 'should be centered by default', async () => {
 			await renderAndInitCompositeStore( <AlignmentMatrixControl /> );
 
-			await sleep();
 			await press.Tab();
 
 			expect( getCell( 'center center' ) ).toHaveFocus();
@@ -110,7 +109,6 @@ describe( 'AlignmentMatrixControl', () => {
 						<AlignmentMatrixControl onChange={ spy } />
 					);
 
-					await sleep();
 					await press.Tab();
 					await press[ keyRef ]();
 
diff --git a/packages/components/src/alignment-matrix-control/types.ts b/packages/components/src/alignment-matrix-control/types.ts
index 892781234e694..0f97c2df3b02b 100644
--- a/packages/components/src/alignment-matrix-control/types.ts
+++ b/packages/components/src/alignment-matrix-control/types.ts
@@ -44,11 +44,22 @@ 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.
+	 * @ignore
+	 * @default 24
+	 */
 	size?: number;
 };
 
 export type AlignmentMatrixControlCellProps = {
-	isActive?: boolean;
 	value: NonNullable< AlignmentMatrixControlProps[ 'value' ] >;
 };
diff --git a/packages/components/src/angle-picker-control/angle-circle.tsx b/packages/components/src/angle-picker-control/angle-circle.tsx
index 8558b23279302..52a2d2838a1f2 100644
--- a/packages/components/src/angle-picker-control/angle-circle.tsx
+++ b/packages/components/src/angle-picker-control/angle-circle.tsx
@@ -28,8 +28,10 @@ function AngleCircle( {
 	...props
 }: WordPressComponentProps< AngleCircleProps, 'div' > ) {
 	const angleCircleRef = useRef< HTMLDivElement | null >( null );
-	const angleCircleCenter = useRef< { x: number; y: number } | undefined >();
-	const previousCursorValue = useRef< CSSStyleDeclaration[ 'cursor' ] >();
+	const angleCircleCenterRef = useRef<
+		{ x: number; y: number } | undefined
+	>();
+	const previousCursorValueRef = useRef< CSSStyleDeclaration[ 'cursor' ] >();
 
 	const setAngleCircleCenter = () => {
 		if ( angleCircleRef.current === null ) {
@@ -37,7 +39,7 @@ function AngleCircle( {
 		}
 
 		const rect = angleCircleRef.current.getBoundingClientRect();
-		angleCircleCenter.current = {
+		angleCircleCenterRef.current = {
 			x: rect.x + rect.width / 2,
 			y: rect.y + rect.height / 2,
 		};
@@ -55,10 +57,10 @@ function AngleCircle( {
 		( event.target as HTMLDivElement | null )?.focus();
 
 		if (
-			angleCircleCenter.current !== undefined &&
+			angleCircleCenterRef.current !== undefined &&
 			onChange !== undefined
 		) {
-			const { x: centerX, y: centerY } = angleCircleCenter.current;
+			const { x: centerX, y: centerY } = angleCircleCenterRef.current;
 			onChange(
 				getAngle( centerX, centerY, event.clientX, event.clientY )
 			);
@@ -76,13 +78,13 @@ function AngleCircle( {
 
 	useEffect( () => {
 		if ( isDragging ) {
-			if ( previousCursorValue.current === undefined ) {
-				previousCursorValue.current = document.body.style.cursor;
+			if ( previousCursorValueRef.current === undefined ) {
+				previousCursorValueRef.current = document.body.style.cursor;
 			}
 			document.body.style.cursor = 'grabbing';
 		} else {
-			document.body.style.cursor = previousCursorValue.current || '';
-			previousCursorValue.current = undefined;
+			document.body.style.cursor = previousCursorValueRef.current || '';
+			previousCursorValueRef.current = undefined;
 		}
 	}, [ isDragging ] );
 
diff --git a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
index 0141bd860d7df..f57d60db0744b 100644
--- a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
+++ b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
@@ -15,7 +15,7 @@ const CIRCLE_SIZE = 32;
 const INNER_CIRCLE_SIZE = 6;
 
 export const CircleRoot = styled.div`
-	border-radius: 50%;
+	border-radius: ${ CONFIG.radiusRound };
 	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
 	box-sizing: border-box;
 	cursor: grab;
@@ -41,7 +41,7 @@ export const CircleIndicatorWrapper = styled.div`
 
 export const CircleIndicator = styled.div`
 	background: ${ COLORS.theme.accent };
-	border-radius: 50%;
+	border-radius: ${ CONFIG.radiusRound };
 	box-sizing: border-box;
 	display: block;
 	left: 50%;
diff --git a/packages/components/src/autocomplete/autocompleter-ui.tsx b/packages/components/src/autocomplete/autocompleter-ui.tsx
index 1a5aacf1438ab..c6c1b94deb577 100644
--- a/packages/components/src/autocomplete/autocompleter-ui.tsx
+++ b/packages/components/src/autocomplete/autocompleter-ui.tsx
@@ -64,9 +64,11 @@ function ListBox( {
 						'components-autocomplete__result',
 						className,
 						{
+							// Unused, for backwards compatibility.
 							'is-selected': index === selectedIndex,
 						}
 					) }
+					variant={ index === selectedIndex ? 'primary' : undefined }
 					onClick={ () => onSelect( option ) }
 				>
 					{ option.label }
diff --git a/packages/components/src/autocomplete/index.tsx b/packages/components/src/autocomplete/index.tsx
index ef0fefe199c2e..ad930d3affdd1 100644
--- a/packages/components/src/autocomplete/index.tsx
+++ b/packages/components/src/autocomplete/index.tsx
@@ -72,6 +72,9 @@ const getNodeText = ( node: React.ReactNode ): string => {
 
 const EMPTY_FILTERED_OPTIONS: KeyedOption[] = [];
 
+// Used for generating the instance ID
+const AUTOCOMPLETE_HOOK_REFERENCE = {};
+
 export function useAutocomplete( {
 	record,
 	onChange,
@@ -79,7 +82,7 @@ export function useAutocomplete( {
 	completers,
 	contentRef,
 }: UseAutocompleteProps ) {
-	const instanceId = useInstanceId( useAutocomplete );
+	const instanceId = useInstanceId( AUTOCOMPLETE_HOOK_REFERENCE );
 	const [ selectedIndex, setSelectedIndex ] = useState( 0 );
 
 	const [ filteredOptions, setFilteredOptions ] = useState<
diff --git a/packages/components/src/autocomplete/style.scss b/packages/components/src/autocomplete/style.scss
index fdb29fe577f20..75b219210f42e 100644
--- a/packages/components/src/autocomplete/style.scss
+++ b/packages/components/src/autocomplete/style.scss
@@ -13,10 +13,4 @@
 	&:focus:not(:disabled) {
 		@include block-toolbar-button-style__focus();
 	}
-
-	&.is-selected,
-	&:not(:disabled,[aria-disabled="true"]):active {
-		background: $components-color-accent;
-		color: $white;
-	}
 }
diff --git a/packages/components/src/base-control/README.md b/packages/components/src/base-control/README.md
index dc3d8c0e29c8e..d51629de6f725 100644
--- a/packages/components/src/base-control/README.md
+++ b/packages/components/src/base-control/README.md
@@ -15,7 +15,7 @@ const MyCustomTextareaControl = ({ children, ...baseProps }) => (
 	const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
 
 	return (
-		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom={ true }>
+		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
 			<textarea { ...controlProps }>
 			  { children }
 			</textarea>
@@ -92,7 +92,10 @@ It should only be used in cases where the children being rendered inside BaseCon
 import { BaseControl } from '@wordpress/components';
 
 const MyBaseControl = () => (
-	<BaseControl help="This button is already accessibly labeled.">
+	<BaseControl
+		__nextHasNoMarginBottom
+		help="This button is already accessibly labeled."
+	>
 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
 		<Button>Select an author</Button>
 	</BaseControl>
diff --git a/packages/components/src/base-control/index.tsx b/packages/components/src/base-control/index.tsx
index 14ecce1bdd729..423636a92cd5f 100644
--- a/packages/components/src/base-control/index.tsx
+++ b/packages/components/src/base-control/index.tsx
@@ -7,6 +7,7 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { forwardRef } from '@wordpress/element';
 
 /**
@@ -26,34 +27,12 @@ import { contextConnectWithoutRef, useContextSystem } from '../context';
 
 export { useBaseControlProps } from './hooks';
 
-/**
- * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
- *
- * ```jsx
- * import { BaseControl, useBaseControlProps } from '@wordpress/components';
- *
- * // Render a `BaseControl` for a textarea input
- * const MyCustomTextareaControl = ({ children, ...baseProps }) => (
- * 	// `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`
- * 	// and the inner control itself. Namely, it takes care of generating a unique `id`,
- * 	// properly associating it with the `label` and `help` elements.
- * 	const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
- *
- * 	return (
- * 		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom={ true }>
- * 			<textarea { ...controlProps }>
- * 			  { children }
- * 			</textarea>
- * 		</BaseControl>
- * 	);
- * );
- * ```
- */
 const UnconnectedBaseControl = (
 	props: WordPressComponentProps< BaseControlProps, null >
 ) => {
 	const {
 		__nextHasNoMarginBottom = false,
+		__associatedWPComponentName = 'BaseControl',
 		id,
 		label,
 		hideLabelFromVision = false,
@@ -62,6 +41,17 @@ const UnconnectedBaseControl = (
 		children,
 	} = useContextSystem( props, 'BaseControl' );
 
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated(
+			`Bottom margin styles for wp.components.${ __associatedWPComponentName }`,
+			{
+				since: '6.7',
+				version: '7.0',
+				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
+			}
+		);
+	}
+
 	return (
 		<Wrapper className={ className }>
 			<StyledField
@@ -105,23 +95,6 @@ const UnconnectedBaseControl = (
 	);
 };
 
-/**
- * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
- *
- * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
- * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
- * otherwise use if the `label` prop was passed.
- *
- * @example
- * import { BaseControl } from '@wordpress/components';
- *
- * const MyBaseControl = () => (
- * 	<BaseControl help="This button is already accessibly labeled.">
- * 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
- * 		<Button>Select an author</Button>
- * 	</BaseControl>
- * );
- */
 const UnforwardedVisualLabel = (
 	props: WordPressComponentProps< BaseControlVisualLabelProps, 'span' >,
 	ref: ForwardedRef< any >
@@ -141,9 +114,56 @@ const UnforwardedVisualLabel = (
 
 export const VisualLabel = forwardRef( UnforwardedVisualLabel );
 
+/**
+ * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
+ *
+ * ```jsx
+ * import { BaseControl, useBaseControlProps } from '@wordpress/components';
+ *
+ * // Render a `BaseControl` for a textarea input
+ * const MyCustomTextareaControl = ({ children, ...baseProps }) => (
+ * 	// `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`
+ * 	// and the inner control itself. Namely, it takes care of generating a unique `id`,
+ * 	// properly associating it with the `label` and `help` elements.
+ * 	const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
+ *
+ * 	return (
+ * 		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
+ * 			<textarea { ...controlProps }>
+ * 			  { children }
+ * 			</textarea>
+ * 		</BaseControl>
+ * 	);
+ * );
+ * ```
+ */
 export const BaseControl = Object.assign(
 	contextConnectWithoutRef( UnconnectedBaseControl, 'BaseControl' ),
-	{ VisualLabel }
+
+	{
+		/**
+		 * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
+		 *
+		 * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
+		 * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
+		 * otherwise use if the `label` prop was passed.
+		 *
+		 * ```jsx
+		 * import { BaseControl } from '@wordpress/components';
+		 *
+		 * const MyBaseControl = () => (
+		 * 	<BaseControl
+		 * 		__nextHasNoMarginBottom
+		 * 		help="This button is already accessibly labeled."
+		 * 	>
+		 * 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
+		 * 		<Button>Select an author</Button>
+		 * 	</BaseControl>
+		 * );
+		 * ```
+		 */
+		VisualLabel,
+	}
 );
 
 export default BaseControl;
diff --git a/packages/components/src/base-control/styles/base-control-styles.ts b/packages/components/src/base-control/styles/base-control-styles.ts
index 6ddfe10229fdb..d633fcdd7e7a7 100644
--- a/packages/components/src/base-control/styles/base-control-styles.ts
+++ b/packages/components/src/base-control/styles/base-control-styles.ts
@@ -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/types.ts b/packages/components/src/base-control/types.ts
index 07a358d09c14b..e4c838459209c 100644
--- a/packages/components/src/base-control/types.ts
+++ b/packages/components/src/base-control/types.ts
@@ -10,6 +10,13 @@ export type BaseControlProps = {
 	 * @default false
 	 */
 	__nextHasNoMarginBottom?: boolean;
+	/**
+	 * Temporary private prop for showing better deprecation messages,
+	 * e.g. `Some feature from wp.components.${ __associatedWPControl } is deprecated`.
+	 *
+	 * @ignore
+	 */
+	__associatedWPComponentName?: string;
 	/**
 	 * The HTML `id` of the control element (passed in as a child to `BaseControl`) to which labels and help text are being generated.
 	 * This is necessary to accessibly associate the label with that element.
diff --git a/packages/components/src/border-box-control/border-box-control/README.md b/packages/components/src/border-box-control/border-box-control/README.md
index 20352e03c8243..e67a1386103c1 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
 
@@ -28,7 +23,7 @@ show "Mixed" placeholder text.
 
 ```jsx
 import { useState } from 'react';
-import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
+import { BorderBoxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 const colors = [
@@ -76,35 +71,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`
 
@@ -113,7 +108,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`
 
@@ -123,7 +118,7 @@ borders, or `undefined`.
 
 _Note: The will be `undefined` if a user clears all borders._
 
-- Required: Yes
+-   Required: Yes
 
 ### `popoverPlacement`: `string`
 
@@ -133,21 +128,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`
 
@@ -158,6 +153,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 = {
@@ -168,4 +164,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 26967ad7f63dd..1dd3437aa50de 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
@@ -147,22 +147,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 = [
diff --git a/packages/components/src/border-box-control/stories/index.story.tsx b/packages/components/src/border-box-control/stories/index.story.tsx
index 5b5d7f311208c..5341dacab646e 100644
--- a/packages/components/src/border-box-control/stories/index.story.tsx
+++ b/packages/components/src/border-box-control/stories/index.story.tsx
@@ -16,7 +16,7 @@ import Button from '../../button';
 import { BorderBoxControl } from '../';
 
 const meta: Meta< typeof BorderBoxControl > = {
-	title: 'Components (Experimental)/BorderBoxControl',
+	title: 'Components/BorderBoxControl',
 	component: BorderBoxControl,
 	argTypes: {
 		onChange: { action: 'onChange' },
@@ -83,4 +83,5 @@ export const Default = Template.bind( {} );
 Default.args = {
 	colors,
 	label: 'Borders',
+	enableStyle: true,
 };
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 b2951054e624e..0223de66a4c78 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,12 +16,10 @@ 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 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 } from '../../color-palette/types';
@@ -149,7 +146,6 @@ const BorderControlDropdown = (
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,
-		showDropdownHeader,
 		size,
 		__unstablePopoverProps,
 		...otherProps
@@ -197,17 +193,6 @@ const BorderControlDropdown = (
 		<>
 			<DropdownContentWrapper paddingSize="medium">
 				<VStack className={ popoverControlsClassName } spacing={ 6 }>
-					{ showDropdownHeader ? (
-						<HStack>
-							<StyledLabel>{ __( 'Border color' ) }</StyledLabel>
-							<Button
-								size="small"
-								label={ __( 'Close border color' ) }
-								icon={ closeSmall }
-								onClick={ onClose }
-							/>
-						</HStack>
-					) : undefined }
 					<ColorPalette
 						className={ popoverContentClassName }
 						value={ color }
@@ -237,6 +222,7 @@ const BorderControlDropdown = (
 							onReset();
 							onClose();
 						} }
+						__next40pxDefaultSize
 					>
 						{ __( 'Reset' ) }
 					</Button>
diff --git a/packages/components/src/border-control/border-control/README.md b/packages/components/src/border-control/border-control/README.md
index 51fb7172b7c55..fbd0c10e418d5 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
 
@@ -21,7 +17,7 @@ a "shape" abstraction.
 
 ```jsx
 import { useState } from 'react';
-import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
+import { BorderControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 const colors = [
@@ -58,41 +54,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 +96,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 +105,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 +114,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 +122,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 +139,7 @@ An object representing a border or `undefined`. Used to set the current border
 configuration for this component.
 
 Example:
+
 ```js
  {
 	color: '#72aee6',
@@ -158,18 +148,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 5fe2abce1b411..21be22c9dd55d 100644
--- a/packages/components/src/border-control/border-control/component.tsx
+++ b/packages/components/src/border-control/border-control/component.tsx
@@ -18,6 +18,7 @@ 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;
@@ -75,22 +76,27 @@ const UnconnectedBorderControl = (
 			<HStack spacing={ 4 } className={ innerWrapperClassName }>
 				<UnitControl
 					prefix={
-						<BorderControlDropdown
-							border={ border }
-							colors={ colors }
-							__unstablePopoverProps={ __unstablePopoverProps }
-							disableCustomColors={ disableCustomColors }
-							enableAlpha={ enableAlpha }
-							enableStyle={ enableStyle }
-							isStyleSettable={ isStyleSettable }
-							onChange={ onBorderChange }
-							previousStyleSelection={ previousStyleSelection }
-							showDropdownHeader={ showDropdownHeader }
-							__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
@@ -134,7 +140,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 = [
diff --git a/packages/components/src/border-control/stories/index.story.tsx b/packages/components/src/border-control/stories/index.story.tsx
index 9a5349d302c27..0756a18ac5c0e 100644
--- a/packages/components/src/border-control/stories/index.story.tsx
+++ b/packages/components/src/border-control/stories/index.story.tsx
@@ -16,7 +16,7 @@ import { BorderControl } from '..';
 import type { Border } from '../types';
 
 const meta: Meta< typeof BorderControl > = {
-	title: 'Components (Experimental)/BorderControl',
+	title: 'Components/BorderControl',
 	component: BorderControl,
 	argTypes: {
 		onChange: {
@@ -93,6 +93,9 @@ export const Default = Template.bind( {} );
 Default.args = {
 	colors,
 	label: 'Border',
+	enableAlpha: true,
+	enableStyle: true,
+	shouldSanitizeBorder: true,
 };
 
 /**
@@ -133,12 +136,3 @@ WithMultipleOrigins.args = {
 	...Default.args,
 	colors: multipleOriginColors,
 };
-
-/**
- * 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 6a8892e78ef55..a678b6f362308 100644
--- a/packages/components/src/border-control/styles.ts
+++ b/packages/components/src/border-control/styles.ts
@@ -16,10 +16,6 @@ import {
 
 import type { Border } from './types';
 
-const labelStyles = css`
-	font-weight: 500;
-`;
-
 const focusBoxShadow = css`
 	box-shadow: inset ${ CONFIG.controlBoxShadowFocus };
 `;
@@ -103,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' };
@@ -140,7 +136,6 @@ export const borderControlPopoverControls = css`
 
 	> div:first-of-type > ${ StyledLabel } {
 		margin-bottom: 0;
-		${ labelStyles }
 	}
 
 	&& ${ StyledLabel } + button:not( .has-text ) {
@@ -161,7 +156,6 @@ export const resetButton = css`
 		border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 400 ] };
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
-		height: 40px;
 	}
 `;
 
diff --git a/packages/components/src/border-control/test/index.js b/packages/components/src/border-control/test/index.js
index c41dce687cc52..000a89e14a40b 100644
--- a/packages/components/src/border-control/test/index.js
+++ b/packages/components/src/border-control/test/index.js
@@ -148,19 +148,6 @@ describe( 'BorderControl', () => {
 			expect( resetButton ).toBeInTheDocument();
 		} );
 
-		it( 'should render color and style popover header', async () => {
-			const user = userEvent.setup();
-			const props = createProps( { showDropdownHeader: true } );
-			render( <BorderControl { ...props } /> );
-			await openPopover( user );
-
-			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 } );
@@ -346,10 +333,10 @@ describe( 'BorderControl', () => {
 
 		it( 'should take no action when color and style popover is closed', async () => {
 			const user = userEvent.setup();
-			const props = createProps( { showDropdownHeader: true } );
+			const props = createProps();
 			render( <BorderControl { ...props } /> );
 			await openPopover( user );
-			await user.click( getButton( 'Close border color' ) );
+			await user.keyboard( 'Escape' );
 
 			expect( props.onChange ).not.toHaveBeenCalled();
 		} );
diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts
index 5e028050d8e18..8ab614907684d 100644
--- a/packages/components/src/border-control/types.ts
+++ b/packages/components/src/border-control/types.ts
@@ -18,12 +18,19 @@ export type Border = {
 
 export type ColorProps = Pick<
 	ColorPaletteProps,
-	'colors' | 'enableAlpha' | '__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 = {
@@ -78,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;
 		/**
@@ -139,9 +145,8 @@ 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;
 	};
diff --git a/packages/components/src/box-control/README.md b/packages/components/src/box-control/README.md
index 2fd214b79157f..77176b49eeb6d 100644
--- a/packages/components/src/box-control/README.md
+++ b/packages/components/src/box-control/README.md
@@ -1,18 +1,14 @@
 # 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>
-
-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`.
+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`.
 
 ## Usage
 
 ```jsx
 import { useState } from 'react';
-import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+import { BoxControl } from '@wordpress/components';
 
-const Example = () => {
+function Example() {
 	const [ values, setValues ] = useState( {
 		top: '50px',
 		left: '10%',
@@ -26,23 +22,24 @@ const Example = () => {
 			onChange={ ( nextValues ) => setValues( nextValues ) }
 		/>
 	);
-};
+}
 ```
 
 ## Props
+
 ### `allowReset`: `boolean`
 
 If this property is true, a button to reset the box control is rendered.
 
-- Required: No
-- Default: `true`
+-   Required: No
+-   Default: `true`
 
 ### `splitOnAxis`: `boolean`
 
 If this property is true, when the box control is unlinked, vertical and horizontal controls can be used instead of updating individual sides.
 
-- Required: No
-- Default: `false`
+-   Required: No
+-   Default: `false`
 
 ### `inputProps`: `object`
 
@@ -100,3 +97,10 @@ A handler for onMouseOver events.
 A handler for onMouseOut events.
 
 -   Required: No
+
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default size that will become the default size in a future version.
+
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx
index fb65014dfaf0f..e9166ff7f692e 100644
--- a/packages/components/src/box-control/all-input-control.tsx
+++ b/packages/components/src/box-control/all-input-control.tsx
@@ -10,7 +10,6 @@ import {
 	FlexedRangeControl,
 	StyledUnitControl,
 } from './styles/box-control-styles';
-import { HStack } from '../h-stack';
 import type { BoxControlInputControlProps } from './types';
 import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 import {
@@ -72,7 +71,7 @@ export default function AllInputControl( {
 	};
 
 	return (
-		<HStack>
+		<>
 			<StyledUnitControl
 				{ ...props }
 				__next40pxDefaultSize={ __next40pxDefaultSize }
@@ -104,6 +103,6 @@ export default function AllInputControl( {
 				value={ parsedQuantity ?? 0 }
 				withInputField={ false }
 			/>
-		</HStack>
+		</>
 	);
 }
diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx
index 9c3452d4ccb80..41e95aa88bea3 100644
--- a/packages/components/src/box-control/index.tsx
+++ b/packages/components/src/box-control/index.tsx
@@ -47,14 +47,14 @@ function useUniqueId( idProp?: string ) {
 }
 
 /**
- * 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`.
+ * 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 { BoxControl } from '@wordpress/components';
  * import { useState } from '@wordpress/element';
  *
- * const Example = () => {
+ * function Example() {
  * 	const [ values, setValues ] = useState( {
  * 		top: '50px',
  * 		left: '10%',
diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx
index 1b6604048f6d5..783f9d047b1bb 100644
--- a/packages/components/src/box-control/stories/index.story.tsx
+++ b/packages/components/src/box-control/stories/index.story.tsx
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import BoxControl from '../';
 
 const meta: Meta< typeof BoxControl > = {
-	title: 'Components (Experimental)/BoxControl',
+	title: 'Components/BoxControl',
 	component: BoxControl,
 	argTypes: {
 		values: { control: { type: null } },
diff --git a/packages/components/src/box-control/types.ts b/packages/components/src/box-control/types.ts
index eeb72df14bb9c..5f4071aeed88a 100644
--- a/packages/components/src/box-control/types.ts
+++ b/packages/components/src/box-control/types.ts
@@ -37,13 +37,13 @@ export type BoxControlProps = Pick<
 	/**
 	 * Props for the internal `UnitControl` components.
 	 *
-	 * @default `{ min: 0 }`
+	 * @default { min: 0 }
 	 */
 	inputProps?: UnitControlPassthroughProps;
 	/**
 	 * Heading label for the control.
 	 *
-	 * @default `__( 'Box Control' )`
+	 * @default __( 'Box Control' )
 	 */
 	label?: string;
 	/**
@@ -53,7 +53,7 @@ export type BoxControlProps = Pick<
 	/**
 	 * 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 }`
+	 * @default { top: undefined, right: undefined, bottom: undefined, left: undefined }
 	 */
 	resetValues?: BoxControlValue;
 	/**
diff --git a/packages/components/src/box-control/utils.ts b/packages/components/src/box-control/utils.ts
index e480c9a9f4674..73c7f4a6a46cf 100644
--- a/packages/components/src/box-control/utils.ts
+++ b/packages/components/src/box-control/utils.ts
@@ -179,7 +179,7 @@ export function isValuesMixed(
  */
 export function isValuesDefined( values?: BoxControlValue ) {
 	return (
-		values !== undefined &&
+		values &&
 		Object.values( values ).filter(
 			// Switching units when input is empty causes values only
 			// containing units. This gives false positive on mixed values
diff --git a/packages/components/src/button-group/stories/index.story.tsx b/packages/components/src/button-group/stories/index.story.tsx
index 958a0d137763e..f6af2416977f4 100644
--- a/packages/components/src/button-group/stories/index.story.tsx
+++ b/packages/components/src/button-group/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -22,18 +22,13 @@ const meta: Meta< typeof ButtonGroup > = {
 };
 export default meta;
 
-const Template: StoryFn< 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: StoryObj< typeof ButtonGroup > = {
+	args: {
+		children: (
+			<>
+				<Button variant="primary">Button 1</Button>
+				<Button>Button 2</Button>
+			</>
+		),
+	},
 };
-
-export const Default: StoryFn< typeof ButtonGroup > = Template.bind( {} );
diff --git a/packages/components/src/button-group/style.scss b/packages/components/src/button-group/style.scss
index 171722b409f69..96a9e8f458c84 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 b3a83904bc9ba..d458771494a33 100644
--- a/packages/components/src/button/README.md
+++ b/packages/components/src/button/README.md
@@ -292,6 +292,13 @@ Specifies the button's style. The accepted values are `'primary'` (the primary b
 
 -   Required: No
 
+#### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Required: No
+- Default: `false`
+
 ## Related components
 
 -   To group buttons together, use the [ButtonGroup](/packages/components/src/button-group/README.md) component.
diff --git a/packages/components/src/button/stories/e2e/index.story.tsx b/packages/components/src/button/stories/e2e/index.story.tsx
index a4fcfdeac5ca4..d2651e8df1ec1 100644
--- a/packages/components/src/button/stories/e2e/index.story.tsx
+++ b/packages/components/src/button/stories/e2e/index.story.tsx
@@ -31,28 +31,110 @@ export const VariantStates: StoryFn< typeof Button > = (
 		'link',
 	];
 
-	return (
-		<div style={ { display: 'flex', flexDirection: 'column', gap: 24 } }>
-			{ variants.map( ( variant ) => (
-				<div
-					style={ { display: 'flex', gap: 8 } }
-					key={ variant ?? 'undefined' }
+	const VariantsRow = ( {
+		buttonProps,
+		name,
+	}: {
+		buttonProps?: ButtonAsButtonProps;
+		name: string;
+	} ) => {
+		return (
+			<tr>
+				<th
+					style={ {
+						fontSize: 13,
+						fontWeight: 'normal',
+						padding: 8,
+						background: '#f3f4f5',
+					} }
 				>
-					<Button { ...props } variant={ variant } />
-					{ /* eslint-disable-next-line no-restricted-syntax */ }
-					<Button { ...props } variant={ variant } disabled />
-					<Button
-						{ ...props }
-						variant={ variant }
-						disabled
-						accessibleWhenDisabled
-					/>
-					<Button { ...props } variant={ variant } isBusy />
-					<Button { ...props } variant={ variant } isDestructive />
-					<Button { ...props } variant={ variant } isPressed />
-				</div>
-			) ) }
-		</div>
+					{ 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 = {
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index ae242c3863418..444e4d397b3ef 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,7 +22,7 @@
 	align-items: center;
 	box-sizing: border-box;
 	padding: 6px 12px;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	color: $components-color-foreground;
 
 	&.is-next-40px-default-size {
@@ -23,16 +30,10 @@
 	}
 
 	&[aria-expanded="true"],
-	&:hover {
+	&:hover:not(:disabled, [aria-disabled="true"]) {
 		color: $components-color-accent;
 	}
 
-	// Unset some hovers, instead of adding :not specificity.
-	&:disabled:hover,
-	&[aria-disabled="true"]:hover {
-		color: initial;
-	}
-
 	// Focus.
 	// See https://github.com/WordPress/gutenberg/issues/13267 for more context on these selectors.
 	&:focus:not(:disabled) {
@@ -80,7 +81,6 @@
 			color: rgba($white, 0.4);
 			background: $components-color-accent;
 			border-color: $components-color-accent;
-			opacity: 1;
 			outline: none;
 
 			&:focus:enabled {
@@ -125,7 +125,6 @@
 			color: $gray-600;
 			background: transparent;
 			transform: none;
-			opacity: 1;
 		}
 	}
 
@@ -199,17 +198,32 @@
 		&:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link) {
 			color: $alert-red;
 
-			&:hover:not(:disabled) {
+			&:hover:not(:disabled, [aria-disabled="true"]) {
 				color: darken($alert-red, 20%);
 			}
 
-			&:focus:not(:disabled) {
+			&:focus {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $alert-red;
 			}
 
-			&:active:not(:disabled) {
+			&:active:not(:disabled, [aria-disabled="true"]) {
 				background: $gray-400;
 			}
+
+			&:disabled,
+			&[aria-disabled="true"] {
+				color: $gray-600;
+			}
+		}
+
+		&.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);
+			}
 		}
 	}
 
@@ -235,7 +249,12 @@
 		height: auto;
 
 		&:focus {
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
+		}
+
+		&:disabled,
+		&[aria-disabled="true"] {
+			color: $gray-600;
 		}
 	}
 
@@ -246,7 +265,7 @@
 	&:disabled,
 	&[aria-disabled="true"] {
 		cursor: default;
-		opacity: 0.3;
+		color: $gray-600;
 	}
 
 	&.is-busy,
@@ -259,7 +278,6 @@
 		@media (prefers-reduced-motion: reduce) {
 			animation-duration: 0s;
 		}
-		opacity: 1;
 		background-size: 100px 100%;
 		/* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
 		background-image: linear-gradient(
@@ -325,8 +343,23 @@
 
 	// Toggled style.
 	&.is-pressed {
-		color: $components-color-foreground-inverted;
-		background: $components-color-foreground;
+		&,
+		&:hover {
+			color: $components-color-foreground-inverted;
+			&:not(:disabled, [aria-disabled="true"]) {
+				background: $components-color-foreground;
+			}
+		}
+
+		&:disabled,
+		&[aria-disabled="true"] {
+			color: $gray-600;
+
+			&:not(.is-primary):not(.is-secondary):not(.is-tertiary) {
+				color: $components-color-foreground-inverted;
+				background: $gray-600;
+			}
+		}
 
 		&:focus:not(:disabled) {
 			box-shadow: inset 0 0 0 1px $components-color-background, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
@@ -334,11 +367,6 @@
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: 2px solid transparent;
 		}
-
-		&:hover:not(:disabled) {
-			color: $components-color-foreground-inverted;
-			background: $components-color-foreground;
-		}
 	}
 
 	svg {
diff --git a/packages/components/src/button/test/index.tsx b/packages/components/src/button/test/index.tsx
index c5bf32e683ff1..8161e68c4e21b 100644
--- a/packages/components/src/button/test/index.tsx
+++ b/packages/components/src/button/test/index.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -16,6 +15,7 @@ import { plusCircle } from '@wordpress/icons';
 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" /> );
 
@@ -73,12 +73,10 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should render a button element with has-text when children are passed', async () => {
-			const user = userEvent.setup();
-
 			render( <Button icon={ plusCircle }>Children</Button> );
 
 			// Move focus to the button
-			await user.tab();
+			await press.Tab();
 
 			expect( screen.getByRole( 'button' ) ).toHaveClass( 'has-text' );
 		} );
@@ -113,8 +111,6 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should render correctly as a tooltip anchor', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<>
 					<Tooltip text="Tooltip text">
@@ -128,7 +124,7 @@ describe( 'Button', () => {
 				name: 'Tooltip anchor',
 			} );
 
-			await user.tab();
+			await press.Tab();
 
 			expect( anchor ).toHaveFocus();
 
@@ -138,7 +134,7 @@ describe( 'Button', () => {
 
 			expect( tooltip ).toBeVisible();
 
-			await user.tab();
+			await press.Tab();
 
 			expect(
 				screen.getByRole( 'button', { name: 'Focus me' } )
@@ -152,8 +148,6 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should render correctly as a tooltip anchor, ignoring its internal tooltip in favour of the external tooltip', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<>
 					<Tooltip text="Tooltip text">
@@ -167,7 +161,7 @@ describe( 'Button', () => {
 				name: 'Button label',
 			} );
 
-			await user.tab();
+			await press.Tab();
 
 			expect( anchor ).toHaveFocus();
 
@@ -184,7 +178,7 @@ describe( 'Button', () => {
 				} )
 			).not.toBeInTheDocument();
 
-			await user.tab();
+			await press.Tab();
 
 			expect(
 				screen.getByRole( 'button', { name: 'Focus me' } )
@@ -198,8 +192,6 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should not trash the rendered HTML elements when toggling between showing and not showing a tooltip', async () => {
-			const user = userEvent.setup();
-
 			const { rerender } = render(
 				<Button label="Button label">Test button</Button>
 			);
@@ -210,7 +202,7 @@ describe( 'Button', () => {
 
 			expect( button ).toBeVisible();
 
-			await user.tab();
+			await press.Tab();
 
 			expect( button ).toHaveFocus();
 
@@ -307,14 +299,12 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should add an aria-label when the label property is used, with Tooltip wrapper', async () => {
-			const user = userEvent.setup();
-
 			render( <Button icon={ plusCircle } label="WordPress" /> );
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
 			// Move focus to the button
-			await user.tab();
+			await press.Tab();
 
 			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 		} );
@@ -338,8 +328,6 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should populate tooltip with label content for buttons without visible labels (no children)', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<Button
 					description="Description text"
@@ -351,16 +339,14 @@ describe( 'Button', () => {
 			expect( screen.queryByText( 'Label' ) ).not.toBeInTheDocument();
 
 			// Move focus to the button
-			await user.tab();
+			await press.Tab();
 
 			expect( screen.getByText( 'Label' ) ).toBeVisible();
 
-			await cleanupTooltip( user );
+			await cleanupTooltip();
 		} );
 
 		it( 'should populate tooltip with description content for buttons with visible labels (buttons with children)', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<Button
 					label="Label"
@@ -378,7 +364,7 @@ describe( 'Button', () => {
 				} )
 			).toBeVisible();
 
-			await user.tab();
+			await press.Tab();
 
 			expect(
 				screen.getByRole( 'tooltip', {
@@ -386,12 +372,10 @@ describe( 'Button', () => {
 				} )
 			).toBeVisible();
 
-			await cleanupTooltip( user );
+			await cleanupTooltip();
 		} );
 
 		it( 'should allow tooltip disable', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<Button
 					icon={ plusCircle }
@@ -407,14 +391,12 @@ describe( 'Button', () => {
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
 			// Move focus to the button
-			await user.tab();
+			await press.Tab();
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 		} );
 
 		it( 'should show the tooltip for empty children', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<Button icon={ plusCircle } label="WordPress" children={ [] } />
 			);
@@ -422,16 +404,14 @@ describe( 'Button', () => {
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
 			// Move focus to the button
-			await user.tab();
+			await press.Tab();
 
 			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 
-			await cleanupTooltip( user );
+			await cleanupTooltip();
 		} );
 
 		it( 'should not show the tooltip when icon and children defined', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<Button icon={ plusCircle } label="WordPress">
 					Children
@@ -441,14 +421,12 @@ describe( 'Button', () => {
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
 			// Move focus to the button
-			await user.tab();
+			await press.Tab();
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 		} );
 
 		it( 'should force showing the tooltip even if icon and children defined', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<Button icon={ plusCircle } label="WordPress" showTooltip>
 					Children
@@ -458,11 +436,11 @@ describe( 'Button', () => {
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
 			// Move focus to the button
-			await user.tab();
+			await press.Tab();
 
 			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 
-			await cleanupTooltip( user );
+			await cleanupTooltip();
 		} );
 
 		describe( 'using `aria-pressed` prop', () => {
diff --git a/packages/components/src/card/card/component.tsx b/packages/components/src/card/card/component.tsx
index 8fefc33bd4802..e459f9abb9275 100644
--- a/packages/components/src/card/card/component.tsx
+++ b/packages/components/src/card/card/component.tsx
@@ -34,7 +34,7 @@ function UnconnectedCard(
 		size,
 		...otherProps
 	} = useCard( props );
-	const elevationBorderRadius = isRounded ? CONFIG.cardBorderRadius : 0;
+	const elevationBorderRadius = isRounded ? CONFIG.radiusLarge : 0;
 
 	const cx = useCx();
 
diff --git a/packages/components/src/card/styles.ts b/packages/components/src/card/styles.ts
index fa70b19054e2f..df0fe4eb7ed72 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 cc1a754e1d37c..e9073edba3e3e 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-d0qyo2-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
-+     class="components-scrollable components-card__body components-card-body css-vpf7zs-PolymorphicDiv-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-d0qyo2-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
-+     class="components-card__body components-card-body css-4zm8r0-PolymorphicDiv-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-1l4bmbt-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
-+     class="components-flex components-card__footer components-card-footer css-8pv7rj-PolymorphicDiv-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-1l4bmbt-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
-+     class="components-flex components-card__footer components-card-footer css-1hguscv-PolymorphicDiv-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-1tfuk0d-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
-+     class="components-flex components-card__header components-card-header css-10qs2ur-PolymorphicDiv-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"
     >
@@ -96,16 +96,16 @@ Snapshot Diff:
         class="css-76dw7d-PolymorphicDiv-Content e19lxcc00"
       >
         <div
--         class="components-flex components-card__header components-card-header css-1tfuk0d-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
-+         class="components-flex components-card__header components-card-header css-d1c2bv-PolymorphicDiv-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-d0qyo2-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
-+         class="components-card__body components-card-body css-kub9fa-PolymorphicDiv-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",
@@ -141,24 +141,24 @@ Snapshot Diff:
         class="css-76dw7d-PolymorphicDiv-Content e19lxcc00"
       >
         <div
--         class="components-flex components-card__header components-card-header css-1xfrxuu-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__header components-card-header css-1mitrbv-PolymorphicDiv-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-kub9fa-PolymorphicDiv-Body-borderRadius-large e19lxcc00"
-+         class="components-card__body components-card-body css-d0qyo2-PolymorphicDiv-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-8o7z5w-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__footer components-card-footer css-1umuqb4-PolymorphicDiv-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,8 +174,8 @@ Snapshot Diff:
 @@ -1,30 +1,30 @@
   <div>
     <div
--     class="components-surface components-card css-5ubhkm-PolymorphicDiv-Surface-getBorders-primary-Card-boxShadowless-rounded e19lxcc00"
-+     class="components-surface components-card css-1lc0qq8-PolymorphicDiv-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"
     >
@@ -183,24 +183,24 @@ Snapshot Diff:
         class="css-76dw7d-PolymorphicDiv-Content e19lxcc00"
       >
         <div
--         class="components-flex components-card__header components-card-header css-1xfrxuu-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__header components-card-header css-1mitrbv-PolymorphicDiv-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-kub9fa-PolymorphicDiv-Body-borderRadius-large e19lxcc00"
-+         class="components-card__body components-card-body css-1djcdvu-PolymorphicDiv-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-8o7z5w-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__footer components-card-footer css-1awxp6o-PolymorphicDiv-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,7 +370,7 @@ exports[`Card Card component should render correctly 1`] = `
   left: 0;
   right: 0;
   top: 0;
-  border-radius: 2px;
+  border-radius: 8px;
 }
 
 @media not ( prefers-reduced-motion ) {
@@ -469,15 +469,15 @@ Snapshot Diff:
       </div>
       <div
         aria-hidden="true"
--       class="components-elevation css-1dd80bh-PolymorphicDiv-Elevation-sx-Base-sx-Base-elevationClassName e19lxcc00"
-+       class="components-elevation css-1jg41yu-PolymorphicDiv-Elevation-sx-Base-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-iuptql-PolymorphicDiv-Elevation-sx-Base-sx-Base-elevationClassName e19lxcc00"
-+       class="components-elevation css-1jg41yu-PolymorphicDiv-Elevation-sx-Base-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"
       />
@@ -497,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 {
@@ -518,7 +518,7 @@ exports[`Card Card component should warn when the isElevated prop is passed 1`]
   left: 0;
   right: 0;
   top: 0;
-  border-radius: 2px;
+  border-radius: 8px;
 }
 
 @media not ( prefers-reduced-motion ) {
@@ -542,7 +542,7 @@ exports[`Card Card component should warn when the isElevated prop is passed 1`]
   left: 0;
   right: 0;
   top: 0;
-  border-radius: 2px;
+  border-radius: 8px;
 }
 
 @media not ( prefers-reduced-motion ) {
diff --git a/packages/components/src/checkbox-control/index.tsx b/packages/components/src/checkbox-control/index.tsx
index 51e232d97847a..a24d1abaab45a 100644
--- a/packages/components/src/checkbox-control/index.tsx
+++ b/packages/components/src/checkbox-control/index.tsx
@@ -95,6 +95,7 @@ export function CheckboxControl(
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="CheckboxControl"
 			label={ heading }
 			id={ id }
 			help={
diff --git a/packages/components/src/checkbox-control/stories/index.story.tsx b/packages/components/src/checkbox-control/stories/index.story.tsx
index 2dbc14c8cde11..3c55ba3192a3c 100644
--- a/packages/components/src/checkbox-control/stories/index.story.tsx
+++ b/packages/components/src/checkbox-control/stories/index.story.tsx
@@ -59,6 +59,7 @@ export const Default: StoryFn< typeof CheckboxControl > = DefaultTemplate.bind(
 	{}
 );
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	label: 'Is author',
 	help: 'Is the user an author or not?',
 };
diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index 9fd563d85161f..25394ba645ee8 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -3,7 +3,7 @@
 	--checkbox-input-size: 24px; // Width & height for small viewports.
 
 	@include break-small() {
-		--checkbox-input-size: 20px;
+		--checkbox-input-size: 16px;
 	}
 
 	--checkbox-input-margin: #{$grid-unit-10};
@@ -12,6 +12,7 @@
 .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"] {
@@ -61,6 +62,7 @@
 	vertical-align: middle;
 	width: var(--checkbox-input-size);
 	aspect-ratio: 1;
+	line-height: 1; // maintains proper height even with WP common.css
 	flex-shrink: 0;
 }
 
diff --git a/packages/components/src/checkbox-control/test/index.tsx b/packages/components/src/checkbox-control/test/index.tsx
index 899a9b100015b..547f479184e86 100644
--- a/packages/components/src/checkbox-control/test/index.tsx
+++ b/packages/components/src/checkbox-control/test/index.tsx
@@ -20,13 +20,20 @@ const noop = () => {};
 const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
 
 const CheckboxControl = ( props: Omit< CheckboxControlProps, 'onChange' > ) => {
-	return <BaseCheckboxControl onChange={ noop } { ...props } />;
+	return (
+		<BaseCheckboxControl
+			onChange={ noop }
+			{ ...props }
+			__nextHasNoMarginBottom
+		/>
+	);
 };
 
 const ControlledCheckboxControl = ( { onChange }: CheckboxControlProps ) => {
 	const [ isChecked, setChecked ] = useState( false );
 	return (
 		<BaseCheckboxControl
+			__nextHasNoMarginBottom
 			checked={ isChecked }
 			onChange={ ( value ) => {
 				setChecked( value );
diff --git a/packages/components/src/circular-option-picker/circular-option-picker-option.tsx b/packages/components/src/circular-option-picker/circular-option-picker-option.tsx
index 6c00a0e5d0bf1..276ab7549781e 100644
--- a/packages/components/src/circular-option-picker/circular-option-picker-option.tsx
+++ b/packages/components/src/circular-option-picker/circular-option-picker-option.tsx
@@ -8,7 +8,7 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { forwardRef, useContext } from '@wordpress/element';
+import { forwardRef, useContext, useEffect } from '@wordpress/element';
 import { Icon, check } from '@wordpress/icons';
 
 /**
@@ -16,9 +16,9 @@ import { Icon, check } from '@wordpress/icons';
  */
 import { CircularOptionPickerContext } from './circular-option-picker-context';
 import Button from '../button';
-import { CompositeItem } from '../composite/v2';
+import { Composite } from '../composite';
 import Tooltip from '../tooltip';
-import type { OptionProps, CircularOptionPickerCompositeStore } from './types';
+import type { OptionProps } from './types';
 
 function UnforwardedOptionAsButton(
 	props: {
@@ -45,19 +45,24 @@ function UnforwardedOptionAsOption(
 		id: string;
 		className?: string;
 		isSelected?: boolean;
-		compositeStore: CircularOptionPickerCompositeStore;
 	},
 	forwardedRef: ForwardedRef< any >
 ) {
-	const { id, isSelected, compositeStore, ...additionalProps } = props;
-	const activeId = compositeStore.useState( 'activeId' );
+	const { id, isSelected, ...additionalProps } = props;
 
-	if ( isSelected && ! activeId ) {
-		compositeStore.setActiveId( id );
-	}
+	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 (
-		<CompositeItem
+		<Composite.Item
 			render={
 				<Button
 					{ ...additionalProps }
@@ -66,7 +71,6 @@ function UnforwardedOptionAsOption(
 					ref={ forwardedRef }
 				/>
 			}
-			store={ compositeStore }
 			id={ id }
 		/>
 	);
@@ -81,9 +85,7 @@ export function Option( {
 	tooltipText,
 	...additionalProps
 }: OptionProps ) {
-	const { baseId, compositeStore } = useContext(
-		CircularOptionPickerContext
-	);
+	const { baseId, setActiveId } = useContext( CircularOptionPickerContext );
 	const id = useInstanceId(
 		Option,
 		baseId || 'components-circular-option-picker__option'
@@ -95,12 +97,9 @@ export function Option( {
 		...additionalProps,
 	};
 
-	const optionControl = compositeStore ? (
-		<OptionAsOption
-			{ ...commonProps }
-			compositeStore={ compositeStore }
-			isSelected={ isSelected }
-		/>
+	const isListbox = setActiveId !== undefined;
+	const optionControl = isListbox ? (
+		<OptionAsOption { ...commonProps } isSelected={ isSelected } />
 	) : (
 		<OptionAsButton { ...commonProps } isPressed={ isSelected } />
 	);
diff --git a/packages/components/src/circular-option-picker/circular-option-picker.tsx b/packages/components/src/circular-option-picker/circular-option-picker.tsx
index cd2ddcf90d7ce..adf2b386e5cbe 100644
--- a/packages/components/src/circular-option-picker/circular-option-picker.tsx
+++ b/packages/components/src/circular-option-picker/circular-option-picker.tsx
@@ -8,12 +8,13 @@ import clsx from 'clsx';
  */
 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, useCompositeStore } from '../composite/v2';
+import { Composite } from '../composite';
 import type {
 	CircularOptionPickerProps,
 	ListboxCircularOptionPickerProps,
@@ -85,24 +86,30 @@ function ListboxCircularOptionPicker(
 		...additionalProps
 	} = props;
 
-	const compositeStore = useCompositeStore( {
-		focusLoop: loop,
-		rtl: isRTL(),
-	} );
+	const [ activeId, setActiveId ] = useState< string | null | undefined >(
+		undefined
+	);
 
-	const compositeContext = {
-		baseId,
-		compositeStore,
-	};
+	const contextValue = useMemo(
+		() => ( {
+			baseId,
+			activeId,
+			setActiveId,
+		} ),
+		[ baseId, activeId, setActiveId ]
+	);
 
 	return (
 		<div className={ className }>
-			<CircularOptionPickerContext.Provider value={ compositeContext }>
+			<CircularOptionPickerContext.Provider value={ contextValue }>
 				<Composite
 					{ ...additionalProps }
 					id={ baseId }
-					store={ compositeStore }
+					focusLoop={ loop }
+					rtl={ isRTL() }
 					role="listbox"
+					activeId={ activeId }
+					setActiveId={ setActiveId }
 				>
 					{ options }
 				</Composite>
@@ -118,9 +125,16 @@ function ButtonsCircularOptionPicker(
 ) {
 	const { actions, options, children, baseId, ...additionalProps } = props;
 
+	const contextValue = useMemo(
+		() => ( {
+			baseId,
+		} ),
+		[ baseId ]
+	);
+
 	return (
 		<div { ...additionalProps } id={ baseId }>
-			<CircularOptionPickerContext.Provider value={ { baseId } }>
+			<CircularOptionPickerContext.Provider value={ contextValue }>
 				{ options }
 				{ children }
 				{ actions }
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index 33ba6070dde79..24b67eb7e7021 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -70,7 +70,7 @@ $color-palette-circle-spacing: 12px;
 	height: 100%;
 	width: 100%;
 	border: none;
-	border-radius: 50%;
+	border-radius: $radius-round;
 	background: transparent;
 	box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5);
 	transition: 100ms box-shadow ease;
@@ -93,7 +93,7 @@ $color-palette-circle-spacing: 12px;
 			position: absolute;
 			left: 2px;
 			top: 2px;
-			border-radius: 50%;
+			border-radius: $radius-round;
 			z-index: z-index(".components-circular-option-picker__option.is-pressed + svg");
 			pointer-events: none;
 		}
@@ -109,7 +109,7 @@ $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;
 	}
 
diff --git a/packages/components/src/circular-option-picker/test/index.tsx b/packages/components/src/circular-option-picker/test/index.tsx
index 0b5ccbeecb57d..a6e9f2c45a05c 100644
--- a/packages/components/src/circular-option-picker/test/index.tsx
+++ b/packages/components/src/circular-option-picker/test/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
-import { press, sleep } from '@ariakit/test';
+import { press } from '@ariakit/test';
 
 /**
  * Internal dependencies
@@ -70,7 +70,6 @@ describe( 'CircularOptionPicker', () => {
 				/>
 			);
 
-			await sleep();
 			await press.Tab();
 			expect( getOption( 'Option One' ) ).toHaveFocus();
 			await press.ArrowRight();
@@ -90,7 +89,6 @@ describe( 'CircularOptionPicker', () => {
 				/>
 			);
 
-			await sleep();
 			await press.Tab();
 			expect( getOption( 'Option One' ) ).toHaveFocus();
 			await press.ArrowRight();
@@ -110,7 +108,6 @@ describe( 'CircularOptionPicker', () => {
 				/>
 			);
 
-			await sleep();
 			await press.Tab();
 			expect( getOption( 'Option One' ) ).toHaveFocus();
 			await press.ArrowRight();
diff --git a/packages/components/src/circular-option-picker/types.ts b/packages/components/src/circular-option-picker/types.ts
index 519d81d590510..411782aed575b 100644
--- a/packages/components/src/circular-option-picker/types.ts
+++ b/packages/components/src/circular-option-picker/types.ts
@@ -14,7 +14,6 @@ import type { Icon } from '@wordpress/icons';
 import type { ButtonAsButtonProps } from '../button/types';
 import type { DropdownProps } from '../dropdown/types';
 import type { WordPressComponentProps } from '../context';
-import type { CompositeStore } from '../composite/v2';
 
 type CommonCircularOptionPickerProps = {
 	/**
@@ -123,8 +122,8 @@ export type OptionProps = Omit<
 	>;
 };
 
-export type CircularOptionPickerCompositeStore = CompositeStore;
 export type CircularOptionPickerContextProps = {
 	baseId?: string;
-	compositeStore?: CircularOptionPickerCompositeStore;
+	activeId?: string | null | undefined;
+	setActiveId?: ( newId: string | null | undefined ) => void;
 };
diff --git a/packages/components/src/clipboard-button/index.tsx b/packages/components/src/clipboard-button/index.tsx
index 2f66b97a5a00f..0bf7d177e251e 100644
--- a/packages/components/src/clipboard-button/index.tsx
+++ b/packages/components/src/clipboard-button/index.tsx
@@ -32,21 +32,21 @@ export default function ClipboardButton( {
 		alternative: 'wp.compose.useCopyToClipboard',
 	} );
 
-	const timeoutId = useRef< NodeJS.Timeout >();
+	const timeoutIdRef = useRef< NodeJS.Timeout >();
 	const ref = useCopyToClipboard( text, () => {
 		onCopy();
-		if ( timeoutId.current ) {
-			clearTimeout( timeoutId.current );
+		if ( timeoutIdRef.current ) {
+			clearTimeout( timeoutIdRef.current );
 		}
 
 		if ( onFinishCopy ) {
-			timeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );
+			timeoutIdRef.current = setTimeout( () => onFinishCopy(), TIMEOUT );
 		}
 	} );
 
 	useEffect( () => {
-		if ( timeoutId.current ) {
-			clearTimeout( timeoutId.current );
+		if ( timeoutIdRef.current ) {
+			clearTimeout( timeoutIdRef.current );
 		}
 	}, [] );
 
diff --git a/packages/components/src/color-indicator/style.scss b/packages/components/src/color-indicator/style.scss
index e70b8a09ca5bf..4029b50340e62 100644
--- a/packages/components/src/color-indicator/style.scss
+++ b/packages/components/src/color-indicator/style.scss
@@ -2,7 +2,7 @@
 	width: $grid-unit-50 * 0.5;
 	height: $grid-unit-50 * 0.5;
 	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
-	border-radius: 50%;
+	border-radius: $radius-round;
 	display: inline-block;
 	padding: 0;
 	background: $white linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index 1c1bb1204afef..c744faee9b0c3 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -335,26 +335,28 @@ function UnforwardedColorPalette(
 					) }
 				/>
 			) }
-			<CircularOptionPicker
-				{ ...metaProps }
-				actions={ actions }
-				options={
-					hasMultipleColorOrigins ? (
-						<MultiplePalettes
-							{ ...paletteCommonProps }
-							headingLevel={ headingLevel }
-							colors={ colors as PaletteObject[] }
-							value={ value }
-						/>
-					) : (
-						<SinglePalette
-							{ ...paletteCommonProps }
-							colors={ colors as ColorObject[] }
-							value={ value }
-						/>
-					)
-				}
-			/>
+			{ ( 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/style.scss b/packages/components/src/color-palette/style.scss
index 2d6bc4ddc1db3..9d922a8130692 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -14,7 +14,7 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 	cursor: pointer;
 	// Show a thin outline in Windows high contrast mode.
 	outline: 1px solid transparent;
-	border-radius: $radius-block-ui $radius-block-ui 0 0;
+	border-radius: $radius-medium $radius-medium 0 0;
 	box-shadow: $border-as-box-shadow;
 
 	&:focus {
@@ -46,7 +46,7 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 
 .components-color-palette__custom-color-text-wrapper {
 	padding: $grid-unit-15 $grid-unit-20;
-	border-radius: 0 0 $radius-block-ui $radius-block-ui;
+	border-radius: 0 0 $radius-medium $radius-medium;
 	position: relative;
 	font-size: $default-font-size;
 
diff --git a/packages/components/src/color-palette/test/utils.ts b/packages/components/src/color-palette/test/utils.ts
index 65e829a58a06b..56acec5416ecb 100644
--- a/packages/components/src/color-palette/test/utils.ts
+++ b/packages/components/src/color-palette/test/utils.ts
@@ -26,18 +26,37 @@ describe( 'ColorPalette: Utils', () => {
 	} );
 
 	describe( 'normalizeColorValue', () => {
-		test( 'should return the value as is if the color value is not a CSS variable', () => {
+		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 the background color computed from a element if the color value is a CSS variable', () => {
+		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 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/utils.ts b/packages/components/src/color-palette/utils.ts
index 79141bf752eb7..19fd4b7252f63 100644
--- a/packages/components/src/color-palette/utils.ts
+++ b/packages/components/src/color-palette/utils.ts
@@ -17,6 +17,18 @@ import type { ColorObject, ColorPaletteProps, PaletteObject } from './types';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
+/**
+ * Checks if a color value is a simple CSS color.
+ *
+ * @param value The color value to check.
+ * @return A boolean indicating whether the color value is a simple CSS color.
+ */
+const isSimpleCSSColor = ( value: string ): boolean => {
+	const valueIsCssVariable = /var\(/.test( value ?? '' );
+	const valueIsColorMix = /color-mix\(/.test( value ?? '' );
+	return ! valueIsCssVariable && ! valueIsColorMix;
+};
+
 export const extractColorNameFromCurrentValue = (
 	currentValue?: ColorPaletteProps[ 'value' ],
 	colors: ColorPaletteProps[ 'colors' ] = [],
@@ -25,11 +37,12 @@ export const extractColorNameFromCurrentValue = (
 	if ( ! currentValue ) {
 		return '';
 	}
-
-	const currentValueIsCssVariable = /^var\(/.test( currentValue );
-	const normalizedCurrentValue = currentValueIsCssVariable
-		? currentValue
-		: colord( currentValue ).toHex();
+	const currentValueIsSimpleColor = currentValue
+		? isSimpleCSSColor( currentValue )
+		: false;
+	const normalizedCurrentValue = currentValueIsSimpleColor
+		? colord( currentValue ).toHex()
+		: currentValue;
 
 	// Normalize format of `colors` to simplify the following loop
 	type normalizedPaletteObject = { colors: ColorObject[] };
@@ -38,9 +51,9 @@ export const extractColorNameFromCurrentValue = (
 		: [ { colors: colors as ColorObject[] } ];
 	for ( const { colors: paletteColors } of colorPalettes ) {
 		for ( const { name: colorName, color: colorValue } of paletteColors ) {
-			const normalizedColorValue = currentValueIsCssVariable
-				? colorValue
-				: colord( colorValue ).toHex();
+			const normalizedColorValue = currentValueIsSimpleColor
+				? colord( colorValue ).toHex()
+				: colorValue;
 
 			if ( normalizedCurrentValue === normalizedColorValue ) {
 				return colorName;
@@ -79,9 +92,7 @@ export const normalizeColorValue = (
 	value: string | undefined,
 	element: HTMLElement | null
 ) => {
-	const currentValueIsCssVariable = /^var\(/.test( value ?? '' );
-
-	if ( ! currentValueIsCssVariable || element === null ) {
+	if ( ! value || ! element || isSimpleCSSColor( value ) ) {
 		return value;
 	}
 
diff --git a/packages/components/src/color-picker/color-copy-button.tsx b/packages/components/src/color-picker/color-copy-button.tsx
index 11ff7ca52de78..b8a4822544322 100644
--- a/packages/components/src/color-picker/color-copy-button.tsx
+++ b/packages/components/src/color-picker/color-copy-button.tsx
@@ -17,7 +17,9 @@ 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 ) {
@@ -34,21 +36,21 @@ 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 );
 			}
 		};
 	}, [] );
diff --git a/packages/components/src/color-picker/hex-input.tsx b/packages/components/src/color-picker/hex-input.tsx
index 90ebc0a101bd3..ef8b5356c0edc 100644
--- a/packages/components/src/color-picker/hex-input.tsx
+++ b/packages/components/src/color-picker/hex-input.tsx
@@ -13,11 +13,10 @@ import { __ } from '@wordpress/i18n';
  */
 import { InputControl } from '../input-control';
 import { Text } from '../text';
-import { Spacer } from '../spacer';
-import { space } from '../utils/space';
 import { COLORS } from '../utils/colors-values';
 import type { StateReducer } from '../input-control/reducer/state';
 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 ) => {
@@ -48,14 +47,11 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 	return (
 		<InputControl
 			prefix={
-				<Spacer
-					as={ Text }
-					marginLeft={ space( 4 ) }
-					color={ COLORS.theme.accent }
-					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/input-with-slider.tsx b/packages/components/src/color-picker/input-with-slider.tsx
index b51db75c1f451..5e08fa42daf80 100644
--- a/packages/components/src/color-picker/input-with-slider.tsx
+++ b/packages/components/src/color-picker/input-with-slider.tsx
@@ -3,11 +3,10 @@
  */
 import { HStack } from '../h-stack';
 import { Text } from '../text';
-import { Spacer } from '../spacer';
-import { space } from '../utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
 import { COLORS } from '../utils/colors-values';
 import type { InputWithSliderProps } from './types';
+import InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';
 
 export const InputWithSlider = ( {
 	min,
@@ -39,20 +38,18 @@ export const InputWithSlider = ( {
 				value={ value }
 				onChange={ onNumberControlChange }
 				prefix={
-					<Spacer
-						as={ Text }
-						paddingLeft={ space( 4 ) }
-						color={ COLORS.theme.accent }
-						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/styles.ts b/packages/components/src/color-picker/styles.ts
index ecc75f5157625..a78f10de2e4a3 100644
--- a/packages/components/src/color-picker/styles.ts
+++ b/packages/components/src/color-picker/styles.ts
@@ -81,7 +81,7 @@ export const ColorfulWrapper = styled.div`
 	.react-colorful__alpha {
 		width: 184px;
 		height: 16px;
-		border-radius: 16px;
+		border-radius: ${ CONFIG.radiusFull };
 		margin-bottom: ${ space( 2 ) };
 	}
 
diff --git a/packages/components/src/combobox-control/README.md b/packages/components/src/combobox-control/README.md
index 9d00804e2f30e..5831c5ec2832c 100644
--- a/packages/components/src/combobox-control/README.md
+++ b/packages/components/src/combobox-control/README.md
@@ -111,6 +111,13 @@ If the control is clicked, the dropdown will expand regardless of this prop.
 -   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).
@@ -118,6 +125,14 @@ Custom renderer invoked for each option in the suggestion list. The render prop
 -   Type: `( args: { item: object } ) => ReactNode`
 -   Required: No
 
+#### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Type: `Boolean`
+- Required: No
+- Default: `false`
+
 #### __nextHasNoMarginBottom
 
 Start opting into the new margin-free styles that will become the default in a future version.
diff --git a/packages/components/src/combobox-control/index.tsx b/packages/components/src/combobox-control/index.tsx
index e3b1434be8c7c..5c6725a51b435 100644
--- a/packages/components/src/combobox-control/index.tsx
+++ b/packages/components/src/combobox-control/index.tsx
@@ -129,6 +129,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		},
 		__experimentalRenderItem,
 		expandOnFocus = true,
+		placeholder,
 	} = useDeprecated36pxDefaultSizeProp( props );
 
 	const [ value, setValue ] = useControlledValue( {
@@ -320,6 +321,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		<DetectOutside onFocusOutside={ onFocusOutside }>
 			<BaseControl
 				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+				__associatedWPComponentName="ComboboxControl"
 				className={ clsx( className, 'components-combobox-control' ) }
 				label={ label }
 				id={ `components-form-token-input-${ instanceId }` }
@@ -339,6 +341,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 								className="components-combobox-control__input"
 								instanceId={ instanceId }
 								ref={ inputContainer }
+								placeholder={ placeholder }
 								value={ isExpanded ? inputValue : currentLabel }
 								onFocus={ onFocus }
 								onBlur={ onBlur }
diff --git a/packages/components/src/combobox-control/stories/index.story.tsx b/packages/components/src/combobox-control/stories/index.story.tsx
index 0f45c8a54a2ee..516cd262fd5aa 100644
--- a/packages/components/src/combobox-control/stories/index.story.tsx
+++ b/packages/components/src/combobox-control/stories/index.story.tsx
@@ -76,6 +76,7 @@ const Template: StoryFn< typeof ComboboxControl > = ( {
 };
 export const Default = Template.bind( {} );
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	allowReset: false,
 	label: 'Select a country',
 	options: countryOptions,
@@ -135,8 +136,7 @@ const optionsWithDisabledOptions = countryOptions.map( ( option, index ) => ( {
 } ) );
 
 WithDisabledOptions.args = {
-	allowReset: false,
-	label: 'Select a country',
+	...Default.args,
 	options: optionsWithDisabledOptions,
 };
 
@@ -148,8 +148,7 @@ WithDisabledOptions.args = {
 export const NotExpandOnFocus = Template.bind( {} );
 
 NotExpandOnFocus.args = {
-	allowReset: false,
-	label: 'Select a country',
+	...Default.args,
 	options: countryOptions,
 	expandOnFocus: false,
 };
diff --git a/packages/components/src/combobox-control/test/index.tsx b/packages/components/src/combobox-control/test/index.tsx
index 76ce9cc4724c5..639407ac998ed 100644
--- a/packages/components/src/combobox-control/test/index.tsx
+++ b/packages/components/src/combobox-control/test/index.tsx
@@ -12,7 +12,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import ComboboxControl from '..';
+import _ComboboxControl from '..';
 import type { ComboboxControlOption, ComboboxControlProps } from '../types';
 
 const timezones = [
@@ -57,6 +57,10 @@ const getAllOptions = () => screen.getAllByRole( 'option' );
 const getOptionSearchString = ( option: ComboboxControlOption ) =>
 	option.label.substring( 0, 11 );
 
+const ComboboxControl = ( props: ComboboxControlProps ) => {
+	return <_ComboboxControl { ...props } __nextHasNoMarginBottom />;
+};
+
 const ControlledComboboxControl = ( {
 	value: valueProp,
 	onChange,
@@ -184,6 +188,46 @@ describe.each( [
 		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 ];
diff --git a/packages/components/src/combobox-control/types.ts b/packages/components/src/combobox-control/types.ts
index 61953ce946629..470b38c35e2c8 100644
--- a/packages/components/src/combobox-control/types.ts
+++ b/packages/components/src/combobox-control/types.ts
@@ -31,6 +31,7 @@ export type ComboboxControlProps = Pick<
 	 *
 	 * @default false
 	 * @deprecated
+	 * @ignore
 	 */
 	__next36pxDefaultSize?: boolean;
 	/**
@@ -81,4 +82,8 @@ export type ComboboxControlProps = Pick<
 	 * 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 0000000000000..de710bd2ab627
--- /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 0000000000000..4a8b22a712b03
--- /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/current/index.ts b/packages/components/src/composite/current/index.ts
deleted file mode 100644
index 96379f0029651..0000000000000
--- a/packages/components/src/composite/current/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Composite is a component that may contain navigable items represented by
- * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements
- * all the keyboard navigation mechanisms to ensure that there's only one
- * tab stop for the whole Composite element. This means that it can behave as
- * a roving tabindex or aria-activedescendant container.
- *
- * @see https://ariakit.org/components/composite
- */
-
-export {
-	Composite,
-	CompositeGroup,
-	CompositeGroupLabel,
-	CompositeItem,
-	CompositeRow,
-	useCompositeStore,
-} from '@ariakit/react';
-
-export type { CompositeStore, CompositeStoreProps } from '@ariakit/react';
diff --git a/packages/components/src/composite/current/stories/index.story.tsx b/packages/components/src/composite/current/stories/index.story.tsx
deleted file mode 100644
index 335ebc3244c91..0000000000000
--- a/packages/components/src/composite/current/stories/index.story.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * External dependencies
- */
-import type { Meta, StoryFn } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import {
-	Composite,
-	CompositeGroup,
-	CompositeRow,
-	CompositeItem,
-	useCompositeStore,
-} from '..';
-import { UseCompositeStorePlaceholder, transform } from './utils';
-
-const meta: Meta< typeof UseCompositeStorePlaceholder > = {
-	title: 'Components/Composite (V2)',
-	component: UseCompositeStorePlaceholder,
-	subcomponents: {
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		Composite,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		CompositeGroup,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		CompositeRow,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		CompositeItem,
-	},
-	tags: [ 'status-private' ],
-	parameters: {
-		docs: {
-			canvas: { sourceState: 'shown' },
-			source: { transform },
-			extractArgTypes: ( component: React.FunctionComponent ) => {
-				const name = component.displayName;
-				const path = name
-					?.replace(
-						/([a-z])([A-Z])/g,
-						( _, a, b ) => `${ a }-${ b.toLowerCase() }`
-					)
-					.toLowerCase();
-				const url = `https://ariakit.org/reference/${ path }`;
-				return {
-					props: {
-						name: 'Props',
-						description: `See <a href="${ url }">Ariakit docs</a> for <code>${ name }</code>`,
-						table: { type: { summary: undefined } },
-					},
-				};
-			},
-		},
-	},
-};
-export default meta;
-
-export const Default: StoryFn< typeof Composite > = ( { ...initialState } ) => {
-	const rtl = isRTL();
-	const store = useCompositeStore( { rtl, ...initialState } );
-
-	return (
-		<Composite role="grid" store={ store } aria-label="Ariakit Composite">
-			<CompositeRow role="row">
-				<CompositeItem role="gridcell">Item A1</CompositeItem>
-				<CompositeItem role="gridcell">Item A2</CompositeItem>
-				<CompositeItem role="gridcell">Item A3</CompositeItem>
-			</CompositeRow>
-			<CompositeRow role="row">
-				<CompositeItem role="gridcell">Item B1</CompositeItem>
-				<CompositeItem role="gridcell">Item B2</CompositeItem>
-				<CompositeItem role="gridcell">Item B3</CompositeItem>
-			</CompositeRow>
-			<CompositeRow role="row">
-				<CompositeItem role="gridcell">Item C1</CompositeItem>
-				<CompositeItem role="gridcell">Item C2</CompositeItem>
-				<CompositeItem role="gridcell">Item C3</CompositeItem>
-			</CompositeRow>
-		</Composite>
-	);
-};
diff --git a/packages/components/src/composite/current/stories/utils.tsx b/packages/components/src/composite/current/stories/utils.tsx
deleted file mode 100644
index 4b2d1bba4b312..0000000000000
--- a/packages/components/src/composite/current/stories/utils.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * External dependencies
- */
-import type { StoryContext } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import type { CompositeStoreProps } from '..';
-
-export function UseCompositeStorePlaceholder( props: CompositeStoreProps ) {
-	return (
-		<dl>
-			{ Object.entries( props ).map( ( [ name, value ] ) => (
-				<>
-					<dt>{ name }</dt>
-					<dd>{ JSON.stringify( value ) }</dd>
-				</>
-			) ) }
-		</dl>
-	);
-}
-UseCompositeStorePlaceholder.displayName = 'useCompositeStore';
-
-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
-		// `useCompositeStore` to convert store options into
-		// a composite store prop.
-		`const store = useCompositeStore(${ state });`,
-		'',
-		'return (',
-		'  ' +
-			code
-				// The generated output includes a full dump of everything
-				// in the store; the reader probably isn't interested in
-				// what that looks like, so instead we drop all of that
-				// in favor of the store generated above.
-				.replaceAll( /store=\{\{[\s\S]*?\}\}/g, 'store={ store }' )
-				// 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[\w ]*?)\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/group-label.tsx b/packages/components/src/composite/group-label.tsx
new file mode 100644
index 0000000000000..7e3c6ffdc7759
--- /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 0000000000000..bcfb47e684613
--- /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 0000000000000..1507a1879cc19
--- /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.CompositeGroup store={ store } { ...props } ref={ ref } />;
+} );
diff --git a/packages/components/src/composite/index.ts b/packages/components/src/composite/index.ts
deleted file mode 100644
index aa06a6adf36ef..0000000000000
--- a/packages/components/src/composite/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Originally this pointed at a Reakit implementation of
-// `Composite`, but we are removing Reakit entirely from the
-// codebase. We will continue to support the Reakit API
-// through the 'legacy' version, which uses Ariakit under
-// the hood.
-
-export * from './legacy';
diff --git a/packages/components/src/composite/index.tsx b/packages/components/src/composite/index.tsx
new file mode 100644
index 0000000000000..8eb562f5bdab3
--- /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 0000000000000..edbf0b92e039a
--- /dev/null
+++ b/packages/components/src/composite/item.tsx
@@ -0,0 +1,48 @@
+/**
+ * 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;
+
+	// If the active item is not connected, Composite may end up in a state
+	// where none of the items are tabbable. In this case, we force all items to
+	// be tabbable, so that as soon as an item received focus, it becomes active
+	// and Composite goes back to working as expected.
+	const tabbable = Ariakit.useStoreState( store, ( state ) => {
+		return (
+			state?.activeId !== null &&
+			! store?.item( state?.activeId )?.element?.isConnected
+		);
+	} );
+
+	return (
+		<Ariakit.CompositeItem
+			store={ store }
+			tabbable={ tabbable }
+			{ ...props }
+			ref={ ref }
+		/>
+	);
+} );
diff --git a/packages/components/src/composite/legacy/index.tsx b/packages/components/src/composite/legacy/index.tsx
index 5c5c674b5086b..22ddff6572dd0 100644
--- a/packages/components/src/composite/legacy/index.tsx
+++ b/packages/components/src/composite/legacy/index.tsx
@@ -5,19 +5,30 @@
  * 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 * as Current from '../current';
-import { useInstanceId } from '@wordpress/compose';
+import { Composite as Current } from '..';
 
 type Orientation = 'horizontal' | 'vertical';
 
@@ -73,7 +84,7 @@ export interface LegacyStateOptions {
 
 type Component = React.FunctionComponent< any >;
 
-type CompositeStore = ReturnType< typeof Current.useCompositeStore >;
+type CompositeStore = ReturnType< typeof Ariakit.useCompositeStore >;
 type CompositeStoreState = { store: CompositeStore };
 export type CompositeState = CompositeStoreState &
 	Required< Pick< LegacyStateOptions, 'baseId' > >;
@@ -93,9 +104,9 @@ type CompositeComponent< C extends Component > = (
 ) => React.ReactElement;
 type CompositeComponentProps = CompositeState &
 	(
-		| ComponentProps< typeof Current.CompositeGroup >
-		| ComponentProps< typeof Current.CompositeItem >
-		| ComponentProps< typeof Current.CompositeRow >
+		| ComponentProps< typeof Current.Group >
+		| ComponentProps< typeof Current.Item >
+		| ComponentProps< typeof Current.Row >
 	);
 
 function mapLegacyStatePropsToComponentProps(
@@ -113,12 +124,31 @@ function mapLegacyStatePropsToComponentProps(
 	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 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 );
 		const props = rest as ComponentProps< C >;
@@ -143,27 +173,60 @@ function proxyComposite< C extends Component >(
 // `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<
+const UnproxiedCompositeGroup = forwardRef<
 	any,
-	React.ComponentPropsWithoutRef<
-		typeof Current.CompositeGroup | typeof Current.CompositeRow
-	>
+	React.ComponentPropsWithoutRef< typeof Current.Group | typeof Current.Row >
 >( ( { role, ...props }, ref ) => {
-	const Component =
-		role === 'row' ? Current.CompositeRow : Current.CompositeGroup;
+	const Component = role === 'row' ? Current.Row : Current.Group;
 	return <Component ref={ ref } role={ role } { ...props } />;
 } );
-unproxiedCompositeGroup.displayName = 'CompositeGroup';
 
-export const Composite = proxyComposite( Current.Composite, { baseId: 'id' } );
-export const CompositeGroup = proxyComposite( unproxiedCompositeGroup );
-export const CompositeItem = proxyComposite( Current.CompositeItem, {
-	focusable: 'accessibleWhenDisabled',
-} );
+/**
+ * _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,
@@ -178,7 +241,7 @@ export function useCompositeState(
 
 	return {
 		baseId: useInstanceId( Composite, 'composite', baseId ),
-		store: Current.useCompositeStore( {
+		store: Ariakit.useCompositeStore( {
 			defaultActiveId,
 			rtl,
 			orientation,
diff --git a/packages/components/src/composite/legacy/stories/index.story.tsx b/packages/components/src/composite/legacy/stories/index.story.tsx
index e46d656a16810..1b8e07e9bbf56 100644
--- a/packages/components/src/composite/legacy/stories/index.story.tsx
+++ b/packages/components/src/composite/legacy/stories/index.story.tsx
@@ -15,7 +15,8 @@ import {
 import { UseCompositeStatePlaceholder, transform } from './utils';
 
 const meta: Meta< typeof UseCompositeStatePlaceholder > = {
-	title: 'Components/Composite',
+	title: 'Components (Deprecated)/Composite (Unstable)',
+	id: 'components-composite-unstable',
 	component: UseCompositeStatePlaceholder,
 	subcomponents: {
 		Composite,
diff --git a/packages/components/src/composite/legacy/stories/utils.tsx b/packages/components/src/composite/legacy/stories/utils.tsx
index 06edd34863469..2fb51c845f9fb 100644
--- a/packages/components/src/composite/legacy/stories/utils.tsx
+++ b/packages/components/src/composite/legacy/stories/utils.tsx
@@ -8,6 +8,25 @@ import type { StoryContext } from '@storybook/react';
  */
 import type { LegacyStateOptions } from '..';
 
+/**
+ * Renders a composite widget.
+ *
+ * This unstable component is deprecated. Use `Composite` instead.
+ *
+ * ```jsx
+ * import {
+ * 	__unstableUseCompositeState as useCompositeState,
+ * 	__unstableComposite as Composite,
+ * 	__unstableCompositeItem as CompositeItem,
+ * } from '@wordpress/components';
+ *
+ * const state = useCompositeState();
+ * <Composite state={ state }>
+ * 	<CompositeItem>Item 1</CompositeItem>
+ * 	<CompositeItem>Item 2</CompositeItem>
+ * </Composite>;
+ * ```
+ */
 export function UseCompositeStatePlaceholder( props: LegacyStateOptions ) {
 	return (
 		<dl>
diff --git a/packages/components/src/composite/legacy/test/index.tsx b/packages/components/src/composite/legacy/test/index.tsx
index 315532a8b5086..a118dbcfbadbb 100644
--- a/packages/components/src/composite/legacy/test/index.tsx
+++ b/packages/components/src/composite/legacy/test/index.tsx
@@ -1,8 +1,13 @@
 /**
  * External dependencies
  */
-import { queryByAttribute, render, screen } from '@testing-library/react';
-import { press, sleep, waitFor } from '@ariakit/test';
+import {
+	queryByAttribute,
+	render,
+	screen,
+	renderHook,
+} from '@testing-library/react';
+import { press, waitFor } from '@ariakit/test';
 
 /**
  * Internal dependencies
@@ -47,7 +52,7 @@ async function renderAndValidate( ...args: Parameters< typeof render > ) {
 		const activeButton = queryByAttribute(
 			'data-active-item',
 			view.baseElement,
-			''
+			'true'
 		);
 		expect( activeButton ).not.toBeNull();
 	} );
@@ -156,6 +161,57 @@ function getShiftTestItems() {
 	};
 }
 
+// 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',
@@ -176,15 +232,12 @@ describe.each( [
 				<button>After</button>
 			</>
 		);
-		renderAndValidate( <Test /> );
+		await renderAndValidate( <Test /> );
 
-		await sleep();
 		await press.Tab();
 		expect( screen.getByText( 'Before' ) ).toHaveFocus();
-		await sleep();
 		await press.Tab();
 		expect( screen.getByText( 'Item 1' ) ).toHaveFocus();
-		await sleep();
 		await press.Tab();
 		expect( screen.getByText( 'After' ) ).toHaveFocus();
 		await press.ShiftTab();
@@ -207,13 +260,12 @@ describe.each( [
 				</Composite>
 			);
 		};
-		renderAndValidate( <Test /> );
+		await renderAndValidate( <Test /> );
 
 		const { item1, item2, item3 } = getOneDimensionalItems();
 
 		expect( item2 ).toBeDisabled();
 
-		await sleep();
 		await press.Tab();
 		expect( item1 ).toHaveFocus();
 		await press.ArrowDown();
@@ -237,13 +289,12 @@ describe.each( [
 				</Composite>
 			);
 		};
-		renderAndValidate( <Test /> );
+		await renderAndValidate( <Test /> );
 		const { item1, item2, item3 } = getOneDimensionalItems();
 
 		expect( item2 ).toBeEnabled();
 		expect( item2 ).toHaveAttribute( 'aria-disabled', 'true' );
 
-		await sleep();
 		await press.Tab();
 		expect( item1 ).toHaveFocus();
 		await press.ArrowDown();
@@ -259,7 +310,7 @@ describe.each( [
 				} ) }
 			/>
 		);
-		renderAndValidate( <Test /> );
+		await renderAndValidate( <Test /> );
 		const { item1, item2, item3 } = getOneDimensionalItems();
 
 		expect( item1.id ).toMatch( 'test-id-1' );
@@ -276,10 +327,9 @@ describe.each( [
 				} ) }
 			/>
 		);
-		renderAndValidate( <Test /> );
+		await renderAndValidate( <Test /> );
 		const { item2 } = getOneDimensionalItems();
 
-		await sleep();
 		await press.Tab();
 		await waitFor( () => expect( item2 ).toHaveFocus() );
 	} );
@@ -291,39 +341,38 @@ describe.each( [
 ] )( '%s', ( _when, rtl ) => {
 	const { previous, next, first, last } = getKeys( rtl );
 
-	function useOneDimensionalTest( initialState?: InitialState ) {
+	async function useOneDimensionalTest( initialState?: InitialState ) {
 		const Test = () => (
 			<OneDimensionalTest
 				state={ useCompositeState( { rtl, ...initialState } ) }
 			/>
 		);
-		renderAndValidate( <Test /> );
+		await renderAndValidate( <Test /> );
 		return getOneDimensionalItems();
 	}
 
-	function useTwoDimensionalTest( initialState?: InitialState ) {
+	async function useTwoDimensionalTest( initialState?: InitialState ) {
 		const Test = () => (
 			<TwoDimensionalTest
 				state={ useCompositeState( { rtl, ...initialState } ) }
 			/>
 		);
-		renderAndValidate( <Test /> );
+		await renderAndValidate( <Test /> );
 		return getTwoDimensionalItems();
 	}
 
-	function useShiftTest( shift: boolean ) {
+	async function useShiftTest( shift: boolean ) {
 		const Test = () => (
 			<ShiftTest state={ useCompositeState( { rtl, shift } ) } />
 		);
-		renderAndValidate( <Test /> );
+		await renderAndValidate( <Test /> );
 		return getShiftTestItems();
 	}
 
 	describe( 'In one dimension', () => {
 		test( 'All directions work with no orientation', async () => {
-			const { item1, item2, item3 } = useOneDimensionalTest();
+			const { item1, item2, item3 } = await useOneDimensionalTest();
 
-			await sleep();
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
 			await press.ArrowDown();
@@ -357,11 +406,10 @@ describe.each( [
 		} );
 
 		test( 'Only left/right work with horizontal orientation', async () => {
-			const { item1, item2, item3 } = useOneDimensionalTest( {
+			const { item1, item2, item3 } = await useOneDimensionalTest( {
 				orientation: 'horizontal',
 			} );
 
-			await sleep();
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
 			await press.ArrowDown();
@@ -387,11 +435,10 @@ describe.each( [
 		} );
 
 		test( 'Only up/down work with vertical orientation', async () => {
-			const { item1, item2, item3 } = useOneDimensionalTest( {
+			const { item1, item2, item3 } = await useOneDimensionalTest( {
 				orientation: 'vertical',
 			} );
 
-			await sleep();
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
 			await press( next );
@@ -417,11 +464,10 @@ describe.each( [
 		} );
 
 		test( 'Focus wraps with loop enabled', async () => {
-			const { item1, item2, item3 } = useOneDimensionalTest( {
+			const { item1, item2, item3 } = await useOneDimensionalTest( {
 				loop: true,
 			} );
 
-			await sleep();
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
 			await press.ArrowDown();
@@ -442,9 +488,8 @@ describe.each( [
 	describe( 'In two dimensions', () => {
 		test( 'All directions work as standard', async () => {
 			const { itemA1, itemA2, itemA3, itemB1, itemB2, itemC1, itemC3 } =
-				useTwoDimensionalTest();
+				await useTwoDimensionalTest();
 
-			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press.ArrowUp();
@@ -479,9 +524,8 @@ describe.each( [
 
 		test( 'Focus wraps around rows/columns with loop enabled', async () => {
 			const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
-				useTwoDimensionalTest( { loop: true } );
+				await useTwoDimensionalTest( { loop: true } );
 
-			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press( next );
@@ -504,9 +548,8 @@ describe.each( [
 
 		test( 'Focus moves between rows/columns with wrap enabled', async () => {
 			const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
-				useTwoDimensionalTest( { wrap: true } );
+				await useTwoDimensionalTest( { wrap: true } );
 
-			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press( next );
@@ -534,12 +577,11 @@ describe.each( [
 		} );
 
 		test( 'Focus wraps around start/end with loop and wrap enabled', async () => {
-			const { itemA1, itemC3 } = useTwoDimensionalTest( {
+			const { itemA1, itemC3 } = await useTwoDimensionalTest( {
 				loop: true,
 				wrap: true,
 			} );
 
-			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press( previous );
@@ -553,9 +595,9 @@ describe.each( [
 		} );
 
 		test( 'Focus shifts if vertical neighbour unavailable when shift enabled', async () => {
-			const { itemA1, itemB1, itemB2, itemC1 } = useShiftTest( true );
+			const { itemA1, itemB1, itemB2, itemC1 } =
+				await useShiftTest( true );
 
-			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press.ArrowDown();
@@ -575,9 +617,8 @@ describe.each( [
 		} );
 
 		test( 'Focus does not shift if vertical neighbour unavailable when shift not enabled', async () => {
-			const { itemA1, itemB1, itemB2 } = useShiftTest( false );
+			const { itemA1, itemB1, itemB2 } = await useShiftTest( false );
 
-			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press.ArrowDown();
diff --git a/packages/components/src/composite/row.tsx b/packages/components/src/composite/row.tsx
new file mode 100644
index 0000000000000..1a88da557785e
--- /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 0000000000000..c5518375df8a6
--- /dev/null
+++ b/packages/components/src/composite/stories/index.story.tsx
@@ -0,0 +1,397 @@
+/**
+ * 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/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: { type: null } },
+		render: { control: { type: null } },
+		setActiveId: { control: { type: null } },
+		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 0000000000000..64619aaed01bd
--- /dev/null
+++ b/packages/components/src/composite/test/index.tsx
@@ -0,0 +1,123 @@
+/**
+ * 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 '..';
+
+// 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();
+} );
+
+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 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>
+		</>
+	);
+}
+
+describe( 'Composite', () => {
+	it( 'should remain focusable even when there are no elements in the DOM associated with the currently active ID', async () => {
+		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();
+	} );
+} );
diff --git a/packages/components/src/composite/typeahead.tsx b/packages/components/src/composite/typeahead.tsx
new file mode 100644
index 0000000000000..519c59ea374e5
--- /dev/null
+++ b/packages/components/src/composite/typeahead.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 { 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.CompositeRow 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 0000000000000..ed95c7f0253b3
--- /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/composite/v2.ts b/packages/components/src/composite/v2.ts
deleted file mode 100644
index 38d3f628d368b..0000000000000
--- a/packages/components/src/composite/v2.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// Although we have migrated away from Reakit, the 'current'
-// Ariakit implementation is still considered a v2.
-
-export * from './current';
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx b/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx
index e3620655aee1a..a92e973d88c5a 100644
--- a/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx
+++ b/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx
@@ -128,11 +128,11 @@ function ControlPoints( {
 	onStopControlPointChange,
 	__experimentalIsRenderedInSidebar,
 }: ControlPointsProps ) {
-	const controlPointMoveState = useRef< ControlPointMoveState >();
+	const controlPointMoveStateRef = useRef< ControlPointMoveState >();
 
 	const onMouseMove = ( event: MouseEvent ) => {
 		if (
-			controlPointMoveState.current === undefined ||
+			controlPointMoveStateRef.current === undefined ||
 			gradientPickerDomRef.current === null
 		) {
 			return;
@@ -144,14 +144,14 @@ function ControlPoints( {
 		);
 
 		const { initialPosition, index, significantMoveHappened } =
-			controlPointMoveState.current;
+			controlPointMoveStateRef.current;
 
 		if (
 			! significantMoveHappened &&
 			Math.abs( initialPosition - relativePosition ) >=
 				MINIMUM_SIGNIFICANT_MOVE
 		) {
-			controlPointMoveState.current.significantMoveHappened = true;
+			controlPointMoveStateRef.current.significantMoveHappened = true;
 		}
 
 		onChange(
@@ -163,13 +163,13 @@ function ControlPoints( {
 		if (
 			window &&
 			window.removeEventListener &&
-			controlPointMoveState.current &&
-			controlPointMoveState.current.listenersActivated
+			controlPointMoveStateRef.current &&
+			controlPointMoveStateRef.current.listenersActivated
 		) {
 			window.removeEventListener( 'mousemove', onMouseMove );
 			window.removeEventListener( 'mouseup', cleanEventListeners );
 			onStopControlPointChange();
-			controlPointMoveState.current.listenersActivated = false;
+			controlPointMoveStateRef.current.listenersActivated = false;
 		}
 	};
 
@@ -202,8 +202,8 @@ function ControlPoints( {
 									key={ index }
 									onClick={ () => {
 										if (
-											controlPointMoveState.current &&
-											controlPointMoveState.current
+											controlPointMoveStateRef.current &&
+											controlPointMoveStateRef.current
 												.significantMoveHappened
 										) {
 											return;
@@ -220,7 +220,7 @@ function ControlPoints( {
 											window &&
 											window.addEventListener
 										) {
-											controlPointMoveState.current = {
+											controlPointMoveStateRef.current = {
 												initialPosition,
 												index,
 												significantMoveHappened: false,
diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss
index e7828127ff8d3..fea18f340951e 100644
--- a/packages/components/src/custom-gradient-picker/style.scss
+++ b/packages/components/src/custom-gradient-picker/style.scss
@@ -1,7 +1,7 @@
 $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 16px handles inside, that leaves 32px padding, half of which is 1å6.
 
 .components-custom-gradient-picker__gradient-bar {
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	width: 100%;
 	height: $grid-unit-60;
 	position: relative;
@@ -48,7 +48,7 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 		height: inherit;
 		width: inherit;
 		min-width: $grid-unit-20;
-		border-radius: 50%;
+		border-radius: $radius-round;
 
 		background: $white;
 		padding: 2px;
@@ -65,7 +65,7 @@ $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.
@@ -100,25 +100,6 @@ $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-select-control-v2/custom-select.tsx b/packages/components/src/custom-select-control-v2/custom-select.tsx
index e925038812fa7..bb458abcc282f 100644
--- a/packages/components/src/custom-select-control-v2/custom-select.tsx
+++ b/packages/components/src/custom-select-control-v2/custom-select.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
@@ -62,7 +63,7 @@ const CustomSelectButton = ( {
 		CustomSelectStore,
 	'onChange'
 > ) => {
-	const { value: currentValue } = store.useState();
+	const { value: currentValue } = useStoreState( store );
 
 	const computedRenderSelectedValue = useMemo(
 		() => renderSelectedValue ?? defaultRenderSelectedValue,
diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts
index 701f69aa5757b..2b8bdb9946b7c 100644
--- a/packages/components/src/custom-select-control-v2/styles.ts
+++ b/packages/components/src/custom-select-control-v2/styles.ts
@@ -21,9 +21,9 @@ const ANIMATION_PARAMS = {
 };
 
 const INLINE_PADDING = {
-	compact: 8, // space(2)
-	small: 8, // space(2)
-	default: 16, // space(4)
+	compact: CONFIG.controlPaddingXSmall,
+	small: CONFIG.controlPaddingXSmall,
+	default: CONFIG.controlPaddingX,
 };
 
 const getSelectSize = (
@@ -118,8 +118,9 @@ export const SelectPopover = styled( Ariakit.SelectPopover )`
 	flex-direction: column;
 
 	background-color: ${ COLORS.theme.background };
-	border-radius: 2px;
+	border-radius: ${ CONFIG.radiusSmall };
 	border: 1px solid ${ COLORS.theme.foreground };
+	box-shadow: ${ CONFIG.elevationMedium };
 
 	/* z-index(".components-popover") */
 	z-index: 1000000;
@@ -132,12 +133,13 @@ export const SelectPopover = styled( Ariakit.SelectPopover )`
 	min-width: min-content;
 
 	/* Animation */
-	animation-duration: ${ ANIMATION_PARAMS.DURATION };
-	animation-timing-function: ${ ANIMATION_PARAMS.EASING };
-	animation-name: ${ slideDownAndFade };
-	will-change: transform, opacity;
-	@media ( prefers-reduced-motion ) {
-		animation-duration: 0s;
+	&[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] {
diff --git a/packages/components/src/custom-select-control-v2/test/index.tsx b/packages/components/src/custom-select-control-v2/test/index.tsx
index 3ff384852be04..060a367ba8597 100644
--- a/packages/components/src/custom-select-control-v2/test/index.tsx
+++ b/packages/components/src/custom-select-control-v2/test/index.tsx
@@ -1,8 +1,9 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
-import { click, press, sleep, type } from '@ariakit/test';
+import { screen } from '@testing-library/react';
+import { click, press, type } from '@ariakit/test';
+import { render } from '@ariakit/test/react';
 
 /**
  * WordPress dependencies
@@ -66,7 +67,7 @@ describe.each( [
 	const [ , Component ] = modeAndComponent;
 
 	it( 'Should replace the initial selection when a new item is selected', async () => {
-		render( <Component { ...defaultProps } /> );
+		await render( <Component { ...defaultProps } /> );
 
 		const currentSelectedItem = screen.getByRole( 'combobox', {
 			expanded: false,
@@ -94,13 +95,12 @@ describe.each( [
 	} );
 
 	it( 'Should keep current selection if dropdown is closed without changing selection', async () => {
-		render( <Component { ...defaultProps } /> );
+		await render( <Component { ...defaultProps } /> );
 
 		const currentSelectedItem = screen.getByRole( 'combobox', {
 			expanded: false,
 		} );
 
-		await sleep();
 		await press.Tab();
 		await press.Enter();
 		expect(
@@ -121,13 +121,12 @@ describe.each( [
 
 	describe( 'Keyboard behavior and accessibility', () => {
 		it( 'Should be able to change selection using keyboard', async () => {
-			render( <Component { ...defaultProps } /> );
+			await render( <Component { ...defaultProps } /> );
 
 			const currentSelectedItem = screen.getByRole( 'combobox', {
 				expanded: false,
 			} );
 
-			await sleep();
 			await press.Tab();
 			expect( currentSelectedItem ).toHaveFocus();
 
@@ -145,13 +144,12 @@ describe.each( [
 		} );
 
 		it( 'Should be able to type characters to select matching options', async () => {
-			render( <Component { ...defaultProps } /> );
+			await render( <Component { ...defaultProps } /> );
 
 			const currentSelectedItem = screen.getByRole( 'combobox', {
 				expanded: false,
 			} );
 
-			await sleep();
 			await press.Tab();
 			await press.Enter();
 			expect(
@@ -166,13 +164,12 @@ describe.each( [
 		} );
 
 		it( 'Can change selection with a focused input and closed dropdown if typed characters match an option', async () => {
-			render( <Component { ...defaultProps } /> );
+			await render( <Component { ...defaultProps } /> );
 
 			const currentSelectedItem = screen.getByRole( 'combobox', {
 				expanded: false,
 			} );
 
-			await sleep();
 			await press.Tab();
 			expect( currentSelectedItem ).toHaveFocus();
 			expect( currentSelectedItem ).toHaveTextContent( 'violets' );
@@ -194,7 +191,7 @@ describe.each( [
 		} );
 
 		it( 'Should have correct aria-selected value for selections', async () => {
-			render( <Component { ...defaultProps } /> );
+			await render( <Component { ...defaultProps } /> );
 
 			const currentSelectedItem = screen.getByRole( 'combobox', {
 				expanded: false,
@@ -244,7 +241,7 @@ describe.each( [
 				'ultraviolet morning light',
 			];
 
-			render(
+			await render(
 				<Component
 					defaultValue={ defaultValues }
 					onChange={ onChangeMock }
@@ -326,7 +323,7 @@ describe.each( [
 				'ultraviolet morning light',
 			];
 
-			render(
+			await render(
 				<Component defaultValue={ defaultValues } label="Multi-select">
 					{ defaultValues.map( ( item ) => (
 						<UncontrolledCustomSelectControlV2.Item
@@ -382,7 +379,7 @@ describe.each( [
 			return <img src={ `${ value }.jpg` } alt={ value as string } />;
 		};
 
-		render(
+		await render(
 			<Component label="Rendered" renderSelectedValue={ renderValue }>
 				<UncontrolledCustomSelectControlV2.Item value="april-29">
 					{ renderValue( 'april-29' ) }
@@ -418,13 +415,12 @@ describe.each( [
 	} );
 
 	it( 'Should open the select popover when focussing the trigger button and pressing arrow down', async () => {
-		render( <Component { ...defaultProps } /> );
+		await render( <Component { ...defaultProps } /> );
 
 		const currentSelectedItem = screen.getByRole( 'combobox', {
 			expanded: false,
 		} );
 
-		await sleep();
 		await press.Tab();
 		expect( currentSelectedItem ).toHaveFocus();
 		expect( currentSelectedItem ).toHaveTextContent( items[ 0 ].value );
@@ -437,8 +433,8 @@ describe.each( [
 		).toBeVisible();
 	} );
 
-	it( 'Should label the component correctly even when the label is not visible', () => {
-		render( <Component { ...defaultProps } hideLabelFromVision /> );
+	it( 'Should label the component correctly even when the label is not visible', async () => {
+		await render( <Component { ...defaultProps } hideLabelFromVision /> );
 
 		expect(
 			screen.getByRole( 'combobox', {
diff --git a/packages/components/src/custom-select-control/README.md b/packages/components/src/custom-select-control/README.md
index 6804f4cf6ecd3..a764a0df133ea 100644
--- a/packages/components/src/custom-select-control/README.md
+++ b/packages/components/src/custom-select-control/README.md
@@ -142,6 +142,13 @@ A handler for `blur` events on the trigger button.
 
 -   Required: No
 
+#### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Required: No
+- Default: `false`
+
 ## Related components
 
 -   Like this component, but implemented using a native `<select>` for when custom styling is not necessary, the `SelectControl` component.
diff --git a/packages/components/src/custom-select-control/index.tsx b/packages/components/src/custom-select-control/index.tsx
index 5bce6afc4d92b..ecd9dc37a8f49 100644
--- a/packages/components/src/custom-select-control/index.tsx
+++ b/packages/components/src/custom-select-control/index.tsx
@@ -4,18 +4,25 @@
 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 } from './types';
+import type { CustomSelectProps, CustomSelectOption } from './types';
+import { VisuallyHidden } from '../visually-hidden';
 
-function useDeprecatedProps( {
+function useDeprecatedProps< T extends CustomSelectOption >( {
 	__experimentalShowSelectedHint,
 	...otherProps
-}: CustomSelectProps ) {
+}: CustomSelectProps< T > ) {
 	return {
 		showSelectedHint: __experimentalShowSelectedHint,
 		...otherProps,
@@ -28,14 +35,25 @@ function useDeprecatedProps( {
 function applyOptionDeprecations( {
 	__experimentalHint,
 	...rest
-}: CustomSelectProps[ 'options' ][ number ] ) {
+}: CustomSelectOption ) {
 	return {
 		hint: __experimentalHint,
 		...rest,
 	};
 }
 
-function CustomSelectControl( props: CustomSelectProps ) {
+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,
 		describedBy,
@@ -48,8 +66,13 @@ function CustomSelectControl( props: CustomSelectProps ) {
 		...restProps
 	} = useDeprecatedProps( props );
 
+	const descriptionId = useInstanceId(
+		CustomSelectControl,
+		'custom-select-control__description'
+	);
+
 	// Forward props + store from v2 implementation
-	const store = Ariakit.useSelectStore( {
+	const store = Ariakit.useSelectStore< string >( {
 		async setValue( nextValue ) {
 			const nextOption = options.find(
 				( item ) => item.name === nextValue
@@ -117,9 +140,9 @@ function CustomSelectControl( props: CustomSelectProps ) {
 			);
 		} );
 
-	const renderSelectedValueHint = () => {
-		const { value: currentValue } = store.getState();
+	const { value: currentValue } = store.getState();
 
+	const renderSelectedValueHint = () => {
 		const selectedOptionHint = options
 			?.map( applyOptionDeprecations )
 			?.find( ( { name } ) => currentValue === name )?.hint;
@@ -153,23 +176,30 @@ function CustomSelectControl( props: CustomSelectProps ) {
 	} )();
 
 	return (
-		<_CustomSelect
-			aria-describedby={ describedBy }
-			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>
+		<>
+			<_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>
+		</>
 	);
 }
 
diff --git a/packages/components/src/custom-select-control/test/index.tsx b/packages/components/src/custom-select-control/test/index.tsx
index 73dcb039df3f1..b2ac5c19c6ab3 100644
--- a/packages/components/src/custom-select-control/test/index.tsx
+++ b/packages/components/src/custom-select-control/test/index.tsx
@@ -1,8 +1,9 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { click, press, sleep, type, waitFor } from '@ariakit/test';
+import { render } from '@ariakit/test/react';
 
 /**
  * WordPress dependencies
@@ -85,7 +86,7 @@ const ControlledCustomSelectControl = ( {
 
 it( 'Should apply external controlled updates', async () => {
 	const mockOnChange = jest.fn();
-	const { rerender } = render(
+	const { rerender } = await render(
 		<UncontrolledCustomSelectControl
 			{ ...props }
 			value={ props.options[ 0 ] }
@@ -101,7 +102,7 @@ it( 'Should apply external controlled updates', async () => {
 
 	expect( mockOnChange ).not.toHaveBeenCalled();
 
-	rerender(
+	await rerender(
 		<UncontrolledCustomSelectControl
 			{ ...props }
 			value={ props.options[ 1 ] }
@@ -124,7 +125,7 @@ describe.each( [
 
 	it( 'Should select the first option when no explicit initial value is passed without firing onChange', async () => {
 		const mockOnChange = jest.fn();
-		render( <Component { ...props } onChange={ mockOnChange } /> );
+		await render( <Component { ...props } onChange={ mockOnChange } /> );
 
 		expect(
 			screen.getByRole( 'combobox', {
@@ -140,7 +141,7 @@ describe.each( [
 
 	it( 'Should pick the initially selected option if the value prop is passed without firing onChange', async () => {
 		const mockOnChange = jest.fn();
-		render(
+		await render(
 			<Component
 				{ ...props }
 				onChange={ mockOnChange }
@@ -161,7 +162,7 @@ describe.each( [
 	} );
 
 	it( 'Should replace the initial selection when a new item is selected', async () => {
-		render( <Component { ...props } /> );
+		await render( <Component { ...props } /> );
 
 		const currentSelectedItem = screen.getByRole( 'combobox', {
 			expanded: false,
@@ -189,13 +190,12 @@ describe.each( [
 	} );
 
 	it( 'Should keep current selection if dropdown is closed without changing selection', async () => {
-		render( <Component { ...props } /> );
+		await render( <Component { ...props } /> );
 
 		const currentSelectedItem = screen.getByRole( 'combobox', {
 			expanded: false,
 		} );
 
-		await sleep();
 		await press.Tab();
 		await press.Enter();
 		expect(
@@ -217,7 +217,7 @@ describe.each( [
 	} );
 
 	it( 'Should apply class only to options that have a className defined', async () => {
-		render( <Component { ...props } /> );
+		await render( <Component { ...props } /> );
 
 		await click(
 			screen.getByRole( 'combobox', {
@@ -251,7 +251,7 @@ describe.each( [
 	} );
 
 	it( 'Should apply styles only to options that have styles defined', async () => {
-		render( <Component { ...props } /> );
+		await render( <Component { ...props } /> );
 
 		await click(
 			screen.getByRole( 'combobox', {
@@ -285,7 +285,7 @@ describe.each( [
 	} );
 
 	it( 'does not show selected hint by default', async () => {
-		render(
+		await render(
 			<Component
 				{ ...props }
 				label="Custom select"
@@ -306,7 +306,7 @@ describe.each( [
 	} );
 
 	it( 'shows selected hint when showSelectedHint is set', async () => {
-		render(
+		await render(
 			<Component
 				{ ...props }
 				label="Custom select"
@@ -331,7 +331,7 @@ describe.each( [
 	} );
 
 	it( 'shows selected hint in list of options when added, regardless of showSelectedHint prop', async () => {
-		render(
+		await render(
 			<Component
 				{ ...props }
 				label="Custom select"
@@ -355,7 +355,7 @@ describe.each( [
 	it( 'Should return object onChange', async () => {
 		const mockOnChange = jest.fn();
 
-		render( <Component { ...props } onChange={ mockOnChange } /> );
+		await render( <Component { ...props } onChange={ mockOnChange } /> );
 
 		await click(
 			screen.getByRole( 'combobox', {
@@ -385,9 +385,8 @@ describe.each( [
 	it( 'Should return selectedItem object when specified onChange', async () => {
 		const mockOnChange = jest.fn();
 
-		render( <Component { ...props } onChange={ mockOnChange } /> );
+		await render( <Component { ...props } onChange={ mockOnChange } /> );
 
-		await sleep();
 		await press.Tab();
 		expect(
 			screen.getByRole( 'combobox', {
@@ -412,7 +411,7 @@ describe.each( [
 	it( "Should pass arbitrary props to onChange's selectedItem, but apply only style and className to DOM elements", async () => {
 		const onChangeMock = jest.fn();
 
-		render( <Component { ...props } onChange={ onChangeMock } /> );
+		await render( <Component { ...props } onChange={ onChangeMock } /> );
 
 		const currentSelectedItem = screen.getByRole( 'combobox', {
 			expanded: false,
@@ -449,8 +448,8 @@ describe.each( [
 		);
 	} );
 
-	it( 'Should label the component correctly even when the label is not visible', () => {
-		render( <Component { ...props } hideLabelFromVision /> );
+	it( 'Should label the component correctly even when the label is not visible', async () => {
+		await render( <Component { ...props } hideLabelFromVision /> );
 
 		expect(
 			screen.getByRole( 'combobox', {
@@ -463,7 +462,7 @@ describe.each( [
 		it( 'Captures the keypress event and does not let it propagate', async () => {
 			const onKeyDown = jest.fn();
 
-			render(
+			await render(
 				<div
 					// This role="none" is required to prevent an eslint warning about accessibility.
 					role="none"
@@ -487,13 +486,12 @@ describe.each( [
 		} );
 
 		it( 'Should be able to change selection using keyboard', async () => {
-			render( <Component { ...props } /> );
+			await render( <Component { ...props } /> );
 
 			const currentSelectedItem = screen.getByRole( 'combobox', {
 				expanded: false,
 			} );
 
-			await sleep();
 			await press.Tab();
 			expect( currentSelectedItem ).toHaveFocus();
 
@@ -513,13 +511,12 @@ describe.each( [
 		} );
 
 		it( 'Should be able to type characters to select matching options', async () => {
-			render( <Component { ...props } /> );
+			await render( <Component { ...props } /> );
 
 			const currentSelectedItem = screen.getByRole( 'combobox', {
 				expanded: false,
 			} );
 
-			await sleep();
 			await press.Tab();
 			await press.Enter();
 			expect(
@@ -534,13 +531,12 @@ describe.each( [
 		} );
 
 		it( 'Can change selection with a focused input and closed dropdown if typed characters match an option', async () => {
-			render( <Component { ...props } /> );
+			await render( <Component { ...props } /> );
 
 			const currentSelectedItem = screen.getByRole( 'combobox', {
 				expanded: false,
 			} );
 
-			await sleep();
 			await press.Tab();
 			expect( currentSelectedItem ).toHaveFocus();
 			expect( currentSelectedItem ).toHaveTextContent(
@@ -564,13 +560,12 @@ describe.each( [
 		} );
 
 		it( 'Can change selection with a focused input and closed dropdown while pressing arrow keys', async () => {
-			render( <Component { ...props } /> );
+			await render( <Component { ...props } /> );
 
 			const currentSelectedItem = screen.getByRole( 'combobox', {
 				expanded: false,
 			} );
 
-			await sleep();
 			await press.Tab();
 			expect( currentSelectedItem ).toHaveFocus();
 			expect( currentSelectedItem ).toHaveTextContent(
@@ -591,7 +586,7 @@ describe.each( [
 		} );
 
 		it( 'Should have correct aria-selected value for selections', async () => {
-			render( <Component { ...props } /> );
+			await render( <Component { ...props } /> );
 
 			const currentSelectedItem = screen.getByRole( 'combobox', {
 				expanded: false,
@@ -646,7 +641,7 @@ describe.each( [
 			const onFocusMock = jest.fn();
 			const onBlurMock = jest.fn();
 
-			render(
+			await render(
 				<>
 					<Component
 						{ ...props }
@@ -670,5 +665,152 @@ describe.each( [
 			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 => {};
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ options }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ options }
+			value={ {
+				key: 'random string is also accepted for non-readonly options',
+				name: 'Narrow',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ options }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+				// @ts-expect-error: the option type should not be inferred from `value`
+				foo: 'foo',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ options }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+			} }
+			// To ensure the type inferring is working correctly, but this is not a common use case.
+			// @ts-expect-error: the option type should not be inferred from `onChange`
+			onChange={
+				onChange as ( obj: {
+					selectedItem: { key: string; name: string; foo: string };
+				} ) => void
+			}
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ optionsReadOnly }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ optionsReadOnly }
+			value={ {
+				// @ts-expect-error: random string is not accepted for immutable options
+				key: 'random string is not accepted for readonly options',
+				name: 'Narrow',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ optionsReadOnly }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+				// @ts-expect-error: the option type should not be inferred from `value`
+				foo: 'foo',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ optionsReadOnly }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+			} }
+			// To ensure the type inferring is working correctly, but this is not a common use case.
+			// @ts-expect-error: the option type should not be inferred from `onChange`
+			onChange={
+				onChange as ( obj: {
+					selectedItem: { key: string; name: string; foo: string };
+				} ) => void
+			}
+		/>;
 	} );
 } );
diff --git a/packages/components/src/custom-select-control/types.ts b/packages/components/src/custom-select-control/types.ts
index 98e9633b02f1a..0cbc2388e7963 100644
--- a/packages/components/src/custom-select-control/types.ts
+++ b/packages/components/src/custom-select-control/types.ts
@@ -6,7 +6,7 @@ import type { FocusEventHandler, MouseEventHandler } from 'react';
 /**
  * The object structure for the options array.
  */
-type Option = {
+export type CustomSelectOption = {
 	key: string;
 	name: string;
 	style?: React.CSSProperties;
@@ -24,15 +24,15 @@ type Option = {
 /**
  * The object returned from the onChange event.
  */
-type ChangeObject = {
+type CustomSelectChangeObject< T extends CustomSelectOption > = {
 	highlightedIndex?: number;
 	inputValue?: string;
 	isOpen?: boolean;
 	type?: string;
-	selectedItem: Option;
+	selectedItem: T;
 };
 
-export type CustomSelectProps = {
+export type CustomSelectProps< T extends CustomSelectOption > = {
 	/**
 	 * Optional classname for the component.
 	 */
@@ -55,7 +55,7 @@ export type CustomSelectProps = {
 	 * Function called with the control's internal state changes. The `selectedItem`
 	 * property contains the next selected item.
 	 */
-	onChange?: ( newValue: ChangeObject ) => void;
+	onChange?: ( newValue: CustomSelectChangeObject< NoInfer< T > > ) => void;
 	/**
 	 * A handler for `blur` events on the trigger button.
 	 *
@@ -83,7 +83,7 @@ export type CustomSelectProps = {
 	/**
 	 * The list of options that can be chosen from.
 	 */
-	options: Array< Option >;
+	options: ReadonlyArray< T >;
 	/**
 	 * The size of the control.
 	 *
@@ -93,7 +93,7 @@ export type CustomSelectProps = {
 	/**
 	 * Can be used to externally control the value of the control.
 	 */
-	value?: Option;
+	value?: NoInfer< T >;
 	/**
 	 * Use the `showSelectedHint` property instead.
 	 * @deprecated
diff --git a/packages/components/src/date-time/date/index.tsx b/packages/components/src/date-time/date/index.tsx
index 75bfbb76ba211..5a565ee38cec5 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,
@@ -29,6 +28,7 @@ import { useState, useRef, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { useLilius } from './use-lilius';
 import type { DatePickerProps } from '../types';
 import {
 	Wrapper,
@@ -125,6 +125,7 @@ export function DatePicker( {
 							)
 						);
 					} }
+					size="compact"
 				/>
 				<NavigatorHeading level={ 3 }>
 					<strong>
@@ -150,6 +151,7 @@ export function DatePicker( {
 							)
 						);
 					} }
+					size="compact"
 				/>
 			</Navigator>
 			<Calendar
diff --git a/packages/components/src/date-time/date/styles.ts b/packages/components/src/date-time/date/styles.ts
index c25cdca367910..84405854827ec 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 '../../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.theme.accent };
-			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.theme.accent };
-			border-radius: 2px;
-			bottom: 2px;
+			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/use-lilius.ts b/packages/components/src/date-time/date/test/use-lilius.ts
new file mode 100644
index 0000000000000..31b81fa11bb74
--- /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 0000000000000..2da204b3c7641
--- /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/index.ts b/packages/components/src/date-time/index.ts
index 8335366bcbb73..a103bac0d30ef 100644
--- a/packages/components/src/date-time/index.ts
+++ b/packages/components/src/date-time/index.ts
@@ -3,8 +3,7 @@
  */
 import { default as DatePicker } from './date';
 import { default as TimePicker } from './time';
-import { default as TimeInput } from './time-input';
 import { default as DateTimePicker } from './date-time';
 
-export { DatePicker, TimePicker, TimeInput };
+export { DatePicker, TimePicker };
 export default DateTimePicker;
diff --git a/packages/components/src/date-time/stories/time-input.story.tsx b/packages/components/src/date-time/stories/time-input.story.tsx
deleted file mode 100644
index c74d886e82477..0000000000000
--- a/packages/components/src/date-time/stories/time-input.story.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import type { Meta, StoryFn } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-/**
- * Internal dependencies
- */
-import { TimeInput } from '../time-input';
-
-const meta: Meta< typeof TimeInput > = {
-	title: 'Components/TimeInput',
-	component: TimeInput,
-	argTypes: {
-		onChange: { action: 'onChange', control: { type: null } },
-	},
-	tags: [ 'status-wip' ],
-	parameters: {
-		controls: { expanded: true },
-		docs: { canvas: { sourceState: 'shown' } },
-	},
-	args: {
-		onChange: action( 'onChange' ),
-	},
-};
-export default meta;
-
-const Template: StoryFn< typeof TimeInput > = ( args ) => {
-	return <TimeInput { ...args } />;
-};
-
-export const Default: StoryFn< typeof TimeInput > = Template.bind( {} );
-Default.args = {
-	label: 'Time',
-};
diff --git a/packages/components/src/date-time/stories/time.story.tsx b/packages/components/src/date-time/stories/time.story.tsx
index c48b8fb1d1592..947b5bd64d5eb 100644
--- a/packages/components/src/date-time/stories/time.story.tsx
+++ b/packages/components/src/date-time/stories/time.story.tsx
@@ -16,6 +16,8 @@ import TimePicker from '../time';
 const meta: Meta< typeof TimePicker > = {
 	title: '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: { type: null } },
@@ -49,3 +51,18 @@ const Template: StoryFn< typeof TimePicker > = ( {
 };
 
 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/time/index.tsx b/packages/components/src/date-time/time/index.tsx
index e2877a1ded5e1..90a8a901354a3 100644
--- a/packages/components/src/date-time/time/index.tsx
+++ b/packages/components/src/date-time/time/index.tsx
@@ -13,6 +13,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BaseControl from '../../base-control';
+import { VisuallyHidden } from '../../visually-hidden';
 import SelectControl from '../../select-control';
 import TimeZone from './timezone';
 import type { TimeInputValue, TimePickerProps } from '../types';
@@ -32,7 +33,7 @@ import {
 	validateInputElementTarget,
 } from '../utils';
 import { TIMEZONELESS_FORMAT } from '../constants';
-import { TimeInput } from '../time-input';
+import { TimeInput } from './time-input';
 
 const VALID_DATE_ORDERS = [ 'dmy', 'mdy', 'ymd' ];
 
@@ -61,6 +62,7 @@ export function TimePicker( {
 	currentTime,
 	onChange,
 	dateOrder: dateOrderProp,
+	hideLabelFromVision = false,
 }: TimePickerProps ) {
 	const [ date, setDate ] = useState( () =>
 		// Truncate the date at the minutes, see: #15495.
@@ -77,10 +79,28 @@ export function TimePicker( {
 		);
 	}, [ currentTime ] );
 
+	const monthOptions = [
+		{ value: '01', label: __( 'January' ) },
+		{ value: '02', label: __( 'February' ) },
+		{ value: '03', label: __( 'March' ) },
+		{ value: '04', label: __( 'April' ) },
+		{ value: '05', label: __( 'May' ) },
+		{ value: '06', label: __( 'June' ) },
+		{ value: '07', label: __( 'July' ) },
+		{ value: '08', label: __( 'August' ) },
+		{ value: '09', label: __( 'September' ) },
+		{ value: '10', label: __( 'October' ) },
+		{ value: '11', label: __( 'November' ) },
+		{ value: '12', label: __( 'December' ) },
+	] as const;
+
 	const { day, month, year, minutes, hours } = useMemo(
 		() => ( {
 			day: format( date, 'dd' ),
-			month: format( date, 'MM' ),
+			month: format(
+				date,
+				'MM'
+			) as ( typeof monthOptions )[ number ][ 'value' ],
 			year: format( date, 'yyyy' ),
 			minutes: format( date, 'mm' ),
 			hours: format( date, 'HH' ),
@@ -146,20 +166,7 @@ export function TimePicker( {
 				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				value={ month }
-				options={ [
-					{ value: '01', label: __( 'January' ) },
-					{ value: '02', label: __( 'February' ) },
-					{ value: '03', label: __( 'March' ) },
-					{ value: '04', label: __( 'April' ) },
-					{ value: '05', label: __( 'May' ) },
-					{ value: '06', label: __( 'June' ) },
-					{ value: '07', label: __( 'July' ) },
-					{ value: '08', label: __( 'August' ) },
-					{ value: '09', label: __( 'September' ) },
-					{ value: '10', label: __( 'October' ) },
-					{ value: '11', label: __( 'November' ) },
-					{ value: '12', label: __( 'December' ) },
-				] }
+				options={ monthOptions }
 				onChange={ ( value ) => {
 					const newDate = setMonth( date, Number( value ) - 1 );
 					setDate( newDate );
@@ -214,12 +221,18 @@ export function TimePicker( {
 			className="components-datetime__time" // Unused, for backwards compatibility.
 		>
 			<Fieldset>
-				<BaseControl.VisualLabel
-					as="legend"
-					className="components-datetime__time-legend" // Unused, for backwards compatibility.
-				>
-					{ __( 'Time' ) }
-				</BaseControl.VisualLabel>
+				{ hideLabelFromVision ? (
+					<VisuallyHidden as="legend">
+						{ __( 'Time' ) }
+					</VisuallyHidden>
+				) : (
+					<BaseControl.VisualLabel
+						as="legend"
+						className="components-datetime__time-legend" // Unused, for backwards compatibility.
+					>
+						{ __( 'Time' ) }
+					</BaseControl.VisualLabel>
+				) }
 				<HStack
 					className="components-datetime__time-wrapper" // Unused, for backwards compatibility.
 				>
@@ -236,12 +249,18 @@ export function TimePicker( {
 				</HStack>
 			</Fieldset>
 			<Fieldset>
-				<BaseControl.VisualLabel
-					as="legend"
-					className="components-datetime__time-legend" // Unused, for backwards compatibility.
-				>
-					{ __( 'Date' ) }
-				</BaseControl.VisualLabel>
+				{ hideLabelFromVision ? (
+					<VisuallyHidden as="legend">
+						{ __( 'Date' ) }
+					</VisuallyHidden>
+				) : (
+					<BaseControl.VisualLabel
+						as="legend"
+						className="components-datetime__time-legend" // Unused, for backwards compatibility.
+					>
+						{ __( 'Date' ) }
+					</BaseControl.VisualLabel>
+				) }
 				<HStack
 					className="components-datetime__time-wrapper" // Unused, for backwards compatibility.
 				>
@@ -252,4 +271,29 @@ export function TimePicker( {
 	);
 }
 
+/**
+ * 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 bba0cc500e0c8..066c8fb1d1d3c 100644
--- a/packages/components/src/date-time/time/styles.ts
+++ b/packages/components/src/date-time/time/styles.ts
@@ -62,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
 	);
diff --git a/packages/components/src/date-time/time/test/index.tsx b/packages/components/src/date-time/time/test/index.tsx
index 0b91d95a5fc92..6f843fda75336 100644
--- a/packages/components/src/date-time/time/test/index.tsx
+++ b/packages/components/src/date-time/time/test/index.tsx
@@ -281,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', () => {
diff --git a/packages/components/src/date-time/time-input/index.tsx b/packages/components/src/date-time/time/time-input/index.tsx
similarity index 76%
rename from packages/components/src/date-time/time-input/index.tsx
rename to packages/components/src/date-time/time/time-input/index.tsx
index bfac1e2b604c2..e2628fdb7a2b4 100644
--- a/packages/components/src/date-time/time-input/index.tsx
+++ b/packages/components/src/date-time/time/time-input/index.tsx
@@ -18,20 +18,22 @@ import {
 	HoursInput,
 	MinutesInput,
 	Fieldset,
-} from '../time/styles';
-import { HStack } from '../../h-stack';
-import Button from '../../button';
-import ButtonGroup from '../../button-group';
+} 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';
+} 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,
@@ -164,30 +166,28 @@ export function TimeInput( {
 					/>
 				</TimeWrapper>
 				{ is12Hour && (
-					<ButtonGroup
-						className="components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility.
+					<ToggleGroupControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						isBlock
+						label={ __( 'Select AM or PM' ) }
+						hideLabelFromVision
+						value={ dayPeriod }
+						onChange={ ( newValue ) => {
+							buildAmPmChangeCallback(
+								newValue as 'AM' | 'PM'
+							)();
+						} }
 					>
-						<Button
-							className="components-datetime__time-am-button" // Unused, for backwards compatibility.
-							variant={
-								dayPeriod === 'AM' ? 'primary' : 'secondary'
-							}
-							__next40pxDefaultSize
-							onClick={ buildAmPmChangeCallback( 'AM' ) }
-						>
-							{ __( 'AM' ) }
-						</Button>
-						<Button
-							className="components-datetime__time-pm-button" // Unused, for backwards compatibility.
-							variant={
-								dayPeriod === 'PM' ? 'primary' : 'secondary'
-							}
-							__next40pxDefaultSize
-							onClick={ buildAmPmChangeCallback( 'PM' ) }
-						>
-							{ __( 'PM' ) }
-						</Button>
-					</ButtonGroup>
+						<ToggleGroupControlOption
+							value="AM"
+							label={ __( 'AM' ) }
+						/>
+						<ToggleGroupControlOption
+							value="PM"
+							label={ __( 'PM' ) }
+						/>
+					</ToggleGroupControl>
 				) }
 			</HStack>
 		</Wrapper>
diff --git a/packages/components/src/date-time/time-input/test/index.tsx b/packages/components/src/date-time/time/time-input/test/index.tsx
similarity index 89%
rename from packages/components/src/date-time/time-input/test/index.tsx
rename to packages/components/src/date-time/time/time-input/test/index.tsx
index c107cd2c9d79b..eae082a12bc1c 100644
--- a/packages/components/src/date-time/time-input/test/index.tsx
+++ b/packages/components/src/date-time/time/time-input/test/index.tsx
@@ -80,12 +80,11 @@ describe( 'TimeInput', () => {
 		const minutesInput = screen.getByRole( 'spinbutton', {
 			name: 'Minutes',
 		} );
-		const amButton = screen.getByRole( 'button', { name: 'AM' } );
-		const pmButton = screen.getByRole( 'button', { name: 'PM' } );
+		const amButton = screen.getByRole( 'radio', { name: 'AM' } );
+		const pmButton = screen.getByRole( 'radio', { name: 'PM' } );
 
-		// TODO: Update assert these states through the accessibility tree rather than through styles, see: https://github.com/WordPress/gutenberg/issues/61163
-		expect( amButton ).toHaveClass( 'is-primary' );
-		expect( pmButton ).not.toHaveClass( 'is-primary' );
+		expect( amButton ).toBeChecked();
+		expect( pmButton ).not.toBeChecked();
 		expect( hoursInput ).not.toHaveValue( 0 );
 		expect( hoursInput ).toHaveValue( 12 );
 
@@ -94,7 +93,7 @@ describe( 'TimeInput', () => {
 		await user.keyboard( '{Tab}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( { hours: 0, minutes: 35 } );
-		expect( amButton ).toHaveClass( 'is-primary' );
+		expect( amButton ).toBeChecked();
 
 		await user.clear( hoursInput );
 		await user.type( hoursInput, '12' );
@@ -107,7 +106,7 @@ describe( 'TimeInput', () => {
 			hours: 12,
 			minutes: 35,
 		} );
-		expect( pmButton ).toHaveClass( 'is-primary' );
+		expect( pmButton ).toBeChecked();
 	} );
 
 	it( 'should call onChange with defined minutes steps', async () => {
diff --git a/packages/components/src/date-time/types.ts b/packages/components/src/date-time/types.ts
index b3716d5c135c6..1f2298d9d450b 100644
--- a/packages/components/src/date-time/types.ts
+++ b/packages/components/src/date-time/types.ts
@@ -29,6 +29,13 @@ export type TimePickerProps = {
 	 * time as an argument.
 	 */
 	onChange?: ( time: string ) => void;
+
+	/**
+	 * If true, the label will only be visible to screen readers.
+	 *
+	 * @default false
+	 */
+	hideLabelFromVision?: boolean;
 };
 
 export type TimeInputValue = {
@@ -130,7 +137,10 @@ export type DatePickerProps = {
 };
 
 export type DateTimePickerProps = Omit< DatePickerProps, 'onChange' > &
-	Omit< TimePickerProps, 'currentTime' | 'onChange' > & {
+	Omit<
+		TimePickerProps,
+		'currentTime' | 'onChange' | 'hideLabelFromVision'
+	> & {
 		/**
 		 * The function called when a new date or time has been selected. It is
 		 * passed the date and time as an argument.
diff --git a/packages/components/src/dimension-control/README.md b/packages/components/src/dimension-control/README.md
index 498322931b7ab..78c1a60275c13 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>
@@ -17,6 +21,7 @@ export default function MyCustomDimensionControl() {
 
 	return (
 		<DimensionControl
+			__nextHasNoMarginBottom
 			label={ 'Padding' }
 			icon={ 'desktop' }
 			onChange={ ( value ) => setPaddingSize( value ) }
@@ -91,3 +96,19 @@ A callback which is triggered when a spacing size value changes (is selected/cli
 -   **Required:** No
 
 A string of classes to be added to the control component.
+
+### `__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.tsx b/packages/components/src/dimension-control/index.tsx
index 8ba0de0ce0599..25880f9b4fdb3 100644
--- a/packages/components/src/dimension-control/index.tsx
+++ b/packages/components/src/dimension-control/index.tsx
@@ -16,11 +16,21 @@ 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';
+
+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.
  *
- * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+ * @deprecated
  *
  * ```jsx
  * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
@@ -31,6 +41,7 @@ import type { SelectControlSingleSelectionProps } from '../select-control/types'
  *
  * 	return (
  * 		<DimensionControl
+ * 			__nextHasNoMarginBottom
  * 			label={ 'Padding' }
  * 			icon={ 'desktop' }
  * 			onChange={ ( value ) => setPaddingSize( value ) }
@@ -43,6 +54,7 @@ import type { SelectControlSingleSelectionProps } from '../select-control/types'
 export function DimensionControl( props: DimensionControlProps ) {
 	const {
 		__next40pxDefaultSize = false,
+		__nextHasNoMarginBottom = false,
 		label,
 		value,
 		sizes = sizesTable,
@@ -51,6 +63,11 @@ export function DimensionControl( props: DimensionControlProps ) {
 		className = '',
 	} = props;
 
+	deprecated( 'wp.components.DimensionControl', {
+		since: '6.7',
+		version: '7.0',
+	} );
+
 	const onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =
 		( val ) => {
 			const theSize = findSizeBySlug( sizes, val );
@@ -85,15 +102,21 @@ export function DimensionControl( props: DimensionControlProps ) {
 	);
 
 	return (
-		<SelectControl
-			__next40pxDefaultSize={ __next40pxDefaultSize }
-			className={ clsx( className, 'block-editor-dimension-control' ) }
-			label={ selectLabel }
-			hideLabelFromVision={ false }
-			value={ value }
-			onChange={ onChangeSpacingSize }
-			options={ formatSizesAsOptions( sizes ) }
-		/>
+		<ContextSystemProvider value={ CONTEXT_VALUE }>
+			<SelectControl
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+				className={ clsx(
+					className,
+					'block-editor-dimension-control'
+				) }
+				label={ selectLabel }
+				hideLabelFromVision={ false }
+				value={ value }
+				onChange={ onChangeSpacingSize }
+				options={ formatSizesAsOptions( sizes ) }
+			/>
+		</ContextSystemProvider>
 	);
 }
 
diff --git a/packages/components/src/dimension-control/stories/index.story.tsx b/packages/components/src/dimension-control/stories/index.story.tsx
index 33d5bad4ff4b1..15a63fcf6ccf6 100644
--- a/packages/components/src/dimension-control/stories/index.story.tsx
+++ b/packages/components/src/dimension-control/stories/index.story.tsx
@@ -13,9 +13,15 @@ import sizes from '../sizes';
  */
 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 (Experimental)/DimensionControl',
+	title: 'Components (Deprecated)/DimensionControl',
+	id: 'components-dimensioncontrol',
 	argTypes: {
 		onChange: { action: 'onChange' },
 		value: { control: { type: null } },
@@ -42,8 +48,8 @@ const Template: StoryFn< typeof DimensionControl > = ( args ) => (
 );
 
 export const Default = Template.bind( {} );
-
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	label: 'Please select a size',
 	sizes,
 };
diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
index 1d3cd12a2aa31..bd2c26d641fe7 100644
--- a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
+++ b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
@@ -13,10 +13,6 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -49,7 +45,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   min-height: 0;
 }
 
-.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
+.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;
@@ -120,6 +116,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
+  color: currentColor;
   cursor: inherit;
   display: block;
   font-family: inherit;
@@ -160,8 +157,8 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 }
 
 .emotion-21 {
-  margin-bottom: 0;
-  padding-right: calc(4px * 2);
+  -webkit-padding-end: 8px;
+  padding-inline-end: 8px;
   position: absolute;
   pointer-events: none;
   right: 0;
@@ -252,7 +249,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
             class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
+              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
@@ -298,10 +295,6 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -334,7 +327,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   min-height: 0;
 }
 
-.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
+.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;
@@ -405,6 +398,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
+  color: currentColor;
   cursor: inherit;
   display: block;
   font-family: inherit;
@@ -445,8 +439,8 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 }
 
 .emotion-21 {
-  margin-bottom: 0;
-  padding-right: calc(4px * 2);
+  -webkit-padding-end: 8px;
+  padding-inline-end: 8px;
   position: absolute;
   pointer-events: none;
   right: 0;
@@ -547,7 +541,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
             class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
+              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
@@ -593,10 +587,6 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -629,7 +619,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   min-height: 0;
 }
 
-.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
+.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;
@@ -700,6 +690,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
+  color: currentColor;
   cursor: inherit;
   display: block;
   font-family: inherit;
@@ -740,8 +731,8 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 }
 
 .emotion-21 {
-  margin-bottom: 0;
-  padding-right: calc(4px * 2);
+  -webkit-padding-end: 8px;
+  padding-inline-end: 8px;
   position: absolute;
   pointer-events: none;
   right: 0;
@@ -854,7 +845,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
             class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
+              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
@@ -900,10 +891,6 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -936,7 +923,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   min-height: 0;
 }
 
-.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
+.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;
@@ -1007,6 +994,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
+  color: currentColor;
   cursor: inherit;
   display: block;
   font-family: inherit;
@@ -1047,8 +1035,8 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
 }
 
 .emotion-21 {
-  margin-bottom: 0;
-  padding-right: calc(4px * 2);
+  -webkit-padding-end: 8px;
+  padding-inline-end: 8px;
   position: absolute;
   pointer-events: none;
   right: 0;
@@ -1161,7 +1149,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
             class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
+              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
diff --git a/packages/components/src/dimension-control/test/index.test.js b/packages/components/src/dimension-control/test/index.test.js
index 1d65dd86c7e7c..14f1c509f70cf 100644
--- a/packages/components/src/dimension-control/test/index.test.js
+++ b/packages/components/src/dimension-control/test/index.test.js
@@ -12,7 +12,11 @@ import { plus } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { DimensionControl } from '../';
+import { DimensionControl as _DimensionControl } from '../';
+
+const DimensionControl = ( props ) => {
+	return <_DimensionControl { ...props } __nextHasNoMarginBottom />;
+};
 
 describe( 'DimensionControl', () => {
 	const onChangeHandler = jest.fn();
@@ -27,6 +31,7 @@ describe( 'DimensionControl', () => {
 			const { container } = render(
 				<DimensionControl instanceId={ instanceId } label="Padding" />
 			);
+			expect( console ).toHaveWarned();
 			expect( container ).toMatchSnapshot();
 		} );
 
diff --git a/packages/components/src/dimension-control/types.ts b/packages/components/src/dimension-control/types.ts
index 671454f18c8a9..03a4edf29153b 100644
--- a/packages/components/src/dimension-control/types.ts
+++ b/packages/components/src/dimension-control/types.ts
@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import type { IconType } from '../icon';
+import type { SelectControlProps } from '../select-control/types';
 
 export type Size = {
 	/**
@@ -14,7 +15,10 @@ export type Size = {
 	slug: string;
 };
 
-export type DimensionControlProps = {
+export type DimensionControlProps = Pick<
+	SelectControlProps,
+	'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
+> & {
 	/**
 	 * Label for the control.
 	 */
@@ -45,10 +49,4 @@ export type DimensionControlProps = {
 	 * @default ''
 	 */
 	className?: string;
-	/**
-	 * Start opting into the larger default height that will become the default size in a future version.
-	 *
-	 * @default false
-	 */
-	__next40pxDefaultSize?: boolean;
 };
diff --git a/packages/components/src/draggable/index.tsx b/packages/components/src/draggable/index.tsx
index 0a3000538dbf2..b9dea8fed4306 100644
--- a/packages/components/src/draggable/index.tsx
+++ b/packages/components/src/draggable/index.tsx
@@ -71,7 +71,7 @@ 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.
@@ -80,7 +80,7 @@ export function Draggable( {
 	 */
 	function end( event: DragEvent ) {
 		event.preventDefault();
-		cleanup.current();
+		cleanupRef.current();
 
 		if ( onDragEnd ) {
 			onDragEnd( event );
@@ -216,7 +216,7 @@ export function Draggable( {
 			onDragStart( event );
 		}
 
-		cleanup.current = () => {
+		cleanupRef.current = () => {
 			// Remove drag clone.
 			if ( cloneWrapper && cloneWrapper.parentNode ) {
 				cloneWrapper.parentNode.removeChild( cloneWrapper );
@@ -235,7 +235,7 @@ export function Draggable( {
 
 	useEffect(
 		() => () => {
-			cleanup.current();
+			cleanupRef.current();
 		},
 		[]
 	);
diff --git a/packages/components/src/drop-zone/style.scss b/packages/components/src/drop-zone/style.scss
index 2793dc708cf03..d3cd18a75b1f8 100644
--- a/packages/components/src/drop-zone/style.scss
+++ b/packages/components/src/drop-zone/style.scss
@@ -7,7 +7,7 @@
 	z-index: z-index(".components-drop-zone");
 	visibility: hidden;
 	opacity: 0;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 
 	&.is-active {
 		opacity: 1;
diff --git a/packages/components/src/dropdown-menu-v2/README.md b/packages/components/src/dropdown-menu-v2/README.md
index 2902b54116976..771b5b74b24bf 100644
--- a/packages/components/src/dropdown-menu-v2/README.md
+++ b/packages/components/src/dropdown-menu-v2/README.md
@@ -1,11 +1,10 @@
-# `DropdownMenu` (v2)
+# `DropdownMenuV2`
 
 <div class="callout callout-alert">
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-`DropdownMenu` displays a menu to the user (such as a set of actions or functions) triggered by a button.
-
+`DropdownMenuV2` displays a menu to the user (such as a set of actions or functions) triggered by a button.
 
 ## Design guidelines
 
@@ -46,7 +45,7 @@ This component is still highly experimental, and it's not normally accessible to
 
 The component exposes a set of components that are meant to be used in combination with each other in order to implement a `DropdownMenu` correctly.
 
-### `DropdownMenu`
+### `DropdownMenuV2`
 
 The root component, used to specify the menu's trigger and its contents.
 
@@ -58,62 +57,62 @@ The component accepts the following props:
 
 The trigger button
 
-- Required: yes
+-   Required: yes
 
 ##### `children`: `React.ReactNode`
 
 The contents of the dropdown
 
-- Required: yes
+-   Required: yes
 
 ##### `defaultOpen`: `boolean`
 
 The open state of the dropdown menu when it is initially rendered. Use when not wanting to control its open state.
 
-- Required: no
-- Default: `false`
+-   Required: no
+-   Default: `false`
 
 ##### `open`: `boolean`
 
 The controlled open state of the dropdown menu. Must be used in conjunction with `onOpenChange`.
 
-- Required: no
+-   Required: no
 
 ##### `onOpenChange`: `(open: boolean) => void`
 
 Event handler called when the open state of the dropdown menu changes.
 
-- Required: no
+-   Required: no
 
 ##### `modal`: `boolean`
 
 The modality of the dropdown menu. 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`
+-   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 dropdown menu popover.
 
-- Required: no
-- Default: `'bottom-start'` for root-level menus, `'right-start'` for nested menus
+-   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
+-   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
+-   Required: no
+-   Default: `0` for root-level menus, `-8` for nested menus
 
-### `DropdownMenuItem`
+### `DropdownMenuV2.Item`
 
 Used to render a menu item.
 
@@ -125,35 +124,35 @@ The component accepts the following props:
 
 The contents of the item
 
-- Required: yes
+-   Required: yes
 
 ##### `prefix`: `React.ReactNode`
 
 The contents of the item's prefix.
 
-- Required: no
+-   Required: no
 
 ##### `suffix`: `React.ReactNode`
 
 The contents of the item's suffix.
 
-- Required: no
+-   Required: no
 
 ##### `hideOnClick`: `boolean`
 
 Whether to hide the dropdown menu when the menu item is clicked.
 
-- Required: no
-- Default: `true`
+-   Required: no
+-   Default: `true`
 
 ##### `disabled`: `boolean`
 
 Determines if the element is disabled.
 
-- Required: no
-- Default: `false`
+-   Required: no
+-   Default: `false`
 
-### `DropdownMenuCheckboxItem`
+### `DropdownMenuV2.CheckboxItem`
 
 Used to render a checkbox item.
 
@@ -165,61 +164,61 @@ The component accepts the following props:
 
 The contents of the item
 
-- Required: yes
+-   Required: yes
 
 ##### `suffix`: `React.ReactNode`
 
 The contents of the item's suffix.
 
-- Required: no
+-   Required: no
 
 ##### `hideOnClick`: `boolean`
 
 Whether to hide the dropdown menu when the menu item is clicked.
 
-- Required: no
-- Default: `false`
+-   Required: no
+-   Default: `false`
 
 ##### `disabled`: `boolean`
 
 Determines if the element is disabled.
 
-- Required: no
-- Default: `false`
+-   Required: no
+-   Default: `false`
 
 ##### `name`: `string`
 
 The checkbox item's name.
 
-- Required: yes
+-   Required: yes
 
 ##### `value`: `string`
 
 The checkbox item's value, useful when using multiple checkbox items
- associated to the same `name`.
+associated to the same `name`.
 
-- Required: no
+-   Required: no
 
 ##### `checked`: `boolean`
 
 The checkbox item's value, useful when using multiple checkbox items
- associated to the same `name`.
+associated to the same `name`.
 
-- Required: no
+-   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
+-   Required: no
 
 ##### `onChange`: `( event: React.ChangeEvent< HTMLInputElement > ) => void;`
 
 Event handler called when the checked state of the checkbox menu item changes.
 
-- Required: no
+-   Required: no
 
-### `DropdownMenuRadioItem`
+### `DropdownMenuV2.RadioItem`
 
 Used to render a radio item.
 
@@ -231,60 +230,60 @@ The component accepts the following props:
 
 The contents of the item
 
-- Required: yes
+-   Required: yes
 
 ##### `suffix`: `React.ReactNode`
 
 The contents of the item's suffix.
 
-- Required: no
+-   Required: no
 
 ##### `hideOnClick`: `boolean`
 
 Whether to hide the dropdown menu when the menu item is clicked.
 
-- Required: no
-- Default: `false`
+-   Required: no
+-   Default: `false`
 
 ##### `disabled`: `boolean`
 
 Determines if the element is disabled.
 
-- Required: no
-- Default: `false`
+-   Required: no
+-   Default: `false`
 
 ##### `name`: `string`
 
 The radio item's name.
 
-- Required: yes
+-   Required: yes
 
 ##### `value`: `string | number`
 
 The radio item's value.
 
-- Required: yes
+-   Required: yes
 
 ##### `checked`: `boolean`
 
 The checkbox item's value, useful when using multiple checkbox items
- associated to the same `name`.
+associated to the same `name`.
 
-- Required: no
+-   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
+-   Required: no
 
 ##### `onChange`: `( event: React.ChangeEvent< HTMLInputElement > ) => void;`
 
 Event handler called when the checked radio menu item changes.
 
-- Required: no
+-   Required: no
 
-### `DropdownMenuItemLabel`
+### `DropdownMenuV2.ItemLabel`
 
 Used to render the menu item's label.
 
@@ -296,9 +295,9 @@ The component accepts the following props:
 
 The label contents.
 
-- Required: yes
+-   Required: yes
 
-### `DropdownMenuItemHelpText`
+### `DropdownMenuV2.ItemHelpText`
 
 Used to render the menu item's help text.
 
@@ -310,9 +309,9 @@ The component accepts the following props:
 
 The help text contents.
 
-- Required: yes
+-   Required: yes
 
-### `DropdownMenuGroup`
+### `DropdownMenuV2.Group`
 
 Used to group menu items.
 
@@ -324,8 +323,22 @@ The component accepts the following props:
 
 The contents of the group.
 
-- Required: yes
+-   Required: yes
+
+### `DropdownMenuV2.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 group label.
+
+-   Required: yes
 
-### `DropdownMenuSeparatorProps`
+### `DropdownMenuV2.Separator`
 
 Used to render a visual separator.
diff --git a/packages/components/src/dropdown-menu-v2/checkbox-item.tsx b/packages/components/src/dropdown-menu-v2/checkbox-item.tsx
new file mode 100644
index 0000000000000..bcbc920cbb720
--- /dev/null
+++ b/packages/components/src/dropdown-menu-v2/checkbox-item.tsx
@@ -0,0 +1,63 @@
+/**
+ * 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 { DropdownMenuContext } from './context';
+import type { DropdownMenuCheckboxItemProps } from './types';
+import * as Styled from './styles';
+import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';
+
+export const DropdownMenuCheckboxItem = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< DropdownMenuCheckboxItemProps, 'div', false >
+>( function DropdownMenuCheckboxItem(
+	{ suffix, children, onBlur, hideOnClick = false, ...props },
+	ref
+) {
+	// TODO: Remove when https://github.com/ariakit/ariakit/issues/4083 is fixed
+	const focusVisibleFixProps = useTemporaryFocusVisibleFix( { onBlur } );
+	const dropdownMenuContext = useContext( DropdownMenuContext );
+
+	return (
+		<Styled.DropdownMenuCheckboxItem
+			ref={ ref }
+			{ ...props }
+			{ ...focusVisibleFixProps }
+			accessibleWhenDisabled
+			hideOnClick={ hideOnClick }
+			store={ dropdownMenuContext?.store }
+		>
+			<Ariakit.MenuItemCheck
+				store={ dropdownMenuContext?.store }
+				render={ <Styled.ItemPrefixWrapper /> }
+				// Override some ariakit inline styles
+				style={ { width: 'auto', height: 'auto' } }
+			>
+				<Icon icon={ check } size={ 24 } />
+			</Ariakit.MenuItemCheck>
+
+			<Styled.DropdownMenuItemContentWrapper>
+				<Styled.DropdownMenuItemChildrenWrapper>
+					{ children }
+				</Styled.DropdownMenuItemChildrenWrapper>
+
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.DropdownMenuItemContentWrapper>
+		</Styled.DropdownMenuCheckboxItem>
+	);
+} );
diff --git a/packages/components/src/dropdown-menu-v2/context.tsx b/packages/components/src/dropdown-menu-v2/context.tsx
new file mode 100644
index 0000000000000..b285843327267
--- /dev/null
+++ b/packages/components/src/dropdown-menu-v2/context.tsx
@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DropdownMenuContext as DropdownMenuContextType } from './types';
+
+export const DropdownMenuContext = createContext<
+	DropdownMenuContextType | undefined
+>( undefined );
diff --git a/packages/components/src/dropdown-menu-v2/group-label.tsx b/packages/components/src/dropdown-menu-v2/group-label.tsx
new file mode 100644
index 0000000000000..7d838ef9fa620
--- /dev/null
+++ b/packages/components/src/dropdown-menu-v2/group-label.tsx
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { DropdownMenuContext } from './context';
+import { Text } from '../text';
+import type { DropdownMenuGroupLabelProps } from './types';
+import * as Styled from './styles';
+
+export const DropdownMenuGroupLabel = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< DropdownMenuGroupLabelProps, 'div', false >
+>( function DropdownMenuGroup( props, ref ) {
+	const dropdownMenuContext = useContext( DropdownMenuContext );
+	return (
+		<Styled.DropdownMenuGroupLabel
+			ref={ ref }
+			render={
+				// @ts-expect-error The `children` prop is passed
+				<Text
+					upperCase
+					variant="muted"
+					size="11px"
+					weight={ 500 }
+					lineHeight="16px"
+				/>
+			}
+			{ ...props }
+			store={ dropdownMenuContext?.store }
+		/>
+	);
+} );
diff --git a/packages/components/src/dropdown-menu-v2/group.tsx b/packages/components/src/dropdown-menu-v2/group.tsx
new file mode 100644
index 0000000000000..f2bf79015bc69
--- /dev/null
+++ b/packages/components/src/dropdown-menu-v2/group.tsx
@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { DropdownMenuContext } from './context';
+import type { DropdownMenuGroupProps } from './types';
+import * as Styled from './styles';
+
+export const DropdownMenuGroup = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< DropdownMenuGroupProps, 'div', false >
+>( function DropdownMenuGroup( props, ref ) {
+	const dropdownMenuContext = useContext( DropdownMenuContext );
+	return (
+		<Styled.DropdownMenuGroup
+			ref={ ref }
+			{ ...props }
+			store={ dropdownMenuContext?.store }
+		/>
+	);
+} );
diff --git a/packages/components/src/dropdown-menu-v2/index.tsx b/packages/components/src/dropdown-menu-v2/index.tsx
index c53286a7da128..50c4f3069d51b 100644
--- a/packages/components/src/dropdown-menu-v2/index.tsx
+++ b/packages/components/src/dropdown-menu-v2/index.tsx
@@ -2,13 +2,12 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
  */
 import {
-	forwardRef,
-	createContext,
 	useContext,
 	useMemo,
 	cloneElement,
@@ -16,165 +15,27 @@ import {
 	useCallback,
 } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
-import { check, chevronRightSmall } from '@wordpress/icons';
-import { SVG, Circle } from '@wordpress/primitives';
+import { chevronRightSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { useContextSystem, contextConnect } from '../context';
 import type { WordPressComponentProps } from '../context';
-import Icon from '../icon';
 import type {
 	DropdownMenuContext as DropdownMenuContextType,
 	DropdownMenuProps,
-	DropdownMenuGroupProps,
-	DropdownMenuItemProps,
-	DropdownMenuCheckboxItemProps,
-	DropdownMenuRadioItemProps,
-	DropdownMenuSeparatorProps,
 } from './types';
 import * as Styled from './styles';
-
-export const DropdownMenuContext = createContext<
-	DropdownMenuContextType | undefined
->( undefined );
-
-export const DropdownMenuItem = forwardRef<
-	HTMLDivElement,
-	WordPressComponentProps< DropdownMenuItemProps, 'div', false >
->( function DropdownMenuItem(
-	{ prefix, suffix, children, hideOnClick = true, ...props },
-	ref
-) {
-	const dropdownMenuContext = useContext( DropdownMenuContext );
-
-	return (
-		<Styled.DropdownMenuItem
-			ref={ ref }
-			{ ...props }
-			accessibleWhenDisabled
-			hideOnClick={ hideOnClick }
-			store={ dropdownMenuContext?.store }
-		>
-			<Styled.ItemPrefixWrapper>{ prefix }</Styled.ItemPrefixWrapper>
-
-			<Styled.DropdownMenuItemContentWrapper>
-				<Styled.DropdownMenuItemChildrenWrapper>
-					{ children }
-				</Styled.DropdownMenuItemChildrenWrapper>
-
-				{ suffix && (
-					<Styled.ItemSuffixWrapper>
-						{ suffix }
-					</Styled.ItemSuffixWrapper>
-				) }
-			</Styled.DropdownMenuItemContentWrapper>
-		</Styled.DropdownMenuItem>
-	);
-} );
-
-export const DropdownMenuCheckboxItem = forwardRef<
-	HTMLDivElement,
-	WordPressComponentProps< DropdownMenuCheckboxItemProps, 'div', false >
->( function DropdownMenuCheckboxItem(
-	{ suffix, children, hideOnClick = false, ...props },
-	ref
-) {
-	const dropdownMenuContext = useContext( DropdownMenuContext );
-
-	return (
-		<Styled.DropdownMenuCheckboxItem
-			ref={ ref }
-			{ ...props }
-			accessibleWhenDisabled
-			hideOnClick={ hideOnClick }
-			store={ dropdownMenuContext?.store }
-		>
-			<Ariakit.MenuItemCheck
-				store={ dropdownMenuContext?.store }
-				render={ <Styled.ItemPrefixWrapper /> }
-				// Override some ariakit inline styles
-				style={ { width: 'auto', height: 'auto' } }
-			>
-				<Icon icon={ check } size={ 24 } />
-			</Ariakit.MenuItemCheck>
-
-			<Styled.DropdownMenuItemContentWrapper>
-				<Styled.DropdownMenuItemChildrenWrapper>
-					{ children }
-				</Styled.DropdownMenuItemChildrenWrapper>
-
-				{ suffix && (
-					<Styled.ItemSuffixWrapper>
-						{ suffix }
-					</Styled.ItemSuffixWrapper>
-				) }
-			</Styled.DropdownMenuItemContentWrapper>
-		</Styled.DropdownMenuCheckboxItem>
-	);
-} );
-
-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 DropdownMenuRadioItem = forwardRef<
-	HTMLDivElement,
-	WordPressComponentProps< DropdownMenuRadioItemProps, 'div', false >
->( function DropdownMenuRadioItem(
-	{ suffix, children, hideOnClick = false, ...props },
-	ref
-) {
-	const dropdownMenuContext = useContext( DropdownMenuContext );
-
-	return (
-		<Styled.DropdownMenuRadioItem
-			ref={ ref }
-			{ ...props }
-			accessibleWhenDisabled
-			hideOnClick={ hideOnClick }
-			store={ dropdownMenuContext?.store }
-		>
-			<Ariakit.MenuItemCheck
-				store={ dropdownMenuContext?.store }
-				render={ <Styled.ItemPrefixWrapper /> }
-				// Override some ariakit inline styles
-				style={ { width: 'auto', height: 'auto' } }
-			>
-				<Icon icon={ radioCheck } size={ 24 } />
-			</Ariakit.MenuItemCheck>
-
-			<Styled.DropdownMenuItemContentWrapper>
-				<Styled.DropdownMenuItemChildrenWrapper>
-					{ children }
-				</Styled.DropdownMenuItemChildrenWrapper>
-
-				{ suffix && (
-					<Styled.ItemSuffixWrapper>
-						{ suffix }
-					</Styled.ItemSuffixWrapper>
-				) }
-			</Styled.DropdownMenuItemContentWrapper>
-		</Styled.DropdownMenuRadioItem>
-	);
-} );
-
-export const DropdownMenuGroup = forwardRef<
-	HTMLDivElement,
-	WordPressComponentProps< DropdownMenuGroupProps, 'div', false >
->( function DropdownMenuGroup( props, ref ) {
-	const dropdownMenuContext = useContext( DropdownMenuContext );
-	return (
-		<Styled.DropdownMenuGroup
-			ref={ ref }
-			{ ...props }
-			store={ dropdownMenuContext?.store }
-		/>
-	);
-} );
+import { DropdownMenuContext } from './context';
+import { DropdownMenuItem } from './item';
+import { DropdownMenuCheckboxItem } from './checkbox-item';
+import { DropdownMenuRadioItem } from './radio-item';
+import { DropdownMenuGroup } from './group';
+import { DropdownMenuGroupLabel } from './group-label';
+import { DropdownMenuSeparator } from './separator';
+import { DropdownMenuItemLabel } from './item-label';
+import { DropdownMenuItemHelpText } from './item-help-text';
 
 const UnconnectedDropdownMenu = (
 	props: WordPressComponentProps< DropdownMenuProps, 'div', false >,
@@ -248,9 +109,12 @@ const UnconnectedDropdownMenu = (
 	);
 
 	// Extract the side from the applied placement — useful for animations.
-	const appliedPlacementSide = dropdownMenuStore
-		.useState( 'placement' )
-		.split( '-' )[ 0 ];
+	// Using `currentPlacement` instead of `placement` to make sure that we
+	// use the final computed placement (including "flips" etc).
+	const appliedPlacementSide = useStoreState(
+		dropdownMenuStore,
+		'currentPlacement'
+	).split( '-' )[ 0 ];
 
 	if (
 		dropdownMenuStore.parent &&
@@ -311,7 +175,7 @@ const UnconnectedDropdownMenu = (
 			/>
 
 			{ /* Menu popover */ }
-			<Styled.DropdownMenu
+			<Ariakit.Menu
 				{ ...otherProps }
 				modal={ modal }
 				store={ dropdownMenuStore }
@@ -323,60 +187,58 @@ const UnconnectedDropdownMenu = (
 				shift={ shift ?? ( dropdownMenuStore.parent ? -4 : 0 ) }
 				hideOnHoverOutside={ false }
 				data-side={ appliedPlacementSide }
-				variant={ variant }
 				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>
+				) }
 			>
 				<DropdownMenuContext.Provider value={ contextValue }>
 					{ children }
 				</DropdownMenuContext.Provider>
-			</Styled.DropdownMenu>
+			</Ariakit.Menu>
 		</>
 	);
 };
-export const DropdownMenu = contextConnect(
-	UnconnectedDropdownMenu,
-	'DropdownMenu'
-);
-
-export const DropdownMenuSeparator = forwardRef<
-	HTMLHRElement,
-	WordPressComponentProps< DropdownMenuSeparatorProps, 'hr', false >
->( function DropdownMenuSeparator( props, ref ) {
-	const dropdownMenuContext = useContext( DropdownMenuContext );
-	return (
-		<Styled.DropdownMenuSeparator
-			ref={ ref }
-			{ ...props }
-			store={ dropdownMenuContext?.store }
-			variant={ dropdownMenuContext?.variant }
-		/>
-	);
-} );
 
-export const DropdownMenuItemLabel = forwardRef<
-	HTMLSpanElement,
-	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
->( function DropdownMenuItemLabel( props, ref ) {
-	return (
-		<Styled.DropdownMenuItemLabel
-			numberOfLines={ 1 }
-			ref={ ref }
-			{ ...props }
-		/>
-	);
-} );
+export const DropdownMenuV2 = Object.assign(
+	contextConnect( UnconnectedDropdownMenu, 'DropdownMenu' ),
+	{
+		Context: Object.assign( DropdownMenuContext, {
+			displayName: 'DropdownMenuV2.Context',
+		} ),
+		Item: Object.assign( DropdownMenuItem, {
+			displayName: 'DropdownMenuV2.Item',
+		} ),
+		RadioItem: Object.assign( DropdownMenuRadioItem, {
+			displayName: 'DropdownMenuV2.RadioItem',
+		} ),
+		CheckboxItem: Object.assign( DropdownMenuCheckboxItem, {
+			displayName: 'DropdownMenuV2.CheckboxItem',
+		} ),
+		Group: Object.assign( DropdownMenuGroup, {
+			displayName: 'DropdownMenuV2.Group',
+		} ),
+		GroupLabel: Object.assign( DropdownMenuGroupLabel, {
+			displayName: 'DropdownMenuV2.GroupLabel',
+		} ),
+		Separator: Object.assign( DropdownMenuSeparator, {
+			displayName: 'DropdownMenuV2.Separator',
+		} ),
+		ItemLabel: Object.assign( DropdownMenuItemLabel, {
+			displayName: 'DropdownMenuV2.ItemLabel',
+		} ),
+		ItemHelpText: Object.assign( DropdownMenuItemHelpText, {
+			displayName: 'DropdownMenuV2.ItemHelpText',
+		} ),
+	}
+);
 
-export const DropdownMenuItemHelpText = forwardRef<
-	HTMLSpanElement,
-	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
->( function DropdownMenuItemHelpText( props, ref ) {
-	return (
-		<Styled.DropdownMenuItemHelpText
-			numberOfLines={ 2 }
-			ref={ ref }
-			{ ...props }
-		/>
-	);
-} );
+export default DropdownMenuV2;
diff --git a/packages/components/src/dropdown-menu-v2/item-help-text.tsx b/packages/components/src/dropdown-menu-v2/item-help-text.tsx
new file mode 100644
index 0000000000000..0408d20dfbd40
--- /dev/null
+++ b/packages/components/src/dropdown-menu-v2/item-help-text.tsx
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import * as Styled from './styles';
+
+export const DropdownMenuItemHelpText = forwardRef<
+	HTMLSpanElement,
+	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
+>( function DropdownMenuItemHelpText( props, ref ) {
+	return (
+		<Styled.DropdownMenuItemHelpText
+			numberOfLines={ 2 }
+			ref={ ref }
+			{ ...props }
+		/>
+	);
+} );
diff --git a/packages/components/src/dropdown-menu-v2/item-label.tsx b/packages/components/src/dropdown-menu-v2/item-label.tsx
new file mode 100644
index 0000000000000..a1f9391af2f92
--- /dev/null
+++ b/packages/components/src/dropdown-menu-v2/item-label.tsx
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import * as Styled from './styles';
+
+export const DropdownMenuItemLabel = forwardRef<
+	HTMLSpanElement,
+	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
+>( function DropdownMenuItemLabel( props, ref ) {
+	return (
+		<Styled.DropdownMenuItemLabel
+			numberOfLines={ 1 }
+			ref={ ref }
+			{ ...props }
+		/>
+	);
+} );
diff --git a/packages/components/src/dropdown-menu-v2/item.tsx b/packages/components/src/dropdown-menu-v2/item.tsx
new file mode 100644
index 0000000000000..2680603db22aa
--- /dev/null
+++ b/packages/components/src/dropdown-menu-v2/item.tsx
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import type { DropdownMenuItemProps } from './types';
+import * as Styled from './styles';
+import { DropdownMenuContext } from './context';
+import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';
+
+export const DropdownMenuItem = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< DropdownMenuItemProps, 'div', false >
+>( function DropdownMenuItem(
+	{ prefix, suffix, children, onBlur, hideOnClick = true, ...props },
+	ref
+) {
+	// TODO: Remove when https://github.com/ariakit/ariakit/issues/4083 is fixed
+	const focusVisibleFixProps = useTemporaryFocusVisibleFix( { onBlur } );
+	const dropdownMenuContext = useContext( DropdownMenuContext );
+
+	return (
+		<Styled.DropdownMenuItem
+			ref={ ref }
+			{ ...props }
+			{ ...focusVisibleFixProps }
+			accessibleWhenDisabled
+			hideOnClick={ hideOnClick }
+			store={ dropdownMenuContext?.store }
+		>
+			<Styled.ItemPrefixWrapper>{ prefix }</Styled.ItemPrefixWrapper>
+
+			<Styled.DropdownMenuItemContentWrapper>
+				<Styled.DropdownMenuItemChildrenWrapper>
+					{ children }
+				</Styled.DropdownMenuItemChildrenWrapper>
+
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.DropdownMenuItemContentWrapper>
+		</Styled.DropdownMenuItem>
+	);
+} );
diff --git a/packages/components/src/dropdown-menu-v2/radio-item.tsx b/packages/components/src/dropdown-menu-v2/radio-item.tsx
new file mode 100644
index 0000000000000..547d8f257cdf4
--- /dev/null
+++ b/packages/components/src/dropdown-menu-v2/radio-item.tsx
@@ -0,0 +1,70 @@
+/**
+ * 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 { DropdownMenuContext } from './context';
+import type { DropdownMenuRadioItemProps } from './types';
+import * as Styled from './styles';
+import { SVG, Circle } from '@wordpress/primitives';
+import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';
+
+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 DropdownMenuRadioItem = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< DropdownMenuRadioItemProps, 'div', false >
+>( function DropdownMenuRadioItem(
+	{ suffix, children, onBlur, hideOnClick = false, ...props },
+	ref
+) {
+	// TODO: Remove when https://github.com/ariakit/ariakit/issues/4083 is fixed
+	const focusVisibleFixProps = useTemporaryFocusVisibleFix( { onBlur } );
+	const dropdownMenuContext = useContext( DropdownMenuContext );
+
+	return (
+		<Styled.DropdownMenuRadioItem
+			ref={ ref }
+			{ ...props }
+			{ ...focusVisibleFixProps }
+			accessibleWhenDisabled
+			hideOnClick={ hideOnClick }
+			store={ dropdownMenuContext?.store }
+		>
+			<Ariakit.MenuItemCheck
+				store={ dropdownMenuContext?.store }
+				render={ <Styled.ItemPrefixWrapper /> }
+				// Override some ariakit inline styles
+				style={ { width: 'auto', height: 'auto' } }
+			>
+				<Icon icon={ radioCheck } size={ 24 } />
+			</Ariakit.MenuItemCheck>
+
+			<Styled.DropdownMenuItemContentWrapper>
+				<Styled.DropdownMenuItemChildrenWrapper>
+					{ children }
+				</Styled.DropdownMenuItemChildrenWrapper>
+
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.DropdownMenuItemContentWrapper>
+		</Styled.DropdownMenuRadioItem>
+	);
+} );
diff --git a/packages/components/src/dropdown-menu-v2/separator.tsx b/packages/components/src/dropdown-menu-v2/separator.tsx
new file mode 100644
index 0000000000000..bc5aff7ae2611
--- /dev/null
+++ b/packages/components/src/dropdown-menu-v2/separator.tsx
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { DropdownMenuContext } from './context';
+import type { DropdownMenuSeparatorProps } from './types';
+import * as Styled from './styles';
+
+export const DropdownMenuSeparator = forwardRef<
+	HTMLHRElement,
+	WordPressComponentProps< DropdownMenuSeparatorProps, 'hr', false >
+>( function DropdownMenuSeparator( props, ref ) {
+	const dropdownMenuContext = useContext( DropdownMenuContext );
+	return (
+		<Styled.DropdownMenuSeparator
+			ref={ ref }
+			{ ...props }
+			store={ dropdownMenuContext?.store }
+			variant={ dropdownMenuContext?.variant }
+		/>
+	);
+} );
diff --git a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx
index a2fc476cd8ac0..90d15ca2ea6c1 100644
--- a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx
+++ b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx
@@ -14,43 +14,35 @@ import { useState, useMemo, useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import { useCx } from '../../utils';
-import {
-	DropdownMenu,
-	DropdownMenuItem,
-	DropdownMenuCheckboxItem,
-	DropdownMenuGroup,
-	DropdownMenuSeparator,
-	DropdownMenuContext,
-	DropdownMenuRadioItem,
-	DropdownMenuItemLabel,
-	DropdownMenuItemHelpText,
-} from '..';
+import DropdownMenuV2 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 DropdownMenu > = {
+const meta: Meta< typeof DropdownMenuV2 > = {
 	title: 'Components (Experimental)/DropdownMenu V2',
-	component: DropdownMenu,
+	component: DropdownMenuV2,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		DropdownMenuItem,
+		Item: DropdownMenuV2.Item,
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		DropdownMenuCheckboxItem,
+		CheckboxItem: DropdownMenuV2.CheckboxItem,
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		DropdownMenuGroup,
+		Group: DropdownMenuV2.Group,
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		DropdownMenuSeparator,
+		GroupLabel: DropdownMenuV2.GroupLabel,
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		DropdownMenuContext,
+		Separator: DropdownMenuV2.Separator,
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		DropdownMenuRadioItem,
+		Context: DropdownMenuV2.Context,
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		DropdownMenuItemLabel,
+		RadioItem: DropdownMenuV2.RadioItem,
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		DropdownMenuItemHelpText,
+		ItemLabel: DropdownMenuV2.ItemLabel,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		ItemHelpText: DropdownMenuV2.ItemHelpText,
 	},
 	argTypes: {
 		children: { control: { type: null } },
@@ -68,51 +60,52 @@ const meta: Meta< typeof DropdownMenu > = {
 };
 export default meta;
 
-export const Default: StoryFn< typeof DropdownMenu > = ( props ) => (
-	<DropdownMenu { ...props }>
-		<DropdownMenuItem>
-			<DropdownMenuItemLabel>Label</DropdownMenuItemLabel>
-		</DropdownMenuItem>
-		<DropdownMenuItem>
-			<DropdownMenuItemLabel>Label</DropdownMenuItemLabel>
-			<DropdownMenuItemHelpText>Help text</DropdownMenuItemHelpText>
-		</DropdownMenuItem>
-		<DropdownMenuItem>
-			<DropdownMenuItemLabel>Label</DropdownMenuItemLabel>
-			<DropdownMenuItemHelpText>
+export const Default: StoryFn< typeof DropdownMenuV2 > = ( props ) => (
+	<DropdownMenuV2 { ...props }>
+		<DropdownMenuV2.Item>
+			<DropdownMenuV2.ItemLabel>Label</DropdownMenuV2.ItemLabel>
+		</DropdownMenuV2.Item>
+		<DropdownMenuV2.Item>
+			<DropdownMenuV2.ItemLabel>Label</DropdownMenuV2.ItemLabel>
+			<DropdownMenuV2.ItemHelpText>Help text</DropdownMenuV2.ItemHelpText>
+		</DropdownMenuV2.Item>
+		<DropdownMenuV2.Item>
+			<DropdownMenuV2.ItemLabel>Label</DropdownMenuV2.ItemLabel>
+			<DropdownMenuV2.ItemHelpText>
 				The menu item help text is automatically truncated when there
 				are more than two lines of text
-			</DropdownMenuItemHelpText>
-		</DropdownMenuItem>
-		<DropdownMenuItem hideOnClick={ false }>
-			<DropdownMenuItemLabel>Label</DropdownMenuItemLabel>
-			<DropdownMenuItemHelpText>
+			</DropdownMenuV2.ItemHelpText>
+		</DropdownMenuV2.Item>
+		<DropdownMenuV2.Item hideOnClick={ false }>
+			<DropdownMenuV2.ItemLabel>Label</DropdownMenuV2.ItemLabel>
+			<DropdownMenuV2.ItemHelpText>
 				This item doesn&apos;t close the menu on click
-			</DropdownMenuItemHelpText>
-		</DropdownMenuItem>
-		<DropdownMenuItem disabled>Disabled item</DropdownMenuItem>
-		<DropdownMenuSeparator />
-		<DropdownMenuGroup>
-			<DropdownMenuItem
+			</DropdownMenuV2.ItemHelpText>
+		</DropdownMenuV2.Item>
+		<DropdownMenuV2.Item disabled>Disabled item</DropdownMenuV2.Item>
+		<DropdownMenuV2.Separator />
+		<DropdownMenuV2.Group>
+			<DropdownMenuV2.GroupLabel>Group label</DropdownMenuV2.GroupLabel>
+			<DropdownMenuV2.Item
 				prefix={ <Icon icon={ customLink } size={ 24 } /> }
 			>
-				<DropdownMenuItemLabel>With prefix</DropdownMenuItemLabel>
-			</DropdownMenuItem>
-			<DropdownMenuItem suffix="⌘S">With suffix</DropdownMenuItem>
-			<DropdownMenuItem
+				<DropdownMenuV2.ItemLabel>With prefix</DropdownMenuV2.ItemLabel>
+			</DropdownMenuV2.Item>
+			<DropdownMenuV2.Item suffix="⌘S">With suffix</DropdownMenuV2.Item>
+			<DropdownMenuV2.Item
 				disabled
 				prefix={ <Icon icon={ formatCapitalize } size={ 24 } /> }
 				suffix="⌥⌘T"
 			>
-				<DropdownMenuItemLabel>
+				<DropdownMenuV2.ItemLabel>
 					Disabled with prefix and suffix
-				</DropdownMenuItemLabel>
-				<DropdownMenuItemHelpText>
+				</DropdownMenuV2.ItemLabel>
+				<DropdownMenuV2.ItemHelpText>
 					And help text
-				</DropdownMenuItemHelpText>
-			</DropdownMenuItem>
-		</DropdownMenuGroup>
-	</DropdownMenu>
+				</DropdownMenuV2.ItemHelpText>
+			</DropdownMenuV2.Item>
+		</DropdownMenuV2.Group>
+	</DropdownMenuV2>
 );
 Default.args = {
 	trigger: (
@@ -122,48 +115,56 @@ Default.args = {
 	),
 };
 
-export const WithSubmenu: StoryFn< typeof DropdownMenu > = ( props ) => (
-	<DropdownMenu { ...props }>
-		<DropdownMenuItem>Level 1 item</DropdownMenuItem>
-		<DropdownMenu
+export const WithSubmenu: StoryFn< typeof DropdownMenuV2 > = ( props ) => (
+	<DropdownMenuV2 { ...props }>
+		<DropdownMenuV2.Item>Level 1 item</DropdownMenuV2.Item>
+		<DropdownMenuV2
 			trigger={
-				<DropdownMenuItem suffix="Suffix">
-					<DropdownMenuItemLabel>
+				<DropdownMenuV2.Item suffix="Suffix">
+					<DropdownMenuV2.ItemLabel>
 						Submenu trigger item with a long label
-					</DropdownMenuItemLabel>
-				</DropdownMenuItem>
+					</DropdownMenuV2.ItemLabel>
+				</DropdownMenuV2.Item>
 			}
 		>
-			<DropdownMenuItem>
-				<DropdownMenuItemLabel>Level 2 item</DropdownMenuItemLabel>
-			</DropdownMenuItem>
-			<DropdownMenuItem>
-				<DropdownMenuItemLabel>Level 2 item</DropdownMenuItemLabel>
-			</DropdownMenuItem>
-			<DropdownMenu
+			<DropdownMenuV2.Item>
+				<DropdownMenuV2.ItemLabel>
+					Level 2 item
+				</DropdownMenuV2.ItemLabel>
+			</DropdownMenuV2.Item>
+			<DropdownMenuV2.Item>
+				<DropdownMenuV2.ItemLabel>
+					Level 2 item
+				</DropdownMenuV2.ItemLabel>
+			</DropdownMenuV2.Item>
+			<DropdownMenuV2
 				trigger={
-					<DropdownMenuItem>
-						<DropdownMenuItemLabel>
+					<DropdownMenuV2.Item>
+						<DropdownMenuV2.ItemLabel>
 							Submenu trigger
-						</DropdownMenuItemLabel>
-					</DropdownMenuItem>
+						</DropdownMenuV2.ItemLabel>
+					</DropdownMenuV2.Item>
 				}
 			>
-				<DropdownMenuItem>
-					<DropdownMenuItemLabel>Level 3 item</DropdownMenuItemLabel>
-				</DropdownMenuItem>
-				<DropdownMenuItem>
-					<DropdownMenuItemLabel>Level 3 item</DropdownMenuItemLabel>
-				</DropdownMenuItem>
-			</DropdownMenu>
-		</DropdownMenu>
-	</DropdownMenu>
+				<DropdownMenuV2.Item>
+					<DropdownMenuV2.ItemLabel>
+						Level 3 item
+					</DropdownMenuV2.ItemLabel>
+				</DropdownMenuV2.Item>
+				<DropdownMenuV2.Item>
+					<DropdownMenuV2.ItemLabel>
+						Level 3 item
+					</DropdownMenuV2.ItemLabel>
+				</DropdownMenuV2.Item>
+			</DropdownMenuV2>
+		</DropdownMenuV2>
+	</DropdownMenuV2>
 );
 WithSubmenu.args = {
 	...Default.args,
 };
 
-export const WithCheckboxes: StoryFn< typeof DropdownMenu > = ( props ) => {
+export const WithCheckboxes: StoryFn< typeof DropdownMenuV2 > = ( props ) => {
 	const [ isAChecked, setAChecked ] = useState( false );
 	const [ isBChecked, setBChecked ] = useState( true );
 	const [ multipleCheckboxesValue, setMultipleCheckboxesValue ] = useState<
@@ -171,7 +172,7 @@ export const WithCheckboxes: StoryFn< typeof DropdownMenu > = ( props ) => {
 	>( [ 'b' ] );
 
 	const onMultipleCheckboxesCheckedChange: React.ComponentProps<
-		typeof DropdownMenuCheckboxItem
+		typeof DropdownMenuV2.CheckboxItem
 	>[ 'onChange' ] = ( e ) => {
 		setMultipleCheckboxesValue( ( prevValues ) => {
 			if ( prevValues.includes( e.target.value ) ) {
@@ -182,176 +183,202 @@ export const WithCheckboxes: StoryFn< typeof DropdownMenu > = ( props ) => {
 	};
 
 	return (
-		<DropdownMenu { ...props }>
-			<DropdownMenuGroup>
-				<DropdownMenuCheckboxItem
+		<DropdownMenuV2 { ...props }>
+			<DropdownMenuV2.Group>
+				<DropdownMenuV2.GroupLabel>
+					Single selection, uncontrolled
+				</DropdownMenuV2.GroupLabel>
+				<DropdownMenuV2.CheckboxItem
 					name="checkbox-individual-uncontrolled-a"
 					value="a"
 					suffix="⌥⌘T"
 				>
-					<DropdownMenuItemLabel>
+					<DropdownMenuV2.ItemLabel>
 						Checkbox item A
-					</DropdownMenuItemLabel>
-					<DropdownMenuItemHelpText>
-						Uncontrolled
-					</DropdownMenuItemHelpText>
-				</DropdownMenuCheckboxItem>
-				<DropdownMenuCheckboxItem
+					</DropdownMenuV2.ItemLabel>
+					<DropdownMenuV2.ItemHelpText>
+						Initially unchecked
+					</DropdownMenuV2.ItemHelpText>
+				</DropdownMenuV2.CheckboxItem>
+				<DropdownMenuV2.CheckboxItem
 					name="checkbox-individual-uncontrolled-b"
 					value="b"
 					defaultChecked
 				>
-					<DropdownMenuItemLabel>
+					<DropdownMenuV2.ItemLabel>
 						Checkbox item B
-					</DropdownMenuItemLabel>
-					<DropdownMenuItemHelpText>
-						Uncontrolled, initially checked
-					</DropdownMenuItemHelpText>
-				</DropdownMenuCheckboxItem>
-			</DropdownMenuGroup>
-			<DropdownMenuSeparator />
-			<DropdownMenuGroup>
-				<DropdownMenuCheckboxItem
+					</DropdownMenuV2.ItemLabel>
+					<DropdownMenuV2.ItemHelpText>
+						Initially checked
+					</DropdownMenuV2.ItemHelpText>
+				</DropdownMenuV2.CheckboxItem>
+			</DropdownMenuV2.Group>
+			<DropdownMenuV2.Separator />
+			<DropdownMenuV2.Group>
+				<DropdownMenuV2.GroupLabel>
+					Single selection, controlled
+				</DropdownMenuV2.GroupLabel>
+				<DropdownMenuV2.CheckboxItem
 					name="checkbox-individual-controlled-a"
 					value="a"
 					checked={ isAChecked }
 					onChange={ ( e ) => setAChecked( e.target.checked ) }
 				>
-					<DropdownMenuItemLabel>
+					<DropdownMenuV2.ItemLabel>
 						Checkbox item A
-					</DropdownMenuItemLabel>
-					<DropdownMenuItemHelpText>
-						Controlled
-					</DropdownMenuItemHelpText>
-				</DropdownMenuCheckboxItem>
-				<DropdownMenuCheckboxItem
+					</DropdownMenuV2.ItemLabel>
+					<DropdownMenuV2.ItemHelpText>
+						Initially unchecked
+					</DropdownMenuV2.ItemHelpText>
+				</DropdownMenuV2.CheckboxItem>
+				<DropdownMenuV2.CheckboxItem
 					name="checkbox-individual-controlled-b"
 					value="b"
 					checked={ isBChecked }
 					onChange={ ( e ) => setBChecked( e.target.checked ) }
 				>
-					<DropdownMenuItemLabel>
+					<DropdownMenuV2.ItemLabel>
 						Checkbox item B
-					</DropdownMenuItemLabel>
-					<DropdownMenuItemHelpText>
-						Controlled, initially checked
-					</DropdownMenuItemHelpText>
-				</DropdownMenuCheckboxItem>
-			</DropdownMenuGroup>
-			<DropdownMenuSeparator />
-			<DropdownMenuGroup>
-				<DropdownMenuCheckboxItem
+					</DropdownMenuV2.ItemLabel>
+					<DropdownMenuV2.ItemHelpText>
+						Initially checked
+					</DropdownMenuV2.ItemHelpText>
+				</DropdownMenuV2.CheckboxItem>
+			</DropdownMenuV2.Group>
+			<DropdownMenuV2.Separator />
+			<DropdownMenuV2.Group>
+				<DropdownMenuV2.GroupLabel>
+					Multiple selection, uncontrolled
+				</DropdownMenuV2.GroupLabel>
+				<DropdownMenuV2.CheckboxItem
 					name="checkbox-multiple-uncontrolled"
 					value="a"
 				>
-					<DropdownMenuItemLabel>
+					<DropdownMenuV2.ItemLabel>
 						Checkbox item A
-					</DropdownMenuItemLabel>
-					<DropdownMenuItemHelpText>
-						Uncontrolled, multiple selection
-					</DropdownMenuItemHelpText>
-				</DropdownMenuCheckboxItem>
-				<DropdownMenuCheckboxItem
+					</DropdownMenuV2.ItemLabel>
+					<DropdownMenuV2.ItemHelpText>
+						Initially unchecked
+					</DropdownMenuV2.ItemHelpText>
+				</DropdownMenuV2.CheckboxItem>
+				<DropdownMenuV2.CheckboxItem
 					name="checkbox-multiple-uncontrolled"
 					value="b"
 					defaultChecked
 				>
-					<DropdownMenuItemLabel>
+					<DropdownMenuV2.ItemLabel>
 						Checkbox item B
-					</DropdownMenuItemLabel>
-					<DropdownMenuItemHelpText>
-						Uncontrolled, multiple selection, initially checked
-					</DropdownMenuItemHelpText>
-				</DropdownMenuCheckboxItem>
-			</DropdownMenuGroup>
-			<DropdownMenuSeparator />
-			<DropdownMenuGroup>
-				<DropdownMenuCheckboxItem
+					</DropdownMenuV2.ItemLabel>
+					<DropdownMenuV2.ItemHelpText>
+						Initially checked
+					</DropdownMenuV2.ItemHelpText>
+				</DropdownMenuV2.CheckboxItem>
+			</DropdownMenuV2.Group>
+			<DropdownMenuV2.Separator />
+			<DropdownMenuV2.Group>
+				<DropdownMenuV2.GroupLabel>
+					Multiple selection, controlled
+				</DropdownMenuV2.GroupLabel>
+				<DropdownMenuV2.CheckboxItem
 					name="checkbox-multiple-controlled"
 					value="a"
 					checked={ multipleCheckboxesValue.includes( 'a' ) }
 					onChange={ onMultipleCheckboxesCheckedChange }
 				>
-					<DropdownMenuItemLabel>
+					<DropdownMenuV2.ItemLabel>
 						Checkbox item A
-					</DropdownMenuItemLabel>
-					<DropdownMenuItemHelpText>
-						Controlled, multiple selection
-					</DropdownMenuItemHelpText>
-				</DropdownMenuCheckboxItem>
-				<DropdownMenuCheckboxItem
+					</DropdownMenuV2.ItemLabel>
+					<DropdownMenuV2.ItemHelpText>
+						Initially unchecked
+					</DropdownMenuV2.ItemHelpText>
+				</DropdownMenuV2.CheckboxItem>
+				<DropdownMenuV2.CheckboxItem
 					name="checkbox-multiple-controlled"
 					value="b"
 					checked={ multipleCheckboxesValue.includes( 'b' ) }
 					onChange={ onMultipleCheckboxesCheckedChange }
 				>
-					<DropdownMenuItemLabel>
+					<DropdownMenuV2.ItemLabel>
 						Checkbox item B
-					</DropdownMenuItemLabel>
-					<DropdownMenuItemHelpText>
-						Controlled, multiple selection, initially checked
-					</DropdownMenuItemHelpText>
-				</DropdownMenuCheckboxItem>
-			</DropdownMenuGroup>
-		</DropdownMenu>
+					</DropdownMenuV2.ItemLabel>
+					<DropdownMenuV2.ItemHelpText>
+						Initially checked
+					</DropdownMenuV2.ItemHelpText>
+				</DropdownMenuV2.CheckboxItem>
+			</DropdownMenuV2.Group>
+		</DropdownMenuV2>
 	);
 };
 WithCheckboxes.args = {
 	...Default.args,
 };
 
-export const WithRadios: StoryFn< typeof DropdownMenu > = ( props ) => {
+export const WithRadios: StoryFn< typeof DropdownMenuV2 > = ( props ) => {
 	const [ radioValue, setRadioValue ] = useState( 'two' );
 	const onRadioChange: React.ComponentProps<
-		typeof DropdownMenuRadioItem
+		typeof DropdownMenuV2.RadioItem
 	>[ 'onChange' ] = ( e ) => setRadioValue( e.target.value );
 
 	return (
-		<DropdownMenu { ...props }>
-			<DropdownMenuGroup>
-				<DropdownMenuRadioItem name="radio-uncontrolled" value="one">
-					<DropdownMenuItemLabel>Radio item 1</DropdownMenuItemLabel>
-					<DropdownMenuItemHelpText>
-						Uncontrolled
-					</DropdownMenuItemHelpText>
-				</DropdownMenuRadioItem>
-				<DropdownMenuRadioItem
+		<DropdownMenuV2 { ...props }>
+			<DropdownMenuV2.Group>
+				<DropdownMenuV2.GroupLabel>
+					Uncontrolled
+				</DropdownMenuV2.GroupLabel>
+				<DropdownMenuV2.RadioItem name="radio-uncontrolled" value="one">
+					<DropdownMenuV2.ItemLabel>
+						Radio item 1
+					</DropdownMenuV2.ItemLabel>
+					<DropdownMenuV2.ItemHelpText>
+						Initially unchecked
+					</DropdownMenuV2.ItemHelpText>
+				</DropdownMenuV2.RadioItem>
+				<DropdownMenuV2.RadioItem
 					name="radio-uncontrolled"
 					value="two"
 					defaultChecked
 				>
-					<DropdownMenuItemLabel>Radio item 2</DropdownMenuItemLabel>
-					<DropdownMenuItemHelpText>
-						Uncontrolled, initially checked
-					</DropdownMenuItemHelpText>
-				</DropdownMenuRadioItem>
-			</DropdownMenuGroup>
-			<DropdownMenuSeparator />
-			<DropdownMenuGroup>
-				<DropdownMenuRadioItem
+					<DropdownMenuV2.ItemLabel>
+						Radio item 2
+					</DropdownMenuV2.ItemLabel>
+					<DropdownMenuV2.ItemHelpText>
+						Initially checked
+					</DropdownMenuV2.ItemHelpText>
+				</DropdownMenuV2.RadioItem>
+			</DropdownMenuV2.Group>
+			<DropdownMenuV2.Separator />
+			<DropdownMenuV2.Group>
+				<DropdownMenuV2.GroupLabel>
+					Controlled
+				</DropdownMenuV2.GroupLabel>
+				<DropdownMenuV2.RadioItem
 					name="radio-controlled"
 					value="one"
 					checked={ radioValue === 'one' }
 					onChange={ onRadioChange }
 				>
-					<DropdownMenuItemLabel>Radio item 1</DropdownMenuItemLabel>
-					<DropdownMenuItemHelpText>
-						Controlled
-					</DropdownMenuItemHelpText>
-				</DropdownMenuRadioItem>
-				<DropdownMenuRadioItem
+					<DropdownMenuV2.ItemLabel>
+						Radio item 1
+					</DropdownMenuV2.ItemLabel>
+					<DropdownMenuV2.ItemHelpText>
+						Initially unchecked
+					</DropdownMenuV2.ItemHelpText>
+				</DropdownMenuV2.RadioItem>
+				<DropdownMenuV2.RadioItem
 					name="radio-controlled"
 					value="two"
 					checked={ radioValue === 'two' }
 					onChange={ onRadioChange }
 				>
-					<DropdownMenuItemLabel>Radio item 2</DropdownMenuItemLabel>
-					<DropdownMenuItemHelpText>
-						Controlled, initially checked
-					</DropdownMenuItemHelpText>
-				</DropdownMenuRadioItem>
-			</DropdownMenuGroup>
-		</DropdownMenu>
+					<DropdownMenuV2.ItemLabel>
+						Radio item 2
+					</DropdownMenuV2.ItemLabel>
+					<DropdownMenuV2.ItemHelpText>
+						Initially checked
+					</DropdownMenuV2.ItemHelpText>
+				</DropdownMenuV2.RadioItem>
+			</DropdownMenuV2.Group>
+		</DropdownMenuV2>
 	);
 };
 WithRadios.args = {
@@ -365,7 +392,7 @@ const modalOnTopOfDropdown = css`
 `;
 
 // For more examples with `Modal`, check https://ariakit.org/examples/menu-wordpress-modal
-export const WithModals: StoryFn< typeof DropdownMenu > = ( props ) => {
+export const WithModals: StoryFn< typeof DropdownMenuV2 > = ( props ) => {
 	const [ isOuterModalOpen, setOuterModalOpen ] = useState( false );
 	const [ isInnerModalOpen, setInnerModalOpen ] = useState( false );
 
@@ -374,23 +401,23 @@ export const WithModals: StoryFn< typeof DropdownMenu > = ( props ) => {
 
 	return (
 		<>
-			<DropdownMenu { ...props }>
-				<DropdownMenuItem
+			<DropdownMenuV2 { ...props }>
+				<DropdownMenuV2.Item
 					onClick={ () => setOuterModalOpen( true ) }
 					hideOnClick={ false }
 				>
-					<DropdownMenuItemLabel>
+					<DropdownMenuV2.ItemLabel>
 						Open outer modal
-					</DropdownMenuItemLabel>
-				</DropdownMenuItem>
-				<DropdownMenuItem
+					</DropdownMenuV2.ItemLabel>
+				</DropdownMenuV2.Item>
+				<DropdownMenuV2.Item
 					onClick={ () => setInnerModalOpen( true ) }
 					hideOnClick={ false }
 				>
-					<DropdownMenuItemLabel>
+					<DropdownMenuV2.ItemLabel>
 						Open inner modal
-					</DropdownMenuItemLabel>
-				</DropdownMenuItem>
+					</DropdownMenuV2.ItemLabel>
+				</DropdownMenuV2.Item>
 				{ isInnerModalOpen && (
 					<Modal
 						onRequestClose={ () => setInnerModalOpen( false ) }
@@ -402,7 +429,7 @@ export const WithModals: StoryFn< typeof DropdownMenu > = ( props ) => {
 						</button>
 					</Modal>
 				) }
-			</DropdownMenu>
+			</DropdownMenuV2>
 			{ isOuterModalOpen && (
 				<Modal
 					onRequestClose={ () => setOuterModalOpen( false ) }
@@ -424,14 +451,14 @@ WithModals.args = {
 const ExampleSlotFill = createSlotFill( 'Example' );
 
 const Slot = () => {
-	const dropdownMenuContext = useContext( DropdownMenuContext );
+	const dropdownMenuContext = useContext( DropdownMenuV2.Context );
 
 	// Forwarding the content of the slot so that it can be used by the fill
 	const fillProps = useMemo(
 		() => ( {
 			forwardedContext: [
 				[
-					DropdownMenuContext.Provider,
+					DropdownMenuV2.Context.Provider,
 					{ value: dropdownMenuContext },
 				],
 			],
@@ -472,37 +499,37 @@ const Fill = ( { children }: { children: React.ReactNode } ) => {
 	);
 };
 
-export const WithSlotFill: StoryFn< typeof DropdownMenu > = ( props ) => {
+export const WithSlotFill: StoryFn< typeof DropdownMenuV2 > = ( props ) => {
 	return (
 		<SlotFillProvider>
-			<DropdownMenu { ...props }>
-				<DropdownMenuItem>
-					<DropdownMenuItemLabel>Item</DropdownMenuItemLabel>
-				</DropdownMenuItem>
+			<DropdownMenuV2 { ...props }>
+				<DropdownMenuV2.Item>
+					<DropdownMenuV2.ItemLabel>Item</DropdownMenuV2.ItemLabel>
+				</DropdownMenuV2.Item>
 				<Slot />
-			</DropdownMenu>
+			</DropdownMenuV2>
 
 			<Fill>
-				<DropdownMenuItem>
-					<DropdownMenuItemLabel>
+				<DropdownMenuV2.Item>
+					<DropdownMenuV2.ItemLabel>
 						Item from fill
-					</DropdownMenuItemLabel>
-				</DropdownMenuItem>
-				<DropdownMenu
+					</DropdownMenuV2.ItemLabel>
+				</DropdownMenuV2.Item>
+				<DropdownMenuV2
 					trigger={
-						<DropdownMenuItem>
-							<DropdownMenuItemLabel>
+						<DropdownMenuV2.Item>
+							<DropdownMenuV2.ItemLabel>
 								Submenu from fill
-							</DropdownMenuItemLabel>
-						</DropdownMenuItem>
+							</DropdownMenuV2.ItemLabel>
+						</DropdownMenuV2.Item>
 					}
 				>
-					<DropdownMenuItem>
-						<DropdownMenuItemLabel>
+					<DropdownMenuV2.Item>
+						<DropdownMenuV2.ItemLabel>
 							Submenu item from fill
-						</DropdownMenuItemLabel>
-					</DropdownMenuItem>
-				</DropdownMenu>
+						</DropdownMenuV2.ItemLabel>
+					</DropdownMenuV2.Item>
+				</DropdownMenuV2>
 			</Fill>
 		</SlotFillProvider>
 	);
@@ -512,42 +539,48 @@ WithSlotFill.args = {
 };
 
 const toolbarVariantContextValue = {
-	DropdownMenu: {
+	DropdownMenuV2: {
 		variant: 'toolbar',
 	},
 };
-export const ToolbarVariant: StoryFn< typeof DropdownMenu > = ( props ) => (
+export const ToolbarVariant: StoryFn< typeof DropdownMenuV2 > = ( props ) => (
 	// TODO: add toolbar
 	<ContextSystemProvider value={ toolbarVariantContextValue }>
-		<DropdownMenu { ...props }>
-			<DropdownMenuItem>
-				<DropdownMenuItemLabel>Level 1 item</DropdownMenuItemLabel>
-			</DropdownMenuItem>
-			<DropdownMenuItem>
-				<DropdownMenuItemLabel>Level 1 item</DropdownMenuItemLabel>
-			</DropdownMenuItem>
-			<DropdownMenuSeparator />
-			<DropdownMenu
+		<DropdownMenuV2 { ...props }>
+			<DropdownMenuV2.Item>
+				<DropdownMenuV2.ItemLabel>
+					Level 1 item
+				</DropdownMenuV2.ItemLabel>
+			</DropdownMenuV2.Item>
+			<DropdownMenuV2.Item>
+				<DropdownMenuV2.ItemLabel>
+					Level 1 item
+				</DropdownMenuV2.ItemLabel>
+			</DropdownMenuV2.Item>
+			<DropdownMenuV2.Separator />
+			<DropdownMenuV2
 				trigger={
-					<DropdownMenuItem>
-						<DropdownMenuItemLabel>
+					<DropdownMenuV2.Item>
+						<DropdownMenuV2.ItemLabel>
 							Submenu trigger
-						</DropdownMenuItemLabel>
-					</DropdownMenuItem>
+						</DropdownMenuV2.ItemLabel>
+					</DropdownMenuV2.Item>
 				}
 			>
-				<DropdownMenuItem>
-					<DropdownMenuItemLabel>Level 2 item</DropdownMenuItemLabel>
-				</DropdownMenuItem>
-			</DropdownMenu>
-		</DropdownMenu>
+				<DropdownMenuV2.Item>
+					<DropdownMenuV2.ItemLabel>
+						Level 2 item
+					</DropdownMenuV2.ItemLabel>
+				</DropdownMenuV2.Item>
+			</DropdownMenuV2>
+		</DropdownMenuV2>
 	</ContextSystemProvider>
 );
 ToolbarVariant.args = {
 	...Default.args,
 };
 
-export const InsideModal: StoryFn< typeof DropdownMenu > = ( props ) => {
+export const InsideModal: StoryFn< typeof DropdownMenuV2 > = ( props ) => {
 	const [ isModalOpen, setModalOpen ] = useState( false );
 	return (
 		<>
@@ -560,34 +593,34 @@ export const InsideModal: StoryFn< typeof DropdownMenu > = ( props ) => {
 			</Button>
 			{ isModalOpen && (
 				<Modal onRequestClose={ () => setModalOpen( false ) }>
-					<DropdownMenu { ...props }>
-						<DropdownMenuItem>
-							<DropdownMenuItemLabel>
+					<DropdownMenuV2 { ...props }>
+						<DropdownMenuV2.Item>
+							<DropdownMenuV2.ItemLabel>
 								Level 1 item
-							</DropdownMenuItemLabel>
-						</DropdownMenuItem>
-						<DropdownMenuItem>
-							<DropdownMenuItemLabel>
+							</DropdownMenuV2.ItemLabel>
+						</DropdownMenuV2.Item>
+						<DropdownMenuV2.Item>
+							<DropdownMenuV2.ItemLabel>
 								Level 1 item
-							</DropdownMenuItemLabel>
-						</DropdownMenuItem>
-						<DropdownMenuSeparator />
-						<DropdownMenu
+							</DropdownMenuV2.ItemLabel>
+						</DropdownMenuV2.Item>
+						<DropdownMenuV2.Separator />
+						<DropdownMenuV2
 							trigger={
-								<DropdownMenuItem>
-									<DropdownMenuItemLabel>
+								<DropdownMenuV2.Item>
+									<DropdownMenuV2.ItemLabel>
 										Submenu trigger
-									</DropdownMenuItemLabel>
-								</DropdownMenuItem>
+									</DropdownMenuV2.ItemLabel>
+								</DropdownMenuV2.Item>
 							}
 						>
-							<DropdownMenuItem>
-								<DropdownMenuItemLabel>
+							<DropdownMenuV2.Item>
+								<DropdownMenuV2.ItemLabel>
 									Level 2 item
-								</DropdownMenuItemLabel>
-							</DropdownMenuItem>
-						</DropdownMenu>
-					</DropdownMenu>
+								</DropdownMenuV2.ItemLabel>
+							</DropdownMenuV2.Item>
+						</DropdownMenuV2>
+					</DropdownMenuV2>
 					<Button onClick={ () => setModalOpen( false ) }>
 						Close modal
 					</Button>
diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts
index 91a3aaeec1147..b25613e9feb52 100644
--- a/packages/components/src/dropdown-menu-v2/styles.ts
+++ b/packages/components/src/dropdown-menu-v2/styles.ts
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
-import { css, keyframes } from '@emotion/react';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 /**
@@ -15,9 +15,13 @@ import { Truncate } from '../truncate';
 import type { DropdownMenuContext } from './types';
 
 const ANIMATION_PARAMS = {
-	SLIDE_AMOUNT: '2px',
-	DURATION: '400ms',
-	EASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )',
+	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 );
@@ -25,52 +29,73 @@ const ITEM_PADDING_BLOCK = space( 2 );
 const ITEM_PADDING_INLINE = space( 3 );
 
 // TODO:
-// - those values are different from saved variables?
-// - should bring this into the config, and make themeable
-// - border color and divider color are different?
-const DEFAULT_BORDER_COLOR = COLORS.gray[ 300 ];
-const DIVIDER_COLOR = COLORS.gray[ 200 ];
-const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray[ '900' ];
-const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.popoverShadow }`;
+// - 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';
 
-const slideUpAndFade = keyframes( {
-	'0%': {
-		opacity: 0,
-		transform: `translateY(${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,
-	},
-	'100%': { opacity: 1, transform: 'translateY(0)' },
-} );
+export const MenuPopoverOuterWrapper = styled.div<
+	Pick< DropdownMenuContext, 'variant' >
+>`
+	position: relative;
 
-const slideRightAndFade = keyframes( {
-	'0%': {
-		opacity: 0,
-		transform: `translateX(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,
-	},
-	'100%': { opacity: 1, transform: 'translateX(0)' },
-} );
+	background-color: ${ COLORS.ui.background };
+	border-radius: ${ CONFIG.radiusMedium };
+	${ ( props ) => css`
+		box-shadow: ${ props.variant === 'toolbar'
+			? TOOLBAR_VARIANT_BOX_SHADOW
+			: DEFAULT_BOX_SHADOW };
+	` }
 
-const slideDownAndFade = keyframes( {
-	'0%': {
-		opacity: 0,
-		transform: `translateY(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,
-	},
-	'100%': { opacity: 1, transform: 'translateY(0)' },
-} );
+	overflow: hidden;
 
-const slideLeftAndFade = keyframes( {
-	'0%': {
-		opacity: 0,
-		transform: `translateX(${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,
-	},
-	'100%': { opacity: 1, transform: 'translateX(0)' },
-} );
+	/* 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;
 
-export const DropdownMenu = styled( Ariakit.Menu )<
-	Pick< DropdownMenuContext, 'variant' >
->`
+		/* 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? */
@@ -84,15 +109,8 @@ export const DropdownMenu = styled( Ariakit.Menu )<
 	min-width: 160px;
 	max-width: 320px;
 	max-height: var( --popover-available-height );
-	padding: ${ CONTENT_WRAPPER_PADDING };
 
-	background-color: ${ COLORS.ui.background };
-	border-radius: 4px;
-	${ ( props ) => css`
-		box-shadow: ${ props.variant === 'toolbar'
-			? TOOLBAR_VARIANT_BOX_SHADOW
-			: DEFAULT_BOX_SHADOW };
-	` }
+	padding: ${ CONTENT_WRAPPER_PADDING };
 
 	overscroll-behavior: contain;
 	overflow: auto;
@@ -100,24 +118,33 @@ export const DropdownMenu = styled( Ariakit.Menu )<
 	/* Only visible in Windows High Contrast mode */
 	outline: 2px solid transparent !important;
 
-	/* Animation */
-	animation-duration: ${ ANIMATION_PARAMS.DURATION };
-	animation-timing-function: ${ ANIMATION_PARAMS.EASING };
-	will-change: transform, opacity;
-	/* Default animation.*/
-	animation-name: ${ slideDownAndFade };
+	/* Open/close animation (inner content wrapper) */
+	@media not ( prefers-reduced-motion ) {
+		transition: inherit;
+		transform-origin: inherit;
 
-	&[data-side='left'] {
-		animation-name: ${ slideLeftAndFade };
-	}
-	&[data-side='up'] {
-		animation-name: ${ slideUpAndFade };
-	}
-	&[data-side='right'] {
-		animation-name: ${ slideRightAndFade };
-	}
-	@media ( prefers-reduced-motion ) {
-		animation-duration: 0s;
+		/*
+		 * 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 );
+		}
 	}
 `;
 
@@ -149,8 +176,8 @@ const baseItem = css`
 	font-weight: normal;
 	line-height: 20px;
 
-	color: ${ COLORS.gray[ 900 ] };
-	border-radius: ${ CONFIG.radiusBlockUi };
+	color: ${ COLORS.theme.foreground };
+	border-radius: ${ CONFIG.radiusSmall };
 
 	padding-block: ${ ITEM_PADDING_BLOCK };
 	padding-inline: ${ ITEM_PADDING_INLINE };
@@ -169,7 +196,7 @@ const baseItem = css`
 		cursor: not-allowed;
 	}
 
-	/* Hover */
+	/* Active item (including hover) */
 	&[data-active-item]:not( [data-focus-visible] ):not(
 			[aria-disabled='true']
 		) {
@@ -192,9 +219,9 @@ const baseItem = css`
 	}
 
 	/* When the item is the trigger of an open submenu */
-	${ DropdownMenu }:not(:focus) &:not(:focus)[aria-expanded="true"] {
-		background-color: ${ COLORS.gray[ 100 ] };
-		color: ${ COLORS.gray[ 900 ] };
+	${ MenuPopoverInnerWrapper }:not(:focus) &:not(:focus)[aria-expanded="true"] {
+		background-color: ${ LIGHT_BACKGROUND_COLOR };
+		color: ${ COLORS.theme.foreground };
 	}
 
 	svg {
@@ -238,7 +265,7 @@ export const ItemPrefixWrapper = styled.span`
 	align-items: center;
 	justify-content: center;
 
-	color: ${ COLORS.gray[ '700' ] };
+	color: ${ LIGHTER_TEXT_COLOR };
 
 	/*
 	* When the parent menu item is active, except when it's a non-focused/hovered
@@ -284,15 +311,15 @@ export const ItemSuffixWrapper = styled.span`
 	justify-content: center;
 	gap: ${ space( 3 ) };
 
-	color: ${ COLORS.gray[ '700' ] };
+	color: ${ LIGHTER_TEXT_COLOR };
 
 	/*
 	 * When the parent menu item is active, except when it's a non-focused/hovered
 	 * submenu trigger (in that case, color should not be inherited)
 	 */
-	[data-active-item]:not( [data-focus-visible] ) *:not(${ DropdownMenu }) &,
+	[data-active-item]:not( [data-focus-visible] ) *:not(${ MenuPopoverInnerWrapper }) &,
 	/* When the parent menu item is disabled */
-	[aria-disabled='true'] *:not(${ DropdownMenu }) & {
+	[aria-disabled='true'] *:not(${ MenuPopoverInnerWrapper }) & {
 		color: inherit;
 	}
 `;
@@ -302,6 +329,15 @@ export const DropdownMenuGroup = styled( Ariakit.MenuGroup )`
 	display: contents;
 `;
 
+export const DropdownMenuGroupLabel = 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 DropdownMenuSeparator = styled( Ariakit.MenuSeparator )<
 	Pick< DropdownMenuContext, 'variant' >
 >`
@@ -343,10 +379,13 @@ export const DropdownMenuItemLabel = styled( Truncate )`
 export const DropdownMenuItemHelpText = styled( Truncate )`
 	font-size: ${ font( 'helpText.fontSize' ) };
 	line-height: 16px;
-	color: ${ COLORS.gray[ '700' ] };
+	color: ${ LIGHTER_TEXT_COLOR };
+	word-break: break-all;
 
-	[data-active-item]:not( [data-focus-visible] ) *:not( ${ DropdownMenu } ) &,
-	[aria-disabled='true'] *:not( ${ DropdownMenu } ) & {
+	[data-active-item]:not( [data-focus-visible] )
+		*:not( ${ MenuPopoverInnerWrapper } )
+		&,
+	[aria-disabled='true'] *:not( ${ MenuPopoverInnerWrapper } ) & {
 		color: inherit;
 	}
 `;
diff --git a/packages/components/src/dropdown-menu-v2/test/index.tsx b/packages/components/src/dropdown-menu-v2/test/index.tsx
index 2829fbb8fefce..cb674f27edaac 100644
--- a/packages/components/src/dropdown-menu-v2/test/index.tsx
+++ b/packages/components/src/dropdown-menu-v2/test/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import { press, click, hover, sleep, type } from '@ariakit/test';
+import { press, click, hover, type } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -12,14 +12,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import {
-	DropdownMenu,
-	DropdownMenuCheckboxItem,
-	DropdownMenuItem,
-	DropdownMenuRadioItem,
-	DropdownMenuSeparator,
-	DropdownMenuGroup,
-} from '..';
+import { DropdownMenuV2 } from '..';
 
 const delay = ( delayInMs: number ) => {
 	return new Promise( ( resolve ) => setTimeout( resolve, delayInMs ) );
@@ -29,18 +22,24 @@ describe( 'DropdownMenu', () => {
 	// See https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
 	it( 'should follow the WAI-ARIA spec', async () => {
 		render(
-			<DropdownMenu trigger={ <button>Open dropdown</button> }>
-				<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
-				<DropdownMenuSeparator />
-				<DropdownMenu
+			<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
+				<DropdownMenuV2.Item>Dropdown menu item</DropdownMenuV2.Item>
+				<DropdownMenuV2.Separator />
+				<DropdownMenuV2
 					trigger={
-						<DropdownMenuItem>Dropdown submenu</DropdownMenuItem>
+						<DropdownMenuV2.Item>
+							Dropdown submenu
+						</DropdownMenuV2.Item>
 					}
 				>
-					<DropdownMenuItem>Dropdown submenu item 1</DropdownMenuItem>
-					<DropdownMenuItem>Dropdown submenu item 2</DropdownMenuItem>
-				</DropdownMenu>
-			</DropdownMenu>
+					<DropdownMenuV2.Item>
+						Dropdown submenu item 1
+					</DropdownMenuV2.Item>
+					<DropdownMenuV2.Item>
+						Dropdown submenu item 2
+					</DropdownMenuV2.Item>
+				</DropdownMenuV2>
+			</DropdownMenuV2>
 		);
 
 		const toggleButton = screen.getByRole( 'button', {
@@ -95,9 +94,11 @@ describe( 'DropdownMenu', () => {
 	describe( 'pointer and keyboard interactions', () => {
 		it( 'should open and focus the menu when clicking the trigger', async () => {
 			render(
-				<DropdownMenu trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
-				</DropdownMenu>
+				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuV2.Item>
+						Dropdown menu item
+					</DropdownMenuV2.Item>
+				</DropdownMenuV2>
 			);
 
 			const toggleButton = screen.getByRole( 'button', {
@@ -116,11 +117,13 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should open and focus the first item when pressing the arrow down key on the trigger', async () => {
 			render(
-				<DropdownMenu trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuItem disabled>First item</DropdownMenuItem>
-					<DropdownMenuItem>Second item</DropdownMenuItem>
-					<DropdownMenuItem>Third item</DropdownMenuItem>
-				</DropdownMenu>
+				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuV2.Item disabled>
+						First item
+					</DropdownMenuV2.Item>
+					<DropdownMenuV2.Item>Second item</DropdownMenuV2.Item>
+					<DropdownMenuV2.Item>Third item</DropdownMenuV2.Item>
+				</DropdownMenuV2>
 			);
 
 			const toggleButton = screen.getByRole( 'button', {
@@ -128,7 +131,6 @@ describe( 'DropdownMenu', () => {
 			} );
 
 			// Move focus on the toggle
-			await sleep();
 			await press.Tab();
 
 			expect( toggleButton ).toHaveFocus();
@@ -147,11 +149,13 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should open and focus the first item when pressing the space key on the trigger', async () => {
 			render(
-				<DropdownMenu trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuItem disabled>First item</DropdownMenuItem>
-					<DropdownMenuItem>Second item</DropdownMenuItem>
-					<DropdownMenuItem>Third item</DropdownMenuItem>
-				</DropdownMenu>
+				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuV2.Item disabled>
+						First item
+					</DropdownMenuV2.Item>
+					<DropdownMenuV2.Item>Second item</DropdownMenuV2.Item>
+					<DropdownMenuV2.Item>Third item</DropdownMenuV2.Item>
+				</DropdownMenuV2>
 			);
 
 			const toggleButton = screen.getByRole( 'button', {
@@ -159,7 +163,6 @@ describe( 'DropdownMenu', () => {
 			} );
 
 			// Move focus on the toggle
-			await sleep();
 			await press.Tab();
 
 			expect( toggleButton ).toHaveFocus();
@@ -178,9 +181,11 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should close when pressing the escape key', async () => {
 			render(
-				<DropdownMenu trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
-				</DropdownMenu>
+				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuV2.Item>
+						Dropdown menu item
+					</DropdownMenuV2.Item>
+				</DropdownMenuV2>
 			);
 
 			const trigger = screen.getByRole( 'button', {
@@ -207,12 +212,14 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should close when clicking outside of the content', async () => {
 			render(
-				<DropdownMenu
+				<DropdownMenuV2
 					defaultOpen
 					trigger={ <button>Open dropdown</button> }
 				>
-					<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
-				</DropdownMenu>
+					<DropdownMenuV2.Item>
+						Dropdown menu item
+					</DropdownMenuV2.Item>
+				</DropdownMenuV2>
 			);
 
 			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
@@ -225,12 +232,14 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should close when clicking on a menu item', async () => {
 			render(
-				<DropdownMenu
+				<DropdownMenuV2
 					defaultOpen
 					trigger={ <button>Open dropdown</button> }
 				>
-					<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
-				</DropdownMenu>
+					<DropdownMenuV2.Item>
+						Dropdown menu item
+					</DropdownMenuV2.Item>
+				</DropdownMenuV2>
 			);
 
 			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
@@ -243,14 +252,14 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should not close when clicking on a menu item when the `hideOnClick` prop is set to `false`', async () => {
 			render(
-				<DropdownMenu
+				<DropdownMenuV2
 					defaultOpen
 					trigger={ <button>Open dropdown</button> }
 				>
-					<DropdownMenuItem hideOnClick={ false }>
+					<DropdownMenuV2.Item hideOnClick={ false }>
 						Dropdown menu item
-					</DropdownMenuItem>
-				</DropdownMenu>
+					</DropdownMenuV2.Item>
+				</DropdownMenuV2>
 			);
 
 			expect( screen.getByRole( 'menu' ) ).toBeVisible();
@@ -263,14 +272,14 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should not close when clicking on a disabled menu item', async () => {
 			render(
-				<DropdownMenu
+				<DropdownMenuV2
 					defaultOpen
 					trigger={ <button>Open dropdown</button> }
 				>
-					<DropdownMenuItem disabled>
+					<DropdownMenuV2.Item disabled>
 						Dropdown menu item
-					</DropdownMenuItem>
-				</DropdownMenu>
+					</DropdownMenuV2.Item>
+				</DropdownMenuV2>
 			);
 
 			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
@@ -283,28 +292,34 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should reveal submenu content when hovering over the submenu trigger', async () => {
 			render(
-				<DropdownMenu
+				<DropdownMenuV2
 					defaultOpen
 					trigger={ <button>Open dropdown</button> }
 				>
-					<DropdownMenuItem>Dropdown menu item 1</DropdownMenuItem>
-					<DropdownMenuItem>Dropdown menu item 2</DropdownMenuItem>
-					<DropdownMenu
+					<DropdownMenuV2.Item>
+						Dropdown menu item 1
+					</DropdownMenuV2.Item>
+					<DropdownMenuV2.Item>
+						Dropdown menu item 2
+					</DropdownMenuV2.Item>
+					<DropdownMenuV2
 						trigger={
-							<DropdownMenuItem>
+							<DropdownMenuV2.Item>
 								Dropdown submenu
-							</DropdownMenuItem>
+							</DropdownMenuV2.Item>
 						}
 					>
-						<DropdownMenuItem>
+						<DropdownMenuV2.Item>
 							Dropdown submenu item 1
-						</DropdownMenuItem>
-						<DropdownMenuItem>
+						</DropdownMenuV2.Item>
+						<DropdownMenuV2.Item>
 							Dropdown submenu item 2
-						</DropdownMenuItem>
-					</DropdownMenu>
-					<DropdownMenuItem>Dropdown menu item 3</DropdownMenuItem>
-				</DropdownMenu>
+						</DropdownMenuV2.Item>
+					</DropdownMenuV2>
+					<DropdownMenuV2.Item>
+						Dropdown menu item 3
+					</DropdownMenuV2.Item>
+				</DropdownMenuV2>
 			);
 
 			// Before hover, submenu items are not rendered
@@ -328,28 +343,34 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should navigate menu items and subitems using the arrow, spacebar and enter keys', async () => {
 			render(
-				<DropdownMenu
+				<DropdownMenuV2
 					defaultOpen
 					trigger={ <button>Open dropdown</button> }
 				>
-					<DropdownMenuItem>Dropdown menu item 1</DropdownMenuItem>
-					<DropdownMenuItem>Dropdown menu item 2</DropdownMenuItem>
-					<DropdownMenu
+					<DropdownMenuV2.Item>
+						Dropdown menu item 1
+					</DropdownMenuV2.Item>
+					<DropdownMenuV2.Item>
+						Dropdown menu item 2
+					</DropdownMenuV2.Item>
+					<DropdownMenuV2
 						trigger={
-							<DropdownMenuItem>
+							<DropdownMenuV2.Item>
 								Dropdown submenu
-							</DropdownMenuItem>
+							</DropdownMenuV2.Item>
 						}
 					>
-						<DropdownMenuItem>
+						<DropdownMenuV2.Item>
 							Dropdown submenu item 1
-						</DropdownMenuItem>
-						<DropdownMenuItem>
+						</DropdownMenuV2.Item>
+						<DropdownMenuV2.Item>
 							Dropdown submenu item 2
-						</DropdownMenuItem>
-					</DropdownMenu>
-					<DropdownMenuItem>Dropdown menu item 3</DropdownMenuItem>
-				</DropdownMenu>
+						</DropdownMenuV2.Item>
+					</DropdownMenuV2>
+					<DropdownMenuV2.Item>
+						Dropdown menu item 3
+					</DropdownMenuV2.Item>
+				</DropdownMenuV2>
 			);
 
 			// The menu is focused automatically when `defaultOpen` is set.
@@ -452,32 +473,32 @@ describe( 'DropdownMenu', () => {
 			const ControlledRadioGroup = () => {
 				const [ radioValue, setRadioValue ] = useState( 'two' );
 				const onRadioChange: React.ComponentProps<
-					typeof DropdownMenuRadioItem
+					typeof DropdownMenuV2.RadioItem
 				>[ 'onChange' ] = ( e ) => {
 					onRadioValueChangeSpy( e.target.value );
 					setRadioValue( e.target.value );
 				};
 				return (
-					<DropdownMenu trigger={ <button>Open dropdown</button> }>
-						<DropdownMenuGroup>
-							<DropdownMenuRadioItem
+					<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
+						<DropdownMenuV2.Group>
+							<DropdownMenuV2.RadioItem
 								name="radio-test"
 								value="radio-one"
 								checked={ radioValue === 'radio-one' }
 								onChange={ onRadioChange }
 							>
 								Radio item one
-							</DropdownMenuRadioItem>
-							<DropdownMenuRadioItem
+							</DropdownMenuV2.RadioItem>
+							<DropdownMenuV2.RadioItem
 								name="radio-test"
 								value="radio-two"
 								checked={ radioValue === 'radio-two' }
 								onChange={ onRadioChange }
 							>
 								Radio item two
-							</DropdownMenuRadioItem>
-						</DropdownMenuGroup>
-					</DropdownMenu>
+							</DropdownMenuV2.RadioItem>
+						</DropdownMenuV2.Group>
+					</DropdownMenuV2>
 				);
 			};
 
@@ -535,9 +556,9 @@ describe( 'DropdownMenu', () => {
 		it( 'should check radio items and keep the menu open when clicking (uncontrolled)', async () => {
 			const onRadioValueChangeSpy = jest.fn();
 			render(
-				<DropdownMenu trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuGroup>
-						<DropdownMenuRadioItem
+				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuV2.Group>
+						<DropdownMenuV2.RadioItem
 							name="radio-test"
 							value="radio-one"
 							onChange={ ( e ) =>
@@ -545,8 +566,8 @@ describe( 'DropdownMenu', () => {
 							}
 						>
 							Radio item one
-						</DropdownMenuRadioItem>
-						<DropdownMenuRadioItem
+						</DropdownMenuV2.RadioItem>
+						<DropdownMenuV2.RadioItem
 							name="radio-test"
 							value="radio-two"
 							defaultChecked
@@ -555,9 +576,9 @@ describe( 'DropdownMenu', () => {
 							}
 						>
 							Radio item two
-						</DropdownMenuRadioItem>
-					</DropdownMenuGroup>
-				</DropdownMenu>
+						</DropdownMenuV2.RadioItem>
+					</DropdownMenuV2.Group>
+				</DropdownMenuV2>
 			);
 
 			// Open dropdown
@@ -619,8 +640,8 @@ describe( 'DropdownMenu', () => {
 					useState< boolean >();
 
 				return (
-					<DropdownMenu trigger={ <button>Open dropdown</button> }>
-						<DropdownMenuCheckboxItem
+					<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
+						<DropdownMenuV2.CheckboxItem
 							name="item-one"
 							value="item-one-value"
 							checked={ itemOneChecked }
@@ -634,9 +655,9 @@ describe( 'DropdownMenu', () => {
 							} }
 						>
 							Checkbox item one
-						</DropdownMenuCheckboxItem>
+						</DropdownMenuV2.CheckboxItem>
 
-						<DropdownMenuCheckboxItem
+						<DropdownMenuV2.CheckboxItem
 							name="item-two"
 							value="item-two-value"
 							checked={ itemTwoChecked }
@@ -650,8 +671,8 @@ describe( 'DropdownMenu', () => {
 							} }
 						>
 							Checkbox item two
-						</DropdownMenuCheckboxItem>
-					</DropdownMenu>
+						</DropdownMenuV2.CheckboxItem>
+					</DropdownMenuV2>
 				);
 			};
 
@@ -742,8 +763,8 @@ describe( 'DropdownMenu', () => {
 			const onCheckboxValueChangeSpy = jest.fn();
 
 			render(
-				<DropdownMenu trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuCheckboxItem
+				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuV2.CheckboxItem
 						name="item-one"
 						value="item-one-value"
 						onChange={ ( e ) => {
@@ -755,9 +776,9 @@ describe( 'DropdownMenu', () => {
 						} }
 					>
 						Checkbox item one
-					</DropdownMenuCheckboxItem>
+					</DropdownMenuV2.CheckboxItem>
 
-					<DropdownMenuCheckboxItem
+					<DropdownMenuV2.CheckboxItem
 						name="item-two"
 						value="item-two-value"
 						defaultChecked
@@ -770,8 +791,8 @@ describe( 'DropdownMenu', () => {
 						} }
 					>
 						Checkbox item two
-					</DropdownMenuCheckboxItem>
-				</DropdownMenu>
+					</DropdownMenuV2.CheckboxItem>
+				</DropdownMenuV2>
 			);
 
 			// Open dropdown
@@ -860,9 +881,11 @@ describe( 'DropdownMenu', () => {
 		it( 'should be modal by default', async () => {
 			render(
 				<>
-					<DropdownMenu trigger={ <button>Open dropdown</button> }>
-						<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
-					</DropdownMenu>
+					<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
+						<DropdownMenuV2.Item>
+							Dropdown menu item
+						</DropdownMenuV2.Item>
+					</DropdownMenuV2>
 					<button>Button outside of dropdown</button>
 				</>
 			);
@@ -887,12 +910,14 @@ describe( 'DropdownMenu', () => {
 		it( 'should not be modal when the `modal` prop is set to `false`', async () => {
 			render(
 				<>
-					<DropdownMenu
+					<DropdownMenuV2
 						trigger={ <button>Open dropdown</button> }
 						modal={ false }
 					>
-						<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
-					</DropdownMenu>
+						<DropdownMenuV2.Item>
+							Dropdown menu item
+						</DropdownMenuV2.Item>
+					</DropdownMenuV2>
 					<button>Button outside of dropdown</button>
 				</>
 			);
@@ -915,7 +940,6 @@ describe( 'DropdownMenu', () => {
 
 			// The outer button can be focused by pressing tab. Doing so will cause
 			// the DropdownMenu to close.
-			await sleep();
 			await press.Tab();
 			expect( outerButton ).toBeInTheDocument();
 			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
@@ -925,11 +949,11 @@ describe( 'DropdownMenu', () => {
 	describe( 'items prefix and suffix', () => {
 		it( 'should display a prefix on regular items', async () => {
 			render(
-				<DropdownMenu trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuItem prefix={ <>Item prefix</> }>
+				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuV2.Item prefix={ <>Item prefix</> }>
 						Dropdown menu item
-					</DropdownMenuItem>
-				</DropdownMenu>
+					</DropdownMenuV2.Item>
+				</DropdownMenuV2>
 			);
 
 			// Click to open the menu
@@ -949,11 +973,11 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should display a suffix on regular items', async () => {
 			render(
-				<DropdownMenu trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuItem suffix={ <>Item suffix</> }>
+				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuV2.Item suffix={ <>Item suffix</> }>
 						Dropdown menu item
-					</DropdownMenuItem>
-				</DropdownMenu>
+					</DropdownMenuV2.Item>
+				</DropdownMenuV2>
 			);
 
 			// Click to open the menu
@@ -973,15 +997,15 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should display a suffix on radio items', async () => {
 			render(
-				<DropdownMenu trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuRadioItem
+				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuV2.RadioItem
 						name="radio-test"
 						value="radio-one"
 						suffix="Radio suffix"
 					>
 						Radio item one
-					</DropdownMenuRadioItem>
-				</DropdownMenu>
+					</DropdownMenuV2.RadioItem>
+				</DropdownMenuV2>
 			);
 
 			// Click to open the menu
@@ -1001,15 +1025,15 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should display a suffix on checkbox items', async () => {
 			render(
-				<DropdownMenu trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuCheckboxItem
+				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuV2.CheckboxItem
 						name="checkbox-test"
 						value="checkbox-one"
 						suffix="Checkbox suffix"
 					>
 						Checkbox item one
-					</DropdownMenuCheckboxItem>
-				</DropdownMenu>
+					</DropdownMenuV2.CheckboxItem>
+				</DropdownMenuV2>
 			);
 
 			// Click to open the menu
@@ -1031,10 +1055,10 @@ describe( 'DropdownMenu', () => {
 	describe( 'typeahead', () => {
 		it( 'should highlight matching item', async () => {
 			render(
-				<DropdownMenu trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuItem>One</DropdownMenuItem>
-					<DropdownMenuItem>Two</DropdownMenuItem>
-				</DropdownMenu>
+				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuV2.Item>One</DropdownMenuV2.Item>
+					<DropdownMenuV2.Item>Two</DropdownMenuV2.Item>
+				</DropdownMenuV2>
 			);
 
 			// Click to open the menu
@@ -1064,10 +1088,10 @@ describe( 'DropdownMenu', () => {
 
 		it( 'should keep previous focus when no matches are found', async () => {
 			render(
-				<DropdownMenu trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuItem>One</DropdownMenuItem>
-					<DropdownMenuItem>Two</DropdownMenuItem>
-				</DropdownMenu>
+				<DropdownMenuV2 trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuV2.Item>One</DropdownMenuV2.Item>
+					<DropdownMenuV2.Item>Two</DropdownMenuV2.Item>
+				</DropdownMenuV2>
 			);
 
 			// Click to open the menu
diff --git a/packages/components/src/dropdown-menu-v2/types.ts b/packages/components/src/dropdown-menu-v2/types.ts
index f49f026b78793..795cd9ac76ff5 100644
--- a/packages/components/src/dropdown-menu-v2/types.ts
+++ b/packages/components/src/dropdown-menu-v2/types.ts
@@ -87,6 +87,13 @@ export interface DropdownMenuGroupProps {
 	children: React.ReactNode;
 }
 
+export interface DropdownMenuGroupLabelProps {
+	/**
+	 * The contents of the dropdown menu group.
+	 */
+	children: React.ReactNode;
+}
+
 export interface DropdownMenuItemProps {
 	/**
 	 * The contents of the menu item.
diff --git a/packages/components/src/dropdown-menu-v2/use-temporary-focus-visible-fix.ts b/packages/components/src/dropdown-menu-v2/use-temporary-focus-visible-fix.ts
new file mode 100644
index 0000000000000..0df1313373960
--- /dev/null
+++ b/packages/components/src/dropdown-menu-v2/use-temporary-focus-visible-fix.ts
@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, flushSync } from '@wordpress/element';
+
+export function useTemporaryFocusVisibleFix( {
+	onBlur: onBlurProp,
+}: {
+	onBlur?: React.FocusEventHandler< HTMLDivElement >;
+} ) {
+	const [ focusVisible, setFocusVisible ] = useState( false );
+	return {
+		'data-focus-visible': focusVisible || undefined,
+		onFocusVisible: () => {
+			flushSync( () => setFocusVisible( true ) );
+		},
+		onBlur: ( ( event ) => {
+			onBlurProp?.( event );
+			setFocusVisible( false );
+		} ) as React.FocusEventHandler< HTMLDivElement >,
+	};
+}
diff --git a/packages/components/src/dropdown-menu/stories/index.story.tsx b/packages/components/src/dropdown-menu/stories/index.story.tsx
index b6bc11ddec9ab..dd4907bd0b96b 100644
--- a/packages/components/src/dropdown-menu/stories/index.story.tsx
+++ b/packages/components/src/dropdown-menu/stories/index.story.tsx
@@ -96,6 +96,9 @@ export const WithChildren: StoryObj< typeof DropdownMenu > = {
 		icon: more,
 		children: ( { onClose } ) => (
 			<>
+				<MenuItem icon={ arrowUp } onClick={ onClose }>
+					Standalone Item
+				</MenuItem>
 				<MenuGroup>
 					<MenuItem icon={ arrowUp } onClick={ onClose }>
 						Move Up
diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx
index c6fe5014ffdc2..0f07664787cc3 100644
--- a/packages/components/src/dropdown/stories/index.story.tsx
+++ b/packages/components/src/dropdown/stories/index.story.tsx
@@ -99,6 +99,7 @@ export const WithMenuItems: StoryObj< typeof Dropdown > = {
 		...Default.args,
 		renderContent: () => (
 			<>
+				<MenuItem>Standalone Item</MenuItem>
 				<MenuGroup label="Group 1">
 					<MenuItem>Item 1</MenuItem>
 					<MenuItem>Item 2</MenuItem>
diff --git a/packages/components/src/dropdown/style.scss b/packages/components/src/dropdown/style.scss
index 8a5b0e0a0a6a2..d7ae7963f7ed8 100644
--- a/packages/components/src/dropdown/style.scss
+++ b/packages/components/src/dropdown/style.scss
@@ -5,6 +5,16 @@
 .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"] {
@@ -13,22 +23,9 @@
 
 	.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;
 	}
diff --git a/packages/components/src/focal-point-picker/README.md b/packages/components/src/focal-point-picker/README.md
index f5db4885fdf7a..baa6601d74dbc 100644
--- a/packages/components/src/focal-point-picker/README.md
+++ b/packages/components/src/focal-point-picker/README.md
@@ -100,10 +100,18 @@ Callback which is called at the start of drag operations.
 
 Function which is called before internal updates to the value state. It receives the upcoming value and may return a modified one.
 
-#### __nextHasNoMarginBottom
+### `__next40pxDefaultSize`
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
 
 Start opting into the new margin-free styles that will become the default in a future version.
 
+### `__nextHasNoMarginBottom`
+
 -   Type: `Boolean`
 -   Required: No
 -   Default: `false`
+
+Start opting into the new margin-free styles that will become the default in a future version.
\ No newline at end of file
diff --git a/packages/components/src/focal-point-picker/controls.tsx b/packages/components/src/focal-point-picker/controls.tsx
index 3df1725bf3bed..1ecf846b10635 100644
--- a/packages/components/src/focal-point-picker/controls.tsx
+++ b/packages/components/src/focal-point-picker/controls.tsx
@@ -23,7 +23,6 @@ const noop = () => {};
 
 export default function FocalPointPickerControls( {
 	__nextHasNoMarginBottom,
-	__next40pxDefaultSize,
 	hasHelpText,
 	onChange = noop,
 	point = {
@@ -57,7 +56,6 @@ export default function FocalPointPickerControls( {
 			gap={ 4 }
 		>
 			<FocalPointUnitControl
-				__next40pxDefaultSize={ __next40pxDefaultSize }
 				label={ __( 'Left' ) }
 				aria-label={ __( 'Focal point left position' ) }
 				value={ [ valueX, '%' ].join( '' ) }
@@ -71,7 +69,6 @@ export default function FocalPointPickerControls( {
 				dragDirection="e"
 			/>
 			<FocalPointUnitControl
-				__next40pxDefaultSize={ __next40pxDefaultSize }
 				label={ __( 'Top' ) }
 				aria-label={ __( 'Focal point top position' ) }
 				value={ [ valueY, '%' ].join( '' ) }
@@ -91,6 +88,7 @@ export default function FocalPointPickerControls( {
 function FocalPointUnitControl( props: UnitControlProps ) {
 	return (
 		<StyledUnitControl
+			__next40pxDefaultSize
 			className="focal-point-picker__controls-position-unit-control"
 			labelPosition="top"
 			max={ TEXTCONTROL_MAX }
diff --git a/packages/components/src/focal-point-picker/index.tsx b/packages/components/src/focal-point-picker/index.tsx
index 4575108fe6a21..cad14aff5b693 100644
--- a/packages/components/src/focal-point-picker/index.tsx
+++ b/packages/components/src/focal-point-picker/index.tsx
@@ -85,7 +85,6 @@ const GRID_OVERLAY_TIMEOUT = 600;
  */
 export function FocalPointPicker( {
 	__nextHasNoMarginBottom,
-	__next40pxDefaultSize = false,
 	autoPlay = true,
 	className,
 	help,
@@ -251,6 +250,7 @@ export function FocalPointPicker( {
 		<BaseControl
 			{ ...restProps }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="FocalPointPicker"
 			label={ label }
 			id={ id }
 			help={ help }
@@ -285,7 +285,6 @@ export function FocalPointPicker( {
 			</MediaWrapper>
 			<Controls
 				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-				__next40pxDefaultSize={ __next40pxDefaultSize }
 				hasHelpText={ !! help }
 				point={ { x, y } }
 				onChange={ ( value ) => {
diff --git a/packages/components/src/focal-point-picker/stories/index.story.tsx b/packages/components/src/focal-point-picker/stories/index.story.tsx
index ce93d3557060c..42fd64b8e4d85 100644
--- a/packages/components/src/focal-point-picker/stories/index.story.tsx
+++ b/packages/components/src/focal-point-picker/stories/index.story.tsx
@@ -49,6 +49,9 @@ const Template: StoryFn< typeof FocalPointPicker > = ( {
 };
 
 export const Default = Template.bind( {} );
+Default.args = {
+	__nextHasNoMarginBottom: true,
+};
 
 export const Image = Template.bind( {} );
 Image.args = {
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
index 71bf4b651b4ad..fba3eda2fb0f2 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
+++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
@@ -22,7 +22,7 @@ export const MediaWrapper = styled.div`
 
 export const MediaContainer = styled.div`
 	align-items: center;
-	border-radius: ${ CONFIG.radiusBlockUi };
+	border-radius: ${ CONFIG.radiusSmall };
 	cursor: pointer;
 	display: inline-flex;
 	justify-content: center;
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-style.ts
index 6f95978256f72..ad1e8eeb28677 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,6 +3,11 @@
  */
 import styled from '@emotion/styled';
 
+/**
+ * Internal dependencies
+ */
+import { CONFIG } from '../../utils';
+
 export const PointerCircle = styled.div`
 	background-color: transparent;
 	cursor: grab;
@@ -15,7 +20,7 @@ export const PointerCircle = styled.div`
 	z-index: 10000;
 	background: rgba( 255, 255, 255, 0.4 );
 	border: 1px solid rgba( 255, 255, 255, 0.4 );
-	border-radius: 50%;
+	border-radius: ${ CONFIG.radiusRound };
 	backdrop-filter: blur( 16px ) saturate( 180% );
 	box-shadow: rgb( 0 0 0 / 10% ) 0px 0px 8px;
 
diff --git a/packages/components/src/focal-point-picker/test/index.tsx b/packages/components/src/focal-point-picker/test/index.tsx
index 1eccced32c70a..377ba6c4e9e6b 100644
--- a/packages/components/src/focal-point-picker/test/index.tsx
+++ b/packages/components/src/focal-point-picker/test/index.tsx
@@ -7,12 +7,16 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import Picker from '..';
+import _Picker from '..';
 import type { FocalPointPickerProps } from '../types';
 
 type Log = { name: string; args: unknown[] };
 type EventLogger = ( name: string, args: unknown[] ) => void;
 
+const Picker = ( props: React.ComponentProps< typeof _Picker > ) => {
+	return <_Picker { ...props } __nextHasNoMarginBottom />;
+};
+
 const props: FocalPointPickerProps = {
 	onChange: jest.fn(),
 	url: 'test-url',
diff --git a/packages/components/src/focal-point-picker/types.ts b/packages/components/src/focal-point-picker/types.ts
index bd66ae02451a9..357af1e090d7f 100644
--- a/packages/components/src/focal-point-picker/types.ts
+++ b/packages/components/src/focal-point-picker/types.ts
@@ -29,7 +29,8 @@ export type FocalPointPickerProps = Pick<
 	/**
 	 * Start opting into the larger default height that will become the default size in a future version.
 	 *
-	 * @default false
+	 * @deprecated Default behavior since WP 6.7. Prop can be safely removed.
+	 * @ignore
 	 */
 	__next40pxDefaultSize?: boolean;
 	/**
@@ -68,7 +69,6 @@ export type FocalPointPickerProps = Pick<
 
 export type FocalPointPickerControlsProps = {
 	__nextHasNoMarginBottom?: boolean;
-	__next40pxDefaultSize?: boolean;
 	/**
 	 * A bit of extra bottom margin will be added if a `help` text
 	 * needs to be rendered under it.
diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md
index 790468acc6c1f..5d7fe2b39a737 100644
--- a/packages/components/src/font-size-picker/README.md
+++ b/packages/components/src/font-size-picker/README.md
@@ -113,3 +113,10 @@ If `true`, a slider will be displayed alongside the input field when a custom fo
 
 -   Required: no
 -   Default: `false`
+
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Required: No
+- Default: `false`
diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx
index f91c12e352bf8..e7205e57eefaa 100644
--- a/packages/components/src/font-size-picker/test/index.tsx
+++ b/packages/components/src/font-size-picker/test/index.tsx
@@ -1,8 +1,9 @@
 /**
  * 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
@@ -44,7 +45,9 @@ describe( 'FontSizePicker', () => {
 		async ( { value, expectedValue } ) => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render( <FontSizePicker value={ value } onChange={ onChange } /> );
+			await render(
+				<FontSizePicker value={ value } onChange={ onChange } />
+			);
 			const input = screen.getByLabelText( 'Custom' );
 			await user.clear( input );
 			await user.type( input, '80' );
@@ -63,7 +66,7 @@ describe( 'FontSizePicker', () => {
 		async ( { firstFontSize, expectedValue } ) => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker
 					fontSizes={ [ { slug: 'slug', size: firstFontSize } ] }
 					onChange={ onChange }
@@ -115,7 +118,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'displays a select control', async () => {
 			const user = userEvent.setup();
-			render( <FontSizePicker fontSizes={ fontSizes } /> );
+			await render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
 				screen.getByRole( 'combobox', { name: 'Font size' } )
 			);
@@ -137,8 +140,8 @@ describe( 'FontSizePicker', () => {
 			{ value: '3px', expectedLabel: 'Size Custom' },
 		] )(
 			'displays $expectedLabel as label when value is $value',
-			( { value, expectedLabel } ) => {
-				render(
+			async ( { value, expectedLabel } ) => {
+				await render(
 					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
@@ -161,7 +164,7 @@ describe( 'FontSizePicker', () => {
 			async ( { option, value, expectedArguments } ) => {
 				const user = userEvent.setup();
 				const onChange = jest.fn();
-				render(
+				await render(
 					<FontSizePicker
 						fontSizes={ fontSizes }
 						value={ value }
@@ -219,7 +222,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'displays a select control', async () => {
 			const user = userEvent.setup();
-			render( <FontSizePicker fontSizes={ fontSizes } /> );
+			await render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
 				screen.getByRole( 'combobox', { name: 'Font size' } )
 			);
@@ -241,8 +244,8 @@ describe( 'FontSizePicker', () => {
 			{ value: '8px', option: 'Tiny' },
 		] )(
 			'defaults to $option when value is $value',
-			( { value, option } ) => {
-				render(
+			async ( { value, option } ) => {
+				await render(
 					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
@@ -260,8 +263,8 @@ describe( 'FontSizePicker', () => {
 			{ value: '3px', expectedLabel: 'Size Custom' },
 		] )(
 			'displays $expectedLabel as label when value is $value',
-			( { value, expectedLabel } ) => {
-				render(
+			async ( { value, expectedLabel } ) => {
+				await render(
 					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
@@ -302,7 +305,7 @@ describe( 'FontSizePicker', () => {
 			async ( { option, value, expectedArguments } ) => {
 				const user = userEvent.setup();
 				const onChange = jest.fn();
-				render(
+				await render(
 					<FontSizePicker
 						fontSizes={ fontSizes }
 						value={ value }
@@ -353,8 +356,8 @@ describe( 'FontSizePicker', () => {
 			},
 		];
 
-		it( 'displays a toggle group control with t-shirt sizes', () => {
-			render( <FontSizePicker 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' );
@@ -375,8 +378,8 @@ describe( 'FontSizePicker', () => {
 			{ value: '40px', expectedLabel: 'Size Gigantosaurus' },
 		] )(
 			'displays $expectedLabel as label when value is $value',
-			( { value, expectedLabel } ) => {
-				render(
+			async ( { value, expectedLabel } ) => {
+				await render(
 					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
@@ -386,7 +389,7 @@ describe( 'FontSizePicker', () => {
 		it( 'calls onChange when a font size is selected', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click( screen.getByRole( 'radio', { name: 'Medium' } ) );
@@ -422,8 +425,8 @@ describe( 'FontSizePicker', () => {
 			},
 		];
 
-		it( 'displays a toggle group control with t-shirt sizes', () => {
-			render( <FontSizePicker 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' );
@@ -447,8 +450,8 @@ describe( 'FontSizePicker', () => {
 			},
 		] )(
 			'displays $expectedLabel as label when value is $value',
-			( { value, expectedLabel } ) => {
-				render(
+			async ( { value, expectedLabel } ) => {
+				await render(
 					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
@@ -471,7 +474,7 @@ describe( 'FontSizePicker', () => {
 			async ( { radio, expectedArguments } ) => {
 				const user = userEvent.setup();
 				const onChange = jest.fn();
-				render(
+				await render(
 					<FontSizePicker
 						fontSizes={ fontSizes }
 						onChange={ onChange }
@@ -490,8 +493,8 @@ 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
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
@@ -504,8 +507,8 @@ describe( 'FontSizePicker', () => {
 
 		test.each( [ undefined, '' ] )(
 			'has no selection when value is %p',
-			( value ) => {
-				render(
+			async ( value ) => {
+				await render(
 					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect( screen.getByRole( 'radiogroup' ) ).toBeVisible();
@@ -520,7 +523,7 @@ describe( 'FontSizePicker', () => {
 		it( 'shows custom input when Custom is selected', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click(
@@ -535,13 +538,15 @@ describe( 'FontSizePicker', () => {
 	}
 
 	function commonTests( fontSizes: FontSize[] ) {
-		it( 'shows custom input when value is unknown', () => {
-			render( <FontSizePicker fontSizes={ fontSizes } value="3px" /> );
+		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', () => {
-			const { rerender } = render(
+		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();
@@ -558,8 +563,8 @@ describe( 'FontSizePicker', () => {
 			).not.toBeInTheDocument();
 		} );
 
-		it( "doesn't hide custom input when the selected font size is a predef", () => {
-			const { rerender } = 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();
@@ -576,7 +581,7 @@ describe( 'FontSizePicker', () => {
 		it( 'allows custom values by default', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click(
@@ -590,7 +595,9 @@ describe( 'FontSizePicker', () => {
 		it( 'allows switching between custom and predef inputs when pressing the dedicated toggle', async () => {
 			const user = userEvent.setup();
 
-			render( <ControlledFontSizePicker fontSizes={ fontSizes } /> );
+			await render(
+				<ControlledFontSizePicker fontSizes={ fontSizes } />
+			);
 
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
@@ -607,8 +614,8 @@ describe( 'FontSizePicker', () => {
 			).not.toBeInTheDocument();
 		} );
 
-		it( 'does not allow custom values when disableCustomFontSizes is set', () => {
-			render(
+		it( 'does not allow custom values when disableCustomFontSizes is set', async () => {
+			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
 					disableCustomFontSizes
@@ -621,7 +628,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'does not display a slider by default', async () => {
 			const user = userEvent.setup();
-			render( <FontSizePicker fontSizes={ fontSizes } /> );
+			await render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
@@ -633,7 +640,7 @@ describe( 'FontSizePicker', () => {
 		it( 'allows a slider to be used when withSlider is set', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
 					withSlider
@@ -654,7 +661,7 @@ describe( 'FontSizePicker', () => {
 		it( 'allows reset by default', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
@@ -671,7 +678,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'does not allow reset when withReset is false', async () => {
 			const user = userEvent.setup();
-			render(
+			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
@@ -689,7 +696,7 @@ describe( 'FontSizePicker', () => {
 		it( 'applies custom units to custom font size control', async () => {
 			const user = userEvent.setup();
 
-			render(
+			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
diff --git a/packages/components/src/form-file-upload/README.md b/packages/components/src/form-file-upload/README.md
index f4dc4d1ef5a02..4dd8affc5f54a 100644
--- a/packages/components/src/form-file-upload/README.md
+++ b/packages/components/src/form-file-upload/README.md
@@ -85,3 +85,11 @@ Optional callback function used to render the UI. If passed, the component does
 
 -   Type: `Function`
 -   Required: No
+
+### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/form-file-upload/types.ts b/packages/components/src/form-file-upload/types.ts
index 5b9054fa869ee..728ed959aba76 100644
--- a/packages/components/src/form-file-upload/types.ts
+++ b/packages/components/src/form-file-upload/types.ts
@@ -10,6 +10,12 @@ import type Icon from '../icon';
 
 // TODO: Replace `children` and `icon` types with props from Button once Button is typed.
 export type FormFileUploadProps = {
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * A string passed to `input` element that tells the browser which file types can be
 	 * upload to the upload by the user use. e.g: `image/*,video/*`.
diff --git a/packages/components/src/form-toggle/index.tsx b/packages/components/src/form-toggle/index.tsx
index f0f800514a411..8a90fe4561bff 100644
--- a/packages/components/src/form-toggle/index.tsx
+++ b/packages/components/src/form-toggle/index.tsx
@@ -17,26 +17,7 @@ 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(
+function UnforwardedFormToggle(
 	props: WordPressComponentProps< FormToggleProps, 'input', false >,
 	ref: ForwardedRef< HTMLInputElement >
 ) {
@@ -71,4 +52,25 @@ export function FormToggle(
 	);
 }
 
-export default forwardRef( 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/style.scss b/packages/components/src/form-toggle/style.scss
index d04ad4c651f86..900874b59004b 100644
--- a/packages/components/src/form-toggle/style.scss
+++ b/packages/components/src/form-toggle/style.scss
@@ -1,15 +1,16 @@
 @use "sass:math";
 
-$toggle-width: 36px;
-$toggle-height: 18px;
+$toggle-width: $grid-unit-40;
+$toggle-height: $grid-unit-20;
 $toggle-border-width: 1px;
-$thumb-size:  $toggle-height - ($toggle-border-width * 6);
+$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 {
@@ -19,7 +20,7 @@ $transition-duration: 0.2s;
 		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: math.div($toggle-height, 2);
@@ -49,19 +50,20 @@ $transition-duration: 0.2s;
 		display: block;
 		position: absolute;
 		box-sizing: border-box;
-		top: $toggle-border-width * 3;
-		left: $toggle-border-width * 3;
-		width: $thumb-size;
-		height: $thumb-size;
-		border-radius: 50%;
+		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;
+		box-shadow: $elevation-x-small;
 
 		// Transparent border acts as a fill in Windows High Contrast Mode.
-		border: math.div($thumb-size, 2) solid transparent;
+		border: math.div($toggle-thumb-size, 2) solid transparent;
 	}
 
 	// Checked state.
@@ -116,4 +118,8 @@ $transition-duration: 0.2s;
 	&::before {
 		content: "";
 	}
+
+	&:not(:disabled, [aria-disabled="true"]) {
+		cursor: pointer;
+	}
 }
diff --git a/packages/components/src/form-token-field/README.md b/packages/components/src/form-token-field/README.md
index 3da19ba534d31..70e9bd09a61a3 100644
--- a/packages/components/src/form-token-field/README.md
+++ b/packages/components/src/form-token-field/README.md
@@ -61,6 +61,7 @@ The `value` property is handled in a manner similar to controlled form component
 -   `__experimentalShowHowTo` - If false, the text on how to use the select (ie: _Separate with commas or the Enter key._) will be hidden.
 -   `__experimentalValidateInput` - If passed, all introduced values will be validated before being added as tokens.
 -   `__experimentalAutoSelectFirstMatch` - If true, the select the first matching suggestion when the user presses the Enter key (or space when tokenizeOnSpace is true).
+-   `__next40pxDefaultSize` - Start opting into the larger default height that will become the default size in a future version.
 -   `__nextHasNoMarginBottom` - Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 7.0. (The prop can be safely removed once this happens.)
 -   `tokenizeOnBlur` - If true, add any incompleteTokenValue as a new token when the field loses focus.
 
diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
index 57435a3f62ad2..cf5cc5b63e222 100644
--- a/packages/components/src/form-token-field/style.scss
+++ b/packages/components/src/form-token-field/style.scss
@@ -102,7 +102,6 @@
 		&.is-error {
 			.components-form-token-field__token-text {
 				color: $alert-red;
-				border-radius: 4px 0 0 4px;
 				padding: 0 4px 0 6px;
 			}
 		}
@@ -133,7 +132,7 @@
 }
 
 .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;
 	white-space: nowrap;
 	overflow: hidden;
@@ -142,7 +141,7 @@
 
 .components-form-token-field__remove-token.components-button {
 	cursor: pointer;
-	border-radius: 0 2px 2px 0;
+	border-radius: 0 $radius-x-small $radius-x-small 0;
 	padding: 0 2px;
 	color: $gray-900;
 	line-height: 10px;
diff --git a/packages/components/src/form-token-field/types.ts b/packages/components/src/form-token-field/types.ts
index db4549a7f0779..051f00a6cdeb0 100644
--- a/packages/components/src/form-token-field/types.ts
+++ b/packages/components/src/form-token-field/types.ts
@@ -157,6 +157,7 @@ export interface FormTokenFieldProps
 	 *
 	 * @default false
 	 * @deprecated
+	 * @ignore
 	 */
 	__next36pxDefaultSize?: boolean;
 	/**
diff --git a/packages/components/src/guide/index.tsx b/packages/components/src/guide/index.tsx
index afb39e7bd12b5..121c9f22330e8 100644
--- a/packages/components/src/guide/index.tsx
+++ b/packages/components/src/guide/index.tsx
@@ -144,6 +144,7 @@ function Guide( {
 							className="components-guide__back-button"
 							variant="tertiary"
 							onClick={ goBack }
+							__next40pxDefaultSize
 						>
 							{ __( 'Previous' ) }
 						</Button>
@@ -153,6 +154,7 @@ function Guide( {
 							className="components-guide__forward-button"
 							variant="primary"
 							onClick={ goForward }
+							__next40pxDefaultSize
 						>
 							{ __( 'Next' ) }
 						</Button>
@@ -162,6 +164,7 @@ function Guide( {
 							className="components-guide__finish-button"
 							variant="primary"
 							onClick={ onFinish }
+							__next40pxDefaultSize
 						>
 							{ finishButtonText }
 						</Button>
diff --git a/packages/components/src/guide/style.scss b/packages/components/src/guide/style.scss
index 76f7b03ac4aaf..073bfc0684307 100644
--- a/packages/components/src/guide/style.scss
+++ b/packages/components/src/guide/style.scss
@@ -9,7 +9,6 @@
 	.components-modal__content {
 		padding: 0;
 		margin-top: 0;
-		border-radius: $radius-block-ui;
 
 		&::before {
 			content: none;
diff --git a/packages/components/src/heading/types.ts b/packages/components/src/heading/types.ts
index 4767c0407d5a0..6ec3f0a82ef2e 100644
--- a/packages/components/src/heading/types.ts
+++ b/packages/components/src/heading/types.ts
@@ -17,10 +17,7 @@ export type HeadingSize =
 	| '5'
 	| '6';
 
-export type HeadingProps = Omit<
-	TextProps,
-	'size' | 'isBlock' | 'color' | 'weight'
-> & {
+export type HeadingProps = Omit< TextProps, 'isBlock' | 'color' | 'weight' > & {
 	/**
 	 * Passing any of the heading levels to `level` will both render the correct
 	 * typographic text size as well as the semantic element corresponding to
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index f0ea4a4b7e86b..e82d6da70279e 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -12,7 +12,11 @@ export {
 } from '@wordpress/primitives';
 
 // Components.
-export { default as __experimentalAlignmentMatrixControl } from './alignment-matrix-control';
+export {
+	/** @deprecated Import `AlignmentMatrixControl` instead. */
+	default as __experimentalAlignmentMatrixControl,
+	default as AlignmentMatrixControl,
+} from './alignment-matrix-control';
 export {
 	default as Animate,
 	getAnimateClassName as __unstableGetAnimateClassName,
@@ -29,14 +33,22 @@ export {
 } 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 { BorderControl as __experimentalBorderControl } from './border-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';
@@ -61,7 +73,8 @@ export {
 	CompositeGroup as __unstableCompositeGroup,
 	CompositeItem as __unstableCompositeItem,
 	useCompositeState as __unstableUseCompositeState,
-} from './composite';
+} from './composite/legacy';
+export { Composite } from './composite';
 export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as Dashicon } from './dashicon';
@@ -116,11 +129,21 @@ 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';
diff --git a/packages/components/src/input-control/README.md b/packages/components/src/input-control/README.md
index 7af244f823516..58a3b4a3b1a09 100644
--- a/packages/components/src/input-control/README.md
+++ b/packages/components/src/input-control/README.md
@@ -107,3 +107,11 @@ The current value of the input.
 
 -   Type: `String`
 -   Required: No
+
+### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx
index a5a9e054bc37d..fd0fc0a5c4553 100644
--- a/packages/components/src/input-control/index.tsx
+++ b/packages/components/src/input-control/index.tsx
@@ -100,8 +100,8 @@ export function UnforwardedInputControl(
 					isPressEnterToChange={ isPressEnterToChange }
 					onKeyDown={ onKeyDown }
 					onValidate={ onValidate }
-					paddingInlineStart={ prefix ? space( 2 ) : undefined }
-					paddingInlineEnd={ suffix ? space( 2 ) : undefined }
+					paddingInlineStart={ prefix ? space( 1 ) : undefined }
+					paddingInlineEnd={ suffix ? space( 1 ) : undefined }
 					ref={ ref }
 					size={ size }
 					stateReducer={ stateReducer }
diff --git a/packages/components/src/input-control/input-base.tsx b/packages/components/src/input-control/input-base.tsx
index 58396f3ab9859..f1b8227563cfd 100644
--- a/packages/components/src/input-control/input-base.tsx
+++ b/packages/components/src/input-control/input-base.tsx
@@ -14,13 +14,7 @@ import { useMemo } from '@wordpress/element';
  */
 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 type { WordPressComponentProps } from '../context';
 import {
@@ -90,16 +84,12 @@ function InputBase(
 	const id = useUniqueId( idProp );
 	const hideLabel = hideLabelFromVision || ! label;
 
-	const { paddingLeft, paddingRight } = getSizeConfig( {
-		inputSize: size,
-		__next40pxDefaultSize,
-	} );
 	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.
diff --git a/packages/components/src/input-control/input-prefix-wrapper.tsx b/packages/components/src/input-control/input-prefix-wrapper.tsx
index 23d9e823da932..c5232e4d9e6bb 100644
--- a/packages/components/src/input-control/input-prefix-wrapper.tsx
+++ b/packages/components/src/input-control/input-prefix-wrapper.tsx
@@ -6,19 +6,23 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { Spacer } from '../spacer';
 import type { WordPressComponentProps } from '../context';
 import { contextConnect, useContextSystem } from '../context';
-import type { InputControlPrefixWrapperProps } from './types';
+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 1be352f562e36..fb3ec4c6ae9be 100644
--- a/packages/components/src/input-control/input-suffix-wrapper.tsx
+++ b/packages/components/src/input-control/input-suffix-wrapper.tsx
@@ -6,20 +6,18 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { Spacer } from '../spacer';
 import type { WordPressComponentProps } from '../context';
 import { contextConnect, useContextSystem } from '../context';
-import type { InputControlSuffixWrapperProps } from './types';
+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/reducer/reducer.ts b/packages/components/src/input-control/reducer/reducer.ts
index 8e3584d3910d7..51e54d6492f5c 100644
--- a/packages/components/src/input-control/reducer/reducer.ts
+++ b/packages/components/src/input-control/reducer/reducer.ts
@@ -192,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 >,
 			} );
@@ -220,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
index 6067c467f9fe6..1a9290e8e856e 100644
--- a/packages/components/src/input-control/stories/index.story.tsx
+++ b/packages/components/src/input-control/stories/index.story.tsx
@@ -5,7 +5,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 /**
  * WordPress dependencies
  */
-import { seen, unseen } from '@wordpress/icons';
+import { closeSmall, Icon, link, seen, unseen } from '@wordpress/icons';
 import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
@@ -75,6 +75,29 @@ WithSuffix.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,
@@ -95,17 +118,13 @@ export const ShowPassword: StoryFn< typeof InputControl > = ( args ) => {
 			type={ visible ? 'text' : 'password' }
 			label="Password"
 			suffix={
-				<InputControlSuffixWrapper>
-					<div style={ { display: 'flex' } }>
-						<Button
-							size="small"
-							icon={ visible ? unseen : seen }
-							onClick={ () => setVisible( ( value ) => ! value ) }
-							label={
-								visible ? 'Hide password' : 'Show password'
-							}
-						/>
-					</div>
+				<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/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx
index ddfad620b9124..39eea8fdb029a 100644
--- a/packages/components/src/input-control/styles/input-control-styles.tsx
+++ b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -13,8 +13,7 @@ import type { WordPressComponentProps } from '../../context';
 import { Flex, FlexItem } from '../../flex';
 import { Text } from '../../text';
 import { baseLabelTypography, COLORS, CONFIG, rtl } from '../../utils';
-import type { LabelPosition, Size } from '../types';
-import { space } from '../../utils/space';
+import type { LabelPosition, Size, PrefixSuffixWrapperProps } from '../types';
 
 type ContainerProps = {
 	disabled?: boolean;
@@ -78,7 +77,7 @@ export const BackdropUI = styled.div< BackdropProps >`
 export const Root = styled( Flex )`
 	box-sizing: border-box;
 	position: relative;
-	border-radius: 2px;
+	border-radius: ${ CONFIG.radiusSmall };
 	padding-top: 0;
 
 	// Focus within, excluding cases where auxiliary controls in prefix or suffix have focus.
@@ -188,29 +187,29 @@ export const getSizeConfig = ( {
 			height: 40,
 			lineHeight: 1,
 			minHeight: 40,
-			paddingLeft: space( 4 ),
-			paddingRight: space( 4 ),
+			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: space( 2 ),
-			paddingRight: space( 2 ),
+			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,
 		},
 	};
 
@@ -319,3 +318,35 @@ export const Label = (
 export const LabelWrapper = styled( FlexItem )`
 	max-width: calc( 100% - 10px );
 `;
+
+const prefixSuffixWrapperStyles = ( {
+	variant = 'default',
+	size,
+	__next40pxDefaultSize,
+	isPrefix,
+}: PrefixSuffixWrapperProps & { isPrefix?: boolean } ) => {
+	const { paddingLeft: padding } = getSizeConfig( {
+		inputSize: size,
+		__next40pxDefaultSize,
+	} );
+
+	const paddingProperty = isPrefix
+		? 'paddingInlineStart'
+		: 'paddingInlineEnd';
+
+	if ( variant === 'default' ) {
+		return css( {
+			[ paddingProperty ]: padding,
+		} );
+	}
+
+	// If variant is 'icon' or 'control'
+	return css( {
+		display: 'flex',
+		[ paddingProperty ]: padding - 4,
+	} );
+};
+
+export const PrefixSuffixWrapper = styled.div`
+	${ prefixSuffixWrapperStyles }
+`;
diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts
index ef01a9fe3db00..13f078cd89cc1 100644
--- a/packages/components/src/input-control/types.ts
+++ b/packages/components/src/input-control/types.ts
@@ -31,6 +31,7 @@ interface BaseProps {
 	 *
 	 * @default false
 	 * @deprecated
+	 * @ignore
 	 */
 	__next36pxDefaultSize?: boolean;
 	/**
@@ -208,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 7e3eb93980800..5bc42312af1f5 100644
--- a/packages/components/src/input-control/utils.ts
+++ b/packages/components/src/input-control/utils.ts
@@ -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,8 +84,8 @@ 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;
+		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 ) {
diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts
index 166f225790ce2..a2d73c8dcfc59 100644
--- a/packages/components/src/item-group/styles.ts
+++ b/packages/components/src/item-group/styles.ts
@@ -70,7 +70,7 @@ export const separated = css`
 	}
 `;
 
-const borderRadius = CONFIG.controlBorderRadius;
+const borderRadius = CONFIG.radiusSmall;
 
 export const spacedAround = css`
 	border-radius: ${ borderRadius };
@@ -105,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 24ecd27f68c49..4104a4bf5140c 100644
--- a/packages/components/src/item-group/test/__snapshots__/index.js.snap
+++ b/packages/components/src/item-group/test/__snapshots__/index.js.snap
@@ -12,7 +12,7 @@ Snapshot Diff:
       >
         <div
 -         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-1h3jinl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
++         class="components-item css-1ycukrf-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -25,7 +25,7 @@ Snapshot Diff:
       >
         <div
 -         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-1h3jinl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
++         class="components-item css-1ycukrf-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -45,7 +45,7 @@ Snapshot Diff:
     >
       <div
 -       class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
-+       class="components-item css-vss65r-PolymorphicDiv-large-item e19lxcc00"
++       class="components-item css-sbyvbg-PolymorphicDiv-large-item e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss
index d9412c504940b..744e3f74c5b95 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-items-choice/style.scss b/packages/components/src/menu-items-choice/style.scss
index 5de8363be0d6e..383eb4066ba86 100644
--- a/packages/components/src/menu-items-choice/style.scss
+++ b/packages/components/src/menu-items-choice/style.scss
@@ -1,5 +1,7 @@
 .components-menu-items-choice,
 .components-menu-items-choice.components-button {
+	height: auto;
+
 	svg {
 		margin-right: $grid-unit-15;
 	}
diff --git a/packages/components/src/mobile/utils/alignments.native.js b/packages/components/src/mobile/utils/alignments.native.js
index bc42385988a5d..f1f737d7ed367 100644
--- a/packages/components/src/mobile/utils/alignments.native.js
+++ b/packages/components/src/mobile/utils/alignments.native.js
@@ -13,6 +13,7 @@ export const WIDE_ALIGNMENTS = {
 		'core/image',
 		'core/separator',
 		'core/media-text',
+		'core/quote',
 		'core/pullquote',
 	],
 };
diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index 42ba2d78db57a..7d55c9a4d5d1e 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -2,12 +2,6 @@
  * External dependencies
  */
 import clsx from 'clsx';
-import type {
-	ForwardedRef,
-	KeyboardEvent,
-	MutableRefObject,
-	UIEvent,
-} from 'react';
 
 /**
  * WordPress dependencies
@@ -42,18 +36,21 @@ 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 track and dismiss the prior modal when another opens unless nested.
-const ModalContext = createContext<
-	MutableRefObject< ModalProps[ 'onRequestClose' ] | undefined >[]
->( [] );
+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',
@@ -73,7 +70,7 @@ function UnforwardedModal(
 		closeButtonLabel,
 		children,
 		style,
-		overlayClassName,
+		overlayClassName: overlayClassnameProp,
 		className,
 		contentLabel,
 		onKeyDown,
@@ -138,32 +135,37 @@ function UnforwardedModal(
 	}, [] );
 
 	// Keeps a fresh ref for the subsequent effect.
-	const refOnRequestClose = useRef< ModalProps[ 'onRequestClose' ] >();
+	const onRequestCloseRef = useRef< ModalProps[ 'onRequestClose' ] >();
 	useEffect( () => {
-		refOnRequestClose.current = onRequestClose;
+		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 = useRef< typeof dismissers >( [] );
+	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( () => {
-		dismissers.push( refOnRequestClose );
-		const [ first, second ] = dismissers;
-		if ( second ) {
-			first?.current?.();
+		// 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?.();
+			}
 		}
-
-		const nested = nestedDismissers.current;
 		return () => {
-			nested[ 0 ]?.current?.();
-			dismissers.shift();
+			// 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 ] );
+	}, [ dismissers, nestedDismissers ] );
 
 	// Adds/removes the value of bodyOpenClassName to body element.
 	useEffect( () => {
@@ -182,6 +184,9 @@ function UnforwardedModal(
 		};
 	}, [ bodyOpenClassName ] );
 
+	const { closeModal, frameRef, frameStyle, overlayClassname } =
+		useModalExitAnimation();
+
 	// Calls the isContentScrollable callback when the Modal children container resizes.
 	useLayoutEffect( () => {
 		if ( ! window.ResizeObserver || ! childrenContainerRef.current ) {
@@ -198,21 +203,21 @@ function UnforwardedModal(
 		};
 	}, [ isContentScrollable, childrenContainerRef ] );
 
-	function handleEscapeKeyDown( event: KeyboardEvent< HTMLDivElement > ) {
+	function handleEscapeKeyDown(
+		event: React.KeyboardEvent< HTMLDivElement >
+	) {
 		if (
 			shouldCloseOnEsc &&
 			( 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 ) {
@@ -246,7 +251,7 @@ function UnforwardedModal(
 			const isSameTarget = target === pressTarget;
 			pressTarget = null;
 			if ( button === 0 && isSameTarget ) {
-				onRequestClose();
+				closeModal().then( () => onRequestClose() );
 			}
 		},
 	};
@@ -257,7 +262,8 @@ function UnforwardedModal(
 			ref={ useMergeRefs( [ ref, forwardedRef ] ) }
 			className={ clsx(
 				'components-modal__screen-overlay',
-				overlayClassName
+				overlayClassname,
+				overlayClassnameProp
 			) }
 			onKeyDown={ withIgnoreIMEEvents( handleEscapeKeyDown ) }
 			{ ...( shouldCloseOnClickOutside ? overlayPressHandlers : {} ) }
@@ -269,8 +275,12 @@ function UnforwardedModal(
 						sizeClass,
 						className
 					) }
-					style={ style }
+					style={ {
+						...frameStyle,
+						...style,
+					} }
 					ref={ useMergeRefs( [
+						frameRef,
 						constrainedTabbingRef,
 						focusReturnRef,
 						focusOnMount !== 'firstContentElement'
@@ -322,13 +332,27 @@ function UnforwardedModal(
 								</div>
 								{ headerActions }
 								{ isDismissible && (
-									<Button
-										onClick={ onRequestClose }
-										icon={ close }
-										label={
-											closeButtonLabel || __( 'Close' )
-										}
-									/>
+									<>
+										<Spacer
+											marginBottom={ 0 }
+											marginLeft={ 3 }
+										/>
+										<Button
+											size="small"
+											onClick={ (
+												event: React.MouseEvent< HTMLButtonElement >
+											) =>
+												closeModal().then( () =>
+													onRequestClose( event )
+												)
+											}
+											icon={ close }
+											label={
+												closeButtonLabel ||
+												__( 'Close' )
+											}
+										/>
+									</>
 								) }
 							</div>
 						) }
@@ -350,7 +374,7 @@ function UnforwardedModal(
 	);
 
 	return createPortal(
-		<ModalContext.Provider value={ nestedDismissers.current }>
+		<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
index 60a53947116fa..f180de0dc06a4 100644
--- a/packages/components/src/modal/stories/index.story.tsx
+++ b/packages/components/src/modal/stories/index.story.tsx
@@ -7,7 +7,7 @@ import type { StoryFn, Meta } from '@storybook/react';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { starEmpty, starFilled } from '@wordpress/icons';
+import { fullscreen } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -103,22 +103,16 @@ WithsizeSmall.args = {
 };
 WithsizeSmall.storyName = 'With size: small';
 
-const LikeButton = () => {
-	const [ isLiked, setIsLiked ] = useState( false );
-	return (
-		<Button
-			icon={ isLiked ? starFilled : starEmpty }
-			label="Like"
-			onClick={ () => setIsLiked( ! isLiked ) }
-		/>
-	);
-};
-
+/**
+ * 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: <LikeButton />,
-	isDismissible: false,
+	headerActions: (
+		<Button icon={ fullscreen } label="Fullscreen mode" size="small" />
+	),
+	children: <div style={ { height: '200px' } } />,
 };
 WithHeaderActions.parameters = {
 	...Default.parameters,
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index e563b29070bef..70959f69392d1 100644
--- a/packages/components/src/modal/style.scss
+++ b/packages/components/src/modal/style.scss
@@ -8,9 +8,15 @@
 	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.
@@ -20,19 +26,26 @@
 	margin: $grid-unit-50 0 0 0;
 	width: 100%;
 	background: $white;
-	box-shadow: $shadow-modal;
-	border-radius: $grid-unit-05 $grid-unit-05 0 0;
+	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: components-modal__appear-animation 0.1s ease-out;
+	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: $grid-unit-05;
+		border-radius: $radius-large;
 		margin: auto;
 		width: auto;
 		min-width: $modal-min-width;
@@ -80,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);
 	}
 }
 
@@ -115,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;
 	}
diff --git a/packages/components/src/modal/types.ts b/packages/components/src/modal/types.ts
index 0a422718b1be1..f6f35eec85fc7 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`.
@@ -77,7 +65,7 @@ export type ModalProps = {
 	 *
 	 * @default null
 	 */
-	headerActions?: ReactNode;
+	headerActions?: React.ReactNode;
 
 	/**
 	 * If this property is added, an icon will be added before the title.
@@ -108,12 +96,12 @@ export type ModalProps = {
 	/**
 	 *  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
@@ -126,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.
@@ -144,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 0000000000000..729b4f9ea6f86
--- /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/navigation/index.tsx b/packages/components/src/navigation/index.tsx
index b1c12f59e27a9..0069369f3e00c 100644
--- a/packages/components/src/navigation/index.tsx
+++ b/packages/components/src/navigation/index.tsx
@@ -93,10 +93,10 @@ export function Navigation( {
 	};
 
 	// Used to prevent the sliding animation on mount
-	const isMounted = useRef( false );
+	const isMountedRef = useRef( false );
 	useEffect( () => {
-		if ( ! isMounted.current ) {
-			isMounted.current = true;
+		if ( ! isMountedRef.current ) {
+			isMountedRef.current = true;
 		}
 	}, [] );
 
@@ -130,7 +130,7 @@ export function Navigation( {
 					animateClassName
 						? clsx( {
 								[ animateClassName ]:
-									isMounted.current && slideOrigin,
+									isMountedRef.current && slideOrigin,
 						  } )
 						: undefined
 				}
diff --git a/packages/components/src/navigation/styles/navigation-styles.tsx b/packages/components/src/navigation/styles/navigation-styles.tsx
index 299a9b89bec70..580c0eef4dba8 100644
--- a/packages/components/src/navigation/styles/navigation-styles.tsx
+++ b/packages/components/src/navigation/styles/navigation-styles.tsx
@@ -15,7 +15,7 @@ import { COLORS } from '../../utils/colors-values';
 import Button from '../../button';
 import { Text } from '../../text';
 import { Heading } from '../../heading';
-import { rtl } from '../../utils';
+import { rtl, CONFIG } from '../../utils';
 import { space } from '../../utils/space';
 
 export const NavigationUI = styled.div`
@@ -111,7 +111,7 @@ export const GroupTitleUI = styled( Heading )`
 `;
 
 export const ItemBaseUI = styled.li`
-	border-radius: 2px;
+	border-radius: ${ CONFIG.radiusSmall };
 	color: inherit;
 	margin-bottom: 0;
 
@@ -172,7 +172,7 @@ export const ItemBadgeUI = styled.span`
 	margin-right: ${ () => ( isRTL() ? space( 2 ) : '0' ) };
 	display: inline-flex;
 	padding: ${ space( 1 ) } ${ space( 3 ) };
-	border-radius: 2px;
+	border-radius: ${ CONFIG.radiusSmall };
 
 	@keyframes fade-in {
 		from {
diff --git a/packages/components/src/navigator/README.md b/packages/components/src/navigator/README.md
new file mode 100644
index 0000000000000..b56a82e0524ee
--- /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/index.ts b/packages/components/src/navigator/index.ts
deleted file mode 100644
index 74c69a0daa9c3..0000000000000
--- a/packages/components/src/navigator/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { NavigatorProvider } from './navigator-provider';
-export { NavigatorScreen } from './navigator-screen';
-export { NavigatorButton } from './navigator-button';
-export { NavigatorBackButton } from './navigator-back-button';
-export { NavigatorToParentButton } from './navigator-to-parent-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 0000000000000..1d9ae95441e01
--- /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 0000000000000..1caa5380fc049
--- /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 01d4221be536e..0000000000000
--- a/packages/components/src/navigator/navigator-back-button/README.md
+++ /dev/null
@@ -1,15 +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.
-
-### Inherited props
-
-`NavigatorBackButton` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
diff --git a/packages/components/src/navigator/navigator-back-button/component.tsx b/packages/components/src/navigator/navigator-back-button/component.tsx
index 71c5ac14cd00d..b5c4de7df78a8 100644
--- a/packages/components/src/navigator/navigator-back-button/component.tsx
+++ b/packages/components/src/navigator/navigator-back-button/component.tsx
@@ -21,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 edf55be0f15f5..d6fcd39647bff 100644
--- a/packages/components/src/navigator/navigator-back-button/hook.ts
+++ b/packages/components/src/navigator/navigator-back-button/hook.ts
@@ -9,32 +9,28 @@ import { useCallback } from '@wordpress/element';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
 import Button from '../../button';
-import useNavigator from '../use-navigator';
-import type { NavigatorBackButtonHookProps } from '../types';
+import { useNavigator } from '../use-navigator';
+import type { NavigatorBackButtonProps } from '../types';
 
 export function useNavigatorBackButton(
-	props: WordPressComponentProps< NavigatorBackButtonHookProps, 'button' >
+	props: WordPressComponentProps< NavigatorBackButtonProps, 'button' >
 ) {
 	const {
 		onClick,
 		as = Button,
-		goToParent: goToParentProp = false,
+
 		...otherProps
-	} = useContextSystem( props, 'NavigatorBackButton' );
+	} = useContextSystem( props, 'Navigator.BackButton' );
 
-	const { goBack, goToParent } = useNavigator();
+	const { goBack } = useNavigator();
 	const handleClick: React.MouseEventHandler< HTMLButtonElement > =
 		useCallback(
 			( e ) => {
 				e.preventDefault();
-				if ( goToParentProp ) {
-					goToParent();
-				} else {
-					goBack();
-				}
+				goBack();
 				onClick?.( e );
 			},
-			[ goToParentProp, goToParent, goBack, onClick ]
+			[ goBack, onClick ]
 		);
 
 	return {
diff --git a/packages/components/src/navigator/navigator-back-button/index.ts b/packages/components/src/navigator/navigator-back-button/index.ts
deleted file mode 100644
index 9046e90350e27..0000000000000
--- 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 72154ec317da4..0000000000000
--- 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` and `target`.
diff --git a/packages/components/src/navigator/navigator-button/component.tsx b/packages/components/src/navigator/navigator-button/component.tsx
index 1b84a2315c04d..a6dc796337672 100644
--- a/packages/components/src/navigator/navigator-button/component.tsx
+++ b/packages/components/src/navigator/navigator-button/component.tsx
@@ -21,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 3952dc3fd56ba..59d2aaa65662d 100644
--- a/packages/components/src/navigator/navigator-button/hook.ts
+++ b/packages/components/src/navigator/navigator-button/hook.ts
@@ -10,7 +10,7 @@ import { escapeAttribute } from '@wordpress/escape-html';
 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 ) =>
@@ -25,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 74975a5e1b0c1..0000000000000
--- 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 8be27a6510184..0000000000000
--- a/packages/components/src/navigator/navigator-provider/README.md
+++ /dev/null
@@ -1,93 +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), [`NavigatorToParentButton`](/packages/components/src/navigator/navigator-to-parent-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,
-  __experimentalNavigatorToParentButton as NavigatorToParentButton,
-} from '@wordpress/components';
-
-const MyNavigation = () => (
-  <NavigatorProvider initialPath="/">
-    <NavigatorScreen path="/">
-      <p>This is the home screen.</p>
-       <NavigatorButton path="/child">
-         Navigate to child screen.
-      </NavigatorButton>
-    </NavigatorScreen>
-
-    <NavigatorScreen path="/child">
-      <p>This is the child screen.</p>
-      <NavigatorToParentButton>
-        Go back
-      </NavigatorToParentButton>
-    </NavigatorScreen>
-  </NavigatorProvider>
-);
-```
-**Important note**
-
-Parent/child navigation only works if the path you define are hierarchical, following a URL-like scheme where each path segment is separated by the `/` character.
-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.
-
-## 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.
-- `isBack`: `boolean`. An optional property used to specify whether the navigation should be considered as backwards (thus enabling focus restoration when possible, and causing the animation to be backwards too)
-
-### `goToParent`: `() => void;`
-
-The `goToParent` function allows navigating to the parent screen.
-
-Parent/child navigation only works if the path you define are hierarchical (see note above).
-
-When a match is not found, the function will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) are found.
-
-### `goBack`: `() => void`
-
-The `goBack` function allows navigating to the previous path.
-
-### `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.
-
-### `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/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
deleted file mode 100644
index 15eb4d6bd3b1d..0000000000000
--- a/packages/components/src/navigator/navigator-provider/component.tsx
+++ /dev/null
@@ -1,307 +0,0 @@
-/**
- * External dependencies
- */
-import type { ForwardedRef } from 'react';
-
-/**
- * WordPress dependencies
- */
-import { useMemo, useReducer } from '@wordpress/element';
-import isShallowEqual from '@wordpress/is-shallow-equal';
-
-/**
- * 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 {
-	NavigatorProviderProps,
-	NavigatorLocation,
-	NavigatorContext as NavigatorContextType,
-	NavigateOptions,
-	Screen,
-	NavigateToParentOptions,
-} from '../types';
-
-type MatchedPath = ReturnType< typeof patternMatch >;
-
-type RouterAction =
-	| { type: 'add' | 'remove'; screen: Screen }
-	| { type: 'goback' }
-	| { type: 'goto'; path: string; options?: NavigateOptions }
-	| { type: 'gotoparent'; options?: NavigateToParentOptions };
-
-type RouterState = {
-	screens: Screen[];
-	locationHistory: NavigatorLocation[];
-	matchedPath: MatchedPath;
-};
-
-const MAX_HISTORY_LENGTH = 50;
-
-function addScreen( { screens }: RouterState, screen: Screen ) {
-	return [ ...screens, screen ];
-}
-
-function removeScreen( { screens }: RouterState, screen: Screen ) {
-	return screens.filter( ( s ) => s.id !== screen.id );
-}
-
-function goBack( { locationHistory }: RouterState ) {
-	if ( locationHistory.length <= 1 ) {
-		return locationHistory;
-	}
-	return [
-		...locationHistory.slice( 0, -2 ),
-		{
-			...locationHistory[ locationHistory.length - 2 ],
-			isBack: true,
-			hasRestoredFocus: false,
-		},
-	];
-}
-
-function goTo(
-	state: RouterState,
-	path: string,
-	options: NavigateOptions = {}
-) {
-	const { locationHistory } = state;
-	const {
-		focusTargetSelector,
-		isBack = false,
-		skipFocus = false,
-		replace = false,
-		...restOptions
-	} = options;
-
-	const isNavigatingToSamePath =
-		locationHistory.length > 0 &&
-		locationHistory[ locationHistory.length - 1 ].path === path;
-	if ( isNavigatingToSamePath ) {
-		return locationHistory;
-	}
-
-	const isNavigatingToPreviousPath =
-		isBack &&
-		locationHistory.length > 1 &&
-		locationHistory[ locationHistory.length - 2 ].path === path;
-
-	if ( isNavigatingToPreviousPath ) {
-		return goBack( state );
-	}
-
-	const newLocation = {
-		...restOptions,
-		path,
-		isBack,
-		hasRestoredFocus: false,
-		skipFocus,
-	};
-
-	if ( locationHistory.length === 0 ) {
-		return replace ? [] : [ newLocation ];
-	}
-
-	const newLocationHistory = locationHistory.slice(
-		locationHistory.length > MAX_HISTORY_LENGTH - 1 ? 1 : 0,
-		-1
-	);
-
-	if ( ! replace ) {
-		newLocationHistory.push(
-			// Assign `focusTargetSelector` to the previous location in history
-			// (the one we just navigated from).
-			{
-				...locationHistory[ locationHistory.length - 1 ],
-				focusTargetSelector,
-			}
-		);
-	}
-
-	newLocationHistory.push( newLocation );
-
-	return newLocationHistory;
-}
-
-function goToParent(
-	state: RouterState,
-	options: NavigateToParentOptions = {}
-) {
-	const { locationHistory, screens } = state;
-	const currentPath = locationHistory[ locationHistory.length - 1 ].path;
-	if ( currentPath === undefined ) {
-		return locationHistory;
-	}
-	const parentPath = findParent( currentPath, screens );
-	if ( parentPath === undefined ) {
-		return locationHistory;
-	}
-	return goTo( state, parentPath, {
-		...options,
-		isBack: true,
-	} );
-}
-
-function routerReducer(
-	state: RouterState,
-	action: RouterAction
-): RouterState {
-	let { screens, locationHistory, matchedPath } = state;
-	switch ( action.type ) {
-		case 'add':
-			screens = addScreen( state, action.screen );
-			break;
-		case 'remove':
-			screens = removeScreen( state, action.screen );
-			break;
-		case 'goback':
-			locationHistory = goBack( state );
-			break;
-		case 'goto':
-			locationHistory = goTo( state, action.path, action.options );
-			break;
-		case 'gotoparent':
-			locationHistory = goToParent( state, action.options );
-			break;
-	}
-
-	// Return early in case there is no change
-	if (
-		screens === state.screens &&
-		locationHistory === state.locationHistory
-	) {
-		return state;
-	}
-
-	// Compute the matchedPath
-	const currentPath =
-		locationHistory.length > 0
-			? locationHistory[ locationHistory.length - 1 ].path
-			: undefined;
-	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 { screens, locationHistory, matchedPath };
-}
-
-function UnconnectedNavigatorProvider(
-	props: WordPressComponentProps< NavigatorProviderProps, 'div' >,
-	forwardedRef: ForwardedRef< any >
-) {
-	const { initialPath, children, className, ...otherProps } =
-		useContextSystem( props, 'NavigatorProvider' );
-
-	const [ routerState, dispatch ] = useReducer(
-		routerReducer,
-		initialPath,
-		( path ) => ( {
-			screens: [],
-			locationHistory: [ { path } ],
-			matchedPath: undefined,
-		} )
-	);
-
-	// The methods are constant forever, create stable references to them.
-	const methods = useMemo(
-		() => ( {
-			goBack: () => dispatch( { type: 'goback' } ),
-			goTo: ( path: string, options?: NavigateOptions ) =>
-				dispatch( { type: 'goto', path, options } ),
-			goToParent: ( options: NavigateToParentOptions | undefined ) =>
-				dispatch( { type: 'gotoparent', options } ),
-			addScreen: ( screen: Screen ) =>
-				dispatch( { type: 'add', screen } ),
-			removeScreen: ( screen: Screen ) =>
-				dispatch( { type: 'remove', screen } ),
-		} ),
-		[]
-	);
-
-	const { locationHistory, matchedPath } = routerState;
-
-	const navigatorContextValue: NavigatorContextType = useMemo(
-		() => ( {
-			location: {
-				...locationHistory[ locationHistory.length - 1 ],
-				isInitial: locationHistory.length === 1,
-			},
-			params: matchedPath?.params ?? {},
-			match: matchedPath?.id,
-			...methods,
-		} ),
-		[ locationHistory, matchedPath, methods ]
-	);
-
-	const cx = useCx();
-	const classes = useMemo(
-		() => cx( styles.navigatorProviderWrapper, 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).
- *
- * ```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 b9a330613ac84..0000000000000
--- 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 5ba5af44fe8c1..0000000000000
--- 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 be5c4bfaf41ec..fe0d81b90a17b 100644
--- a/packages/components/src/navigator/navigator-screen/component.tsx
+++ b/packages/components/src/navigator/navigator-screen/component.tsx
@@ -15,8 +15,8 @@ import {
 	useId,
 } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
-import { isRTL as isRTLFn } from '@wordpress/i18n';
 import { escapeAttribute } from '@wordpress/escape-html';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
@@ -28,22 +28,37 @@ import { View } from '../../view';
 import { NavigatorContext } from '../context';
 import * as styles from '../styles';
 import type { NavigatorScreenProps } from '../types';
+import { useScreenAnimatePresence } from './use-screen-animate-presence';
 
 function UnconnectedNavigatorScreen(
 	props: WordPressComponentProps< NavigatorScreenProps, 'div', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
+	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 screenId = useId();
-	const { children, className, path, ...otherProps } = useContextSystem(
-		props,
-		'NavigatorScreen'
-	);
+
+	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;
 
+	// Register / unregister screen with the navigator context.
 	useEffect( () => {
 		const screen = {
 			id: screenId,
@@ -53,31 +68,28 @@ function UnconnectedNavigatorScreen(
 		return () => removeScreen( screen );
 	}, [ screenId, path, addScreen, removeScreen ] );
 
-	const isRTL = isRTLFn();
-	const { isInitial, isBack } = location;
+	// Animation.
+	const { animationStyles, shouldRenderScreen, screenProps } =
+		useScreenAnimatePresence( {
+			isMatch,
+			isBack,
+			onAnimationEnd: onAnimationEndProp,
+			skipAnimation: skipAnimationAndFocusRestoration,
+		} );
+
 	const cx = useCx();
 	const classes = useMemo(
-		() =>
-			cx(
-				styles.navigatorScreen( {
-					isInitial,
-					isBack,
-					isRTL,
-				} ),
-				className
-			),
-		[ className, cx, isInitial, isBack, isRTL ]
+		() => 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
@@ -85,20 +97,20 @@ function UnconnectedNavigatorScreen(
 		// - 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 ||
+			! wrapperEl ||
 			locationRef.current.hasRestoredFocus ||
-			location.skipFocus
+			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;
 		}
 
@@ -106,75 +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 && location.focusTargetSelector ) {
-			elementToFocus = wrapperRef.current.querySelector(
-				location.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 );
-			elementToFocus = firstTabbable ?? wrapperRef.current;
+			const [ firstTabbable ] = focus.tabbable.find( wrapperEl );
+			elementToFocus = firstTabbable ?? wrapperEl;
 		}
 
 		locationRef.current.hasRestoredFocus = true;
 		elementToFocus.focus();
 	}, [
-		isInitialLocation,
+		skipAnimationAndFocusRestoration,
 		isMatch,
-		location.isBack,
-		location.focusTargetSelector,
-		location.skipFocus,
+		isBack,
+		focusTargetSelector,
+		skipFocus,
 	] );
 
 	const mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );
 
-	return isMatch ? (
-		<View ref={ mergedWrapperRef } className={ classes } { ...otherProps }>
+	return shouldRenderScreen ? (
+		<View
+			ref={ mergedWrapperRef }
+			className={ classes }
+			{ ...screenProps }
+			{ ...otherProps }
+		>
 			{ children }
 		</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 9c9a40d435fff..0000000000000
--- 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 0000000000000..af5a47ee12df4
--- /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/README.md b/packages/components/src/navigator/navigator-to-parent-button/README.md
deleted file mode 100644
index 62dacc3dfa4ea..0000000000000
--- a/packages/components/src/navigator/navigator-to-parent-button/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# `NavigatorToParentButton`
-
-<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 `NavigatorToParentButton` component can be used to navigate to a screen and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorScreen`](/packages/components/src/navigator/navigator-screen/README.md) and the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) components (or the `useNavigator` hook).
-
-## Usage
-
-Refer to [the `NavigatorProvider` component](/packages/components/src/navigator/navigator-provider/README.md#usage) for a usage example.
-
-### Inherited props
-
-`NavigatorToParentButton` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
diff --git a/packages/components/src/navigator/navigator-to-parent-button/component.tsx b/packages/components/src/navigator/navigator-to-parent-button/component.tsx
index e73a3619f3d49..f1c2d27e2284a 100644
--- a/packages/components/src/navigator/navigator-to-parent-button/component.tsx
+++ b/packages/components/src/navigator/navigator-to-parent-button/component.tsx
@@ -1,66 +1,32 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import type { ForwardedRef } from 'react';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
+import { NavigatorBackButton } from '../navigator-back-button/component';
 import type { WordPressComponentProps } from '../../context';
 import { contextConnect } from '../../context';
-import { View } from '../../view';
-import { useNavigatorBackButton } from '../navigator-back-button/hook';
-import type { NavigatorToParentButtonProps } from '../types';
+import type { NavigatorBackButtonProps } from '../types';
 
 function UnconnectedNavigatorToParentButton(
-	props: WordPressComponentProps< NavigatorToParentButtonProps, 'button' >,
-	forwardedRef: ForwardedRef< any >
+	props: WordPressComponentProps< NavigatorBackButtonProps, 'button' >,
+	forwardedRef: React.ForwardedRef< any >
 ) {
-	const navigatorToParentButtonProps = useNavigatorBackButton( {
-		...props,
-		goToParent: true,
+	deprecated( 'wp.components.NavigatorToParentButton', {
+		since: '6.7',
+		alternative: 'wp.components.Navigator.BackButton',
 	} );
 
-	return <View ref={ forwardedRef } { ...navigatorToParentButtonProps } />;
+	return <NavigatorBackButton ref={ forwardedRef } { ...props } />;
 }
 
-/*
- * The `NavigatorToParentButton` component can be used to navigate to a screen and
- * should be used in combination with the `NavigatorProvider`, the
- * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`
- * hook).
- *
- * @example
- * ```jsx
- * import {
- *   __experimentalNavigatorProvider as NavigatorProvider,
- *   __experimentalNavigatorScreen as NavigatorScreen,
- *   __experimentalNavigatorButton as NavigatorButton,
- *   __experimentalNavigatorToParentButton as NavigatorToParentButton,
- * } from '@wordpress/components';
- *
- * const MyNavigation = () => (
- *   <NavigatorProvider initialPath="/">
- *     <NavigatorScreen path="/">
- *       <p>This is the home screen.</p>
- *        <NavigatorButton path="/child">
- *          Navigate to child screen.
- *       </NavigatorButton>
- *     </NavigatorScreen>
- *
- *     <NavigatorScreen path="/child">
- *       <p>This is the child screen.</p>
- *       <NavigatorToParentButton>
- *         Go to parent
- *       </NavigatorToParentButton>
- *     </NavigatorScreen>
- *   </NavigatorProvider>
- * );
- * ```
+/**
+ * @deprecated
  */
 export const NavigatorToParentButton = contextConnect(
 	UnconnectedNavigatorToParentButton,
-	'NavigatorToParentButton'
+	'Navigator.ToParentButton'
 );
-
-export default NavigatorToParentButton;
diff --git a/packages/components/src/navigator/navigator-to-parent-button/index.ts b/packages/components/src/navigator/navigator-to-parent-button/index.ts
deleted file mode 100644
index f5218e456065e..0000000000000
--- a/packages/components/src/navigator/navigator-to-parent-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as NavigatorToParentButton } from './component';
diff --git a/packages/components/src/navigator/navigator/component.tsx b/packages/components/src/navigator/navigator/component.tsx
new file mode 100644
index 0000000000000..bd49b3682fb14
--- /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
index 218580a4cc3ba..e9e342bb0d2ee 100644
--- a/packages/components/src/navigator/stories/index.story.tsx
+++ b/packages/components/src/navigator/stories/index.story.tsx
@@ -7,23 +7,21 @@ import type { Meta, StoryObj } from '@storybook/react';
  * Internal dependencies
  */
 import Button from '../../button';
-import { Card, CardBody, CardFooter, CardHeader } from '../../card';
 import { VStack } from '../../v-stack';
-import Dropdown from '../../dropdown';
-import {
-	NavigatorProvider,
-	NavigatorScreen,
-	NavigatorButton,
-	NavigatorBackButton,
-	NavigatorToParentButton,
-	useNavigator,
-} from '..';
-
-const meta: Meta< typeof NavigatorProvider > = {
-	component: NavigatorProvider,
-	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-	subcomponents: { NavigatorScreen, NavigatorButton, NavigatorBackButton },
-	title: 'Components (Experimental)/Navigator',
+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/Navigator',
 	argTypes: {
 		as: { control: { type: null } },
 		children: { control: { type: null } },
@@ -33,268 +31,106 @@ const meta: Meta< typeof NavigatorProvider > = {
 		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 NavigatorProvider > = {
+export const Default: StoryObj< typeof Navigator > = {
 	args: {
 		initialPath: '/',
-		style: { height: '100vh', maxHeight: '450px' },
 		children: (
 			<>
-				<NavigatorScreen path="/">
-					<Card>
-						<CardBody>
-							<p>This is the home screen.</p>
-
-							<VStack alignment="left">
-								<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>
-
-								<NavigatorButton
-									variant="secondary"
-									path="/product/1"
-								>
-									Navigate to product screen with id 1.
-								</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>
-									) }
-								/>
-							</VStack>
-						</CardBody>
-					</Card>
-				</NavigatorScreen>
+				<Navigator.Screen path="/">
+					<h2>This is the home screen.</h2>
 
-				<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',
-							} ) }
+					<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"
 						>
-							<Button variant="primary">Primary noop</Button>
-						</CardFooter>
-					</Card>
-				</NavigatorScreen>
-
-				<NavigatorScreen path="/product/:id">
-					<ProductDetails />
-				</NavigatorScreen>
+							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 getStickyStyles( {
-	bottom = 0,
-	bgColor = 'whitesmoke',
-	top = 0,
-	zIndex = 1,
-} ): React.CSSProperties {
-	return {
-		display: 'flex',
-		position: 'sticky',
-		top,
-		bottom,
-		zIndex,
-		backgroundColor: bgColor,
-	};
-}
+function DynamicScreen() {
+	const { params } = useNavigator();
 
-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>
-			) ) }
+			<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>
 		</>
 	);
 }
 
-function ProductDetails() {
-	const { params } = useNavigator();
-
-	return (
-		<Card>
-			<CardBody>
-				<NavigatorBackButton variant="secondary">
-					Go back
-				</NavigatorBackButton>
-				<p>This is the screen for the product with id: { params.id }</p>
-			</CardBody>
-		</Card>
-	);
-}
-
-export const NestedNavigator: StoryObj< typeof NavigatorProvider > = {
+export const WithNestedInitialPath: StoryObj< typeof Navigator > = {
 	...Default,
 	args: {
 		...Default.args,
-		initialPath: '/child2/grandchild',
-		children: (
-			<>
-				<NavigatorScreen path="/">
-					<Card>
-						<CardBody>
-							<NavigatorButton variant="secondary" path="/child1">
-								Go to first child.
-							</NavigatorButton>
-							<NavigatorButton variant="secondary" path="/child2">
-								Go to second child.
-							</NavigatorButton>
-						</CardBody>
-					</Card>
-				</NavigatorScreen>
-				<NavigatorScreen path="/child1">
-					<Card>
-						<CardBody>
-							This is the first child
-							<NavigatorToParentButton variant="secondary">
-								Go back to parent
-							</NavigatorToParentButton>
-						</CardBody>
-					</Card>
-				</NavigatorScreen>
-				<NavigatorScreen path="/child2">
-					<Card>
-						<CardBody>
-							This is the second child
-							<NavigatorToParentButton variant="secondary">
-								Go back to parent
-							</NavigatorToParentButton>
-							<NavigatorButton
-								variant="secondary"
-								path="/child2/grandchild"
-							>
-								Go to grand child.
-							</NavigatorButton>
-						</CardBody>
-					</Card>
-				</NavigatorScreen>
-				<NavigatorScreen path="/child2/grandchild">
-					<Card>
-						<CardBody>
-							This is the grand child
-							<NavigatorToParentButton variant="secondary">
-								Go back to parent
-							</NavigatorToParentButton>
-						</CardBody>
-					</Card>
-				</NavigatorScreen>
-			</>
-		),
+		initialPath: '/child/grandchild',
 	},
 };
 
@@ -302,12 +138,16 @@ const NavigatorButtonWithSkipFocus = ( {
 	path,
 	onClick,
 	...props
-}: React.ComponentProps< typeof NavigatorButton > ) => {
+}: 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 );
@@ -316,46 +156,36 @@ const NavigatorButtonWithSkipFocus = ( {
 	);
 };
 
-export const SkipFocus: StoryObj< typeof NavigatorProvider > = {
+export const SkipFocus: StoryObj< typeof Navigator > = {
 	args: {
 		initialPath: '/',
 		children: (
 			<>
 				<div
 					style={ {
-						height: 250,
-						border: '1px solid black',
+						height: 150,
+						outline: '1px solid black',
+						outlineOffset: '-1px',
+						marginBlockEnd: '1rem',
+						display: 'contents',
 					} }
 				>
-					<NavigatorScreen
-						path="/"
-						style={ {
-							height: '100%',
-						} }
-					>
-						<h1>Home screen</h1>
-						<NavigatorButton variant="secondary" path="/child">
+					<Navigator.Screen path="/">
+						<h2>Home screen</h2>
+						<Navigator.Button variant="primary" path="/child">
 							Go to child screen.
-						</NavigatorButton>
-					</NavigatorScreen>
-					<NavigatorScreen
-						path="/child"
-						style={ {
-							height: '100%',
-						} }
-					>
+						</Navigator.Button>
+					</Navigator.Screen>
+
+					<Navigator.Screen path="/child">
 						<h2>Child screen</h2>
-						<NavigatorToParentButton variant="secondary">
-							Go to parent screen.
-						</NavigatorToParentButton>
-					</NavigatorScreen>
+						<Navigator.BackButton variant="secondary">
+							Go back to home screen
+						</Navigator.BackButton>
+					</Navigator.Screen>
 				</div>
 
-				<NavigatorButtonWithSkipFocus
-					variant="secondary"
-					path="/child"
-					style={ { margin: '1rem 2rem' } }
-				>
+				<NavigatorButtonWithSkipFocus path="/child">
 					Go to child screen, but keep focus on this button
 				</NavigatorButtonWithSkipFocus>
 			</>
diff --git a/packages/components/src/navigator/styles.ts b/packages/components/src/navigator/styles.ts
index 0203edbdf1816..167d4ac07de3d 100644
--- a/packages/components/src/navigator/styles.ts
+++ b/packages/components/src/navigator/styles.ts
@@ -3,69 +3,140 @@
  */
 import { css, keyframes } from '@emotion/react';
 
-export const navigatorProviderWrapper = css`
+export const navigatorWrapper = css`
+	position: relative;
 	/* Prevents horizontal overflow while animating screen transitions */
-	overflow-x: hidden;
-	/* Mark this subsection 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.
+	overflow-x: clip;
+	/*
+	 * Mark this DOM subtree as isolated when it comes to layout calculations,
+	 * providing performance benefits.
 	 */
-	contain: content;
+	contain: layout;
+
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: 1fr;
+	align-items: start;
 `;
 
-const fadeInFromRight = keyframes( {
-	'0%': {
+const fadeIn = keyframes( {
+	from: {
 		opacity: 0,
-		transform: `translateX( 50px )`,
 	},
-	'100%': { opacity: 1, transform: 'none' },
 } );
 
-const fadeInFromLeft = keyframes( {
-	'0%': {
+const fadeOut = keyframes( {
+	to: {
 		opacity: 0,
-		transform: `translateX( -50px )`,
 	},
-	'100%': { opacity: 1, transform: 'none' },
 } );
 
-type NavigatorScreenAnimationProps = {
-	isInitial?: boolean;
-	isBack?: boolean;
-	isRTL: boolean;
+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 ),
 };
 
-const navigatorScreenAnimation = ( {
-	isInitial,
-	isBack,
-	isRTL,
-}: NavigatorScreenAnimationProps ) => {
-	if ( isInitial && ! isBack ) {
-		return;
-	}
+export const ANIMATION_END_NAMES = {
+	end: {
+		in: slideFromRight.name,
+		out: slideToLeft.name,
+	},
+	start: {
+		in: slideFromLeft.name,
+		out: slideToRight.name,
+	},
+};
 
-	const animationName =
-		( isRTL && isBack ) || ( ! isRTL && ! isBack )
-			? fadeInFromRight
-			: fadeInFromLeft;
+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;
 
-	return css`
-		animation-duration: 0.14s;
-		animation-timing-function: ease-in-out;
-		will-change: transform, opacity;
-		animation-name: ${ animationName };
+	&[data-animation-type='out'] {
+		z-index: 0;
+	}
 
-		@media ( prefers-reduced-motion ) {
-			animation-duration: 0s;
+	@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 = ( props: NavigatorScreenAnimationProps ) => css`
+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;
 
-	${ navigatorScreenAnimation( props ) }
+	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 b83bd70d9d744..cab6e9a4cdadf 100644
--- a/packages/components/src/navigator/test/index.tsx
+++ b/packages/components/src/navigator/test/index.tsx
@@ -14,19 +14,13 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import Button from '../../button';
-import {
-	NavigatorProvider,
-	NavigatorScreen,
-	NavigatorButton,
-	NavigatorBackButton,
-	NavigatorToParentButton,
-	useNavigator,
-} from '..';
+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 = {
@@ -76,11 +70,11 @@ 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 } );
@@ -95,7 +89,7 @@ function CustomNavigatorGoToBackButton( {
 	path,
 	onClick,
 	...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorButton >, 'onClick' > & {
+}: Omit< ComponentPropsWithoutRef< typeof Navigator.Button >, 'onClick' > & {
 	onClick?: CustomTestOnClickHandler;
 } ) {
 	const { goTo } = useNavigator();
@@ -115,7 +109,7 @@ function CustomNavigatorGoToSkipFocusButton( {
 	path,
 	onClick,
 	...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorButton >, 'onClick' > & {
+}: Omit< ComponentPropsWithoutRef< typeof Navigator.Button >, 'onClick' > & {
 	onClick?: CustomTestOnClickHandler;
 } ) {
 	const { goTo } = useNavigator();
@@ -134,11 +128,14 @@ function CustomNavigatorGoToSkipFocusButton( {
 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' } );
@@ -151,7 +148,10 @@ function CustomNavigatorBackButton( {
 function CustomNavigatorToParentButton( {
 	onClick,
 	...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorBackButton >, 'onClick' > & {
+}: Omit<
+	ComponentPropsWithoutRef< typeof Navigator.BackButton >,
+	'onClick'
+> & {
 	onClick?: CustomTestOnClickHandler;
 } ) {
 	return (
@@ -165,6 +165,27 @@ function CustomNavigatorToParentButton( {
 	);
 }
 
+function CustomNavigatorToParentButtonAlternative( {
+	onClick,
+	children,
+}: {
+	children: React.ReactNode;
+	onClick?: CustomTestOnClickHandler;
+} ) {
+	const { goToParent } = useNavigator();
+	return (
+		<button
+			onClick={ () => {
+				goToParent();
+				// Used to spy on the values passed to `navigator.goBack`.
+				onClick?.( { type: 'goToParent' } );
+			} }
+		>
+			{ children }
+		</button>
+	);
+}
+
 const ProductScreen = ( {
 	onBackButtonClick,
 }: {
@@ -173,13 +194,13 @@ const ProductScreen = ( {
 	const { params } = useNavigator();
 
 	return (
-		<NavigatorScreen path={ PATHS.PRODUCT_PATTERN }>
+		<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>
-		</NavigatorScreen>
+		</Navigator.Screen>
 	);
 };
 
@@ -194,8 +215,8 @@ 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
@@ -233,9 +254,9 @@ const MyNavigation = ( {
 					>
 						{ BUTTON_TEXT.toInvalidHtmlPathScreen }
 					</CustomNavigatorButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				<NavigatorScreen path={ PATHS.CHILD }>
+				<Navigator.Screen path={ PATHS.CHILD }>
 					<p>{ SCREEN_TEXT.child }</p>
 					{ /*
 					 * A button useful to test focus restoration. This button is the first
@@ -265,30 +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>
 
 				<ProductScreen onBackButtonClick={ onNavigatorButtonClick } />
 
-				<NavigatorScreen path={ PATHS.INVALID_HTML_ATTRIBUTE }>
+				<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
@@ -313,8 +334,8 @@ const MyHierarchicalNavigation = ( {
 } ) => {
 	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
@@ -328,9 +349,9 @@ const MyHierarchicalNavigation = ( {
 					>
 						{ BUTTON_TEXT.toChildScreen }
 					</CustomNavigatorButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				<NavigatorScreen path={ PATHS.CHILD }>
+				<Navigator.Screen path={ PATHS.CHILD }>
 					<p>{ SCREEN_TEXT.child }</p>
 					{ /*
 					 * A button useful to test focus restoration. This button is the first
@@ -344,34 +365,94 @@ const MyHierarchicalNavigation = ( {
 					>
 						{ BUTTON_TEXT.toNestedScreen }
 					</CustomNavigatorButton>
-					<CustomNavigatorToParentButton
+					<CustomNavigatorBackButton
 						onClick={ onNavigatorButtonClick }
 					>
 						{ BUTTON_TEXT.back }
-					</CustomNavigatorToParentButton>
-				</NavigatorScreen>
+					</CustomNavigatorBackButton>
+				</Navigator.Screen>
 
-				<NavigatorScreen path={ PATHS.NESTED }>
+				<Navigator.Screen path={ PATHS.NESTED }>
 					<p>{ SCREEN_TEXT.nested }</p>
-					<CustomNavigatorToParentButton
+					<CustomNavigatorBackButton
 						onClick={ onNavigatorButtonClick }
 					>
 						{ BUTTON_TEXT.back }
-					</CustomNavigatorToParentButton>
+					</CustomNavigatorBackButton>
 					<CustomNavigatorGoToBackButton
 						path={ PATHS.CHILD }
 						onClick={ onNavigatorButtonClick }
 					>
 						{ BUTTON_TEXT.backUsingGoTo }
 					</CustomNavigatorGoToBackButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 				<CustomNavigatorGoToSkipFocusButton
 					path={ PATHS.NESTED }
 					onClick={ onNavigatorButtonClick }
 				>
 					{ BUTTON_TEXT.goToWithSkipFocus }
 				</CustomNavigatorGoToSkipFocusButton>
-			</NavigatorProvider>
+			</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>
 		</>
 	);
 };
@@ -561,6 +642,14 @@ describe( 'Navigator', () => {
 		).toHaveAttribute( 'id', INVALID_HTML_ATTRIBUTE.escaped );
 	} );
 
+	it( 'should warn if the `path` prop does not follow the required format', () => {
+		render( <Navigator.Screen path="not-valid">Test</Navigator.Screen> );
+
+		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();
 
@@ -769,4 +858,53 @@ describe( 'Navigator', () => {
 			).toHaveFocus();
 		} );
 	} );
+
+	describe( 'deprecated APIs', () => {
+		it( 'should log a deprecation notice when using the NavigatorToParentButton component', async () => {
+			const user = userEvent.setup();
+
+			render( <MyDeprecatedNavigation initialPath={ PATHS.CHILD } /> );
+
+			expect( getScreen( 'child' ) ).toBeInTheDocument();
+
+			// Navigate back to home screen.
+			// The first tabbable element receives focus, since focus restoration
+			// it not possible (there was no forward navigation).
+			await user.click( getNavigationButton( 'back' ) );
+			expect( getScreen( 'home' ) ).toBeInTheDocument();
+			expect(
+				screen.getByRole( 'button', {
+					name: 'First tabbable home screen button',
+				} )
+			).toHaveFocus();
+
+			// Rendering `NavigatorToParentButton` logs a deprecation notice
+			expect( console ).toHaveWarnedWith(
+				'wp.components.NavigatorToParentButton is deprecated since version 6.7. Please use wp.components.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/types.ts b/packages/components/src/navigator/types.ts
index 557f8074fd42e..aeb5fd3b12c7f 100644
--- a/packages/components/src/navigator/types.ts
+++ b/packages/components/src/navigator/types.ts
@@ -11,26 +11,72 @@ 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;
+	/**
+	 * The path associated to the location.
+	 */
 	path?: string;
+	/**
+	 * Whether focus was already restored for this location (in case of
+	 * backwards navigation).
+	 */
 	hasRestoredFocus?: boolean;
 };
 
 // Returned by the `useNavigator` hook.
 export type Navigator = {
+	/**
+	 * The current location.
+	 */
 	location: NavigatorLocation;
+	/**
+	 * Params associated with the current location
+	 */
 	params: MatchParams;
+	/**
+	 * Navigate to a new location.
+	 */
 	goTo: ( path: string, options?: NavigateOptions ) => void;
-	goBack: () => void;
+	/**
+	 * Go back to the parent location (ie. "/some/path" will navigate back
+	 * to "/some")
+	 */
+	goBack: ( options?: NavigateToParentOptions ) => void;
+	/**
+	 * _Note: This function is deprecated. Please use `goBack` instead._
+	 * @deprecated
+	 * @ignore
+	 */
 	goToParent: ( options?: NavigateToParentOptions ) => void;
 };
 
@@ -40,7 +86,7 @@ export type NavigatorContext = Navigator & {
 	match?: string;
 };
 
-export type NavigatorProviderProps = {
+export type NavigatorProps = {
 	/**
 	 * The initial active path.
 	 */
@@ -54,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;
 	/**
@@ -64,15 +128,6 @@ export type NavigatorScreenProps = {
 
 export type NavigatorBackButtonProps = ButtonAsButtonProps;
 
-export type NavigatorBackButtonHookProps = NavigatorBackButtonProps & {
-	/**
-	 * Whether we should navigate to the parent screen.
-	 *
-	 * @default 'false'
-	 */
-	goToParent?: boolean;
-};
-
 export type NavigatorToParentButtonProps = NavigatorBackButtonProps;
 
 export type NavigatorButtonProps = NavigatorBackButtonProps & {
diff --git a/packages/components/src/navigator/use-navigator.ts b/packages/components/src/navigator/use-navigator.ts
index 4d917649374d5..1ea99f3f1c857 100644
--- a/packages/components/src/navigator/use-navigator.ts
+++ b/packages/components/src/navigator/use-navigator.ts
@@ -10,9 +10,12 @@ 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 {
+export function useNavigator(): Navigator {
 	const { location, params, goTo, goBack, goToParent } =
 		useContext( NavigatorContext );
 
@@ -24,5 +27,3 @@ function useNavigator(): Navigator {
 		params,
 	};
 }
-
-export default useNavigator;
diff --git a/packages/components/src/number-control/README.md b/packages/components/src/number-control/README.md
index 3a54351cd2925..8421691296e90 100644
--- a/packages/components/src/number-control/README.md
+++ b/packages/components/src/number-control/README.md
@@ -139,3 +139,11 @@ Amount by which the `value` is changed when incrementing/decrementing. It is als
 -   Type: `Number | "any"`
 -   Required: No
 -   Default: `1`
+
+### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
\ No newline at end of file
diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx
index 05866e0ee0564..8bfcb7240b9ea 100644
--- a/packages/components/src/palette-edit/index.tsx
+++ b/packages/components/src/palette-edit/index.tsx
@@ -49,7 +49,6 @@ import { kebabCase } from '../utils/strings';
 import type {
 	Color,
 	ColorPickerPopoverProps,
-	Gradient,
 	NameInputProps,
 	OptionProps,
 	PaletteEditListViewProps,
@@ -70,6 +69,28 @@ function NameInput( { value, onChange, label }: NameInputProps ) {
 	);
 }
 
+/*
+ * 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.
@@ -109,7 +130,7 @@ export function getNameAndSlugForPosition(
 	};
 }
 
-function ColorPickerPopover< T extends Color | Gradient >( {
+function ColorPickerPopover< T extends PaletteElement >( {
 	isGradient,
 	element,
 	onChange,
@@ -167,7 +188,7 @@ function ColorPickerPopover< T extends Color | Gradient >( {
 	);
 }
 
-function Option< T extends Color | Gradient >( {
+function Option< T extends PaletteElement >( {
 	canOnlyChangeValues,
 	element,
 	onChange,
@@ -265,7 +286,7 @@ function Option< T extends Color | Gradient >( {
 	);
 }
 
-function PaletteEditListView< T extends Color | Gradient >( {
+function PaletteEditListView< T extends PaletteElement >( {
 	elements,
 	onChange,
 	canOnlyChangeValues,
@@ -275,12 +296,16 @@ function PaletteEditListView< T extends Color | Gradient >( {
 	addColorRef,
 }: PaletteEditListViewProps< T > ) {
 	// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
-	const elementsReference = useRef< typeof elements >();
+	const elementsReferenceRef = useRef< typeof elements >();
 	useEffect( () => {
-		elementsReference.current = elements;
+		elementsReferenceRef.current = elements;
 	}, [ elements ] );
 
-	const debounceOnChange = useDebounce( onChange, 100 );
+	const debounceOnChange = useDebounce(
+		( updatedElements: T[] ) =>
+			onChange( deduplicateElementSlugs( updatedElements ) ),
+		100
+	);
 
 	return (
 		<VStack spacing={ 3 }>
diff --git a/packages/components/src/palette-edit/styles.ts b/packages/components/src/palette-edit/styles.ts
index aa4ed720b93bf..ad918d8590cf2 100644
--- a/packages/components/src/palette-edit/styles.ts
+++ b/packages/components/src/palette-edit/styles.ts
@@ -31,7 +31,7 @@ export const IndicatorStyled = styled( ColorIndicator )`
 export const NameInputControl = styled( InputControl )`
 	${ InputControlContainer } {
 		background: ${ COLORS.gray[ 100 ] };
-		border-radius: ${ CONFIG.controlBorderRadius };
+		border-radius: ${ CONFIG.radiusXSmall };
 		${ Input }${ Input }${ Input }${ Input } {
 			height: ${ space( 8 ) };
 		}
@@ -85,8 +85,8 @@ export const PaletteItem = styled( View )`
 		outline-offset: 0;
 	}
 
-	border-top-left-radius: ${ CONFIG.controlBorderRadius };
-	border-top-right-radius: ${ CONFIG.controlBorderRadius };
+	border-top-left-radius: ${ CONFIG.radiusSmall };
+	border-top-right-radius: ${ CONFIG.radiusSmall };
 
 	& + & {
 		border-top-left-radius: 0;
@@ -94,8 +94,8 @@ export const PaletteItem = styled( View )`
 	}
 
 	&:last-child {
-		border-bottom-left-radius: ${ CONFIG.controlBorderRadius };
-		border-bottom-right-radius: ${ CONFIG.controlBorderRadius };
+		border-bottom-left-radius: ${ CONFIG.radiusSmall };
+		border-bottom-right-radius: ${ CONFIG.radiusSmall };
 		border-bottom-color: ${ CONFIG.surfaceBorderColor };
 	}
 
diff --git a/packages/components/src/palette-edit/test/index.tsx b/packages/components/src/palette-edit/test/index.tsx
index 980630633b97f..7dc00dbba2204 100644
--- a/packages/components/src/palette-edit/test/index.tsx
+++ b/packages/components/src/palette-edit/test/index.tsx
@@ -7,7 +7,10 @@ import { click, type, press } from '@ariakit/test';
 /**
  * Internal dependencies
  */
-import PaletteEdit, { getNameAndSlugForPosition } from '..';
+import PaletteEdit, {
+	getNameAndSlugForPosition,
+	deduplicateElementSlugs,
+} from '..';
 import type { PaletteElement } from '../types';
 
 const noop = () => {};
@@ -97,6 +100,52 @@ describe( 'getNameAndSlugForPosition', () => {
 	} );
 } );
 
+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',
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index 0e9bfa0f86a0c..a38d7d3e3ace8 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -19,7 +19,7 @@
 
 
 	// Block UI appearance.
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;	// Match the block toolbar material radius.
 	background-color: $white;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
@@ -144,6 +144,9 @@
 	display: flex;
 	box-shadow: none;
 
+	// In the unselected state, radius should match Global Styles > Image > Radius.
+	border-radius: 0;
+
 	// Blur the background so layered dashed placeholders are still visually separate.
 	// Make the background transparent to not interfere with the background overlay in placeholder-style() pseudo element
 	backdrop-filter: blur(100px);
@@ -183,8 +186,17 @@
 		}
 	}
 
-	// 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 & {
diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
index 68d331ce8266b..3005f13c952ec 100644
--- a/packages/components/src/popover/index.tsx
+++ b/packages/components/src/popover/index.tsx
@@ -113,8 +113,9 @@ const UnforwardedPopover = (
 		WordPressComponentProps< PopoverProps, 'div', false >,
 		// To avoid overlaps between the standard HTML attributes and the props
 		// expected by `framer-motion`, omit all framer motion props from popover
-		// props (except for `animate` and `children`, which are re-defined in `PopoverProps`).
-		keyof Omit< MotionProps, 'animate' | 'children' >
+		// props (except for `animate` and `children` which are re-defined in
+		// `PopoverProps`, and `style` which is merged safely).
+		keyof Omit< MotionProps, 'animate' | 'children' | 'style' >
 	>,
 	forwardedRef: ForwardedRef< any >
 ) => {
@@ -139,6 +140,7 @@ const UnforwardedPopover = (
 		shift = false,
 		inline = false,
 		variant,
+		style: contentStyle,
 
 		// Deprecated props
 		__unstableForcePosition,
@@ -370,6 +372,7 @@ const UnforwardedPopover = (
 	const animationProps: HTMLMotionProps< 'div' > = shouldAnimate
 		? {
 				style: {
+					...contentStyle,
 					...motionInlineStyles,
 					...style,
 				},
@@ -378,7 +381,10 @@ const UnforwardedPopover = (
 		  }
 		: {
 				animate: false,
-				style,
+				style: {
+					...contentStyle,
+					...style,
+				},
 		  };
 
 	// When Floating UI has finished positioning and Framer Motion has finished animating
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
index c7ff0510986bf..601e9ebb7675f 100644
--- a/packages/components/src/popover/style.scss
+++ b/packages/components/src/popover/style.scss
@@ -22,14 +22,15 @@ $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
 
 .components-popover__content {
 	background: $white;
-	box-shadow: $shadow-popover-border-default, $shadow-popover;
-	border-radius: $radius-block-ui;
+	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 & {
 		box-shadow: $shadow-popover-border-default-alternate;
+		border-radius: $radius-small;
 	}
 
 	// A style that gives the popover no visible ui.
diff --git a/packages/components/src/popover/test/index.tsx b/packages/components/src/popover/test/index.tsx
index f5ee7e96e4c54..eac0f942df2f6 100644
--- a/packages/components/src/popover/test/index.tsx
+++ b/packages/components/src/popover/test/index.tsx
@@ -179,6 +179,40 @@ describe( 'Popover', () => {
 			} );
 		} );
 
+		describe( 'style', () => {
+			it( 'outputs inline styles added through the style prop in addition to built-in popover positioning styles', async () => {
+				render(
+					<Popover
+						style={ { zIndex: 0 } }
+						data-testid="popover-element"
+					>
+						Hello
+					</Popover>
+				);
+				const popover = screen.getByTestId( 'popover-element' );
+
+				await waitFor( () => expect( popover ).toBeVisible() );
+				expect( popover ).toHaveStyle(
+					'position: absolute; top: 0px; left: 0px; z-index: 0;'
+				);
+			} );
+
+			it( 'is not possible to override built-in popover positioning styles via the style prop', async () => {
+				render(
+					<Popover
+						style={ { position: 'static' } }
+						data-testid="popover-element"
+					>
+						Hello
+					</Popover>
+				);
+				const popover = screen.getByTestId( 'popover-element' );
+
+				await waitFor( () => expect( popover ).toBeVisible() );
+				expect( popover ).not.toHaveStyle( 'position: static;' );
+			} );
+		} );
+
 		describe( 'focus behavior', () => {
 			it( 'should focus the popover container when opened', async () => {
 				render(
diff --git a/packages/components/src/private-apis.ts b/packages/components/src/private-apis.ts
index 5ff39ba364a04..b6e033ab24ab7 100644
--- a/packages/components/src/private-apis.ts
+++ b/packages/components/src/private-apis.ts
@@ -1,25 +1,9 @@
 /**
  * Internal dependencies
  */
-import {
-	Composite as CompositeV2,
-	CompositeGroup as CompositeGroupV2,
-	CompositeItem as CompositeItemV2,
-	CompositeRow as CompositeRowV2,
-	useCompositeStore as useCompositeStoreV2,
-} from './composite/v2';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
 import { createPrivateSlotFill } from './slot-fill';
-import {
-	DropdownMenu as DropdownMenuV2,
-	DropdownMenuGroup as DropdownMenuGroupV2,
-	DropdownMenuItem as DropdownMenuItemV2,
-	DropdownMenuCheckboxItem as DropdownMenuCheckboxItemV2,
-	DropdownMenuRadioItem as DropdownMenuRadioItemV2,
-	DropdownMenuSeparator as DropdownMenuSeparatorV2,
-	DropdownMenuItemLabel as DropdownMenuItemLabelV2,
-	DropdownMenuItemHelpText as DropdownMenuItemHelpTextV2,
-} from './dropdown-menu-v2';
+import { DropdownMenuV2 } from './dropdown-menu-v2';
 import { ComponentsContext } from './context/context-system-provider';
 import Theme from './theme';
 import Tabs from './tabs';
@@ -28,23 +12,11 @@ import { lock } from './lock-unlock';
 
 export const privateApis = {};
 lock( privateApis, {
-	CompositeV2,
-	CompositeGroupV2,
-	CompositeItemV2,
-	CompositeRowV2,
-	useCompositeStoreV2,
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,
 	ComponentsContext,
 	Tabs,
 	Theme,
 	DropdownMenuV2,
-	DropdownMenuGroupV2,
-	DropdownMenuItemV2,
-	DropdownMenuCheckboxItemV2,
-	DropdownMenuRadioItemV2,
-	DropdownMenuSeparatorV2,
-	DropdownMenuItemLabelV2,
-	DropdownMenuItemHelpTextV2,
 	kebabCase,
 } );
diff --git a/packages/components/src/progress-bar/styles.ts b/packages/components/src/progress-bar/styles.ts
index 79b9103e73a1e..585b9ab262075 100644
--- a/packages/components/src/progress-bar/styles.ts
+++ b/packages/components/src/progress-bar/styles.ts
@@ -40,7 +40,7 @@ export const Track = styled.div`
 		${ COLORS.theme.foreground },
 		transparent 90%
 	);
-	border-radius: ${ CONFIG.radiusBlockUi };
+	border-radius: ${ CONFIG.radiusFull };
 
 	// Windows high contrast mode.
 	outline: 2px solid transparent;
@@ -58,7 +58,7 @@ export const Indicator = styled.div< {
 	position: absolute;
 	top: 0;
 	height: 100%;
-	border-radius: ${ CONFIG.radiusBlockUi };
+	border-radius: ${ CONFIG.radiusFull };
 	/* Text color at 90% opacity */
 	background-color: color-mix(
 		in srgb,
diff --git a/packages/components/src/query-controls/README.md b/packages/components/src/query-controls/README.md
index 83cae88952d40..3eb6d507c9ccd 100644
--- a/packages/components/src/query-controls/README.md
+++ b/packages/components/src/query-controls/README.md
@@ -240,3 +240,10 @@ The selected category for the `categoriesList` prop.
 
 -   Required: No
 -   Platform: Web
+
+#### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Required: No
+- Default: `false`
\ No newline at end of file
diff --git a/packages/components/src/query-controls/index.tsx b/packages/components/src/query-controls/index.tsx
index de53c63a9b8a8..452dd303c778b 100644
--- a/packages/components/src/query-controls/index.tsx
+++ b/packages/components/src/query-controls/index.tsx
@@ -60,7 +60,6 @@ function isMultipleCategorySelection(
  * ```
  */
 export function QueryControls( {
-	__next40pxDefaultSize = false,
 	authorList,
 	selectedAuthorId,
 	numberOfItems,
@@ -82,10 +81,14 @@ export function QueryControls( {
 				onOrderChange && onOrderByChange && (
 					<SelectControl
 						__nextHasNoMarginBottom
-						__next40pxDefaultSize={ __next40pxDefaultSize }
+						__next40pxDefaultSize
 						key="query-controls-order-select"
 						label={ __( 'Order by' ) }
-						value={ `${ orderBy }/${ order }` }
+						value={
+							orderBy === undefined || order === undefined
+								? undefined
+								: `${ orderBy }/${ order }`
+						}
 						options={ [
 							{
 								label: __( 'Newest to oldest' ),
@@ -133,7 +136,7 @@ export function QueryControls( {
 					props.categoriesList &&
 					props.onCategoryChange && (
 						<CategorySelect
-							__next40pxDefaultSize={ __next40pxDefaultSize }
+							__next40pxDefaultSize
 							key="query-controls-category-select"
 							categoriesList={ props.categoriesList }
 							label={ __( 'Category' ) }
@@ -146,7 +149,7 @@ export function QueryControls( {
 					props.categorySuggestions &&
 					props.onCategoryChange && (
 						<FormTokenField
-							__next40pxDefaultSize={ __next40pxDefaultSize }
+							__next40pxDefaultSize
 							__nextHasNoMarginBottom
 							key="query-controls-categories-select"
 							label={ __( 'Categories' ) }
@@ -170,7 +173,7 @@ export function QueryControls( {
 					),
 				onAuthorChange && (
 					<AuthorSelect
-						__next40pxDefaultSize={ __next40pxDefaultSize }
+						__next40pxDefaultSize
 						key="query-controls-author-select"
 						authorList={ authorList }
 						label={ __( 'Author' ) }
@@ -182,7 +185,7 @@ export function QueryControls( {
 				onNumberOfItemsChange && (
 					<RangeControl
 						__nextHasNoMarginBottom
-						__next40pxDefaultSize={ __next40pxDefaultSize }
+						__next40pxDefaultSize
 						key="query-controls-range-control"
 						label={ __( 'Number of items' ) }
 						value={ numberOfItems }
diff --git a/packages/components/src/query-controls/types.ts b/packages/components/src/query-controls/types.ts
index 8c45d22c54c06..eb004bf8215b0 100644
--- a/packages/components/src/query-controls/types.ts
+++ b/packages/components/src/query-controls/types.ts
@@ -107,7 +107,8 @@ type BaseQueryControlsProps = {
 	 * Start opting into the larger default height that will become the
 	 * default size in a future version.
 	 *
-	 * @default false
+	 * @deprecated Default behavior since WP 6.7. Prop can be safely removed.
+	 * @ignore
 	 */
 	__next40pxDefaultSize?: boolean;
 };
diff --git a/packages/components/src/radio-control/index.tsx b/packages/components/src/radio-control/index.tsx
index 11b9e32b9118b..29927558c58cd 100644
--- a/packages/components/src/radio-control/index.tsx
+++ b/packages/components/src/radio-control/index.tsx
@@ -16,6 +16,20 @@ import BaseControl from '../base-control';
 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={ clsx( className, 'components-radio-control' ) }
+			aria-describedby={ !! help ? generateHelpId( id ) : undefined }
 		>
-			<VStack spacing={ 3 }>
+			{ 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,20 +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
 							className="components-radio-control__label"
-							htmlFor={ `${ id }-${ index }` }
+							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
index 7be398e77e17c..dae00e57962f4 100644
--- a/packages/components/src/radio-control/stories/index.story.tsx
+++ b/packages/components/src/radio-control/stories/index.story.tsx
@@ -68,3 +68,26 @@ Default.args = {
 		{ 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/style.scss b/packages/components/src/radio-control/style.scss
index 239ef38e65cc3..e3dcb8d1e5827 100644
--- a/packages/components/src/radio-control/style.scss
+++ b/packages/components/src/radio-control/style.scss
@@ -1,19 +1,38 @@
+.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: flex;
+	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;
 
 	display: inline-flex;
-	margin: 0 $grid-unit-10 0 0;
+	margin: 0;
 	padding: 0;
 	appearance: none;
 	cursor: pointer;
 
 	&:focus {
-		box-shadow: 0 0 0 ($border-width * 2) $components-color-background, 0 0 0 ($border-width * 2 + $border-width-focus-fallback) $components-color-accent;
+		@include button-style-outset__focus(var(--wp-admin-theme-color));
 	}
 
 	&:checked {
@@ -22,11 +41,32 @@
 
 		&::before {
 			content: "";
-			border-radius: 50%;
+			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 0000000000000..7e30744d96b82
--- /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 43c5e147f028d..d1c3aa40d9648 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/radio.tsx b/packages/components/src/radio-group/radio.tsx
index 0c90c337fcdf2..50a5a2647b39d 100644
--- a/packages/components/src/radio-group/radio.tsx
+++ b/packages/components/src/radio-group/radio.tsx
@@ -7,6 +7,7 @@ import { forwardRef, useContext } from '@wordpress/element';
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 
 /**
  * Internal dependencies
@@ -26,7 +27,7 @@ function UnforwardedRadio(
 ) {
 	const { store, disabled } = useContext( RadioGroupContext );
 
-	const selectedValue = store?.useState( 'value' );
+	const selectedValue = useStoreState( store, 'value' );
 	const isChecked = selectedValue !== undefined && selectedValue === value;
 
 	return (
diff --git a/packages/components/src/range-control/README.md b/packages/components/src/range-control/README.md
index 1a0f1e6adef95..cfa8c76740e74 100644
--- a/packages/components/src/range-control/README.md
+++ b/packages/components/src/range-control/README.md
@@ -90,6 +90,7 @@ const MyRangeControl = () => {
 
 	return(
 		<RangeControl
+			__nextHasNoMarginBottom
 			label="Columns"
 			value={ columns }
 			onChange={ ( value ) => setColumns( value ) }
@@ -361,6 +362,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.tsx b/packages/components/src/range-control/index.tsx
index b5fff9f56b80d..c9fbdc0055c85 100644
--- a/packages/components/src/range-control/index.tsx
+++ b/packages/components/src/range-control/index.tsx
@@ -41,6 +41,25 @@ import { space } from '../utils/space';
 
 const noop = () => {};
 
+/**
+ * Computes the value that `RangeControl` should reset to when pressing
+ * the reset button.
+ */
+function computeResetValue( {
+	resetFallbackValue,
+	initialPosition,
+}: Pick< RangeControlProps, 'resetFallbackValue' | 'initialPosition' > ) {
+	if ( resetFallbackValue !== undefined ) {
+		return ! Number.isNaN( resetFallbackValue ) ? resetFallbackValue : null;
+	}
+
+	if ( initialPosition !== undefined ) {
+		return ! Number.isNaN( initialPosition ) ? initialPosition : null;
+	}
+
+	return null;
+}
+
 function UnforwardedRangeControl(
 	props: WordPressComponentProps< RangeControlProps, 'input', false >,
 	forwardedRef: ForwardedRef< HTMLInputElement >
@@ -166,13 +185,12 @@ function UnforwardedRangeControl(
 	};
 
 	const handleOnReset = () => {
-		let resetValue: number | null = parseFloat( `${ resetFallbackValue }` );
-		let onChangeResetValue: number | undefined = resetValue;
-
-		if ( isNaN( resetValue ) ) {
-			resetValue = null;
-			onChangeResetValue = undefined;
-		}
+		// Reset to `resetFallbackValue` if defined, otherwise set internal value
+		// to `null` — which, if propagated to the `value` prop, will cause
+		// the value to be reset to the `initialPosition` prop if defined.
+		const resetValue = Number.isNaN( resetFallbackValue )
+			? null
+			: resetFallbackValue ?? null;
 
 		setValue( resetValue );
 
@@ -189,7 +207,7 @@ function UnforwardedRangeControl(
 		 * preserve the undefined callback argument, except when a
 		 * resetFallbackValue is defined.
 		 */
-		onChange( onChangeResetValue );
+		onChange( resetValue ?? undefined );
 	};
 
 	const handleShowTooltip = () => setShowTooltip( true );
@@ -210,9 +228,11 @@ function UnforwardedRangeControl(
 	const offsetStyle = {
 		[ isRTL() ? 'right' : 'left' ]: fillValueOffset,
 	};
+
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="RangeControl"
 			className={ classes }
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
@@ -328,7 +348,17 @@ function UnforwardedRangeControl(
 							className="components-range-control__reset"
 							// If the RangeControl itself is disabled, the reset button shouldn't be in the tab sequence.
 							accessibleWhenDisabled={ ! disabled }
-							disabled={ disabled || value === undefined }
+							// The reset button should be disabled if RangeControl itself is disabled,
+							// or if the current `value` is equal to the value that would be currently
+							// assigned when clicking the button.
+							disabled={
+								disabled ||
+								value ===
+									computeResetValue( {
+										resetFallbackValue,
+										initialPosition,
+									} )
+							}
 							variant="secondary"
 							size="small"
 							onClick={ handleOnReset }
@@ -353,6 +383,7 @@ function UnforwardedRangeControl(
  *   const [ isChecked, setChecked ] = useState( true );
  *   return (
  *     <RangeControl
+ *       __nextHasNoMarginBottom
  *       help="Please select how transparent you would like this."
  *       initialPosition={50}
  *       label="Opacity"
diff --git a/packages/components/src/range-control/stories/index.story.tsx b/packages/components/src/range-control/stories/index.story.tsx
index 4e0c1f19e078b..7775c36419572 100644
--- a/packages/components/src/range-control/stories/index.story.tsx
+++ b/packages/components/src/range-control/stories/index.story.tsx
@@ -70,6 +70,7 @@ const Template: StoryFn< typeof RangeControl > = ( { onChange, ...args } ) => {
 
 export const Default: StoryFn< typeof RangeControl > = Template.bind( {} );
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	help: 'Please select how transparent you would like this.',
 	initialPosition: 50,
 	label: 'Opacity',
@@ -104,6 +105,7 @@ export const WithAnyStep: StoryFn< typeof RangeControl > = ( {
 	);
 };
 WithAnyStep.args = {
+	__nextHasNoMarginBottom: true,
 	label: 'Brightness',
 	step: 'any',
 };
@@ -167,6 +169,7 @@ export const WithIntegerStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithIntegerStepAndMarks.args = {
+	__nextHasNoMarginBottom: true,
 	label: 'Integer Step',
 	marks: marksBase,
 	max: 10,
@@ -183,6 +186,7 @@ export const WithDecimalStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithDecimalStepAndMarks.args = {
+	__nextHasNoMarginBottom: true,
 	marks: [
 		...marksBase,
 		{ value: 3.5, label: '3.5' },
@@ -202,6 +206,7 @@ export const WithNegativeMinimumAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithNegativeMinimumAndMarks.args = {
+	__nextHasNoMarginBottom: true,
 	marks: marksWithNegatives,
 	max: 10,
 	min: -10,
@@ -217,6 +222,7 @@ export const WithNegativeRangeAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithNegativeRangeAndMarks.args = {
+	__nextHasNoMarginBottom: true,
 	marks: marksWithNegatives,
 	max: -1,
 	min: -10,
@@ -232,6 +238,7 @@ export const WithAnyStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithAnyStepAndMarks.args = {
+	__nextHasNoMarginBottom: true,
 	marks: marksBase,
 	max: 10,
 	min: 0,
diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts
index 89f4864aee2ea..6e9c68ace9753 100644
--- a/packages/components/src/range-control/styles/range-control-styles.ts
+++ b/packages/components/src/range-control/styles/range-control-styles.ts
@@ -8,7 +8,7 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import NumberControl from '../../number-control';
-import { COLORS, rtl } from '../../utils';
+import { COLORS, rtl, CONFIG } from '../../utils';
 import { space } from '../../utils/space';
 
 import type {
@@ -57,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;
@@ -102,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 };
 `;
@@ -119,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;
@@ -154,7 +157,7 @@ export const Mark = styled.span`
 	height: ${ thumbSize }px;
 	left: 0;
 	position: absolute;
-	top: -4px;
+	top: 9px;
 	width: 1px;
 
 	${ markFill };
@@ -170,7 +173,7 @@ export const MarkLabel = styled.span`
 	color: ${ COLORS.gray[ 300 ] };
 	font-size: 11px;
 	position: absolute;
-	top: 12px;
+	top: 22px;
 	white-space: nowrap;
 
 	${ rtl( { left: 0 } ) };
@@ -203,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 } ) };
@@ -221,7 +224,7 @@ const thumbFocus = ( { isFocused }: ThumbProps ) => {
 					position: absolute;
 					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;
@@ -233,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 };
@@ -260,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 ) => {
@@ -281,12 +296,10 @@ 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;
@@ -294,11 +307,8 @@ export const Tooltip = styled.span< TooltipProps >`
 	user-select: none;
 	line-height: 1.4;
 
-	@media not ( prefers-reduced-motion ) {
-		transition: opacity 120ms ease;
-	}
-
 	${ tooltipShow };
+
 	${ tooltipPosition };
 	${ rtl(
 		{ transform: 'translateX(-50%)' },
diff --git a/packages/components/src/range-control/test/index.tsx b/packages/components/src/range-control/test/index.tsx
index d843b615ed007..3ce741867d0db 100644
--- a/packages/components/src/range-control/test/index.tsx
+++ b/packages/components/src/range-control/test/index.tsx
@@ -6,7 +6,7 @@ import { act, fireEvent, render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import RangeControl from '../';
+import _RangeControl from '../';
 
 const getRangeInput = (): HTMLInputElement => screen.getByRole( 'slider' );
 const getNumberInput = (): HTMLInputElement => screen.getByRole( 'spinbutton' );
@@ -15,6 +15,12 @@ const getResetButton = (): HTMLButtonElement => screen.getByRole( 'button' );
 const fireChangeEvent = ( input: HTMLInputElement, value?: number | string ) =>
 	fireEvent.change( input, { target: { value } } );
 
+const RangeControl = (
+	props: React.ComponentProps< typeof _RangeControl >
+) => {
+	return <_RangeControl { ...props } __nextHasNoMarginBottom />;
+};
+
 describe( 'RangeControl', () => {
 	describe( '#render()', () => {
 		it( 'should trigger change callback with numeric value', () => {
@@ -292,14 +298,37 @@ describe( 'RangeControl', () => {
 	} );
 
 	describe( 'reset', () => {
-		it( 'should reset to a custom fallback value, defined by a parent component', () => {
+		it( 'should clear the input value when clicking the reset button', () => {
+			const spy = jest.fn();
+			render( <RangeControl allowReset onChange={ spy } /> );
+
+			const resetButton = getResetButton();
+			const rangeInput = getRangeInput();
+			const numberInput = getNumberInput();
+
+			fireChangeEvent( numberInput, '14' );
+
+			expect( rangeInput.value ).toBe( '14' );
+			expect( numberInput.value ).toBe( '14' );
+			expect( spy ).toHaveBeenCalledWith( 14 );
+
+			fireEvent.click( resetButton );
+
+			// range input resets to min + (max-min)/2
+			expect( rangeInput.value ).toBe( '50' );
+			expect( numberInput.value ).toBe( '' );
+			expect( spy ).toHaveBeenCalledWith( undefined );
+
+			expect( resetButton ).toHaveAttribute( 'aria-disabled', 'true' );
+		} );
+
+		it( 'should reset to the `initialPosition` value when clicking the reset button', () => {
 			const spy = jest.fn();
 			render(
 				<RangeControl
-					initialPosition={ 10 }
 					allowReset
+					initialPosition={ 23 }
 					onChange={ spy }
-					resetFallbackValue={ 33 }
 				/>
 			);
 
@@ -307,21 +336,29 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
+			fireChangeEvent( numberInput, '14' );
+
+			expect( rangeInput.value ).toBe( '14' );
+			expect( numberInput.value ).toBe( '14' );
+			expect( spy ).toHaveBeenCalledWith( 14 );
+
 			fireEvent.click( resetButton );
 
-			expect( rangeInput.value ).toBe( '33' );
-			expect( numberInput.value ).toBe( '33' );
-			expect( spy ).toHaveBeenCalledWith( 33 );
+			expect( rangeInput.value ).toBe( '23' );
+			expect( numberInput.value ).toBe( '23' );
+			expect( spy ).toHaveBeenCalledWith( undefined );
+
+			expect( resetButton ).toHaveAttribute( 'aria-disabled', 'true' );
 		} );
 
-		it( 'should reset to a 50% of min/max value, of no initialPosition or value is defined', () => {
+		it( 'should reset to the `resetFallbackValue` value when clicking the reset button', () => {
+			const spy = jest.fn();
 			render(
 				<RangeControl
-					initialPosition={ undefined }
-					min={ 0 }
-					max={ 100 }
+					initialPosition={ 10 }
 					allowReset
-					resetFallbackValue={ undefined }
+					onChange={ spy }
+					resetFallbackValue={ 33 }
 				/>
 			);
 
@@ -331,8 +368,11 @@ describe( 'RangeControl', () => {
 
 			fireEvent.click( resetButton );
 
-			expect( rangeInput.value ).toBe( '50' );
-			expect( numberInput.value ).toBe( '' );
+			expect( rangeInput.value ).toBe( '33' );
+			expect( numberInput.value ).toBe( '33' );
+			expect( spy ).toHaveBeenCalledWith( 33 );
+
+			expect( resetButton ).toHaveAttribute( 'aria-disabled', 'true' );
 		} );
 	} );
 } );
diff --git a/packages/components/src/range-control/tooltip.tsx b/packages/components/src/range-control/tooltip.tsx
index 432415086dcef..4156c02646434 100644
--- a/packages/components/src/range-control/tooltip.tsx
+++ b/packages/components/src/range-control/tooltip.tsx
@@ -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/resizable-box/resize-tooltip/styles/resize-tooltip.styles.ts b/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.ts
index acd015687f81b..1cfc2f381f2c1 100644
--- 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
@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { Text } from '../../../text';
-import { font, COLORS } from '../../../utils';
+import { font, COLORS, CONFIG } from '../../../utils';
 
 export const Root = styled.div`
 	bottom: 0;
@@ -31,7 +31,7 @@ export const TooltipWrapper = styled.div`
 
 export const Tooltip = styled.div`
 	background: ${ COLORS.theme.foreground };
-	border-radius: 2px;
+	border-radius: ${ CONFIG.radiusSmall };
 	box-sizing: border-box;
 	font-family: ${ font( 'default.fontFamily' ) };
 	font-size: 12px;
diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss
index eed13578b3f0c..3c9efd2713646 100644
--- a/packages/components/src/resizable-box/style.scss
+++ b/packages/components/src/resizable-box/style.scss
@@ -28,14 +28,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 +43,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;
diff --git a/packages/components/src/search-control/index.tsx b/packages/components/src/search-control/index.tsx
index 08cb3b065c904..c41eda9b209b6 100644
--- a/packages/components/src/search-control/index.tsx
+++ b/packages/components/src/search-control/index.tsx
@@ -67,7 +67,7 @@ function UnforwardedSearchControl(
 ) {
 	// @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.
-	delete restProps.disabled;
+	const { disabled, ...filteredRestProps } = restProps;
 
 	const searchRef = useRef< HTMLInputElement >( null );
 	const instanceId = useInstanceId(
@@ -77,10 +77,13 @@ function UnforwardedSearchControl(
 
 	const contextValue = useMemo(
 		() => ( {
-			// Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system
-			// to provide backwards compatibile margin for SearchControl.
-			// (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.)
-			BaseControl: { _overrides: { __nextHasNoMarginBottom } },
+			BaseControl: {
+				// Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system
+				// to provide backwards compatibile margin for SearchControl.
+				// (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.)
+				_overrides: { __nextHasNoMarginBottom },
+				__associatedWPComponentName: 'SearchControl',
+			},
 			// `isBorderless` is still experimental and not a public prop for InputControl yet.
 			InputBase: { isBorderless: true },
 		} ),
@@ -114,7 +117,7 @@ function UnforwardedSearchControl(
 						/>
 					</SuffixItemWrapper>
 				}
-				{ ...restProps }
+				{ ...filteredRestProps }
 			/>
 		</ContextSystemProvider>
 	);
diff --git a/packages/components/src/search-control/stories/index.story.tsx b/packages/components/src/search-control/stories/index.story.tsx
index 433d3eef655ad..215288bb67c9b 100644
--- a/packages/components/src/search-control/stories/index.story.tsx
+++ b/packages/components/src/search-control/stories/index.story.tsx
@@ -48,6 +48,7 @@ const Template: StoryFn< typeof SearchControl > = ( {
 export const Default = Template.bind( {} );
 Default.args = {
 	help: 'Help text to explain the input.',
+	__nextHasNoMarginBottom: true,
 };
 
 /**
diff --git a/packages/components/src/search-control/test/index.tsx b/packages/components/src/search-control/test/index.tsx
index f130cab1b2a7c..c6637945adcf6 100644
--- a/packages/components/src/search-control/test/index.tsx
+++ b/packages/components/src/search-control/test/index.tsx
@@ -23,6 +23,7 @@ function ControlledSearchControl( {
 	return (
 		<SearchControl
 			{ ...restProps }
+			__nextHasNoMarginBottom
 			value={ value }
 			onChange={ ( ...args ) => {
 				setValue( ...args );
diff --git a/packages/components/src/select-control/README.md b/packages/components/src/select-control/README.md
index bc37942231091..c240243408fab 100644
--- a/packages/components/src/select-control/README.md
+++ b/packages/components/src/select-control/README.md
@@ -103,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 } );
@@ -126,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
@@ -190,7 +190,7 @@ In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl`
 
 #### options
 
-An array of objects containing the following properties:
+An array of objects containing the following properties, as well as any other `option` element attributes:
 
 -   `label`: (string) The label to be shown to the user.
 -   `value`: (string) The internal value used to choose the selected value. This is also the value passed to onChange when the option is selected.
@@ -214,6 +214,13 @@ If multiple is false the value received is a single value with the new selected
 -   Type: `function`
 -   Required: Yes
 
+#### value
+
+The value of the selected option. If `multiple` is true, the `value` should be an array with the values of the selected options.
+
+-   Type: `String|String[]`
+-   Required: No
+
 #### variant
 
 The style variant of the control.
@@ -222,6 +229,14 @@ The style variant of the control.
 -   Required: No
 -   Default: `'default'`
 
+### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
 ### __nextHasNoMarginBottom
 
 Start opting into the new margin-free styles that will become the default in a future version.
diff --git a/packages/components/src/select-control/index.tsx b/packages/components/src/select-control/index.tsx
index 5db0316d02b12..3686661b8a58d 100644
--- a/packages/components/src/select-control/index.tsx
+++ b/packages/components/src/select-control/index.tsx
@@ -26,8 +26,24 @@ function useUniqueId( idProp?: string ) {
 	return idProp || id;
 }
 
-function UnforwardedSelectControl(
-	props: WordPressComponentProps< SelectControlProps, 'select', false >,
+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 {
@@ -66,12 +82,14 @@ function UnforwardedSelectControl(
 			const selectedOptions = Array.from( event.target.options ).filter(
 				( { selected } ) => selected
 			);
-			const newValues = selectedOptions.map( ( { value } ) => value );
+			const newValues = selectedOptions.map(
+				( { value } ) => value as V
+			);
 			props.onChange?.( newValues, { event } );
 			return;
 		}
 
-		props.onChange?.( event.target.value, { event } );
+		props.onChange?.( event.target.value as V, { event } );
 	};
 
 	const classes = clsx( 'components-select-control', className );
@@ -81,6 +99,7 @@ function UnforwardedSelectControl(
 			help={ help }
 			id={ id }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="SelectControl"
 		>
 			<StyledInputBase
 				className={ classes }
@@ -115,23 +134,7 @@ function UnforwardedSelectControl(
 					value={ valueProp }
 					variant={ variant }
 				>
-					{ children ||
-						options.map( ( option, index ) => {
-							const key =
-								option.id ||
-								`${ option.label }-${ option.value }-${ index }`;
-
-							return (
-								<option
-									key={ key }
-									value={ option.value }
-									disabled={ option.disabled }
-									hidden={ option.hidden }
-								>
-									{ option.label }
-								</option>
-							);
-						} ) }
+					{ children || <SelectOptions options={ options } /> }
 				</Select>
 			</StyledInputBase>
 		</BaseControl>
@@ -151,6 +154,7 @@ function UnforwardedSelectControl(
  *
  *   return (
  *     <SelectControl
+ *       __nextHasNoMarginBottom
  *       label="Size"
  *       value={ size }
  *       options={ [
@@ -164,6 +168,14 @@ function UnforwardedSelectControl(
  * };
  * ```
  */
-export const SelectControl = forwardRef( UnforwardedSelectControl );
+export const SelectControl = forwardRef( UnforwardedSelectControl ) as <
+	V extends string,
+>(
+	props: WordPressComponentProps<
+		SelectControlProps< V >,
+		'select',
+		false
+	> & { ref?: React.Ref< HTMLSelectElement > }
+) => React.JSX.Element | null;
 
 export default SelectControl;
diff --git a/packages/components/src/select-control/stories/index.story.tsx b/packages/components/src/select-control/stories/index.story.tsx
index 11a63510d9337..5e57a4eaecd5a 100644
--- a/packages/components/src/select-control/stories/index.story.tsx
+++ b/packages/components/src/select-control/stories/index.story.tsx
@@ -12,6 +12,7 @@ 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/SelectControl',
@@ -63,6 +64,8 @@ const SelectControlWithState: StoryFn< typeof SelectControl > = ( props ) => {
 
 export const Default = SelectControlWithState.bind( {} );
 Default.args = {
+	__nextHasNoMarginBottom: true,
+	label: 'Label',
 	options: [
 		{ value: '', label: 'Select an Option', disabled: true },
 		{ value: 'a', label: 'Option A' },
@@ -75,16 +78,18 @@ 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 customizeability.
  */
-export const WithCustomChildren: StoryFn< typeof SelectControl > = ( args ) => {
-	return (
-		<SelectControlWithState { ...args }>
+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
@@ -97,12 +102,23 @@ export const WithCustomChildren: StoryFn< typeof SelectControl > = ( args ) => {
 					Option Group 1 - Option 2 - Disabled
 				</option>
 			</optgroup>
-		</SelectControlWithState>
-	);
+		</>
+	),
+};
+
+/**
+ * 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/styles/select-control-styles.ts b/packages/components/src/select-control/styles/select-control-styles.ts
index 989c5fa62ecff..5248e7af98828 100644
--- a/packages/components/src/select-control/styles/select-control-styles.ts
+++ b/packages/components/src/select-control/styles/select-control-styles.ts
@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { COLORS, rtl } from '../../utils';
+import { COLORS, rtl, CONFIG } from '../../utils';
 import { space } from '../../utils/space';
 import type { SelectControlProps } from '../types';
 import InputControlSuffixWrapper from '../../input-control/input-suffix-wrapper';
@@ -108,10 +108,10 @@ const sizePaddings = ( {
 	selectSize = 'default',
 }: SelectProps ) => {
 	const padding = {
-		default: 16,
-		small: 8,
-		compact: 8,
-		'__unstable-large': 16,
+		default: CONFIG.controlPaddingX,
+		small: CONFIG.controlPaddingXSmall,
+		compact: CONFIG.controlPaddingXSmall,
+		'__unstable-large': CONFIG.controlPaddingX,
 	};
 
 	if ( ! __next40pxDefaultSize ) {
@@ -158,6 +158,7 @@ export const Select = styled.select< SelectProps >`
 		box-sizing: border-box;
 		border: none;
 		box-shadow: none !important;
+		color: currentColor; // Overrides hover/focus styles in forms.css
 		cursor: inherit;
 		display: block;
 		font-family: inherit;
diff --git a/packages/components/src/select-control/test/select-control.tsx b/packages/components/src/select-control/test/select-control.tsx
index 03e3acbf1f732..47b684cd20e28 100644
--- a/packages/components/src/select-control/test/select-control.tsx
+++ b/packages/components/src/select-control/test/select-control.tsx
@@ -7,7 +7,13 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import SelectControl from '..';
+import _SelectControl from '..';
+
+const SelectControl = (
+	props: React.ComponentProps< typeof _SelectControl >
+) => {
+	return <_SelectControl { ...props } __nextHasNoMarginBottom />;
+};
 
 describe( 'SelectControl', () => {
 	it( 'should not render when no options or children are provided', () => {
@@ -17,8 +23,8 @@ describe( 'SelectControl', () => {
 		expect( screen.queryByRole( 'combobox' ) ).not.toBeInTheDocument();
 	} );
 
-	it( 'should not render its children', async () => {
-		const user = await userEvent.setup();
+	it( 'should render its children', async () => {
+		const user = userEvent.setup();
 		const handleChangeMock = jest.fn();
 
 		render(
@@ -46,8 +52,8 @@ describe( 'SelectControl', () => {
 		);
 	} );
 
-	it( 'should not render its options', async () => {
-		const user = await userEvent.setup();
+	it( 'should render its options', async () => {
+		const user = userEvent.setup();
 		const handleChangeMock = jest.fn();
 
 		render(
@@ -81,4 +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 a1d02d444c147..4e7211ab9abfb 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,7 +9,7 @@ import type { ChangeEvent, FocusEvent, ReactNode } from 'react';
 import type { InputBaseProps } from '../input-control/types';
 import type { BaseControlProps } from '../base-control/types';
 
-type SelectControlBaseProps = Pick<
+type SelectControlBaseProps< V extends string > = Pick<
 	InputBaseProps,
 	| '__next36pxDefaultSize'
 	| '__next40pxDefaultSize'
@@ -22,9 +22,12 @@ type SelectControlBaseProps = Pick<
 	| 'suffix'
 > &
 	Pick< BaseControlProps, 'help' | '__nextHasNoMarginBottom' > & {
-		onBlur?: ( event: FocusEvent< HTMLSelectElement > ) => void;
-		onFocus?: ( event: FocusEvent< HTMLSelectElement > ) => void;
-		options?: {
+		/**
+		 * An array of option property objects to be rendered,
+		 * each with a `label` and `value` property, as well as any other
+		 * `<option>` attributes.
+		 */
+		options?: readonly ( {
 			/**
 			 * The label to be shown to the user.
 			 */
@@ -33,21 +36,11 @@ type SelectControlBaseProps = Pick<
 			 * The internal value used to choose the selected value.
 			 * This is also the value passed to `onChange` when the option is selected.
 			 */
-			value: string;
-			id?: string;
-			/**
-			 * Whether or not the option should have the disabled attribute.
-			 *
-			 * @default false
-			 */
-			disabled?: boolean;
-			/**
-			 * Whether or not the option should be hidden.
-			 *
-			 * @default false
-			 */
-			hidden?: boolean;
-		}[];
+			value: V;
+		} & Omit<
+			React.OptionHTMLAttributes< HTMLOptionElement >,
+			'label' | 'value'
+		> )[];
 		/**
 		 * As an alternative to the `options` prop, `optgroup`s and `options` can be
 		 * passed in as `children` for more customizability.
@@ -61,50 +54,62 @@ type SelectControlBaseProps = Pick<
 		variant?: 'default' | 'minimal';
 	};
 
-export type SelectControlSingleSelectionProps = SelectControlBaseProps & {
-	/**
-	 * If this property is added, multiple values can be selected. The `value` passed should be an array.
-	 *
-	 * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.
-	 *
-	 * @default false
-	 */
-	multiple?: false;
-	value?: string;
-	/**
-	 * A function that receives the value of the new option that is being selected as input.
-	 *
-	 * If `multiple` is `true`, the value received is an array of the selected value.
-	 * Otherwise, the value received is a single value with the new selected value.
-	 */
-	onChange?: (
-		value: string,
-		extra?: { event?: ChangeEvent< HTMLSelectElement > }
-	) => void;
-};
+export type SelectControlSingleSelectionProps< V extends string = string > =
+	SelectControlBaseProps< V > & {
+		/**
+		 * If this property is added, multiple values can be selected. The `value` passed should be an array.
+		 *
+		 * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.
+		 *
+		 * @default false
+		 */
+		multiple?: false;
+		/**
+		 * The value of the selected option.
+		 *
+		 * If `multiple` is true, the `value` should be an array with the values of the selected options.
+		 */
+		value?: NoInfer< V >;
+		/**
+		 * A function that receives the value of the new option that is being selected as input.
+		 *
+		 * If `multiple` is `true`, the value received is an array of the selected value.
+		 * Otherwise, the value received is a single value with the new selected value.
+		 */
+		onChange?: (
+			value: NoInfer< V >,
+			extra?: { event?: ChangeEvent< HTMLSelectElement > }
+		) => void;
+	};
 
-export type SelectControlMultipleSelectionProps = SelectControlBaseProps & {
-	/**
-	 * If this property is added, multiple values can be selected. The `value` passed should be an array.
-	 *
-	 * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.
-	 *
-	 * @default false
-	 */
-	multiple: true;
-	value?: string[];
-	/**
-	 * A function that receives the value of the new option that is being selected as input.
-	 *
-	 * If `multiple` is `true`, the value received is an array of the selected value.
-	 * Otherwise, the value received is a single value with the new selected value.
-	 */
-	onChange?: (
-		value: string[],
-		extra?: { event?: ChangeEvent< HTMLSelectElement > }
-	) => void;
-};
+export type SelectControlMultipleSelectionProps< V extends string > =
+	SelectControlBaseProps< V > & {
+		/**
+		 * If this property is added, multiple values can be selected. The `value` passed should be an array.
+		 *
+		 * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.
+		 *
+		 * @default false
+		 */
+		multiple: true;
+		/**
+		 * The value of the selected option.
+		 *
+		 * If `multiple` is true, the `value` should be an array with the values of the selected options.
+		 */
+		value?: NoInfer< V >[];
+		/**
+		 * A function that receives the value of the new option that is being selected as input.
+		 *
+		 * If `multiple` is `true`, the value received is an array of the selected value.
+		 * Otherwise, the value received is a single value with the new selected value.
+		 */
+		onChange?: (
+			value: NoInfer< V >[],
+			extra?: { event?: ChangeEvent< HTMLSelectElement > }
+		) => void;
+	};
 
-export type SelectControlProps =
-	| SelectControlSingleSelectionProps
-	| SelectControlMultipleSelectionProps;
+export type SelectControlProps< V extends string = string > =
+	| SelectControlSingleSelectionProps< V >
+	| SelectControlMultipleSelectionProps< V >;
diff --git a/packages/components/src/slot-fill/bubbles-virtually/fill.tsx b/packages/components/src/slot-fill/bubbles-virtually/fill.tsx
index 083d7302992dd..3cfadbadc62c4 100644
--- a/packages/components/src/slot-fill/bubbles-virtually/fill.tsx
+++ b/packages/components/src/slot-fill/bubbles-virtually/fill.tsx
@@ -12,17 +12,17 @@ import type { FillComponentProps } from '../types';
 
 function useForceUpdate() {
 	const [ , setState ] = useState( {} );
-	const mounted = useRef( true );
+	const mountedRef = useRef( true );
 
 	useEffect( () => {
-		mounted.current = true;
+		mountedRef.current = true;
 		return () => {
-			mounted.current = false;
+			mountedRef.current = false;
 		};
 	}, [] );
 
 	return () => {
-		if ( mounted.current ) {
+		if ( mountedRef.current ) {
 			setState( {} );
 		}
 	};
diff --git a/packages/components/src/slot-fill/index.tsx b/packages/components/src/slot-fill/index.tsx
index b2df054973a5b..03ed33a67f13b 100644
--- a/packages/components/src/slot-fill/index.tsx
+++ b/packages/components/src/slot-fill/index.tsx
@@ -71,6 +71,7 @@ export function Provider( {
 		</SlotFillProvider>
 	);
 }
+Provider.displayName = 'SlotFillProvider';
 
 export function createSlotFill( key: SlotKey ) {
 	const baseName = typeof key === 'symbol' ? key.description : key;
diff --git a/packages/components/src/snackbar/index.tsx b/packages/components/src/snackbar/index.tsx
index 5bd44d8aace33..0f2b74caca7d4 100644
--- a/packages/components/src/snackbar/index.tsx
+++ b/packages/components/src/snackbar/index.tsx
@@ -96,17 +96,17 @@ function UnforwardedSnackbar(
 
 	// The `onDismiss/onRemove` can have unstable references,
 	// trigger side-effect cleanup, and reset timers.
-	const callbackRefs = useRef( { onDismiss, onRemove } );
+	const callbacksRef = useRef( { onDismiss, onRemove } );
 	useLayoutEffect( () => {
-		callbackRefs.current = { onDismiss, onRemove };
+		callbacksRef.current = { onDismiss, onRemove };
 	} );
 
 	useEffect( () => {
 		// Only set up the timeout dismiss if we're not explicitly dismissing.
 		const timeoutHandle = setTimeout( () => {
 			if ( ! explicitDismiss ) {
-				callbackRefs.current.onDismiss?.();
-				callbackRefs.current.onRemove?.();
+				callbacksRef.current.onDismiss?.();
+				callbacksRef.current.onRemove?.();
 			}
 		}, NOTICE_TIMEOUT );
 
diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss
index 0ba1774d67382..1e76a1666411e 100644
--- a/packages/components/src/snackbar/style.scss
+++ b/packages/components/src/snackbar/style.scss
@@ -3,8 +3,8 @@
 	font-size: $default-font-size;
 	background: rgba($black, 0.85); // Emulates #1e1e1e closely.
 	backdrop-filter: blur($grid-unit-20) saturate(180%);
-	border-radius: $radius-block-ui;
-	box-shadow: $shadow-popover;
+	border-radius: $radius-medium;
+	box-shadow: $elevation-small;
 	color: $white;
 	padding: $grid-unit-15 ($grid-unit-05 * 5);
 	width: 100%;
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index c73ee1cb639ee..70317f4a2d0e0 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -49,6 +49,7 @@
 @import "./tab-panel/style.scss";
 @import "./text-control/style.scss";
 @import "./tip/style.scss";
+@import "./toggle-control/style.scss";
 @import "./toolbar/toolbar/style.scss";
 @import "./toolbar/toolbar-button/style.scss";
 @import "./toolbar/toolbar-group/style.scss";
diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
index f85119d938c65..9e180c30321b9 100644
--- a/packages/components/src/tab-panel/index.tsx
+++ b/packages/components/src/tab-panel/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
@@ -121,7 +122,9 @@ const UnforwardedTabPanel = (
 		defaultSelectedId: prependInstanceId( initialTabName ),
 	} );
 
-	const selectedTabName = extractTabName( tabStore.useState( 'selectedId' ) );
+	const selectedTabName = extractTabName(
+		useStoreState( tabStore, 'selectedId' )
+	);
 
 	const setTabStoreSelectedId = useCallback(
 		( tabName: string ) => {
diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss
index 2855f8c2b06a0..229b32c7477e8 100644
--- a/packages/components/src/tab-panel/style.scss
+++ b/packages/components/src/tab-panel/style.scss
@@ -67,7 +67,7 @@
 
 		// Draw the indicator.
 		box-shadow: 0 0 0 0 transparent;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 
 		// Animation
 		transition: all 0.1s linear;
@@ -89,7 +89,6 @@
 	}
 
 	&:focus-visible {
-		border-radius: 2px;
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 
 		// Windows high contrast mode.
diff --git a/packages/components/src/tab-panel/test/index.tsx b/packages/components/src/tab-panel/test/index.tsx
index 65827040f1e34..28dd1a81e9e84 100644
--- a/packages/components/src/tab-panel/test/index.tsx
+++ b/packages/components/src/tab-panel/test/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import { press, hover, click, sleep } from '@ariakit/test';
+import { press, hover, click } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -155,7 +155,6 @@ describe.each( [
 			// Tab to focus the tablist. Make sure alpha is focused, and that the
 			// corresponding tooltip is shown.
 			expect( screen.queryByText( 'Alpha' ) ).not.toBeInTheDocument();
-			await sleep();
 			await press.Tab();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
 			expect( screen.getByText( 'Alpha' ) ).toBeInTheDocument();
@@ -627,7 +626,6 @@ describe.each( [
 			// Tab to focus the tablist. Make sure alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 
@@ -665,7 +663,6 @@ describe.each( [
 			// Tab to focus the tablist. Make sure Alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 
@@ -703,7 +700,6 @@ describe.each( [
 			// Tab to focus the tablist. Make sure alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 
@@ -799,7 +795,6 @@ describe.each( [
 			// Tab to focus the tablist. Make sure Alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
@@ -841,7 +836,6 @@ describe.each( [
 
 			// Tab should initially focus the first tab in the tablist, which
 			// is Alpha.
-			await sleep();
 			await press.Tab();
 			expect(
 				await screen.findByRole( 'tab', { name: 'Alpha' } )
@@ -849,7 +843,6 @@ describe.each( [
 
 			// Because all other tabs should have `tabindex=-1`, pressing Tab
 			// should NOT move the focus to the next tab, which is Beta.
-			await sleep();
 			await press.Tab();
 			expect(
 				await screen.findByRole( 'tab', { name: 'Beta' } )
diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx
index cad4a217efd44..ca8c5b19bcd62 100644
--- a/packages/components/src/tabs/index.tsx
+++ b/packages/components/src/tabs/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
@@ -48,15 +49,15 @@ function Tabs( {
 
 	const isControlled = selectedTabId !== undefined;
 
-	const { items, selectedId, activeId } = store.useState();
+	const { items, selectedId, activeId } = useStoreState( store );
 	const { setSelectedId, setActiveId } = store;
 
 	// Keep track of whether tabs have been populated. This is used to prevent
 	// certain effects from firing too early while tab data and relevant
 	// variables are undefined during the initial render.
-	const tabsHavePopulated = useRef( false );
+	const tabsHavePopulatedRef = useRef( false );
 	if ( items.length > 0 ) {
-		tabsHavePopulated.current = true;
+		tabsHavePopulatedRef.current = true;
 	}
 
 	const selectedTab = items.find( ( item ) => item.id === selectedId );
@@ -93,7 +94,7 @@ function Tabs( {
 
 			if ( firstEnabledTab ) {
 				setSelectedId( firstEnabledTab.id );
-			} else if ( tabsHavePopulated.current ) {
+			} else if ( tabsHavePopulatedRef.current ) {
 				setSelectedId( null );
 			}
 		}
@@ -147,7 +148,11 @@ function Tabs( {
 
 		// Once the tabs have populated, if the `selectedTabId` still can't be
 		// found, clear the selection.
-		if ( tabsHavePopulated.current && !! selectedTabId && ! selectedTab ) {
+		if (
+			tabsHavePopulatedRef.current &&
+			!! selectedTabId &&
+			! selectedTab
+		) {
 			setSelectedId( null );
 		}
 	}, [ isControlled, selectedTab, selectedTabId, setSelectedId ] );
diff --git a/packages/components/src/tabs/stories/index.story.tsx b/packages/components/src/tabs/stories/index.story.tsx
index e5f113d93b7d0..0f7e0d2c6ac75 100644
--- a/packages/components/src/tabs/stories/index.story.tsx
+++ b/packages/components/src/tabs/stories/index.story.tsx
@@ -70,6 +70,112 @@ const Template: StoryFn< typeof Tabs > = ( props ) => {
 
 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 }>
diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 7d67f462c7e87..4f6b4a4c7c8dc 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -7,7 +7,7 @@ import * as Ariakit from '@ariakit/react';
 /**
  * Internal dependencies
  */
-import { COLORS } from '../utils';
+import { COLORS, CONFIG } from '../utils';
 import { space } from '../utils/space';
 
 export const TabListWrapper = styled.div`
@@ -16,56 +16,119 @@ export const TabListWrapper = styled.div`
 	align-items: stretch;
 	flex-direction: row;
 	text-align: center;
+	overflow-x: auto;
 
 	&[aria-orientation='vertical'] {
 		flex-direction: column;
 		text-align: start;
 	}
 
-	@media not ( prefers-reduced-motion: reduce ) {
-		&.is-animation-enabled::after {
-			transition-property: left, top, width, height;
+	: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;
 			transition-duration: 0.2s;
 			transition-timing-function: ease-out;
 		}
 	}
-	&::after {
+	&::before {
 		content: '';
 		position: absolute;
 		pointer-events: none;
+		transform-origin: var( --direction-start ) top;
 
 		// Windows high contrast mode.
 		outline: 2px solid transparent;
 		outline-offset: -1px;
 	}
-	&:not( [aria-orientation='vertical'] )::after {
-		bottom: 0;
-		left: var( --indicator-left );
-		width: var( --indicator-width );
-		height: 0;
-		border-bottom: var( --wp-admin-border-width-focus ) solid
-			${ COLORS.theme.accent };
+
+	/* Using a large value to avoid antialiasing rounding issues
+			when scaling in the transform, see: https://stackoverflow.com/a/52159123 */
+	--antialiasing-factor: 100;
+	&:not( [aria-orientation='vertical'] ) {
+		--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']::after {
-		z-index: -1;
+	&[aria-orientation='vertical']::before {
+		top: 0;
 		left: 0;
 		width: 100%;
-		top: var( --indicator-top );
-		height: var( --indicator-height );
+		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: ${ COLORS.theme.gray[ 100 ] };
 	}
 `;
 
 export const Tab = styled( Ariakit.Tab )`
 	& {
+		scroll-margin: 24px;
+		flex-grow: 1;
+		flex-shrink: 0;
 		display: inline-flex;
 		align-items: center;
 		position: relative;
 		border-radius: 0;
-		min-height: ${ space(
-			12
-		) }; // Avoid fixed height to allow for long strings that go in multiple lines.
-		height: auto;
+		height: ${ space( 12 ) };
 		background: transparent;
 		border: none;
 		box-shadow: none;
@@ -75,14 +138,14 @@ export const Tab = styled( Ariakit.Tab )`
 		margin-left: 0;
 		font-weight: 500;
 		text-align: inherit;
-		hyphens: auto;
+		color: ${ COLORS.theme.foreground };
 
 		&[aria-disabled='true'] {
 			cursor: default;
-			opacity: 0.3;
+			color: ${ COLORS.ui.textDisabled };
 		}
 
-		&:hover {
+		&:not( [aria-disabled='true'] ):hover {
 			color: ${ COLORS.theme.accent };
 		}
 
@@ -93,7 +156,7 @@ export const Tab = styled( Ariakit.Tab )`
 		}
 
 		// Focus.
-		&::before {
+		&::after {
 			content: '';
 			position: absolute;
 			top: ${ space( 3 ) };
@@ -106,7 +169,7 @@ export const Tab = styled( Ariakit.Tab )`
 			// Outline works for Windows high contrast mode as well.
 			outline: var( --wp-admin-border-width-focus ) solid
 				${ COLORS.theme.accent };
-			border-radius: 2px;
+			border-radius: ${ CONFIG.radiusSmall };
 
 			// Animation
 			opacity: 0;
@@ -116,7 +179,7 @@ export const Tab = styled( Ariakit.Tab )`
 			}
 		}
 
-		&:focus-visible::before {
+		&:focus-visible::after {
 			opacity: 1;
 		}
 	}
@@ -126,6 +189,10 @@ export const Tab = styled( Ariakit.Tab )`
 			10
 		) }; // Avoid fixed height to allow for long strings that go in multiple lines.
 	}
+
+	[aria-orientation='horizontal'] & {
+		justify-content: center;
+	}
 `;
 
 export const TabPanel = styled( Ariakit.TabPanel )`
@@ -135,7 +202,6 @@ export const TabPanel = styled( Ariakit.TabPanel )`
 	}
 
 	&:focus-visible {
-		border-radius: 2px;
 		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
 			${ COLORS.theme.accent };
 		// Windows high contrast mode.
diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx
index 4906e0088417b..a861d3294aae6 100644
--- a/packages/components/src/tabs/tablist.tsx
+++ b/packages/components/src/tabs/tablist.tsx
@@ -2,12 +2,14 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
  */
 import warning from '@wordpress/warning';
-import { forwardRef, useState } from '@wordpress/element';
+import { forwardRef, useLayoutEffect, useState } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -17,34 +19,75 @@ import { useTabsContext } from './context';
 import { TabListWrapper } from './styles';
 import type { WordPressComponentProps } from '../context';
 import clsx from 'clsx';
+import type { ElementOffsetRect } from '../utils/element-rect';
 import { useTrackElementOffsetRect } from '../utils/element-rect';
-import { useOnValueUpdate } from '../utils/hooks/use-on-value-update';
+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 );
+		if ( leftOverflow > 0 ) {
+			parent.scrollLeft = parentScroll - leftOverflow;
+		} else if ( rightOverflow > 0 ) {
+			parent.scrollLeft = parentScroll + rightOverflow;
+		}
+	}, [ margin, parent, rect ] );
+}
 
 export const TabList = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< TabListProps, 'div', false >
 >( function TabList( { children, ...otherProps }, ref ) {
-	const context = useTabsContext();
+	const { store } = useTabsContext() ?? {};
 
-	const selectedId = context?.store.useState( 'selectedId' );
-	const indicatorPosition = useTrackElementOffsetRect(
-		context?.store.item( selectedId )?.element
+	const selectedId = useStoreState( store, 'selectedId' );
+	const activeId = useStoreState( store, 'activeId' );
+	const selectOnMove = useStoreState( store, 'selectOnMove' );
+	const items = useStoreState( store, 'items' );
+	const [ parent, setParent ] = useState< HTMLElement >();
+	const refs = useMergeRefs( [ ref, setParent ] );
+	const selectedRect = useTrackElementOffsetRect(
+		store?.item( selectedId )?.element
 	);
 
-	const [ animationEnabled, setAnimationEnabled ] = useState( false );
-	useOnValueUpdate(
-		selectedId,
-		( { previousValue } ) => previousValue && setAnimationEnabled( true )
-	);
+	// Track overflow to show scroll hints.
+	const overflow = useTrackOverflow( parent, {
+		first: items?.at( 0 )?.element,
+		last: items?.at( -1 )?.element,
+	} );
 
-	if ( ! context ) {
-		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
-		return null;
-	}
-	const { store } = context;
+	// Size, position, and animate the indicator.
+	useAnimatedOffsetRect( parent, selectedRect, {
+		prefix: 'selected',
+		dataAttribute: 'indicator-animated',
+		transitionEndFilter: ( event ) => event.pseudoElement === '::before',
+	} );
 
-	const { activeId, selectOnMove } = store.useState();
-	const { setActiveId } = store;
+	// Make sure selected tab is scrolled into view.
+	useScrollRectIntoView( parent, selectedRect );
 
 	const onBlur = () => {
 		if ( ! selectOnMove ) {
@@ -56,34 +99,26 @@ export const TabList = forwardRef<
 		// that the selected tab will receive keyboard focus when tabbing back into
 		// the tablist.
 		if ( selectedId !== activeId ) {
-			setActiveId( selectedId );
+			store?.setActiveId( selectedId );
 		}
 	};
 
+	if ( ! store ) {
+		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
+		return null;
+	}
+
 	return (
 		<Ariakit.TabList
-			ref={ ref }
+			ref={ refs }
 			store={ store }
-			render={
-				<TabListWrapper
-					onTransitionEnd={ ( event ) => {
-						if ( event.pseudoElement === '::after' ) {
-							setAnimationEnabled( false );
-						}
-					} }
-				/>
-			}
+			render={ <TabListWrapper /> }
 			onBlur={ onBlur }
+			tabIndex={ -1 }
 			{ ...otherProps }
-			style={ {
-				'--indicator-left': `${ indicatorPosition.left }px`,
-				'--indicator-top': `${ indicatorPosition.top }px`,
-				'--indicator-width': `${ indicatorPosition.width }px`,
-				'--indicator-height': `${ indicatorPosition.height }px`,
-				...otherProps.style,
-			} }
 			className={ clsx(
-				animationEnabled ? 'is-animation-enabled' : '',
+				overflow.first && 'is-overflowing-first',
+				overflow.last && 'is-overflowing-last',
 				otherProps.className
 			) }
 		>
diff --git a/packages/components/src/tabs/tabpanel.tsx b/packages/components/src/tabs/tabpanel.tsx
index 439671a39ff9b..512b260968272 100644
--- a/packages/components/src/tabs/tabpanel.tsx
+++ b/packages/components/src/tabs/tabpanel.tsx
@@ -1,7 +1,11 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
+import { useStoreState } from '@ariakit/react';
 
+/**
+ * WordPress dependencies
+ */
 import { forwardRef } from '@wordpress/element';
 
 /**
@@ -22,13 +26,13 @@ export const TabPanel = forwardRef<
 	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 }`;
-	const selectedId = store.useState( ( state ) => state.selectedId );
 
 	return (
 		<StyledTabPanel
diff --git a/packages/components/src/tabs/test/index.tsx b/packages/components/src/tabs/test/index.tsx
index bbb7f591d0ffc..0563b0227d106 100644
--- a/packages/components/src/tabs/test/index.tsx
+++ b/packages/components/src/tabs/test/index.tsx
@@ -1,8 +1,9 @@
 /**
  * External dependencies
  */
-import { render, screen, waitFor } from '@testing-library/react';
-import { press, click, sleep } from '@ariakit/test';
+import { screen, waitFor } from '@testing-library/react';
+import { press, click } from '@ariakit/test';
+import { render } from '@ariakit/test/react';
 
 /**
  * WordPress dependencies
@@ -159,7 +160,7 @@ describe( 'Tabs', () => {
 
 	describe( 'Accessibility and semantics', () => {
 		it( 'should use the correct aria attributes', async () => {
-			render( <UncontrolledTabs tabs={ TABS } /> );
+			await render( <UncontrolledTabs tabs={ TABS } /> );
 
 			const tabList = screen.getByRole( 'tablist' );
 			const allTabs = screen.getAllByRole( 'tab' );
@@ -188,20 +189,18 @@ describe( 'Tabs', () => {
 	} );
 	describe( 'Focus Behavior', () => {
 		it( 'should focus on the related TabPanel when pressing the Tab key', async () => {
-			render( <UncontrolledTabs tabs={ TABS } /> );
+			await render( <UncontrolledTabs tabs={ TABS } /> );
 
 			const selectedTabPanel = await screen.findByRole( 'tabpanel' );
 
 			// Tab should initially focus the first tab in the tablist, which
 			// is Alpha.
-			await sleep();
 			await press.Tab();
 			expect(
 				await screen.findByRole( 'tab', { name: 'Alpha' } )
 			).toHaveFocus();
 
 			// By default the tabpanel should receive focus
-			await sleep();
 			await press.Tab();
 			expect( selectedTabPanel ).toHaveFocus();
 		} );
@@ -221,7 +220,7 @@ describe( 'Tabs', () => {
 					: tabObj
 			);
 
-			render(
+			await render(
 				<UncontrolledTabs tabs={ TABS_WITH_ALPHA_FOCUSABLE_FALSE } />
 			);
 
@@ -231,14 +230,12 @@ describe( 'Tabs', () => {
 
 			// Tab should initially focus the first tab in the tablist, which
 			// is Alpha.
-			await sleep();
 			await press.Tab();
 			expect(
 				await screen.findByRole( 'tab', { name: 'Alpha' } )
 			).toHaveFocus();
 			// Because the alpha tabpanel is set to `focusable: false`, pressing
 			// the Tab key should focus the button, not the tabpanel
-			await sleep();
 			await press.Tab();
 			expect( alphaButton ).toHaveFocus();
 		} );
@@ -256,14 +253,13 @@ describe( 'Tabs', () => {
 					: tabObj
 			);
 
-			render(
+			await render(
 				<ControlledTabs
 					tabs={ TABS_WITH_ALPHA_DISABLED }
 					selectedTabId={ null }
 				/>
 			);
 
-			await sleep();
 			await press.Tab();
 			expect(
 				await screen.findByRole( 'tab', { name: 'Beta' } )
@@ -284,7 +280,7 @@ describe( 'Tabs', () => {
 
 	describe( 'Tab Attributes', () => {
 		it( "should apply the tab's `className` to the tab button", async () => {
-			render( <UncontrolledTabs tabs={ TABS } /> );
+			await render( <UncontrolledTabs tabs={ TABS } /> );
 
 			expect(
 				await screen.findByRole( 'tab', { name: 'Alpha' } )
@@ -302,7 +298,7 @@ describe( 'Tabs', () => {
 		it( 'defaults to automatic tab activation (pointer clicks)', async () => {
 			const mockOnSelect = jest.fn();
 
-			render(
+			await render(
 				<UncontrolledTabs tabs={ TABS } onSelect={ mockOnSelect } />
 			);
 
@@ -335,7 +331,7 @@ describe( 'Tabs', () => {
 		it( 'defaults to automatic tab activation (arrow keys)', async () => {
 			const mockOnSelect = jest.fn();
 
-			render(
+			await render(
 				<UncontrolledTabs tabs={ TABS } onSelect={ mockOnSelect } />
 			);
 
@@ -347,7 +343,6 @@ describe( 'Tabs', () => {
 			// Tab to focus the tablist. Make sure alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 
@@ -371,7 +366,7 @@ describe( 'Tabs', () => {
 		it( 'wraps around the last/first tab when using arrow keys', async () => {
 			const mockOnSelect = jest.fn();
 
-			render(
+			await render(
 				<UncontrolledTabs tabs={ TABS } onSelect={ mockOnSelect } />
 			);
 
@@ -381,7 +376,6 @@ describe( 'Tabs', () => {
 			// Tab to focus the tablist. Make sure Alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 
@@ -405,7 +399,7 @@ describe( 'Tabs', () => {
 		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(
+			const { rerender } = await render(
 				<UncontrolledTabs tabs={ TABS } onSelect={ mockOnSelect } />
 			);
 
@@ -417,7 +411,6 @@ describe( 'Tabs', () => {
 			// Tab to focus the tablist. Make sure alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 
@@ -437,7 +430,7 @@ describe( 'Tabs', () => {
 
 			// Change orientation to `vertical`. When the orientation is vertical,
 			// left/right arrow keys are replaced by up/down arrow keys.
-			rerender(
+			await rerender(
 				<UncontrolledTabs
 					tabs={ TABS }
 					onSelect={ mockOnSelect }
@@ -502,7 +495,7 @@ describe( 'Tabs', () => {
 					: tabObj
 			);
 
-			render(
+			await render(
 				<UncontrolledTabs
 					tabs={ TABS_WITH_DELTA_DISABLED }
 					onSelect={ mockOnSelect }
@@ -517,7 +510,6 @@ describe( 'Tabs', () => {
 			// Tab to focus the tablist. Make sure Alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 			// Confirm onSelect has not been re-called
@@ -556,11 +548,10 @@ describe( 'Tabs', () => {
 		} );
 
 		it( 'should not focus the next tab when the Tab key is pressed', async () => {
-			render( <UncontrolledTabs tabs={ TABS } /> );
+			await render( <UncontrolledTabs tabs={ TABS } /> );
 
 			// Tab should initially focus the first tab in the tablist, which
 			// is Alpha.
-			await sleep();
 			await press.Tab();
 			expect(
 				await screen.findByRole( 'tab', { name: 'Alpha' } )
@@ -569,7 +560,6 @@ describe( 'Tabs', () => {
 			// Because all other tabs should have `tabindex=-1`, pressing Tab
 			// should NOT move the focus to the next tab, which is Beta.
 			// Instead, focus should go to the currently selected tabpanel (alpha).
-			await sleep();
 			await press.Tab();
 			expect(
 				await screen.findByRole( 'tabpanel', {
@@ -581,7 +571,7 @@ describe( 'Tabs', () => {
 		it( 'switches to manual tab activation when the `selectOnMove` prop is set to `false`', async () => {
 			const mockOnSelect = jest.fn();
 
-			render(
+			await render(
 				<UncontrolledTabs
 					tabs={ TABS }
 					onSelect={ mockOnSelect }
@@ -638,7 +628,7 @@ describe( 'Tabs', () => {
 	describe( 'Uncontrolled mode', () => {
 		describe( 'Without `defaultTabId` prop', () => {
 			it( 'should render first tab', async () => {
-				render( <UncontrolledTabs tabs={ TABS } /> );
+				await render( <UncontrolledTabs tabs={ TABS } /> );
 
 				expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 				expect(
@@ -646,12 +636,12 @@ describe( 'Tabs', () => {
 				).toBeInTheDocument();
 			} );
 			it( 'should fall back to first enabled tab if the active tab is removed', async () => {
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs tabs={ TABS } />
 				);
 
 				// Remove first item from `TABS` array
-				rerender( <UncontrolledTabs tabs={ TABS.slice( 1 ) } /> );
+				await rerender( <UncontrolledTabs tabs={ TABS.slice( 1 ) } /> );
 				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 			} );
 			it( 'should not load any tab if the active tab is removed and there are no enabled tabs', async () => {
@@ -667,13 +657,13 @@ describe( 'Tabs', () => {
 						: tabObj
 				);
 
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs tabs={ TABS_WITH_BETA_GAMMA_DISABLED } />
 				);
 				expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 
 				// Remove alpha
-				rerender(
+				await rerender(
 					<UncontrolledTabs
 						tabs={ TABS_WITH_BETA_GAMMA_DISABLED.slice( 1 ) }
 					/>
@@ -695,15 +685,15 @@ describe( 'Tabs', () => {
 
 		describe( 'With `defaultTabId`', () => {
 			it( 'should render the tab set by `defaultTabId` prop', async () => {
-				render(
+				await render(
 					<UncontrolledTabs tabs={ TABS } defaultTabId="beta" />
 				);
 
 				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 			} );
 
-			it( 'should not select a tab when `defaultTabId` does not match any known tab', () => {
-				render(
+			it( 'should not select a tab when `defaultTabId` does not match any known tab', async () => {
+				await render(
 					<UncontrolledTabs
 						tabs={ TABS }
 						defaultTabId="does-not-exist"
@@ -721,11 +711,11 @@ describe( 'Tabs', () => {
 				).not.toBeInTheDocument();
 			} );
 			it( 'should not change tabs when defaultTabId is changed', async () => {
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs tabs={ TABS } defaultTabId="beta" />
 				);
 
-				rerender(
+				await rerender(
 					<UncontrolledTabs tabs={ TABS } defaultTabId="alpha" />
 				);
 
@@ -735,7 +725,7 @@ describe( 'Tabs', () => {
 			it( 'should fall back to the tab associated to `defaultTabId` if the currently active tab is removed', async () => {
 				const mockOnSelect = jest.fn();
 
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs
 						tabs={ TABS }
 						defaultTabId="gamma"
@@ -749,7 +739,7 @@ describe( 'Tabs', () => {
 				expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 
-				rerender(
+				await rerender(
 					<UncontrolledTabs
 						tabs={ TABS.slice( 1 ) }
 						defaultTabId="gamma"
@@ -763,7 +753,7 @@ describe( 'Tabs', () => {
 			it( 'should fall back to the tab associated to `defaultTabId` if the currently active tab becomes disabled', async () => {
 				const mockOnSelect = jest.fn();
 
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs
 						tabs={ TABS }
 						defaultTabId="gamma"
@@ -789,7 +779,7 @@ describe( 'Tabs', () => {
 						: tabObj
 				);
 
-				rerender(
+				await rerender(
 					<UncontrolledTabs
 						tabs={ TABS_WITH_ALPHA_DISABLED }
 						defaultTabId="gamma"
@@ -801,14 +791,14 @@ describe( 'Tabs', () => {
 			} );
 
 			it( 'should have no active tabs when the tab associated to `defaultTabId` is removed while being the active tab', async () => {
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs tabs={ TABS } defaultTabId="gamma" />
 				);
 
 				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
 
 				// Remove gamma
-				rerender(
+				await rerender(
 					<UncontrolledTabs
 						tabs={ TABS.slice( 0, 2 ) }
 						defaultTabId="gamma"
@@ -827,7 +817,7 @@ describe( 'Tabs', () => {
 			} );
 
 			it( 'waits for the tab with the `defaultTabId` to be present in the `tabs` array before selecting it', async () => {
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs tabs={ TABS } defaultTabId="delta" />
 				);
 
@@ -836,7 +826,7 @@ describe( 'Tabs', () => {
 					screen.queryByRole( 'tab', { selected: true } )
 				).not.toBeInTheDocument();
 
-				rerender(
+				await rerender(
 					<UncontrolledTabs
 						tabs={ TABS_WITH_DELTA }
 						defaultTabId="delta"
@@ -864,7 +854,7 @@ describe( 'Tabs', () => {
 							: tabObj
 				);
 
-				render(
+				await render(
 					<UncontrolledTabs
 						tabs={ TABS_WITH_DELTA_DISABLED }
 						onSelect={ mockOnSelect }
@@ -880,7 +870,6 @@ describe( 'Tabs', () => {
 				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 
 				// Move focus to the tablist, make sure alpha is focused.
-				await sleep();
 				await press.Tab();
 				expect(
 					screen.getByRole( 'tab', { name: 'Alpha' } )
@@ -913,7 +902,7 @@ describe( 'Tabs', () => {
 						: tabObj
 				);
 
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs tabs={ TABS_WITH_ALPHA_DISABLED } />
 				);
 
@@ -922,7 +911,7 @@ describe( 'Tabs', () => {
 				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 
 				// Re-enable all tabs
-				rerender( <UncontrolledTabs tabs={ TABS } /> );
+				await rerender( <UncontrolledTabs tabs={ TABS } /> );
 
 				// Even if the initial tab becomes enabled again, the selected
 				// tab doesn't change.
@@ -941,7 +930,7 @@ describe( 'Tabs', () => {
 						  }
 						: tabObj
 				);
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs
 						tabs={ TABS_ONLY_GAMMA_ENABLED }
 						defaultTabId="beta"
@@ -953,7 +942,7 @@ describe( 'Tabs', () => {
 				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
 
 				// Re-enable all tabs
-				rerender(
+				await rerender(
 					<UncontrolledTabs tabs={ TABS } defaultTabId="beta" />
 				);
 
@@ -964,7 +953,7 @@ describe( 'Tabs', () => {
 
 			it( 'should select the first enabled tab when the selected tab becomes disabled', async () => {
 				const mockOnSelect = jest.fn();
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs tabs={ TABS } onSelect={ mockOnSelect } />
 				);
 
@@ -985,7 +974,7 @@ describe( 'Tabs', () => {
 				);
 
 				// Disable alpha
-				rerender(
+				await rerender(
 					<UncontrolledTabs
 						tabs={ TABS_WITH_ALPHA_DISABLED }
 						onSelect={ mockOnSelect }
@@ -997,7 +986,7 @@ describe( 'Tabs', () => {
 				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
 
 				// Re-enable all tabs
-				rerender(
+				await rerender(
 					<UncontrolledTabs tabs={ TABS } onSelect={ mockOnSelect } />
 				);
 
@@ -1009,7 +998,7 @@ describe( 'Tabs', () => {
 			it( 'should select the first enabled tab when the tab associated to `defaultTabId` becomes disabled while being the active tab', async () => {
 				const mockOnSelect = jest.fn();
 
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs
 						tabs={ TABS }
 						onSelect={ mockOnSelect }
@@ -1032,7 +1021,7 @@ describe( 'Tabs', () => {
 				);
 
 				// Disable gamma
-				rerender(
+				await rerender(
 					<UncontrolledTabs
 						tabs={ TABS_WITH_GAMMA_DISABLED }
 						onSelect={ mockOnSelect }
@@ -1045,7 +1034,7 @@ describe( 'Tabs', () => {
 				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 
 				// Re-enable all tabs
-				rerender(
+				await rerender(
 					<UncontrolledTabs
 						tabs={ TABS }
 						onSelect={ mockOnSelect }
@@ -1063,7 +1052,9 @@ describe( 'Tabs', () => {
 
 	describe( 'Controlled mode', () => {
 		it( 'should render the tab specified by the `selectedTabId` prop', async () => {
-			render( <ControlledTabs tabs={ TABS } selectedTabId="beta" /> );
+			await render(
+				<ControlledTabs tabs={ TABS } selectedTabId="beta" />
+			);
 
 			expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 			expect(
@@ -1071,7 +1062,7 @@ describe( 'Tabs', () => {
 			).toBeInTheDocument();
 		} );
 		it( 'should render the specified `selectedTabId`, and ignore the `defaultTabId` prop', async () => {
-			render(
+			await render(
 				<ControlledTabs
 					tabs={ TABS }
 					selectedTabId="gamma"
@@ -1082,7 +1073,7 @@ describe( 'Tabs', () => {
 			expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
 		} );
 		it( 'should not render any tab if `selectedTabId` does not match any known tab', async () => {
-			render(
+			await render(
 				<ControlledTabs
 					tabs={ TABS_WITH_DELTA }
 					selectedTabId="does-not-exist"
@@ -1097,12 +1088,12 @@ describe( 'Tabs', () => {
 			expect( screen.queryByRole( 'tabpanel' ) ).not.toBeInTheDocument();
 		} );
 		it( 'should not render any tab if the active tab is removed', async () => {
-			const { rerender } = render(
+			const { rerender } = await render(
 				<ControlledTabs tabs={ TABS } selectedTabId="beta" />
 			);
 
 			// Remove beta
-			rerender(
+			await rerender(
 				<ControlledTabs
 					tabs={ TABS.filter( ( tab ) => tab.tabId !== 'beta' ) }
 					selectedTabId="beta"
@@ -1123,7 +1114,9 @@ describe( 'Tabs', () => {
 			expect( screen.queryByRole( 'tabpanel' ) ).not.toBeInTheDocument();
 
 			// Restore beta
-			rerender( <ControlledTabs tabs={ TABS } selectedTabId="beta" /> );
+			await rerender(
+				<ControlledTabs tabs={ TABS } selectedTabId="beta" />
+			);
 
 			// No tab should be selected i.e. it doesn't reselect the previously
 			// removed tab.
@@ -1149,7 +1142,7 @@ describe( 'Tabs', () => {
 							: tabObj
 				);
 
-				render(
+				await render(
 					<ControlledTabs
 						tabs={ TABS_WITH_DELTA_WITH_BETA_DISABLED }
 						selectedTabId="beta"
@@ -1168,7 +1161,7 @@ describe( 'Tabs', () => {
 				).not.toBeInTheDocument();
 			} );
 			it( 'should not render any tab when the selected tab becomes disabled', async () => {
-				const { rerender } = render(
+				const { rerender } = await render(
 					<ControlledTabs tabs={ TABS } selectedTabId="beta" />
 				);
 
@@ -1186,7 +1179,7 @@ describe( 'Tabs', () => {
 						: tabObj
 				);
 
-				rerender(
+				await rerender(
 					<ControlledTabs
 						tabs={ TABS_WITH_BETA_DISABLED }
 						selectedTabId="beta"
@@ -1206,7 +1199,7 @@ describe( 'Tabs', () => {
 				).not.toBeInTheDocument();
 
 				// re-enable all tabs
-				rerender(
+				await rerender(
 					<ControlledTabs tabs={ TABS } selectedTabId="beta" />
 				);
 
@@ -1226,7 +1219,7 @@ describe( 'Tabs', () => {
 				'and `selectOnMove` is %s',
 				( selectOnMove ) => {
 					it( 'should continue to handle arrow key navigation properly', async () => {
-						const { rerender } = render(
+						const { rerender } = await render(
 							<ControlledTabs
 								tabs={ TABS }
 								selectedTabId="beta"
@@ -1234,12 +1227,6 @@ describe( 'Tabs', () => {
 							/>
 						);
 
-						// Due to the timing of the component re-rendering, we
-						// need to force a delay to ensure the test doesn't run
-						// the upcoming assertions too early.
-						// see https://github.com/WordPress/gutenberg/pull/58629#issuecomment-1924875249
-						await sleep();
-
 						// Tab key should focus the currently selected tab, which is Beta.
 						await press.Tab();
 						await waitFor( async () =>
@@ -1249,7 +1236,7 @@ describe( 'Tabs', () => {
 						);
 						expect( await getSelectedTab() ).toHaveFocus();
 
-						rerender(
+						await rerender(
 							<ControlledTabs
 								tabs={ TABS }
 								selectedTabId="gamma"
@@ -1275,7 +1262,7 @@ describe( 'Tabs', () => {
 					} );
 
 					it( 'should focus the correct tab when tabbing out and back into the tablist', async () => {
-						const { rerender } = render(
+						const { rerender } = await render(
 							<>
 								<button>Focus me</button>
 								<ControlledTabs
@@ -1287,16 +1274,14 @@ describe( 'Tabs', () => {
 						);
 
 						// Tab key should focus the currently selected tab, which is Beta.
-						await sleep();
 						await press.Tab();
-						await sleep();
 						await press.Tab();
 						expect( await getSelectedTab() ).toHaveTextContent(
 							'Beta'
 						);
 						expect( await getSelectedTab() ).toHaveFocus();
 
-						rerender(
+						await rerender(
 							<>
 								<button>Focus me</button>
 								<ControlledTabs
@@ -1324,7 +1309,6 @@ describe( 'Tabs', () => {
 						).toHaveFocus();
 
 						// Press tab, move focus back to the tablist
-						await sleep();
 						await press.Tab();
 
 						const betaTab = screen.getByRole( 'tab', {
@@ -1344,9 +1328,10 @@ describe( 'Tabs', () => {
 
 		describe( 'When `selectOnMove` is `true`', () => {
 			it( 'should automatically select a newly focused tab', async () => {
-				render( <ControlledTabs tabs={ TABS } selectedTabId="beta" /> );
+				await render(
+					<ControlledTabs tabs={ TABS } selectedTabId="beta" />
+				);
 
-				await sleep();
 				await press.Tab();
 
 				// Tab key should focus the currently selected tab, which is Beta.
@@ -1361,7 +1346,7 @@ describe( 'Tabs', () => {
 		} );
 		describe( 'When `selectOnMove` is `false`', () => {
 			it( 'should apply focus without automatically changing the selected tab', async () => {
-				render(
+				await render(
 					<ControlledTabs
 						tabs={ TABS }
 						selectedTabId="beta"
@@ -1372,7 +1357,6 @@ describe( 'Tabs', () => {
 				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 
 				// Tab key should focus the currently selected tab, which is Beta.
-				await sleep();
 				await press.Tab();
 				await waitFor( async () =>
 					expect(
@@ -1407,7 +1391,7 @@ describe( 'Tabs', () => {
 	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();
 
-		render(
+		await render(
 			<Tabs>
 				<Tabs.TabList>
 					{ TABS_WITH_DELTA.map( ( tabObj ) => (
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 0000000000000..5f6504e687521
--- /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 2a95e4c46864b..0b6e2d4ebc684 100644
--- a/packages/components/src/text-control/README.md
+++ b/packages/components/src/text-control/README.md
@@ -62,6 +62,7 @@ const MyTextControl = () => {
 
 	return (
 		<TextControl
+			__nextHasNoMarginBottom
 			label="Additional CSS Class"
 			value={ className }
 			onChange={ ( value ) => setClassName( value ) }
@@ -126,6 +127,14 @@ A function that receives the value of the input.
 -   Type: `function`
 -   Required: Yes
 
+#### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 -   To offer users more constrained options for input, use SelectControl, RadioControl, CheckboxControl, or RangeControl.
diff --git a/packages/components/src/text-control/index.tsx b/packages/components/src/text-control/index.tsx
index e964f918c119e..ea2d2c17bb9cf 100644
--- a/packages/components/src/text-control/index.tsx
+++ b/packages/components/src/text-control/index.tsx
@@ -41,6 +41,7 @@ function UnforwardedTextControl(
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="TextControl"
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
 			id={ id }
@@ -75,6 +76,7 @@ function UnforwardedTextControl(
  *
  *   return (
  *     <TextControl
+ *       __nextHasNoMarginBottom
  *       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
index ddc8af7a9f2b3..bebdb2caf75f6 100644
--- a/packages/components/src/text-control/stories/index.story.tsx
+++ b/packages/components/src/text-control/stories/index.story.tsx
@@ -52,7 +52,9 @@ const DefaultTemplate: StoryFn< typeof TextControl > = ( {
 export const Default: StoryFn< typeof TextControl > = DefaultTemplate.bind(
 	{}
 );
-Default.args = {};
+Default.args = {
+	__nextHasNoMarginBottom: true,
+};
 
 export const WithLabelAndHelpText: StoryFn< typeof TextControl > =
 	DefaultTemplate.bind( {} );
diff --git a/packages/components/src/text-control/style.scss b/packages/components/src/text-control/style.scss
index 1e8477b255b9b..5ae2a90b82773 100644
--- a/packages/components/src/text-control/style.scss
+++ b/packages/components/src/text-control/style.scss
@@ -20,5 +20,11 @@
 
 	&.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
index fc048b93992f0..19b17cae44361 100644
--- a/packages/components/src/text-control/test/text-control.tsx
+++ b/packages/components/src/text-control/test/text-control.tsx
@@ -6,7 +6,11 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import TextControl from '..';
+import _TextControl from '..';
+
+const TextControl = ( props: React.ComponentProps< typeof _TextControl > ) => {
+	return <_TextControl { ...props } __nextHasNoMarginBottom />;
+};
 
 const noop = () => {};
 
diff --git a/packages/components/src/text/styles.ts b/packages/components/src/text/styles.ts
index c7d4855279593..e777ed4f0941d 100644
--- a/packages/components/src/text/styles.ts
+++ b/packages/components/src/text/styles.ts
@@ -35,7 +35,7 @@ export const muted = css`
 export const highlighterText = css`
 	mark {
 		background: ${ COLORS.alert.yellow };
-		border-radius: 2px;
+		border-radius: ${ CONFIG.radiusSmall };
 		box-shadow:
 			0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,
 			0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;
diff --git a/packages/components/src/textarea-control/index.tsx b/packages/components/src/textarea-control/index.tsx
index 3b96e11b0621b..e7528510667b7 100644
--- a/packages/components/src/textarea-control/index.tsx
+++ b/packages/components/src/textarea-control/index.tsx
@@ -35,6 +35,7 @@ function UnforwardedTextareaControl(
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="TextareaControl"
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
 			id={ id }
diff --git a/packages/components/src/textarea-control/stories/index.story.tsx b/packages/components/src/textarea-control/stories/index.story.tsx
index e227519a06938..a8e5dc036248d 100644
--- a/packages/components/src/textarea-control/stories/index.story.tsx
+++ b/packages/components/src/textarea-control/stories/index.story.tsx
@@ -51,6 +51,8 @@ const Template: StoryFn< typeof TextareaControl > = ( {
 
 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/styles/textarea-control-styles.ts b/packages/components/src/textarea-control/styles/textarea-control-styles.ts
index 046e17816eff2..022ce3560ea3a 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/toggle-control/README.md b/packages/components/src/toggle-control/README.md
index 3a77ef6942d2e..cf480360265ed 100644
--- a/packages/components/src/toggle-control/README.md
+++ b/packages/components/src/toggle-control/README.md
@@ -15,6 +15,7 @@ const MyToggleControl = () => {
 
 	return (
 		<ToggleControl
+			__nextHasNoMarginBottom
 			label="Fixed Background"
 			help={
 				hasFixedBackground
@@ -78,3 +79,11 @@ The class that will be added with `components-base-control` and `components-togg
 
 -		Type: `String`
 -		Required: No
+
+### `__nextHasNoMarginBottom`
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/toggle-control/index.tsx b/packages/components/src/toggle-control/index.tsx
index ed62aea7755cd..d2ee234a9695f 100644
--- a/packages/components/src/toggle-control/index.tsx
+++ b/packages/components/src/toggle-control/index.tsx
@@ -3,12 +3,14 @@
  */
 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
@@ -22,27 +24,7 @@ import { HStack } from '../h-stack';
 import { useCx } from '../utils';
 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(
+function UnforwardedToggleControl(
 	{
 		__nextHasNoMarginBottom,
 		label,
@@ -67,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' ) {
@@ -87,11 +77,17 @@ 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 }
@@ -103,7 +99,9 @@ export function ToggleControl(
 				<FlexBlock
 					as="label"
 					htmlFor={ id }
-					className="components-toggle-control__label"
+					className={ clsx( 'components-toggle-control__label', {
+						'is-disabled': disabled,
+					} ) }
 				>
 					{ label }
 				</FlexBlock>
@@ -112,4 +110,27 @@ export function ToggleControl(
 	);
 }
 
-export default forwardRef( ToggleControl );
+/**
+ * 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
index b8043b8f48e52..97723aa207a39 100644
--- a/packages/components/src/toggle-control/stories/index.story.tsx
+++ b/packages/components/src/toggle-control/stories/index.story.tsx
@@ -48,6 +48,7 @@ const Template: StoryFn< typeof ToggleControl > = ( {
 
 export const Default = Template.bind( {} );
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	label: 'Enable something',
 };
 
diff --git a/packages/components/src/toggle-control/style.scss b/packages/components/src/toggle-control/style.scss
new file mode 100644
index 0000000000000..68733b53a9bc9
--- /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 cc89031d9affa..b0eec2aca6663 100644
--- a/packages/components/src/toggle-control/test/index.tsx
+++ b/packages/components/src/toggle-control/test/index.tsx
@@ -6,7 +6,13 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import ToggleControl from '..';
+import _ToggleControl from '..';
+
+const ToggleControl = (
+	props: React.ComponentProps< typeof _ToggleControl >
+) => {
+	return <_ToggleControl { ...props } __nextHasNoMarginBottom />;
+};
 
 describe( 'ToggleControl', () => {
 	it( 'should label the toggle', () => {
diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
index cdfa4b1883cc1..d2d98eaba85e6 100644
--- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
@@ -13,10 +13,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -33,7 +29,7 @@ exports[`ToggleGroupControl controlled 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;
 }
@@ -64,6 +60,55 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   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;
@@ -88,7 +133,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
@@ -154,17 +199,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   line-height: 1;
 }
 
-.emotion-15 {
-  background: #1e1e1e;
-  border-radius: 2px;
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  outline: 2px solid transparent;
-  outline-offset: -3px;
-}
-
-.emotion-18 {
+.emotion-17 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -175,7 +210,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
@@ -208,22 +243,22 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-18 {
+  .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-18::-moz-focus-inner {
+.emotion-17::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-18[disabled] {
+.emotion-17[disabled] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-18:active {
+.emotion-17:active {
   background: #fff;
 }
 
@@ -258,7 +293,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             aria-checked="true"
             aria-label="Uppercase"
             class="emotion-12 components-toggle-group-control-option-base"
-            data-active-item=""
+            data-active-item="true"
             data-value="uppercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -284,12 +319,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
               </svg>
             </div>
           </button>
-          <div>
-            <div
-              class="emotion-15"
-              role="presentation"
-            />
-          </div>
         </div>
         <div
           class="emotion-10 emotion-11"
@@ -297,7 +326,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
           <button
             aria-checked="false"
             aria-label="Lowercase"
-            class="emotion-18 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"
@@ -349,10 +378,6 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -369,7 +394,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }
@@ -400,6 +425,55 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   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;
@@ -424,7 +498,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
@@ -573,10 +647,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -593,7 +663,7 @@ exports[`ToggleGroupControl uncontrolled 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;
 }
@@ -624,6 +694,55 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   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;
@@ -648,7 +767,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
@@ -714,17 +833,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   line-height: 1;
 }
 
-.emotion-15 {
-  background: #1e1e1e;
-  border-radius: 2px;
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  outline: 2px solid transparent;
-  outline-offset: -3px;
-}
-
-.emotion-18 {
+.emotion-17 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -735,7 +844,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
@@ -768,22 +877,22 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-18 {
+  .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-18::-moz-focus-inner {
+.emotion-17::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-18[disabled] {
+.emotion-17[disabled] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-18:active {
+.emotion-17:active {
   background: #fff;
 }
 
@@ -818,7 +927,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             aria-checked="true"
             aria-label="Uppercase"
             class="emotion-12 components-toggle-group-control-option-base"
-            data-active-item=""
+            data-active-item="true"
             data-value="uppercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -844,12 +953,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
               </svg>
             </div>
           </button>
-          <div>
-            <div
-              class="emotion-15"
-              role="presentation"
-            />
-          </div>
         </div>
         <div
           class="emotion-10 emotion-11"
@@ -857,7 +960,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
           <button
             aria-checked="false"
             aria-label="Lowercase"
-            class="emotion-18 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"
@@ -903,10 +1006,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -923,7 +1022,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }
@@ -954,6 +1053,55 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   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;
@@ -978,7 +1126,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
diff --git a/packages/components/src/toggle-group-control/test/index.tsx b/packages/components/src/toggle-group-control/test/index.tsx
index 098407feef149..170db01ae523c 100644
--- a/packages/components/src/toggle-group-control/test/index.tsx
+++ b/packages/components/src/toggle-group-control/test/index.tsx
@@ -15,7 +15,7 @@ import { formatLowercase, formatUppercase } from '@wordpress/icons';
  */
 import Button from '../../button';
 import {
-	ToggleGroupControl,
+	ToggleGroupControl as _ToggleGroupControl,
 	ToggleGroupControlOption,
 	ToggleGroupControlOptionIcon,
 } from '../index';
@@ -27,6 +27,10 @@ const hoverOutside = async () => {
 	await hover( document.body, { clientX: 10, clientY: 10 } );
 };
 
+const ToggleGroupControl = ( props: ToggleGroupControlProps ) => {
+	return <_ToggleGroupControl { ...props } __nextHasNoMarginBottom />;
+};
+
 const ControlledToggleGroupControl = ( {
 	value: valueProp,
 	onChange,
@@ -341,11 +345,9 @@ describe.each( [
 					name: 'R',
 				} );
 
-				await sleep();
 				await press.Tab();
 				expect( rigas ).toHaveFocus();
 
-				await sleep();
 				await press.Tab();
 
 				// When in controlled mode, there is an additional "Reset" button.
@@ -372,7 +374,6 @@ describe.each( [
 					</Component>
 				);
 
-				await sleep();
 				await press.Tab();
 
 				expect(
@@ -448,7 +449,6 @@ describe.each( [
 					</Component>
 				);
 
-				await sleep();
 				await press.Tab();
 				expect(
 					screen.getByRole( 'button', {
@@ -457,7 +457,6 @@ describe.each( [
 					} )
 				).toHaveFocus();
 
-				await sleep();
 				await press.Tab();
 				expect(
 					screen.getByRole( 'button', {
@@ -490,7 +489,6 @@ describe.each( [
 					</Component>
 				);
 
-				await sleep();
 				await press.Tab();
 
 				expect(
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 30d74e68913f2..d8604c59c540f 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
@@ -3,13 +3,12 @@
  */
 import type { ForwardedRef } from 'react';
 import * as Ariakit from '@ariakit/react';
-import { motion } from 'framer-motion';
 
 /**
  * WordPress dependencies
  */
-import { useReducedMotion, useInstanceId } from '@wordpress/compose';
-import { useMemo } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { useLayoutEffect, useMemo, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -27,12 +26,6 @@ import Tooltip from '../../tooltip';
 
 const { ButtonContentView, LabelView } = styles;
 
-const REDUCED_MOTION_TRANSITION_CONFIG = {
-	duration: 0,
-};
-
-const LAYOUT_ID = 'toggle-group-backdrop-shared-layout-id';
-
 const WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {
 	if ( showTooltip && text ) {
 		return (
@@ -58,7 +51,6 @@ function ToggleGroupControlOptionBase(
 	>,
 	forwardedRef: ForwardedRef< any >
 ) {
-	const shouldReduceMotion = useReducedMotion();
 	const toggleGroupControlContext = useToggleGroupControlContext();
 
 	const id = useInstanceId(
@@ -107,7 +99,6 @@ function ToggleGroupControlOptionBase(
 			),
 		[ cx, isDeselectable, isIcon, isPressed, size, className ]
 	);
-	const backdropClasses = useMemo( () => cx( styles.backdropView ), [ cx ] );
 
 	const buttonOnClick = () => {
 		if ( isDeselectable && isPressed ) {
@@ -124,8 +115,15 @@ function ToggleGroupControlOptionBase(
 		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' ] }
@@ -163,21 +161,6 @@ function ToggleGroupControlOptionBase(
 					</Ariakit.Radio>
 				) }
 			</WithToolTip>
-			{ /* Animated backdrop using framer motion's shared layout animation */ }
-			{ isPressed ? (
-				<motion.div layout layoutRoot>
-					<motion.div
-						className={ backdropClasses }
-						transition={
-							shouldReduceMotion
-								? REDUCED_MOTION_TRANSITION_CONFIG
-								: undefined
-						}
-						role="presentation"
-						layoutId={ LAYOUT_ID }
-					/>
-				</motion.div>
-			) : null }
 		</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 999a25df8bdd4..c0248f9b3f7f2 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
@@ -37,7 +37,7 @@ export const buttonView = ( {
 	appearance: none;
 	background: transparent;
 	border: none;
-	border-radius: ${ CONFIG.controlBorderRadius };
+	border-radius: ${ CONFIG.radiusXSmall };
 	color: ${ COLORS.gray[ 700 ] };
 	fill: currentColor;
 	cursor: pointer;
@@ -70,7 +70,7 @@ export const buttonView = ( {
 	}
 
 	&:active {
-		background: ${ CONFIG.toggleGroupControlBackgroundColor };
+		background: ${ CONFIG.controlBackgroundColor };
 	}
 
 	${ isDeselectable && deselectable }
@@ -119,14 +119,3 @@ const isIconStyles = ( {
 		padding-right: 0;
 	`;
 };
-
-export const backdropView = css`
-	background: ${ COLORS.gray[ 900 ] };
-	border-radius: ${ CONFIG.controlBorderRadius };
-	position: absolute;
-	inset: 0;
-	z-index: 1;
-	// Windows High Contrast mode will show this outline, but not the box-shadow.
-	outline: 2px solid transparent;
-	outline-offset: -3px;
-`;
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 8b96470e21301..a0e3a44cf7460 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
@@ -17,7 +17,7 @@ import { formatLowercase, formatUppercase } from '@wordpress/icons';
 
 function Example() {
 	return (
-		<ToggleGroupControl>
+		<ToggleGroupControl __nextHasNoMarginBottom>
 			<ToggleGroupControlOptionIcon
 				value="uppercase"
 				icon={ formatUppercase }
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx
index ec009d82344c3..352b4acee7184 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx
@@ -51,20 +51,20 @@ function UnforwardedToggleGroupControlOptionIcon(
  * import { formatLowercase, formatUppercase } from '@wordpress/icons';
  *
  * function Example() {
- *	return (
- *		<ToggleGroupControl>
- *			<ToggleGroupControlOptionIcon
- *				value="uppercase"
- *				label="Uppercase"
- *				icon={ formatUppercase }
- *			/>
- *			<ToggleGroupControlOptionIcon
- *				value="lowercase"
- *				label="Lowercase"
- *				icon={ formatLowercase }
- *			/>
- *		</ToggleGroupControl>
- *	);
+ *  return (
+ *    <ToggleGroupControl __nextHasNoMarginBottom>
+ *      <ToggleGroupControlOptionIcon
+ *        value="uppercase"
+ *        label="Uppercase"
+ *        icon={ formatUppercase }
+ *      />
+ *      <ToggleGroupControlOptionIcon
+ *        value="lowercase"
+ *        label="Lowercase"
+ *        icon={ formatLowercase }
+ *      />
+ *    </ToggleGroupControl>
+ *  );
  * }
  * ```
  */
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option/README.md b/packages/components/src/toggle-group-control/toggle-group-control-option/README.md
index 7f9f4d32f29fc..2e7c55bd68836 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option/README.md
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option/README.md
@@ -17,7 +17,12 @@ import {
 
 function Example() {
 	return (
-		<ToggleGroupControl label="my label" value="vertical" isBlock>
+		<ToggleGroupControl
+			label="my label"
+			value="vertical"
+			isBlock
+			__nextHasNoMarginBottom
+		>
 			<ToggleGroupControlOption
 				value="horizontal"
 				label="Horizontal"
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
index e4b9cff4b8033..b71d37e81cf25 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
@@ -48,7 +48,12 @@ function UnforwardedToggleGroupControlOption(
  *
  * function Example() {
  *   return (
- *     <ToggleGroupControl label="my label" value="vertical" isBlock>
+ *     <ToggleGroupControl
+ *       label="my label"
+ *       value="vertical"
+ *       isBlock
+ *       __nextHasNoMarginBottom
+ *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
  *       <ToggleGroupControlOption value="vertical" label="Vertical" />
  *     </ToggleGroupControl>
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/README.md b/packages/components/src/toggle-group-control/toggle-group-control/README.md
index 64e0489f4171b..ca5c5d14eb6b5 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/README.md
+++ b/packages/components/src/toggle-group-control/toggle-group-control/README.md
@@ -20,7 +20,12 @@ import {
 
 function Example() {
 	return (
-		<ToggleGroupControl label="my label" value="vertical" isBlock>
+		<ToggleGroupControl
+			label="my label"
+			value="vertical"
+			isBlock
+			__nextHasNoMarginBottom
+		>
 			<ToggleGroupControlOption value="horizontal" label="Horizontal" />
 			<ToggleGroupControlOption value="vertical" label="Vertical" />
 		</ToggleGroupControl>
@@ -82,3 +87,17 @@ Callback when a segment is selected.
 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`
\ No newline at end of file
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 b3f56bccd07c5..7ce762b6e71df 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
@@ -26,6 +26,7 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 		size,
 		value: valueProp,
 		id: idProp,
+		setSelectedElement,
 		...otherProps
 	}: WordPressComponentProps<
 		ToggleGroupControlMainControlProps,
@@ -54,16 +55,23 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 	} );
 
 	const groupContextValue = useMemo(
-		() =>
-			( {
-				baseId,
-				value: selectedValue,
-				setValue: setSelectedValue,
-				isBlock: ! isAdaptiveWidth,
-				isDeselectable: true,
-				size,
-			} ) as ToggleGroupControlContextProps,
-		[ baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size ]
+		(): ToggleGroupControlContextProps => ( {
+			baseId,
+			value: selectedValue,
+			setValue: setSelectedValue,
+			isBlock: ! isAdaptiveWidth,
+			isDeselectable: true,
+			size,
+			setSelectedElement,
+		} ),
+		[
+			baseId,
+			selectedValue,
+			setSelectedValue,
+			isAdaptiveWidth,
+			size,
+			setSelectedElement,
+		]
 	);
 
 	return (
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 c363cb6577d83..342f9f128defd 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
@@ -3,12 +3,14 @@
  */
 import type { ForwardedRef } from 'react';
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
 import { forwardRef, useMemo } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -31,6 +33,7 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 		size,
 		value: valueProp,
 		id: idProp,
+		setSelectedElement,
 		...otherProps
 	}: WordPressComponentProps<
 		ToggleGroupControlMainControlProps,
@@ -64,21 +67,31 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 		defaultValue,
 		value,
 		setValue: wrappedOnChangeProp,
+		rtl: isRTL(),
 	} );
 
-	const selectedValue = radio.useState( 'value' );
+	const selectedValue = useStoreState( radio, 'value' );
 	const setValue = radio.setValue;
 
 	const groupContextValue = useMemo(
-		() =>
-			( {
-				baseId,
-				isBlock: ! isAdaptiveWidth,
-				size,
-				value: selectedValue,
-				setValue,
-			} ) as ToggleGroupControlContextProps,
-		[ baseId, isAdaptiveWidth, size, selectedValue, setValue ]
+		(): ToggleGroupControlContextProps => ( {
+			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,
+			selectedValue,
+			setSelectedElement,
+			setValue,
+			size,
+		]
 	);
 
 	return (
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 520b2c414d70b..0b4c22d7df929 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,13 +2,11 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-import { LayoutGroup } from 'framer-motion';
 
 /**
  * WordPress dependencies
  */
-import { useInstanceId } from '@wordpress/compose';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,6 +20,9 @@ import { VisualLabelWrapper } from './styles';
 import * as styles from './styles';
 import { ToggleGroupControlAsRadioGroup } from './as-radio-group';
 import { ToggleGroupControlAsButtonGroup } from './as-button-group';
+import { useTrackElementOffsetRect } from '../../utils/element-rect';
+import { useMergeRefs } from '@wordpress/compose';
+import { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';
 
 function UnconnectedToggleGroupControl(
 	props: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,
@@ -44,10 +45,21 @@ function UnconnectedToggleGroupControl(
 		...otherProps
 	} = useContextSystem( props, 'ToggleGroupControl' );
 
-	const baseId = useInstanceId( ToggleGroupControl, 'toggle-group-control' );
 	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 ? selectedElement : undefined
+	);
+	useAnimatedOffsetRect( controlElement, selectedRect, {
+		prefix: 'selected',
+		dataAttribute: 'indicator-animated',
+		transitionEndFilter: ( event ) => event.pseudoElement === '::before',
+	} );
+
 	const cx = useCx();
 
 	const classes = useMemo(
@@ -72,6 +84,7 @@ function UnconnectedToggleGroupControl(
 		<BaseControl
 			help={ help }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="ToggleGroupControl"
 		>
 			{ ! hideLabelFromVision && (
 				<VisualLabelWrapper>
@@ -80,15 +93,16 @@ function UnconnectedToggleGroupControl(
 			) }
 			<MainControl
 				{ ...otherProps }
+				setSelectedElement={ setSelectedElement }
 				className={ classes }
 				isAdaptiveWidth={ isAdaptiveWidth }
 				label={ label }
 				onChange={ onChange }
-				ref={ forwardedRef }
+				ref={ refs }
 				size={ normalizedSize }
 				value={ value }
 			>
-				<LayoutGroup id={ baseId }>{ children }</LayoutGroup>
+				{ children }
 			</MainControl>
 		</BaseControl>
 	);
@@ -115,7 +129,12 @@ function UnconnectedToggleGroupControl(
  *
  * function Example() {
  *   return (
- *     <ToggleGroupControl label="my label" value="vertical" isBlock>
+ *     <ToggleGroupControl
+ *       label="my label"
+ *       value="vertical"
+ *       isBlock
+ *       __nextHasNoMarginBottom
+ *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
  *       <ToggleGroupControlOption value="vertical" label="Vertical" />
  *     </ToggleGroupControl>
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 7310024706e1d..bb6efe476b2b2 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
@@ -19,13 +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;
 	position: relative;
 
 	${ 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' ] ) => {
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
index fe2b84c5b8123..0cc6dcd743b11 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/utils.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control/utils.ts
@@ -21,23 +21,23 @@ type ValueProp = ToggleGroupControlProps[ 'value' ];
 export function useComputeControlledOrUncontrolledValue(
 	valueProp: ValueProp
 ): { value: ValueProp; defaultValue: ValueProp } {
-	const isInitialRender = useRef( true );
+	const isInitialRenderRef = useRef( true );
 	const prevValueProp = usePrevious( valueProp );
-	const prevIsControlled = useRef( false );
+	const prevIsControlledRef = useRef( false );
 
 	useEffect( () => {
-		if ( isInitialRender.current ) {
-			isInitialRender.current = false;
+		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 =
-		prevIsControlled.current ||
-		( ! isInitialRender.current && prevValueProp !== valueProp );
+		prevIsControlledRef.current ||
+		( ! isInitialRenderRef.current && prevValueProp !== valueProp );
 	useEffect( () => {
-		prevIsControlled.current = isControlled;
+		prevIsControlledRef.current = isControlled;
 	}, [ isControlled ] );
 
 	if ( isControlled ) {
diff --git a/packages/components/src/toggle-group-control/types.ts b/packages/components/src/toggle-group-control/types.ts
index d49ef3cbb77cb..2a4af680263db 100644
--- a/packages/components/src/toggle-group-control/types.ts
+++ b/packages/components/src/toggle-group-control/types.ts
@@ -137,9 +137,11 @@ export type ToggleGroupControlContextProps = {
 	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'
->;
+> &
+	Pick< ToggleGroupControlContextProps, 'setSelectedElement' >;
diff --git a/packages/components/src/toolbar/toolbar/style.scss b/packages/components/src/toolbar/toolbar/style.scss
index eccfc3bf705cb..c0cabacb84c77 100644
--- a/packages/components/src/toolbar/toolbar/style.scss
+++ b/packages/components/src/toolbar/toolbar/style.scss
@@ -1,7 +1,7 @@
 .components-accessible-toolbar {
 	display: inline-flex;
 	border: $border-width solid $gray-900;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	flex-shrink: 0;
 
 	& > .components-toolbar-group:last-child {
@@ -47,7 +47,7 @@
 			content: "";
 			position: absolute;
 			display: block;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
 			height: $grid-unit-40;
 
 			// Position the focus rectangle.
diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts
index 1da1003c0462e..11536e98a128a 100644
--- a/packages/components/src/tools-panel/styles.ts
+++ b/packages/components/src/tools-panel/styles.ts
@@ -21,7 +21,7 @@ const toolsPanelGrid = {
 		grid-template-columns: ${ `repeat( ${ columns }, minmax(0, 1fr) )` };
 	`,
 	spacing: css`
-		column-gap: ${ space( 2 ) };
+		column-gap: ${ space( 4 ) };
 		row-gap: ${ space( 4 ) };
 	`,
 	item: {
diff --git a/packages/components/src/tools-panel/tools-panel/README.md b/packages/components/src/tools-panel/tools-panel/README.md
index df41b623eefb6..1daa7537335e1 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 }
@@ -154,8 +154,8 @@ 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
-- Default: `false`
+-   Required: No
+-   Default: `false`
 
 ### `dropdownMenuProps`: `{}`
 
@@ -176,7 +176,7 @@ The heading level of the panel's header.
 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 | null`
 
@@ -185,13 +185,13 @@ 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`: `( filters?: ResetAllFilter[] ) => void`
 
 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`
 
@@ -201,5 +201,5 @@ 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.
 
-- Required: No
-- Default: `false`
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/tools-panel/tools-panel/hook.ts b/packages/components/src/tools-panel/tools-panel/hook.ts
index 8742f1c494ce1..583a079ab2002 100644
--- a/packages/components/src/tools-panel/tools-panel/hook.ts
+++ b/packages/components/src/tools-panel/tools-panel/hook.ts
@@ -5,8 +5,8 @@ import {
 	useCallback,
 	useEffect,
 	useMemo,
+	useReducer,
 	useRef,
-	useState,
 } from '@wordpress/element';
 
 /**
@@ -27,14 +27,40 @@ import type {
 
 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 newMenuItems: ToolsPanelMenuItems = { default: {}, optional: {} };
-	const menuItems: ToolsPanelMenuItems = { default: {}, optional: {} };
+	const newMenuItems: ToolsPanelMenuItems = emptyMenuItems();
+	const menuItems: ToolsPanelMenuItems = emptyMenuItems();
 
 	panelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {
 		const group = isShownByDefault ? 'default' : 'optional';
@@ -75,9 +101,149 @@ const generateMenuItems = ( {
 	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' >
@@ -94,117 +260,57 @@ export function useToolsPanel(
 		...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 [ menuItemOrder, setMenuItemOrder ] = useState< string[] >( [] );
-	const [ resetAllFilters, setResetAllFilters ] = useState<
-		ResetAllFilter[]
-	>( [] );
-
-	const registerPanelItem = useCallback(
-		( item: ToolsPanelItem ) => {
-			// Add item to panel items.
-			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 ];
-			} );
-
-			// Track the initial order of item registration. This is used for
-			// maintaining menu item order later.
-			setMenuItemOrder( ( items ) => {
-				if ( items.includes( item.label ) ) {
-					return items;
-				}
+	const [ { panelItems, menuItems }, panelDispatch ] = useReducer(
+		panelReducer,
+		undefined,
+		emptyState
+	);
 
-				return [ ...items, item.label ];
-			} );
-		},
-		[ setPanelItems, setMenuItemOrder ]
+	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;
-			} );
-		},
-		[ setPanelItems ]
-	);
-
-	const registerResetAllFilter = useCallback(
-		( newFilter: ResetAllFilter ) => {
-			setResetAllFilters( ( filters ) => {
-				return [ ...filters, newFilter ];
-			} );
-		},
-		[ setResetAllFilters ]
-	);
+	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(
-		( filterToRemove: ResetAllFilter ) => {
-			setResetAllFilters( ( filters ) => {
-				return filters.filter(
-					( filter ) => filter !== filterToRemove
-				);
-			} );
+		( filter: ResetAllFilter ) => {
+			dispatchResetAllFilters( { type: 'UNREGISTER', filter } );
 		},
-		[ setResetAllFilters ]
+		[]
 	);
 
-	// 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,
-				menuItemOrder,
-			} );
-			return items;
-		} );
-	}, [ panelItems, setMenuItems, menuItemOrder ] );
-
 	// 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.
@@ -214,38 +320,24 @@ export function useToolsPanel(
 			label: string,
 			group: ToolsPanelMenuItemKey = 'default'
 		) => {
-			setMenuItems( ( items ) => {
-				const newState = {
-					...items,
-					[ group ]: {
-						...items[ group ],
-						[ label ]: value,
-					},
-				};
-				return newState;
-			} );
+			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( () => {
@@ -253,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 ),
@@ -263,65 +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;
+			isResettingRef.current = true;
 			resetAll( resetAllFilters );
 		}
 
 		// Turn off display of all non-default items.
-		const resetMenuItems = generateMenuItems( {
-			panelItems,
-			menuItemOrder,
-			shouldReset: true,
-		} );
-		setMenuItems( resetMenuItems );
-	}, [ panelItems, resetAllFilters, resetAll, setMenuItems, menuItemOrder ] );
+		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;
@@ -332,6 +388,8 @@ export function useToolsPanel(
 		[ ...panelItems ].reverse()
 	);
 
+	const hasMenuItems = panelItems.length > 0;
+
 	const panelContext = useMemo(
 		() => ( {
 			areAllOptionalControlsHidden,
@@ -339,8 +397,8 @@ export function useToolsPanel(
 			deregisterResetAllFilter,
 			firstDisplayedItem,
 			flagItemCustomization,
-			hasMenuItems: !! panelItems.length,
-			isResetting: isResetting.current,
+			hasMenuItems,
+			isResetting: isResettingRef.current,
 			lastDisplayedItem,
 			menuItems,
 			panelId,
@@ -359,7 +417,7 @@ export function useToolsPanel(
 			lastDisplayedItem,
 			menuItems,
 			panelId,
-			panelItems,
+			hasMenuItems,
 			registerResetAllFilter,
 			registerPanelItem,
 			shouldRenderPlaceholderItems,
diff --git a/packages/components/src/tooltip/index.tsx b/packages/components/src/tooltip/index.tsx
index 1b6285a4ac09c..7ce9311fc942e 100644
--- a/packages/components/src/tooltip/index.tsx
+++ b/packages/components/src/tooltip/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 import clsx from 'clsx';
 
 /**
@@ -13,6 +14,7 @@ import {
 	useContext,
 	createContext,
 	forwardRef,
+	cloneElement,
 } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 
@@ -92,6 +94,7 @@ function UnforwardedTooltip(
 		placement: computedPlacement,
 		showTimeout: delay,
 	} );
+	const mounted = useStoreState( tooltipStore, 'mounted' );
 
 	if ( isNestedInTooltip ) {
 		return isOnlyChild ? (
@@ -101,12 +104,24 @@ function UnforwardedTooltip(
 		);
 	}
 
+	// 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.
+	// See: https://github.com/WordPress/gutenberg/pull/64066
+	function addDescribedById( element: React.ReactElement ) {
+		return describedById && mounted
+			? cloneElement( element, { 'aria-describedby': describedById } )
+			: element;
+	}
+
 	return (
 		<TooltipInternalContext.Provider value={ CONTEXT_VALUE }>
 			<Ariakit.TooltipAnchor
 				onClick={ hideOnClick ? tooltipStore.hide : undefined }
 				store={ tooltipStore }
-				render={ isOnlyChild ? children : undefined }
+				render={
+					isOnlyChild ? addDescribedById( children ) : undefined
+				}
 				ref={ ref }
 			>
 				{ isOnlyChild ? undefined : children }
@@ -135,7 +150,6 @@ function UnforwardedTooltip(
 		</TooltipInternalContext.Provider>
 	);
 }
-
 export const Tooltip = forwardRef( UnforwardedTooltip );
 
 export default Tooltip;
diff --git a/packages/components/src/tooltip/style.scss b/packages/components/src/tooltip/style.scss
index feda6cfa81c88..e84946e4a9176 100644
--- a/packages/components/src/tooltip/style.scss
+++ b/packages/components/src/tooltip/style.scss
@@ -1,13 +1,14 @@
 .components-tooltip {
 	background: $black;
 	font-family: $default-font;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	color: $gray-100;
 	text-align: center;
 	line-height: 1.4;
 	font-size: 12px;
 	padding: $grid-unit-05 $grid-unit-10;
 	z-index: z-index(".components-tooltip");
+	box-shadow: $elevation-small;
 }
 
 .components-tooltip__shortcut {
diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index e406ff997c729..67922ab1d5ac4 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -59,7 +59,6 @@ describe( 'Tooltip', () => {
 				screen.getByRole( 'button', { name: 'Second button' } )
 			).toBeVisible();
 
-			await sleep();
 			await press.Tab();
 
 			expectTooltipToBeHidden();
@@ -145,7 +144,6 @@ describe( 'Tooltip', () => {
 			);
 
 			// Focus the anchor, tooltip should show
-			await sleep();
 			await press.Tab();
 			expect(
 				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
@@ -153,7 +151,6 @@ describe( 'Tooltip', () => {
 			await waitExpectTooltipToShow();
 
 			// Focus the other button, tooltip should hide
-			await sleep();
 			await press.Tab();
 			expect(
 				screen.getByRole( 'button', { name: 'Focus me' } )
@@ -179,13 +176,11 @@ describe( 'Tooltip', () => {
 			expect( anchor ).toHaveAttribute( 'aria-disabled', 'true' );
 
 			// Focus anchor, tooltip should show
-			await sleep();
 			await press.Tab();
 			expect( anchor ).toHaveFocus();
 			await waitExpectTooltipToShow();
 
 			// Focus another button, tooltip should hide
-			await sleep();
 			await press.Tab();
 			expect(
 				screen.getByRole( 'button', {
diff --git a/packages/components/src/tooltip/test/utils/index.tsx b/packages/components/src/tooltip/test/utils/index.tsx
index 01b0931c1a790..1e32a10f71bd2 100644
--- a/packages/components/src/tooltip/test/utils/index.tsx
+++ b/packages/components/src/tooltip/test/utils/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
+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
@@ -13,8 +13,8 @@ import type { UserEvent } from '@testing-library/user-event/dist/types/setup/set
  * to avoid leaking into other tests
  *
  */
-export default async function cleanupTooltip( user: UserEvent ) {
-	await user.tab();
-	await user.tab();
-	await user.click( document.body );
+export default async function cleanupTooltip() {
+	await press.Tab();
+	await press.Tab();
+	await click( document.body );
 }
diff --git a/packages/components/src/tree-select/index.tsx b/packages/components/src/tree-select/index.tsx
index 626fb0fda3a01..bd92807bff4cc 100644
--- a/packages/components/src/tree-select/index.tsx
+++ b/packages/components/src/tree-select/index.tsx
@@ -10,6 +10,15 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { SelectControl } from '../select-control';
 import type { TreeSelectProps, Tree, Truthy } from './types';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import { ContextSystemProvider } from '../context';
+
+const CONTEXT_VALUE = {
+	BaseControl: {
+		// Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`
+		// via the context system to override the value set by SelectControl.
+		_overrides: { __associatedWPComponentName: 'TreeSelect' },
+	},
+};
 
 function getSelectOptions(
 	tree: Tree[],
@@ -37,7 +46,7 @@ function getSelectOptions(
  *
  * 	return (
  * 		<TreeSelect
- *      __nextHasNoMarginBottom
+ * 			__nextHasNoMarginBottom
  * 			label="Parent page"
  * 			noOptionLabel="No parent page"
  * 			onChange={ ( newPage ) => setPage( newPage ) }
@@ -73,7 +82,6 @@ function getSelectOptions(
  * }
  * ```
  */
-
 export function TreeSelect( props: TreeSelectProps ) {
 	const {
 		label,
@@ -92,11 +100,13 @@ export function TreeSelect( props: TreeSelectProps ) {
 	}, [ noOptionLabel, tree ] );
 
 	return (
-		<SelectControl
-			{ ...{ label, options, onChange } }
-			value={ selectedId }
-			{ ...restProps }
-		/>
+		<ContextSystemProvider value={ CONTEXT_VALUE }>
+			<SelectControl
+				{ ...{ label, options, onChange } }
+				value={ selectedId }
+				{ ...restProps }
+			/>
+		</ContextSystemProvider>
 	);
 }
 
diff --git a/packages/components/src/tree-select/stories/index.story.tsx b/packages/components/src/tree-select/stories/index.story.tsx
index 0a4212dc79122..33103786bbc54 100644
--- a/packages/components/src/tree-select/stories/index.story.tsx
+++ b/packages/components/src/tree-select/stories/index.story.tsx
@@ -48,6 +48,7 @@ const TreeSelectWithState: StoryFn< typeof TreeSelect > = ( props ) => {
 
 export const Default = TreeSelectWithState.bind( {} );
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	label: 'Label Text',
 	noOptionLabel: 'No parent page',
 	help: 'Help text to explain the select control.',
diff --git a/packages/components/src/unit-control/README.md b/packages/components/src/unit-control/README.md
index b3c0496f86b80..dd54de80357d8 100644
--- a/packages/components/src/unit-control/README.md
+++ b/packages/components/src/unit-control/README.md
@@ -147,3 +147,10 @@ Example:
 ```
 
 -   Required: No
+
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Required: No
+-   Default: `false`
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 321bfb8406569..8ec575c8499ec 100644
--- a/packages/components/src/unit-control/styles/unit-control-styles.ts
+++ b/packages/components/src/unit-control/styles/unit-control-styles.ts
@@ -64,6 +64,7 @@ const baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
+			field-sizing: content;
 
 			&:not( :disabled ) {
 				color: ${ COLORS.theme.accent };
@@ -114,7 +115,7 @@ const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
 			align-items: center;
 
 			&:where( :not( :disabled ) ):hover {
-				box-shadow: inset 0 0 0
+				box-shadow: 0 0 0
 					${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };
 				outline: ${ CONFIG.borderWidth } solid transparent; // For High Contrast Mode
 			}
@@ -135,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/utils/config-values.js b/packages/components/src/utils/config-values.js
index 2e102b8b0b77c..1bc3945f9b3b1 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -5,19 +5,15 @@ 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.theme.accent,
-	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',
-	controlBoxShadow: 'transparent',
 	controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.theme.accent }`,
-	controlDestructiveBorderColor: COLORS.alert.red,
 	controlHeight: CONTROL_HEIGHT,
 	controlHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,
 	controlHeightSmall: `calc( ${ CONTROL_HEIGHT } * 0.8 )`,
@@ -25,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',
@@ -62,12 +54,14 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
 	fontWeight: 'normal',
 	fontWeightHeading: '600',
 	gridBase: '4px',
-	cardBorderRadius: '2px',
 	cardPaddingXSmall: `${ space( 2 ) }`,
 	cardPaddingSmall: `${ space( 4 ) }`,
 	cardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,
 	cardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,
-	popoverShadow: `0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1)`,
+	elevationXSmall: `0 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/element-rect.ts b/packages/components/src/utils/element-rect.ts
index 9f6eb120b32fc..7c83db4428ca0 100644
--- a/packages/components/src/utils/element-rect.ts
+++ b/packages/components/src/utils/element-rect.ts
@@ -2,134 +2,37 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect, useState } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import { useEvent } from './hooks/use-event';
+import { useLayoutEffect, useRef, useState } from '@wordpress/element';
+import { useEvent, useResizeObserver } from '@wordpress/compose';
 
 /**
- * `useTrackElementRectUpdates` options.
+ * The position and dimensions of an element, relative to its offset parent.
  */
-export type UseTrackElementRectUpdatesOptions = {
+export type ElementOffsetRect = {
 	/**
-	 * Whether to trigger the callback when an element's ResizeObserver is
-	 * first set up, including when the target element changes.
-	 *
-	 * @default true
+	 * The element the rect belongs to.
 	 */
-	fireOnElementInit?: boolean;
-};
-
-/**
- * Tracks an element's "rect" (size and position) and fires `onRect` for all
- * of its discrete values. The element can be changed dynamically and **it
- * must not be stored in a ref**. Instead, it should be stored in a React
- * state or equivalent.
- *
- * By default, `onRect` is called initially for the target element (including
- * when the target element changes), not only on size or position updates.
- * This allows consumers of the hook to always be in sync with all rect values
- * of the target element throughout its lifetime. This behavior can be
- * disabled by setting the `fireOnElementInit` option to `false`.
- *
- * Under the hood, it sets up a `ResizeObserver` that tracks the element. The
- * target element can be changed dynamically, and the observer will be
- * updated accordingly.
- *
- * @example
- *
- * ```tsx
- * const [ targetElement, setTargetElement ] = useState< HTMLElement | null >();
- *
- * useTrackElementRectUpdates( targetElement, ( element ) => {
- *   console.log( 'Element resized:', element );
- * } );
- *
- * <div ref={ setTargetElement } />;
- * ```
- */
-export function useTrackElementRectUpdates(
+	element: HTMLElement | undefined;
 	/**
-	 * The target element to observe. It can be changed dynamically.
+	 * The distance from the top edge of the offset parent to the top edge of
+	 * the element.
 	 */
-	targetElement: HTMLElement | undefined | null,
+	top: number;
 	/**
-	 * Callback to fire when the element is resized. It will also be
-	 * called when the observer is set up, unless `fireOnElementInit` is
-	 * set to `false`.
+	 * The distance from the right edge of the offset parent to the right edge
+	 * of the element.
 	 */
-	onRect: (
-		/**
-		 * The element being tracked at the time of this update.
-		 */
-		element: HTMLElement,
-		/**
-		 * The list of
-		 * [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
-		 * objects passed to the `ResizeObserver.observe` callback. This list
-		 * won't be available when the observer is set up, and only on updates.
-		 */
-		resizeObserverEntries?: ResizeObserverEntry[]
-	) => void,
-	{ fireOnElementInit = true }: UseTrackElementRectUpdatesOptions = {}
-) {
-	const onRectEvent = useEvent( onRect );
-
-	const observedElementRef = useRef< HTMLElement | null >();
-	const resizeObserverRef = useRef< ResizeObserver >();
-
-	// TODO: could this be a layout effect?
-	useEffect( () => {
-		if ( targetElement === observedElementRef.current ) {
-			return;
-		}
-
-		observedElementRef.current = targetElement;
-
-		// Set up a ResizeObserver.
-		if ( ! resizeObserverRef.current ) {
-			resizeObserverRef.current = new ResizeObserver( ( entries ) => {
-				if ( observedElementRef.current ) {
-					onRectEvent( observedElementRef.current, entries );
-				}
-			} );
-		}
-		const { current: resizeObserver } = resizeObserverRef;
-
-		// Observe new element.
-		if ( targetElement ) {
-			if ( fireOnElementInit ) {
-				// TODO: investigate if this can be removed,
-				// see: https://stackoverflow.com/a/60026394
-				onRectEvent( targetElement );
-			}
-			resizeObserver.observe( targetElement );
-		}
-
-		return () => {
-			// Unobserve previous element.
-			if ( observedElementRef.current ) {
-				resizeObserver.unobserve( observedElementRef.current );
-			}
-		};
-	}, [ fireOnElementInit, onRectEvent, targetElement ] );
-}
-
-/**
- * The position and dimensions of an element, relative to its offset parent.
- */
-export type ElementOffsetRect = {
+	right: number;
 	/**
-	 * The distance from the left edge of the offset parent to the left edge of
-	 * the element.
+	 * The distance from the bottom edge of the offset parent to the bottom edge
+	 * of the element.
 	 */
-	left: number;
+	bottom: number;
 	/**
-	 * The distance from the top edge of the offset parent to the top edge of
+	 * The distance from the left edge of the offset parent to the left edge of
 	 * the element.
 	 */
-	top: number;
+	left: number;
 	/**
 	 * The width of the element.
 	 */
@@ -144,52 +47,129 @@ export type ElementOffsetRect = {
  * An `ElementOffsetRect` object with all values set to zero.
  */
 export const NULL_ELEMENT_OFFSET_RECT = {
-	left: 0,
+	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. This is useful in contexts where `getBoundingClientRect` is not
- * suitable, such as when the element is transformed.
+ * 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:** the `left` and `right` values are adjusted due to a limitation
- * in the way the browser calculates the offset position of the element,
- * which can cause unwanted scrollbars to appear. This adjustment makes the
- * values potentially inaccurate within a range of 1 pixel.
+ * **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 {
+): 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 {
-		// The adjustments mentioned in the documentation above are necessary
-		// because `offsetLeft` and `offsetTop` are rounded to the nearest pixel,
-		// which can result in a position mismatch that causes unwanted overflow.
-		// For context, see: https://github.com/WordPress/gutenberg/pull/61979
-		left: Math.max( element.offsetLeft - 1, 0 ),
-		top: Math.max( element.offsetTop - 1, 0 ),
-		// This is a workaround to obtain these values with a sub-pixel precision,
-		// since `offsetWidth` and `offsetHeight` are rounded to the nearest pixel.
-		width: parseFloat( getComputedStyle( element ).width ),
-		height: parseFloat( getComputedStyle( element ).height ),
+		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
 ) {
 	const [ indicatorPosition, setIndicatorPosition ] =
 		useState< ElementOffsetRect >( NULL_ELEMENT_OFFSET_RECT );
+	const intervalRef = useRef< ReturnType< typeof setInterval > >();
 
-	useTrackElementRectUpdates( targetElement, ( element ) =>
-		setIndicatorPosition( getElementOffsetRect( element ) )
-	);
+	const measure = useEvent( () => {
+		if ( targetElement ) {
+			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 ] );
 
 	return indicatorPosition;
 }
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 0000000000000..4056089738fe9
--- /dev/null
+++ b/packages/components/src/utils/hooks/use-animated-offset-rect.ts
@@ -0,0 +1,107 @@
+/* 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,
+	}: {
+		/**
+		 * 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;
+	} = {}
+) {
+	const setProperties = useEvent( () => {
+		( Object.keys( rect ) as Array< keyof typeof rect > ).forEach(
+			( property ) =>
+				property !== 'element' &&
+				container?.style.setProperty(
+					`--${ prefix }-${ property }`,
+					String( 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-event.ts b/packages/components/src/utils/hooks/use-event.ts
deleted file mode 100644
index eefac9478a8b4..0000000000000
--- a/packages/components/src/utils/hooks/use-event.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/* eslint-disable jsdoc/require-param */
-/**
- * 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.
- *
- * @example
- *
- * ```tsx
- * function Component(props) {
- *   const onClick = useEvent(props.onClick);
- *   React.useEffect(() => {}, [onClick]);
- * }
- * ```
- */
-export function useEvent< T extends AnyFunction >( callback?: T ) {
-	const ref = useRef< AnyFunction | undefined >( () => {
-		throw new Error( 'Cannot call an event handler while rendering.' );
-	} );
-	useInsertionEffect( () => {
-		ref.current = callback;
-	} );
-	return useCallback< AnyFunction >(
-		( ...args ) => ref.current?.( ...args ),
-		[]
-	) as T;
-}
-/* eslint-enable jsdoc/require-param */
diff --git a/packages/components/src/utils/hooks/use-on-value-update.ts b/packages/components/src/utils/hooks/use-on-value-update.ts
index 5726f3977daf0..15cfc321359e7 100644
--- a/packages/components/src/utils/hooks/use-on-value-update.ts
+++ b/packages/components/src/utils/hooks/use-on-value-update.ts
@@ -2,11 +2,8 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import { useEvent } from './use-event';
+import { useEvent } from '@wordpress/compose';
+import { useRef, useLayoutEffect } from '@wordpress/element';
 
 /**
  * Context object for the `onUpdate` callback of `useOnValueUpdate`.
@@ -30,7 +27,7 @@ export function useOnValueUpdate< T >(
 ) {
 	const previousValueRef = useRef( value );
 	const updateCallbackEvent = useEvent( onUpdate );
-	useEffect( () => {
+	useLayoutEffect( () => {
 		if ( previousValueRef.current !== value ) {
 			updateCallbackEvent( {
 				previousValue: previousValueRef.current,
diff --git a/packages/components/src/utils/hooks/use-update-effect.js b/packages/components/src/utils/hooks/use-update-effect.js
index d49ca951cdcff..ed2c3ca436357 100644
--- a/packages/components/src/utils/hooks/use-update-effect.js
+++ b/packages/components/src/utils/hooks/use-update-effect.js
@@ -12,12 +12,12 @@ import { useRef, useEffect } from '@wordpress/element';
  * @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
@@ -28,7 +28,7 @@ function useUpdateEffect( effect, deps ) {
 
 	useEffect(
 		() => () => {
-			mounted.current = false;
+			mountedRef.current = false;
 		},
 		[]
 	);
diff --git a/packages/components/src/utils/input/base.js b/packages/components/src/utils/input/base.js
deleted file mode 100644
index f03a1d9c77abb..0000000000000
--- a/packages/components/src/utils/input/base.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { COLORS } from '../colors-values';
-import { CONFIG } from '../';
-
-export const inputStyleNeutral = css`
-	box-shadow: 0 0 0 transparent;
-	border-radius: ${ CONFIG.radiusBlockUi };
-	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
-
-	@media not ( prefers-reduced-motion ) {
-		transition: box-shadow 0.1s linear;
-	}
-`;
-
-export const inputStyleFocus = css`
-	border-color: ${ COLORS.theme.accent };
-	box-shadow: 0 0 0
-		calc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )
-		${ COLORS.theme.accent };
-
-	// Windows High Contrast mode will show this outline, but not the box-shadow.
-	outline: 2px solid transparent;
-`;
diff --git a/packages/components/src/utils/input/index.js b/packages/components/src/utils/input/index.js
deleted file mode 100644
index 23fd731db99d9..0000000000000
--- 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 8af838247d9c2..0000000000000
--- a/packages/components/src/utils/input/input-control.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { inputStyleNeutral, inputStyleFocus } from './base';
-import { font } from '../font';
-import { COLORS } from '../colors-values';
-import { breakpoint } from '../breakpoint';
-
-export const inputControl = css`
-	display: block;
-	font-family: ${ font( 'default.fontFamily' ) };
-	padding: 6px 8px;
-	${ inputStyleNeutral };
-
-	/* Fonts smaller than 16px causes mobile safari to zoom. */
-	font-size: ${ font( 'mobileTextMinFontSize' ) };
-	/* Override core line-height. To be reviewed. */
-	line-height: normal;
-
-	${ breakpoint( 'small' ) } {
-		font-size: ${ font( 'default.fontSize' ) };
-		/* Override core line-height. To be reviewed. */
-		line-height: normal;
-	}
-
-	&:focus {
-		${ inputStyleFocus }
-	}
-
-	// Use opacity to work in various editor styles.
-	&::-webkit-input-placeholder {
-		color: ${ COLORS.ui.darkGrayPlaceholder };
-	}
-
-	&::-moz-placeholder {
-		opacity: 1; // Necessary because Firefox reduces this from 1.
-		color: ${ COLORS.ui.darkGrayPlaceholder };
-	}
-
-	&:-ms-input-placeholder {
-		color: ${ COLORS.ui.darkGrayPlaceholder };
-	}
-
-	.is-dark-theme & {
-		&::-webkit-input-placeholder {
-			color: ${ COLORS.ui.lightGrayPlaceholder };
-		}
-
-		&::-moz-placeholder {
-			opacity: 1; // Necessary because Firefox reduces this from 1.
-			color: ${ COLORS.ui.lightGrayPlaceholder };
-		}
-
-		&:-ms-input-placeholder {
-			color: ${ COLORS.ui.lightGrayPlaceholder };
-		}
-	}
-`;
diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md
index f508fa376cbe8..e94eed5a08677 100644
--- a/packages/compose/CHANGELOG.md
+++ b/packages/compose/CHANGELOG.md
@@ -2,6 +2,27 @@
 
 ## Unreleased
 
+## 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
@@ -197,8 +218,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)
 
diff --git a/packages/compose/README.md b/packages/compose/README.md
index f3109253e44c1..b4e20a79bab0c 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -305,6 +305,29 @@ _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.
@@ -500,23 +523,30 @@ _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.
diff --git a/packages/compose/package.json b/packages/compose/package.json
index 8a813ad58193d..83ffd1d2b364f 100644
--- a/packages/compose/package.json
+++ b/packages/compose/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "7.3.0",
+	"version": "7.9.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
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 383be2b957342..eab34045f3c21 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-drop-zone/index.js b/packages/compose/src/hooks/use-drop-zone/index.js
index b537f0a5ab622..c570c03441592 100644
--- a/packages/compose/src/hooks/use-drop-zone/index.js
+++ b/packages/compose/src/hooks/use-drop-zone/index.js
@@ -86,6 +86,7 @@ export default function useDropZone( {
 			 */
 			function isElementInZone( targetToCheck ) {
 				const { defaultView } = ownerDocument;
+
 				if (
 					! targetToCheck ||
 					! defaultView ||
@@ -165,6 +166,7 @@ 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;
 				}
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 0000000000000..d381bcb595bf6
--- /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-focus-on-mount/index.js b/packages/compose/src/hooks/use-focus-on-mount/index.js
index db1f2dcdbe3ea..bb02eb78e5689 100644
--- a/packages/compose/src/hooks/use-focus-on-mount/index.js
+++ b/packages/compose/src/hooks/use-focus-on-mount/index.js
@@ -49,7 +49,7 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
 	};
 
 	/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */
-	const timerId = useRef();
+	const timerIdRef = useRef();
 
 	useEffect( () => {
 		focusOnMountRef.current = focusOnMount;
@@ -64,23 +64,21 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
 			return;
 		}
 
-		if ( focusOnMountRef.current === 'firstElement' ) {
-			timerId.current = setTimeout( () => {
-				const firstTabbable = focus.tabbable.find( node )[ 0 ];
-
-				if ( firstTabbable ) {
-					setFocus( firstTabbable );
-				}
-			}, 0 );
-
+		if ( focusOnMountRef.current !== 'firstElement' ) {
+			setFocus( node );
 			return;
 		}
 
-		setFocus( node );
+		timerIdRef.current = setTimeout( () => {
+			const firstTabbable = focus.tabbable.find( node )[ 0 ];
+			if ( firstTabbable ) {
+				setFocus( firstTabbable );
+			}
+		}, 0 );
 
 		return () => {
-			if ( timerId.current ) {
-				clearTimeout( timerId.current );
+			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 3d85b588a9ab3..812621a09d21d 100644
--- a/packages/compose/src/hooks/use-focus-outside/index.ts
+++ b/packages/compose/src/hooks/use-focus-outside/index.ts
@@ -71,20 +71,20 @@ type UseFocusOutsideReturn = {
 export default function useFocusOutside(
 	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.
@@ -116,9 +116,9 @@ export default function useFocusOutside(
 		const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
 
 		if ( isInteractionEnd ) {
-			preventBlurCheck.current = false;
+			preventBlurCheckRef.current = false;
 		} else if ( isFocusNormalizedButton( target ) ) {
-			preventBlurCheck.current = true;
+			preventBlurCheckRef.current = true;
 		}
 	}, [] );
 
@@ -135,7 +135,7 @@ export default function useFocusOutside(
 		event.persist();
 
 		// Skip blur check if clicking button. See `normalizeButtonFocus`.
-		if ( preventBlurCheck.current ) {
+		if ( preventBlurCheckRef.current ) {
 			return;
 		}
 
@@ -156,7 +156,7 @@ export default function useFocusOutside(
 			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.
@@ -166,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-keyboard-shortcut/index.js b/packages/compose/src/hooks/use-keyboard-shortcut/index.js
index be27d15864633..be3f3a2554c7f 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-merge-refs/index.js b/packages/compose/src/hooks/use-merge-refs/index.js
index f39160444c522..ed7f4247018be 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-ref-effect/index.ts b/packages/compose/src/hooks/use-ref-effect/index.ts
index 06d826229980c..89cc3bc2392c2 100644
--- a/packages/compose/src/hooks/use-ref-effect/index.ts
+++ b/packages/compose/src/hooks/use-ref-effect/index.ts
@@ -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 3b171ee00bf47..79eb3e569e332 100644
--- a/packages/compose/src/hooks/use-resize-observer/index.native.js
+++ b/packages/compose/src/hooks/use-resize-observer/index.native.js
@@ -1,59 +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 0000000000000..1bd0f074cc49f
--- /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 21fcd0bff4f4d..0000000000000
--- a/packages/compose/src/hooks/use-resize-observer/index.tsx
+++ /dev/null
@@ -1,362 +0,0 @@
-/**
- * External dependencies
- */
-import type { ReactElement, RefCallback, RefObject } from 'react';
-
-/**
- * WordPress dependencies
- */
-import {
-	useMemo,
-	useRef,
-	useCallback,
-	useEffect,
-	useState,
-} 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( () => {
-		didUnmount.current = false;
-		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(): [
-	ReactElement,
-	{ 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 0000000000000..3b171ee00bf47
--- /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 0000000000000..fe76581098222
--- /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/test/index.native.js b/packages/compose/src/hooks/use-resize-observer/legacy/test/index.native.js
similarity index 96%
rename from packages/compose/src/hooks/use-resize-observer/test/index.native.js
rename to packages/compose/src/hooks/use-resize-observer/legacy/test/index.native.js
index 6370b3f9cd054..8ff90d0c778fd 100644
--- a/packages/compose/src/hooks/use-resize-observer/test/index.native.js
+++ b/packages/compose/src/hooks/use-resize-observer/legacy/test/index.native.js
@@ -7,7 +7,7 @@ import { View } from 'react-native';
 /**
  * Internal dependencies
  */
-import useResizeObserver from '../';
+import useResizeObserver from '..';
 
 const TestComponent = ( { onLayout } ) => {
 	const [ resizeObserver, sizes ] = useResizeObserver();
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 0000000000000..4c1031b9839dc
--- /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-viewport-match/index.js b/packages/compose/src/hooks/use-viewport-match/index.js
index ebec934b48012..4186045f7d08c 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 f7e1d1618f97f..29a9aa6173744 100644
--- a/packages/compose/src/index.js
+++ b/packages/compose/src/index.js
@@ -25,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';
diff --git a/packages/core-commands/CHANGELOG.md b/packages/core-commands/CHANGELOG.md
index a8b6881e1e4b1..bd259351a8799 100644
--- a/packages/core-commands/CHANGELOG.md
+++ b/packages/core-commands/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/core-commands/package.json b/packages/core-commands/package.json
index 50b31ca327b28..1eed9f5348145 100644
--- a/packages/core-commands/package.json
+++ b/packages/core-commands/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/core-commands",
-	"version": "1.3.0",
+	"version": "1.9.0",
 	"description": "WordPress core reusable commands.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,6 +37,7 @@
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
+		"@wordpress/notices": "file:../notices",
 		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/router": "file:../router",
 		"@wordpress/url": "file:../url"
diff --git a/packages/core-commands/src/admin-navigation-commands.js b/packages/core-commands/src/admin-navigation-commands.js
index 0ffa7ba7eb628..c0d8bb084b46a 100644
--- a/packages/core-commands/src/admin-navigation-commands.js
+++ b/packages/core-commands/src/admin-navigation-commands.js
@@ -1,9 +1,92 @@
 /**
  * WordPress dependencies
  */
-import { useCommand } from '@wordpress/commands';
+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 );
+
+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.push( {
+						postId: page.id,
+						postType: 'page',
+						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( {
@@ -14,12 +97,9 @@ export function useAdminNavigationCommands() {
 			document.location.href = 'post-new.php';
 		},
 	} );
-	useCommand( {
+
+	useCommandLoader( {
 		name: 'core/add-new-page',
-		label: __( 'Add new page' ),
-		icon: plus,
-		callback: () => {
-			document.location.href = 'post-new.php?post_type=page';
-		},
+		hook: useAddNewPageCommand,
 	} );
 }
diff --git a/packages/core-commands/src/hooks.js b/packages/core-commands/src/hooks.js
deleted file mode 100644
index 0622a970680c1..0000000000000
--- a/packages/core-commands/src/hooks.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-
-export function useIsBlockBasedTheme() {
-	return useSelect(
-		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
-		[]
-	);
-}
diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js
index cb38ea2bb2553..4679d4d1523c8 100644
--- a/packages/core-commands/src/site-editor-navigation-commands.js
+++ b/packages/core-commands/src/site-editor-navigation-commands.js
@@ -23,7 +23,6 @@ import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
  */
-import { useIsBlockBasedTheme } from './hooks';
 import { unlock } from './lock-unlock';
 import { orderEntityRecordsBySearch } from './utils/order-entity-records-by-search';
 
@@ -51,7 +50,19 @@ function useDebouncedValue( value ) {
 const getNavigationCommandLoaderPerPostType = ( postType ) =>
 	function useNavigationCommandLoader( { search } ) {
 		const history = useHistory();
-		const isBlockBasedTheme = useIsBlockBasedTheme();
+		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 ) => {
@@ -100,6 +111,7 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
 				};
 
 				if (
+					! canCreateTemplate ||
 					postType === 'post' ||
 					( postType === 'page' && ! isBlockBasedTheme )
 				) {
@@ -142,7 +154,7 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
 					},
 				};
 			} );
-		}, [ records, isBlockBasedTheme, history ] );
+		}, [ canCreateTemplate, records, isBlockBasedTheme, history ] );
 
 		return {
 			commands,
@@ -153,7 +165,19 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
 const getNavigationCommandLoaderPerTemplate = ( templateType ) =>
 	function useNavigationCommandLoader( { search } ) {
 		const history = useHistory();
-		const isBlockBasedTheme = useIsBlockBasedTheme();
+		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 };
@@ -177,8 +201,8 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) =>
 
 		const commands = useMemo( () => {
 			if (
-				! isBlockBasedTheme &&
-				! templateType === 'wp_template_part'
+				! canCreateTemplate ||
+				( ! isBlockBasedTheme && ! templateType === 'wp_template_part' )
 			) {
 				return [];
 			}
@@ -243,7 +267,7 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) =>
 				} );
 			}
 			return result;
-		}, [ isBlockBasedTheme, orderedRecords, history ] );
+		}, [ canCreateTemplate, isBlockBasedTheme, orderedRecords, history ] );
 
 		return {
 			commands,
@@ -265,13 +289,16 @@ function useSiteEditorBasicNavigationCommands() {
 	const isSiteEditor = getPath( window.location.href )?.includes(
 		'site-editor.php'
 	);
-	const canCreateTemplate = useSelect( ( select ) => {
-		return select( coreStore ).canUser( 'create', {
-			kind: 'postType',
-			name: 'wp_template',
-		} );
+	const { isBlockBasedTheme, canCreateTemplate } = useSelect( ( select ) => {
+		return {
+			isBlockBasedTheme:
+				select( coreStore ).getCurrentTheme()?.is_block_theme,
+			canCreateTemplate: select( coreStore ).canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} ),
+		};
 	}, [] );
-	const isBlockBasedTheme = useIsBlockBasedTheme();
 	const commands = useMemo( () => {
 		const result = [];
 
diff --git a/packages/core-data/CHANGELOG.md b/packages/core-data/CHANGELOG.md
index 5e5af54f0751e..8a59c81184035 100644
--- a/packages/core-data/CHANGELOG.md
+++ b/packages/core-data/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/core-data/README.md b/packages/core-data/README.md
index 2f2094bed7f4d..079f95ddbfc7a 100644
--- a/packages/core-data/README.md
+++ b/packages/core-data/README.md
@@ -182,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.
@@ -264,7 +264,7 @@ _Parameters_
 
 ### 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.
 
@@ -1011,7 +1011,7 @@ _Parameters_
 -   _kind_ `string`: The entity kind.
 -   _name_ `string`: The entity name.
 -   _prop_ `string`: The property name.
--   _\_id_ `[string]`: An entity ID to use instead of the context-provided one.
+-   _\_id_ `[number|string]`: An entity ID to use instead of the context-provided one.
 
 _Returns_
 
@@ -1173,7 +1173,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 ...';
@@ -1196,7 +1199,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 ...';
@@ -1222,8 +1229,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 d94eb37528725..4037bd577c323 100644
--- a/packages/core-data/package.json
+++ b/packages/core-data/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/core-data",
-	"version": "7.3.0",
+	"version": "7.9.0",
 	"description": "Access to and manipulation of core WordPress entities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -47,6 +47,7 @@
 		"@wordpress/sync": "file:../sync",
 		"@wordpress/undo-manager": "file:../undo-manager",
 		"@wordpress/url": "file:../url",
+		"@wordpress/warning": "file:../warning",
 		"change-case": "^4.1.2",
 		"equivalent-key-map": "^0.2.2",
 		"fast-deep-equal": "^3.1.3",
diff --git a/packages/core-data/src/actions.js b/packages/core-data/src/actions.js
index 6fca867ecaa6a..e83ad02828cfe 100644
--- a/packages/core-data/src/actions.js
+++ b/packages/core-data/src/actions.js
@@ -200,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.
  */
@@ -265,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 =
 	(
@@ -805,11 +805,11 @@ 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 or property paths 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 ) =>
@@ -888,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.
diff --git a/packages/core-data/src/entity-types/wp-template.ts b/packages/core-data/src/entity-types/wp-template.ts
index ac6db09035f19..70d3e40c295dc 100644
--- a/packages/core-data/src/entity-types/wp-template.ts
+++ b/packages/core-data/src/entity-types/wp-template.ts
@@ -73,6 +73,10 @@ declare module './base-entity-records' {
 			 * Post ID.
 			 */
 			wp_id: number;
+			/**
+			 * Plugin that registered the template.
+			 */
+			plugin?: string;
 			/**
 			 * Theme file exists.
 			 */
diff --git a/packages/core-data/src/footnotes/get-rich-text-values-cached.js b/packages/core-data/src/footnotes/get-rich-text-values-cached.js
index 06a01c5ef63fd..a5c2d25810861 100644
--- a/packages/core-data/src/footnotes/get-rich-text-values-cached.js
+++ b/packages/core-data/src/footnotes/get-rich-text-values-cached.js
@@ -6,7 +6,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { unlock } from '../private-apis';
+import { unlock } from '../lock-unlock';
 
 // TODO: The following line should have been:
 //
diff --git a/packages/core-data/src/footnotes/index.js b/packages/core-data/src/footnotes/index.js
index 9e30f10c06a93..3c267ae6f92cf 100644
--- a/packages/core-data/src/footnotes/index.js
+++ b/packages/core-data/src/footnotes/index.js
@@ -72,6 +72,8 @@ export function updateFootnotesFromMeta( blocks, meta ) {
 					? RichTextData.fromHTMLString( value )
 					: new RichTextData( value );
 
+			let hasFootnotes = false;
+
 			richTextValue.replacements.forEach( ( replacement ) => {
 				if ( replacement.type === 'core/footnote' ) {
 					const id = replacement.attributes[ 'data-fn' ];
@@ -92,13 +94,16 @@ export function updateFootnotesFromMeta( blocks, meta ) {
 					replacement.innerHTML = toHTMLString( {
 						value: countValue,
 					} );
+					hasFootnotes = true;
 				}
 			} );
 
-			attributes[ key ] =
-				typeof value === 'string'
-					? richTextValue.toHTMLString()
-					: richTextValue;
+			if ( hasFootnotes ) {
+				attributes[ key ] =
+					typeof value === 'string'
+						? richTextValue.toHTMLString()
+						: richTextValue;
+			}
 		}
 
 		return attributes;
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 2547cda890b05..f1d69e85a051d 100644
--- a/packages/core-data/src/hooks/test/use-entity-records.js
+++ b/packages/core-data/src/hooks/test/use-entity-records.js
@@ -69,8 +69,8 @@ describe( 'useEntityRecords', () => {
 			hasStarted: true,
 			isResolving: false,
 			status: 'SUCCESS',
-			totalItems: null,
-			totalPages: null,
+			totalItems: 3,
+			totalPages: 1,
 		} );
 	} );
 } );
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 bb6c3a85c191f..b1c43b7947874 100644
--- a/packages/core-data/src/hooks/test/use-resource-permissions.js
+++ b/packages/core-data/src/hooks/test/use-resource-permissions.js
@@ -93,4 +93,97 @@ describe( 'useResourcePermissions', () => {
 			} )
 		);
 	} );
+
+	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: 'IDLE',
+			isResolving: false,
+			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-prop.js b/packages/core-data/src/hooks/use-entity-prop.js
index 2894721410dfd..ac2f22ace7079 100644
--- a/packages/core-data/src/hooks/use-entity-prop.js
+++ b/packages/core-data/src/hooks/use-entity-prop.js
@@ -15,10 +15,10 @@ import useEntityId from './use-entity-id';
  * 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.
+ * @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
diff --git a/packages/core-data/src/hooks/use-entity-records.ts b/packages/core-data/src/hooks/use-entity-records.ts
index 5d643ab889692..e2659b88bc019 100644
--- a/packages/core-data/src/hooks/use-entity-records.ts
+++ b/packages/core-data/src/hooks/use-entity-records.ts
@@ -4,6 +4,7 @@
 import { addQueryArgs } from '@wordpress/url';
 import deprecated from '@wordpress/deprecated';
 import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,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 */
@@ -152,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-resource-permissions.ts b/packages/core-data/src/hooks/use-resource-permissions.ts
index 7da7189e2e506..38dfc1ed77a3e 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
@@ -41,20 +42,34 @@ type ResourcePermissionsResolution< IdType > = [
 		( 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 bd25fa8de9902..99507a914f377 100644
--- a/packages/core-data/src/index.js
+++ b/packages/core-data/src/index.js
@@ -10,6 +10,7 @@ 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 {
@@ -18,7 +19,7 @@ import {
 	getMethodName,
 } from './entities';
 import { STORE_NAME } from './name';
-import { unlock } from './private-apis';
+import { unlock } from './lock-unlock';
 
 // The entity selectors/resolvers and actions are shortcuts to their generic equivalents
 // (getEntityRecord, getEntityRecords, updateEntityRecord, updateEntityRecords)
@@ -79,6 +80,7 @@ const storeConfig = () => ( {
  */
 export const store = createReduxStore( STORE_NAME, storeConfig() );
 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';
@@ -86,3 +88,4 @@ 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.js b/packages/core-data/src/lock-unlock.js
new file mode 100644
index 0000000000000..91bf30792c970
--- /dev/null
+++ b/packages/core-data/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-data'
+	);
diff --git a/packages/core-data/src/private-actions.js b/packages/core-data/src/private-actions.js
new file mode 100644
index 0000000000000..df76d2693e54f
--- /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
index 91bf30792c970..443db97957285 100644
--- a/packages/core-data/src/private-apis.js
+++ b/packages/core-data/src/private-apis.js
@@ -1,10 +1,10 @@
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+import { useEntityRecordsWithPermissions } from './hooks/use-entity-records';
+import { lock } from './lock-unlock';
 
-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'
-	);
+export const privateApis = {};
+lock( privateApis, {
+	useEntityRecordsWithPermissions,
+} );
diff --git a/packages/core-data/src/private-selectors.ts b/packages/core-data/src/private-selectors.ts
index 6280bb9631963..b2f6fa7def985 100644
--- a/packages/core-data/src/private-selectors.ts
+++ b/packages/core-data/src/private-selectors.ts
@@ -50,3 +50,58 @@ export const getBlockPatternsForPostType = createRegistrySelector(
 			() => [ 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 ] ?? {};
+}
diff --git a/packages/core-data/src/reducer.js b/packages/core-data/src/reducer.js
index 3d6473d761036..9748355fc5caf 100644
--- a/packages/core-data/src/reducer.js
+++ b/packages/core-data/src/reducer.js
@@ -521,6 +521,11 @@ export function userPermissions( state = {}, action ) {
 				...state,
 				[ action.key ]: action.isAllowed,
 			};
+		case 'RECEIVE_USER_PERMISSIONS':
+			return {
+				...state,
+				...action.permissions,
+			};
 	}
 
 	return state;
@@ -623,6 +628,25 @@ export function defaultTemplates( state = {}, action ) {
 	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,
@@ -644,4 +668,5 @@ export default combineReducers( {
 	userPatternCategories,
 	navigationFallbackId,
 	defaultTemplates,
+	registeredPostMeta,
 } );
diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js
index 0b0cc017086cc..91a73a0b3511c 100644
--- a/packages/core-data/src/resolvers.js
+++ b/packages/core-data/src/resolvers.js
@@ -19,7 +19,7 @@ import {
 	forwardResolver,
 	getNormalizedCommaSeparable,
 	getUserPermissionCacheKey,
-	getUserPermissionsFromResponse,
+	getUserPermissionsFromAllowHeader,
 	ALLOWED_RESOURCE_ACTIONS,
 } from './utils';
 import { getSyncProvider } from './sync';
@@ -155,7 +155,7 @@ export const getEntityRecord =
 					}
 				);
 
-				if ( query !== undefined ) {
+				if ( query !== undefined && query._fields ) {
 					query = { ...query, include: [ key ] };
 
 					// The resolution cache won't consider query as reusable based on the
@@ -173,26 +173,36 @@ export const getEntityRecord =
 
 				const response = await apiFetch( { path, parse: false } );
 				const record = await response.json();
-				const permissions = getUserPermissionsFromResponse( response );
+				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 );
-
-					for ( const action of ALLOWED_RESOURCE_ACTIONS ) {
-						const permissionKey = getUserPermissionCacheKey(
-							action,
-							{ kind, name, id: key }
-						);
-
-						dispatch.receiveUserPermission(
-							permissionKey,
-							permissions[ action ]
-						);
-						dispatch.finishResolution( 'canUser', [
-							action,
-							{ kind, name, id: key },
-						] );
-					}
+					dispatch.receiveUserPermissions(
+						receiveUserPermissionArgs
+					);
+					dispatch.finishResolutions(
+						'canUser',
+						canUserResolutionsArgs
+					);
 				} );
 			}
 		} finally {
@@ -271,6 +281,10 @@ export const getEntityRecords =
 				};
 			} 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,
@@ -299,19 +313,55 @@ export const getEntityRecords =
 					meta
 				);
 
-				// When requesting all fields, the list of results can be used to
-				// resolve the `getEntityRecord` selector in addition to `getEntityRecords`.
+				// 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 key = entityConfig.key || DEFAULT_ENTITY_KEY;
 					const resolutionsArgs = records
 						.filter( ( record ) => record?.[ key ] )
 						.map( ( record ) => [ kind, name, record[ key ] ] );
 
+					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',
 						resolutionsArgs
 					);
+					dispatch.finishResolutions(
+						'canUser',
+						canUserResolutionsArgs
+					);
 				}
 
 				dispatch.__unstableReleaseStoreLock( lock );
@@ -407,7 +457,6 @@ export const canUser =
 			resourcePath =
 				entityConfig.baseURL + ( resource.id ? '/' + resource.id : '' );
 		} else {
-			// @todo: Maybe warn when detecting a legacy usage.
 			resourcePath = `/wp/v2/${ resource }` + ( id ? '/' + id : '' );
 		}
 
@@ -441,7 +490,12 @@ export const canUser =
 			return;
 		}
 
-		const permissions = getUserPermissionsFromResponse( response );
+		// Optional chaining operator is used here because the API requests don't
+		// return the expected result in the React native version. Instead, API requests
+		// only return the result, without including response properties like the headers.
+		const permissions = getUserPermissionsFromAllowHeader(
+			response.headers?.get( 'allow' )
+		);
 		registry.batch( () => {
 			for ( const action of ALLOWED_RESOURCE_ACTIONS ) {
 				const key = getUserPermissionCacheKey( action, resource, id );
@@ -464,9 +518,9 @@ export const canUser =
  * 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 ) =>
@@ -591,7 +645,7 @@ export const __experimentalGetCurrentThemeBaseGlobalStyles =
 	async ( { resolveSelect, dispatch } ) => {
 		const currentTheme = await resolveSelect.getCurrentTheme();
 		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,
@@ -604,7 +658,7 @@ export const __experimentalGetCurrentThemeGlobalStylesVariations =
 	async ( { resolveSelect, dispatch } ) => {
 		const currentTheme = await resolveSelect.getCurrentTheme();
 		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,
@@ -701,7 +755,7 @@ export const getUserPatternCategories =
 
 export const getNavigationFallbackId =
 	() =>
-	async ( { dispatch, select } ) => {
+	async ( { dispatch, select, registry } ) => {
 		const fallback = await apiFetch( {
 			path: addQueryArgs( '/wp-block-editor/v1/navigation-fallback', {
 				_embed: true,
@@ -710,9 +764,13 @@ export const getNavigationFallbackId =
 
 		const record = fallback?._embedded?.self;
 
-		dispatch.receiveNavigationFallbackId( fallback?.id );
+		registry.batch( () => {
+			dispatch.receiveNavigationFallbackId( fallback?.id );
+
+			if ( ! record ) {
+				return;
+			}
 
-		if ( record ) {
 			// 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.
@@ -736,7 +794,7 @@ export const getNavigationFallbackId =
 				'wp_navigation',
 				fallback.id,
 			] );
-		}
+		} );
 	};
 
 export const getDefaultTemplateId =
@@ -763,7 +821,7 @@ export const getDefaultTemplateId =
  */
 export const getRevisions =
 	( kind, name, recordKey, query = {} ) =>
-	async ( { dispatch } ) => {
+	async ( { dispatch, registry } ) => {
 		const configs = await dispatch( getOrLoadEntitiesConfig( kind, name ) );
 		const entityConfig = configs.find(
 			( config ) => config.name === name && config.kind === kind
@@ -830,32 +888,36 @@ export const getRevisions =
 				} );
 			}
 
-			dispatch.receiveRevisions(
-				kind,
-				name,
-				recordKey,
-				records,
-				query,
-				false,
-				meta
-			);
+			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 ],
-					] );
+				// 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.startResolutions( 'getRevision', resolutionsArgs );
-				dispatch.finishResolutions( 'getRevision', resolutionsArgs );
-			}
+					dispatch.finishResolutions(
+						'getRevision',
+						resolutionsArgs
+					);
+				}
+			} );
 		}
 	};
 
@@ -922,3 +984,34 @@ export const getRevision =
 			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
+			);
+		}
+	};
diff --git a/packages/core-data/src/selectors.ts b/packages/core-data/src/selectors.ts
index aeec14782ce4f..9acadd5c0c0e7 100644
--- a/packages/core-data/src/selectors.ts
+++ b/packages/core-data/src/selectors.ts
@@ -47,6 +47,7 @@ export interface State {
 	navigationFallbackId: EntityRecordKey;
 	userPatternCategories: Array< UserPatternCategory >;
 	defaultTemplates: Record< string, string >;
+	registeredPostMeta: Record< string, Object >;
 }
 
 type EntityRecordKey = string | number;
diff --git a/packages/core-data/src/test/entity-provider.js b/packages/core-data/src/test/entity-provider.js
index 6b0b7bd5ef77a..4dc0d8a51663e 100644
--- a/packages/core-data/src/test/entity-provider.js
+++ b/packages/core-data/src/test/entity-provider.js
@@ -104,7 +104,7 @@ describe( 'useEntityBlockEditor', () => {
 					source: 'html',
 					selector: 'p',
 					default: '',
-					__experimentalRole: 'content',
+					role: 'content',
 				},
 			},
 			title: 'block title',
diff --git a/packages/core-data/src/test/resolvers.js b/packages/core-data/src/test/resolvers.js
index fa0d53d79aa7d..f15bee3b3c2b9 100644
--- a/packages/core-data/src/test/resolvers.js
+++ b/packages/core-data/src/test/resolvers.js
@@ -36,8 +36,8 @@ describe( 'getEntityRecord', () => {
 			receiveEntityRecords: jest.fn(),
 			__unstableAcquireStoreLock: jest.fn(),
 			__unstableReleaseStoreLock: jest.fn(),
-			receiveUserPermission: jest.fn(),
-			finishResolution: jest.fn(),
+			receiveUserPermissions: jest.fn(),
+			finishResolutions: jest.fn(),
 		} );
 		triggerFetch.mockReset();
 	} );
@@ -80,7 +80,6 @@ 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( () => {} ),
@@ -98,13 +97,6 @@ describe( 'getEntityRecord', () => {
 			query
 		)( { dispatch, select, registry } );
 
-		// Check resolution cache for an existing entity that fulfills the request with query.
-		expect( select.hasEntityRecords ).toHaveBeenCalledWith(
-			'root',
-			'postType',
-			queryObj
-		);
-
 		// Trigger apiFetch, test that the query is present in the url.
 		expect( triggerFetch ).toHaveBeenCalledWith( {
 			path: '/wp/v2/types/post?context=view&_envelope=1',
@@ -116,7 +108,7 @@ describe( 'getEntityRecord', () => {
 			'root',
 			'postType',
 			POST_TYPE,
-			queryObj
+			query
 		);
 
 		// Locks should have been acquired and released.
@@ -181,7 +173,7 @@ describe( 'getEntityRecords', () => {
 			{},
 			false,
 			undefined,
-			undefined
+			{ totalItems: 2, totalPages: 1 }
 		);
 	} );
 
@@ -219,6 +211,7 @@ describe( 'getEntityRecords', () => {
 		const finishResolutions = jest.fn();
 		const dispatch = Object.assign( jest.fn(), {
 			receiveEntityRecords: jest.fn(),
+			receiveUserPermissions: jest.fn(),
 			__unstableAcquireStoreLock: jest.fn(),
 			__unstableReleaseStoreLock: jest.fn(),
 			finishResolutions,
diff --git a/packages/core-data/src/utils/index.js b/packages/core-data/src/utils/index.js
index bb4b554443502..189635647779e 100644
--- a/packages/core-data/src/utils/index.js
+++ b/packages/core-data/src/utils/index.js
@@ -11,6 +11,6 @@ export { default as getNestedValue } from './get-nested-value';
 export { default as isNumericID } from './is-numeric-id';
 export {
 	getUserPermissionCacheKey,
-	getUserPermissionsFromResponse,
+	getUserPermissionsFromAllowHeader,
 	ALLOWED_RESOURCE_ACTIONS,
 } from './user-permissions';
diff --git a/packages/core-data/src/utils/user-permissions.js b/packages/core-data/src/utils/user-permissions.js
index a81c83f9e5af5..f1f02b5f5ba70 100644
--- a/packages/core-data/src/utils/user-permissions.js
+++ b/packages/core-data/src/utils/user-permissions.js
@@ -5,13 +5,11 @@ export const ALLOWED_RESOURCE_ACTIONS = [
 	'delete',
 ];
 
-export function getUserPermissionsFromResponse( response ) {
+export function getUserPermissionsFromAllowHeader( allowedMethods ) {
 	const permissions = {};
-
-	// Optional chaining operator is used here because the API requests don't
-	// return the expected result in the React native version. Instead, API requests
-	// only return the result, without including response properties like the headers.
-	const allowedMethods = response.headers?.get( 'allow' ) || '';
+	if ( ! allowedMethods ) {
+		return permissions;
+	}
 
 	const methods = {
 		create: 'POST',
diff --git a/packages/core-data/tsconfig.json b/packages/core-data/tsconfig.json
index 5db0de19f111e..26602d82ab0c0 100644
--- a/packages/core-data/tsconfig.json
+++ b/packages/core-data/tsconfig.json
@@ -21,7 +21,8 @@
 		{ "path": "../rich-text" },
 		{ "path": "../sync" },
 		{ "path": "../undo-manager" },
-		{ "path": "../url" }
+		{ "path": "../url" },
+		{ "path": "../warning" }
 	],
 	"include": [ "src/**/*" ]
 }
diff --git a/packages/create-block-interactive-template/CHANGELOG.md b/packages/create-block-interactive-template/CHANGELOG.md
index e4e54865beb6b..24dcfd52b7b58 100644
--- a/packages/create-block-interactive-template/CHANGELOG.md
+++ b/packages/create-block-interactive-template/CHANGELOG.md
@@ -1,6 +1,22 @@
 <!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
 
-## Unreleased
+## 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)
 
diff --git a/packages/create-block-interactive-template/README.md b/packages/create-block-interactive-template/README.md
index 4417c647495c4..b50adb4926524 100644
--- a/packages/create-block-interactive-template/README.md
+++ b/packages/create-block-interactive-template/README.md
@@ -1,6 +1,6 @@
 # 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
+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
 
diff --git a/packages/create-block-interactive-template/block-templates/README.md.mustache b/packages/create-block-interactive-template/block-templates/README.md.mustache
index 3e64ce8f629a3..4a13743750f74 100644
--- a/packages/create-block-interactive-template/block-templates/README.md.mustache
+++ b/packages/create-block-interactive-template/block-templates/README.md.mustache
@@ -3,6 +3,4 @@
 > **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.
 
-{{#isBasicVariant}}
 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.
-{{/isBasicVariant}}
\ No newline at end of file
diff --git a/packages/create-block-interactive-template/block-templates/render.php.mustache b/packages/create-block-interactive-template/block-templates/render.php.mustache
index 3a41a2981cd8c..4f84b30dbcdbd 100644
--- a/packages/create-block-interactive-template/block-templates/render.php.mustache
+++ b/packages/create-block-interactive-template/block-templates/render.php.mustache
@@ -1,4 +1,3 @@
-{{#isBasicVariant}}
 <?php
 /**
  * PHP file to use when rendering the block type on the server to show on the front end.
@@ -11,8 +10,19 @@
  * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
  */
 
-// Generate unique id for aria-controls.
+// 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
@@ -20,9 +30,15 @@ $unique_id = wp_unique_id( 'p-' );
 	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.toggle"
+		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 ); ?>"
 	>
@@ -38,4 +54,3 @@ $unique_id = wp_unique_id( 'p-' );
 		?>
 	</p>
 </div>
-{{/isBasicVariant}}
diff --git a/packages/create-block-interactive-template/block-templates/style.scss.mustache b/packages/create-block-interactive-template/block-templates/style.scss.mustache
index 1c73fa1c38ff9..c8aa9f232136e 100644
--- a/packages/create-block-interactive-template/block-templates/style.scss.mustache
+++ b/packages/create-block-interactive-template/block-templates/style.scss.mustache
@@ -9,4 +9,19 @@
 	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
index b4bae3939461d..3fcf1ba365d26 100644
--- a/packages/create-block-interactive-template/block-templates/view.js.mustache
+++ b/packages/create-block-interactive-template/block-templates/view.js.mustache
@@ -1,15 +1,23 @@
-{{#isBasicVariant}}
+{{#isDefaultVariant}}
 /**
  * WordPress dependencies
  */
-import { store, getContext } from "@wordpress/interactivity";
+import { store, getContext } from '@wordpress/interactivity';
 
-store( '{{namespace}}', {
+const { state } = store( '{{namespace}}', {
+	state: {
+		get themeText() {
+			return state.isDark ? state.darkText : state.lightText;
+		}
+	},
 	actions: {
-		toggle: () => {
+		toggleOpen() {
 			const context = getContext();
 			context.isOpen = ! context.isOpen;
 		},
+		toggleTheme() {
+			state.isDark = ! state.isDark;
+		}
 	},
 	callbacks: {
 		logIsOpen: () => {
@@ -19,5 +27,4 @@ store( '{{namespace}}', {
 		},
 	},
 } );
-
-{{/isBasicVariant}}
+{{/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 0000000000000..11670442d7370
--- /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
index bb203b7023e28..94f615df2747f 100644
--- a/packages/create-block-interactive-template/index.js
+++ b/packages/create-block-interactive-template/index.js
@@ -7,7 +7,7 @@ module.exports = {
 	defaultValues: {
 		slug: 'example-interactive',
 		title: 'Example Interactive',
-		description: 'An interactive block with the Interactivity API',
+		description: 'An interactive block with the Interactivity API.',
 		dashicon: 'media-interactive',
 		npmDependencies: [ '@wordpress/interactivity' ],
 		customPackageJSON: { files: [ '[^.]*' ] },
@@ -24,7 +24,14 @@ module.exports = {
 		},
 	},
 	variants: {
-		basic: {},
+		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
index c1b10109ed226..e8b38dab906cc 100644
--- a/packages/create-block-interactive-template/package.json
+++ b/packages/create-block-interactive-template/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block-interactive-template",
-	"version": "2.3.0",
+	"version": "2.9.0",
 	"description": "Template for @wordpress/create-block to create interactive blocks with the Interactivity API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache b/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache
index 83890732cc41b..48469aa7d0d93 100644
--- a/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache
+++ b/packages/create-block-interactive-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}}
diff --git a/packages/create-block-interactive-template/plugin-templates/readme.txt.mustache b/packages/create-block-interactive-template/plugin-templates/readme.txt.mustache
index f069906fb19fa..c3abf5ae4ec02 100644
--- a/packages/create-block-interactive-template/plugin-templates/readme.txt.mustache
+++ b/packages/create-block-interactive-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-tutorial-template/CHANGELOG.md b/packages/create-block-tutorial-template/CHANGELOG.md
index 1181037e73f39..9be4223c70f38 100644
--- a/packages/create-block-tutorial-template/CHANGELOG.md
+++ b/packages/create-block-tutorial-template/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/create-block-tutorial-template/package.json b/packages/create-block-tutorial-template/package.json
index 095be8e8ca851..9eceb95dda83c 100644
--- a/packages/create-block-tutorial-template/package.json
+++ b/packages/create-block-tutorial-template/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block-tutorial-template",
-	"version": "4.3.0",
+	"version": "4.9.0",
 	"description": "This is a template for @wordpress/create-block that creates an example 'Copyright Date' block. This block is used in the official WordPress block development Quick Start Guide.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache b/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache
index 6de24df94c8d8..7ce4be3f7cc73 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.2
- * Requires PHP:      7.0
+ * Requires at least: 6.6
+ * Requires PHP:      7.2
 {{#author}}
  * Author:            {{author}}
 {{/author}}
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 d2b31bed6c0e6..c3abf5ae4ec02 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.4
+Tested up to:      6.6
 Stable tag:        {{version}}
 {{#license}}
 License:           {{license}}
diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md
index bcb86a1a37762..db161872fb982 100644
--- a/packages/create-block/CHANGELOG.md
+++ b/packages/create-block/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/create-block/lib/init-wp-scripts.js b/packages/create-block/lib/init-wp-scripts.js
index 531eb970d8925..ca0101957f47f 100644
--- a/packages/create-block/lib/init-wp-scripts.js
+++ b/packages/create-block/lib/init-wp-scripts.js
@@ -16,7 +16,7 @@ module.exports = async ( { slug } ) => {
 	info(
 		'Installing `@wordpress/scripts` package. It might take a couple of minutes...'
 	);
-	await command( 'npm install @wordpress/scripts@27 --save-dev', {
+	await command( 'npm install @wordpress/scripts --save-dev', {
 		cwd,
 	} );
 
diff --git a/packages/create-block/lib/templates/es5/$slug.php.mustache b/packages/create-block/lib/templates/es5/$slug.php.mustache
index 0f64471e434a7..825fd1bfd8b5a 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}}
diff --git a/packages/create-block/lib/templates/es5/readme.txt.mustache b/packages/create-block/lib/templates/es5/readme.txt.mustache
index f069906fb19fa..c3abf5ae4ec02 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/plugin/$slug.php.mustache b/packages/create-block/lib/templates/plugin/$slug.php.mustache
index 45487ef61006f..75666af3a850b 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}}
diff --git a/packages/create-block/lib/templates/plugin/readme.txt.mustache b/packages/create-block/lib/templates/plugin/readme.txt.mustache
index f069906fb19fa..c3abf5ae4ec02 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 51f43884c5497..7c31cb57687f0 100644
--- a/packages/create-block/package.json
+++ b/packages/create-block/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block",
-	"version": "4.46.0",
+	"version": "4.52.0",
 	"description": "Generates PHP, JS and CSS code for registering a block for a WordPress plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/customize-widgets/CHANGELOG.md b/packages/customize-widgets/CHANGELOG.md
index 362f67c48ae39..46064bac3391e 100644
--- a/packages/customize-widgets/CHANGELOG.md
+++ b/packages/customize-widgets/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
index b68a9cf232a17..7231de9ac1b18 100644
--- a/packages/customize-widgets/package.json
+++ b/packages/customize-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/customize-widgets",
-	"version": "5.3.0",
+	"version": "5.9.0",
 	"description": "Widgets blocks in Customizer Module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/customize-widgets/src/components/error-boundary/index.js b/packages/customize-widgets/src/components/error-boundary/index.js
index d1aece49b9173..0fff18a616d11 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/header/style.scss b/packages/customize-widgets/src/components/header/style.scss
index 27460a82e0ad1..5c3f37a0bf0d4 100644
--- a/packages/customize-widgets/src/components/header/style.scss
+++ b/packages/customize-widgets/src/components/header/style.scss
@@ -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 c0156cf774ddc..4f271bef9e9a3 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/welcome-guide/index.js b/packages/customize-widgets/src/components/welcome-guide/index.js
index 52807118baec7..3f7b2f45d86b7 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' )
diff --git a/packages/data-controls/CHANGELOG.md b/packages/data-controls/CHANGELOG.md
index 5ea9633e90217..6e70039bc7476 100644
--- a/packages/data-controls/CHANGELOG.md
+++ b/packages/data-controls/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/data-controls/package.json b/packages/data-controls/package.json
index 6a6dfc2fc0939..cf4aab46c6dae 100644
--- a/packages/data-controls/package.json
+++ b/packages/data-controls/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data-controls",
-	"version": "4.3.0",
+	"version": "4.9.0",
 	"description": "A set of common controls for the @wordpress/data api.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/data/CHANGELOG.md b/packages/data/CHANGELOG.md
index 2de51f1f81539..71db937ed73b4 100644
--- a/packages/data/CHANGELOG.md
+++ b/packages/data/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/data/package.json b/packages/data/package.json
index a99cee1cc469e..7ba4efc459225 100644
--- a/packages/data/package.json
+++ b/packages/data/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data",
-	"version": "10.3.0",
+	"version": "10.9.0",
 	"description": "Data module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
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 7b595b9740eeb..f6fce490a6887 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
@@ -25,14 +25,14 @@ 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
 		);
@@ -48,7 +48,7 @@ const useDispatchWithMap = ( dispatchMap, deps ) => {
 					return [
 						propName,
 						( ...args ) =>
-							currentDispatchMap
+							currentDispatchMapRef
 								.current( registry.dispatch, registry )
 								[ propName ]( ...args ),
 					];
diff --git a/packages/data/src/components/with-dispatch/test/index.js b/packages/data/src/components/with-dispatch/test/index.js
index f4e38d28edba0..6bcda99ba9c0f 100644
--- a/packages/data/src/components/with-dispatch/test/index.js
+++ b/packages/data/src/components/with-dispatch/test/index.js
@@ -58,7 +58,9 @@ describe( 'withDispatch', () => {
 					} );
 				},
 			};
-		} )( ( props ) => <Button onClick={ props.increment } /> );
+		} )( ( props ) => (
+			<Button __next40pxDefaultSize onClick={ props.increment } />
+		) );
 
 		const { rerender } = render(
 			<RegistryProvider value={ registry }>
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index 6efa4a8508239..7569cfb93ac0b 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -2,17 +2,54 @@
 
 ## Unreleased
 
+## 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.
+-   `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.
+-   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
 
diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
index 10da0e364a499..95b8fc898555c 100644
--- a/packages/dataviews/README.md
+++ b/packages/dataviews/README.md
@@ -2,6 +2,10 @@
 
 DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).
 
+DataViews is data agnostic, it can work with data coming from a static (JSON file) or dynamic source (HTTP Request) — it just requires the data to be an array of objects that have an unique identifier. Consumers are responsible to query the data source appropiately based on the DataViews props:
+
+![DataViews flow](https://developer.wordpress.org/files/2024/09/368600071-20aa078f-7c3d-406d-8dd0-8b764addd22a.png "DataViews flow")
+
 ## Installation
 
 Install the module
@@ -22,6 +26,7 @@ const Example = () => {
 			fields={ fields }
 			view={ view }
 			onChangeView={ onChangeView }
+			defaultLayouts={ defaultLayouts }
 			actions={ actions }
 			paginationInfo={ paginationInfo }
 		/>
@@ -29,6 +34,8 @@ const Example = () => {
 };
 ```
 
+<div class="callout callout-info">At <a href="https://wordpress.github.io/gutenberg/">WordPress Gutenberg's Storybook</a> there's and <a href="https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataviews--docs">example implementation of the Dataviews component</a></div>
+
 ## Properties
 
 ### `data`: `Object[]`
@@ -71,62 +78,66 @@ const STATUSES = [
 const fields = [
 	{
 		id: 'title',
-		header: 'Title',
+		label: 'Title',
 		enableHiding: false,
 	},
 	{
 		id: 'date',
-		header: 'Date',
+		label: 'Date',
 		render: ( { item } ) => {
-			return (
-				<time>{ getFormattedDate( item.date ) }</time>
-			);
-		}
+			return <time>{ getFormattedDate( item.date ) }</time>;
+		},
 	},
 	{
 		id: 'author',
-		header: __( 'Author' ),
+		label: __( 'Author' ),
 		render: ( { item } ) => {
-			return (
-				<a href="...">{ item.author }</a>
-			);
+			return <a href="...">{ item.author }</a>;
 		},
 		elements: [
 			{ value: 1, label: 'Admin' },
-			{ value: 2, label: 'User' }
+			{ value: 2, label: 'User' },
 		],
 		filterBy: {
-			operators: [ 'is', 'isNot' ]
+			operators: [ 'is', 'isNot' ],
 		},
-		enableSorting: false
+		enableSorting: false,
 	},
 	{
-		header: __( 'Status' ),
+		label: __( 'Status' ),
 		id: 'status',
 		getValue: ( { item } ) =>
-			STATUSES.find( ( { value } ) => value === item.status )
-				?.label ?? item.status,
+			STATUSES.find( ( { value } ) => value === item.status )?.label ??
+			item.status,
 		elements: STATUSES,
 		filterBy: {
 			operators: [ 'isAny' ],
 		},
 		enableSorting: false,
 	},
-]
+];
 ```
 
 Each field is an object with the following properties:
 
 -   `id`: identifier for the field. Unique.
--   `header`: the field's name to be shown in the UI.
+-   `label`: the field's name to be shown in the UI.
 -   `getValue`: function that returns the value of the field, defaults to `field[id]`.
 -   `render`: function that renders the field. Optional, `getValue` will be used if `render` is not defined.
--   `elements`: the set of valid values for the field's value.
+-   <code id="fields-elements">elements</code>: The list of options to pick from when using the field as a filter or when editing (DataForm component). It expects an array of objects with the following properties:
+
+    -   `value`: The id of the value to filter to (for internal use)
+    -   `label`: The text that will be displayed in the UI for the item.
+    -   `description`: A longer description that describes the element, to also be displayed. Optional.
+
+    To enable the filter by a field we just need to set a proper value to the `elements` property of the field we'd like to filter by.
+
 -   `type`: the type of the field. See "Field types".
 -   `enableSorting`: whether the data can be sorted by the given field. True by default.
 -   `enableHiding`: whether the field can be hidden. True by default.
--   `filterBy`: configuration for the filters.
-    -   `operators`: the list of operators supported by the field.
+-   `enableGlobalSearch`: whether the field is searchable. False by default.
+-   `filterBy`: configuration for the filters enabled by the `elements` property.
+    -   `operators`: the list of [operators](#operators) supported by the field.
     -   `isPrimary`: whether it is a primary filter. A primary filter is always visible and is not listed in the "Add filter" component, except for the list layout where it behaves like a secondary filter.
 
 ### `view`: `object`
@@ -165,12 +176,23 @@ Properties:
 -   `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`.
--   `fields`: the `id` of the fields that are visible in the UI.
+
+-   `fields`: the `id` of the fields 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.
-    -   `mediaField`: used by the `grid` and `list` layouts. The `id` of the field to be used for rendering each card's media.
-    -   `primaryField`: used by the `table`, `grid` and `list` layouts. The `id` of the field to be highlighted in each row/card/item.
+
+#### Properties of `layout`
+
+| Properties of `layout`                                                                                          | Table | Grid | List |
+| --------------------------------------------------------------------------------------------------------------- | ----- | ---- | ---- |
+| `primaryField`: the field's `id` to be highlighted in each layout. It's not hidable.                            | ✓     | ✓    | ✓    |
+| `mediaField`: the field's `id` to be used for rendering each card's media. It's not hiddable.                   |       | ✓    | ✓    |
+| `columnFields`: a list of field's `id` to render vertically stacked instead of horizontally (the default).      |       | ✓    |      |
+| `badgeFields`: a list of field's `id` to render without label and styled as badges.                             |       | ✓    |      |
+| `combinedFields`: a list of "virtual" fields that are made by combining others. See "Combining fields" section. | ✓     |      |      |
+| `styles`: additional `width`, `maxWidth`, `minWidth` styles for each field column.                              | ✓     |      |      |
 
 ### `onChangeView`: `function`
 
@@ -252,6 +274,8 @@ Each action is an object with the following properties:
 -   `callback`: function, required unless `RenderModal` is provided. Callback function that takes the record as input and performs the required action.
 -   `RenderModal`: ReactElement, optional. If an action requires that some UI be rendered in a modal, it can provide a component which takes as props the record as `item` and a `closeModal` function. When this prop is provided, the `callback` property is ignored.
 -   `hideModalHeader`: boolean, optional. This property is used in combination with `RenderModal` and controls the visibility of the modal's header. If the action renders a modal and doesn't hide the header, the action's label is going to be used in the modal's header.
+-   `supportsBulk`: Whether the action can be used as a bulk action. False by default.
+-   `disabled`: Whether the action is disabled. False by default.
 
 ### `paginationInfo`: `Object`
 
@@ -276,7 +300,21 @@ Whether the data is loading. `false` by default.
 
 ### `defaultLayouts`: `Record< string, view >`
 
-Default layouts. By default, uses empty layouts: `table`, `grid`, `list`.
+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: {
+		layout: {
+			primaryField: 'my-key',
+		},
+	},
+};
+```
+
+The `defaultLayouts` property should be an object that includes properties named `table`, `grid`, or `list`. Each of these properties should contain a `layout` property, which holds the configuration for each specific layout type. Check [here](#properties-of-layout) the full list of properties available for each layout's configuration
 
 ### `onChangeSelection`: `function`
 
@@ -294,6 +332,35 @@ Callback that signals the user selected one of more items, and takes them as par
 
 > The `enumeration` type was removed as it was deemed redundant with the field.elements metadata. New types will be introduced soon.
 
+## Combining fields
+
+The `table` layout has the ability to create "virtual" fields that are made out by combining existing ones.
+
+Each "virtual field", has to provide an `id` and `label` (optionally a `header` instead), which have the same meaning as any other field.
+
+Additionally, they need to provide:
+
+-   `children`: a list of field's `id` to combine
+-   `direction`: how should they be stacked, `vertical` or `horizontal`
+
+For example, this is how you'd define a `site` field which is a combination of a `title` and `description` fields, which are not displayed:
+
+```js
+{
+	fields: [ 'site', 'status' ],
+	layout: {
+		combinedFields: [
+			{
+				id: 'site',
+				label: 'Site',
+				children: [ 'title', 'description' ],
+				direction: 'vertical',
+			}
+		]
+	}
+}
+```
+
 ### Operators
 
 Allowed operators:
diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json
index f74bb3a8b0678..d5b465a3f7b2d 100644
--- a/packages/dataviews/package.json
+++ b/packages/dataviews/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "3.0.0",
+	"version": "4.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",
@@ -28,7 +28,7 @@
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@ariakit/react": "^0.3.12",
+		"@ariakit/react": "^0.4.10",
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",
@@ -38,6 +38,7 @@
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/primitives": "file:../primitives",
 		"@wordpress/private-apis": "file:../private-apis",
+		"@wordpress/warning": "file:../warning",
 		"clsx": "^2.1.1",
 		"remove-accents": "^0.5.0"
 	},
diff --git a/packages/dataviews/src/components/dataform-combined-edit/index.tsx b/packages/dataviews/src/components/dataform-combined-edit/index.tsx
new file mode 100644
index 0000000000000..6b2a752fa8de5
--- /dev/null
+++ b/packages/dataviews/src/components/dataform-combined-edit/index.tsx
@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormCombinedEditProps, NormalizedField } from '../../types';
+
+function Header( { title }: { title: string } ) {
+	return (
+		<VStack className="dataforms-layouts__dropdown-header" spacing={ 4 }>
+			<HStack alignment="center">
+				<Heading level={ 2 } size={ 13 }>
+					{ title }
+				</Heading>
+				<Spacer />
+			</HStack>
+		</VStack>
+	);
+}
+
+function DataFormCombinedEdit< Item >( {
+	field,
+	data,
+	onChange,
+	hideLabelFromVision,
+}: DataFormCombinedEditProps< Item > ) {
+	const className = 'dataforms-combined-edit';
+	const visibleChildren = ( field.children ?? [] )
+		.map( ( fieldId ) => field.fields.find( ( { id } ) => id === fieldId ) )
+		.filter(
+			( childField ): childField is NormalizedField< Item > =>
+				!! childField
+		);
+	const children = visibleChildren.map( ( child ) => {
+		return (
+			<div className="dataforms-combined-edit__field" key={ child.id }>
+				<child.Edit
+					data={ data }
+					field={ child }
+					onChange={ onChange }
+				/>
+			</div>
+		);
+	} );
+
+	const Stack = field.direction === 'horizontal' ? HStack : VStack;
+
+	return (
+		<>
+			{ ! hideLabelFromVision && <Header title={ field.label } /> }
+			<Stack spacing={ 4 } className={ className } as="fieldset">
+				{ children }
+			</Stack>
+		</>
+	);
+}
+
+export default DataFormCombinedEdit;
diff --git a/packages/dataviews/src/components/dataform-combined-edit/style.scss b/packages/dataviews/src/components/dataform-combined-edit/style.scss
new file mode 100644
index 0000000000000..0b59cbc9a4776
--- /dev/null
+++ b/packages/dataviews/src/components/dataform-combined-edit/style.scss
@@ -0,0 +1,12 @@
+.dataforms-layouts-panel__field-dropdown {
+	.dataforms-combined-edit {
+		border: none;
+		padding: 0;
+	}
+}
+
+.dataforms-combined-edit {
+	&__field {
+		flex: 1 1 auto;
+	}
+}
diff --git a/packages/dataviews/src/components/dataform/index.tsx b/packages/dataviews/src/components/dataform/index.tsx
index e61fea075c9b5..58f0bf06afb41 100644
--- a/packages/dataviews/src/components/dataform/index.tsx
+++ b/packages/dataviews/src/components/dataform/index.tsx
@@ -1,106 +1,17 @@
-/**
- * External dependencies
- */
-import type { Dispatch, SetStateAction } from 'react';
-
-/**
- * WordPress dependencies
- */
-import { TextControl } from '@wordpress/components';
-import { useCallback, useMemo } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
-import type { Form, Field, NormalizedField } from '../../types';
-import { normalizeFields } from '../../normalize-fields';
-
-type DataFormProps< Item > = {
-	data: Item;
-	fields: Field< Item >[];
-	form: Form;
-	onChange: Dispatch< SetStateAction< Item > >;
-};
-
-type DataFormControlProps< Item > = {
-	data: Item;
-	field: NormalizedField< Item >;
-	onChange: Dispatch< SetStateAction< Item > >;
-};
-
-function DataFormTextControl< Item >( {
-	data,
-	field,
-	onChange,
-}: DataFormControlProps< Item > ) {
-	const { id, header, placeholder } = field;
-	const value = field.getValue( { item: data } );
-
-	const onChangeControl = useCallback(
-		( newValue: string ) =>
-			onChange( ( prevItem: Item ) => ( {
-				...prevItem,
-				[ id ]: newValue,
-			} ) ),
-		[ id, onChange ]
-	);
-
-	return (
-		<TextControl
-			label={ header }
-			placeholder={ placeholder }
-			value={ value }
-			onChange={ onChangeControl }
-			__next40pxDefaultSize
-		/>
-	);
-}
-
-const controls: {
-	[ key: string ]: < Item >(
-		props: DataFormControlProps< Item >
-	) => JSX.Element;
-} = {
-	text: DataFormTextControl,
-};
-
-function getControlForField< Item >( field: NormalizedField< Item > ) {
-	if ( ! field.type ) {
-		return null;
-	}
-
-	if ( ! Object.keys( controls ).includes( field.type ) ) {
-		return null;
-	}
-
-	return controls[ field.type ];
-}
+import type { DataFormProps } from '../../types';
+import { getFormLayout } from '../../dataforms-layouts';
 
 export default function DataForm< Item >( {
-	data,
-	fields,
 	form,
-	onChange,
+	...props
 }: DataFormProps< Item > ) {
-	const visibleFields = useMemo(
-		() =>
-			normalizeFields(
-				fields.filter(
-					( { id } ) => !! form.visibleFields?.includes( id )
-				)
-			),
-		[ fields, form.visibleFields ]
-	);
+	const layout = getFormLayout( form.type ?? 'regular' );
+	if ( ! layout ) {
+		return null;
+	}
 
-	return visibleFields.map( ( field ) => {
-		const DataFormControl = getControlForField( field );
-		return DataFormControl ? (
-			<DataFormControl
-				key={ field.id }
-				data={ data }
-				field={ field }
-				onChange={ onChange }
-			/>
-		) : null;
-	} );
+	return <layout.component form={ form } { ...props } />;
 }
diff --git a/packages/dataviews/src/components/dataform/stories/index.story.tsx b/packages/dataviews/src/components/dataform/stories/index.story.tsx
new file mode 100644
index 0000000000000..c929c21f1c21a
--- /dev/null
+++ b/packages/dataviews/src/components/dataform/stories/index.story.tsx
@@ -0,0 +1,185 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataForm from '../index';
+import type { CombinedFormField } from '../../../types';
+
+const meta = {
+	title: 'DataViews/DataForm',
+	component: DataForm,
+	argTypes: {
+		type: {
+			control: { type: 'select' },
+			description:
+				'Chooses the layout of the form. "regular" is the default layout.',
+			options: [ 'regular', 'panel' ],
+		},
+	},
+};
+export default meta;
+
+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' },
+		],
+	},
+	{
+		id: 'password',
+		label: 'Password',
+		type: 'text' as const,
+	},
+];
+
+export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
+	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',
+	} );
+
+	const form = {
+		fields: [
+			'title',
+			'order',
+			'author',
+			'reviewer',
+			'status',
+			'date',
+			'birthdate',
+		],
+	};
+
+	return (
+		<DataForm
+			data={ post }
+			fields={ fields }
+			form={ {
+				...form,
+				type,
+			} }
+			onChange={ ( edits ) =>
+				setPost( ( prev ) => ( {
+					...prev,
+					...edits,
+				} ) )
+			}
+		/>
+	);
+};
+
+const CombinedFieldsComponent = ( {
+	type = 'regular',
+	combinedFieldDirection = 'vertical',
+}: {
+	type: 'panel' | 'regular';
+	combinedFieldDirection: 'vertical' | 'horizontal';
+} ) => {
+	const [ post, setPost ] = useState( {
+		title: 'Hello, World!',
+		order: 2,
+		author: 1,
+		status: 'draft',
+	} );
+
+	const form = {
+		fields: [ 'title', 'status_and_visibility', 'order', 'author' ],
+		combinedFields: [
+			{
+				id: 'status_and_visibility',
+				label: 'Status & Visibility',
+				children: [ 'status', 'password' ],
+				direction: combinedFieldDirection,
+				render: ( { item } ) => item.status,
+			},
+		] as CombinedFormField< any >[],
+	};
+
+	return (
+		<DataForm
+			data={ post }
+			fields={ fields }
+			form={ {
+				...form,
+				type,
+			} }
+			onChange={ ( edits ) =>
+				setPost( ( prev ) => ( {
+					...prev,
+					...edits,
+				} ) )
+			}
+		/>
+	);
+};
+
+export const CombinedFields = {
+	title: 'DataViews/CombinedFields',
+	render: CombinedFieldsComponent,
+	argTypes: {
+		...meta.argTypes,
+		combinedFieldDirection: {
+			control: { type: 'select' },
+			description:
+				'Chooses the direction of the combined field. "vertical" is the default layout.',
+			options: [ 'vertical', 'horizontal' ],
+		},
+	},
+};
diff --git a/packages/dataviews/src/components/dataviews-bulk-actions-toolbar/index.tsx b/packages/dataviews/src/components/dataviews-bulk-actions-toolbar/index.tsx
deleted file mode 100644
index c25328db6a108..0000000000000
--- a/packages/dataviews/src/components/dataviews-bulk-actions-toolbar/index.tsx
+++ /dev/null
@@ -1,288 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	ToolbarButton,
-	Toolbar,
-	ToolbarGroup,
-	__unstableMotion as motion,
-	__unstableAnimatePresence as AnimatePresence,
-} from '@wordpress/components';
-import { useMemo, useState, useRef, useContext } from '@wordpress/element';
-import { _n, sprintf, __ } from '@wordpress/i18n';
-import { closeSmall } from '@wordpress/icons';
-import { useReducedMotion } from '@wordpress/compose';
-import { useRegistry } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { useSomeItemHasAPossibleBulkAction } from '../dataviews-bulk-actions';
-import DataViewsContext from '../dataviews-context';
-import { ActionWithModal } from '../dataviews-item-actions';
-import { LAYOUT_GRID, LAYOUT_TABLE } from '../../constants';
-import type { Action } from '../../types';
-import type { ActionTriggerProps } from '../dataviews-item-actions';
-import type { SetSelection } from '../../private-types';
-
-interface ActionButtonProps< Item > {
-	action: Action< Item >;
-	selectedItems: Item[];
-	actionInProgress: string | null;
-	setActionInProgress: ( actionId: string | null ) => void;
-}
-
-interface ToolbarContentProps< Item > {
-	selection: string[];
-	actionsToShow: Action< Item >[];
-	selectedItems: Item[];
-	onChangeSelection: SetSelection;
-}
-
-const SNACKBAR_VARIANTS = {
-	init: {
-		bottom: -48,
-	},
-	open: {
-		bottom: 24,
-		transition: {
-			bottom: { type: 'tween', duration: 0.2, ease: [ 0, 0, 0.2, 1 ] },
-		},
-	},
-	exit: {
-		opacity: 0,
-		bottom: 24,
-		transition: {
-			opacity: { type: 'tween', duration: 0.2, ease: [ 0, 0, 0.2, 1 ] },
-		},
-	},
-};
-
-function ActionTrigger< Item >( {
-	action,
-	onClick,
-	isBusy,
-	items,
-}: ActionTriggerProps< Item > ) {
-	const label =
-		typeof action.label === 'string' ? action.label : action.label( items );
-	return (
-		<ToolbarButton
-			disabled={ isBusy }
-			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={ () => {
-				setActionInProgress( action.id );
-				action.callback( selectedItems, {
-					registry,
-				} );
-			} }
-			items={ selectedEligibleItems }
-			isBusy={ actionInProgress === action.id }
-		/>
-	);
-}
-
-function renderToolbarContent< Item >(
-	selection: string[],
-	actionsToShow: Action< Item >[],
-	selectedItems: Item[],
-	actionInProgress: string | null,
-	setActionInProgress: ( actionId: string | null ) => void,
-	onChangeSelection: SetSelection
-) {
-	return (
-		<>
-			<ToolbarGroup>
-				<div className="dataviews-bulk-actions-toolbar__selection-count">
-					{ selection.length === 1
-						? __( '1 item selected' )
-						: sprintf(
-								// translators: %s: Total number of selected items.
-								_n(
-									'%s item selected',
-									'%s items selected',
-									selection.length
-								),
-								selection.length
-						  ) }
-				</div>
-			</ToolbarGroup>
-			<ToolbarGroup>
-				{ actionsToShow.map( ( action ) => {
-					return (
-						<ActionButton
-							key={ action.id }
-							action={ action }
-							selectedItems={ selectedItems }
-							actionInProgress={ actionInProgress }
-							setActionInProgress={ setActionInProgress }
-						/>
-					);
-				} ) }
-			</ToolbarGroup>
-			<ToolbarGroup>
-				<ToolbarButton
-					icon={ closeSmall }
-					showTooltip
-					tooltipPosition="top"
-					label={ __( 'Cancel' ) }
-					disabled={ !! actionInProgress }
-					onClick={ () => {
-						onChangeSelection( EMPTY_ARRAY );
-					} }
-				/>
-			</ToolbarGroup>
-		</>
-	);
-}
-
-function ToolbarContent< Item >( {
-	selection,
-	actionsToShow,
-	selectedItems,
-	onChangeSelection,
-}: ToolbarContentProps< Item > ) {
-	const [ actionInProgress, setActionInProgress ] = useState< string | null >(
-		null
-	);
-	const buttons = useRef< JSX.Element | null >( null );
-	if ( ! actionInProgress ) {
-		if ( buttons.current ) {
-			buttons.current = null;
-		}
-		return renderToolbarContent(
-			selection,
-			actionsToShow,
-			selectedItems,
-			actionInProgress,
-			setActionInProgress,
-			onChangeSelection
-		);
-	} else if ( ! buttons.current ) {
-		buttons.current = renderToolbarContent(
-			selection,
-			actionsToShow,
-			selectedItems,
-			actionInProgress,
-			setActionInProgress,
-			onChangeSelection
-		);
-	}
-	return buttons.current;
-}
-
-function _BulkActionsToolbar() {
-	const {
-		data,
-		selection,
-		actions = EMPTY_ARRAY,
-		onChangeSelection,
-		getItemId,
-	} = useContext( DataViewsContext );
-	const isReducedMotion = useReducedMotion();
-	const selectedItems = useMemo( () => {
-		return data.filter( ( item ) =>
-			selection.includes( getItemId( item ) )
-		);
-	}, [ selection, data, getItemId ] );
-
-	const actionsToShow = useMemo(
-		() =>
-			actions.filter( ( action ) => {
-				return (
-					action.supportsBulk &&
-					action.icon &&
-					selectedItems.some(
-						( item ) =>
-							! action.isEligible || action.isEligible( item )
-					)
-				);
-			} ),
-		[ actions, selectedItems ]
-	);
-
-	if (
-		( selection && selection.length === 0 ) ||
-		actionsToShow.length === 0
-	) {
-		return null;
-	}
-
-	return (
-		<AnimatePresence>
-			<motion.div
-				layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
-				initial="init"
-				animate="open"
-				exit="exit"
-				variants={ isReducedMotion ? undefined : SNACKBAR_VARIANTS }
-				className="dataviews-bulk-actions-toolbar"
-			>
-				<Toolbar label={ __( 'Bulk actions' ) }>
-					<div className="dataviews-bulk-actions-toolbar__wrapper">
-						<ToolbarContent
-							selection={ selection }
-							actionsToShow={ actionsToShow }
-							selectedItems={ selectedItems }
-							onChangeSelection={ onChangeSelection }
-						/>
-					</div>
-				</Toolbar>
-			</motion.div>
-		</AnimatePresence>
-	);
-}
-
-export default function BulkActionsToolbar() {
-	const { data, actions = [], view } = useContext( DataViewsContext );
-	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
-		actions,
-		data
-	);
-	if (
-		! [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) ||
-		! hasPossibleBulkAction
-	) {
-		return null;
-	}
-
-	return <_BulkActionsToolbar />;
-}
diff --git a/packages/dataviews/src/components/dataviews-bulk-actions-toolbar/style.scss b/packages/dataviews/src/components/dataviews-bulk-actions-toolbar/style.scss
deleted file mode 100644
index 21e6c2ad4d4d6..0000000000000
--- a/packages/dataviews/src/components/dataviews-bulk-actions-toolbar/style.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-.dataviews-bulk-actions-toolbar {
-	position: sticky;
-	display: flex;
-	flex-direction: column;
-	align-content: center;
-	flex-wrap: wrap;
-	width: fit-content;
-	margin-left: auto;
-	margin-right: auto;
-	bottom: $grid-unit-30;
-	z-index: z-index(".dataviews-bulk-actions-toolbar");
-
-	.components-accessible-toolbar {
-		border-color: $gray-300;
-		box-shadow: $shadow-popover;
-
-		.components-toolbar-group {
-			border-color: $gray-200;
-
-			&:last-child {
-				border: 0;
-			}
-		}
-	}
-
-	.dataviews-bulk-actions-toolbar__selection-count {
-		display: flex;
-		align-items: center;
-		margin: 0 $grid-unit-10 0 $grid-unit-10;
-	}
-}
-
-.dataviews-bulk-actions-toolbar__wrapper {
-	display: flex;
-	flex-grow: 1;
-	width: 100%;
-
-	.components-toolbar-group {
-		align-items: center;
-	}
-
-	.components-button.is-busy {
-		max-height: $button-size;
-	}
-}
diff --git a/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx b/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx
index 2047307bd7e90..5eb9c5e1b6a4d 100644
--- a/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx
+++ b/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx
@@ -2,47 +2,23 @@
  * WordPress dependencies
  */
 import {
-	privateApis as componentsPrivateApis,
 	Button,
-	Modal,
+	CheckboxControl,
+	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { __, sprintf, _n } from '@wordpress/i18n';
-import { useMemo, useState, useCallback, useContext } from '@wordpress/element';
+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 { LAYOUT_TABLE, LAYOUT_GRID } from '../../constants';
-import { unlock } from '../../lock-unlock';
-import type { Action, ActionModal } from '../../types';
-
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuGroupV2: DropdownMenuGroup,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuSeparatorV2: DropdownMenuSeparator,
-} = unlock( componentsPrivateApis );
-
-interface ActionWithModalProps< Item > {
-	action: ActionModal< Item >;
-	selectedItems: Item[];
-	setActionWithModal: ( action?: ActionModal< Item > ) => void;
-	onMenuOpenChange: ( isOpen: boolean ) => void;
-}
-
-interface BulkActionsItemProps< Item > {
-	action: Action< Item >;
-	selectedItems: Item[];
-	setActionWithModal: ( action?: ActionModal< Item > ) => void;
-}
-
-interface ActionsMenuGroupProps< Item > {
-	actions: Action< Item >[];
-	selectedItems: Item[];
-	setActionWithModal: ( action?: ActionModal< Item > ) => void;
-}
+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 >[],
@@ -74,121 +50,231 @@ export function useSomeItemHasAPossibleBulkAction< Item >(
 	}, [ actions, data ] );
 }
 
-function ActionWithModal< Item >( {
+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,
-	selectedItems,
-	setActionWithModal,
-	onMenuOpenChange,
-}: ActionWithModalProps< Item > ) {
-	const eligibleItems = useMemo( () => {
-		return selectedItems.filter(
-			( item ) => ! action.isEligible || action.isEligible( item )
-		);
-	}, [ action, selectedItems ] );
-	const { RenderModal, hideModalHeader } = action;
-	const onCloseModal = useCallback( () => {
-		setActionWithModal( undefined );
-	}, [ setActionWithModal ] );
+	onClick,
+	isBusy,
+	items,
+}: ActionTriggerProps< Item > ) {
 	const label =
-		typeof action.label === 'string'
-			? action.label
-			: action.label( selectedItems );
+		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
-		<Modal
-			title={ ! hideModalHeader ? label : undefined }
-			__experimentalHideHeader={ !! hideModalHeader }
-			onRequestClose={ onCloseModal }
-			overlayClassName="dataviews-bulk-actions__modal"
-		>
-			<RenderModal
-				items={ eligibleItems }
-				closeModal={ onCloseModal }
-				onActionPerformed={ () => onMenuOpenChange( false ) }
-			/>
-		</Modal>
+		<Button
+			disabled={ isBusy }
+			accessibleWhenDisabled
+			label={ label }
+			icon={ action.icon }
+			isDestructive={ action.isDestructive }
+			size="compact"
+			onClick={ onClick }
+			isBusy={ isBusy }
+			tooltipPosition="top"
+		/>
 	);
 }
 
-function BulkActionItem< Item >( {
+const EMPTY_ARRAY: [] = [];
+
+function ActionButton< Item >( {
 	action,
 	selectedItems,
-	setActionWithModal,
-}: BulkActionsItemProps< Item > ) {
+	actionInProgress,
+	setActionInProgress,
+}: ActionButtonProps< Item > ) {
 	const registry = useRegistry();
-	const eligibleItems = useMemo( () => {
-		return selectedItems.filter(
-			( item ) => ! action.isEligible || action.isEligible( item )
-		);
+	const selectedEligibleItems = useMemo( () => {
+		return selectedItems.filter( ( item ) => {
+			return ! action.isEligible || action.isEligible( item );
+		} );
 	}, [ action, selectedItems ] );
-
-	const shouldShowModal = 'RenderModal' in action;
-
+	if ( 'RenderModal' in action ) {
+		return (
+			<ActionWithModal
+				key={ action.id }
+				action={ action }
+				items={ selectedEligibleItems }
+				ActionTrigger={ ActionTrigger }
+			/>
+		);
+	}
 	return (
-		<DropdownMenuItem
+		<ActionTrigger
 			key={ action.id }
-			hideOnClick={ ! shouldShowModal }
+			action={ action }
 			onClick={ async () => {
-				if ( shouldShowModal ) {
-					setActionWithModal( action );
-				} else {
-					action.callback( eligibleItems, { registry } );
-				}
+				setActionInProgress( action.id );
+				await action.callback( selectedItems, {
+					registry,
+				} );
+				setActionInProgress( null );
 			} }
-			suffix={ eligibleItems.length }
-		>
-			{ action.label }
-		</DropdownMenuItem>
+			items={ selectedEligibleItems }
+			isBusy={ actionInProgress === action.id }
+		/>
 	);
 }
 
-function ActionsMenuGroup< Item >( {
-	actions,
-	selectedItems,
-	setActionWithModal,
-}: ActionsMenuGroupProps< Item > ) {
-	const elligibleActions = useMemo( () => {
-		return actions.filter( ( action ) => {
-			return selectedItems.some(
-				( item ) => ! action.isEligible || action.isEligible( item )
-			);
-		} );
-	}, [ actions, selectedItems ] );
-	if ( ! elligibleActions.length ) {
-		return null;
-	}
+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 (
-		<>
-			<DropdownMenuGroup>
-				{ elligibleActions.map( ( action ) => (
-					<BulkActionItem
-						key={ action.id }
-						action={ action }
-						selectedItems={ selectedItems }
-						setActionWithModal={ setActionWithModal }
+		<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 );
+						} }
 					/>
-				) ) }
-			</DropdownMenuGroup>
-			<DropdownMenuSeparator />
-		</>
+				) }
+			</HStack>
+		</HStack>
 	);
 }
 
-function _BulkActions() {
-	const {
-		data,
-		actions = [],
-		selection,
-		onChangeSelection,
-		getItemId,
-	} = useContext( DataViewsContext );
+function FooterContent< Item >( {
+	selection,
+	actions,
+	onChangeSelection,
+	data,
+	getItemId,
+}: ToolbarContentProps< Item > ) {
+	const [ actionInProgress, setActionInProgress ] = useState< string | null >(
+		null
+	);
+	const footerContent = useRef< JSX.Element | null >( null );
+
 	const bulkActions = useMemo(
 		() => actions.filter( ( action ) => action.supportsBulk ),
 		[ actions ]
 	);
-	const [ isMenuOpen, onMenuOpenChange ] = useState( false );
-	const [ actionWithModal, setActionWithModal ] = useState<
-		ActionModal< any > | undefined
-	>();
 	const selectableItems = useMemo( () => {
 		return data.filter( ( item ) => {
 			return bulkActions.some(
@@ -197,8 +283,6 @@ function _BulkActions() {
 		} );
 	}, [ data, bulkActions ] );
 
-	const numberSelectableItems = selectableItems.length;
-
 	const selectedItems = useMemo( () => {
 		return data.filter(
 			( item ) =>
@@ -207,94 +291,66 @@ function _BulkActions() {
 		);
 	}, [ selection, data, getItemId, selectableItems ] );
 
-	const areAllSelected = selectedItems.length === numberSelectableItems;
-
-	if ( bulkActions.length === 0 ) {
-		return null;
-	}
-	return (
-		<>
-			<DropdownMenu
-				open={ isMenuOpen }
-				onOpenChange={ onMenuOpenChange }
-				label={ __( 'Bulk actions' ) }
-				style={ { minWidth: '240px' } }
-				trigger={
-					<Button
-						className="dataviews-bulk-actions__edit-button"
-						__next40pxDefaultSize
-						variant="tertiary"
-						size="compact"
-					>
-						{ selectedItems.length
-							? sprintf(
-									/* translators: %d: Number of items. */
-									_n(
-										'Edit %d item',
-										'Edit %d items',
-										selectedItems.length
-									),
-									selectedItems.length
-							  )
-							: __( 'Bulk edit' ) }
-					</Button>
-				}
-			>
-				<ActionsMenuGroup
-					actions={ bulkActions }
-					setActionWithModal={ setActionWithModal }
-					selectedItems={ selectedItems }
-				/>
-				<DropdownMenuGroup>
-					<DropdownMenuItem
-						disabled={ areAllSelected }
-						hideOnClick={ false }
-						onClick={ () => {
-							onChangeSelection(
-								selectableItems.map( ( item ) =>
-									getItemId( item )
-								)
-							);
-						} }
-						suffix={ numberSelectableItems }
-					>
-						{ __( 'Select all' ) }
-					</DropdownMenuItem>
-					<DropdownMenuItem
-						disabled={ selection.length === 0 }
-						hideOnClick={ false }
-						onClick={ () => {
-							onChangeSelection( [] );
-						} }
-					>
-						{ __( 'Deselect' ) }
-					</DropdownMenuItem>
-				</DropdownMenuGroup>
-			</DropdownMenu>
-			{ actionWithModal && (
-				<ActionWithModal
-					action={ actionWithModal }
-					selectedItems={ selectedItems }
-					setActionWithModal={ setActionWithModal }
-					onMenuOpenChange={ onMenuOpenChange }
-				/>
-			) }
-		</>
+	const actionsToShow = useMemo(
+		() =>
+			actions.filter( ( action ) => {
+				return (
+					action.supportsBulk &&
+					action.icon &&
+					selectedItems.some(
+						( item ) =>
+							! action.isEligible || action.isEligible( item )
+					)
+				);
+			} ),
+		[ actions, selectedItems ]
 	);
+	if ( ! actionInProgress ) {
+		if ( footerContent.current ) {
+			footerContent.current = null;
+		}
+		return renderFooterContent(
+			data,
+			actions,
+			getItemId,
+			selection,
+			actionsToShow,
+			selectedItems,
+			actionInProgress,
+			setActionInProgress,
+			onChangeSelection
+		);
+	} else if ( ! footerContent.current ) {
+		footerContent.current = renderFooterContent(
+			data,
+			actions,
+			getItemId,
+			selection,
+			actionsToShow,
+			selectedItems,
+			actionInProgress,
+			setActionInProgress,
+			onChangeSelection
+		);
+	}
+	return footerContent.current;
 }
 
-export default function BulkActions() {
-	const { data, actions = [], view } = useContext( DataViewsContext );
-	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
-		actions,
-		data
+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 }
+		/>
 	);
-	if (
-		! [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) ||
-		! hasPossibleBulkAction
-	) {
-		return null;
-	}
-
-	return <_BulkActions />;
 }
diff --git a/packages/dataviews/src/components/dataviews-bulk-actions/style.scss b/packages/dataviews/src/components/dataviews-bulk-actions/style.scss
index 71f76ce9a6c16..b2e946aa202ab 100644
--- a/packages/dataviews/src/components/dataviews-bulk-actions/style.scss
+++ b/packages/dataviews/src/components/dataviews-bulk-actions/style.scss
@@ -1,7 +1,12 @@
-.dataviews-bulk-actions__modal {
-	z-index: z-index(".dataviews-bulk-actions__modal");
+
+.dataviews-bulk-actions-footer__item-count {
+	color: $gray-900;
+	font-weight: 500;
+	font-size: 11px;
+	text-transform: uppercase;
 }
 
-.dataviews-bulk-actions__edit-button.components-button {
-	flex-shrink: 0;
+.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
index 39e5e09015658..3936288b3095b 100644
--- a/packages/dataviews/src/components/dataviews-context/index.ts
+++ b/packages/dataviews/src/components/dataviews-context/index.ts
@@ -26,6 +26,7 @@ type DataViewsContextType< Item > = {
 	openedFilter: string | null;
 	setOpenedFilter: ( openedFilter: string | null ) => void;
 	getItemId: ( item: Item ) => string;
+	density: number;
 };
 
 const DataViewsContext = createContext< DataViewsContextType< any > >( {
@@ -42,6 +43,7 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	setOpenedFilter: () => {},
 	openedFilter: null,
 	getItemId: ( item ) => item.id,
+	density: 0,
 } );
 
 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
index 38dda38c96e70..c8b6b5fda38fc 100644
--- a/packages/dataviews/src/components/dataviews-filters/add-filter.tsx
+++ b/packages/dataviews/src/components/dataviews-filters/add-filter.tsx
@@ -19,11 +19,7 @@ import { forwardRef } from '@wordpress/element';
 import { unlock } from '../../lock-unlock';
 import type { NormalizedFilter, View } from '../../types';
 
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-} = unlock( componentsPrivateApis );
+const { DropdownMenuV2 } = unlock( componentsPrivateApis );
 
 interface AddFilterProps {
 	filters: NormalizedFilter[];
@@ -32,32 +28,21 @@ interface AddFilterProps {
 	setOpenedFilter: ( filter: string | null ) => void;
 }
 
-function AddFilter(
-	{ filters, view, onChangeView, setOpenedFilter }: AddFilterProps,
-	ref: Ref< HTMLButtonElement >
-) {
-	if ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) {
-		return null;
-	}
+export function AddFilterDropdownMenu( {
+	filters,
+	view,
+	onChangeView,
+	setOpenedFilter,
+	trigger,
+}: AddFilterProps & {
+	trigger: React.ReactNode;
+} ) {
 	const inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );
 	return (
-		<DropdownMenu
-			trigger={
-				<Button
-					accessibleWhenDisabled
-					size="compact"
-					className="dataviews-filters__button"
-					variant="tertiary"
-					disabled={ ! inactiveFilters.length }
-					ref={ ref }
-				>
-					{ __( 'Add filter' ) }
-				</Button>
-			}
-		>
+		<DropdownMenuV2 trigger={ trigger }>
 			{ inactiveFilters.map( ( filter ) => {
 				return (
-					<DropdownMenuItem
+					<DropdownMenuV2.Item
 						key={ filter.field }
 						onClick={ () => {
 							setOpenedFilter( filter.field );
@@ -75,13 +60,40 @@ function AddFilter(
 							} );
 						} }
 					>
-						<DropdownMenuItemLabel>
+						<DropdownMenuV2.ItemLabel>
 							{ filter.name }
-						</DropdownMenuItemLabel>
-					</DropdownMenuItem>
+						</DropdownMenuV2.ItemLabel>
+					</DropdownMenuV2.Item>
 				);
 			} ) }
-		</DropdownMenu>
+		</DropdownMenuV2>
+	);
+}
+
+function AddFilter(
+	{ filters, view, onChangeView, setOpenedFilter }: AddFilterProps,
+	ref: Ref< HTMLButtonElement >
+) {
+	if ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) {
+		return null;
+	}
+	const inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );
+	return (
+		<AddFilterDropdownMenu
+			trigger={
+				<Button
+					accessibleWhenDisabled
+					size="compact"
+					className="dataviews-filters-button"
+					variant="tertiary"
+					disabled={ ! inactiveFilters.length }
+					ref={ ref }
+				>
+					{ __( 'Add filter' ) }
+				</Button>
+			}
+			{ ...{ filters, view, onChangeView, setOpenedFilter } }
+		/>
 	);
 }
 
diff --git a/packages/dataviews/src/components/dataviews-filters/index.tsx b/packages/dataviews/src/components/dataviews-filters/index.tsx
index c35bb454b329f..96e7f5b5d7b9d 100644
--- a/packages/dataviews/src/components/dataviews-filters/index.tsx
+++ b/packages/dataviews/src/components/dataviews-filters/index.tsx
@@ -1,65 +1,153 @@
 /**
  * WordPress dependencies
  */
-import { memo, useContext, useRef } from '@wordpress/element';
-import { __experimentalHStack as HStack } from '@wordpress/components';
+import {
+	memo,
+	useContext,
+	useRef,
+	useMemo,
+	useCallback,
+} from '@wordpress/element';
+import { __experimentalHStack as HStack, Button } from '@wordpress/components';
+import { funnel } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import FilterSummary from './filter-summary';
-import AddFilter from './add-filter';
+import { default as AddFilter, AddFilterDropdownMenu } from './add-filter';
 import ResetFilters from './reset-filters';
 import DataViewsContext from '../dataviews-context';
 import { sanitizeOperators } from '../../utils';
 import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../../constants';
-import type { NormalizedFilter } from '../../types';
+import type { NormalizedFilter, NormalizedField, View } from '../../types';
 
-function Filters() {
-	const { fields, view, onChangeView, openedFilter, setOpenedFilter } =
-		useContext( DataViewsContext );
-	const addFilterRef = useRef< HTMLButtonElement >( null );
-	const filters: NormalizedFilter[] = [];
-	fields.forEach( ( field ) => {
-		if ( ! field.elements?.length ) {
-			return;
-		}
+export function useFilters( fields: NormalizedField< any >[], view: View ) {
+	return useMemo( () => {
+		const filters: NormalizedFilter[] = [];
+		fields.forEach( ( field ) => {
+			if ( ! field.elements?.length ) {
+				return;
+			}
 
-		const operators = sanitizeOperators( field );
-		if ( operators.length === 0 ) {
-			return;
-		}
+			const operators = sanitizeOperators( field );
+			if ( operators.length === 0 ) {
+				return;
+			}
 
-		const isPrimary = !! field.filterBy?.isPrimary;
-		filters.push( {
-			field: field.id,
-			name: field.header,
-			elements: field.elements,
-			singleSelection: operators.some( ( op ) =>
-				[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op )
-			),
-			operators,
-			isVisible:
-				isPrimary ||
-				!! view.filters?.some(
-					( f ) =>
-						f.field === field.id &&
-						ALL_OPERATORS.includes( f.operator )
+			const isPrimary = !! field.filterBy?.isPrimary;
+			filters.push( {
+				field: field.id,
+				name: field.label,
+				elements: field.elements,
+				singleSelection: operators.some( ( op ) =>
+					[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op )
 				),
-			isPrimary,
+				operators,
+				isVisible:
+					isPrimary ||
+					!! view.filters?.some(
+						( f ) =>
+							f.field === field.id &&
+							ALL_OPERATORS.includes( f.operator )
+					),
+				isPrimary,
+			} );
 		} );
-	} );
-	// Sort filters by primary property. We need the primary filters to be first.
-	// Then we sort by name.
-	filters.sort( ( a, b ) => {
-		if ( a.isPrimary && ! b.isPrimary ) {
-			return -1;
-		}
-		if ( ! a.isPrimary && b.isPrimary ) {
-			return 1;
-		}
-		return a.name.localeCompare( b.name );
-	} );
+		// Sort filters by primary property. We need the primary filters to be first.
+		// Then we sort by name.
+		filters.sort( ( a, b ) => {
+			if ( a.isPrimary && ! b.isPrimary ) {
+				return -1;
+			}
+			if ( ! a.isPrimary && b.isPrimary ) {
+				return 1;
+			}
+			return a.name.localeCompare( b.name );
+		} );
+		return filters;
+	}, [ fields, view ] );
+}
+
+export function FilterVisibilityToggle( {
+	filters,
+	view,
+	onChangeView,
+	setOpenedFilter,
+	isShowingFilter,
+	setIsShowingFilter,
+}: {
+	filters: NormalizedFilter[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+	setOpenedFilter: ( filter: string | null ) => void;
+	isShowingFilter: boolean;
+	setIsShowingFilter: React.Dispatch< React.SetStateAction< boolean > >;
+} ) {
+	const onChangeViewWithFilterVisibility = useCallback(
+		( _view: View ) => {
+			onChangeView( _view );
+			setIsShowingFilter( true );
+		},
+		[ onChangeView, setIsShowingFilter ]
+	);
+	const visibleFilters = filters.filter( ( filter ) => filter.isVisible );
+
+	const hasVisibleFilters = !! visibleFilters.length;
+	if ( filters.length === 0 ) {
+		return null;
+	}
+	if ( ! hasVisibleFilters ) {
+		return (
+			<AddFilterDropdownMenu
+				filters={ filters }
+				view={ view }
+				onChangeView={ onChangeViewWithFilterVisibility }
+				setOpenedFilter={ setOpenedFilter }
+				trigger={
+					<Button
+						className="dataviews-filters__visibility-toggle"
+						size="compact"
+						icon={ funnel }
+						label={ __( 'Add filter' ) }
+						isPressed={ false }
+						aria-expanded={ false }
+					/>
+				}
+			/>
+		);
+	}
+	return (
+		<div className="dataviews-filters__container-visibility-toggle">
+			<Button
+				className="dataviews-filters__visibility-toggle"
+				size="compact"
+				icon={ funnel }
+				label={ __( 'Toggle filter display' ) }
+				onClick={ () => {
+					if ( ! isShowingFilter ) {
+						setOpenedFilter( null );
+					}
+					setIsShowingFilter( ! isShowingFilter );
+				} }
+				isPressed={ isShowingFilter }
+				aria-expanded={ isShowingFilter }
+			/>
+			{ hasVisibleFilters && !! view.filters?.length && (
+				<span className="dataviews-filters-toggle__count">
+					{ view.filters?.length }
+				</span>
+			) }
+		</div>
+	);
+}
+
+function Filters() {
+	const { fields, view, onChangeView, openedFilter, setOpenedFilter } =
+		useContext( DataViewsContext );
+	const addFilterRef = useRef< HTMLButtonElement >( null );
+	const filters = useFilters( fields, view );
 	const addFilter = (
 		<AddFilter
 			key="add-filter"
@@ -70,12 +158,12 @@ function Filters() {
 			setOpenedFilter={ setOpenedFilter }
 		/>
 	);
+	const visibleFilters = filters.filter( ( filter ) => filter.isVisible );
+	if ( visibleFilters.length === 0 ) {
+		return null;
+	}
 	const filterComponents = [
-		...filters.map( ( filter ) => {
-			if ( ! filter.isVisible ) {
-				return null;
-			}
-
+		...visibleFilters.map( ( filter ) => {
 			return (
 				<FilterSummary
 					key={ filter.field }
@@ -90,19 +178,22 @@ function Filters() {
 		addFilter,
 	];
 
-	if ( filterComponents.length > 1 ) {
-		filterComponents.push(
-			<ResetFilters
-				key="reset-filters"
-				filters={ filters }
-				view={ view }
-				onChangeView={ onChangeView }
-			/>
-		);
-	}
+	filterComponents.push(
+		<ResetFilters
+			key="reset-filters"
+			filters={ filters }
+			view={ view }
+			onChangeView={ onChangeView }
+		/>
+	);
 
 	return (
-		<HStack justify="flex-start" style={ { width: 'fit-content' } } wrap>
+		<HStack
+			justify="flex-start"
+			style={ { width: 'fit-content' } }
+			className="dataviews-filters__container"
+			wrap
+		>
 			{ filterComponents }
 		</HStack>
 	);
diff --git a/packages/dataviews/src/components/dataviews-filters/search-widget.tsx b/packages/dataviews/src/components/dataviews-filters/search-widget.tsx
index 3516ff23b2850..459b68990753c 100644
--- a/packages/dataviews/src/components/dataviews-filters/search-widget.tsx
+++ b/packages/dataviews/src/components/dataviews-filters/search-widget.tsx
@@ -8,28 +8,18 @@ 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,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { VisuallyHidden, Icon, Composite } from '@wordpress/components';
 import { search, check } from '@wordpress/icons';
 import { SVG, Circle } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
 import type { Filter, NormalizedFilter, View } from '../../types';
 
-const {
-	CompositeV2: Composite,
-	CompositeItemV2: CompositeItem,
-	useCompositeStoreV2: useCompositeStore,
-} = unlock( componentsPrivateApis );
-
 interface SearchWidgetProps {
 	view: View;
 	filter: NormalizedFilter;
@@ -84,22 +74,37 @@ const getNewValue = (
 	return [ value ];
 };
 
+function generateFilterElementCompositeItemId(
+	prefix: string,
+	filterElementValue: string
+) {
+	return `${ prefix }-${ filterElementValue }`;
+}
+
 function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
-	const compositeStore = useCompositeStore( {
-		virtualFocus: true,
-		focusLoop: true,
-		// When we have no or just one operator, we can set the first item as active.
-		// We do that by passing `undefined` to `defaultActiveId`. Otherwise, we set it to `null`,
-		// so the first item is not selected, since the focus is on the operators control.
-		defaultActiveId: filter.operators?.length === 1 ? undefined : null,
-	} );
+	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
-			store={ compositeStore }
+			virtualFocus
+			focusLoop
+			activeId={ activeCompositeId }
+			setActiveId={ setActiveCompositeId }
 			role="listbox"
 			className="dataviews-filters__search-widget-listbox"
 			aria-label={ sprintf(
@@ -108,18 +113,28 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 				filter.name
 			) }
 			onFocusVisible={ () => {
-				if ( ! compositeStore.getState().activeId ) {
-					compositeStore.move( compositeStore.first() );
+				// `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={ <Ariakit.CompositeTypeahead store={ compositeStore } /> }
+			render={ <Composite.Typeahead /> }
 		>
 			{ filter.elements.map( ( element ) => (
-				<Ariakit.CompositeHover
-					store={ compositeStore }
+				<Composite.Hover
 					key={ element.value }
 					render={
-						<CompositeItem
+						<Composite.Item
+							id={ generateFilterElementCompositeItemId(
+								baseId,
+								element.value
+							) }
 							render={
 								<div
 									aria-label={ element.label }
@@ -184,15 +199,8 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 								<Icon icon={ check } />
 							) }
 					</span>
-					<span>
-						{ element.label }
-						{ !! element.description && (
-							<span className="dataviews-filters__search-widget-listitem-description">
-								{ element.description }
-							</span>
-						) }
-					</span>
-				</Ariakit.CompositeHover>
+					<span>{ element.label }</span>
+				</Composite.Hover>
 			) ) }
 		</Composite>
 	);
@@ -213,7 +221,6 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 	}, [ filter.elements, deferredSearchValue ] );
 	return (
 		<Ariakit.ComboboxProvider
-			resetValueOnSelect={ false }
 			selectedValue={ currentValue }
 			setSelectedValue={ ( value ) => {
 				const newFilters = currentFilter
@@ -273,6 +280,7 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 				{ matches.map( ( element ) => {
 					return (
 						<Ariakit.ComboboxItem
+							resetValueOnSelect={ false }
 							key={ element.value }
 							value={ element.value }
 							className="dataviews-filters__search-widget-listitem"
diff --git a/packages/dataviews/src/components/dataviews-filters/style.scss b/packages/dataviews/src/components/dataviews-filters/style.scss
index 26e5e613fcbe4..130ef8872615a 100644
--- a/packages/dataviews/src/components/dataviews-filters/style.scss
+++ b/packages/dataviews/src/components/dataviews-filters/style.scss
@@ -2,6 +2,10 @@
 	position: relative;
 }
 
+.dataviews-filters__container {
+	padding-top: 0;
+}
+
 .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled="true"] {
 	&,
 	&:hover {
@@ -14,11 +18,19 @@
 }
 
 .dataviews-filters__summary-popover {
+	font-size: $default-font-size;
+	line-height: $default-line-height;
+
 	.components-popover__content {
 		width: 230px;
-		padding: 0;
 		border-radius: $grid-unit-05;
 	}
+
+	&.components-dropdown__content {
+		.components-popover__content {
+			padding: 0;
+		}
+	}
 }
 
 .dataviews-filters__summary-operators-container {
@@ -44,7 +56,7 @@
 
 	.dataviews-filters__summary-chip {
 		border-radius: $grid-unit-20;
-		border: 1px solid transparent;
+		border: $border-width solid transparent;
 		cursor: pointer;
 		padding: $grid-unit-05 $grid-unit-15;
 		min-height: $grid-unit-40;
@@ -53,6 +65,7 @@
 		position: relative;
 		display: flex;
 		align-items: center;
+		box-sizing: border-box;
 
 		&.has-reset {
 			padding-inline-end: $button-size-small + $grid-unit-05;
@@ -147,7 +160,6 @@
 }
 
 .dataviews-filters__search-widget-listbox {
-	max-height: $grid-unit * 23;
 	padding: $grid-unit-05;
 	overflow: auto;
 }
@@ -156,7 +168,7 @@
 	display: flex;
 	align-items: center;
 	gap: $grid-unit-10;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	box-sizing: border-box;
 	padding: $grid-unit-10 $grid-unit-15;
 	cursor: default;
@@ -250,3 +262,30 @@
 		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 0000000000000..191e16f47e2c9
--- /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 0000000000000..cdb1359ccee39
--- /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
index 53b468c1ab7d3..e33cb0fe56d0e 100644
--- a/packages/dataviews/src/components/dataviews-item-actions/index.tsx
+++ b/packages/dataviews/src/components/dataviews-item-actions/index.tsx
@@ -23,13 +23,7 @@ import { useRegistry } from '@wordpress/data';
 import { unlock } from '../../lock-unlock';
 import type { Action, ActionModal as ActionModalType } from '../../types';
 
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuGroupV2: DropdownMenuGroup,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-	kebabCase,
-} = unlock( componentsPrivateApis );
+const { DropdownMenuV2, kebabCase } = unlock( componentsPrivateApis );
 
 export interface ActionTriggerProps< Item > {
 	action: Action< Item >;
@@ -91,12 +85,12 @@ function DropdownMenuItemTrigger< Item >( {
 	const label =
 		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
-		<DropdownMenuItem
+		<DropdownMenuV2.Item
 			onClick={ onClick }
 			hideOnClick={ ! ( 'RenderModal' in action ) }
 		>
-			<DropdownMenuItemLabel>{ label }</DropdownMenuItemLabel>
-		</DropdownMenuItem>
+			<DropdownMenuV2.ItemLabel>{ label }</DropdownMenuV2.ItemLabel>
+		</DropdownMenuV2.Item>
 	);
 }
 
@@ -158,7 +152,7 @@ export function ActionsDropdownMenuGroup< Item >( {
 }: ActionsDropdownMenuGroupProps< Item > ) {
 	const registry = useRegistry();
 	return (
-		<DropdownMenuGroup>
+		<DropdownMenuV2.Group>
 			{ actions.map( ( action ) => {
 				if ( 'RenderModal' in action ) {
 					return (
@@ -181,7 +175,7 @@ export function ActionsDropdownMenuGroup< Item >( {
 					/>
 				);
 			} ) }
-		</DropdownMenuGroup>
+		</DropdownMenuV2.Group>
 	);
 }
 
@@ -251,7 +245,7 @@ function CompactItemActions< Item >( {
 	actions,
 }: CompactItemActionsProps< Item > ) {
 	return (
-		<DropdownMenu
+		<DropdownMenuV2
 			trigger={
 				<Button
 					size="compact"
@@ -265,6 +259,6 @@ function CompactItemActions< Item >( {
 			placement="bottom-end"
 		>
 			<ActionsDropdownMenuGroup actions={ actions } item={ item } />
-		</DropdownMenu>
+		</DropdownMenuV2>
 	);
 }
diff --git a/packages/dataviews/src/components/dataviews-layout/index.tsx b/packages/dataviews/src/components/dataviews-layout/index.tsx
index 960dcf304c018..bae4071fe2f77 100644
--- a/packages/dataviews/src/components/dataviews-layout/index.tsx
+++ b/packages/dataviews/src/components/dataviews-layout/index.tsx
@@ -12,7 +12,7 @@ import { useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import DataViewsContext from '../dataviews-context';
-import { VIEW_LAYOUTS } from '../../layouts';
+import { VIEW_LAYOUTS } from '../../dataviews-layouts';
 import type { ViewBaseProps } from '../../types';
 
 export default function DataViewsLayout() {
@@ -27,6 +27,7 @@ export default function DataViewsLayout() {
 		selection,
 		onChangeSelection,
 		setOpenedFilter,
+		density,
 	} = useContext( DataViewsContext );
 
 	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
@@ -44,6 +45,7 @@ export default function DataViewsLayout() {
 			selection={ selection }
 			setOpenedFilter={ setOpenedFilter }
 			view={ view }
+			density={ density }
 		/>
 	);
 }
diff --git a/packages/dataviews/src/components/dataviews-pagination/index.tsx b/packages/dataviews/src/components/dataviews-pagination/index.tsx
index f8ebf41469d94..08a25ea01224e 100644
--- a/packages/dataviews/src/components/dataviews-pagination/index.tsx
+++ b/packages/dataviews/src/components/dataviews-pagination/index.tsx
@@ -7,7 +7,7 @@ import {
 	SelectControl,
 } from '@wordpress/components';
 import { createInterpolateElement, memo, useContext } from '@wordpress/element';
-import { sprintf, __, _x } from '@wordpress/i18n';
+import { sprintf, __, _x, isRTL } from '@wordpress/i18n';
 import { next, previous } from '@wordpress/icons';
 
 /**
@@ -21,53 +21,72 @@ function DataViewsPagination() {
 		onChangeView,
 		paginationInfo: { totalItems = 0, totalPages },
 	} = useContext( DataViewsContext );
+
 	if ( ! totalItems || ! totalPages ) {
 		return null;
 	}
+
 	const currentPage = view.page ?? 1;
+	const pageSelectOptions = Array.from( Array( totalPages ) ).map(
+		( _, i ) => {
+			const page = i + 1;
+			return {
+				value: page.toString(),
+				label: page.toString(),
+				'aria-label':
+					currentPage === page
+						? sprintf(
+								// translators: Current page number in total number of pages
+								__( 'Page %1$s of %2$s' ),
+								currentPage,
+								totalPages
+						  )
+						: page.toString(),
+			};
+		}
+	);
+
 	return (
 		!! totalItems &&
 		totalPages !== 1 && (
 			<HStack
 				expanded={ false }
-				spacing={ 6 }
-				justify="end"
 				className="dataviews-pagination"
+				justify="end"
+				spacing={ 6 }
 			>
 				<HStack
 					justify="flex-start"
 					expanded={ false }
-					spacing={ 2 }
-					className="dataviews-pagination__page-selection"
+					spacing={ 1 }
+					className="dataviews-pagination__page-select"
 				>
 					{ createInterpolateElement(
 						sprintf(
-							// translators: %s: Total number of pages.
-							_x( 'Page <CurrentPageControl /> of %s', 'paging' ),
+							// translators: 1: Current page number, 2: Total number of pages.
+							_x(
+								'<div>Page</div>%1$s<div>of %2$s</div>',
+								'paging'
+							),
+							'<CurrentPage />',
 							totalPages
 						),
 						{
-							CurrentPageControl: (
+							div: <div aria-hidden />,
+							CurrentPage: (
 								<SelectControl
 									aria-label={ __( 'Current page' ) }
-									value={ view.page?.toString() }
-									options={ Array.from(
-										Array( totalPages )
-									).map( ( _, i ) => {
-										const page = i + 1;
-										return {
-											value: page.toString(),
-											label: page.toString(),
-										};
-									} ) }
+									value={ currentPage.toString() }
+									options={ pageSelectOptions }
 									onChange={ ( newValue ) => {
 										onChangeView( {
 											...view,
 											page: +newValue,
 										} );
 									} }
-									size="compact"
+									size="small"
 									__nextHasNoMarginBottom
+									variant="minimal"
 								/>
 							),
 						}
@@ -84,7 +103,7 @@ function DataViewsPagination() {
 						disabled={ currentPage === 1 }
 						accessibleWhenDisabled
 						label={ __( 'Previous page' ) }
-						icon={ previous }
+						icon={ isRTL() ? next : previous }
 						showTooltip
 						size="compact"
 						tooltipPosition="top"
@@ -96,7 +115,7 @@ function DataViewsPagination() {
 						disabled={ currentPage >= totalPages }
 						accessibleWhenDisabled
 						label={ __( 'Next page' ) }
-						icon={ next }
+						icon={ isRTL() ? previous : next }
 						showTooltip
 						size="compact"
 						tooltipPosition="top"
diff --git a/packages/dataviews/src/components/dataviews-pagination/style.scss b/packages/dataviews/src/components/dataviews-pagination/style.scss
index 4e754ab90fa54..c8079c6b3ee82 100644
--- a/packages/dataviews/src/components/dataviews-pagination/style.scss
+++ b/packages/dataviews/src/components/dataviews-pagination/style.scss
@@ -1,26 +1,12 @@
-.dataviews-pagination {
-	position: sticky;
-	bottom: 0;
-	left: 0;
-	background-color: $white;
-	padding: $grid-unit-15 $grid-unit-60;
-	border-top: $border-width solid $gray-100;
-	color: $gray-700;
-	flex-shrink: 0;
-	transition: padding ease-out 0.1s;
-	@include reduce-motion("transition");
-}
-
-.dataviews-pagination__page-selection {
+.dataviews-pagination__page-select {
 	font-size: 11px;
-	text-transform: uppercase;
 	font-weight: 500;
-	color: $gray-900;
-}
+	text-transform: uppercase;
 
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
-@container (max-width: 430px) {
-	.dataviews-pagination {
-		padding: $grid-unit-15 $grid-unit-30;
+	@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
index 5e5ce705e1119..1aef99872960b 100644
--- a/packages/dataviews/src/components/dataviews-search/index.tsx
+++ b/packages/dataviews/src/components/dataviews-search/index.tsx
@@ -30,15 +30,18 @@ const DataViewsSearch = memo( function Search( { label }: SearchProps ) {
 		viewRef.current = view;
 	}, [ onChangeView, view ] );
 	useEffect( () => {
-		onChangeViewRef.current( {
-			...viewRef.current,
-			page: 1,
-			search: debouncedSearch,
-		} );
+		if ( debouncedSearch !== viewRef.current?.search ) {
+			onChangeViewRef.current( {
+				...viewRef.current,
+				page: 1,
+				search: debouncedSearch,
+			} );
+		}
 	}, [ debouncedSearch ] );
 	const searchLabel = label || __( 'Search' );
 	return (
 		<SearchControl
+			className="dataviews-search"
 			__nextHasNoMarginBottom
 			onChange={ setSearch }
 			value={ search }
diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 6dca75fbe057a..02e81b2b0913d 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -8,333 +8,585 @@ import type { ChangeEvent } from 'react';
  */
 import {
 	Button,
-	privateApis as componentsPrivateApis,
+	__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,
 } from '@wordpress/components';
-import { __, _x } from '@wordpress/i18n';
-import { memo, useContext } from '@wordpress/element';
-import { cog } from '@wordpress/icons';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { memo, useContext, useMemo } from '@wordpress/element';
+import { chevronDown, chevronUp, cog, seen, unseen } from '@wordpress/icons';
+import warning from '@wordpress/warning';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
-import { SORTING_DIRECTIONS, sortLabels } from '../../constants';
-import { VIEW_LAYOUTS, getMandatoryFields } from '../../layouts';
-import type { NormalizedField, View, SupportedLayouts } from '../../types';
+import {
+	SORTING_DIRECTIONS,
+	LAYOUT_GRID,
+	LAYOUT_TABLE,
+	sortIcons,
+	sortLabels,
+} from '../../constants';
+import {
+	VIEW_LAYOUTS,
+	getNotHidableFieldIds,
+	getVisibleFieldIds,
+	getHiddenFieldIds,
+} from '../../dataviews-layouts';
+import type { SupportedLayouts, View, Field } from '../../types';
 import DataViewsContext from '../dataviews-context';
+import { unlock } from '../../lock-unlock';
+import DensityPicker from '../../dataviews-layouts/grid/density-picker';
 
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuGroupV2: DropdownMenuGroup,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
-	DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-} = unlock( componentsPrivateApis );
+const { DropdownMenuV2 } = unlock( componentsPrivateApis );
 
 interface ViewTypeMenuProps {
-	view: View;
-	onChangeView: ( view: View ) => void;
 	defaultLayouts?: SupportedLayouts;
 }
 
-interface PageSizeMenuProps {
-	view: View;
-	onChangeView: ( view: View ) => void;
-}
-
-interface FieldsVisibilityMenuProps< Item > {
-	view: View;
-	onChangeView: ( view: View ) => void;
-	fields: NormalizedField< Item >[];
-}
-
-interface SortMenuProps< Item > {
-	fields: NormalizedField< Item >[];
-	view: View;
-	onChangeView: ( view: View ) => void;
-}
-
-interface ViewActionsProps {
-	defaultLayouts?: SupportedLayouts;
-}
+const DATAVIEWS_CONFIG_POPOVER_PROPS = { placement: 'bottom-end', offset: 9 };
 
 function ViewTypeMenu( {
-	view,
-	onChangeView,
 	defaultLayouts = { list: {}, grid: {}, table: {} },
 }: ViewTypeMenuProps ) {
+	const { view, onChangeView } = useContext( DataViewsContext );
 	const availableLayouts = Object.keys( defaultLayouts );
 	if ( availableLayouts.length <= 1 ) {
 		return null;
 	}
-	return availableLayouts.map( ( layout ) => {
-		const config = VIEW_LAYOUTS.find( ( v ) => v.type === layout );
-		if ( ! config ) {
-			return null;
-		}
-		return (
-			<DropdownMenuRadioItem
-				key={ layout }
-				value={ layout }
-				name="view-actions-available-view"
-				checked={ layout === view.type }
-				hideOnClick
-				onChange={ ( e: ChangeEvent< HTMLInputElement > ) => {
-					switch ( e.target.value ) {
-						case 'list':
-						case 'grid':
-						case 'table':
-							return onChangeView( {
-								...view,
-								type: e.target.value,
-								...defaultLayouts[ e.target.value ],
-							} );
-					}
-					throw new Error( 'Invalid dataview' );
-				} }
-			>
-				<DropdownMenuItemLabel>{ config.label }</DropdownMenuItemLabel>
-			</DropdownMenuRadioItem>
-		);
-	} );
-}
-
-const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
-function PageSizeMenu( { view, onChangeView }: PageSizeMenuProps ) {
+	const activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );
 	return (
-		<DropdownMenu
+		<DropdownMenuV2
 			trigger={
-				<DropdownMenuItem
-					suffix={ <span aria-hidden="true">{ view.perPage }</span> }
-				>
-					<DropdownMenuItemLabel>
-						{ __( 'Items per page' ) }
-					</DropdownMenuItemLabel>
-				</DropdownMenuItem>
+				<Button
+					size="compact"
+					icon={ activeView?.icon }
+					label={ __( 'Layout' ) }
+				/>
 			}
 		>
-			{ PAGE_SIZE_VALUES.map( ( size ) => {
+			{ availableLayouts.map( ( layout ) => {
+				const config = VIEW_LAYOUTS.find( ( v ) => v.type === layout );
+				if ( ! config ) {
+					return null;
+				}
 				return (
-					<DropdownMenuRadioItem
-						key={ size }
-						value={ size }
-						name="view-actions-page-size"
-						checked={ view.perPage === size }
-						onChange={ () => {
-							onChangeView( {
-								...view,
-								// `e.target.value` holds the same value as `size` but as a string,
-								// so we use `size` directly to avoid parsing to int.
-								perPage: size,
-								page: 1,
-							} );
+					<DropdownMenuV2.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':
+									return onChangeView( {
+										...view,
+										type: e.target.value,
+										...defaultLayouts[ e.target.value ],
+									} );
+							}
+							warning( 'Invalid dataview' );
 						} }
 					>
-						<DropdownMenuItemLabel>{ size }</DropdownMenuItemLabel>
-					</DropdownMenuRadioItem>
+						<DropdownMenuV2.ItemLabel>
+							{ config.label }
+						</DropdownMenuV2.ItemLabel>
+					</DropdownMenuV2.RadioItem>
 				);
 			} ) }
-		</DropdownMenu>
+		</DropdownMenuV2>
 	);
 }
 
-function FieldsVisibilityMenu< Item >( {
-	view,
-	onChangeView,
-	fields,
-}: FieldsVisibilityMenuProps< Item > ) {
-	const mandatoryFields = getMandatoryFields( view );
-	const hidableFields = fields.filter(
-		( field ) =>
-			field.enableHiding !== false &&
-			! mandatoryFields.includes( field.id )
+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,
+					},
+				} );
+			} }
+		/>
 	);
-	const viewFields = view.fields || fields.map( ( field ) => field.id );
-	if ( ! hidableFields?.length ) {
+}
+
+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 (
-		<DropdownMenu
-			trigger={
-				<DropdownMenuItem>
-					<DropdownMenuItemLabel>
-						{ __( 'Fields' ) }
-					</DropdownMenuItemLabel>
-				</DropdownMenuItem>
-			}
+		<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' );
+			} }
 		>
-			{ hidableFields?.map( ( field ) => {
+			{ SORTING_DIRECTIONS.map( ( direction ) => {
 				return (
-					<DropdownMenuCheckboxItem
-						key={ field.id }
-						value={ field.id }
-						checked={ viewFields.includes( field.id ) }
-						onChange={ () => {
-							onChangeView( {
-								...view,
-								fields: viewFields.includes( field.id )
-									? viewFields.filter(
-											( id ) => id !== field.id
-									  )
-									: [ ...viewFields, field.id ],
-							} );
-						} }
-					>
-						<DropdownMenuItemLabel>
-							{ field.header }
-						</DropdownMenuItemLabel>
-					</DropdownMenuCheckboxItem>
+					<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() }
+					/>
 				);
 			} ) }
-		</DropdownMenu>
+		</ToggleGroupControl>
 	);
 }
 
-function SortMenu< Item >( {
+interface FieldItemProps {
+	id: any;
+	label: string;
+	index: number;
+	isVisible: boolean;
+	isHidable: boolean;
+}
+
+function FieldItem( {
+	field: { id, label, index, isVisible, isHidable },
 	fields,
 	view,
 	onChangeView,
-}: SortMenuProps< Item > ) {
-	const sortableFields = fields.filter(
-		( field ) => field.enableSorting !== false
+}: {
+	field: FieldItemProps;
+	fields: Field< any >[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+} ) {
+	const visibleFieldIds = getVisibleFieldIds( view, fields );
+
+	return (
+		<Item key={ id }>
+			<HStack
+				expanded
+				className={ `dataviews-field-control__field dataviews-field-control__field-${ id }` }
+			>
+				<span>{ label }</span>
+				<HStack
+					justify="flex-end"
+					expanded={ false }
+					className="dataviews-field-control__actions"
+				>
+					{ view.type === LAYOUT_TABLE && isVisible && (
+						<>
+							<Button
+								disabled={ index < 1 }
+								accessibleWhenDisabled
+								size="compact"
+								onClick={ () => {
+									onChangeView( {
+										...view,
+										fields: [
+											...( visibleFieldIds.slice(
+												0,
+												index - 1
+											) ?? [] ),
+											id,
+											visibleFieldIds[ index - 1 ],
+											...visibleFieldIds.slice(
+												index + 1
+											),
+										],
+									} );
+								} }
+								icon={ chevronUp }
+								label={ sprintf(
+									/* translators: %s: field label */
+									__( 'Move %s up' ),
+									label
+								) }
+							/>
+							<Button
+								disabled={ index >= visibleFieldIds.length - 1 }
+								accessibleWhenDisabled
+								size="compact"
+								onClick={ () => {
+									onChangeView( {
+										...view,
+										fields: [
+											...( visibleFieldIds.slice(
+												0,
+												index
+											) ?? [] ),
+											visibleFieldIds[ index + 1 ],
+											id,
+											...visibleFieldIds.slice(
+												index + 2
+											),
+										],
+									} );
+								} }
+								icon={ chevronDown }
+								label={ sprintf(
+									/* translators: %s: field label */
+									__( 'Move %s down' ),
+									label
+								) }
+							/>{ ' ' }
+						</>
+					) }
+					<Button
+						className="dataviews-field-control__field-visibility-button"
+						disabled={ ! isHidable }
+						accessibleWhenDisabled
+						size="compact"
+						onClick={ () => {
+							onChangeView( {
+								...view,
+								fields: isVisible
+									? visibleFieldIds.filter(
+											( fieldId ) => fieldId !== id
+									  )
+									: [ ...visibleFieldIds, id ],
+							} );
+							// 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-${ id } .dataviews-field-control__field-visibility-button`
+								);
+								if ( element instanceof HTMLElement ) {
+									element.focus();
+								}
+							}, 50 );
+						} }
+						icon={ isVisible ? seen : unseen }
+						label={
+							isVisible
+								? sprintf(
+										/* translators: %s: field label */
+										__( 'Hide %s' ),
+										label
+								  )
+								: sprintf(
+										/* translators: %s: field label */
+										__( 'Show %s' ),
+										label
+								  )
+						}
+					/>
+				</HStack>
+			</HStack>
+		</Item>
 	);
-	if ( ! sortableFields?.length ) {
+}
+
+function FieldControl() {
+	const { view, fields, onChangeView } = useContext( DataViewsContext );
+
+	const visibleFieldIds = useMemo(
+		() => getVisibleFieldIds( view, fields ),
+		[ view, fields ]
+	);
+	const hiddenFieldIds = useMemo(
+		() => getHiddenFieldIds( view, fields ),
+		[ view, fields ]
+	);
+	const notHidableFieldIds = useMemo(
+		() => getNotHidableFieldIds( view ),
+		[ view ]
+	);
+
+	const visibleFields = fields
+		.filter( ( { id } ) => visibleFieldIds.includes( id ) )
+		.map( ( { id, label, enableHiding } ) => {
+			return {
+				id,
+				label,
+				index: visibleFieldIds.indexOf( id ),
+				isVisible: true,
+				isHidable: notHidableFieldIds.includes( id )
+					? false
+					: enableHiding,
+			};
+		} );
+	if ( view.type === LAYOUT_TABLE && view.layout?.combinedFields ) {
+		view.layout.combinedFields.forEach( ( { id, label } ) => {
+			visibleFields.push( {
+				id,
+				label,
+				index: visibleFieldIds.indexOf( id ),
+				isVisible: true,
+				isHidable: notHidableFieldIds.includes( id ),
+			} );
+		} );
+	}
+	visibleFields.sort( ( a, b ) => a.index - b.index );
+
+	const hiddenFields = fields
+		.filter( ( { id } ) => hiddenFieldIds.includes( id ) )
+		.map( ( { id, label, enableHiding }, index ) => {
+			return {
+				id,
+				label,
+				index,
+				isVisible: false,
+				isHidable: enableHiding,
+			};
+		} );
+
+	if ( ! visibleFields?.length && ! hiddenFields?.length ) {
 		return null;
 	}
-	const currentSortedField = fields.find(
-		( field ) => field.id === view.sort?.field
+
+	return (
+		<VStack spacing={ 6 } className="dataviews-field-control">
+			{ !! visibleFields?.length && (
+				<ItemGroup isBordered isSeparated>
+					{ visibleFields.map( ( field ) => (
+						<FieldItem
+							key={ field.id }
+							field={ field }
+							fields={ fields }
+							view={ view }
+							onChangeView={ onChangeView }
+						/>
+					) ) }
+				</ItemGroup>
+			) }
+			{ !! hiddenFields?.length && (
+				<>
+					<VStack spacing={ 4 }>
+						<BaseControl.VisualLabel style={ { margin: 0 } }>
+							{ __( 'Hidden' ) }
+						</BaseControl.VisualLabel>
+						<ItemGroup isBordered isSeparated>
+							{ hiddenFields.map( ( field ) => (
+								<FieldItem
+									key={ field.id }
+									field={ field }
+									fields={ fields }
+									view={ view }
+									onChangeView={ onChangeView }
+								/>
+							) ) }
+						</ItemGroup>
+					</VStack>
+				</>
+			) }
+		</VStack>
 	);
+}
+
+function SettingsSection( {
+	title,
+	description,
+	children,
+}: {
+	title: string;
+	description?: string;
+	children: React.ReactNode;
+} ) {
 	return (
-		<DropdownMenu
-			trigger={
-				<DropdownMenuItem
-					suffix={
-						<span aria-hidden="true">
-							{ currentSortedField?.header }
-						</span>
-					}
+		<Grid columns={ 12 } className="dataviews-settings-section" gap={ 4 }>
+			<div className="dataviews-settings-section__sidebar">
+				<Heading
+					level={ 2 }
+					className="dataviews-settings-section__title"
 				>
-					<DropdownMenuItemLabel>
-						{ __( 'Sort by' ) }
-					</DropdownMenuItemLabel>
-				</DropdownMenuItem>
-			}
-		>
-			{ sortableFields?.map( ( field ) => {
-				const sortedDirection = view.sort?.direction;
-				return (
-					<DropdownMenu
-						key={ field.id }
-						trigger={
-							<DropdownMenuItem>
-								<DropdownMenuItemLabel>
-									{ field.header }
-								</DropdownMenuItemLabel>
-							</DropdownMenuItem>
-						}
-						style={ {
-							minWidth: '220px',
-						} }
+					{ title }
+				</Heading>
+				{ description && (
+					<Text
+						variant="muted"
+						className="dataviews-settings-section__description"
 					>
-						{ SORTING_DIRECTIONS.map( ( direction ) => {
-							const isChecked =
-								currentSortedField !== undefined &&
-								sortedDirection === direction &&
-								field.id === currentSortedField.id;
+						{ description }
+					</Text>
+				) }
+			</div>
+			<Grid
+				columns={ 8 }
+				gap={ 4 }
+				className="dataviews-settings-section__content"
+			>
+				{ children }
+			</Grid>
+		</Grid>
+	);
+}
 
-							const value = `${ field.id }-${ direction }`;
+function DataviewsViewConfigDropdown( {
+	density,
+	setDensity,
+}: {
+	density: number;
+	setDensity: React.Dispatch< React.SetStateAction< number > >;
+} ) {
+	const { view } = useContext( DataViewsContext );
+	const popoverId = useInstanceId(
+		_DataViewsViewConfig,
+		'dataviews-view-config-dropdown'
+	);
 
-							return (
-								<DropdownMenuRadioItem
-									key={ value }
-									// All sorting radio items share the same name, so that
-									// selecting a sorting option automatically deselects the
-									// previously selected one, even if it is displayed in
-									// another submenu. The field and direction are passed via
-									// the `value` prop.
-									name="view-actions-sorting"
-									value={ value }
-									checked={ isChecked }
-									onChange={ () => {
-										onChangeView( {
-											...view,
-											sort: {
-												field: field.id,
-												direction,
-											},
-										} );
-									} }
-								>
-									<DropdownMenuItemLabel>
-										{ sortLabels[ direction ] }
-									</DropdownMenuItemLabel>
-								</DropdownMenuRadioItem>
-							);
-						} ) }
-					</DropdownMenu>
+	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 }
+					/>
 				);
-			} ) }
-		</DropdownMenu>
+			} }
+			renderContent={ () => (
+				<DropdownContentWrapper paddingSize="medium">
+					<VStack className="dataviews-view-config" spacing={ 6 }>
+						<SettingsSection title={ __( 'Appearance' ) }>
+							<HStack expanded className="is-divided-in-two">
+								<SortFieldControl />
+								<SortDirectionControl />
+							</HStack>
+							{ view.type === LAYOUT_GRID && (
+								<DensityPicker
+									density={ density }
+									setDensity={ setDensity }
+								/>
+							) }
+							<ItemsPerPageControl />
+						</SettingsSection>
+						<SettingsSection title={ __( 'Properties' ) }>
+							<FieldControl />
+						</SettingsSection>
+					</VStack>
+				</DropdownContentWrapper>
+			) }
+		/>
 	);
 }
 
-function _DataViewsViewConfig( { defaultLayouts }: ViewActionsProps ) {
-	const { view, fields, onChangeView } = useContext( DataViewsContext );
-	const activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );
+function _DataViewsViewConfig( {
+	density,
+	setDensity,
+	defaultLayouts = { list: {}, grid: {}, table: {} },
+}: {
+	density: number;
+	setDensity: React.Dispatch< React.SetStateAction< number > >;
+	defaultLayouts?: SupportedLayouts;
+} ) {
 	return (
 		<>
-			<HStack
-				spacing={ 1 }
-				expanded={ false }
-				style={ { flexShrink: 0 } }
-			>
-				<DropdownMenu
-					trigger={
-						<Button
-							size="compact"
-							icon={ activeView?.icon }
-							label={ __( 'Layout' ) }
-						/>
-					}
-				>
-					<ViewTypeMenu
-						view={ view }
-						onChangeView={ onChangeView }
-						defaultLayouts={ defaultLayouts }
-					/>
-				</DropdownMenu>
-				<DropdownMenu
-					trigger={
-						<Button
-							size="compact"
-							icon={ cog }
-							label={ _x(
-								'View options',
-								'View is used as a noun'
-							) }
-						/>
-					}
-				>
-					<DropdownMenuGroup>
-						<SortMenu
-							fields={ fields }
-							view={ view }
-							onChangeView={ onChangeView }
-						/>
-						<FieldsVisibilityMenu
-							fields={ fields }
-							view={ view }
-							onChangeView={ onChangeView }
-						/>
-						<PageSizeMenu
-							view={ view }
-							onChangeView={ onChangeView }
-						/>
-					</DropdownMenuGroup>
-				</DropdownMenu>
-			</HStack>
+			<ViewTypeMenu defaultLayouts={ defaultLayouts } />
+			<DataviewsViewConfigDropdown
+				density={ density }
+				setDensity={ setDensity }
+			/>
 		</>
 	);
 }
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 0000000000000..7fff110337ee3
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -0,0 +1,69 @@
+.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;
+	}
+}
diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx
index 618e04773c084..da60ab15ecade 100644
--- a/packages/dataviews/src/components/dataviews/index.tsx
+++ b/packages/dataviews/src/components/dataviews/index.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -7,12 +12,14 @@ import { useMemo, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { default as DataViewsBulkActions } from '../dataviews-bulk-actions';
-import DataViewsBulkActionsToolbar from '../dataviews-bulk-actions-toolbar';
 import DataViewsContext from '../dataviews-context';
-import DataViewsFilters from '../dataviews-filters';
+import {
+	default as DataViewsFilters,
+	useFilters,
+	FilterVisibilityToggle,
+} from '../dataviews-filters';
 import DataViewsLayout from '../dataviews-layout';
-import DataviewsPagination from '../dataviews-pagination';
+import DataViewsFooter from '../dataviews-footer';
 import DataViewsSearch from '../dataviews-search';
 import DataViewsViewConfig from '../dataviews-view-config';
 import { normalizeFields } from '../../normalize-fields';
@@ -37,6 +44,7 @@ type DataViewsProps< Item > = {
 	defaultLayouts: SupportedLayouts;
 	selection?: string[];
 	onChangeSelection?: ( items: string[] ) => void;
+	header?: ReactNode;
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
 	: { getItemId: ( item: Item ) => string } );
@@ -57,8 +65,10 @@ export default function DataViews< Item >( {
 	defaultLayouts,
 	selection: selectionProperty,
 	onChangeSelection,
+	header,
 }: DataViewsProps< Item > ) {
 	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
+	const [ density, setDensity ] = useState< number >( 0 );
 	const isUncontrolled =
 		selectionProperty === undefined || onChangeSelection === undefined;
 	const selection = isUncontrolled ? selectionState : selectionProperty;
@@ -80,6 +90,11 @@ export default function DataViews< Item >( {
 		);
 	}, [ selection, data, getItemId ] );
 
+	const filters = useFilters( _fields, view );
+	const [ isShowingFilter, setIsShowingFilter ] = useState< boolean >( () =>
+		( filters || [] ).some( ( filter ) => filter.isPrimary )
+	);
+
 	return (
 		<DataViewsContext.Provider
 			value={ {
@@ -95,28 +110,47 @@ export default function DataViews< Item >( {
 				openedFilter,
 				setOpenedFilter,
 				getItemId,
+				density,
 			} }
 		>
 			<div className="dataviews-wrapper">
 				<HStack
 					alignment="top"
-					justify="start"
+					justify="space-between"
 					className="dataviews__view-actions"
+					spacing={ 1 }
 				>
 					<HStack
 						justify="start"
-						className="dataviews-filters__container"
-						wrap
+						expanded={ false }
+						className="dataviews__search"
 					>
 						{ search && <DataViewsSearch label={ searchLabel } /> }
-						<DataViewsFilters />
+						<FilterVisibilityToggle
+							filters={ filters }
+							view={ view }
+							onChangeView={ onChangeView }
+							setOpenedFilter={ setOpenedFilter }
+							setIsShowingFilter={ setIsShowingFilter }
+							isShowingFilter={ isShowingFilter }
+						/>
+					</HStack>
+					<HStack
+						spacing={ 1 }
+						expanded={ false }
+						style={ { flexShrink: 0 } }
+					>
+						<DataViewsViewConfig
+							defaultLayouts={ defaultLayouts }
+							density={ density }
+							setDensity={ setDensity }
+						/>
+						{ header }
 					</HStack>
-					<DataViewsBulkActions />
-					<DataViewsViewConfig defaultLayouts={ defaultLayouts } />
 				</HStack>
+				{ isShowingFilter && <DataViewsFilters /> }
 				<DataViewsLayout />
-				<DataviewsPagination />
-				<DataViewsBulkActionsToolbar />
+				<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 0000000000000..ff098209b3468
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
@@ -0,0 +1,698 @@
+/**
+ * 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: '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,
+		render: ( { item } ) => {
+			return <a href="#nothing">{ item.title }</a>;
+		},
+	},
+	{
+		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 0000000000000..3b3e1326115b0
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews/stories/index.story.tsx
@@ -0,0 +1,186 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViews from '../index';
+import {
+	DEFAULT_VIEW,
+	actions,
+	data,
+	fields,
+	themeData,
+	themeFields,
+} from './fixtures';
+import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../../../constants';
+import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
+import type { CombinedField, View } from '../../../types';
+
+import './style.css';
+
+const meta = {
+	title: 'DataViews/DataViews',
+	component: DataViews,
+};
+export default meta;
+
+const defaultLayouts = {
+	[ LAYOUT_TABLE ]: {
+		layout: {
+			primaryField: 'title',
+			styles: {
+				image: {
+					width: 50,
+				},
+				title: {
+					maxWidth: 400,
+				},
+				type: {
+					maxWidth: 400,
+				},
+				description: {
+					maxWidth: 200,
+				},
+			},
+		},
+	},
+	[ LAYOUT_GRID ]: {
+		layout: {
+			mediaField: 'image',
+			primaryField: 'title',
+		},
+	},
+	[ LAYOUT_LIST ]: {
+		layout: {
+			mediaField: 'image',
+			primaryField: 'title',
+		},
+	},
+};
+
+export const Default = () => {
+	const [ view, setView ] = useState< View >( {
+		...DEFAULT_VIEW,
+		fields: [ 'title', 'description', 'categories' ],
+	} );
+	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 }
+			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: {},
+			} }
+		/>
+	);
+};
+
+export const CombinedFields = () => {
+	const defaultLayoutsThemes = {
+		table: {
+			fields: [ 'theme', 'requires', 'tested' ],
+			layout: {
+				primaryField: 'name',
+				combinedFields: [
+					{
+						id: 'theme',
+						label: 'Theme',
+						children: [ 'name', 'description' ],
+						direction: 'vertical',
+					},
+				] as CombinedField[],
+				styles: {
+					theme: {
+						maxWidth: 300,
+					},
+				},
+			},
+		},
+		grid: {
+			fields: [ 'description', 'requires', 'tested' ],
+			layout: { primaryField: 'name', columnFields: [ 'description' ] },
+		},
+		list: {
+			fields: [ 'requires', 'tested' ],
+			layout: { primaryField: 'name' },
+		},
+	};
+	const [ view, setView ] = useState< View >( {
+		...DEFAULT_VIEW,
+		fields: defaultLayoutsThemes.table.fields,
+		layout: defaultLayoutsThemes.table.layout,
+	} );
+	const { data: shownData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( themeData, view, themeFields );
+	}, [ view ] );
+
+	return (
+		<DataViews
+			getItemId={ ( item ) => item.name }
+			paginationInfo={ paginationInfo }
+			data={ shownData }
+			view={ view }
+			fields={ themeFields }
+			onChangeView={ setView }
+			defaultLayouts={ defaultLayoutsThemes }
+		/>
+	);
+};
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 0000000000000..7c0c6565a6edf
--- /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
index 6b8af6a90007d..aa8fbcfb009c0 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -7,9 +7,12 @@
 	container: dataviews-wrapper / inline-size;
 	display: flex;
 	flex-direction: column;
+	font-size: $default-font-size;
+	line-height: $default-line-height;
 }
 
-.dataviews__view-actions {
+.dataviews__view-actions,
+.dataviews-filters__container {
 	box-sizing: border-box;
 	padding: $grid-unit-20 $grid-unit-60;
 	flex-shrink: 0;
@@ -17,12 +20,6 @@
 	left: 0;
 	transition: padding ease-out 0.1s;
 	@include reduce-motion("transition");
-
-	.components-search-control {
-		.components-base-control__field {
-			max-width: 240px;
-		}
-	}
 }
 
 .dataviews-view-list__primary-field,
@@ -78,20 +75,15 @@
 
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 430px) {
-	.dataviews__view-actions {
+	.dataviews__view-actions,
+	.dataviews-filters__container {
 		padding: $grid-unit-15 $grid-unit-30;
-
-		.components-search-control {
-			.components-base-control__field {
-				max-width: 112px;
-			}
-		}
 	}
 
-	.dataviews-view-grid,
 	.dataviews-no-results,
 	.dataviews-loading {
 		padding-left: $grid-unit-30;
 		padding-right: $grid-unit-30;
 	}
 }
+
diff --git a/packages/dataviews/src/constants.ts b/packages/dataviews/src/constants.ts
index 48753470280d0..5ae94c7eb4a13 100644
--- a/packages/dataviews/src/constants.ts
+++ b/packages/dataviews/src/constants.ts
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { arrowDown, arrowUp } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -58,6 +59,10 @@ export const sortLabels = {
 	asc: __( 'Sort ascending' ),
 	desc: __( 'Sort descending' ),
 };
+export const sortIcons = {
+	asc: arrowUp,
+	desc: arrowDown,
+};
 
 // View layouts.
 export const LAYOUT_TABLE = 'table';
diff --git a/packages/dataviews/src/dataform-controls/datetime.tsx b/packages/dataviews/src/dataform-controls/datetime.tsx
new file mode 100644
index 0000000000000..b31c5c60bb9c6
--- /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 0000000000000..297e73c28f837
--- /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 0000000000000..f70a90ffe1523
--- /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 0000000000000..3d616404e0c05
--- /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 0000000000000..2b3bd9373fc15
--- /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 0000000000000..230826c0adf82
--- /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 0000000000000..7ac095f4abede
--- /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/get-visible-fields.ts b/packages/dataviews/src/dataforms-layouts/get-visible-fields.ts
new file mode 100644
index 0000000000000..d95d59a88394e
--- /dev/null
+++ b/packages/dataviews/src/dataforms-layouts/get-visible-fields.ts
@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+import { normalizeCombinedFields } from '../normalize-fields';
+import type {
+	Field,
+	CombinedFormField,
+	NormalizedCombinedFormField,
+} from '../types';
+
+export function getVisibleFields< Item >(
+	fields: Field< Item >[],
+	formFields: string[] = [],
+	combinedFields?: CombinedFormField< Item >[]
+): Field< Item >[] {
+	const visibleFields: Array<
+		Field< Item > | NormalizedCombinedFormField< Item >
+	> = [ ...fields ];
+	if ( combinedFields ) {
+		visibleFields.push(
+			...normalizeCombinedFields( combinedFields, fields )
+		);
+	}
+	return formFields
+		.map( ( fieldId ) =>
+			visibleFields.find( ( { id } ) => id === fieldId )
+		)
+		.filter( ( field ): field is Field< Item > => !! field );
+}
diff --git a/packages/dataviews/src/dataforms-layouts/index.tsx b/packages/dataviews/src/dataforms-layouts/index.tsx
new file mode 100644
index 0000000000000..9434ea724ed4c
--- /dev/null
+++ b/packages/dataviews/src/dataforms-layouts/index.tsx
@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import FormRegular from './regular';
+import FormPanel from './panel';
+
+const FORM_LAYOUTS = [
+	{
+		type: 'regular',
+		component: FormRegular,
+	},
+	{
+		type: 'panel',
+		component: FormPanel,
+	},
+];
+
+export function getFormLayout( type: string ) {
+	return FORM_LAYOUTS.find( ( layout ) => layout.type === type );
+}
diff --git a/packages/dataviews/src/dataforms-layouts/panel/index.tsx b/packages/dataviews/src/dataforms-layouts/panel/index.tsx
new file mode 100644
index 0000000000000..5d3bbc532ad45
--- /dev/null
+++ b/packages/dataviews/src/dataforms-layouts/panel/index.tsx
@@ -0,0 +1,169 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+	__experimentalSpacer as Spacer,
+	Dropdown,
+	Button,
+} from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+import { sprintf, __ } from '@wordpress/i18n';
+import { closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { normalizeFields } from '../../normalize-fields';
+import { getVisibleFields } from '../get-visible-fields';
+import type { DataFormProps, NormalizedField } from '../../types';
+
+interface FormFieldProps< Item > {
+	data: Item;
+	field: NormalizedField< Item >;
+	onChange: ( value: any ) => void;
+}
+
+function DropdownHeader( {
+	title,
+	onClose,
+}: {
+	title: string;
+	onClose: () => void;
+} ) {
+	return (
+		<VStack
+			className="dataforms-layouts-panel__dropdown-header"
+			spacing={ 4 }
+		>
+			<HStack alignment="center">
+				<Heading level={ 2 } size={ 13 }>
+					{ title }
+				</Heading>
+				<Spacer />
+				{ onClose && (
+					<Button
+						label={ __( 'Close' ) }
+						icon={ closeSmall }
+						onClick={ onClose }
+						size="small"
+					/>
+				) }
+			</HStack>
+		</VStack>
+	);
+}
+
+function FormField< Item >( {
+	data,
+	field,
+	onChange,
+}: FormFieldProps< Item > ) {
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(
+		null
+	);
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	return (
+		<HStack
+			ref={ setPopoverAnchor }
+			className="dataforms-layouts-panel__field"
+		>
+			<div className="dataforms-layouts-panel__field-label">
+				{ field.label }
+			</div>
+			<div>
+				<Dropdown
+					contentClassName="dataforms-layouts-panel__field-dropdown"
+					popoverProps={ popoverProps }
+					focusOnMount
+					toggleProps={ {
+						size: 'compact',
+						variant: 'tertiary',
+						tooltipPosition: 'middle left',
+					} }
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button
+							className="dataforms-layouts-panel__field-control"
+							size="compact"
+							variant="tertiary"
+							aria-expanded={ isOpen }
+							aria-label={ sprintf(
+								// translators: %s: Field name.
+								__( 'Edit %s' ),
+								field.label
+							) }
+							onClick={ onToggle }
+						>
+							<field.render item={ data } />
+						</Button>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<>
+							<DropdownHeader
+								title={ field.label }
+								onClose={ onClose }
+							/>
+							<field.Edit
+								key={ field.id }
+								data={ data }
+								field={ field }
+								onChange={ onChange }
+								hideLabelFromVision
+							/>
+						</>
+					) }
+				/>
+			</div>
+		</HStack>
+	);
+}
+
+export default function FormPanel< Item >( {
+	data,
+	fields,
+	form,
+	onChange,
+}: DataFormProps< Item > ) {
+	const visibleFields = useMemo(
+		() =>
+			normalizeFields(
+				getVisibleFields< Item >(
+					fields,
+					form.fields,
+					form.combinedFields
+				)
+			),
+		[ fields, form.fields, form.combinedFields ]
+	);
+
+	return (
+		<VStack spacing={ 2 }>
+			{ visibleFields.map( ( field ) => {
+				return (
+					<FormField
+						key={ field.id }
+						data={ data }
+						field={ field }
+						onChange={ onChange }
+					/>
+				);
+			} ) }
+		</VStack>
+	);
+}
diff --git a/packages/dataviews/src/dataforms-layouts/panel/style.scss b/packages/dataviews/src/dataforms-layouts/panel/style.scss
new file mode 100644
index 0000000000000..ae69c4ff45243
--- /dev/null
+++ b/packages/dataviews/src/dataforms-layouts/panel/style.scss
@@ -0,0 +1,46 @@
+.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;
+}
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 0000000000000..57aa163b890e5
--- /dev/null
+++ b/packages/dataviews/src/dataforms-layouts/regular/index.tsx
@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { normalizeFields } from '../../normalize-fields';
+import { getVisibleFields } from '../get-visible-fields';
+import type { DataFormProps } from '../../types';
+
+export default function FormRegular< Item >( {
+	data,
+	fields,
+	form,
+	onChange,
+}: DataFormProps< Item > ) {
+	const visibleFields = useMemo(
+		() =>
+			normalizeFields(
+				getVisibleFields< Item >(
+					fields,
+					form.fields,
+					form.combinedFields
+				)
+			),
+		[ fields, form.fields, form.combinedFields ]
+	);
+
+	return (
+		<VStack spacing={ 4 }>
+			{ visibleFields.map( ( field ) => {
+				return (
+					<field.Edit
+						key={ field.id }
+						data={ data }
+						field={ field }
+						onChange={ onChange }
+					/>
+				);
+			} ) }
+		</VStack>
+	);
+}
diff --git a/packages/dataviews/src/dataviews-layouts/grid/density-picker.tsx b/packages/dataviews/src/dataviews-layouts/grid/density-picker.tsx
new file mode 100644
index 0000000000000..34ddf6c3fe52f
--- /dev/null
+++ b/packages/dataviews/src/dataviews-layouts/grid/density-picker.tsx
@@ -0,0 +1,102 @@
+/**
+ * WordPress dependencies
+ */
+import { RangeControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
+import { useEffect, useMemo } from '@wordpress/element';
+
+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 default function DensityPicker( {
+	density,
+	setDensity,
+}: {
+	density: number;
+	setDensity: React.Dispatch< React.SetStateAction< number > >;
+} ) {
+	const viewport = useViewPortBreakpoint();
+	useEffect( () => {
+		setDensity( ( _density ) => {
+			if ( ! viewport || ! _density ) {
+				return 0;
+			}
+			const breakValues = viewportBreaks[ viewport ];
+			if ( _density < breakValues.min ) {
+				return breakValues.min;
+			}
+			if ( _density > breakValues.max ) {
+				return breakValues.max;
+			}
+			return _density;
+		} );
+	}, [ setDensity, viewport ] );
+	const breakValues = viewportBreaks[ viewport || 'mobile' ];
+	const densityToUse = density || breakValues.default;
+
+	const marks = useMemo(
+		() =>
+			Array.from(
+				{ length: breakValues.max - breakValues.min + 1 },
+				( _, i ) => {
+					return {
+						value: breakValues.min + i,
+					};
+				}
+			),
+		[ breakValues ]
+	);
+
+	if ( ! viewport ) {
+		return null;
+	}
+
+	return (
+		<RangeControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			showTooltip={ false }
+			label={ __( 'Preview size' ) }
+			value={ breakValues.max + breakValues.min - densityToUse }
+			marks={ marks }
+			min={ breakValues.min }
+			max={ breakValues.max }
+			withInputField={ false }
+			onChange={ ( value = 0 ) => {
+				setDensity( breakValues.max + breakValues.min - value );
+			} }
+			step={ 1 }
+		/>
+	);
+}
diff --git a/packages/dataviews/src/layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
similarity index 94%
rename from packages/dataviews/src/layouts/grid/index.tsx
rename to packages/dataviews/src/dataviews-layouts/grid/index.tsx
index 0e94843dd34e5..230ffe0dc50b5 100644
--- a/packages/dataviews/src/layouts/grid/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -84,18 +84,18 @@ function GridItem< Item >( {
 			<div className="dataviews-view-grid__media">
 				{ renderedMediaField }
 			</div>
+			<SingleSelectionCheckbox
+				item={ item }
+				selection={ selection }
+				onChangeSelection={ onChangeSelection }
+				getItemId={ getItemId }
+				primaryField={ primaryField }
+				disabled={ ! hasBulkAction }
+			/>
 			<HStack
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
 			>
-				<SingleSelectionCheckbox
-					item={ item }
-					selection={ selection }
-					onChangeSelection={ onChangeSelection }
-					getItemId={ getItemId }
-					primaryField={ primaryField }
-					disabled={ ! hasBulkAction }
-				/>
 				<HStack className="dataviews-view-grid__primary-field">
 					{ renderedPrimaryField }
 				</HStack>
@@ -172,6 +172,7 @@ export default function ViewGrid< Item >( {
 	onChangeSelection,
 	selection,
 	view,
+	density,
 }: ViewGridProps< Item > ) {
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout?.mediaField
@@ -202,6 +203,9 @@ export default function ViewGrid< Item >( {
 		{ visibleFields: [], badgeFields: [] }
 	);
 	const hasData = !! data?.length;
+	const gridStyle = density
+		? { gridTemplateColumns: `repeat(${ density }, minmax(0, 1fr))` }
+		: {};
 	return (
 		<>
 			{ hasData && (
@@ -210,6 +214,7 @@ export default function ViewGrid< Item >( {
 					columns={ 2 }
 					alignment="top"
 					className="dataviews-view-grid"
+					style={ gridStyle }
 					aria-busy={ isLoading }
 				>
 					{ data.map( ( item ) => {
diff --git a/packages/dataviews/src/layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
similarity index 60%
rename from packages/dataviews/src/layouts/grid/style.scss
rename to packages/dataviews/src/dataviews-layouts/grid/style.scss
index 9e18c82a44170..6286ed94685a0 100644
--- a/packages/dataviews/src/layouts/grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -1,26 +1,15 @@
 .dataviews-view-grid {
 	margin-bottom: auto;
-	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
 	grid-template-rows: max-content;
 	padding: 0 $grid-unit-60 $grid-unit-30;
 	transition: padding ease-out 0.1s;
 	@include reduce-motion("transition");
 
-	@include break-mobile() {
-		grid-template-columns: repeat(2, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
-
-	@include break-xlarge() {
-		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
-
-	@include break-huge() {
-		grid-template-columns: repeat(4, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
 
 	.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;
@@ -34,6 +23,11 @@
 			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
 				color: $gray-900;
 			}
+
+			.dataviews-view-grid__media::after {
+				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+				box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+			}
 		}
 	}
 
@@ -73,10 +67,20 @@
 			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 {
 			align-items: flex-start;
 			min-height: $grid-unit-30;
 
+			&:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
+				display: none;
+			}
+
 			&:not(.is-column) {
 				align-items: center;
 
@@ -114,7 +118,7 @@
 			background: $gray-100;
 			padding: 0 $grid-unit-10;
 			min-height: $grid-unit-30;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
 			display: flex;
 			align-items: center;
 			font-size: 12px;
@@ -122,7 +126,48 @@
 	}
 }
 
+.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;
+	}
+}
diff --git a/packages/dataviews/src/dataviews-layouts/index.ts b/packages/dataviews/src/dataviews-layouts/index.ts
new file mode 100644
index 0000000000000..eece17d0f4f10
--- /dev/null
+++ b/packages/dataviews/src/dataviews-layouts/index.ts
@@ -0,0 +1,127 @@
+/**
+ * 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 type { View, Field } from '../types';
+
+export const VIEW_LAYOUTS = [
+	{
+		type: LAYOUT_TABLE,
+		label: __( 'Table' ),
+		component: ViewTable,
+		icon: blockTable,
+	},
+	{
+		type: LAYOUT_GRID,
+		label: __( 'Grid' ),
+		component: ViewGrid,
+		icon: category,
+	},
+	{
+		type: LAYOUT_LIST,
+		label: __( 'List' ),
+		component: ViewList,
+		icon: isRTL() ? formatListBulletsRTL : formatListBullets,
+	},
+];
+
+export function getNotHidableFieldIds( view: View ): string[] {
+	if ( view.type === 'table' ) {
+		return [ view.layout?.primaryField ]
+			.concat(
+				view.layout?.combinedFields?.flatMap(
+					( field ) => field.children
+				) ?? []
+			)
+			.filter( ( item ): item is string => !! item );
+	}
+
+	if ( view.type === 'grid' ) {
+		return [ view.layout?.primaryField, view.layout?.mediaField ].filter(
+			( item ): item is string => !! item
+		);
+	}
+
+	if ( view.type === 'list' ) {
+		return [ view.layout?.primaryField, view.layout?.mediaField ].filter(
+			( item ): item is string => !! item
+		);
+	}
+
+	return [];
+}
+
+function getCombinedFieldIds( view: View ): string[] {
+	const combinedFields: string[] = [];
+	if ( view.type === LAYOUT_TABLE && view.layout?.combinedFields ) {
+		view.layout.combinedFields.forEach( ( combination ) => {
+			combinedFields.push( ...combination.children );
+		} );
+	}
+	return combinedFields;
+}
+
+export function getVisibleFieldIds(
+	view: View,
+	fields: Field< any >[]
+): string[] {
+	const fieldsToExclude = getCombinedFieldIds( view );
+
+	if ( view.fields ) {
+		return view.fields.filter( ( id ) => ! fieldsToExclude.includes( id ) );
+	}
+
+	const visibleFields = [];
+	if ( view.type === LAYOUT_TABLE && view.layout?.combinedFields ) {
+		visibleFields.push(
+			...view.layout.combinedFields.map( ( { id } ) => id )
+		);
+	}
+	visibleFields.push(
+		...fields
+			.filter( ( { id } ) => ! fieldsToExclude.includes( id ) )
+			.map( ( { id } ) => id )
+	);
+
+	return visibleFields;
+}
+
+export function getHiddenFieldIds(
+	view: View,
+	fields: Field< any >[]
+): string[] {
+	const fieldsToExclude = [
+		...getCombinedFieldIds( view ),
+		...getVisibleFieldIds( view, fields ),
+	];
+
+	// The media field does not need to be in the view.fields to be displayed.
+	if ( view.type === LAYOUT_GRID && view.layout?.mediaField ) {
+		fieldsToExclude.push( view.layout?.mediaField );
+	}
+
+	if ( view.type === LAYOUT_LIST && view.layout?.mediaField ) {
+		fieldsToExclude.push( view.layout?.mediaField );
+	}
+
+	return fields
+		.filter(
+			( { id, enableHiding } ) =>
+				! fieldsToExclude.includes( id ) && enableHiding
+		)
+		.map( ( { id } ) => id );
+}
diff --git a/packages/dataviews/src/layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx
similarity index 51%
rename from packages/dataviews/src/layouts/list/index.tsx
rename to packages/dataviews/src/dataviews-layouts/list/index.tsx
index 68d9f39f447f1..fb46521fe217b 100644
--- a/packages/dataviews/src/layouts/list/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/list/index.tsx
@@ -2,14 +2,11 @@
  * External dependencies
  */
 import clsx from 'clsx';
-// Import CompositeStore type, which is not exported from @wordpress/components.
-// eslint-disable-next-line no-restricted-imports
-import type { CompositeStore } from '@ariakit/react';
 
 /**
  * WordPress dependencies
  */
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, usePrevious } from '@wordpress/compose';
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -17,6 +14,7 @@ import {
 	privateApis as componentsPrivateApis,
 	Spinner,
 	VisuallyHidden,
+	Composite,
 } from '@wordpress/components';
 import {
 	useCallback,
@@ -41,39 +39,110 @@ import type { Action, NormalizedField, ViewListProps } from '../../types';
 
 interface ListViewItemProps< Item > {
 	actions: Action< Item >[];
-	id?: string;
+	idPrefix: string;
 	isSelected: boolean;
 	item: Item;
 	mediaField?: NormalizedField< Item >;
 	onSelect: ( item: Item ) => void;
 	primaryField?: NormalizedField< Item >;
-	store: CompositeStore;
 	visibleFields: NormalizedField< Item >[];
+	onDropdownTriggerKeyDown: React.KeyboardEventHandler< HTMLButtonElement >;
 }
 
-const {
-	useCompositeStoreV2: useCompositeStore,
-	CompositeV2: Composite,
-	CompositeItemV2: CompositeItem,
-	CompositeRowV2: CompositeRow,
-	DropdownMenuV2: DropdownMenu,
-} = unlock( componentsPrivateApis );
+const { DropdownMenuV2: DropdownMenu } = 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 >( {
 	actions,
-	id,
+	idPrefix,
 	isSelected,
 	item,
 	mediaField,
 	onSelect,
 	primaryField,
-	store,
 	visibleFields,
+	onDropdownTriggerKeyDown,
 }: ListViewItemProps< Item > ) {
-	const registry = useRegistry();
-	const itemRef = useRef< HTMLElement >( null );
-	const labelId = `${ id }-label`;
-	const descriptionId = `${ id }-description`;
+	const itemRef = useRef< HTMLDivElement >( null );
+	const labelId = `${ idPrefix }-label`;
+	const descriptionId = `${ idPrefix }-description`;
 
 	const [ isHovered, setIsHovered ] = useState( false );
 	const handleMouseEnter = () => {
@@ -108,13 +177,6 @@ function ListItem< Item >( {
 		};
 	}, [ actions, item ] );
 
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const primaryActionLabel =
-		primaryAction &&
-		( typeof primaryAction.label === 'string'
-			? primaryAction.label
-			: primaryAction.label( [ item ] ) );
-
 	const renderedMediaField = mediaField?.render ? (
 		<mediaField.render item={ item } />
 	) : (
@@ -126,7 +188,7 @@ function ListItem< Item >( {
 	) : null;
 
 	return (
-		<CompositeRow
+		<Composite.Row
 			ref={ itemRef }
 			render={ <li /> }
 			role="row"
@@ -143,11 +205,10 @@ function ListItem< Item >( {
 				spacing={ 0 }
 			>
 				<div role="gridcell">
-					<CompositeItem
-						store={ store }
+					<Composite.Item
 						render={ <div /> }
 						role="button"
-						id={ id }
+						id={ generateItemWrapperCompositeId( idPrefix ) }
 						aria-pressed={ isSelected }
 						aria-labelledby={ labelId }
 						aria-describedby={ descriptionId }
@@ -185,7 +246,7 @@ function ListItem< Item >( {
 												as="span"
 												className="dataviews-view-list__field-label"
 											>
-												{ field.header }
+												{ field.label }
 											</VisuallyHidden>
 											<span className="dataviews-view-list__field-value">
 												<field.render item={ item } />
@@ -195,7 +256,7 @@ function ListItem< Item >( {
 								</div>
 							</VStack>
 						</HStack>
-					</CompositeItem>
+					</Composite.Item>
 				</div>
 				{ eligibleActions?.length > 0 && (
 					<HStack
@@ -207,65 +268,20 @@ function ListItem< Item >( {
 							width: 'auto',
 						} }
 					>
-						{ primaryAction && 'RenderModal' in primaryAction && (
-							<div role="gridcell">
-								<CompositeItem
-									store={ store }
-									render={
-										<Button
-											label={ primaryActionLabel }
-											icon={ primaryAction.icon }
-											isDestructive={
-												primaryAction.isDestructive
-											}
-											size="small"
-											onClick={ () =>
-												setIsModalOpen( true )
-											}
-										/>
-									}
-								>
-									{ isModalOpen && (
-										<ActionModal< Item >
-											action={ primaryAction }
-											items={ [ item ] }
-											closeModal={ () =>
-												setIsModalOpen( false )
-											}
-										/>
-									) }
-								</CompositeItem>
-							</div>
+						{ primaryAction && (
+							<PrimaryActionGridCell
+								idPrefix={ idPrefix }
+								primaryAction={ primaryAction }
+								item={ item }
+							/>
 						) }
-						{ primaryAction &&
-							! ( 'RenderModal' in primaryAction ) && (
-								<div role="gridcell" key={ primaryAction.id }>
-									<CompositeItem
-										store={ store }
-										render={
-											<Button
-												label={ primaryActionLabel }
-												icon={ primaryAction.icon }
-												isDestructive={
-													primaryAction.isDestructive
-												}
-												size="small"
-												onClick={ () => {
-													primaryAction.callback(
-														[ item ],
-														{ registry }
-													);
-												} }
-											/>
-										}
-									/>
-								</div>
-							) }
 						<div role="gridcell">
 							<DropdownMenu
 								trigger={
-									<CompositeItem
-										store={ store }
+									<Composite.Item
+										id={ generateDropdownTriggerCompositeId(
+											idPrefix
+										) }
 										render={
 											<Button
 												size="small"
@@ -273,30 +289,9 @@ function ListItem< Item >( {
 												label={ __( 'Actions' ) }
 												accessibleWhenDisabled
 												disabled={ ! actions.length }
-												onKeyDown={ ( event: {
-													key: string;
-													preventDefault: () => void;
-												} ) => {
-													if (
-														event.key ===
-														'ArrowDown'
-													) {
-														// Prevent the default behaviour (open dropdown menu) and go down.
-														event.preventDefault();
-														store.move(
-															store.down()
-														);
-													}
-													if (
-														event.key === 'ArrowUp'
-													) {
-														// Prevent the default behavior (open dropdown menu) and go up.
-														event.preventDefault();
-														store.move(
-															store.up()
-														);
-													}
-												} }
+												onKeyDown={
+													onDropdownTriggerKeyDown
+												}
 											/>
 										}
 									/>
@@ -312,7 +307,7 @@ function ListItem< Item >( {
 					</HStack>
 				) }
 			</HStack>
-		</CompositeRow>
+		</Composite.Row>
 	);
 }
 
@@ -328,6 +323,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 		view,
 	} = props;
 	const baseId = useInstanceId( ViewList, 'view-list' );
+
 	const selectedItem = data?.findLast( ( item ) =>
 		selection.includes( getItemId( item ) )
 	);
@@ -350,33 +346,111 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	const onSelect = ( item: Item ) =>
 		onChangeSelection( [ getItemId( item ) ] );
 
-	const getItemDomId = useCallback(
-		( item?: Item ) =>
-			item ? `${ baseId }-${ getItemId( item ) }` : undefined,
+	const generateCompositeItemIdPrefix = useCallback(
+		( item: Item ) => `${ baseId }-${ getItemId( item ) }`,
 		[ baseId, getItemId ]
 	);
 
-	const store = useCompositeStore( {
-		defaultActiveId: getItemDomId( selectedItem ),
-	} );
-
-	// Manage focused item, when the active one is removed from the list.
-	const isActiveIdInList = store.useState(
-		( state: { items: any[]; activeId: any } ) =>
-			state.items.some(
-				( item: { id: any } ) => item.id === state.activeId
-			)
+	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 ( ! isActiveIdInList ) {
-			// Prefer going down, except if there is no item below (last item), then go up (last item in list).
-			if ( store.down() ) {
-				store.move( store.down() );
-			} else if ( store.up() ) {
-				store.move( store.up() );
+		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 ] );
+	}, [ 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 ) {
@@ -400,22 +474,23 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 			render={ <ul /> }
 			className="dataviews-view-list"
 			role="grid"
-			store={ store }
+			activeId={ activeCompositeId }
+			setActiveId={ setActiveCompositeId }
 		>
 			{ data.map( ( item ) => {
-				const id = getItemDomId( item );
+				const id = generateCompositeItemIdPrefix( item );
 				return (
 					<ListItem
 						key={ id }
-						id={ id }
+						idPrefix={ id }
 						actions={ actions }
 						item={ item }
 						isSelected={ item === selectedItem }
 						onSelect={ onSelect }
 						mediaField={ mediaField }
 						primaryField={ primaryField }
-						store={ store }
 						visibleFields={ visibleFields }
+						onDropdownTriggerKeyDown={ onDropdownTriggerKeyDown }
 					/>
 				);
 			} ) }
diff --git a/packages/dataviews/src/layouts/list/style.scss b/packages/dataviews/src/dataviews-layouts/list/style.scss
similarity index 91%
rename from packages/dataviews/src/layouts/list/style.scss
rename to packages/dataviews/src/dataviews-layouts/list/style.scss
index 09f29a73b74d2..ea3236f6d75e1 100644
--- a/packages/dataviews/src/layouts/list/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/list/style.scss
@@ -1,3 +1,7 @@
+ul.dataviews-view-list {
+	list-style-type: none;
+}
+
 .dataviews-view-list {
 	margin: 0 0 auto;
 
@@ -73,6 +77,7 @@
 				color: $gray-900;
 			}
 			&:hover,
+			&.is-hovered,
 			&:focus-within {
 				color: var(--wp-admin-theme-color);
 				background-color: #f8f8f8;
@@ -100,6 +105,7 @@
 	}
 
 	.dataviews-view-list__item {
+		box-sizing: border-box;
 		padding: $grid-unit-20 $grid-unit-30;
 		width: 100%;
 		scroll-margin: $grid-unit-10 0;
@@ -108,12 +114,12 @@
 			&::before {
 				position: absolute;
 				content: "";
-				top: calc(var(--wp-admin-border-width-focus) + 1px);
+				top: var(--wp-admin-border-width-focus);
 				right: var(--wp-admin-border-width-focus);
 				bottom: var(--wp-admin-border-width-focus);
 				left: 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-block-ui;
+				border-radius: $radius-small;
 			}
 		}
 		.dataviews-view-list__primary-field {
@@ -151,8 +157,8 @@
 	}
 
 	.dataviews-view-list__media-placeholder {
-		min-width: $grid-unit-40;
-		height: $grid-unit-40;
+		width: $grid-unit-05 * 13;
+		height: $grid-unit-05 * 13;
 		background-color: $gray-200;
 	}
 
@@ -179,7 +185,10 @@
 		}
 
 		.dataviews-view-list__field-value {
-			line-height: $grid-unit-05 * 6;
+			min-height: $grid-unit-30;
+			line-height: $grid-unit-05 * 5;
+			display: flex;
+			align-items: center;
 		}
 	}
 
diff --git a/packages/dataviews/src/layouts/table/column-header-menu.tsx b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
similarity index 60%
rename from packages/dataviews/src/layouts/table/column-header-menu.tsx
rename to packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
index 7224701798bba..aff211fb613dc 100644
--- a/packages/dataviews/src/layouts/table/column-header-menu.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
@@ -25,16 +25,11 @@ import type {
 	NormalizedField,
 	SortDirection,
 	ViewTable as ViewTableType,
+	Operator,
 } from '../../types';
+import { getVisibleFieldIds } from '../index';
 
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuGroupV2: DropdownMenuGroup,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-	DropdownMenuSeparatorV2: DropdownMenuSeparator,
-} = unlock( componentsPrivateApis );
+const { DropdownMenuV2 } = unlock( componentsPrivateApis );
 
 interface HeaderMenuProps< Item > {
 	fieldId: string;
@@ -50,7 +45,7 @@ function WithDropDownMenuSeparators( { children }: { children: ReactNode } ) {
 		.filter( Boolean )
 		.map( ( child, i ) => (
 			<Fragment key={ i }>
-				{ i > 0 && <DropdownMenuSeparator /> }
+				{ i > 0 && <DropdownMenuV2.Separator /> }
 				{ child }
 			</Fragment>
 		) );
@@ -67,35 +62,46 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 	}: HeaderMenuProps< Item >,
 	ref: Ref< HTMLButtonElement >
 ) {
+	const visibleFieldIds = getVisibleFieldIds( 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 header;
+	let operators: Operator[] = [];
+
 	const combinedField = view.layout?.combinedFields?.find(
 		( f ) => f.id === fieldId
 	);
-	const index = view.fields?.indexOf( fieldId ) as number;
-	if ( !! combinedField ) {
-		return combinedField.header;
-	}
 	const field = fields.find( ( f ) => f.id === fieldId );
-	if ( ! field ) {
-		return null;
-	}
-	const isHidable = field.enableHiding !== false;
-	const isSortable = field.enableSorting !== false;
-	const isSorted = view.sort?.field === field.id;
-	const 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.
-	const canAddFilter =
-		! view.filters?.some( ( _filter ) => field.id === _filter.field ) &&
-		!! field.elements?.length &&
-		!! operators.length &&
-		! field.filterBy?.isPrimary;
-	if ( ! isSortable && ! isHidable && ! canAddFilter ) {
-		return field.header;
+
+	if ( ! combinedField ) {
+		if ( ! field ) {
+			// No combined or regular field found.
+			return null;
+		}
+
+		isHidable = field.enableHiding !== false;
+		isSortable = field.enableSorting !== false;
+		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;
+	} else {
+		header = combinedField.header || combinedField.label;
 	}
+
 	return (
-		<DropdownMenu
+		<DropdownMenuV2
 			align="start"
 			trigger={
 				<Button
@@ -104,7 +110,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 					ref={ ref }
 					variant="tertiary"
 				>
-					{ field.header }
+					{ header }
 					{ view.sort && isSorted && (
 						<span aria-hidden="true">
 							{ sortArrows[ view.sort.direction ] }
@@ -116,7 +122,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 		>
 			<WithDropDownMenuSeparators>
 				{ isSortable && (
-					<DropdownMenuGroup>
+					<DropdownMenuV2.Group>
 						{ SORTING_DIRECTIONS.map(
 							( direction: SortDirection ) => {
 								const isChecked =
@@ -124,10 +130,10 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 									isSorted &&
 									view.sort.direction === direction;
 
-								const value = `${ field.id }-${ direction }`;
+								const value = `${ fieldId }-${ direction }`;
 
 								return (
-									<DropdownMenuRadioItem
+									<DropdownMenuV2.RadioItem
 										key={ value }
 										// All sorting radio items share the same name, so that
 										// selecting a sorting option automatically deselects the
@@ -141,34 +147,34 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 											onChangeView( {
 												...view,
 												sort: {
-													field: field.id,
+													field: fieldId,
 													direction,
 												},
 											} );
 										} }
 									>
-										<DropdownMenuItemLabel>
+										<DropdownMenuV2.ItemLabel>
 											{ sortLabels[ direction ] }
-										</DropdownMenuItemLabel>
-									</DropdownMenuRadioItem>
+										</DropdownMenuV2.ItemLabel>
+									</DropdownMenuV2.RadioItem>
 								);
 							}
 						) }
-					</DropdownMenuGroup>
+					</DropdownMenuV2.Group>
 				) }
 				{ canAddFilter && (
-					<DropdownMenuGroup>
-						<DropdownMenuItem
+					<DropdownMenuV2.Group>
+						<DropdownMenuV2.Item
 							prefix={ <Icon icon={ funnel } /> }
 							onClick={ () => {
-								setOpenedFilter( field.id );
+								setOpenedFilter( fieldId );
 								onChangeView( {
 									...view,
 									page: 1,
 									filters: [
 										...( view.filters || [] ),
 										{
-											field: field.id,
+											field: fieldId,
 											value: undefined,
 											operator: operators[ 0 ],
 										},
@@ -176,86 +182,76 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 								} );
 							} }
 						>
-							<DropdownMenuItemLabel>
+							<DropdownMenuV2.ItemLabel>
 								{ __( 'Add filter' ) }
-							</DropdownMenuItemLabel>
-						</DropdownMenuItem>
-					</DropdownMenuGroup>
+							</DropdownMenuV2.ItemLabel>
+						</DropdownMenuV2.Item>
+					</DropdownMenuV2.Group>
 				) }
-				<DropdownMenuGroup>
-					<DropdownMenuItem
+				<DropdownMenuV2.Group>
+					<DropdownMenuV2.Item
 						prefix={ <Icon icon={ arrowLeft } /> }
 						disabled={ index < 1 }
 						onClick={ () => {
-							if ( ! view.fields || index < 1 ) {
-								return;
-							}
 							onChangeView( {
 								...view,
 								fields: [
-									...( view.fields.slice( 0, index - 1 ) ??
-										[] ),
-									field.id,
-									view.fields[ index - 1 ],
-									...view.fields.slice( index + 1 ),
+									...( visibleFieldIds.slice(
+										0,
+										index - 1
+									) ?? [] ),
+									fieldId,
+									visibleFieldIds[ index - 1 ],
+									...visibleFieldIds.slice( index + 1 ),
 								],
 							} );
 						} }
 					>
-						<DropdownMenuItemLabel>
+						<DropdownMenuV2.ItemLabel>
 							{ __( 'Move left' ) }
-						</DropdownMenuItemLabel>
-					</DropdownMenuItem>
-					<DropdownMenuItem
+						</DropdownMenuV2.ItemLabel>
+					</DropdownMenuV2.Item>
+					<DropdownMenuV2.Item
 						prefix={ <Icon icon={ arrowRight } /> }
-						disabled={
-							! view.fields || index >= view.fields.length - 1
-						}
+						disabled={ index >= visibleFieldIds.length - 1 }
 						onClick={ () => {
-							if (
-								! view.fields ||
-								index >= view.fields.length - 1
-							) {
-								return;
-							}
 							onChangeView( {
 								...view,
 								fields: [
-									...( view.fields.slice( 0, index ) ?? [] ),
-									view.fields[ index + 1 ],
-									field.id,
-									...view.fields.slice( index + 2 ),
+									...( visibleFieldIds.slice( 0, index ) ??
+										[] ),
+									visibleFieldIds[ index + 1 ],
+									fieldId,
+									...visibleFieldIds.slice( index + 2 ),
 								],
 							} );
 						} }
 					>
-						<DropdownMenuItemLabel>
+						<DropdownMenuV2.ItemLabel>
 							{ __( 'Move right' ) }
-						</DropdownMenuItemLabel>
-					</DropdownMenuItem>
-					{ isHidable && (
-						<DropdownMenuItem
+						</DropdownMenuV2.ItemLabel>
+					</DropdownMenuV2.Item>
+					{ isHidable && field && (
+						<DropdownMenuV2.Item
 							prefix={ <Icon icon={ unseen } /> }
 							onClick={ () => {
-								const viewFields =
-									view.fields || fields.map( ( f ) => f.id );
 								onHide( field );
 								onChangeView( {
 									...view,
-									fields: viewFields.filter(
-										( id ) => id !== field.id
+									fields: visibleFieldIds.filter(
+										( id ) => id !== fieldId
 									),
 								} );
 							} }
 						>
-							<DropdownMenuItemLabel>
-								{ __( 'Hide' ) }
-							</DropdownMenuItemLabel>
-						</DropdownMenuItem>
+							<DropdownMenuV2.ItemLabel>
+								{ __( 'Hide column' ) }
+							</DropdownMenuV2.ItemLabel>
+						</DropdownMenuV2.Item>
 					) }
-				</DropdownMenuGroup>
+				</DropdownMenuV2.Group>
 			</WithDropDownMenuSeparators>
-		</DropdownMenu>
+		</DropdownMenuV2>
 	);
 } );
 
diff --git a/packages/dataviews/src/layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx
similarity index 85%
rename from packages/dataviews/src/layouts/table/index.tsx
rename to packages/dataviews/src/dataviews-layouts/table/index.tsx
index 934cff9e23aff..4e1607b01489c 100644
--- a/packages/dataviews/src/layouts/table/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/index.tsx
@@ -8,18 +8,11 @@ import clsx from 'clsx';
  */
 import { __ } from '@wordpress/i18n';
 import {
-	CheckboxControl,
 	Spinner,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import {
-	useEffect,
-	useId,
-	useRef,
-	useState,
-	useMemo,
-} from '@wordpress/element';
+import { useEffect, useId, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -30,6 +23,7 @@ import { sortValues } from '../../constants';
 import {
 	useSomeItemHasAPossibleBulkAction,
 	useHasAPossibleBulkAction,
+	BulkSelectionCheckbox,
 } from '../../components/dataviews-bulk-actions';
 import type {
 	Action,
@@ -40,14 +34,7 @@ import type {
 } from '../../types';
 import type { SetSelection } from '../../private-types';
 import ColumnHeaderMenu from './column-header-menu';
-
-interface BulkSelectionCheckboxProps< Item > {
-	selection: string[];
-	onChangeSelection: SetSelection;
-	data: Item[];
-	actions: Action< Item >[];
-	getItemId: ( item: Item ) => string;
-}
+import { getVisibleFieldIds } from '../index';
 
 interface TableColumnFieldProps< Item > {
 	primaryField?: NormalizedField< Item >;
@@ -84,50 +71,6 @@ interface TableRowProps< Item > {
 	onChangeSelection: SetSelection;
 }
 
-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' )
-			}
-		/>
-	);
-}
-
 function TableColumn< Item >( {
 	column,
 	fields,
@@ -212,8 +155,8 @@ function TableRow< Item >( {
 	// Will be set to true if `onTouchStart` fires. This happens before
 	// `onClick` and can be used to exclude touchscreen devices from certain
 	// behaviours.
-	const isTouchDevice = useRef( false );
-	const columns = view.fields || fields.map( ( f ) => f.id );
+	const isTouchDeviceRef = useRef( false );
+	const columns = getVisibleFieldIds( view, fields );
 
 	return (
 		<tr
@@ -225,20 +168,20 @@ function TableRow< Item >( {
 			onMouseEnter={ handleMouseEnter }
 			onMouseLeave={ handleMouseLeave }
 			onTouchStart={ () => {
-				isTouchDevice.current = true;
+				isTouchDeviceRef.current = true;
 			} }
 			onClick={ () => {
 				if ( ! hasPossibleBulkAction ) {
 					return;
 				}
 				if (
-					! isTouchDevice.current &&
+					! isTouchDeviceRef.current &&
 					document.getSelection()?.type !== 'Range'
 				) {
 					onChangeSelection(
 						selection.includes( id )
 							? selection.filter( ( itemId ) => id !== itemId )
-							: [ ...selection, id ]
+							: [ id ]
 					);
 				}
 			} }
@@ -346,7 +289,7 @@ function ViewTable< Item >( {
 		setNextHeaderMenuToFocus( fallback?.node );
 	};
 
-	const columns = view.fields || fields.map( ( f ) => f.id );
+	const columns = getVisibleFieldIds( view, fields );
 	const hasData = !! data?.length;
 
 	const primaryField = fields.find(
diff --git a/packages/dataviews/src/layouts/table/style.scss b/packages/dataviews/src/dataviews-layouts/table/style.scss
similarity index 95%
rename from packages/dataviews/src/layouts/table/style.scss
rename to packages/dataviews/src/dataviews-layouts/table/style.scss
index debec8afc6374..ea2c614e4339d 100644
--- a/packages/dataviews/src/layouts/table/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/table/style.scss
@@ -7,11 +7,6 @@
 	color: $gray-700;
 	margin-bottom: auto;
 
-	a {
-		text-decoration: none;
-		color: $gray-900;
-		font-weight: 500;
-	}
 	th {
 		text-align: left;
 		color: $gray-900;
@@ -92,7 +87,7 @@
 			}
 		}
 
-		&.is-ed {
+		&.is-selected {
 			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 			color: $gray-700;
 
@@ -176,10 +171,6 @@
 	}
 }
 
-.dataviews-view-table__cell-content-wrapper:empty {
-	display: none;
-}
-
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 430px) {
 	.dataviews-view-table tr td:first-child,
diff --git a/packages/dataviews/src/field-types/datetime.tsx b/packages/dataviews/src/field-types/datetime.tsx
new file mode 100644
index 0000000000000..aa97fc86c318c
--- /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 0000000000000..eb9dada479c6b
--- /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 0000000000000..f57c8e382db81
--- /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 0000000000000..76ff699d0848c
--- /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
index 000ec110f7d0d..da2e9915d515b 100644
--- a/packages/dataviews/src/filter-and-sort-data-view.ts
+++ b/packages/dataviews/src/filter-and-sort-data-view.ts
@@ -140,21 +140,7 @@ export function filterSortAndPaginate< Item >(
 		} );
 		if ( fieldToSort ) {
 			filteredData.sort( ( a, b ) => {
-				const valueA = fieldToSort.getValue( { item: a } ) ?? '';
-				const valueB = fieldToSort.getValue( { item: b } ) ?? '';
-
-				if (
-					typeof valueA === 'number' &&
-					typeof valueB === 'number'
-				) {
-					return view.sort?.direction === 'asc'
-						? valueA - valueB
-						: valueB - valueA;
-				}
-
-				return view.sort?.direction === 'asc'
-					? valueA.localeCompare( valueB )
-					: valueB.localeCompare( valueA );
+				return fieldToSort.sort( a, b, view.sort?.direction ?? 'desc' );
 			} );
 		}
 	}
diff --git a/packages/dataviews/src/index.ts b/packages/dataviews/src/index.ts
index 8b6e53e1ff729..4ca0cf3db0bd3 100644
--- a/packages/dataviews/src/index.ts
+++ b/packages/dataviews/src/index.ts
@@ -1,5 +1,6 @@
 export { default as DataViews } from './components/dataviews';
 export { default as DataForm } from './components/dataform';
-export { VIEW_LAYOUTS } from './layouts';
+export { VIEW_LAYOUTS } from './dataviews-layouts';
 export { filterSortAndPaginate } from './filter-and-sort-data-view';
 export type * from './types';
+export { isItemValid } from './validation';
diff --git a/packages/dataviews/src/layouts/index.ts b/packages/dataviews/src/layouts/index.ts
deleted file mode 100644
index 9c96475777c00..0000000000000
--- a/packages/dataviews/src/layouts/index.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * 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 type { View } from '../types';
-
-export const VIEW_LAYOUTS = [
-	{
-		type: LAYOUT_TABLE,
-		label: __( 'Table' ),
-		component: ViewTable,
-		icon: blockTable,
-	},
-	{
-		type: LAYOUT_GRID,
-		label: __( 'Grid' ),
-		component: ViewGrid,
-		icon: category,
-	},
-	{
-		type: LAYOUT_LIST,
-		label: __( 'List' ),
-		component: ViewList,
-		icon: isRTL() ? formatListBulletsRTL : formatListBullets,
-	},
-];
-
-export function getMandatoryFields( view: View ): string[] {
-	if ( view.type === 'table' ) {
-		return [ view.layout?.primaryField ]
-			.concat(
-				view.layout?.combinedFields?.flatMap(
-					( field ) => field.children
-				) ?? []
-			)
-			.filter( ( item ): item is string => !! item );
-	}
-
-	if ( view.type === 'grid' ) {
-		return [ view.layout?.primaryField, view.layout?.mediaField ].filter(
-			( item ): item is string => !! item
-		);
-	}
-
-	if ( view.type === 'list' ) {
-		return [ view.layout?.primaryField, view.layout?.mediaField ].filter(
-			( item ): item is string => !! item
-		);
-	}
-
-	return [];
-}
diff --git a/packages/dataviews/src/normalize-fields.ts b/packages/dataviews/src/normalize-fields.ts
index a7a9a47734a96..5ef219e45a478 100644
--- a/packages/dataviews/src/normalize-fields.ts
+++ b/packages/dataviews/src/normalize-fields.ts
@@ -1,7 +1,15 @@
 /**
  * Internal dependencies
  */
-import type { Field, NormalizedField, ItemRecord } from './types';
+import getFieldTypeDefinition from './field-types';
+import type {
+	CombinedFormField,
+	Field,
+	NormalizedField,
+	NormalizedCombinedFormField,
+} from './types';
+import { getControl } from './dataform-controls';
+import DataFormCombinedEdit from './components/dataform-combined-edit';
 
 /**
  * Apply default values and normalize the fields config.
@@ -13,15 +21,80 @@ export function normalizeFields< Item >(
 	fields: Field< Item >[]
 ): NormalizedField< Item >[] {
 	return fields.map( ( field ) => {
+		const fieldTypeDefinition = getFieldTypeDefinition( field.type );
+
 		const getValue =
-			field.getValue ||
-			( ( { item }: { item: ItemRecord } ) => item[ field.id ] );
+			field.getValue || ( ( { item } ) => ( item as any )[ 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,
-			header: field.header || field.id,
+			label: field.label || field.id,
+			header: field.header || field.label || field.id,
 			getValue,
-			render: field.render || getValue,
+			render,
+			sort,
+			isValid,
+			Edit,
+			enableHiding: field.enableHiding ?? true,
+			enableSorting: field.enableSorting ?? true,
+		};
+	} );
+}
+
+/**
+ * Apply default values and normalize the fields config.
+ *
+ * @param combinedFields combined field list.
+ * @param fields         Fields config.
+ * @return Normalized fields config.
+ */
+export function normalizeCombinedFields< Item >(
+	combinedFields: CombinedFormField< Item >[],
+	fields: Field< Item >[]
+): NormalizedCombinedFormField< Item >[] {
+	return combinedFields.map( ( combinedField ) => {
+		return {
+			...combinedField,
+			Edit: DataFormCombinedEdit,
+			fields: normalizeFields(
+				combinedField.children
+					.map( ( fieldId ) =>
+						fields.find( ( { id } ) => id === fieldId )
+					)
+					.filter( ( field ): field is Field< Item > => !! field )
+			),
 		};
 	} );
 }
diff --git a/packages/dataviews/src/stories/fixtures.js b/packages/dataviews/src/stories/fixtures.js
deleted file mode 100644
index cb107e56969d1..0000000000000
--- a/packages/dataviews/src/stories/fixtures.js
+++ /dev/null
@@ -1,221 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { trash } from '@wordpress/icons';
-import {
-	Button,
-	__experimentalText as Text,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { LAYOUT_TABLE } from '../constants';
-
-export const data = [
-	{
-		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,
-	},
-	{
-		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,
-	},
-	{
-		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,
-	},
-	{
-		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,
-	},
-	{
-		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,
-	},
-	{
-		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,
-	},
-	{
-		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,
-	},
-	{
-		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,
-	},
-	{
-		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,
-	},
-	{
-		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,
-	},
-	{
-		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,
-	},
-];
-
-export const DEFAULT_VIEW = {
-	type: LAYOUT_TABLE,
-	search: '',
-	page: 1,
-	perPage: 10,
-	fields: [ 'title', 'description', 'categories' ],
-	layout: {},
-	filters: [],
-};
-
-export const actions = [
-	{
-		id: 'delete',
-		label: 'Delete item',
-		isPrimary: true,
-		icon: trash,
-		hideModalHeader: true,
-		RenderModal: ( { item, closeModal } ) => {
-			return (
-				<VStack spacing="5">
-					<Text>
-						{ `Are you sure you want to delete "${ item.title }"?` }
-					</Text>
-					<HStack justify="right">
-						<Button variant="tertiary" onClick={ closeModal }>
-							Cancel
-						</Button>
-						<Button variant="primary" onClick={ closeModal }>
-							Delete
-						</Button>
-					</HStack>
-				</VStack>
-			);
-		},
-	},
-	{
-		id: 'secondary',
-		label: 'Secondary action',
-		callback() {},
-	},
-];
-
-export const fields = [
-	{
-		header: 'Image',
-		id: 'image',
-		render: ( { item } ) => {
-			return (
-				<img src={ item.image } alt="" style={ { width: '100%' } } />
-			);
-		},
-		enableSorting: false,
-	},
-	{
-		header: 'Title',
-		id: 'title',
-		enableHiding: false,
-		enableGlobalSearch: true,
-	},
-	{
-		header: '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' },
-		],
-	},
-	{
-		header: 'Satellites',
-		id: 'satellites',
-		enableSorting: true,
-	},
-	{
-		header: 'Description',
-		id: 'description',
-		enableSorting: false,
-		enableGlobalSearch: true,
-	},
-	{
-		header: 'Categories',
-		id: 'categories',
-		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/stories/index.story.js b/packages/dataviews/src/stories/index.story.js
deleted file mode 100644
index 8a5ccd8345023..0000000000000
--- a/packages/dataviews/src/stories/index.story.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * 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_TABLE } from '../constants';
-import { filterSortAndPaginate } from '../filter-and-sort-data-view';
-
-const meta = {
-	title: 'DataViews/DataViews',
-	component: DataViews,
-};
-export default meta;
-
-export const Default = ( props ) => {
-	const [ view, setView ] = useState( DEFAULT_VIEW );
-	const { data: shownData, paginationInfo } = useMemo( () => {
-		return filterSortAndPaginate( data, view, fields );
-	}, [ view ] );
-	return (
-		<DataViews
-			{ ...props }
-			paginationInfo={ paginationInfo }
-			data={ shownData }
-			view={ view }
-			fields={ fields }
-			onChangeView={ setView }
-		/>
-	);
-};
-Default.args = {
-	actions,
-	defaultLayouts: {
-		[ LAYOUT_TABLE ]: {
-			layout: {
-				primaryField: 'title',
-				styles: {
-					image: {
-						width: 50,
-					},
-					title: {
-						maxWidth: 400,
-					},
-					type: {
-						maxWidth: 400,
-					},
-					description: {
-						maxWidth: 200,
-					},
-				},
-			},
-		},
-		[ LAYOUT_GRID ]: {
-			layout: {
-				mediaField: 'image',
-				primaryField: 'title',
-			},
-		},
-	},
-};
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 49d897d9cc4d9..26c6ecea645f4 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -1,11 +1,16 @@
 @import "./components/dataviews/style.scss";
 @import "./components/dataviews-bulk-actions/style.scss";
-@import "./components/dataviews-bulk-actions-toolbar/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 "./components/dataform-combined-edit/style.scss";
 
-@import "./layouts/grid/style.scss";
-@import "./layouts/list/style.scss";
-@import "./layouts/table/style.scss";
+@import "./dataviews-layouts/grid/style.scss";
+@import "./dataviews-layouts/list/style.scss";
+@import "./dataviews-layouts/table/style.scss";
+
+@import "./dataform-controls/style.scss";
+@import "./dataforms-layouts/panel/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
index fd15f4ebcc8e7..7f0b3a30e8587 100644
--- a/packages/dataviews/src/test/filter-and-sort-data-view.js
+++ b/packages/dataviews/src/test/filter-and-sort-data-view.js
@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { filterSortAndPaginate } from '../filter-and-sort-data-view';
-import { data, fields } from '../stories/fixtures';
+import { data, fields } from '../components/dataviews/stories/fixtures';
 
 describe( 'filters', () => {
 	it( 'should return empty if the data is empty', () => {
@@ -233,7 +233,22 @@ describe( 'filters', () => {
 } );
 
 describe( 'sorting', () => {
-	it( 'should sort by string', () => {
+	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,
 			{
@@ -253,13 +268,46 @@ describe( 'sorting', () => {
 		expect( result[ 1 ].title ).toBe( 'Neptune' );
 	} );
 
-	it( 'should sort by number', () => {
+	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' },
 			},
-			fields
+			// 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 );
@@ -267,6 +315,29 @@ describe( 'sorting', () => {
 		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', () => {
diff --git a/packages/dataviews/src/test/validation.ts b/packages/dataviews/src/test/validation.ts
new file mode 100644
index 0000000000000..6a81ba16425f8
--- /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
index 4f0bfec3d1fcd..bc44b57eaaecc 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -42,9 +42,31 @@ export type Operator =
 	| 'isAll'
 	| 'isNotAll';
 
-export type ItemRecord = Record< string, unknown >;
+export type FieldType = 'text' | 'integer' | 'datetime';
 
-export type FieldType = 'text';
+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.
@@ -63,7 +85,18 @@ export type Field< Item > = {
 	/**
 	 * The label of the field. Defaults to the id.
 	 */
-	header?: string;
+	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.
@@ -75,6 +108,21 @@ export type Field< Item > = {
 	 */
 	render?: ComponentType< { item: 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;
+
 	/**
 	 * Whether the field is sortable.
 	 */
@@ -99,26 +147,24 @@ export type Field< Item > = {
 	 * Filter config for the field.
 	 */
 	filterBy?: FilterByConfig | undefined;
-} & ( Item extends ItemRecord
-	? {
-			/**
-			 * Callback used to retrieve the value of the field from the item.
-			 * Defaults to `item[ field.id ]`.
-			 */
-			getValue?: ( args: { item: Item } ) => any;
-	  }
-	: {
-			/**
-			 * Callback used to retrieve the value of the field from the item.
-			 * Defaults to `item[ field.id ]`.
-			 */
-			getValue: ( args: { item: Item } ) => any;
-	  } );
+
+	/**
+	 * Callback used to retrieve the value of the field from the item.
+	 * Defaults to `item[ field.id ]`.
+	 */
+	getValue?: ( args: { item: Item } ) => any;
+};
 
 export type NormalizedField< Item > = Field< Item > & {
-	header: string;
+	label: string;
+	header: string | ReactElement;
 	getValue: ( args: { item: Item } ) => any;
 	render: ComponentType< { item: Item } >;
+	Edit: ComponentType< DataFormControlProps< Item > >;
+	sort: ( a: Item, b: Item, direction: SortDirection ) => number;
+	isValid: ( item: Item, context?: ValidationContext ) => boolean;
+	enableHiding: boolean;
+	enableSorting: boolean;
 };
 
 /**
@@ -128,11 +174,11 @@ export type Fields< Item > = Field< Item >[];
 
 export type Data< Item > = Item[];
 
-/**
- * The form configuration.
- */
-export type Form = {
-	visibleFields?: string[];
+export type DataFormControlProps< Item > = {
+	data: Item;
+	field: NormalizedField< Item >;
+	onChange: ( value: Record< string, any > ) => void;
+	hideLabelFromVision?: boolean;
 };
 
 /**
@@ -242,7 +288,9 @@ interface ViewBase {
 export interface CombinedField {
 	id: string;
 
-	header: string;
+	label: string;
+
+	header?: string | ReactElement;
 
 	/**
 	 * The fields to use as columns.
@@ -381,6 +429,18 @@ interface ActionBase< Item > {
 	 * Whether the action can be used as a bulk action.
 	 */
 	supportsBulk?: boolean;
+
+	/**
+	 * The context in which the action is visible.
+	 * This is only a "meta" information for now.
+	 */
+	context?: 'list' | 'single';
+}
+
+export interface RenderModalProps< Item > {
+	items: Item[];
+	closeModal?: () => void;
+	onActionPerformed?: ( items: Item[] ) => void;
 }
 
 export interface ActionModal< Item > extends ActionBase< Item > {
@@ -391,11 +451,7 @@ export interface ActionModal< Item > extends ActionBase< Item > {
 		items,
 		closeModal,
 		onActionPerformed,
-	}: {
-		items: Item[];
-		closeModal?: () => void;
-		onActionPerformed?: ( items: Item[] ) => void;
-	} ) => ReactElement;
+	}: RenderModalProps< Item > ) => ReactElement;
 
 	/**
 	 * Whether to hide the modal header.
@@ -434,6 +490,7 @@ export interface ViewBaseProps< Item > {
 	selection: string[];
 	setOpenedFilter: ( fieldId: string ) => void;
 	view: View;
+	density: number;
 }
 
 export interface ViewTableProps< Item > extends ViewBaseProps< Item > {
@@ -458,3 +515,38 @@ export interface SupportedLayouts {
 	grid?: Omit< ViewGrid, 'type' >;
 	table?: Omit< ViewTable, 'type' >;
 }
+
+export interface CombinedFormField< Item > extends CombinedField {
+	render?: ComponentType< { item: Item } >;
+}
+
+export interface DataFormCombinedEditProps< Item > {
+	field: NormalizedCombinedFormField< Item >;
+	data: Item;
+	onChange: ( value: Record< string, any > ) => void;
+	hideLabelFromVision?: boolean;
+}
+
+export type NormalizedCombinedFormField< Item > = CombinedFormField< Item > & {
+	fields: NormalizedField< Item >[];
+	Edit?: ComponentType< DataFormCombinedEditProps< Item > >;
+};
+
+/**
+ * The form configuration.
+ */
+export type Form< Item > = {
+	type?: 'regular' | 'panel';
+	fields?: string[];
+	/**
+	 * The fields to combine.
+	 */
+	combinedFields?: CombinedFormField< Item >[];
+};
+
+export interface DataFormProps< Item > {
+	data: Item;
+	fields: Field< Item >[];
+	form: Form< Item >;
+	onChange: ( value: Record< string, any > ) => void;
+}
diff --git a/packages/dataviews/src/validation.ts b/packages/dataviews/src/validation.ts
new file mode 100644
index 0000000000000..41969a7960af6
--- /dev/null
+++ b/packages/dataviews/src/validation.ts
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import { normalizeFields } from './normalize-fields';
+import type { Field, Form } from './types';
+
+export function isItemValid< Item >(
+	item: Item,
+	fields: Field< Item >[],
+	form: Form< Item >
+): 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
index 869f9fcfb9b49..78e68b5a7c98b 100644
--- a/packages/dataviews/tsconfig.json
+++ b/packages/dataviews/tsconfig.json
@@ -14,7 +14,8 @@
 		{ "path": "../i18n" },
 		{ "path": "../icons" },
 		{ "path": "../primitives" },
-		{ "path": "../private-apis" }
+		{ "path": "../private-apis" },
+		{ "path": "../warning" }
 	],
 	"include": [ "src" ]
 }
diff --git a/packages/date/CHANGELOG.md b/packages/date/CHANGELOG.md
index abdd53564ae39..01e9cdc76984c 100644
--- a/packages/date/CHANGELOG.md
+++ b/packages/date/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/date/package.json b/packages/date/package.json
index 6f3c0635fd80b..3023e0cba30e5 100644
--- a/packages/date/package.json
+++ b/packages/date/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/date",
-	"version": "5.3.0",
+	"version": "5.9.0",
 	"description": "Date module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
index 7c4e8a2f11fc5..c9d127e899fd7 100644
--- a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
+++ b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
@@ -2,6 +2,26 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/dependency-extraction-webpack-plugin/lib/index.js b/packages/dependency-extraction-webpack-plugin/lib/index.js
index 0e6f8a5fbc6cc..cf780d7370dcf 100644
--- a/packages/dependency-extraction-webpack-plugin/lib/index.js
+++ b/packages/dependency-extraction-webpack-plugin/lib/index.js
@@ -162,6 +162,14 @@ class DependencyExtractionWebpackPlugin {
 		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,
@@ -174,6 +182,60 @@ class DependencyExtractionWebpackPlugin {
 		);
 	}
 
+	/**
+	 * 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 )
+			);
+			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 {
@@ -269,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
@@ -278,12 +340,35 @@ 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 );
 
@@ -349,6 +434,9 @@ class DependencyExtractionWebpackPlugin {
 		}
 	}
 
+	static #staticDepsCurrent = new WeakSet();
+	static #staticDepsCache = new WeakMap();
+
 	/**
 	 * Can we trace a line of static dependencies from an entry to a module
 	 *
@@ -358,6 +446,20 @@ class DependencyExtractionWebpackPlugin {
 	 * @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(
@@ -371,6 +473,13 @@ class DependencyExtractionWebpackPlugin {
 		// 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;
 		}
 
@@ -389,16 +498,28 @@ class DependencyExtractionWebpackPlugin {
 
 		// 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
-		return staticDependentModules.some( ( parentStaticDependentModule ) =>
-			DependencyExtractionWebpackPlugin.hasStaticDependencyPathToRoot(
-				compilation,
-				parentStaticDependentModule
-			)
+		const result = staticDependentModules.some(
+			( parentStaticDependentModule ) =>
+				DependencyExtractionWebpackPlugin.hasStaticDependencyPathToRoot(
+					compilation,
+					parentStaticDependentModule
+				)
 		);
+
+		DependencyExtractionWebpackPlugin.#staticDepsCache.set( block, result );
+		DependencyExtractionWebpackPlugin.#staticDepsCurrent.delete( block );
+		return result;
 	}
 }
 
diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js
index ee5c2face1b9d..cc99986024476 100644
--- a/packages/dependency-extraction-webpack-plugin/lib/util.js
+++ b/packages/dependency-extraction-webpack-plugin/lib/util.js
@@ -9,6 +9,7 @@ const BUNDLED_PACKAGES = [
 	'@wordpress/interface',
 	'@wordpress/sync',
 	'@wordpress/undo-manager',
+	'@wordpress/fields',
 ];
 
 /**
@@ -89,9 +90,10 @@ function defaultRequestToExternalModule( request ) {
 		return `module ${ request }`;
 	}
 
-	if ( request === '@wordpress/interactivity-router' ) {
-		// Assumes this is usually going to be used as a dynamic import.
-		return `import ${ request }`;
+	switch ( request ) {
+		case '@wordpress/interactivity-router':
+		case '@wordpress/a11y':
+			return `import ${ request }`;
 	}
 
 	const isWordPressScript = Boolean( defaultRequestToExternal( request ) );
diff --git a/packages/dependency-extraction-webpack-plugin/package.json b/packages/dependency-extraction-webpack-plugin/package.json
index e6b87c139dfc7..2eb71b6986423 100644
--- a/packages/dependency-extraction-webpack-plugin/package.json
+++ b/packages/dependency-extraction-webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dependency-extraction-webpack-plugin",
-	"version": "6.3.0",
+	"version": "6.9.0",
 	"description": "Extract WordPress script dependencies from webpack bundles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
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 d3090daa89a47..f0d418851103b 100644
--- a/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap
+++ b/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap
@@ -55,6 +55,21 @@ exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-dynamic-depe
 ]
 `;
 
+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' => 'e1033c1bd62e8cb8d4c9', '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' => '4f59b7847b70a07b2710', 'type' => 'module');
 "
@@ -235,6 +250,20 @@ exports[`DependencyExtractionWebpackPlugin modules Webpack \`overrides\` should
 ]
 `;
 
+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' => 'a1906cfc819b623c86f8', 'type' => 'module');
 "
@@ -412,6 +441,24 @@ exports[`DependencyExtractionWebpackPlugin scripts Webpack \`cyclic-dynamic-depe
 ]
 `;
 
+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' => '455f3cab924853d41b8b');
+"
+`;
+
+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' => 'c0e8a6f22065ea096606');
 "
@@ -619,6 +666,20 @@ exports[`DependencyExtractionWebpackPlugin scripts Webpack \`overrides\` should
 ]
 `;
 
+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' => '464c785b5c938d4fde3f');
+"
+`;
+
+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' => 'd3cda564b538b44d38ef');
 "
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 0000000000000..1f0edffe27efd
--- /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 0000000000000..01d7eff466bfb
--- /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 0000000000000..bfffff3ae7831
--- /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/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 0000000000000..d98678f44cb69
--- /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 0000000000000..be01328d675d0
--- /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 0000000000000..d98678f44cb69
--- /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 0000000000000..bfffff3ae7831
--- /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/deprecated/CHANGELOG.md b/packages/deprecated/CHANGELOG.md
index 99bda5a0ebff7..0fb389ad15d7e 100644
--- a/packages/deprecated/CHANGELOG.md
+++ b/packages/deprecated/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/deprecated/package.json b/packages/deprecated/package.json
index 138157708832d..2c7d69a11ea92 100644
--- a/packages/deprecated/package.json
+++ b/packages/deprecated/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/deprecated",
-	"version": "4.3.0",
+	"version": "4.9.0",
 	"description": "Deprecation utility for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/docgen/CHANGELOG.md b/packages/docgen/CHANGELOG.md
index eb49321e39292..d01b1f9a9f62d 100644
--- a/packages/docgen/CHANGELOG.md
+++ b/packages/docgen/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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
diff --git a/packages/docgen/lib/get-type-annotation.js b/packages/docgen/lib/get-type-annotation.js
index b844c86ef7958..5e72724952f29 100644
--- a/packages/docgen/lib/get-type-annotation.js
+++ b/packages/docgen/lib/get-type-annotation.js
@@ -401,6 +401,10 @@ 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;
 	}
diff --git a/packages/docgen/package.json b/packages/docgen/package.json
index 1b146ca77e2a9..2829246f9e430 100644
--- a/packages/docgen/package.json
+++ b/packages/docgen/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/docgen",
-	"version": "2.3.0",
+	"version": "2.9.0",
 	"description": "Autogenerate public API documentation from exports and JSDoc comments.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dom-ready/CHANGELOG.md b/packages/dom-ready/CHANGELOG.md
index 1f4eabcc342b1..a14e618520237 100644
--- a/packages/dom-ready/CHANGELOG.md
+++ b/packages/dom-ready/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/dom-ready/package.json b/packages/dom-ready/package.json
index 9483e1b505934..56913124da79f 100644
--- a/packages/dom-ready/package.json
+++ b/packages/dom-ready/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dom-ready",
-	"version": "4.3.0",
+	"version": "4.9.0",
 	"description": "Execute callback after the DOM is loaded.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dom/CHANGELOG.md b/packages/dom/CHANGELOG.md
index 07693c6749b38..e5c95089da8c3 100644
--- a/packages/dom/CHANGELOG.md
+++ b/packages/dom/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/dom/README.md b/packages/dom/README.md
index 5440ff2820ccc..26740c74e8561 100644
--- a/packages/dom/README.md
+++ b/packages/dom/README.md
@@ -239,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_
diff --git a/packages/dom/package.json b/packages/dom/package.json
index b32408660b4ae..c80beed815ea9 100644
--- a/packages/dom/package.json
+++ b/packages/dom/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dom",
-	"version": "4.3.0",
+	"version": "4.9.0",
 	"description": "DOM utilities module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dom/src/dom/index.js b/packages/dom/src/dom/index.js
index f21ec1e4e85e6..4522ac1fd1b89 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/e2e-test-utils-playwright/CHANGELOG.md b/packages/e2e-test-utils-playwright/CHANGELOG.md
index b94ad492dee91..0c1833eed0849 100644
--- a/packages/e2e-test-utils-playwright/CHANGELOG.md
+++ b/packages/e2e-test-utils-playwright/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/e2e-test-utils-playwright/package.json b/packages/e2e-test-utils-playwright/package.json
index 0c65a81abe9cf..ebec29be94c89 100644
--- a/packages/e2e-test-utils-playwright/package.json
+++ b/packages/e2e-test-utils-playwright/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-test-utils-playwright",
-	"version": "1.3.0",
+	"version": "1.9.0",
 	"description": "End-To-End (E2E) test utils for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-test-utils/CHANGELOG.md b/packages/e2e-test-utils/CHANGELOG.md
index 631b79596b3f5..8a00b87a34dfd 100644
--- a/packages/e2e-test-utils/CHANGELOG.md
+++ b/packages/e2e-test-utils/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/e2e-test-utils/package.json b/packages/e2e-test-utils/package.json
index 7537a45e59fe5..a91938f54dd52 100644
--- a/packages/e2e-test-utils/package.json
+++ b/packages/e2e-test-utils/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-test-utils",
-	"version": "11.3.0",
+	"version": "11.9.0",
 	"description": "End-To-End (E2E) test utils for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-tests/CHANGELOG.md b/packages/e2e-tests/CHANGELOG.md
index 374df352694ed..9d94db55206f1 100644
--- a/packages/e2e-tests/CHANGELOG.md
+++ b/packages/e2e-tests/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
index 825119d324384..714542e115c82 100644
--- a/packages/e2e-tests/package.json
+++ b/packages/e2e-tests/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "8.3.0",
+	"version": "8.9.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-tests/plugins/block-bindings.php b/packages/e2e-tests/plugins/block-bindings.php
index b2eb9d797610d..ffbe50ab3cc90 100644
--- a/packages/e2e-tests/plugins/block-bindings.php
+++ b/packages/e2e-tests/plugins/block-bindings.php
@@ -8,56 +8,158 @@
  */
 
 /**
-* Register custom fields and custom block bindings sources.
-*/
+ * 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',
+		),
+		'url_field'   => array(
+			'label' => 'URL Field Label',
+			'value' => $testing_url,
+		),
+		'empty_field' => array(
+			'label' => 'Empty Field Label',
+			'value' => '',
+		),
+	);
+
+	// 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(
-		'core/server-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 custom fields.
+	// 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,
-			'type'         => 'string',
 			'single'       => true,
-			'default'      => 'Value of the text_custom_field',
+			'type'         => 'string',
 		)
 	);
 	register_meta(
 		'post',
 		'url_custom_field',
 		array(
+			'default'      => '#url-custom-field',
 			'show_in_rest' => true,
-			'type'         => 'string',
 			'single'       => true,
-			'default'      => '#url-custom-field',
+			'type'         => 'string',
+		)
+	);
+	// 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(
-			'type'    => 'string',
-			'single'  => true,
-			'default' => 'protected field value',
+			'default'        => 'Protected field value',
+			'object_subtype' => 'movie',
+			'show_in_rest'   => true,
+			'single'         => true,
+			'type'           => 'string',
 		)
 	);
 	register_meta(
 		'post',
 		'show_in_rest_false_field',
 		array(
-			'show_in_rest' => false,
-			'type'         => 'string',
-			'single'       => true,
-			'default'      => 'show_in_rest false field value',
+			'default'        => 'show_in_rest false field value',
+			'object_subtype' => 'movie',
+			'show_in_rest'   => false,
+			'single'         => true,
+			'type'           => 'string',
 		)
 	);
 }
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 0000000000000..c31502631307d
--- /dev/null
+++ b/packages/e2e-tests/plugins/block-bindings/index.js
@@ -0,0 +1,49 @@
+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',
+	label: '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-template-registration.php b/packages/e2e-tests/plugins/block-template-registration.php
new file mode 100644
index 0000000000000..a7c7555284965
--- /dev/null
+++ b/packages/e2e-tests/plugins/block-template-registration.php
@@ -0,0 +1,72 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Block Template Registration
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-block-template-registration
+ */
+
+add_action(
+	'init',
+	function () {
+		// Custom template used by most tests.
+		wp_register_block_template(
+			'gutenberg//plugin-template',
+			array(
+				'title'       => 'Plugin Template',
+				'description' => 'A template registered by a plugin.',
+				'content'     => '<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:group {"tagName":"main","layout":{"inherit":true}} --><main class="wp-block-group"><!-- wp:paragraph --><p>This is a plugin-registered template.</p><!-- /wp:paragraph --></main><!-- /wp:group -->',
+				'post_types'  => array( 'post' ),
+			)
+		);
+		add_action(
+			'category_template_hierarchy',
+			function () {
+				return array( 'plugin-template' );
+			}
+		);
+
+		// Custom template overridden by the theme.
+		wp_register_block_template(
+			'gutenberg//custom-template',
+			array(
+				'title'       => 'Custom Template (overridden by the theme)',
+				'description' => 'A custom template registered by a plugin and overridden by a theme.',
+				'content'     => '<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:group {"tagName":"main","layout":{"inherit":true}} --><main class="wp-block-group"><!-- wp:paragraph --><p>This is a plugin-registered template and overridden by a theme.</p><!-- /wp:paragraph --></main><!-- /wp:group -->',
+				'post_types'  => array( 'post' ),
+			)
+		);
+
+		// Custom template used to test unregistration.
+		wp_register_block_template(
+			'gutenberg//plugin-unregistered-template',
+			array(
+				'title'       => 'Plugin Unregistered Template',
+				'description' => 'A plugin-registered template that is unregistered.',
+				'content'     => '<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:group {"tagName":"main","layout":{"inherit":true}} --><main class="wp-block-group"><!-- wp:paragraph --><p>This is a plugin-registered template that is also unregistered.</p><!-- /wp:paragraph --></main><!-- /wp:group -->',
+			)
+		);
+		wp_unregister_block_template( 'gutenberg//plugin-unregistered-template' );
+
+		// Custom template used to test overriding default WP templates.
+		wp_register_block_template(
+			'gutenberg//page',
+			array(
+				'title'       => 'Plugin Page Template',
+				'description' => 'A plugin-registered page template.',
+				'content'     => '<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:group {"tagName":"main","layout":{"inherit":true}} --><main class="wp-block-group"><!-- wp:paragraph --><p>This is a plugin-registered page template.</p><!-- /wp:paragraph --></main><!-- /wp:group -->',
+			)
+		);
+
+		// Custom template used to test overriding default WP templates which can be created by the user.
+		wp_register_block_template(
+			'gutenberg//author-admin',
+			array(
+				'title'       => 'Plugin Author Template',
+				'description' => 'A plugin-registered author template.',
+				'content'     => '<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:group {"tagName":"main","layout":{"inherit":true}} --><main class="wp-block-group"><!-- wp:paragraph --><p>This is a plugin-registered author template.</p><!-- /wp:paragraph --></main><!-- /wp:group -->',
+			)
+		);
+	}
+);
diff --git a/packages/e2e-tests/plugins/delete-installed-fonts.php b/packages/e2e-tests/plugins/delete-installed-fonts.php
index 5e547f76c338a..871d19f82e635 100644
--- a/packages/e2e-tests/plugins/delete-installed-fonts.php
+++ b/packages/e2e-tests/plugins/delete-installed-fonts.php
@@ -56,7 +56,7 @@ function gutenberg_delete_installed_fonts() {
 	}
 
 	// Delete any installed fonts from global styles.
-	$global_styles_post_id = WP_Theme_JSON_Resolver::get_user_global_styles_post_id();
+	$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() ) ) ) );
 
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
index b52120debdc56..76635e37a2608 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
@@ -212,3 +212,24 @@
 		></span>
 	</div>
 </div>
+
+
+<div
+	data-testid="inheritance from other namespaces"
+	data-wp-interactive="directive-context/parent"
+	data-wp-context='{ "prop": "fromParentNs" }'
+>
+	<div
+		data-wp-interactive="directive-context/child"
+		data-wp-context='{ "prop": "fromChildNs" }'
+	>
+		<span
+			data-testid="parent"
+			data-wp-text="directive-context/parent::context.prop"
+		></span>
+		<span
+			data-testid="child"
+			data-wp-text="directive-context/child::context.prop"
+		></span>
+	</div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
index 27fd6c7d17293..47eb351d837e7 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
@@ -220,14 +220,14 @@
 <div
 	data-wp-interactive="directive-each"
 	data-wp-router-region="navigation-updated list"
-	data-wp-context='{ "list": [ "beta", "gamma", "delta" ] }'
+	data-wp-context='{ "b": 2, "c": 3, "d": 4 }'
 	data-testid="navigation-updated list"
 >
 	<button
 		data-testid="navigate"
 		data-wp-on--click="actions.navigate"
 	>Navigate</button>
-	<template data-wp-each="context.list">
+	<template data-wp-each="state.list">
 		<p data-wp-text="context.item" data-testid="item"></p>
 	</template>
 	<p data-testid="item" data-wp-each-child>beta</p>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
index e19821a2a2aff..6ceef82864d9d 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
@@ -169,14 +169,14 @@ const html = `
 <div
 	data-wp-interactive="directive-each"
 	data-wp-router-region="navigation-updated list"
-	data-wp-context='{ "list": [ "alpha", "beta", "gamma", "delta" ] }'
+	data-wp-context='{ "a": 1, "b": 2, "c": 3, "d": 4 }'
 	data-testid="navigation-updated list"
 >
 	<button
 		data-testid="navigate"
 		data-wp-on--click="actions.navigate"
 	>Navigate</button>
-	<template data-wp-each="context.list">
+	<template data-wp-each="state.list">
 		<p data-wp-text="context.item" data-testid="item"></p>
 	</template>
 	<p data-testid="item" data-wp-each-child>alpha</p>
@@ -187,6 +187,12 @@ const html = `
 `;
 
 store( 'directive-each', {
+	state: {
+		get list() {
+			const ctx = getContext();
+			return Object.keys( ctx ).sort();
+		},
+	},
 	actions: {
 		*navigate() {
 			const { actions } = yield import(
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
index c6cdf31b4909c..77f2f25c5f9a4 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
@@ -8,7 +8,7 @@ import {
 	privateApis,
 } from '@wordpress/interactivity';
 
-const { directive, deepSignal, h } = privateApis(
+const { directive, proxifyState, h } = privateApis(
 	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
 );
 
@@ -41,13 +41,13 @@ directive(
 	'test-context',
 	( { context: { Provider }, props: { children } } ) => {
 		executionProof( 'context' );
-		const value = deepSignal( {
-			[ namespace ]: {
+		const client = {
+			[ namespace ]: proxifyState( namespace, {
 				attribute: 'from context',
 				text: 'from context',
-			},
-		} );
-		return h( Provider, { value }, children );
+			} ),
+		};
+		return h( Provider, { value: { client } }, children );
 	},
 	{ priority: 8 }
 );
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 0000000000000..c635846328b9e
--- /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 0000000000000..a71ced20dc46a
--- /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 0000000000000..bdaec8d1b67a9
--- /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 0000000000000..83f016e2eac16
--- /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 0000000000000..abf76eb9beddc
--- /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 0000000000000..abc4efd8272d5
--- /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 0000000000000..bdaec8d1b67a9
--- /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 0000000000000..db2992ec4a586
--- /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/observe-typing.php b/packages/e2e-tests/plugins/observe-typing.php
new file mode 100644
index 0000000000000..a9152bc79684c
--- /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 0000000000000..fbfb6a5de757d
--- /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/plugins-api.php b/packages/e2e-tests/plugins/plugins-api.php
index fb8054924cebb..10e35f16226f2 100644
--- a/packages/e2e-tests/plugins/plugins-api.php
+++ b/packages/e2e-tests/plugins/plugins-api.php
@@ -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/preview-menu.js b/packages/e2e-tests/plugins/plugins-api/preview-menu.js
new file mode 100644
index 0000000000000..1aa53b2e8509a
--- /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/edit-post/CHANGELOG.md b/packages/edit-post/CHANGELOG.md
index 4106e21a7afa6..41a960ee4e5d2 100644
--- a/packages/edit-post/CHANGELOG.md
+++ b/packages/edit-post/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index a54d9fb9fa4f3..dd2eaa5115baf 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "8.3.0",
+	"version": "8.9.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
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
index 59694de16cb92..ffb64a8ba0703 100644
--- a/packages/edit-post/src/components/back-button/fullscreen-mode-close.js
+++ b/packages/edit-post/src/components/back-button/fullscreen-mode-close.js
@@ -19,23 +19,16 @@ 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, initialPost } ) {
-	const { isActive, isRequestingSiteIcon, postType, siteIconUrl } = useSelect(
+	const { 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 ) || {};
 			const _postType = initialPost?.type || getCurrentPostType();
 			return {
-				isActive: isFeatureActive( 'fullscreenMode' ),
 				isRequestingSiteIcon: isResolving( 'getEntityRecord', [
 					'root',
 					'__unstableBase',
@@ -50,7 +43,7 @@ function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
 
 	const disableMotion = useReducedMotion();
 
-	if ( ! isActive || ! postType ) {
+	if ( ! postType ) {
 		return null;
 	}
 
@@ -83,8 +76,7 @@ function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
 		buttonIcon = <Icon size="36px" icon={ icon } />;
 	}
 
-	const classes = clsx( {
-		'edit-post-fullscreen-mode-close': true,
+	const classes = clsx( 'edit-post-fullscreen-mode-close', {
 		'has-icon': siteIconUrl,
 	} );
 
@@ -99,6 +91,7 @@ function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
 	return (
 		<motion.div whileHover="expand">
 			<Button
+				__next40pxDefaultSize
 				className={ classes }
 				href={ buttonHref }
 				label={ buttonLabel }
diff --git a/packages/edit-post/src/components/back-button/style.scss b/packages/edit-post/src/components/back-button/style.scss
index d6455c707fb1d..aced752bfedfa 100644
--- a/packages/edit-post/src/components/back-button/style.scss
+++ b/packages/edit-post/src/components/back-button/style.scss
@@ -2,10 +2,6 @@
 // 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;
@@ -36,7 +32,7 @@
 			right: 9px;
 			bottom: 9px + $border-width; // Height of toolbar in edit-post (not edit-site) is 61px tall.
 			left: 9px;
-			border-radius: $radius-block-ui + $border-width + $border-width;
+			border-radius: $radius-small + $border-width + $border-width;
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
 		}
 
@@ -58,7 +54,7 @@
 	.edit-post-fullscreen-mode-close_site-icon {
 		width: $button-size;
 		height: $button-size;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		object-fit: cover;
 		// Compensate for the top-bar border.
 		margin-top: -($border-width);
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
index 900d822cdcc05..4f6d298952e70 100644
--- 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
@@ -5,7 +5,7 @@ exports[`FullscreenModeClose when in full screen mode should display a default s
   <div>
     <a
       aria-label="Back"
-      class="components-button edit-post-fullscreen-mode-close"
+      class="components-button edit-post-fullscreen-mode-close is-next-40px-default-size"
       href="edit.php?"
     >
       <svg
diff --git a/packages/edit-post/src/components/browser-url/index.js b/packages/edit-post/src/components/browser-url/index.js
index 5f389c4c82818..12292cb844721 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,17 +27,9 @@ export class BrowserURL extends Component {
 	}
 
 	componentDidUpdate( prevProps ) {
-		const { postId, postStatus, postType, isSavingPost, hasHistory } =
-			this.props;
+		const { postId, postStatus, hasHistory } = 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' &&
@@ -64,16 +40,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.
 	 *
@@ -101,7 +67,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 );
@@ -112,7 +78,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 d4b09fc29d7ef..01522680419fe 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/editor-initialization/listener-hooks.js b/packages/edit-post/src/components/editor-initialization/listener-hooks.js
index 786be08fdca0c..968031d59adbc 100644
--- a/packages/edit-post/src/components/editor-initialization/listener-hooks.js
+++ b/packages/edit-post/src/components/editor-initialization/listener-hooks.js
@@ -24,18 +24,18 @@ export const useUpdatePostLinkListener = () => {
 		} ),
 		[]
 	);
-	const nodeToUpdate = useRef();
+	const nodeToUpdateRef = useRef();
 
 	useEffect( () => {
-		nodeToUpdate.current =
+		nodeToUpdateRef.current =
 			document.querySelector( VIEW_AS_PREVIEW_LINK_SELECTOR ) ||
 			document.querySelector( VIEW_AS_LINK_SELECTOR );
 	}, [] );
 
 	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/init-pattern-modal/index.js b/packages/edit-post/src/components/init-pattern-modal/index.js
index a40ffc5dc5856..4288557ec712d 100644
--- a/packages/edit-post/src/components/init-pattern-modal/index.js
+++ b/packages/edit-post/src/components/init-pattern-modal/index.js
@@ -11,12 +11,11 @@ import {
 	ToggleControl,
 	TextControl,
 } from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
 
 export default function InitPatternModal() {
 	const { editPost } = useDispatch( editorStore );
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const [ syncType, setSyncType ] = useState( undefined );
 	const [ title, setTitle ] = useState( '' );
 
@@ -28,14 +27,9 @@ export default function InitPatternModal() {
 			isNewPost: isCleanNewPost(),
 		};
 	}, [] );
-
-	useEffect( () => {
-		if ( isNewPost && postType === 'wp_block' ) {
-			setIsModalOpen( true );
-		}
-		// We only want the modal to open when the page is first loaded.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
+	const [ isModalOpen, setIsModalOpen ] = useState( () =>
+		isNewPost && postType === 'wp_block' ? true : false
+	);
 
 	if ( postType !== 'wp_block' || ! isNewPost ) {
 		return null;
@@ -74,6 +68,7 @@ export default function InitPatternModal() {
 								__next40pxDefaultSize
 							/>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ _x( 'Synced', 'pattern (singular)' ) }
 								help={ __(
 									'Sync this pattern across multiple locations.'
@@ -87,6 +82,7 @@ export default function InitPatternModal() {
 							/>
 							<HStack justify="right">
 								<Button
+									__next40pxDefaultSize
 									variant="primary"
 									type="submit"
 									disabled={ ! title }
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index b6ab4629b9e21..66fa9dd5d93b8 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -24,7 +24,13 @@ import {
 } from '@wordpress/block-editor';
 import { PluginArea } from '@wordpress/plugins';
 import { __, sprintf } from '@wordpress/i18n';
-import { useCallback, useMemo } from '@wordpress/element';
+import {
+	useCallback,
+	useMemo,
+	useId,
+	useRef,
+	useState,
+} from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
@@ -36,7 +42,17 @@ 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 { SlotFillProvider } from '@wordpress/components';
+import {
+	ResizableBox,
+	SlotFillProvider,
+	Tooltip,
+	VisuallyHidden,
+} from '@wordpress/components';
+import {
+	useMediaQuery,
+	useRefEffect,
+	useViewportMatch,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -73,7 +89,6 @@ function useEditorStyles() {
 		hasThemeStyleSupport,
 		editorSettings,
 		isZoomedOutView,
-		hasMetaBoxes,
 		renderingMode,
 		postType,
 	} = useSelect( ( select ) => {
@@ -85,7 +100,6 @@ function useEditorStyles() {
 				select( editPostStore ).isFeatureActive( 'themeStyles' ),
 			editorSettings: select( editorStore ).getEditorSettings(),
 			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
-			hasMetaBoxes: select( editPostStore ).hasMetaBoxes(),
 			renderingMode: getRenderingMode(),
 			postType: _postType,
 		};
@@ -127,20 +141,17 @@ function useEditorStyles() {
 			? editorSettings.styles ?? []
 			: defaultEditorStyles;
 
-		// Add a constant padding for the typewriter effect. When typing at the
-		// bottom, there needs to be room to scroll up.
+		// Add a space for the typewriter effect. When typing in the last block,
+		// there needs to be room to scroll up.
 		if (
 			! isZoomedOutView &&
-			! hasMetaBoxes &&
 			renderingMode === 'post-only' &&
 			! DESIGN_POST_TYPES.includes( postType )
 		) {
 			return [
 				...baseStyles,
 				{
-					// Should override global styles padding, so ensure 0-1-0
-					// specificity.
-					css: ':root :where(body){padding-bottom: 40vh}',
+					css: ':root :where(.editor-styles-wrapper)::after {content: ""; display: block; height: 40vh;}',
 				},
 			];
 		}
@@ -155,6 +166,226 @@ function useEditorStyles() {
 	] );
 }
 
+/**
+ * @param {Object}  props
+ * @param {boolean} props.isLegacy True when the editor canvas is not in an iframe.
+ */
+function MetaBoxesMain( { isLegacy } ) {
+	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 resizableBoxRef = 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__resize-handle'
+		);
+		const actualize = () => {
+			const fullHeight = container.offsetHeight;
+			let nextMax = fullHeight;
+			for ( const element of noticeLists ) {
+				nextMax -= element.offsetHeight;
+			}
+			const nextMin = resizeHandle.offsetHeight;
+			setHeightConstraints( { min: nextMin, max: nextMax } );
+		};
+		const observer = new window.ResizeObserver( actualize );
+		observer.observe( container );
+		for ( const element of noticeLists ) {
+			observer.observe( element );
+		}
+		return () => observer.disconnect();
+	}, [] );
+
+	const separatorRef = useRef();
+	const separatorHelpId = useId();
+
+	const [ isUntouched, setIsUntouched ] = useState( true );
+
+	if ( ! hasAnyVisible ) {
+		return;
+	}
+
+	const className = 'edit-post-meta-boxes-main';
+	const contents = (
+		<div
+			className={ clsx(
+				// The class name 'edit-post-layout__metaboxes' is retained because some plugins use it.
+				'edit-post-layout__metaboxes',
+				! isLegacy && 'edit-post-meta-boxes-main__liner'
+			) }
+		>
+			<MetaBoxes location="normal" />
+			<MetaBoxes location="advanced" />
+		</div>
+	);
+
+	if ( isLegacy ) {
+		return contents;
+	}
+
+	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;
+	}
+
+	const getAriaValueNow = ( height ) =>
+		Math.round( ( ( height - min ) / ( max - min ) ) * 100 );
+	const usedAriaValueNow =
+		max === undefined || isAutoHeight ? 50 : getAriaValueNow( openHeight );
+
+	if ( isShort ) {
+		return (
+			<details
+				className={ className }
+				open={ isOpen }
+				onToggle={ ( { target } ) => {
+					setPreference(
+						'core/edit-post',
+						'metaBoxesMainIsOpen',
+						target.open
+					);
+				} }
+			>
+				<summary>{ __( 'Meta Boxes' ) }</summary>
+				{ contents }
+			</details>
+		);
+	}
+
+	// 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 { resizable } = resizableBoxRef.current;
+			const fromHeight = isAutoHeight
+				? resizable.offsetHeight
+				: openHeight;
+			const nextHeight = Math.min(
+				max,
+				Math.max( min, delta + fromHeight )
+			);
+			resizableBoxRef.current.updateSize( {
+				height: nextHeight,
+				// Oddly, if left unspecified a subsequent drag gesture applies a fixed
+				// width and the pane fails to shrink/grow with parent width changes from
+				// sidebars opening/closing or window resizes.
+				width: 'auto',
+			} );
+			setPreference(
+				'core/edit-post',
+				'metaBoxesMainOpenHeight',
+				nextHeight
+			);
+		}
+	};
+
+	return (
+		<ResizableBox
+			className={ className }
+			defaultSize={ { height: openHeight } }
+			ref={ resizableBoxRef }
+			enable={ {
+				top: true,
+				right: false,
+				bottom: false,
+				left: false,
+				topLeft: false,
+				topRight: false,
+				bottomRight: false,
+				bottomLeft: false,
+			} }
+			minHeight={ min }
+			maxHeight={ usedMax }
+			bounds="parent"
+			boundsByDirection
+			// 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 ) {
+					const heightNow = elementRef.offsetHeight;
+					// Sets the starting height to avoid visual jumps in height and
+					// aria-valuenow being `NaN` for the first (few) resize events.
+					resizableBoxRef.current.updateSize( { height: heightNow } );
+					// Causes `maxHeight` to update to full `max` value instead of half.
+					setIsUntouched( false );
+				}
+			} }
+			onResize={ () => {
+				const { height } = resizableBoxRef.current.state;
+				const separator = separatorRef.current;
+				separator.ariaValueNow = getAriaValueNow( height );
+			} }
+			onResizeStop={ () => {
+				const nextHeight = resizableBoxRef.current.state.height;
+				setPreference(
+					'core/edit-post',
+					'metaBoxesMainOpenHeight',
+					nextHeight
+				);
+			} }
+			handleClasses={ {
+				top: 'edit-post-meta-boxes-main__resize-handle',
+			} }
+			handleComponent={ {
+				top: (
+					<>
+						<Tooltip text={ __( 'Drag to resize' ) }>
+							{ /* Disable reason: aria-valuenow is supported by separator role. */ }
+							{ /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */ }
+							<button
+								ref={ separatorRef }
+								aria-label={ __( 'Drag to resize' ) }
+								aria-describedby={ separatorHelpId }
+								onKeyDown={ onSeparatorKeyDown }
+								// Disable reason: buttons are allowed to be separator role.
+								// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
+								role="separator"
+								aria-valuenow={ usedAriaValueNow }
+							/>
+						</Tooltip>
+						<VisuallyHidden id={ separatorHelpId }>
+							{ __(
+								'Use up and down arrow keys to resize the metabox panel.'
+							) }
+						</VisuallyHidden>
+					</>
+				),
+			} }
+		>
+			<meta ref={ effectSizeConstraints } />
+			{ contents }
+		</ResizableBox>
+	);
+}
+
 function Layout( {
 	postId: initialPostId,
 	postType: initialPostType,
@@ -167,7 +398,7 @@ function Layout( {
 	const shouldIframe = useShouldIframe();
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const {
-		currentPost,
+		currentPost: { postId: currentPostId, postType: currentPostType },
 		onNavigateToEntityRecord,
 		onNavigateToPreviousEntityRecord,
 	} = useNavigateToEntityRecord(
@@ -175,6 +406,7 @@ function Layout( {
 		initialPostType,
 		'post-only'
 	);
+	const isEditingTemplate = currentPostType === 'wp_template';
 	const {
 		mode,
 		isFullscreenActive,
@@ -184,7 +416,6 @@ function Layout( {
 		isDistractionFree,
 		showMetaBoxes,
 		hasHistory,
-		isEditingTemplate,
 		isWelcomeGuideVisible,
 		templateId,
 	} = useSelect(
@@ -197,7 +428,7 @@ function Layout( {
 
 			const supportsTemplateMode = settings.supportsTemplateMode;
 			const isViewable =
-				getPostType( currentPost.postType )?.viewable ?? false;
+				getPostType( currentPostType )?.viewable ?? false;
 			const canViewTemplate = canUser( 'read', {
 				kind: 'postType',
 				name: 'wp_template',
@@ -213,21 +444,19 @@ function Layout( {
 				showIconLabels: get( 'core', 'showIconLabels' ),
 				isDistractionFree: get( 'core', 'distractionFree' ),
 				showMetaBoxes:
+					! DESIGN_POST_TYPES.includes( currentPostType ) &&
 					select( editorStore ).getRenderingMode() === 'post-only',
-				isEditingTemplate:
-					select( editorStore ).getCurrentPostType() ===
-					'wp_template',
 				isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
 				templateId:
 					supportsTemplateMode &&
 					isViewable &&
 					canViewTemplate &&
-					currentPost.postType !== 'wp_template'
+					! isEditingTemplate
 						? getEditedPostTemplateId()
 						: null,
 			};
 		},
-		[ settings.supportsTemplateMode, currentPost.postType ]
+		[ currentPostType, isEditingTemplate, settings.supportsTemplateMode ]
 	);
 
 	// Set the right context for the command palette
@@ -327,16 +556,22 @@ function Layout( {
 			id: initialPostId,
 		};
 	}, [ initialPostType, initialPostId ] );
+
+	const backButton =
+		useViewportMatch( 'medium' ) && isFullscreenActive ? (
+			<BackButton initialPost={ initialPost } />
+		) : null;
+
 	return (
 		<SlotFillProvider>
 			<ErrorBoundary>
 				<CommandMenu />
-				<WelcomeGuide postType={ currentPost.postType } />
+				<WelcomeGuide postType={ currentPostType } />
 				<Editor
 					settings={ editorSettings }
 					initialEdits={ initialEdits }
-					postType={ currentPost.postType }
-					postId={ currentPost.postId }
+					postType={ currentPostType }
+					postId={ currentPostId }
 					templateId={ templateId }
 					className={ className }
 					styles={ styles }
@@ -348,15 +583,12 @@ function Layout( {
 					autoFocus={ ! isWelcomeGuideVisible }
 					onActionPerformed={ onActionPerformed }
 					extraSidebarPanels={
-						! isEditingTemplate && <MetaBoxes location="side" />
+						showMetaBoxes && <MetaBoxes location="side" />
 					}
 					extraContent={
 						! isDistractionFree &&
 						showMetaBoxes && (
-							<div className="edit-post-layout__metaboxes">
-								<MetaBoxes location="normal" />
-								<MetaBoxes location="advanced" />
-							</div>
+							<MetaBoxesMain isLegacy={ ! shouldIframe } />
 						)
 					}
 				>
@@ -373,7 +605,7 @@ function Layout( {
 					<InitPatternModal />
 					<PluginArea onError={ onPluginAreaError } />
 					<PostEditorMoreMenu />
-					<BackButton initialPost={ initialPost } />
+					{ backButton }
 					<EditorSnackbars />
 				</Editor>
 			</ErrorBoundary>
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index b59009e80f0fd..5d0a9a29c329c 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -1,11 +1,77 @@
-.edit-post-visual-editor:not(.is-iframed) {
-	flex: 1 0 auto;
-	height: auto;
+$resize-handle-height: $grid-unit-30;
+
+.edit-post-meta-boxes-main {
+	filter: drop-shadow(0 -1px rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha.
+	background-color: $white;
+	clear: both; // This is seemingly only needed in case the canvas is not iframe’d.
+
+	&:not(details) {
+		padding-top: $resize-handle-height;
+	}
+
+	// The component renders as a details element in short viewports.
+	&:is(details) {
+		& > summary {
+			cursor: pointer;
+			color: $gray-900;
+			background-color: $white;
+			height: $button-size-compact;
+			line-height: $button-size-compact;
+			font-size: 13px;
+			padding-left: $grid-unit-30;
+			box-shadow: 0 $border-width $gray-300;
+		}
+
+		&[open] > summary {
+			position: sticky;
+			top: 0;
+			z-index: 1;
+		}
+	}
 }
 
-.edit-post-layout__metaboxes {
-	flex-shrink: 0;
-	clear: both;
+.edit-post-meta-boxes-main__resize-handle {
+	display: flex;
+	// The position is absolute by default inline style of ResizableBox.
+	inset: 0 0 auto 0;
+	height: $resize-handle-height;
+	box-shadow: 0 $border-width $gray-300;
+
+	& > button {
+		appearance: none;
+		cursor: inherit;
+		margin: auto;
+		padding: 0;
+		border: none;
+		outline: none;
+		background-color: $gray-300;
+		width: $grid-unit-80;
+		height: $grid-unit-05;
+		border-radius: $radius-small;
+		transition: width 0.3s ease-out;
+		@include reduce-motion("transition");
+	}
+
+	&:hover > button,
+	> button:focus {
+		background-color: var(--wp-admin-theme-color);
+		width: $grid-unit-80 + $grid-unit-20;
+	}
+}
+
+.edit-post-meta-boxes-main__liner {
+	overflow: auto;
+	max-height: 100%;
+	// Keep the contents behind the resize handle or details summary.
+	isolation: isolate;
+}
+
+.has-metaboxes .editor-visual-editor {
+	flex: 1;
+
+	&.is-iframed {
+		isolation: isolate;
+	}
 }
 
 // Adjust the position of the notices
diff --git a/packages/edit-post/src/components/layout/use-padding-appender.js b/packages/edit-post/src/components/layout/use-padding-appender.js
index ff342ded90817..efd46a485058c 100644
--- a/packages/edit-post/src/components/layout/use-padding-appender.js
+++ b/packages/edit-post/src/components/layout/use-padding-appender.js
@@ -18,12 +18,12 @@ export function usePaddingAppender() {
 				const { ownerDocument } = node;
 				const { defaultView } = ownerDocument;
 
-				const paddingBottom = defaultView.parseInt(
-					defaultView.getComputedStyle( node ).paddingBottom,
+				const pseudoHeight = defaultView.parseInt(
+					defaultView.getComputedStyle( node, ':after' ).height,
 					10
 				);
 
-				if ( ! paddingBottom ) {
+				if ( ! pseudoHeight ) {
 					return;
 				}
 
@@ -38,25 +38,20 @@ export function usePaddingAppender() {
 					return;
 				}
 
-				event.preventDefault();
+				event.stopPropagation();
 
 				const blockOrder = registry
 					.select( blockEditorStore )
 					.getBlockOrder( '' );
 				const lastBlockClientId = blockOrder[ blockOrder.length - 1 ];
 
-				// Do nothing when only default block appender is present.
-				if ( ! lastBlockClientId ) {
-					return;
-				}
-
 				const lastBlock = registry
 					.select( blockEditorStore )
 					.getBlock( lastBlockClientId );
 				const { selectBlock, insertDefaultBlock } =
 					registry.dispatch( blockEditorStore );
 
-				if ( isUnmodifiedDefaultBlock( lastBlock ) ) {
+				if ( lastBlock && isUnmodifiedDefaultBlock( lastBlock ) ) {
 					selectBlock( lastBlockClientId );
 				} else {
 					insertDefaultBlock();
diff --git a/packages/edit-post/src/components/layout/use-should-iframe.js b/packages/edit-post/src/components/layout/use-should-iframe.js
index 03efae92c72f7..e36a4773c4a1f 100644
--- a/packages/edit-post/src/components/layout/use-should-iframe.js
+++ b/packages/edit-post/src/components/layout/use-should-iframe.js
@@ -4,11 +4,7 @@
 import { store as editorStore } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false;
 
@@ -17,9 +13,10 @@ export function useShouldIframe() {
 		isBlockBasedTheme,
 		hasV3BlocksOnly,
 		isEditingTemplate,
-		hasMetaBoxes,
+		isZoomOutMode,
 	} = useSelect( ( select ) => {
 		const { getEditorSettings, getCurrentPostType } = select( editorStore );
+		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { getBlockTypes } = select( blocksStore );
 		const editorSettings = getEditorSettings();
 		return {
@@ -28,13 +25,14 @@ export function useShouldIframe() {
 				return type.apiVersion >= 3;
 			} ),
 			isEditingTemplate: getCurrentPostType() === 'wp_template',
-			hasMetaBoxes: select( editPostStore ).hasMetaBoxes(),
+			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 
 	return (
-		( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) &&
-			! hasMetaBoxes ) ||
-		isEditingTemplate
+		hasV3BlocksOnly ||
+		( isGutenbergPlugin && isBlockBasedTheme ) ||
+		isEditingTemplate ||
+		isZoomOutMode
 	);
 }
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
index 94d4f28c632cd..b8125e96c7c2c 100644
--- a/packages/edit-post/src/components/preferences-modal/enable-custom-fields.js
+++ b/packages/edit-post/src/components/preferences-modal/enable-custom-fields.js
@@ -39,7 +39,7 @@ export function CustomFieldsConfirmation( { willEnable } ) {
 				) }
 			</p>
 			<Button
-				className="edit-post-preferences-modal__custom-fields-confirmation-button"
+				__next40pxDefaultSize
 				variant="secondary"
 				isBusy={ isReloading }
 				accessibleWhenDisabled
diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/enable-custom-fields.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/enable-custom-fields.js.snap
index 1ecf664fa091f..bf12d7d0d8fac 100644
--- a/packages/edit-post/src/components/preferences-modal/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;
@@ -97,7 +97,7 @@ 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"
     >
       Show & Reload Page
@@ -135,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;
@@ -231,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;
@@ -300,7 +300,7 @@ 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"
     >
       Hide & Reload Page
@@ -338,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;
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 a872e7e0c1945..f9fb99199a319 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;
@@ -141,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;
@@ -337,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;
diff --git a/packages/edit-post/src/components/welcome-guide/default.js b/packages/edit-post/src/components/welcome-guide/default.js
index c4723c65a33df..cdaf2c7608b43 100644
--- a/packages/edit-post/src/components/welcome-guide/default.js
+++ b/packages/edit-post/src/components/welcome-guide/default.js
@@ -105,16 +105,20 @@ export default function WelcomeGuideDefault() {
 								{ __( 'Learn how to use the block editor' ) }
 							</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/documentation/article/wordpress-block-editor/'
-									) }
-								>
-									{ __( "Here's a detailed guide." ) }
-								</ExternalLink>
 							</p>
 						</>
 					),
diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
index aa3473e6e55d4..daf789cb0a2ec 100644
--- a/packages/edit-post/src/index.js
+++ b/packages/edit-post/src/index.js
@@ -27,7 +27,6 @@ import { unlock } from './lock-unlock';
 
 const {
 	BackButton: __experimentalMainDashboardButton,
-	registerDefaultActions,
 	registerCoreBlockBindingsSources,
 	bootstrapBlockBindingsSourcesFromServer,
 } = unlock( editorPrivateApis );
@@ -71,9 +70,17 @@ export function initializeEditor(
 		showBlockBreadcrumbs: true,
 		showIconLabels: false,
 		showListViewByDefault: false,
+		enableChoosePatternModal: true,
 		isPublishSidebarEnabled: true,
 	} );
 
+	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.
@@ -97,7 +104,6 @@ export function initializeEditor(
 			enableFSEBlocks: settings.__unstableEnableFullSiteEditingBlocks,
 		} );
 	}
-	registerDefaultActions();
 
 	// Show a console log warning if the browser is not in Standards rendering mode.
 	const documentMode =
diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js
index d00f7472382f8..1dc0401baf21c 100644
--- a/packages/edit-post/src/store/actions.js
+++ b/packages/edit-post/src/store/actions.js
@@ -8,7 +8,7 @@ import {
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import deprecated from '@wordpress/deprecated';
-import { addFilter } from '@wordpress/hooks';
+import { addAction } from '@wordpress/hooks';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -478,21 +478,14 @@ export const initializeMetaBoxes =
 		metaBoxesInitialized = true;
 
 		// Save metaboxes on save completion, except for autosaves.
-		addFilter(
-			'editor.__unstableSavePost',
+		addAction(
+			'editor.savePost',
 			'core/edit-post/save-metaboxes',
-			( previous, options ) =>
-				previous.then( () => {
-					if ( options.isAutosave ) {
-						return;
-					}
-
-					if ( ! select.hasMetaBoxes() ) {
-						return;
-					}
-
-					return dispatch.requestMetaBoxUpdates();
-				} )
+			async ( options ) => {
+				if ( ! options.isAutosave && select.hasMetaBoxes() ) {
+					await dispatch.requestMetaBoxUpdates();
+				}
+			}
 		);
 
 		dispatch( {
diff --git a/packages/edit-post/src/store/private-selectors.js b/packages/edit-post/src/store/private-selectors.js
index c151f935d68d5..246b2754d895a 100644
--- a/packages/edit-post/src/store/private-selectors.js
+++ b/packages/edit-post/src/store/private-selectors.js
@@ -12,12 +12,13 @@ export const getEditedPostTemplateId = createRegistrySelector(
 			type: postType,
 			slug,
 		} = select( editorStore ).getCurrentPost();
-		const { getSite, getEntityRecords, canUser } = select( coreStore );
+		const { getEntityRecord, getEntityRecords, canUser } =
+			select( coreStore );
 		const siteSettings = canUser( 'read', {
 			kind: 'root',
 			name: 'site',
 		} )
-			? getSite()
+			? getEntityRecord( 'root', 'site' )
 			: undefined;
 		// First check if the current page is set as the posts page.
 		const isPostsPage = +postId === siteSettings?.page_for_posts;
@@ -50,8 +51,11 @@ export const getEditedPostTemplateId = createRegistrySelector(
 		} else {
 			slugToCheck = postType === 'page' ? 'page' : `single-${ postType }`;
 		}
-		return select( coreStore ).getDefaultTemplateId( {
-			slug: slugToCheck,
-		} );
+
+		if ( postType ) {
+			return select( coreStore ).getDefaultTemplateId( {
+				slug: slugToCheck,
+			} );
+		}
 	}
 );
diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js
index da1f9959e32e9..8d85249e8100b 100644
--- a/packages/edit-post/src/store/selectors.js
+++ b/packages/edit-post/src/store/selectors.js
@@ -379,7 +379,6 @@ export const isMetaBoxLocationVisible = createRegistrySelector(
 			isMetaBoxLocationActive( state, location ) &&
 			getMetaBoxesPerLocation( state, location )?.some( ( { id } ) => {
 				return select( editorStore ).isEditorPanelEnabled(
-					state,
 					`meta-box-${ id }`
 				);
 			} )
@@ -507,7 +506,7 @@ export const __experimentalGetInsertionPoint = createRegistrySelector(
 				version: '6.7',
 			}
 		);
-		return unlock( select( editorStore ) ).getInsertionPoint();
+		return unlock( select( editorStore ) ).getInserter();
 	}
 );
 
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index f77c8122ca2e5..7230d7b2b15e6 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -3,22 +3,6 @@
 @import "./components/meta-boxes/meta-boxes-area/style.scss";
 @import "./components/welcome-guide/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;
-	}
-}
-
 body.js.block-editor-page {
 	@include wp-admin-reset( ".block-editor" );
 }
diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md
index 10c2706a8634a..e2a728b3fc9ce 100644
--- a/packages/edit-site/CHANGELOG.md
+++ b/packages/edit-site/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
index 9e7b641aca96e..bd86d74c68680 100644
--- a/packages/edit-site/package.json
+++ b/packages/edit-site/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.3.0",
+	"version": "6.9.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
index e97cef1b2aa91..bb9e53da6a566 100644
--- a/packages/edit-site/src/components/add-new-pattern/index.js
+++ b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -173,9 +173,14 @@ export default function AddNewPattern() {
 						// When we're not handling template parts, we should
 						// add or create the proper pattern category.
 						if ( postType !== TEMPLATE_PART_POST_TYPE ) {
-							const currentCategory = categoryMap
-								.values()
-								.find( ( term ) => term.name === categoryId );
+							/*
+							 * 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 ||
diff --git a/packages/edit-site/src/components/add-new-post/index.js b/packages/edit-site/src/components/add-new-post/index.js
index 7e75a47820fce..044e3c703b994 100644
--- a/packages/edit-site/src/components/add-new-post/index.js
+++ b/packages/edit-site/src/components/add-new-post/index.js
@@ -95,9 +95,10 @@ export default function AddNewPostModal( { postType, onSave, onClose } ) {
 			size="small"
 		>
 			<form onSubmit={ createPost }>
-				<VStack spacing={ 3 }>
+				<VStack spacing={ 4 }>
 					<TextControl
 						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						label={ __( 'Title' ) }
 						onChange={ setTitle }
 						placeholder={ __( 'No title' ) }
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
index 10f3c7c54521f..69f1925c7b0e4 100644
--- 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
@@ -9,7 +9,7 @@ import {
 	FlexItem,
 	SearchControl,
 	TextHighlight,
-	privateApis as componentsPrivateApis,
+	Composite,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
@@ -20,15 +20,8 @@ import { useDebouncedInput } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
 import { mapToIHasNameAndId } from './utils';
 
-const {
-	CompositeV2: Composite,
-	CompositeItemV2: CompositeItem,
-	useCompositeStoreV2: useCompositeStore,
-} = unlock( componentsPrivateApis );
-
 const EMPTY_ARRAY = [];
 
 function SuggestionListItem( {
@@ -40,9 +33,10 @@ function SuggestionListItem( {
 	const baseCssClass =
 		'edit-site-custom-template-modal__suggestions_list__list-item';
 	return (
-		<CompositeItem
+		<Composite.Item
 			render={
 				<Button
+					__next40pxDefaultSize
 					role="option"
 					className={ baseCssClass }
 					onClick={ () =>
@@ -75,7 +69,7 @@ function SuggestionListItem( {
 					{ suggestion.link }
 				</Text>
 			) }
-		</CompositeItem>
+		</Composite.Item>
 	);
 }
 
@@ -120,7 +114,6 @@ function useSearchSuggestions( entityForSuggestions, search ) {
 }
 
 function SuggestionList( { entityForSuggestions, onSelect } ) {
-	const composite = useCompositeStore( { orientation: 'vertical' } );
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
 	const suggestions = useSearchSuggestions(
 		entityForSuggestions,
@@ -144,7 +137,7 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 			) }
 			{ !! suggestions?.length && (
 				<Composite
-					store={ composite }
+					orientation="vertical"
 					role="listbox"
 					className="edit-site-custom-template-modal__suggestions_list"
 					aria-label={ __( 'Suggestions list' ) }
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 e8f68905e34cc..bb0acbe62cd65 100644
--- a/packages/edit-site/src/components/add-new-template/index.js
+++ b/packages/edit-site/src/components/add-new-template/index.js
@@ -107,6 +107,7 @@ function TemplateListItem( {
 } ) {
 	return (
 		<Button
+			__next40pxDefaultSize
 			className={ className }
 			onClick={ onClick }
 			label={ description }
@@ -164,14 +165,10 @@ function NewTemplateModal( { onClose } ) {
 
 	const isMobile = useViewportMatch( 'medium', '<' );
 
-	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 TEMPLATE_SHORT_DESCRIPTIONS = {
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 5f9cd89b74ce2..a83754ce2e547 100644
--- a/packages/edit-site/src/components/add-new-template/style.scss
+++ b/packages/edit-site/src/components/add-new-template/style.scss
@@ -81,8 +81,8 @@
 }
 
 .edit-site-custom-template-modal__no-results {
-	border: 1px solid $gray-400;
-	border-radius: $radius-block-ui;
+	border: $border-width solid $gray-400;
+	border-radius: $radius-small;
 	padding: $grid-unit-20;
 }
 
@@ -132,7 +132,6 @@
 .edit-site-add-new-template__template-list__contents {
 	> .components-button {
 		padding: $grid-unit-40;
-		border-radius: $radius-block-ui;
 		display: flex;
 		flex-direction: column;
 		border: $border-width solid $gray-300;
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 1e544aeaadfe1..a2644ec4ad4da 100644
--- a/packages/edit-site/src/components/add-new-template/utils.js
+++ b/packages/edit-site/src/components/add-new-template/utils.js
@@ -166,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',
 					};
 				} ) || [],
@@ -272,9 +274,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;
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
index 475640439c76b..e4d70402efa8b 100644
--- 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
@@ -3,7 +3,6 @@
  */
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { usePrevious } from '@wordpress/compose';
 
@@ -15,7 +14,6 @@ import { unlock } from '../../lock-unlock';
 import useNavigateToEntityRecord from './use-navigate-to-entity-record';
 import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 
-const { useBlockEditorSettings } = unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 function useNavigateToPreviousEntityRecord() {
@@ -83,19 +81,3 @@ export function useSpecificEditorSettings() {
 
 	return defaultEditorSettings;
 }
-
-export default function useSiteEditorSettings() {
-	const defaultEditorSettings = useSpecificEditorSettings();
-	const { postType, postId } = useSelect( ( select ) => {
-		const { getEditedPostType, getEditedPostId } = unlock(
-			select( editSiteStore )
-		);
-		const usedPostType = getEditedPostType();
-		const usedPostId = getEditedPostId();
-		return {
-			postType: usedPostType,
-			postId: usedPostId,
-		};
-	}, [] );
-	return useBlockEditorSettings( defaultEditorSettings, postType, postId );
-}
diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js
index 4f93c2e1995d2..ac1083e69abd7 100644
--- a/packages/edit-site/src/components/editor-canvas-container/index.js
+++ b/packages/edit-site/src/components/editor-canvas-container/index.js
@@ -9,7 +9,7 @@ import {
 import { ESCAPE } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { backup, closeSmall, seen } from '@wordpress/icons';
+import { closeSmall } from '@wordpress/icons';
 import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
@@ -32,24 +32,15 @@ const { EditorContentSlotFill, ResizableEditor } = unlock( editorPrivateApis );
  *
  * @return {Object} Translated string for the view title and associated icon, both defaulting to ''.
  */
-function getEditorCanvasContainerTitleAndIcon( view ) {
+function getEditorCanvasContainerTitle( view ) {
 	switch ( view ) {
 		case 'style-book':
-			return {
-				title: __( 'Style Book' ),
-				icon: seen,
-			};
+			return __( 'Style Book' );
 		case 'global-styles-revisions':
 		case 'global-styles-revisions:style-book':
-			return {
-				title: __( 'Style Revisions' ),
-				icon: backup,
-			};
+			return __( 'Style Revisions' );
 		default:
-			return {
-				title: '',
-				icon: '',
-			};
+			return '';
 	}
 }
 
@@ -118,9 +109,7 @@ function EditorCanvasContainer( {
 		return null;
 	}
 
-	const { title } = getEditorCanvasContainerTitleAndIcon(
-		editorCanvasContainerView
-	);
+	const title = getEditorCanvasContainerTitle( editorCanvasContainerView );
 	const shouldShowCloseButton = onClose || closeButtonLabel;
 
 	return (
@@ -136,6 +125,7 @@ function EditorCanvasContainer( {
 					>
 						{ shouldShowCloseButton && (
 							<Button
+								size="compact"
 								className="edit-site-editor-canvas-container__close-button"
 								icon={ closeSmall }
 								label={ closeButtonLabel || __( 'Close' ) }
@@ -156,4 +146,4 @@ function useHasEditorCanvasContainer() {
 }
 
 export default EditorCanvasContainer;
-export { useHasEditorCanvasContainer, getEditorCanvasContainerTitleAndIcon };
+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
index fad566212e732..0bdbc2bbe3235 100644
--- a/packages/edit-site/src/components/editor-canvas-container/style.scss
+++ b/packages/edit-site/src/components/editor-canvas-container/style.scss
@@ -16,7 +16,7 @@
 
 .edit-site-editor-canvas-container__section {
 	background: $white; // Fallback color, overridden by JavaScript.
-	border-radius: $radius-block-ui;
+	border-radius: $radius-large;
 	bottom: 0;
 	left: 0;
 	overflow: hidden;
@@ -29,7 +29,7 @@
 .edit-site-editor-canvas-container__close-button {
 	position: absolute;
 	right: $grid-unit-10;
-	top: math.div($grid-unit-60 - $button-size, 2); // ( tab height - button size ) / 2
-	z-index: 1;
+	top: $grid-unit-10;
+	z-index: 2;
 	background: $white;
 }
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index b11a9c56c9c50..855225081236c 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -7,8 +7,8 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Button } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
+import { Button, __unstableMotion as motion } from '@wordpress/components';
+import { useInstanceId, useReducedMotion } from '@wordpress/compose';
 import {
 	EditorKeyboardShortcutsRegister,
 	privateApis as editorPrivateApis,
@@ -22,6 +22,7 @@ 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';
 
 /**
  * Internal dependencies
@@ -36,7 +37,7 @@ import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
 import GlobalStylesSidebar from '../global-styles-sidebar';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 import {
-	getEditorCanvasContainerTitleAndIcon,
+	getEditorCanvasContainerTitle,
 	useHasEditorCanvasContainer,
 } from '../editor-canvas-container';
 import SaveButton from '../save-button';
@@ -51,7 +52,32 @@ const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
+const toggleHomeIconVariants = {
+	edit: {
+		opacity: 0,
+		scale: 0.2,
+	},
+	hover: {
+		opacity: 1,
+		scale: 1,
+		clipPath: 'inset( 22% round 2px )',
+	},
+};
+
+const siteIconVariants = {
+	edit: {
+		clipPath: 'inset(0% round 0px)',
+	},
+	hover: {
+		clipPath: 'inset( 22% round 2px )',
+	},
+	tap: {
+		clipPath: 'inset(0% round 0px)',
+	},
+};
+
 export default function EditSiteEditor( { isPostsList = false } ) {
+	const disableMotion = useReducedMotion();
 	const { params } = useLocation();
 	const isLoading = useIsSiteEditorLoading();
 	const {
@@ -65,6 +91,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		showIconLabels,
 		editorCanvasView,
 		currentPostIsTrashed,
+		hasSiteIcon,
 	} = useSelect( ( select ) => {
 		const {
 			getEditorCanvasContainerView,
@@ -75,8 +102,9 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 			getEditedPostId,
 		} = unlock( select( editSiteStore ) );
 		const { get } = select( preferencesStore );
-		const { getCurrentTheme } = select( coreDataStore );
+		const { getCurrentTheme, getEntityRecord } = select( coreDataStore );
 		const _context = getEditedPostContext();
+		const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
 
 		// The currently selected entity to display.
 		// Typically template or template part in the site editor.
@@ -93,6 +121,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 			currentPostIsTrashed:
 				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
 				'trash',
+			hasSiteIcon: !! siteData?.site_icon_url,
 		};
 	}, [] );
 	useEditorTitle();
@@ -175,10 +204,12 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 	);
 
 	// Replace the title and icon displayed in the DocumentBar when there's an overlay visible.
-	const { title, icon } =
-		getEditorCanvasContainerTitleAndIcon( editorCanvasView );
+	const title = getEditorCanvasContainerTitle( editorCanvasView );
 
 	const isReady = ! isLoading;
+	const transition = {
+		duration: disableMotion ? 0 : 0.2,
+	};
 
 	return (
 		<>
@@ -206,7 +237,6 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 					customSavePanel={ _isPreviewingTheme && <SavePanel /> }
 					forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
 					title={ title }
-					icon={ icon }
 					iframeProps={ iframeProps }
 					onActionPerformed={ onActionPerformed }
 					extraSidebarPanels={
@@ -217,26 +247,53 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 						<BackButton>
 							{ ( { length } ) =>
 								length <= 1 && (
-									<Button
-										label={ __( 'Open Navigation' ) }
-										className="edit-site-layout__view-mode-toggle"
-										onClick={ () => {
-											setCanvasMode( 'view' );
-											// 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 &&
-												params?.focusMode
-											) {
-												history.push( {
-													page: 'gutenberg-posts-dashboard',
-													postType: 'post',
-												} );
-											}
-										} }
+									<motion.div
+										className="edit-site-editor__view-mode-toggle"
+										transition={ transition }
+										animate="edit"
+										initial="edit"
+										whileHover="hover"
+										whileTap="tap"
 									>
-										<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-									</Button>
+										<Button
+											__next40pxDefaultSize
+											label={ __( 'Open Navigation' ) }
+											showTooltip
+											tooltipPosition="middle right"
+											onClick={ () => {
+												setCanvasMode( 'view' );
+												// 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 &&
+													params?.focusMode
+												) {
+													history.push( {
+														page: 'gutenberg-posts-dashboard',
+														postType: 'post',
+													} );
+												}
+											} }
+										>
+											<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>
diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
index b157057062c9d..a6cc508496694 100644
--- a/packages/edit-site/src/components/editor/style.scss
+++ b/packages/edit-site/src/components/editor/style.scss
@@ -1,7 +1,7 @@
 .edit-site-editor__editor-interface {
 	opacity: 1;
 	transition: opacity 0.1s ease-out;
-	@include reduce-motion("transition");
+	@include reduce-motion( "transition" );
 
 	&.is-loading {
 		opacity: 0;
@@ -12,8 +12,70 @@
 	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;
 }
+
+.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;
+
+	.components-button {
+		color: $white;
+		height: 100%;
+		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;
+		}
+	}
+}
+
+.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);
+	}
+}
diff --git a/packages/edit-site/src/components/error-boundary/warning.js b/packages/edit-site/src/components/error-boundary/warning.js
index af51b43be3431..c4090c7e6b119 100644
--- a/packages/edit-site/src/components/error-boundary/warning.js
+++ b/packages/edit-site/src/components/error-boundary/warning.js
@@ -9,7 +9,7 @@ import { useCopyToClipboard } from '@wordpress/compose';
 function CopyButton( { text, children } ) {
 	const ref = useCopyToClipboard( text );
 	return (
-		<Button variant="secondary" ref={ ref }>
+		<Button __next40pxDefaultSize variant="secondary" ref={ ref }>
 			{ children }
 		</Button>
 	);
diff --git a/packages/edit-site/src/components/global-styles-sidebar/index.js b/packages/edit-site/src/components/global-styles-sidebar/index.js
index b314b5d7e7524..966005907cda4 100644
--- a/packages/edit-site/src/components/global-styles-sidebar/index.js
+++ b/packages/edit-site/src/components/global-styles-sidebar/index.js
@@ -6,7 +6,7 @@ import {
 	FlexBlock,
 	Flex,
 	Button,
-	__experimentalUseNavigator as useNavigator,
+	useNavigator,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { styles, seen, backup } from '@wordpress/icons';
diff --git a/packages/edit-site/src/components/global-styles-sidebar/style.scss b/packages/edit-site/src/components/global-styles-sidebar/style.scss
index b76192ddfcb5c..4ca87bf200f17 100644
--- a/packages/edit-site/src/components/global-styles-sidebar/style.scss
+++ b/packages/edit-site/src/components/global-styles-sidebar/style.scss
@@ -22,14 +22,7 @@
 	flex-direction: column;
 	min-height: 100%;
 
-	&__panel,
-	&__navigator-provider {
-		display: flex;
-		flex-direction: column;
-		flex: 1;
-	}
-
-	&__navigator-screen {
+	&__panel {
 		flex: 1;
 	}
 }
diff --git a/packages/edit-site/src/components/global-styles/background-panel.js b/packages/edit-site/src/components/global-styles/background-panel.js
index 24ab914bed8c5..e185079d8cee0 100644
--- a/packages/edit-site/src/components/global-styles/background-panel.js
+++ b/packages/edit-site/src/components/global-styles/background-panel.js
@@ -16,7 +16,6 @@ const BACKGROUND_DEFAULT_VALUES = {
 const {
 	useGlobalStyle,
 	useGlobalSetting,
-	useGlobalStyleLinks,
 	BackgroundPanel: StylesBackgroundPanel,
 } = unlock( blockEditorPrivateApis );
 
@@ -42,7 +41,6 @@ export default function BackgroundPanel() {
 	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
 		shouldDecodeEncode: false,
 	} );
-	const _links = useGlobalStyleLinks();
 	const [ settings ] = useGlobalSetting( '' );
 
 	return (
@@ -52,7 +50,6 @@ export default function BackgroundPanel() {
 			onChange={ setStyle }
 			settings={ settings }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
-			themeFileURIs={ _links?.[ 'wp:theme-file' ] }
 		/>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/font-families.js b/packages/edit-site/src/components/global-styles/font-families.js
index 811d4e66b27a0..5332478823c21 100644
--- a/packages/edit-site/src/components/global-styles/font-families.js
+++ b/packages/edit-site/src/components/global-styles/font-families.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	__experimentalText as Text,
 	__experimentalItemGroup as ItemGroup,
@@ -26,8 +26,14 @@ import { unlock } from '../../lock-unlock';
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
 function FontFamilies() {
-	const { modalTabOpen, setModalTabOpen } = useContext( FontLibraryContext );
+	const { baseCustomFonts, modalTabOpen, setModalTabOpen } =
+		useContext( FontLibraryContext );
 	const [ fontFamilies ] = useGlobalSetting( 'typography.fontFamilies' );
+	const [ baseFontFamilies ] = useGlobalSetting(
+		'typography.fontFamilies',
+		undefined,
+		'base'
+	);
 	const themeFonts = fontFamilies?.theme
 		? fontFamilies.theme
 				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
@@ -40,6 +46,11 @@ function FontFamilies() {
 		: [];
 	const hasFonts = 0 < customFonts.length || 0 < themeFonts.length;
 
+	const hasInstalledFonts =
+		hasFonts ||
+		baseFontFamilies?.theme?.length > 0 ||
+		baseCustomFonts?.length > 0;
+
 	return (
 		<>
 			{ !! modalTabOpen && (
@@ -50,15 +61,10 @@ function FontFamilies() {
 			) }
 
 			<VStack spacing={ 4 }>
-				{ themeFonts.length > 0 && (
-					<VStack>
-						<Subtitle level={ 3 }>
-							{
-								/* translators: Heading for a list of fonts provided by the theme. */
-								_x( 'Theme', 'font source' )
-							}
-						</Subtitle>
-						<ItemGroup isBordered isSeparated>
+				{ [ ...themeFonts, ...customFonts ].length > 0 && (
+					<>
+						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
+						<ItemGroup size="large" isBordered isSeparated>
 							{ themeFonts.map( ( font ) => (
 								<FontFamilyItem
 									key={ font.slug }
@@ -66,43 +72,33 @@ function FontFamilies() {
 								/>
 							) ) }
 						</ItemGroup>
-					</VStack>
-				) }
-				{ customFonts.length > 0 && (
-					<VStack>
-						<Subtitle level={ 3 }>
-							{
-								/* translators: Heading for a list of fonts installed by the user. */
-								_x( 'Custom', 'font source' )
-							}
-						</Subtitle>
-						<ItemGroup isBordered isSeparated>
-							{ customFonts.map( ( font ) => (
-								<FontFamilyItem
-									key={ font.slug }
-									font={ font }
-								/>
-							) ) }
-						</ItemGroup>
-					</VStack>
+					</>
 				) }
 				{ ! hasFonts && (
 					<VStack>
 						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
-						<Text as="p">{ __( 'No fonts installed.' ) }</Text>
+						<Text as="p">
+							{ hasInstalledFonts
+								? __( 'No fonts activated.' )
+								: __( 'No fonts installed.' ) }
+						</Text>
 					</VStack>
 				) }
 				<Button
 					className="edit-site-global-styles-font-families__manage-fonts"
 					variant="secondary"
 					__next40pxDefaultSize
-					onClick={ () =>
+					onClick={ () => {
 						setModalTabOpen(
-							hasFonts ? 'installed-fonts' : 'upload-fonts'
-						)
-					}
+							hasInstalledFonts
+								? 'installed-fonts'
+								: 'upload-fonts'
+						);
+					} }
 				>
-					{ hasFonts ? __( 'Manage fonts' ) : __( 'Add fonts' ) }
+					{ hasInstalledFonts
+						? __( 'Manage fonts' )
+						: __( 'Add fonts' ) }
 				</Button>
 			</VStack>
 		</>
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
index e02dcb2e8a0af..abfb5484e44bf 100644
--- 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
@@ -54,7 +54,6 @@ function FontLibraryProvider( { children } ) {
 
 	const [ isInstalling, setIsInstalling ] = useState( false );
 	const [ refreshKey, setRefreshKey ] = useState( 0 );
-	const [ notice, setNotice ] = useState( null );
 
 	const refreshLibrary = () => {
 		setRefreshKey( Date.now() );
@@ -139,8 +138,6 @@ function FontLibraryProvider( { children } ) {
 	}, [ modalTabOpen ] );
 
 	const handleSetLibraryFontSelected = ( font ) => {
-		setNotice( null );
-
 		// If font is null, reset the selected font
 		if ( ! font ) {
 			setLibraryFontSelected( null );
@@ -527,8 +524,6 @@ function FontLibraryProvider( { children } ) {
 				modalTabOpen,
 				setModalTabOpen,
 				refreshLibrary,
-				notice,
-				setNotice,
 				saveFontFamilies,
 				isResolvingLibrary,
 				isInstalling,
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
index 8728e5d61b22a..61f8c28c77144 100644
--- 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
@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { _n, sprintf } from '@wordpress/i18n';
+import { _n, sprintf, isRTL } from '@wordpress/i18n';
 import {
-	__experimentalUseNavigator as useNavigator,
+	useNavigator,
 	__experimentalText as Text,
 	Button,
 	Flex,
@@ -15,7 +15,7 @@ import {
  * Internal dependencies
  */
 import FontDemo from './font-demo';
-import { chevronRight } from '@wordpress/icons';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 
 function FontCard( { font, onClick, variantsText, navigatorPath } ) {
 	const variantsCount = font.fontFace?.length || 1;
@@ -28,6 +28,7 @@ function FontCard( { font, onClick, variantsText, navigatorPath } ) {
 
 	return (
 		<Button
+			__next40pxDefaultSize
 			onClick={ () => {
 				onClick();
 				if ( navigatorPath ) {
@@ -55,7 +56,7 @@ function FontCard( { font, onClick, variantsText, navigatorPath } ) {
 						</Text>
 					</FlexItem>
 					<FlexItem>
-						<Icon icon={ chevronRight } />
+						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
 					</FlexItem>
 				</Flex>
 			</Flex>
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index b6f8dc46aa564..caf339091de75 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -13,9 +13,7 @@ import {
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	Navigator,
 	__experimentalHeading as Heading,
 	Notice,
 	SelectControl,
@@ -25,9 +23,10 @@ import {
 	DropdownMenu,
 	SearchControl,
 	ProgressBar,
+	CheckboxControl,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
-import { sprintf, __, _x } from '@wordpress/i18n';
+import { sprintf, __, _x, isRTL } from '@wordpress/i18n';
 import { moreVertical, chevronLeft, chevronRight } from '@wordpress/icons';
 
 /**
@@ -62,20 +61,15 @@ function FontCollection( { slug } ) {
 	};
 
 	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,
-		notice,
-		setNotice,
-	} = useContext( FontLibraryContext );
+	const { collections, getFontCollection, installFonts, isInstalling } =
+		useContext( FontLibraryContext );
 	const selectedCollection = collections.find(
 		( collection ) => collection.slug === slug
 	);
@@ -115,8 +109,7 @@ function FontCollection( { slug } ) {
 
 	useEffect( () => {
 		setSelectedFont( null );
-		setNotice( null );
-	}, [ slug, setNotice ] );
+	}, [ slug ] );
 
 	useEffect( () => {
 		// If the selected fonts change, reset the selected fonts to install
@@ -175,6 +168,25 @@ function FontCollection( { slug } ) {
 		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 );
 
@@ -270,11 +282,11 @@ function FontCollection( { slug } ) {
 
 			{ ! isLoading && (
 				<>
-					<NavigatorProvider
+					<Navigator
 						initialPath="/"
 						className="font-library-modal__tabpanel-layout"
 					>
-						<NavigatorScreen path="/">
+						<Navigator.Screen path="/">
 							<HStack justify="space-between">
 								<VStack>
 									<Heading level={ 2 } size={ 13 }>
@@ -301,6 +313,8 @@ function FontCollection( { slug } ) {
 								</FlexItem>
 								<FlexItem>
 									<SelectControl
+										__nextHasNoMarginBottom
+										__next40pxDefaultSize
 										label={ __( 'Category' ) }
 										value={ filters.category }
 										onChange={ handleCategoryFilter }
@@ -360,14 +374,16 @@ function FontCollection( { slug } ) {
 										</li>
 									) ) }
 								</ul>
-								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }{ ' ' }
+								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 							</div>
-						</NavigatorScreen>
+						</Navigator.Screen>
 
-						<NavigatorScreen path="/fontFamily">
+						<Navigator.Screen path="/fontFamily">
 							<Flex justify="flex-start">
-								<NavigatorToParentButton
-									icon={ chevronLeft }
+								<Navigator.BackButton
+									icon={
+										isRTL() ? chevronRight : chevronLeft
+									}
 									size="small"
 									onClick={ () => {
 										setSelectedFont( null );
@@ -400,31 +416,53 @@ function FontCollection( { slug } ) {
 								{ __( '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 }>
-								<Spacer margin={ 8 } />
-								{ getSortedFontFaces( selectedFont ).map(
-									( face, i ) => (
-										<CollectionFontVariant
-											font={ selectedFont }
-											face={ face }
-											key={ `face${ i }` }
-											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
-											) }
-										/>
-									)
-								) }
+								{ /*
+								 * 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 } />
-						</NavigatorScreen>
-					</NavigatorProvider>
+						</Navigator.Screen>
+					</Navigator>
 
 					{ selectedFont && (
 						<Flex
@@ -432,6 +470,7 @@ function FontCollection( { slug } ) {
 							className="font-library-modal__footer"
 						>
 							<Button
+								__next40pxDefaultSize
 								variant="primary"
 								onClick={ handleInstall }
 								isBusy={ isInstalling }
@@ -458,7 +497,7 @@ function FontCollection( { slug } ) {
 								disabled={ page === 1 }
 								showTooltip
 								accessibleWhenDisabled
-								icon={ chevronLeft }
+								icon={ isRTL() ? chevronRight : chevronLeft }
 								tooltipPosition="top"
 							/>
 							<HStack
@@ -509,7 +548,7 @@ function FontCollection( { slug } ) {
 								onClick={ () => setPage( page + 1 ) }
 								disabled={ page === totalPages }
 								accessibleWhenDisabled
-								icon={ chevronRight }
+								icon={ isRTL() ? chevronLeft : chevronRight }
 								tooltipPosition="top"
 							/>
 						</HStack>
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
index 80edc1596f08c..27093e0ef1cbb 100644
--- 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
@@ -44,7 +44,7 @@ function FontLibraryModal( {
 	onRequestClose,
 	defaultTabId = 'installed-fonts',
 } ) {
-	const { collections, setNotice } = useContext( FontLibraryContext );
+	const { collections } = useContext( FontLibraryContext );
 	const canUserCreate = useSelect( ( select ) => {
 		return select( coreStore ).canUser( 'create', {
 			kind: 'postType',
@@ -59,11 +59,6 @@ function FontLibraryModal( {
 		tabs.push( ...tabsFromCollections( collections || [] ) );
 	}
 
-	// Reset notice when new tab is selected.
-	const onSelect = () => {
-		setNotice( null );
-	};
-
 	return (
 		<Modal
 			title={ __( 'Fonts' ) }
@@ -71,8 +66,8 @@ function FontLibraryModal( {
 			isFullScreen
 			className="font-library-modal"
 		>
-			<div className="font-library-modal__tabs">
-				<Tabs defaultTabId={ defaultTabId } onSelect={ onSelect }>
+			<Tabs defaultTabId={ defaultTabId }>
+				<div className="font-library-modal__tablist-container">
 					<Tabs.TabList>
 						{ tabs.map( ( { id, title } ) => (
 							<Tabs.Tab key={ id } tabId={ id }>
@@ -80,30 +75,30 @@ function FontLibraryModal( {
 							</Tabs.Tab>
 						) ) }
 					</Tabs.TabList>
-					{ 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>
-			</div>
+				</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>
 	);
 }
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
index f3c8d73eef307..b7666a66afe0b 100644
--- 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
@@ -6,22 +6,21 @@ import {
 	__experimentalConfirmDialog as ConfirmDialog,
 	__experimentalHStack as HStack,
 	__experimentalHeading as Heading,
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorToParentButton as NavigatorToParentButton,
-	__experimentalUseNavigator as useNavigator,
+	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 } from '@wordpress/i18n';
-import { chevronLeft } from '@wordpress/icons';
+import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
@@ -31,7 +30,12 @@ import { FontLibraryContext } from './context';
 import FontCard from './font-card';
 import LibraryFontVariant from './library-font-variant';
 import { sortFontFaces } from './utils/sort-font-faces';
-import { setUIValuesNeeded } from './utils';
+import {
+	setUIValuesNeeded,
+	loadFontFaceInBrowser,
+	unloadFontFaceInBrowser,
+	getDisplaySrcFromFontFace,
+} from './utils';
 import { unlock } from '../../../lock-unlock';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
@@ -47,11 +51,13 @@ function InstalledFonts() {
 		isInstalling,
 		saveFontFamilies,
 		getFontFacesActivated,
-		notice,
-		setNotice,
-		fontFamilies,
 	} = useContext( FontLibraryContext );
+
+	const [ fontFamilies, setFontFamilies ] = useGlobalSetting(
+		'typography.fontFamilies'
+	);
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
+	const [ notice, setNotice ] = useState( false );
 	const [ baseFontFamilies ] = useGlobalSetting(
 		'typography.fontFamilies',
 		undefined,
@@ -61,7 +67,6 @@ function InstalledFonts() {
 		const { __experimentalGetCurrentGlobalStylesId } = select( coreStore );
 		return __experimentalGetCurrentGlobalStylesId();
 	} );
-
 	const globalStyles = useEntityRecord(
 		'root',
 		'globalStyles',
@@ -112,6 +117,26 @@ function InstalledFonts() {
 		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 [];
@@ -148,6 +173,56 @@ function InstalledFonts() {
 		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 && (
@@ -158,12 +233,12 @@ function InstalledFonts() {
 
 			{ ! isResolvingLibrary && (
 				<>
-					<NavigatorProvider
+					<Navigator
 						initialPath={
 							libraryFontSelected ? '/fontFamily' : '/'
 						}
 					>
-						<NavigatorScreen path="/">
+						<Navigator.Screen path="/">
 							<VStack spacing="8">
 								{ notice && (
 									<Notice
@@ -173,6 +248,11 @@ function InstalledFonts() {
 										{ notice.message }
 									</Notice>
 								) }
+								{ ! hasFonts && (
+									<Text as="p">
+										{ __( 'No fonts installed.' ) }
+									</Text>
+								) }
 								{ baseThemeFonts.length > 0 && (
 									<VStack>
 										<h2 className="font-library-modal__fonts-title">
@@ -202,6 +282,7 @@ function InstalledFonts() {
 															font
 														) }
 														onClick={ () => {
+															setNotice( null );
 															handleSetLibraryFontSelected(
 																font
 															);
@@ -242,6 +323,7 @@ function InstalledFonts() {
 															font
 														) }
 														onClick={ () => {
+															setNotice( null );
 															handleSetLibraryFontSelected(
 																font
 															);
@@ -254,9 +336,9 @@ function InstalledFonts() {
 									</VStack>
 								) }
 							</VStack>
-						</NavigatorScreen>
+						</Navigator.Screen>
 
-						<NavigatorScreen path="/fontFamily">
+						<Navigator.Screen path="/fontFamily">
 							<ConfirmDeleteDialog
 								font={ libraryFontSelected }
 								isOpen={ isConfirmDeleteOpen }
@@ -269,11 +351,14 @@ function InstalledFonts() {
 							/>
 
 							<Flex justify="flex-start">
-								<NavigatorToParentButton
-									icon={ chevronLeft }
+								<Navigator.BackButton
+									icon={
+										isRTL() ? chevronRight : chevronLeft
+									}
 									size="small"
 									onClick={ () => {
 										handleSetLibraryFontSelected( null );
+										setNotice( null );
 									} }
 									label={ __( 'Back' ) }
 								/>
@@ -305,19 +390,43 @@ function InstalledFonts() {
 							</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 } />
-								{ getFontFacesToDisplay(
-									libraryFontSelected
-								).map( ( face, i ) => (
-									<LibraryFontVariant
-										font={ libraryFontSelected }
-										face={ face }
-										key={ `face${ i }` }
-									/>
-								) ) }
+								{ /*
+								 * 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>
-						</NavigatorScreen>
-					</NavigatorProvider>
+						</Navigator.Screen>
+					</Navigator>
 
 					<HStack
 						justify="flex-end"
@@ -326,6 +435,7 @@ function InstalledFonts() {
 						{ isInstalling && <ProgressBar /> }
 						{ shouldDisplayDeleteButton && (
 							<Button
+								__next40pxDefaultSize
 								isDestructive
 								variant="tertiary"
 								onClick={ handleUninstallClick }
@@ -334,10 +444,9 @@ function InstalledFonts() {
 							</Button>
 						) }
 						<Button
+							__next40pxDefaultSize
 							variant="primary"
-							onClick={ () => {
-								saveFontFamilies( fontFamilies );
-							} }
+							onClick={ handleUpdate }
 							disabled={ ! fontFamiliesHasChanges }
 							accessibleWhenDisabled
 						>
@@ -375,7 +484,7 @@ function ConfirmDeleteDialog( {
 			setNotice( {
 				type: 'error',
 				message:
-					__( 'There was an error uninstalling the font family. ' ) +
+					__( 'There was an error uninstalling the font family.' ) +
 					error.message,
 			} );
 		}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index 5b9b595a1e647..7d94376ac8d94 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -69,6 +69,7 @@ $footer-height: 70px;
 	color: $gray-900;
 }
 
+// TODO: See if this can be removed after https://github.com/WordPress/gutenberg/issues/38730
 .font-library-modal__tabpanel-layout .components-base-control__field {
 	margin-bottom: 0;
 }
@@ -91,9 +92,13 @@ $footer-height: 70px;
 }
 
 .font-library-modal__font-card {
-	border: 1px solid $gray-200;
+	border: $border-width solid $gray-200;
 	width: 100%;
-	height: auto;
+
+	// 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 */
 
@@ -128,23 +133,30 @@ $footer-height: 70px;
 	padding-bottom: $grid-unit-20;
 }
 
-.font-library-modal__tabs {
+.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"] {
-		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;
+		margin-bottom: -1px;
 	}
 }
 
+
 .font-library-modal__upload-area {
 	align-items: center;
 	display: flex;
 	justify-content: center;
-	height: $grid-unit-80 * 4; // 256px
+
+	// 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%;
 }
 
@@ -186,3 +198,11 @@ button.font-library-modal__upload-area {
 		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
index 5e8cfdec21517..807f2aa354c25 100644
--- 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
@@ -25,9 +25,9 @@ import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
 
 function UploadFonts() {
-	const { installFonts, notice, setNotice } =
-		useContext( FontLibraryContext );
+	const { installFonts } = useContext( FontLibraryContext );
 	const [ isUploading, setIsUploading ] = useState( false );
+	const [ notice, setNotice ] = useState( false );
 
 	const handleDropZone = ( files ) => {
 		handleFilesUpload( files );
@@ -230,6 +230,7 @@ function UploadFonts() {
 						onChange={ onFilesUpload }
 						render={ ( { openFileDialog } ) => (
 							<Button
+								__next40pxDefaultSize
 								className="font-library-modal__upload-area"
 								onClick={ openFileDialog }
 							>
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
index 8eb6bc20bd407..b99703d39c8d6 100644
--- 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
@@ -5,7 +5,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	__experimentalSpacer as Spacer,
-	__experimentalUseNavigator as useNavigator,
+	useNavigator,
 	__experimentalView as View,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -15,31 +15,27 @@ import {
 	ToggleControl,
 } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../../lock-unlock';
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-} = unlock( componentsPrivateApis );
-const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 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 { DropdownMenuV2 } = unlock( componentsPrivateApis );
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+
 function FontSize() {
 	const [ isDeleteConfirmOpen, setIsDeleteConfirmOpen ] = useState( false );
 	const [ isRenameDialogOpen, setIsRenameDialogOpen ] = useState( false );
 
 	const {
 		params: { origin, slug },
-		goBack,
 		goTo,
 	} = useNavigator();
 
@@ -47,17 +43,31 @@ function FontSize() {
 		'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 );
 
-	// Whether fluid is true or an object, set it to true, otherwise false.
-	const isFluid = !! fontSize.fluid ?? false;
+	// Navigate to the font sizes list if the font size is not available.
+	useEffect( () => {
+		if ( ! fontSize ) {
+			goTo( '/typography/font-sizes/', { isBack: true } );
+		}
+	}, [ fontSize, goTo ] );
+
+	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 isCustomFluid = typeof fontSize?.fluid === 'object';
 
 	const handleNameChange = ( value ) => {
 		updateFontSize( 'name', value );
@@ -107,9 +117,6 @@ function FontSize() {
 	};
 
 	const handleRemoveFontSize = () => {
-		// Navigate to the font sizes list.
-		goBack();
-
 		const newFontSizes = sizes.filter( ( size ) => size.slug !== slug );
 		setFontSizes( {
 			...fontSizes,
@@ -160,7 +167,7 @@ function FontSize() {
 								marginBottom={ 0 }
 								paddingX={ 4 }
 							>
-								<DropdownMenu
+								<DropdownMenuV2
 									trigger={
 										<Button
 											size="small"
@@ -169,28 +176,32 @@ function FontSize() {
 										/>
 									}
 								>
-									<DropdownMenuItem
+									<DropdownMenuV2.Item
 										onClick={ toggleRenameDialog }
 									>
-										<DropdownMenuItemLabel>
+										<DropdownMenuV2.ItemLabel>
 											{ __( 'Rename' ) }
-										</DropdownMenuItemLabel>
-									</DropdownMenuItem>
-									<DropdownMenuItem
+										</DropdownMenuV2.ItemLabel>
+									</DropdownMenuV2.Item>
+									<DropdownMenuV2.Item
 										onClick={ toggleDeleteConfirm }
 									>
-										<DropdownMenuItemLabel>
+										<DropdownMenuV2.ItemLabel>
 											{ __( 'Delete' ) }
-										</DropdownMenuItemLabel>
-									</DropdownMenuItem>
-								</DropdownMenu>
+										</DropdownMenuV2.ItemLabel>
+									</DropdownMenuV2.Item>
+								</DropdownMenuV2>
 							</Spacer>
 						</FlexItem>
 					) }
 				</HStack>
 
 				<View>
-					<Spacer paddingX={ 4 }>
+					<Spacer
+						paddingX={ 4 }
+						marginBottom={ 0 }
+						paddingBottom={ 6 }
+					>
 						<VStack spacing={ 4 }>
 							<FlexItem>
 								<FontSizePreview fontSize={ fontSize } />
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
index 450d0797139f8..e09dda1a82fe8 100644
--- 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
@@ -27,11 +27,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../../lock-unlock';
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-} = unlock( componentsPrivateApis );
+const { DropdownMenuV2 } = unlock( componentsPrivateApis );
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 import Subtitle from '../subtitle';
 import { NavigationButtonAsItem } from '../navigation-button';
@@ -85,7 +81,7 @@ function FontSizeGroup( {
 							/>
 						) }
 						{ !! handleResetFontSizes && (
-							<DropdownMenu
+							<DropdownMenuV2
 								trigger={
 									<Button
 										size="small"
@@ -96,14 +92,16 @@ function FontSizeGroup( {
 									/>
 								}
 							>
-								<DropdownMenuItem onClick={ toggleResetDialog }>
-									<DropdownMenuItemLabel>
+								<DropdownMenuV2.Item
+									onClick={ toggleResetDialog }
+								>
+									<DropdownMenuV2.ItemLabel>
 										{ origin === 'custom'
 											? __( 'Remove font size presets' )
 											: __( 'Reset font size presets' ) }
-									</DropdownMenuItemLabel>
-								</DropdownMenuItem>
-							</DropdownMenu>
+									</DropdownMenuV2.ItemLabel>
+								</DropdownMenuV2.Item>
+							</DropdownMenuV2>
 						) }
 					</FlexItem>
 				</HStack>
diff --git a/packages/edit-site/src/components/global-styles/header.js b/packages/edit-site/src/components/global-styles/header.js
index fdddc54a07ad7..1bbff8fb3d6a6 100644
--- a/packages/edit-site/src/components/global-styles/header.js
+++ b/packages/edit-site/src/components/global-styles/header.js
@@ -7,7 +7,7 @@ import {
 	__experimentalSpacer as Spacer,
 	__experimentalHeading as Heading,
 	__experimentalView as View,
-	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	Navigator,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
@@ -18,12 +18,7 @@ function ScreenHeader( { title, description, onBack } ) {
 			<View>
 				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
 					<HStack spacing={ 2 }>
-						<NavigatorToParentButton
-							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 }
 							size="small"
 							label={ __( 'Back' ) }
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 2053ba8a36fe6..62af9740e8ae1 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,
-	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	Navigator,
 	__experimentalItem as Item,
 	FlexItem,
 	__experimentalHStack as HStack,
@@ -29,13 +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 (
-		<NavigatorToParentButton 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 e85c0e9331402..4afb9d88feb3e 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -87,6 +87,7 @@ function Palette( { name } ) {
 			{ window.__experimentalEnableColorRandomizer &&
 				themeColors?.length > 0 && (
 					<Button
+						__next40pxDefaultSize
 						variant="secondary"
 						icon={ shuffle }
 						onClick={ randomizeThemeColors }
diff --git a/packages/edit-site/src/components/global-styles/preset-colors.js b/packages/edit-site/src/components/global-styles/preset-colors.js
index c24b5ea3c75e0..7977cd88a13c3 100644
--- a/packages/edit-site/src/components/global-styles/preset-colors.js
+++ b/packages/edit-site/src/components/global-styles/preset-colors.js
@@ -5,7 +5,7 @@ import { useStylesPreviewColors } from './hooks';
 
 export default function PresetColors() {
 	const { paletteColors } = useStylesPreviewColors();
-	return paletteColors.slice( 0, 5 ).map( ( { slug, color }, index ) => (
+	return paletteColors.slice( 0, 4 ).map( ( { slug, color }, index ) => (
 		<div
 			key={ `${ slug }-${ index }` }
 			style={ {
diff --git a/packages/edit-site/src/components/global-styles/root-menu.js b/packages/edit-site/src/components/global-styles/root-menu.js
index 6db4621299f1e..183686bb52d82 100644
--- a/packages/edit-site/src/components/global-styles/root-menu.js
+++ b/packages/edit-site/src/components/global-styles/root-menu.js
@@ -3,6 +3,7 @@
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import {
+	background,
 	typography,
 	color,
 	layout,
@@ -23,11 +24,17 @@ const {
 	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 );
@@ -55,6 +62,15 @@ function RootMenu() {
 						{ __( 'Colors' ) }
 					</NavigationButtonAsItem>
 				) }
+				{ hasBackgroundPanel && (
+					<NavigationButtonAsItem
+						icon={ background }
+						path="/background"
+						aria-label={ __( 'Background styles' ) }
+					>
+						{ __( 'Background' ) }
+					</NavigationButtonAsItem>
+				) }
 				{ hasShadowPanel && (
 					<NavigationButtonAsItem
 						icon={ shadowIcon }
diff --git a/packages/edit-site/src/components/global-styles/screen-background.js b/packages/edit-site/src/components/global-styles/screen-background.js
index e6d338ffcbef1..df6492ba89297 100644
--- a/packages/edit-site/src/components/global-styles/screen-background.js
+++ b/packages/edit-site/src/components/global-styles/screen-background.js
@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __experimentalText as Text } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -20,7 +21,14 @@ function ScreenBackground() {
 	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 	return (
 		<>
-			<ScreenHeader title={ __( 'Background image' ) } />
+			<ScreenHeader
+				title={ __( 'Background' ) }
+				description={
+					<Text>
+						{ __( 'Set styles for the site’s background.' ) }
+					</Text>
+				}
+			/>
 			{ hasBackgroundPanel && <BackgroundPanel /> }
 		</>
 	);
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 a5358388e89c7..b1489167f2dc7 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -25,9 +25,10 @@ import {
 	VariationsPanel,
 } from './variations/variations-panel';
 
-// Initial control values where no block style is set.
+// Initial control values.
 const BACKGROUND_BLOCK_DEFAULT_VALUES = {
 	backgroundSize: 'cover',
+	backgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.
 };
 
 function applyFallbackStyle( border ) {
@@ -84,7 +85,6 @@ const {
 	FiltersPanel: StylesFiltersPanel,
 	ImageSettingsPanel,
 	AdvancedPanel: StylesAdvancedPanel,
-	useGlobalStyleLinks,
 } = unlock( blockEditorPrivateApis );
 
 function ScreenBlock( { name, variation } ) {
@@ -104,7 +104,6 @@ function ScreenBlock( { name, variation } ) {
 	const [ rawSettings, setSettings ] = useGlobalSetting( '', name );
 	const settings = useSettingsForBlockElement( rawSettings, name );
 	const blockType = getBlockType( name );
-	const _links = useGlobalStyleLinks();
 
 	// Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
 	if (
@@ -264,6 +263,15 @@ function ScreenBlock( { name, variation } ) {
 					settings={ settings }
 				/>
 			) }
+			{ hasBackgroundPanel && (
+				<StylesBackgroundPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+					defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
+				/>
+			) }
 			{ hasTypographyPanel && (
 				<StylesTypographyPanel
 					inheritedValue={ inheritedStyle }
@@ -306,17 +314,6 @@ function ScreenBlock( { name, variation } ) {
 				/>
 			) }
 
-			{ hasBackgroundPanel && (
-				<StylesBackgroundPanel
-					inheritedValue={ inheritedStyle }
-					value={ style }
-					onChange={ setStyle }
-					settings={ settings }
-					defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
-					themeFileURIs={ _links?.[ 'wp:theme-file' ] }
-				/>
-			) }
-
 			{ canEditCSS && (
 				<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>
 					<p>
diff --git a/packages/edit-site/src/components/global-styles/screen-css.js b/packages/edit-site/src/components/global-styles/screen-css.js
index e49207aaea224..b6d8cb7fd7086 100644
--- a/packages/edit-site/src/components/global-styles/screen-css.js
+++ b/packages/edit-site/src/components/global-styles/screen-css.js
@@ -34,7 +34,9 @@ function ScreenCSS() {
 					<>
 						{ description }
 						<ExternalLink
-							href="https://developer.wordpress.org/advanced-administration/wordpress/css/"
+							href={ __(
+								'https://developer.wordpress.org/advanced-administration/wordpress/css/'
+							) }
 							className="edit-site-global-styles-screen-css-help-link"
 						>
 							{ __( 'Learn more about CSS' ) }
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 1e68309fe0186..b6fa9f18f18de 100644
--- a/packages/edit-site/src/components/global-styles/screen-layout.js
+++ b/packages/edit-site/src/components/global-styles/screen-layout.js
@@ -8,31 +8,21 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import DimensionsPanel from './dimensions-panel';
-import BackgroundPanel from './background-panel';
 import ScreenHeader from './header';
 import { unlock } from '../../lock-unlock';
 
-const {
-	useHasBackgroundPanel,
-	useHasDimensionsPanel,
-	useGlobalSetting,
-	useSettingsForBlockElement,
-} = unlock( blockEditorPrivateApis );
+const { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =
+	unlock( blockEditorPrivateApis );
 
 function ScreenLayout() {
 	const [ rawSettings ] = useGlobalSetting( '' );
 	const settings = useSettingsForBlockElement( rawSettings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
-	/*
-	 * 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 );
+
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
 			{ hasDimensionsPanel && <DimensionsPanel /> }
-			{ hasBackgroundPanel && <BackgroundPanel /> }
 		</>
 	);
 }
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
index de27e92113b55..b980d199e7be3 100644
--- a/packages/edit-site/src/components/global-styles/screen-revisions/index.js
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import {
-	__experimentalUseNavigator as useNavigator,
+	useNavigator,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Spinner,
 } from '@wordpress/components';
@@ -72,7 +72,6 @@ function ScreenRevisions() {
 	);
 
 	const onCloseRevisions = () => {
-		goTo( '/' ); // Return to global styles main panel.
 		const canvasContainerView =
 			editorCanvasContainerView === 'global-styles-revisions:style-book'
 				? 'style-book'
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
index a17e5fde5763a..5d7c3f6cbded0 100644
--- 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
@@ -162,6 +162,7 @@ function RevisionsButtons( {
 						aria-current={ isSelected }
 					>
 						<Button
+							__next40pxDefaultSize
 							className="edit-site-global-styles-screen-revisions__revision-button"
 							accessibleWhenDisabled
 							disabled={ isSelected }
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
index 46972f4b7c52f..5d0e7cb185137 100644
--- a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss
@@ -43,7 +43,7 @@
 	}
 
 	&.is-selected {
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 
 		// Only visible in Windows High Contrast mode.
 		outline: 3px solid transparent;
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 4146b32b57e3d..d5b29eca5549c 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -53,11 +53,15 @@ function ScreenRoot() {
 	}, [] );
 
 	return (
-		<Card size="small" className="edit-site-global-styles-screen-root">
+		<Card
+			size="small"
+			className="edit-site-global-styles-screen-root"
+			isRounded={ false }
+		>
 			<CardBody>
 				<VStack spacing={ 4 }>
-					<Card>
-						<CardMedia>
+					<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>
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 876baddd0ec7f..8a8150e157871 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
@@ -67,30 +67,44 @@ function ScreenTypographyElement( { element } ) {
 					>
 						<ToggleGroupControlOption
 							value="heading"
+							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>
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 6d1b69f0ddb5e..3739e3234258b 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -3,17 +3,17 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalVStack as VStack } from '@wordpress/components';
-import { store as editorStore } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import TypographyElements from './typography-elements';
-import TypographyVariations from './variations/variations-typography';
-import FontFamilies from './font-families';
 import ScreenHeader from './header';
+import TypographyVariations from './variations/variations-typography';
 import FontSizesCount from './font-sizes/font-sizes-count';
+import FontFamilies from './font-families';
 
 function ScreenTypography() {
 	const fontLibraryEnabled = useSelect(
@@ -27,15 +27,14 @@ function ScreenTypography() {
 			<ScreenHeader
 				title={ __( 'Typography' ) }
 				description={ __(
-					'Typography styles and the application of those styles on site elements.'
+					'Available fonts, typographic styles, and the application of those styles.'
 				) }
 			/>
 			<div className="edit-site-global-styles-screen">
 				<VStack spacing={ 7 }>
-					{ ! window.__experimentalDisableFontLibrary &&
-						fontLibraryEnabled && <FontFamilies /> }
+					<TypographyVariations title={ __( 'Typesets' ) } />
+					{ fontLibraryEnabled && <FontFamilies /> }
 					<TypographyElements />
-					<TypographyVariations title={ __( 'Presets' ) } />
 					<FontSizesCount />
 				</VStack>
 			</div>
diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
index ece57f92237fb..61bed62cff3d6 100644
--- a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
+++ b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
@@ -11,18 +11,15 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalSpacer as Spacer,
 	__experimentalItemGroup as ItemGroup,
-	__experimentalHeading as Heading,
 	__experimentalInputControl as InputControl,
 	__experimentalUnitControl as UnitControl,
-	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 	__experimentalGrid as Grid,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
-	__experimentalUseNavigator as useNavigator,
+	useNavigator,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Dropdown,
-	RangeControl,
 	Button,
 	Flex,
 	FlexItem,
@@ -36,7 +33,6 @@ import {
 	plus,
 	shadow as shadowIcon,
 	reset,
-	settings,
 	moreVertical,
 } from '@wordpress/icons';
 import { useState, useMemo } from '@wordpress/element';
@@ -52,15 +48,10 @@ import {
 	getShadowParts,
 	shadowStringToObject,
 	shadowObjectToString,
-	CUSTOM_VALUE_SETTINGS,
 } from './shadow-utils';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-} = unlock( componentsPrivateApis );
+const { DropdownMenuV2 } = unlock( componentsPrivateApis );
 
 const customShadowMenuItems = [
 	{
@@ -105,6 +96,10 @@ export default function ShadowsEditPanel() {
 	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 ) =>
@@ -152,7 +147,7 @@ export default function ShadowsEditPanel() {
 				<ScreenHeader title={ selectedShadow.name } />
 				<FlexItem>
 					<Spacer marginTop={ 2 } marginBottom={ 0 } paddingX={ 4 }>
-						<DropdownMenu
+						<DropdownMenuV2
 							trigger={
 								<Button
 									size="small"
@@ -165,7 +160,7 @@ export default function ShadowsEditPanel() {
 								? customShadowMenuItems
 								: presetShadowMenuItems
 							).map( ( item ) => (
-								<DropdownMenuItem
+								<DropdownMenuV2.Item
 									key={ item.action }
 									onClick={ () => onMenuClick( item.action ) }
 									disabled={
@@ -174,12 +169,12 @@ export default function ShadowsEditPanel() {
 											baseSelectedShadow.shadow
 									}
 								>
-									<DropdownMenuItemLabel>
+									<DropdownMenuV2.ItemLabel>
 										{ item.label }
-									</DropdownMenuItemLabel>
-								</DropdownMenuItem>
+									</DropdownMenuV2.ItemLabel>
+								</DropdownMenuV2.Item>
 							) ) }
-						</DropdownMenu>
+						</DropdownMenuV2>
 					</Spacer>
 				</FlexItem>
 			</HStack>
@@ -224,6 +219,7 @@ export default function ShadowsEditPanel() {
 						} }
 					>
 						<InputControl
+							__next40pxDefaultSize
 							autoComplete="off"
 							label={ __( 'Name' ) }
 							placeholder={ __( 'Shadow name' ) }
@@ -238,6 +234,7 @@ export default function ShadowsEditPanel() {
 						>
 							<FlexItem>
 								<Button
+									__next40pxDefaultSize
 									variant="tertiary"
 									onClick={ () =>
 										setIsRenameModalVisible( false )
@@ -247,7 +244,11 @@ export default function ShadowsEditPanel() {
 								</Button>
 							</FlexItem>
 							<FlexItem>
-								<Button variant="primary" type="submit">
+								<Button
+									__next40pxDefaultSize
+									variant="primary"
+									type="submit"
+								>
 									{ __( 'Save' ) }
 								</Button>
 							</FlexItem>
@@ -377,7 +378,11 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 				return (
 					<HStack align="center" justify="flex-start" spacing={ 0 }>
 						<FlexItem style={ { flexGrow: 1 } }>
-							<Button icon={ shadowIcon } { ...toggleProps }>
+							<Button
+								__next40pxDefaultSize
+								icon={ shadowIcon }
+								{ ...toggleProps }
+							>
 								{ shadowObj.inset
 									? __( 'Inner shadow' )
 									: __( 'Drop shadow' ) }
@@ -386,6 +391,7 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 						{ canRemove && (
 							<FlexItem>
 								<Button
+									__next40pxDefaultSize
 									icon={ reset }
 									{ ...removeButtonProps }
 								/>
@@ -395,13 +401,14 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 				);
 			} }
 			renderContent={ () => (
-				<DropdownContentWrapper paddingSize="none">
-					<div className="edit-site-global-styles__shadow-editor__dropdown-content">
-						<ShadowPopover
-							shadowObj={ shadowObj }
-							onChange={ onShadowChange }
-						/>
-					</div>
+				<DropdownContentWrapper
+					paddingSize="medium"
+					className="edit-site-global-styles__shadow-editor__dropdown-content"
+				>
+					<ShadowPopover
+						shadowObj={ shadowObj }
+						onChange={ onShadowChange }
+					/>
 				</DropdownContentWrapper>
 			) }
 		/>
@@ -421,84 +428,65 @@ function ShadowPopover( { shadowObj, onChange } ) {
 	};
 
 	return (
-		<div className="edit-site-global-styles__shadow-editor-panel">
-			<VStack spacing={ 2 }>
-				<Heading level={ 5 }>{ __( 'Shadow' ) }</Heading>
-				<div className="edit-site-global-styles__shadow-editor-color-palette">
-					<ColorPalette
-						clearable={ false }
-						enableAlpha={ enableAlpha }
-						__experimentalIsRenderedInSidebar={
-							__experimentalIsRenderedInSidebar
-						}
-						value={ shadowObj.color }
-						onChange={ ( value ) =>
-							onShadowChange( 'color', value )
-						}
-					/>
-				</div>
-				<ToggleGroupControl
-					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 }
-						hasNegativeRange
-						onChange={ ( value ) => onShadowChange( 'x', value ) }
-					/>
-					<ShadowInputControl
-						label={ __( 'Y Position' ) }
-						value={ shadowObj.y }
-						hasNegativeRange
-						onChange={ ( value ) => onShadowChange( 'y', value ) }
-					/>
-					<ShadowInputControl
-						label={ __( 'Blur' ) }
-						value={ shadowObj.blur }
-						onChange={ ( value ) =>
-							onShadowChange( 'blur', value )
-						}
-					/>
-					<ShadowInputControl
-						label={ __( 'Spread' ) }
-						value={ shadowObj.spread }
-						hasNegativeRange
-						onChange={ ( value ) =>
-							onShadowChange( 'spread', value )
-						}
-					/>
-				</Grid>
-			</VStack>
-		</div>
+		<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, hasNegativeRange } ) {
-	const [ isCustomInput, setIsCustomInput ] = useState( false );
-	const [ parsedQuantity, parsedUnit ] =
-		parseQuantityAndUnitFromRawValue( value );
-
-	const sliderOnChange = ( next ) => {
-		onChange(
-			next !== undefined ? [ next, parsedUnit || 'px' ].join( '' ) : '0px'
-		);
-	};
+function ShadowInputControl( { label, value, onChange } ) {
 	const onValueChange = ( next ) => {
 		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
 		const nextValue = isNumeric ? next : '0px';
@@ -506,50 +494,11 @@ function ShadowInputControl( { label, value, onChange, hasNegativeRange } ) {
 	};
 
 	return (
-		<VStack justify="flex-start">
-			<HStack justify="space-between">
-				<Subtitle>{ label }</Subtitle>
-				<Button
-					label={ __( 'Use custom size' ) }
-					icon={ settings }
-					onClick={ () => {
-						setIsCustomInput( ! isCustomInput );
-					} }
-					isPressed={ isCustomInput }
-					size="small"
-				/>
-			</HStack>
-			{ isCustomInput ? (
-				<UnitControl
-					label={ label }
-					hideLabelFromVision
-					__next40pxDefaultSize
-					value={ value }
-					onChange={ onValueChange }
-				/>
-			) : (
-				<RangeControl
-					value={ parsedQuantity ?? 0 }
-					onChange={ sliderOnChange }
-					withInputField={ false }
-					__next40pxDefaultSize
-					__nextHasNoMarginBottom
-					min={
-						hasNegativeRange
-							? -(
-									CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]
-										?.max ?? 10
-							  )
-							: 0
-					}
-					max={
-						CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10
-					}
-					step={
-						CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.step ?? 0.1
-					}
-				/>
-			) }
-		</VStack>
+		<UnitControl
+			label={ label }
+			__next40pxDefaultSize
+			value={ value }
+			onChange={ onValueChange }
+		/>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/size-control/index.js b/packages/edit-site/src/components/global-styles/size-control/index.js
index a7e7bd6127a5f..06ea0bb5617e3 100644
--- a/packages/edit-site/src/components/global-styles/size-control/index.js
+++ b/packages/edit-site/src/components/global-styles/size-control/index.js
@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -20,9 +19,13 @@ import {
 
 const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
 
-function SizeControl( props ) {
+function SizeControl( {
+	// Do not allow manipulation of margin bottom
+	__nextHasNoMarginBottom,
+	...props
+} ) {
 	const { baseControlProps } = useBaseControlProps( props );
-	const { value, onChange, fallbackValue, disabled } = props;
+	const { value, onChange, fallbackValue, disabled, label } = props;
 
 	const units = useCustomUnits( {
 		availableUnits: DEFAULT_UNITS,
@@ -45,13 +48,13 @@ function SizeControl( props ) {
 	};
 
 	return (
-		<BaseControl { ...baseControlProps }>
+		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
 			<Flex>
 				<FlexItem isBlock>
 					<UnitControl
 						__next40pxDefaultSize
 						__nextHasNoMarginBottom
-						label={ __( 'Custom' ) }
+						label={ label }
 						hideLabelFromVision
 						value={ value }
 						onChange={ handleUnitControlChange }
@@ -65,7 +68,7 @@ function SizeControl( props ) {
 						<RangeControl
 							__next40pxDefaultSize
 							__nextHasNoMarginBottom
-							label={ __( 'Custom Size' ) }
+							label={ label }
 							hideLabelFromVision
 							value={ valueQuantity }
 							initialPosition={ fallbackValue }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 48a12081e9817..5574fe52d81f5 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -19,7 +19,7 @@
 	min-height: 100px;
 	margin-bottom: $grid-unit-20;
 	background: $gray-100;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	overflow: hidden;
 }
 
@@ -45,7 +45,7 @@
 	display: flex !important;
 	align-items: center;
 	justify-content: center;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-x-small;
 }
 
 .edit-site-global-styles-screen-typography__font-variants-count {
@@ -113,14 +113,14 @@
 	position: relative;
 	width: 100%;
 	border: $gray-200 $border-width solid;
-	border-radius: $radius-block-ui;
+	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-block-ui;
+	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;
@@ -128,23 +128,20 @@
 
 	.edit-site-global-styles__shadow-preview-block {
 		border: $gray-200 $border-width solid;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		background-color: $white;
 		width: 60%;
 		height: 60px;
 	}
 }
 
-.edit-site-global-styles__shadow-editor-panel {
+.edit-site-global-styles__shadow-editor__dropdown-content {
 	width: 280px;
-	padding: $grid-unit-20;
+}
+
+.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;
-
-	& .edit-site-global-styles__shadow-editor-color-palette {
-		// color palette adds empty .components-circular-option-picker
-		margin-bottom: -1 * $grid-unit-05;
-	}
 }
 
 .edit-site-global-styles__shadow-editor__dropdown {
@@ -224,3 +221,11 @@
 	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 {
+		border-radius: $radius-small;
+	}
+}
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 0000000000000..e99e6a037500a
--- /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/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 40d20bc1ec86f..fbc3e461e6abb 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -2,9 +2,8 @@
  * WordPress dependencies
  */
 import {
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalUseNavigator as useNavigator,
+	Navigator,
+	useNavigator,
 	createSlotFill,
 	DropdownMenu,
 	MenuGroup,
@@ -37,6 +36,7 @@ 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 ScreenBackground from './screen-background';
 import { ScreenShadows, ScreenShadowsEdit } from './screen-shadows';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
@@ -123,7 +123,7 @@ function GlobalStylesActionMenu() {
 
 function GlobalStylesNavigationScreen( { className, ...props } ) {
 	return (
-		<NavigatorScreen
+		<Navigator.Screen
 			className={ [
 				'edit-site-global-styles-sidebar__navigator-screen',
 				className,
@@ -270,19 +270,6 @@ function GlobalStylesEditorCanvasContainerLink() {
 					goTo( '/' );
 				}
 				break;
-			default:
-				/*
-				 * Example: the user has navigated to "Browse styles" or elsewhere
-				 * and changes the editorCanvasContainerView, e.g., closes the style book.
-				 * The panel should not be affected.
-				 * Exclude revisions panel from this behavior,
-				 * as it should close when the editorCanvasContainerView doesn't correspond.
-				 */
-				if ( path !== '/' && ! isRevisionsOpen ) {
-					return;
-				}
-				goTo( '/' );
-				break;
 		}
 	}, [ editorCanvasContainerView, isRevisionsOpen, goTo ] );
 }
@@ -295,7 +282,7 @@ function GlobalStylesUI() {
 		[]
 	);
 	return (
-		<NavigatorProvider
+		<Navigator
 			className="edit-site-global-styles-sidebar__navigator-provider"
 			initialPath="/"
 		>
@@ -367,6 +354,10 @@ function GlobalStylesUI() {
 				<ScreenRevisions />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path="/background">
+				<ScreenBackground />
+			</GlobalStylesNavigationScreen>
+
 			{ blocks.map( ( block ) => (
 				<GlobalStylesNavigationScreen
 					key={ 'menu-block-' + block.name }
@@ -393,7 +384,7 @@ function GlobalStylesUI() {
 			<GlobalStylesActionMenu />
 			<GlobalStylesBlockLink />
 			<GlobalStylesEditorCanvasContainerLink />
-		</NavigatorProvider>
+		</Navigator>
 	);
 }
 export { GlobalStylesMenuSlot };
diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
index 6096b381fb218..66a25854a06fe 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -52,7 +52,19 @@ function getFontFamilyFromSetting( fontFamilies, setting ) {
 }
 
 export function getFontFamilies( themeJson ) {
-	const fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme.
+	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 bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily;
 	const bodyFontFamily = getFontFamilyFromSetting(
 		fontFamilies,
diff --git a/packages/edit-site/src/components/global-styles/variations/style.scss b/packages/edit-site/src/components/global-styles/variations/style.scss
index 8d9b4238efa33..5f57c72f180b1 100644
--- a/packages/edit-site/src/components/global-styles/variations/style.scss
+++ b/packages/edit-site/src/components/global-styles/variations/style.scss
@@ -1,11 +1,10 @@
 .edit-site-global-styles-variations_item {
 	box-sizing: border-box;
 	// To round the outline in Windows 10 high contrast mode.
-	border-radius: $radius-block-ui;
 	cursor: pointer;
 
 	.edit-site-global-styles-variations_item-preview {
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		outline: $border-width solid rgba($black, 0.1);
 		outline-offset: -$border-width;
 		overflow: hidden;
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index a609f616471db..c54b7efa382c6 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -81,7 +81,6 @@ export default function Layout( { route } ) {
 	} );
 	const disableMotion = useReducedMotion();
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
-	const [ fullResizer ] = useResizeObserver();
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
@@ -113,7 +112,6 @@ export default function Layout( { route } ) {
 			<CommandMenu />
 			<KeyboardShortcutsRegister />
 			<KeyboardShortcutsGlobal />
-			{ fullResizer }
 			<div
 				{ ...navigateRegionsProps }
 				ref={ navigateRegionsProps.ref }
@@ -201,6 +199,17 @@ export default function Layout( { route } ) {
 							</div>
 						) }
 
+					{ ! isMobileViewport && areas.edit && (
+						<div
+							className="edit-site-layout__area"
+							style={ {
+								maxWidth: widths?.edit,
+							} }
+						>
+							{ areas.edit }
+						</div>
+					) }
+
 					{ ! isMobileViewport && areas.preview && (
 						<div className="edit-site-layout__canvas-container">
 							{ canvasResizer }
diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
index b89c1a5f25693..3fd0cc560d943 100644
--- a/packages/edit-site/src/components/layout/router.js
+++ b/packages/edit-site/src/components/layout/router.js
@@ -26,6 +26,7 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 	TEMPLATE_POST_TYPE,
 } from '../../utils/constants';
+import { PostEdit } from '../post-edit';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -74,13 +75,15 @@ function useRedirectOldPaths() {
 
 export default function useLayoutAreas() {
 	const { params } = useLocation();
-	const { postType, postId, path, layout, isCustom, canvas } = params;
+	const { postType, postId, path, layout, isCustom, canvas, quickEdit } =
+		params;
 	const hasEditCanvasMode = canvas === 'edit';
 	useRedirectOldPaths();
 
 	// Page list
 	if ( postType === 'page' ) {
 		const isListLayout = layout === 'list' || ! layout;
+		const showQuickEdit = quickEdit && ! isListLayout;
 		return {
 			key: 'pages',
 			areas: {
@@ -92,15 +95,20 @@ export default function useLayoutAreas() {
 					/>
 				),
 				content: <PostList postType={ postType } />,
-				preview: ( isListLayout || hasEditCanvasMode ) && <Editor />,
+				preview: ! showQuickEdit &&
+					( isListLayout || hasEditCanvasMode ) && <Editor />,
 				mobile: hasEditCanvasMode ? (
 					<Editor />
 				) : (
 					<PostList postType={ postType } />
 				),
+				edit: showQuickEdit && (
+					<PostEdit postType={ postType } postId={ postId } />
+				),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
+				edit: showQuickEdit ? 380 : undefined,
 			},
 		};
 	}
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 09898a530e445..27a3f7b99bf7e 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -114,13 +114,17 @@
 		width: calc(100% - #{$canvas-padding});
 
 		.edit-site-resizable-frame__inner-content {
-			box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
-			transition: border-radius 0.4s;
+			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-block-ui * 4;
+				border-radius: $radius-large;
+			}
+
+			&:hover {
+				box-shadow: $elevation-large;
 			}
 		}
 	}
@@ -148,6 +152,14 @@
 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 {
@@ -192,7 +204,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 		right: 9px;
 		bottom: 9px;
 		left: 9px;
-		border-radius: $radius-block-ui + $border-width + $border-width;
+		border-radius: $radius-medium;
 		box-shadow: none;
 	}
 
@@ -238,6 +250,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	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;
@@ -251,25 +264,3 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	padding-left: 16px;
 	padding-right: 16px;
 }
-
-.edit-site-layout.is-full-canvas {
-	.edit-site-layout__view-mode-toggle.components-button {
-		&:focus-visible,
-		&:focus {
-
-			box-shadow: none;
-			outline: none;
-			outline-offset: 0;
-
-			.edit-site-site-icon svg {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #3858e9);
-				outline: 3px solid #0000;
-				height: 40px;
-				width: 40px;
-				padding: 2px;
-				border-radius: 2px;
-			}
-
-		}
-	}
-}
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 0000000000000..88de0c1fa39b0
--- /dev/null
+++ b/packages/edit-site/src/components/page-patterns/fields.js
@@ -0,0 +1,252 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	Button,
+	Tooltip,
+	Flex,
+} 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, lockSmall } from '@wordpress/icons';
+import { parse } from '@wordpress/blocks';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import { Async } from '../async';
+import {
+	PATTERN_TYPES,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_SYNC_TYPES,
+	OPERATOR_IS,
+} from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+import { useLink } from '../routes/link';
+import { useAddedBy } from '../page-templates/hooks';
+import { defaultGetTitle } from './search-items';
+
+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={ item.title }
+			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( {
+		postType: item.type,
+		postId: 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 && (
+					<Async>
+						<BlockPreview
+							blocks={ blocks }
+							viewportWidth={ item.viewportWidth }
+						/>
+					</Async>
+				) }
+			</PreviewWrapper>
+			{ !! description && (
+				<div hidden id={ descriptionId }>
+					{ description }
+				</div>
+			) }
+		</div>
+	);
+}
+
+export const previewField = {
+	label: __( 'Preview' ),
+	id: 'preview',
+	render: PreviewField,
+	enableSorting: false,
+};
+
+function TitleField( { item } ) {
+	const isUserPattern = item.type === PATTERN_TYPES.user;
+	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
+	const { onClick } = useLink( {
+		postType: item.type,
+		postId: isUserPattern || isTemplatePart ? item.id : item.name,
+		canvas: 'edit',
+	} );
+	const title = decodeEntities( defaultGetTitle( item ) );
+	return (
+		<HStack alignment="center" justify="flex-start" spacing={ 2 }>
+			<Flex
+				as="div"
+				gap={ 0 }
+				justify="flex-start"
+				className="edit-site-patterns__pattern-title"
+			>
+				{ item.type === PATTERN_TYPES.theme ? (
+					title
+				) : (
+					<Button
+						__next40pxDefaultSize
+						variant="link"
+						onClick={ onClick }
+						// Required for the grid's roving tab index system.
+						// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
+						tabIndex="-1"
+					>
+						{ title }
+					</Button>
+				) }
+			</Flex>
+			{ item.type === PATTERN_TYPES.theme && (
+				<Tooltip
+					placement="top"
+					text={ __( 'This pattern cannot be edited.' ) }
+				>
+					<Icon
+						className="edit-site-patterns__pattern-lock-icon"
+						icon={ lockSmall }
+						size={ 24 }
+					/>
+				</Tooltip>
+			) }
+		</HStack>
+	);
+}
+
+export const titleField = {
+	label: __( 'Title' ),
+	id: 'title',
+	getValue: ( { item } ) => item.title?.raw || item.title,
+	render: TitleField,
+	enableHiding: 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/index.js b/packages/edit-site/src/components/page-patterns/index.js
index 27b75424e5f3b..be3bb7429c32f 100644
--- a/packages/edit-site/src/components/page-patterns/index.js
+++ b/packages/edit-site/src/components/page-patterns/index.js
@@ -1,59 +1,39 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalHStack as HStack,
-	Button,
-	Tooltip,
-	Flex,
-} from '@wordpress/components';
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useState, useMemo, useId, useEffect } from '@wordpress/element';
-import {
-	BlockPreview,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
-import { Icon, lockSmall } from '@wordpress/icons';
 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 { parse } from '@wordpress/blocks';
-import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
  */
-import { Async } from '../async';
 import Page from '../page';
 import {
 	LAYOUT_GRID,
 	LAYOUT_TABLE,
-	LAYOUT_LIST,
 	PATTERN_TYPES,
 	TEMPLATE_PART_POST_TYPE,
-	PATTERN_SYNC_TYPES,
 	PATTERN_DEFAULT_CATEGORY,
-	OPERATOR_IS,
 } from '../../utils/constants';
 import usePatternSettings from './use-pattern-settings';
 import { unlock } from '../../lock-unlock';
-import usePatterns from './use-patterns';
+import usePatterns, { useAugmentPatternsWithPermissions } from './use-patterns';
 import PatternsHeader from './header';
-import { useLink } from '../routes/link';
-import { useAddedBy } from '../page-templates/hooks';
 import { useEditPostAction } from '../dataviews-actions';
-import { defaultGetTitle } from './search-items';
+import {
+	patternStatusField,
+	previewField,
+	titleField,
+	templatePartAuthorField,
+} from './fields';
 
-const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
-	blockEditorPrivateApis
-);
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { usePostActions } = unlock( editorPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -90,164 +70,6 @@ const DEFAULT_VIEW = {
 	filters: [],
 };
 
-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.'
-		),
-	},
-];
-
-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={ item.title }
-			aria-describedby={ ariaDescribedBy }
-			aria-disabled={ item.type === PATTERN_TYPES.theme }
-		>
-			{ children }
-		</button>
-	);
-}
-
-function Preview( { item, viewType } ) {
-	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( {
-		postType: item.type,
-		postId: 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 is-viewtype-${ viewType }` }
-			style={ { backgroundColor } }
-		>
-			<PreviewWrapper
-				item={ item }
-				onClick={ onClick }
-				ariaDescribedBy={ !! description ? descriptionId : undefined }
-			>
-				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
-				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
-				{ ! isEmpty && (
-					<Async>
-						<BlockPreview
-							blocks={ blocks }
-							viewportWidth={ item.viewportWidth }
-						/>
-					</Async>
-				) }
-			</PreviewWrapper>
-			{ !! description && (
-				<div hidden id={ descriptionId }>
-					{ description }
-				</div>
-			) }
-		</div>
-	);
-}
-
-function Author( { item, viewType } ) {
-	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
-	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
-	const withIcon = viewType !== LAYOUT_LIST;
-
-	return (
-		<HStack alignment="left" spacing={ 0 }>
-			{ withIcon && imageUrl && (
-				<div
-					className={ clsx( 'page-templates-author-field__avatar', {
-						'is-loaded': isImageLoaded,
-					} ) }
-				>
-					<img
-						onLoad={ () => setIsImageLoaded( true ) }
-						alt=""
-						src={ imageUrl }
-					/>
-				</div>
-			) }
-			{ withIcon && ! imageUrl && (
-				<div className="page-templates-author-field__icon">
-					<Icon icon={ icon } />
-				</div>
-			) }
-			<span className="page-templates-author-field__name">{ text }</span>
-		</HStack>
-	);
-}
-
-function Title( { item } ) {
-	const isUserPattern = item.type === PATTERN_TYPES.user;
-	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-	const { onClick } = useLink( {
-		postType: item.type,
-		postId: isUserPattern || isTemplatePart ? item.id : item.name,
-		canvas: 'edit',
-	} );
-	const title = decodeEntities( defaultGetTitle( item ) );
-	return (
-		<HStack alignment="center" justify="flex-start" spacing={ 2 }>
-			<Flex
-				as="div"
-				gap={ 0 }
-				justify="left"
-				className="edit-site-patterns__pattern-title"
-			>
-				{ item.type === PATTERN_TYPES.theme ? (
-					title
-				) : (
-					<Button
-						variant="link"
-						onClick={ onClick }
-						// Required for the grid's roving tab index system.
-						// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
-						tabIndex="-1"
-					>
-						{ title }
-					</Button>
-				) }
-			</Flex>
-			{ item.type === PATTERN_TYPES.theme && (
-				<Tooltip
-					placement="top"
-					text={ __( 'This pattern cannot be edited.' ) }
-				>
-					<Icon
-						className="edit-site-patterns__pattern-lock-icon"
-						icon={ lockSmall }
-						size={ 24 }
-					/>
-				</Tooltip>
-			) }
-		</HStack>
-	);
-}
-
 export default function DataviewsPatterns() {
 	const {
 		params: { postType, categoryId: categoryIdFromURL },
@@ -267,6 +89,7 @@ export default function DataviewsPatterns() {
 	const { records } = useEntityRecords( 'postType', TEMPLATE_PART_POST_TYPE, {
 		per_page: -1,
 	} );
+
 	const authors = useMemo( () => {
 		if ( ! records ) {
 			return EMPTY_ARRAY;
@@ -282,72 +105,19 @@ export default function DataviewsPatterns() {
 	}, [ records ] );
 
 	const fields = useMemo( () => {
-		const _fields = [
-			{
-				header: __( 'Preview' ),
-				id: 'preview',
-				render: ( { item } ) => (
-					<Preview item={ item } viewType={ view.type } />
-				),
-				enableSorting: false,
-			},
-			{
-				header: __( 'Title' ),
-				id: 'title',
-				getValue: ( { item } ) => item.title?.raw || item.title,
-				render: ( { item } ) => <Title item={ item } />,
-				enableHiding: false,
-			},
-		];
+		const _fields = [ previewField, titleField ];
 
 		if ( type === PATTERN_TYPES.user ) {
-			_fields.push( {
-				header: __( '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,
-			} );
+			_fields.push( patternStatusField );
 		} else if ( type === TEMPLATE_PART_POST_TYPE ) {
 			_fields.push( {
-				header: __( 'Author' ),
-				id: 'author',
-				getValue: ( { item } ) => item.author_text,
-				render: ( { item } ) => {
-					return <Author viewType={ view.type } item={ item } />;
-				},
+				...templatePartAuthorField,
 				elements: authors,
-				filterBy: {
-					isPrimary: true,
-				},
 			} );
 		}
 
 		return _fields;
-	}, [ view.type, type, authors ] );
+	}, [ type, authors ] );
 
 	// Reset the page number when the category changes.
 	useEffect( () => {
@@ -366,6 +136,8 @@ export default function DataviewsPatterns() {
 		return filterSortAndPaginate( patterns, viewWithoutFilters, fields );
 	}, [ patterns, view, fields, type ] );
 
+	const dataWithPermissions = useAugmentPatternsWithPermissions( data );
+
 	const templatePartActions = usePostActions( {
 		postType: TEMPLATE_PART_POST_TYPE,
 		context: 'list',
@@ -401,10 +173,11 @@ export default function DataviewsPatterns() {
 					descriptionId={ `${ id }-description` }
 				/>
 				<DataViews
+					key={ categoryId + postType }
 					paginationInfo={ paginationInfo }
 					fields={ fields }
 					actions={ actions }
-					data={ data || EMPTY_ARRAY }
+					data={ dataWithPermissions || EMPTY_ARRAY }
 					getItemId={ ( item ) => item.name ?? item.id }
 					isLoading={ isResolving }
 					view={ view }
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index 2014d3b94fdae..c62fe34daf7d6 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -1,122 +1,110 @@
-.edit-site-patterns__section-header {
-	.screen-reader-shortcut:focus {
-		top: 0;
-	}
+.edit-site-patterns__delete-modal {
+	width: $modal-width-small;
 }
 
-.edit-site-patterns__pattern-title {
-	.is-link {
-		text-decoration: none;
-		color: $gray-200;
+.page-patterns-preview-field {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	border-radius: $radius-medium;
 
-		&:hover,
-		&:focus {
-			color: $white;
-		}
+	.dataviews-view-table & {
+		width: 96px;
+		flex-grow: 0;
 	}
 
-	.edit-site-patterns__pattern-icon {
+	.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;
-		background: var(--wp-block-synced-color);
-		fill: $white;
-	}
 
-	.edit-site-patterns__pattern-lock-icon {
-		fill: currentcolor;
+		&: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__delete-modal {
-	width: $modal-width-small;
+.edit-site-patterns__pattern-icon {
+	fill: var(--wp-block-synced-color);
+	flex-shrink: 0;
 }
 
-.edit-site-page-patterns-dataviews {
-	.page-patterns-preview-field {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-
-		&.is-viewtype-table {
-			width: 96px;
-			flex-grow: 0;
-			border-radius: 2px;
+.edit-site-patterns__pattern-lock-icon {
+	min-width: min-content;
+}
 
-			.page-patterns-preview-field__button {
-				border-radius: 2px;
-			}
-		}
+.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;
 
-		.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;
-			}
+		.components-heading {
+			flex-grow: 1;
+			flex-basis: 0;
+			white-space: nowrap;
 		}
 	}
 
-	.edit-site-patterns__pattern-icon {
-		fill: var(--wp-block-synced-color);
-		flex-shrink: 0;
+	.edit-site-patterns__sub-title {
+		margin-bottom: $grid-unit-10;
 	}
 
-	.edit-site-patterns__pattern-lock-icon {
-		min-width: min-content;
-	}
-
-	.edit-site-patterns__section-header {
-		border-bottom: 1px solid #f0f0f0;
-		padding: $grid-unit-20 $grid-unit-60;
-		position: sticky;
+	.screen-reader-shortcut:focus {
 		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;
+.edit-site-patterns__pattern-title {
+	display: block;
+	width: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	color: inherit;
 
-			.components-heading {
-				flex-grow: 1;
-				flex-basis: 0;
-				white-space: nowrap;
-			}
-		}
+	.is-link {
+		text-decoration: none;
+		color: $gray-200;
 
-		.edit-site-patterns__sub-title {
-			margin-bottom: $grid-unit-10;
+		&:hover,
+		&:focus {
+			color: $white;
 		}
 	}
 
-	.edit-site-patterns__pattern-title {
-		display: block;
-		width: 100%;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		color: inherit;
+	.edit-site-patterns__pattern-icon {
+		border-radius: $grid-unit-05;
+		background: var(--wp-block-synced-color);
+		fill: $white;
 	}
 
-	.dataviews-pagination {
-		z-index: z-index(".edit-site-patterns__dataviews-list-pagination");
+	.edit-site-patterns__pattern-lock-icon {
+		fill: currentcolor;
 	}
+}
 
+.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);
@@ -138,8 +126,8 @@
 	.components-form-token-field__suggestions-list:not(:empty) {
 		position: absolute;
 		border: $border-width solid var(--wp-admin-theme-color);
-		border-bottom-left-radius: $radius-block-ui;
-		border-bottom-right-radius: $radius-block-ui;
+		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;
diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js
index ecbc6adee7558..f32e278e6354f 100644
--- a/packages/edit-site/src/components/page-patterns/use-patterns.js
+++ b/packages/edit-site/src/components/page-patterns/use-patterns.js
@@ -5,6 +5,7 @@ import { parse } from '@wordpress/blocks';
 import { useSelect, createSelector } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -255,6 +256,38 @@ const selectUserPatterns = createSelector(
 	]
 );
 
+export function useAugmentPatternsWithPermissions( patterns ) {
+	const idsAndTypes = useMemo(
+		() =>
+			patterns
+				?.filter( ( record ) => record.type !== PATTERN_TYPES.theme )
+				.map( ( record ) => [ record.type, record.id ] ) ?? [],
+		[ patterns ]
+	);
+
+	const permissions = useSelect(
+		( select ) => {
+			const { getEntityRecordPermissions } = unlock(
+				select( coreStore )
+			);
+			return idsAndTypes.reduce( ( acc, [ type, id ] ) => {
+				acc[ id ] = getEntityRecordPermissions( 'postType', type, id );
+				return acc;
+			}, {} );
+		},
+		[ idsAndTypes ]
+	);
+
+	return useMemo(
+		() =>
+			patterns?.map( ( record ) => ( {
+				...record,
+				permissions: permissions?.[ record.id ] ?? {},
+			} ) ) ?? [],
+		[ patterns, permissions ]
+	);
+}
+
 export const usePatterns = (
 	postType,
 	categoryId,
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 0000000000000..d26f1906a1066
--- /dev/null
+++ b/packages/edit-site/src/components/page-templates/fields.js
@@ -0,0 +1,157 @@
+/**
+ * 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';
+
+/**
+ * Internal dependencies
+ */
+import { Async } from '../async';
+import { default as Link, useLink } from '../routes/link';
+import { useAddedBy } from './hooks';
+
+import usePatternSettings from '../page-patterns/use-pattern-settings';
+import { unlock } from '../../lock-unlock';
+
+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( {
+		postId: item.id,
+		postType: item.type,
+		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 && (
+						<Async>
+							<BlockPreview blocks={ blocks } />
+						</Async>
+					) }
+				</button>
+			</div>
+		</EditorProvider>
+	);
+}
+
+export const previewField = {
+	label: __( 'Preview' ),
+	id: 'preview',
+	render: PreviewField,
+	enableSorting: false,
+};
+
+function TitleField( { item } ) {
+	const linkProps = {
+		params: {
+			postId: item.id,
+			postType: item.type,
+			canvas: 'edit',
+		},
+	};
+	return (
+		<Link { ...linkProps }>
+			{ decodeEntities( item.title?.rendered ) || __( '(no title)' ) }
+		</Link>
+	);
+}
+
+export const titleField = {
+	label: __( 'Template' ),
+	id: 'title',
+	getValue: ( { item } ) => item.title?.rendered,
+	render: TitleField,
+	enableHiding: false,
+	enableGlobalSearch: true,
+};
+
+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/index.js b/packages/edit-site/src/components/page-templates/index.js
index ed1c8543865c1..5ffc247733793 100644
--- a/packages/edit-site/src/components/page-templates/index.js
+++ b/packages/edit-site/src/components/page-templates/index.js
@@ -1,36 +1,18 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
-import { Icon, __experimentalHStack as HStack } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
-import { useEntityRecords } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { parse } from '@wordpress/blocks';
-import {
-	BlockPreview,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+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,
-	EditorProvider,
-} from '@wordpress/editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { Async } from '../async';
 import Page from '../page';
-import { default as Link, useLink } from '../routes/link';
 import AddNewTemplate from '../add-new-template';
-import { useAddedBy } from './hooks';
 import {
 	TEMPLATE_POST_TYPE,
 	OPERATOR_IS_ANY,
@@ -38,15 +20,18 @@ import {
 	LAYOUT_TABLE,
 	LAYOUT_LIST,
 } from '../../utils/constants';
-
-import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
+import {
+	authorField,
+	descriptionField,
+	previewField,
+	titleField,
+} from './fields';
 
 const { usePostActions } = unlock( editorPrivateApis );
-
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useEntityRecordsWithPermissions } = unlock( corePrivateApis );
 
 const EMPTY_ARRAY = [];
 
@@ -58,7 +43,7 @@ const defaultLayouts = {
 			combinedFields: [
 				{
 					id: 'template',
-					header: __( 'Template' ),
+					label: __( 'Template' ),
 					children: [ 'title', 'description' ],
 					direction: 'vertical',
 				},
@@ -69,8 +54,7 @@ const defaultLayouts = {
 					minWidth: 320,
 				},
 				preview: {
-					minWidth: 120,
-					maxWidth: 120,
+					width: '1%',
 				},
 				author: {
 					width: '1%',
@@ -109,104 +93,6 @@ const DEFAULT_VIEW = {
 	filters: [],
 };
 
-function Title( { item, viewType } ) {
-	if ( viewType === LAYOUT_LIST ) {
-		return decodeEntities( item.title?.rendered ) || __( '(no title)' );
-	}
-	const linkProps = {
-		params: {
-			postId: item.id,
-			postType: item.type,
-			canvas: 'edit',
-		},
-	};
-	return (
-		<Link { ...linkProps }>
-			{ decodeEntities( item.title?.rendered ) || __( '(no title)' ) }
-		</Link>
-	);
-}
-
-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>
-	);
-}
-
-function Preview( { item, viewType } ) {
-	const settings = usePatternSettings();
-	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
-	const blocks = useMemo( () => {
-		return parse( item.content.raw );
-	}, [ item.content.raw ] );
-	const { onClick } = useLink( {
-		postId: item.id,
-		postType: item.type,
-		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 is-viewtype-${ viewType }` }
-				style={ { backgroundColor } }
-			>
-				{ viewType === LAYOUT_LIST && ! isEmpty && (
-					<Async>
-						<BlockPreview blocks={ blocks } />
-					</Async>
-				) }
-				{ viewType !== LAYOUT_LIST && (
-					<button
-						className="page-templates-preview-field__button"
-						type="button"
-						onClick={ onClick }
-						aria-label={ item.title?.rendered || item.title }
-					>
-						{ isEmpty && __( 'Empty template' ) }
-						{ ! isEmpty && (
-							<Async>
-								<BlockPreview blocks={ blocks } />
-							</Async>
-						) }
-					</button>
-				) }
-			</div>
-		</EditorProvider>
-	);
-}
-
 export default function PageTemplates() {
 	const { params } = useLocation();
 	const { activeView = 'all', layout, postId } = params;
@@ -248,13 +134,10 @@ export default function PageTemplates() {
 		} ) );
 	}, [ activeView ] );
 
-	const { records, isResolving: isLoadingData } = useEntityRecords(
-		'postType',
-		TEMPLATE_POST_TYPE,
-		{
+	const { records, isResolving: isLoadingData } =
+		useEntityRecordsWithPermissions( 'postType', TEMPLATE_POST_TYPE, {
 			per_page: -1,
-		}
-	);
+		} );
 	const history = useHistory();
 	const onChangeSelection = useCallback(
 		( items ) => {
@@ -285,50 +168,15 @@ export default function PageTemplates() {
 
 	const fields = useMemo(
 		() => [
+			previewField,
+			titleField,
+			descriptionField,
 			{
-				header: __( 'Preview' ),
-				id: 'preview',
-				render: ( { item } ) => {
-					return <Preview item={ item } viewType={ view.type } />;
-				},
-				enableSorting: false,
-			},
-			{
-				header: __( 'Template' ),
-				id: 'title',
-				getValue: ( { item } ) => item.title?.rendered,
-				render: ( { item } ) => (
-					<Title item={ item } viewType={ view.type } />
-				),
-				enableHiding: false,
-				enableGlobalSearch: true,
-			},
-			{
-				header: __( 'Description' ),
-				id: 'description',
-				render: ( { item } ) => {
-					return (
-						item.description && (
-							<span className="page-templates-description">
-								{ decodeEntities( item.description ) }
-							</span>
-						)
-					);
-				},
-				enableSorting: false,
-				enableGlobalSearch: true,
-			},
-			{
-				header: __( 'Author' ),
-				id: 'author',
-				getValue: ( { item } ) => item.author_text,
-				render: ( { item } ) => {
-					return <AuthorField viewType={ view.type } item={ item } />;
-				},
+				...authorField,
 				elements: authors,
 			},
 		],
-		[ authors, view.type ]
+		[ authors ]
 	);
 
 	const { data, paginationInfo } = useMemo( () => {
@@ -366,6 +214,7 @@ export default function PageTemplates() {
 			actions={ <AddNewTemplate /> }
 		>
 			<DataViews
+				key={ activeView }
 				paginationInfo={ paginationInfo }
 				fields={ fields }
 				actions={ actions }
diff --git a/packages/edit-site/src/components/page-templates/style.scss b/packages/edit-site/src/components/page-templates/style.scss
index 725a3c4f89746..6a753921f6f40 100644
--- a/packages/edit-site/src/components/page-templates/style.scss
+++ b/packages/edit-site/src/components/page-templates/style.scss
@@ -3,6 +3,7 @@
 	flex-direction: column;
 	height: 100%;
 	width: 100%;
+	border-radius: $radius-medium;
 
 	.page-templates-preview-field__button {
 		box-shadow: none;
@@ -13,7 +14,7 @@
 		cursor: pointer;
 		overflow: hidden;
 		height: 100%;
-		border-radius: $grid-unit-05;
+		border-radius: $radius-medium;
 
 		&:focus-visible {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -22,21 +23,22 @@
 		}
 	}
 
-	&.is-viewtype-list {
+	.dataviews-view-list & {
 		.block-editor-block-preview__container {
 			height: 120px;
 		}
 	}
 
-	&.is-viewtype-grid {
+	.dataviews-view-grid & {
 		.block-editor-block-preview__container {
 			height: 100%;
 		}
 	}
 
-	&.is-viewtype-table {
-		border-radius: $radius-block-ui;
+	.dataviews-view-table & {
 		position: relative;
+		width: 120px;
+		max-height: 160px;
 
 		&::after {
 			content: "";
@@ -46,13 +48,19 @@
 			width: 100%;
 			height: 100%;
 			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-			border-radius: $radius-block-ui;
+			border-radius: $radius-medium;
 		}
 	}
 }
 
 .page-templates-description {
-	white-space: normal;
+	max-width: 50em;
+	text-wrap: balance; // Fallback for Safari
+	text-wrap: pretty;
+
+	.dataviews-view-table & {
+		margin-bottom: $grid-unit-10;
+	}
 }
 
 .edit-site-page-templates {
diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss
index 99c8d793c6f3a..03e062a576b6e 100644
--- a/packages/edit-site/src/components/page/style.scss
+++ b/packages/edit-site/src/components/page/style.scss
@@ -1,11 +1,15 @@
 .edit-site-page {
 	color: $gray-800;
 	background: $white;
-	height: 100%;
+	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 {
diff --git a/packages/edit-site/src/components/pagination/index.js b/packages/edit-site/src/components/pagination/index.js
index 66b89735b8cb4..8ef45883eb452 100644
--- a/packages/edit-site/src/components/pagination/index.js
+++ b/packages/edit-site/src/components/pagination/index.js
@@ -11,7 +11,7 @@ import {
 	__experimentalText as Text,
 	Button,
 } from '@wordpress/components';
-import { __, _x, _n, sprintf } from '@wordpress/i18n';
+import { __, _x, _n, sprintf, isRTL } from '@wordpress/i18n';
 import { previous, chevronLeft, chevronRight, next } from '@wordpress/icons';
 
 export default function Pagination( {
@@ -50,7 +50,7 @@ export default function Pagination( {
 					accessibleWhenDisabled
 					disabled={ disabled || currentPage === 1 }
 					label={ __( 'First page' ) }
-					icon={ previous }
+					icon={ isRTL() ? next : previous }
 					size="compact"
 				/>
 				<Button
@@ -59,7 +59,7 @@ export default function Pagination( {
 					accessibleWhenDisabled
 					disabled={ disabled || currentPage === 1 }
 					label={ __( 'Previous page' ) }
-					icon={ chevronLeft }
+					icon={ isRTL() ? chevronRight : chevronLeft }
 					size="compact"
 				/>
 			</HStack>
@@ -78,7 +78,7 @@ export default function Pagination( {
 					accessibleWhenDisabled
 					disabled={ disabled || currentPage === numPages }
 					label={ __( 'Next page' ) }
-					icon={ chevronRight }
+					icon={ isRTL() ? chevronLeft : chevronRight }
 					size="compact"
 				/>
 				<Button
@@ -87,7 +87,7 @@ export default function Pagination( {
 					accessibleWhenDisabled
 					disabled={ disabled || currentPage === numPages }
 					label={ __( 'Last page' ) }
-					icon={ next }
+					icon={ isRTL() ? previous : next }
 					size="compact"
 				/>
 			</HStack>
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 0000000000000..0ec63589d9767
--- /dev/null
+++ b/packages/edit-site/src/components/post-edit/index.js
@@ -0,0 +1,119 @@
+/**
+ * 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 usePostFields from '../post-fields';
+import { unlock } from '../../lock-unlock';
+
+const { PostCardPanel } = unlock( editorPrivateApis );
+
+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();
+	const fields = useMemo(
+		() =>
+			_fields?.map( ( field ) => {
+				if ( field.id === 'status' ) {
+					return {
+						...field,
+						elements: field.elements.filter(
+							( element ) => element.value !== 'trash'
+						),
+					};
+				}
+				return field;
+			} ),
+		[ _fields ]
+	);
+	const form = {
+		type: 'panel',
+		fields: [ 'title', 'status', 'date', 'author', 'comment_status' ],
+	};
+	const onChange = ( edits ) => {
+		for ( const id of ids ) {
+			if (
+				edits.status !== 'future' &&
+				record.status === 'future' &&
+				new Date( record.date ) > new Date()
+			) {
+				edits.date = null;
+			}
+			if ( edits.status === 'private' && record.password ) {
+				edits.password = '';
+			}
+			editEntityRecord( 'postType', postType, id, edits );
+			if ( ids.length > 1 ) {
+				setMultiEdits( ( prev ) => ( {
+					...prev,
+					...edits,
+				} ) );
+			}
+		}
+	};
+	useEffect( () => {
+		setMultiEdits( {} );
+	}, [ ids ] );
+
+	return (
+		<VStack spacing={ 4 }>
+			{ ids.length === 1 && (
+				<PostCardPanel postType={ postType } postId={ ids[ 0 ] } />
+			) }
+			<DataForm
+				data={ ids.length === 1 ? record : multiEdits }
+				fields={ fields }
+				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 0000000000000..4eaa41b2e8ed7
--- /dev/null
+++ b/packages/edit-site/src/components/post-edit/style.scss
@@ -0,0 +1,9 @@
+.edit-site-post-edit {
+	padding: $grid-unit-30;
+
+	&.is-empty .edit-site-page-content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js
new file mode 100644
index 0000000000000..9e59b23d61922
--- /dev/null
+++ b/packages/edit-site/src/components/post-fields/index.js
@@ -0,0 +1,408 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+import {
+	createInterpolateElement,
+	useMemo,
+	useState,
+} from '@wordpress/element';
+import { dateI18n, getDate, getSettings } from '@wordpress/date';
+import {
+	trash,
+	drafts,
+	published,
+	scheduled,
+	pending,
+	notAllowed,
+	commentAuthorAvatar as authorIcon,
+} from '@wordpress/icons';
+import { __experimentalHStack as HStack, Icon } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import {
+	LAYOUT_GRID,
+	LAYOUT_TABLE,
+	LAYOUT_LIST,
+	OPERATOR_IS_ANY,
+} from '../../utils/constants';
+import { default as Link, useLink } from '../routes/link';
+import Media from '../media';
+
+// See https://github.com/WordPress/gutenberg/issues/55886
+// We do not support custom statutes at the moment.
+const STATUSES = [
+	{
+		value: 'draft',
+		label: __( 'Draft' ),
+		icon: drafts,
+		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 },
+];
+
+const getFormattedDate = ( dateToDisplay ) =>
+	dateI18n(
+		getSettings().formats.datetimeAbbreviated,
+		getDate( dateToDisplay )
+	);
+
+function FeaturedImage( { item, viewType } ) {
+	const isDisabled = item.status === 'trash';
+	const { onClick } = useLink( {
+		postId: item.id,
+		postType: item.type,
+		canvas: 'edit',
+	} );
+	const hasMedia = !! item.featured_media;
+	const size =
+		viewType === LAYOUT_GRID
+			? [ 'large', 'full', 'medium', 'thumbnail' ]
+			: [ 'thumbnail', 'medium', 'large', 'full' ];
+	const media = hasMedia ? (
+		<Media
+			className="edit-site-post-list__featured-image"
+			id={ item.featured_media }
+			size={ size }
+		/>
+	) : null;
+	const renderButton = viewType !== LAYOUT_LIST && ! isDisabled;
+	return (
+		<div
+			className={ `edit-site-post-list__featured-image-wrapper is-layout-${ viewType }` }
+		>
+			{ renderButton ? (
+				<button
+					className="edit-site-post-list__featured-image-button"
+					type="button"
+					onClick={ onClick }
+					aria-label={ item.title?.rendered || __( '(no title)' ) }
+				>
+					{ media }
+				</button>
+			) : (
+				media
+			) }
+		</div>
+	);
+}
+
+function PostStatusField( { item } ) {
+	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>
+	);
+}
+
+function PostAuthorField( { item } ) {
+	const { text, imageUrl } = useSelect(
+		( select ) => {
+			const { getUser } = select( coreStore );
+			const user = getUser( 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>
+	);
+}
+
+function usePostFields( viewType ) {
+	const { records: authors, isResolving: isLoadingAuthors } =
+		useEntityRecords( 'root', 'user', { per_page: -1 } );
+
+	const { frontPageId, postsPageId } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+		const siteSettings = getEntityRecord( 'root', 'site' );
+		return {
+			frontPageId: siteSettings?.page_on_front,
+			postsPageId: siteSettings?.page_for_posts,
+		};
+	}, [] );
+
+	const fields = useMemo(
+		() => [
+			{
+				id: 'featured-image',
+				label: __( 'Featured Image' ),
+				getValue: ( { item } ) => item.featured_media,
+				render: ( { item } ) => (
+					<FeaturedImage item={ item } viewType={ viewType } />
+				),
+				enableSorting: false,
+			},
+			{
+				label: __( 'Title' ),
+				id: 'title',
+				type: 'text',
+				getValue: ( { item } ) =>
+					typeof item.title === 'string'
+						? item.title
+						: item.title?.raw,
+				render: ( { item } ) => {
+					const addLink =
+						[ LAYOUT_TABLE, LAYOUT_GRID ].includes( viewType ) &&
+						item.status !== 'trash';
+					const renderedTitle =
+						typeof item.title === 'string'
+							? item.title
+							: item.title?.rendered;
+					const title = addLink ? (
+						<Link
+							params={ {
+								postId: item.id,
+								postType: item.type,
+								canvas: 'edit',
+							} }
+						>
+							{ decodeEntities( renderedTitle ) ||
+								__( '(no title)' ) }
+						</Link>
+					) : (
+						<span>
+							{ decodeEntities( renderedTitle ) ||
+								__( '(no title)' ) }
+						</span>
+					);
+
+					let suffix = '';
+					if ( item.id === frontPageId ) {
+						suffix = (
+							<span className="edit-site-post-list__title-badge">
+								{ __( 'Homepage' ) }
+							</span>
+						);
+					} else if ( item.id === postsPageId ) {
+						suffix = (
+							<span className="edit-site-post-list__title-badge">
+								{ __( 'Posts Page' ) }
+							</span>
+						);
+					}
+
+					return (
+						<HStack
+							className="edit-site-post-list__title"
+							alignment="center"
+							justify="flex-start"
+						>
+							{ title }
+							{ suffix }
+						</HStack>
+					);
+				},
+				enableHiding: false,
+			},
+			{
+				label: __( 'Author' ),
+				id: 'author',
+				type: 'integer',
+				elements:
+					authors?.map( ( { id, name } ) => ( {
+						value: id,
+						label: name,
+					} ) ) || [],
+				render: PostAuthorField,
+				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 );
+				},
+			},
+			{
+				label: __( 'Status' ),
+				id: 'status',
+				type: 'text',
+				elements: STATUSES,
+				render: PostStatusField,
+				Edit: 'radio',
+				enableSorting: false,
+				filterBy: {
+					operators: [ OPERATOR_IS_ANY ],
+				},
+			},
+			{
+				label: __( 'Date' ),
+				id: 'date',
+				type: 'datetime',
+				render: ( { item } ) => {
+					const isDraftOrPrivate = [ 'draft', 'private' ].includes(
+						item.status
+					);
+					if ( isDraftOrPrivate ) {
+						return createInterpolateElement(
+							sprintf(
+								/* translators: %s: page creation date */
+								__( '<span>Modified: <time>%s</time></span>' ),
+								getFormattedDate( item.date )
+							),
+							{
+								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 )
+							),
+							{
+								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 )
+							),
+							{
+								span: <span />,
+								time: <time />,
+							}
+						);
+					}
+
+					// Pending posts show the modified date if it's newer.
+					const dateToDisplay =
+						getDate( item.modified ) > getDate( item.date )
+							? item.modified
+							: item.date;
+
+					const isPending = item.status === 'pending';
+					if ( isPending ) {
+						return createInterpolateElement(
+							sprintf(
+								/* translators: %s: the newest of created or modified date for the page */
+								__( '<span>Modified: <time>%s</time></span>' ),
+								getFormattedDate( dateToDisplay )
+							),
+							{
+								span: <span />,
+								time: <time />,
+							}
+						);
+					}
+
+					// Unknow status.
+					return <time>{ getFormattedDate( item.date ) }</time>;
+				},
+			},
+			{
+				id: 'comment_status',
+				label: __( 'Discussion' ),
+				type: 'text',
+				Edit: 'radio',
+				enableSorting: false,
+				filterBy: {
+					operators: [],
+				},
+				elements: [
+					{
+						value: 'open',
+						label: __( 'Open' ),
+						description: __(
+							'Visitors can add new comments and replies.'
+						),
+					},
+					{
+						value: 'closed',
+						label: __( 'Closed' ),
+						description: __(
+							'Visitors cannot add new comments or replies. Existing comments remain visible.'
+						),
+					},
+				],
+			},
+		],
+		[ authors, viewType, frontPageId, postsPageId ]
+	);
+
+	return {
+		isLoading: isLoadingAuthors,
+		fields,
+	};
+}
+
+export default usePostFields;
diff --git a/packages/edit-site/src/components/post-list/index.js b/packages/edit-site/src/components/post-list/index.js
index 5c8ac934a6335..6738310ff6021 100644
--- a/packages/edit-site/src/components/post-list/index.js
+++ b/packages/edit-site/src/components/post-list/index.js
@@ -1,307 +1,232 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
+import { Button } from '@wordpress/components';
 import {
-	Button,
-	__experimentalHStack as HStack,
-	Icon,
-} from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
-import {
-	createInterpolateElement,
-	useState,
-	useMemo,
-	useCallback,
-	useEffect,
-} from '@wordpress/element';
-import { dateI18n, getDate, getSettings } from '@wordpress/date';
+	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 } from '@wordpress/dataviews';
+import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import {
-	trash,
-	drafts,
-	published,
-	scheduled,
-	pending,
-	notAllowed,
-	commentAuthorAvatar as authorIcon,
-} from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { drawerRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import Page from '../page';
-import { default as Link, useLink } from '../routes/link';
 import {
 	useDefaultViews,
 	defaultLayouts,
 } from '../sidebar-dataviews/default-views';
 import {
-	LAYOUT_GRID,
-	LAYOUT_TABLE,
-	LAYOUT_LIST,
 	OPERATOR_IS_ANY,
 	OPERATOR_IS_NONE,
+	LAYOUT_LIST,
 } from '../../utils/constants';
 
 import AddNewPostModal from '../add-new-post';
-import Media from '../media';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
 import { usePrevious } from '@wordpress/compose';
+import usePostFields from '../post-fields';
 
 const { usePostActions } = unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
+const { useEntityRecordsWithPermissions } = unlock( coreDataPrivateApis );
 const EMPTY_ARRAY = [];
 
-const getFormattedDate = ( dateToDisplay ) =>
-	dateI18n(
-		getSettings().formats.datetimeAbbreviated,
-		getDate( dateToDisplay )
-	);
+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,
+		layout: defaultLayouts[ content.type ]?.layout,
+	};
+};
+
+/**
+ * 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 {
 		params: { activeView = 'all', isCustom = 'false', layout },
 	} = useLocation();
 	const history = useHistory();
-	const DEFAULT_VIEWS = useDefaultViews( { postType } );
-	const selectedDefaultView = useMemo( () => {
-		const defaultView =
-			isCustom === 'false' &&
-			DEFAULT_VIEWS[ postType ].find(
-				( { slug } ) => slug === activeView
-			)?.view;
-		if ( isCustom === 'false' && layout ) {
-			return {
-				...defaultView,
-				type: layout,
-				layout: defaultLayouts[ layout ]?.layout,
-			};
-		}
-		return defaultView;
-	}, [ isCustom, activeView, layout, postType, DEFAULT_VIEWS ] );
-	const [ view, setView ] = useState( selectedDefaultView );
 
-	useEffect( () => {
-		if ( selectedDefaultView ) {
-			setView( selectedDefaultView );
-		}
-	}, [ selectedDefaultView ] );
-	const editedViewRecord = useSelect(
+	const defaultViews = useDefaultViews( { postType } );
+	const { editEntityRecord } = useDispatch( coreStore );
+	const editedEntityRecord = useSelect(
 		( select ) => {
 			if ( isCustom !== 'true' ) {
-				return;
+				return undefined;
 			}
+
 			const { getEditedEntityRecord } = select( coreStore );
-			const dataviewRecord = getEditedEntityRecord(
+			return getEditedEntityRecord(
 				'postType',
 				'wp_dataviews',
 				Number( activeView )
 			);
-			return dataviewRecord;
 		},
 		[ activeView, isCustom ]
 	);
-	const { editEntityRecord } = useDispatch( coreStore );
-
-	const customView = useMemo( () => {
-		const storedView =
-			editedViewRecord?.content &&
-			JSON.parse( editedViewRecord?.content );
-		if ( ! storedView ) {
-			return storedView;
+	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 {
-			...storedView,
-			layout: defaultLayouts[ storedView?.type ]?.layout,
+			...initialView,
+			type,
 		};
-	}, [ editedViewRecord?.content ] );
+	} );
 
-	const setCustomView = useCallback(
-		( viewToSet ) => {
-			editEntityRecord(
-				'postType',
-				'wp_dataviews',
-				editedViewRecord?.id,
-				{
-					content: JSON.stringify( viewToSet ),
-				}
-			);
-		},
-		[ editEntityRecord, editedViewRecord?.id ]
-	);
+	const setViewWithUrlUpdate = useCallback(
+		( newView ) => {
+			const { params } = history.getLocationWithParams();
 
-	const setDefaultViewAndUpdateUrl = useCallback(
-		( viewToSet ) => {
-			if ( viewToSet.type !== view?.type ) {
-				const { params } = history.getLocationWithParams();
+			if ( newView.type === LAYOUT_LIST && ! params?.layout ) {
+				// Skip updating the layout URL param if
+				// it is not present and the newView.type is LAYOUT_LIST.
+			} else if ( newView.type !== params?.layout ) {
 				history.push( {
 					...params,
-					layout: viewToSet.type,
+					layout: newView.type,
 				} );
 			}
-			setView( viewToSet );
+
+			setView( newView );
+
+			if ( isCustom === 'true' && editedEntityRecord?.id ) {
+				editEntityRecord(
+					'postType',
+					'wp_dataviews',
+					editedEntityRecord?.id,
+					{
+						content: JSON.stringify( newView ),
+					}
+				);
+			}
 		},
-		[ history, view?.type ]
+		[ history, isCustom, editEntityRecord, editedEntityRecord?.id ]
 	);
 
-	if ( isCustom === 'false' ) {
-		return [ view, setDefaultViewAndUpdateUrl ];
-	} else if ( isCustom === 'true' && customView ) {
-		return [ customView, setCustomView ];
-	}
-	// Loading state where no the view was not found on custom views or default views.
-	return [ DEFAULT_VIEWS[ postType ][ 0 ].view, setDefaultViewAndUpdateUrl ];
-}
+	// When layout URL param changes, update the view type
+	// without affecting any other config.
+	useEffect( () => {
+		setView( ( prevView ) => ( {
+			...prevView,
+			type: layout ?? LAYOUT_LIST,
+		} ) );
+	}, [ layout ] );
 
-// See https://github.com/WordPress/gutenberg/issues/55886
-// We do not support custom statutes at the moment.
-const STATUSES = [
-	{ value: 'draft', label: __( 'Draft' ), icon: drafts },
-	{ value: 'future', label: __( 'Scheduled' ), icon: scheduled },
-	{ value: 'pending', label: __( 'Pending Review' ), icon: pending },
-	{ value: 'private', label: __( 'Private' ), icon: notAllowed },
-	{ value: 'publish', label: __( 'Published' ), icon: published },
-	{ value: 'trash', label: __( 'Trash' ), icon: trash },
-];
-const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.
+	// When activeView or isCustom URL parameters change, reset the view.
+	useEffect( () => {
+		let newView;
+		if ( isCustom === 'true' ) {
+			newView = getCustomView( editedEntityRecord );
+		} else {
+			newView = getDefaultView( defaultViews, activeView );
+		}
 
-function FeaturedImage( { item, viewType } ) {
-	const isDisabled = item.status === 'trash';
-	const { onClick } = useLink( {
-		postId: item.id,
-		postType: item.type,
-		canvas: 'edit',
-	} );
-	const hasMedia = !! item.featured_media;
-	const size =
-		viewType === LAYOUT_GRID
-			? [ 'large', 'full', 'medium', 'thumbnail' ]
-			: [ 'thumbnail', 'medium', 'large', 'full' ];
-	const media = hasMedia ? (
-		<Media
-			className="edit-site-post-list__featured-image"
-			id={ item.featured_media }
-			size={ size }
-		/>
-	) : null;
-	const renderButton = viewType !== LAYOUT_LIST && ! isDisabled;
-	return (
-		<div
-			className={ `edit-site-post-list__featured-image-wrapper is-layout-${ viewType }` }
-		>
-			{ renderButton ? (
-				<button
-					className="edit-site-post-list__featured-image-button"
-					type="button"
-					onClick={ onClick }
-					aria-label={ item.title?.rendered || __( '(no title)' ) }
-				>
-					{ media }
-				</button>
-			) : (
-				media
-			) }
-		</div>
-	);
-}
+		if ( newView ) {
+			const type = layout ?? newView.type;
+			setView( {
+				...newView,
+				type,
+			} );
+		}
+	}, [ activeView, isCustom, layout, defaultViews, editedEntityRecord ] );
 
-function getItemId( item ) {
-	return item.id.toString();
+	return [ view, setViewWithUrlUpdate, setViewWithUrlUpdate ];
 }
 
-function PostStatusField( { item } ) {
-	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>
-	);
-}
+const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.
 
-function PostAuthorField( { item } ) {
-	const { text, imageUrl } = useSelect(
-		( select ) => {
-			const { getUser } = select( coreStore );
-			const user = getUser( 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>
-	);
+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 {
-		params: { postId },
-	} = useLocation();
-	const [ selection, setSelection ] = useState( [ postId ] );
+		postId,
+		quickEdit = false,
+		isCustom,
+		activeView = 'all',
+	} = location.params;
+	const [ selection, setSelection ] = useState( postId?.split( ',' ) ?? [] );
 	const onChangeSelection = useCallback(
 		( items ) => {
 			setSelection( items );
 			const { params } = history.getLocationWithParams();
-			if (
-				( params.isCustom ?? 'false' ) === 'false' &&
-				view?.type === LAYOUT_LIST
-			) {
+			if ( ( params.isCustom ?? 'false' ) === 'false' ) {
 				history.push( {
 					...params,
-					postId: items.length === 1 ? items[ 0 ] : undefined,
+					postId: items.join( ',' ),
 				} );
 			}
 		},
-		[ history, view?.type ]
+		[ history ]
 	);
 
+	const getActiveViewFilters = ( views, match ) => {
+		const found = views.find( ( { slug } ) => slug === match );
+		return found?.filters ?? [];
+	};
+
+	const { isLoading: isLoadingFields, fields: _fields } = usePostFields(
+		view.type
+	);
+	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 ) => {
+		view.filters?.forEach( ( filter ) => {
 			if (
 				filter.field === 'status' &&
 				filter.operator === OPERATOR_IS_ANY
@@ -320,6 +245,32 @@ export default function PostList( { postType } ) {
 				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 === '' ) {
@@ -335,15 +286,28 @@ export default function PostList( { postType } ) {
 			search: view.search,
 			...filters,
 		};
-	}, [ view ] );
+	}, [ view, activeView, defaultViews ] );
 	const {
 		records,
-		isResolving: isLoadingMainEntities,
+		isResolving: isLoadingData,
 		totalItems,
 		totalPages,
-	} = useEntityRecords( 'postType', postType, queryArgs );
+	} = 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;
+		}
 
-	const ids = records?.map( ( record ) => getItemId( record ) ) ?? [];
+		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 );
@@ -357,9 +321,6 @@ export default function PostList( { postType } ) {
 		}
 	}, [ postIdWasDeleted, history ] );
 
-	const { records: authors, isResolving: isLoadingAuthors } =
-		useEntityRecords( 'root', 'user', { per_page: -1 } );
-
 	const paginationInfo = useMemo(
 		() => ( {
 			totalItems,
@@ -368,14 +329,10 @@ export default function PostList( { postType } ) {
 		[ totalItems, totalPages ]
 	);
 
-	const { frontPageId, postsPageId, labels, canCreateRecord } = useSelect(
+	const { labels, canCreateRecord } = useSelect(
 		( select ) => {
-			const { getEntityRecord, getPostType, canUser } =
-				select( coreStore );
-			const siteSettings = getEntityRecord( 'root', 'site' );
+			const { getPostType, canUser } = select( coreStore );
 			return {
-				frontPageId: siteSettings?.page_on_front,
-				postsPageId: siteSettings?.page_for_posts,
 				labels: getPostType( postType )?.labels,
 				canCreateRecord: canUser( 'create', {
 					kind: 'postType',
@@ -386,175 +343,6 @@ export default function PostList( { postType } ) {
 		[ postType ]
 	);
 
-	// TODO: this should be abstracted into a hook similar to `usePostActions`.
-	const fields = useMemo(
-		() => [
-			{
-				id: 'featured-image',
-				header: __( 'Featured Image' ),
-				getValue: ( { item } ) => item.featured_media,
-				render: ( { item } ) => (
-					<FeaturedImage item={ item } viewType={ view.type } />
-				),
-				enableSorting: false,
-			},
-			{
-				header: __( 'Title' ),
-				id: 'title',
-				getValue: ( { item } ) => item.title?.rendered,
-				render: ( { item } ) => {
-					const addLink =
-						[ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
-						item.status !== 'trash';
-					const title = addLink ? (
-						<Link
-							params={ {
-								postId: item.id,
-								postType: item.type,
-								canvas: 'edit',
-							} }
-						>
-							{ decodeEntities( item.title?.rendered ) ||
-								__( '(no title)' ) }
-						</Link>
-					) : (
-						<span>
-							{ decodeEntities( item.title?.rendered ) ||
-								__( '(no title)' ) }
-						</span>
-					);
-
-					let suffix = '';
-					if ( item.id === frontPageId ) {
-						suffix = (
-							<span className="edit-site-post-list__title-badge">
-								{ __( 'Front Page' ) }
-							</span>
-						);
-					} else if ( item.id === postsPageId ) {
-						suffix = (
-							<span className="edit-site-post-list__title-badge">
-								{ __( 'Posts Page' ) }
-							</span>
-						);
-					}
-
-					return (
-						<HStack
-							className="edit-site-post-list__title"
-							alignment="center"
-							justify="flex-start"
-						>
-							{ title }
-							{ suffix }
-						</HStack>
-					);
-				},
-				enableHiding: false,
-			},
-			{
-				header: __( 'Author' ),
-				id: 'author',
-				getValue: ( { item } ) => item._embedded?.author[ 0 ]?.name,
-				elements:
-					authors?.map( ( { id, name } ) => ( {
-						value: id,
-						label: name,
-					} ) ) || [],
-				render: PostAuthorField,
-			},
-			{
-				header: __( 'Status' ),
-				id: 'status',
-				getValue: ( { item } ) =>
-					STATUSES.find( ( { value } ) => value === item.status )
-						?.label ?? item.status,
-				elements: STATUSES,
-				render: PostStatusField,
-				enableSorting: false,
-				filterBy: {
-					operators: [ OPERATOR_IS_ANY ],
-				},
-			},
-			{
-				header: __( 'Date' ),
-				id: 'date',
-				render: ( { item } ) => {
-					const isDraftOrPrivate = [ 'draft', 'private' ].includes(
-						item.status
-					);
-					if ( isDraftOrPrivate ) {
-						return createInterpolateElement(
-							sprintf(
-								/* translators: %s: page creation date */
-								__( '<span>Modified: <time>%s</time></span>' ),
-								getFormattedDate( item.date )
-							),
-							{
-								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 )
-							),
-							{
-								span: <span />,
-								time: <time />,
-							}
-						);
-					}
-
-					// Pending & Published posts show the modified date if it's newer.
-					const dateToDisplay =
-						getDate( item.modified ) > getDate( item.date )
-							? item.modified
-							: item.date;
-
-					const isPending = item.status === 'pending';
-					if ( isPending ) {
-						return createInterpolateElement(
-							sprintf(
-								/* translators: %s: the newest of created or modified date for the page */
-								__( '<span>Modified: <time>%s</time></span>' ),
-								getFormattedDate( dateToDisplay )
-							),
-							{
-								span: <span />,
-								time: <time />,
-							}
-						);
-					}
-
-					const isPublished = item.status === 'publish';
-					if ( isPublished ) {
-						return createInterpolateElement(
-							sprintf(
-								/* translators: %s: the newest of created or modified date for the page */
-								__( '<span>Published: <time>%s</time></span>' ),
-								getFormattedDate( dateToDisplay )
-							),
-							{
-								span: <span />,
-								time: <time />,
-							}
-						);
-					}
-
-					// Unknow status.
-					return <time>{ getFormattedDate( item.date ) }</time>;
-				},
-			},
-		],
-		[ authors, view.type, frontPageId, postsPageId ]
-	);
 	const postTypeActions = usePostActions( {
 		postType,
 		context: 'list',
@@ -604,17 +392,36 @@ export default function PostList( { postType } ) {
 			}
 		>
 			<DataViews
+				key={ activeView + isCustom }
 				paginationInfo={ paginationInfo }
 				fields={ fields }
 				actions={ actions }
-				data={ records || EMPTY_ARRAY }
-				isLoading={ isLoadingMainEntities || isLoadingAuthors }
+				data={ data || EMPTY_ARRAY }
+				isLoading={ isLoadingData || isLoadingFields }
 				view={ view }
 				onChangeView={ setView }
 				selection={ selection }
 				onChangeSelection={ onChangeSelection }
 				getItemId={ getItemId }
 				defaultLayouts={ defaultLayouts }
+				header={
+					window.__experimentalQuickEditDataViews &&
+					view.type !== LAYOUT_LIST &&
+					postType === 'page' && (
+						<Button
+							size="compact"
+							isPressed={ quickEdit }
+							icon={ drawerRight }
+							label={ __( 'Toggle details panel' ) }
+							onClick={ () => {
+								history.push( {
+									...location.params,
+									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
index c423c2e78d650..895a02b310672 100644
--- a/packages/edit-site/src/components/post-list/style.scss
+++ b/packages/edit-site/src/components/post-list/style.scss
@@ -68,10 +68,11 @@
 	background: $gray-100;
 	color: $gray-700;
 	padding: 0 $grid-unit-05;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	font-size: 12px;
 	font-weight: 400;
 	flex-shrink: 0;
+	line-height: $grid-unit-05 * 5;
 }
 
 .edit-site-post-list__status-icon {
diff --git a/packages/edit-site/src/components/resizable-frame/index.js b/packages/edit-site/src/components/resizable-frame/index.js
index b589a3861c75d..b5aae01918e69 100644
--- a/packages/edit-site/src/components/resizable-frame/index.js
+++ b/packages/edit-site/src/components/resizable-frame/index.js
@@ -14,7 +14,7 @@ import {
 } from '@wordpress/components';
 import { useInstanceId, useReducedMotion } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -171,7 +171,10 @@ function ResizableFrame( {
 		event.preventDefault();
 
 		const step = 20 * ( event.shiftKey ? 5 : 1 );
-		const delta = step * ( event.key === 'ArrowLeft' ? 1 : -1 );
+		const delta =
+			step *
+			( event.key === 'ArrowLeft' ? 1 : -1 ) *
+			( isRTL() ? -1 : 1 );
 		const newWidth = Math.min(
 			Math.max(
 				FRAME_MIN_WIDTH,
@@ -200,15 +203,17 @@ function ResizableFrame( {
 	const resizeHandleVariants = {
 		hidden: {
 			opacity: 0,
-			left: 0,
+			...( isRTL() ? { right: 0 } : { left: 0 } ),
 		},
 		visible: {
 			opacity: 1,
-			left: -14, // Account for the handle's width.
+			// Account for the handle's width.
+			...( isRTL() ? { right: -14 } : { left: -14 } ),
 		},
 		active: {
 			opacity: 1,
-			left: -14, // Account for the handle's width.
+			// Account for the handle's width.
+			...( isRTL() ? { right: -14 } : { left: -14 } ),
 			scaleY: 1.3,
 		},
 	};
@@ -246,10 +251,11 @@ function ResizableFrame( {
 			size={ frameSize }
 			enable={ {
 				top: false,
-				right: false,
 				bottom: false,
 				// Resizing will be disabled until the editor content is loaded.
-				left: isReady,
+				...( isRTL()
+					? { right: isReady, left: false }
+					: { left: isReady, right: false } ),
 				topRight: false,
 				bottomRight: false,
 				bottomLeft: false,
@@ -269,7 +275,7 @@ function ResizableFrame( {
 			onMouseOver={ () => setShouldShowHandle( true ) }
 			onMouseOut={ () => setShouldShowHandle( false ) }
 			handleComponent={ {
-				left: canvasMode === 'view' && (
+				[ isRTL() ? 'right' : 'left' ]: canvasMode === 'view' && (
 					<>
 						<Tooltip text={ __( 'Drag to resize' ) }>
 							{ /* Disable reason: role="separator" does in fact support aria-valuenow */ }
diff --git a/packages/edit-site/src/components/routes/link.js b/packages/edit-site/src/components/routes/link.js
index 4423eeeb1d6e8..a34b37943a079 100644
--- a/packages/edit-site/src/components/routes/link.js
+++ b/packages/edit-site/src/components/routes/link.js
@@ -33,14 +33,17 @@ export function useLink( params, state, shouldReplace = false ) {
 		...Object.keys( currentArgs )
 	);
 
+	let extraParams = {};
 	if ( isPreviewingTheme() ) {
-		params = {
-			...params,
+		extraParams = {
 			wp_theme_preview: currentlyPreviewingTheme(),
 		};
 	}
 
-	const newUrl = addQueryArgs( currentUrlWithoutArgs, params );
+	const newUrl = addQueryArgs( currentUrlWithoutArgs, {
+		...params,
+		...extraParams,
+	} );
 
 	return {
 		href: newUrl,
diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js
index ad65fb208b4a0..9b00a39fd7894 100644
--- a/packages/edit-site/src/components/save-panel/index.js
+++ b/packages/edit-site/src/components/save-panel/index.js
@@ -150,6 +150,7 @@ export default function SavePanel() {
 				} ) }
 			>
 				<Button
+					__next40pxDefaultSize
 					variant="secondary"
 					className="edit-site-editor__toggle-save-panel-button"
 					onClick={ () => setIsSaveViewOpened( true ) }
diff --git a/packages/edit-site/src/components/sidebar-button/index.js b/packages/edit-site/src/components/sidebar-button/index.js
index 9329515b21c7d..64c6efb891f46 100644
--- a/packages/edit-site/src/components/sidebar-button/index.js
+++ b/packages/edit-site/src/components/sidebar-button/index.js
@@ -11,6 +11,7 @@ import { Button } from '@wordpress/components';
 export default function SidebarButton( props ) {
 	return (
 		<Button
+			__next40pxDefaultSize
 			{ ...props }
 			className={ clsx( 'edit-site-sidebar-button', props.className ) }
 		/>
diff --git a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
index ceb2a11f2c523..62956ccd18960 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
@@ -29,7 +29,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const [ title, setTitle ] = useState( '' );
 	const [ isSaving, setIsSaving ] = useState( false );
-	const DEFAULT_VIEWS = useDefaultViews( { postType: type } );
+	const defaultViews = useDefaultViews( { postType: type } );
 	return (
 		<form
 			onSubmit={ async ( event ) => {
@@ -61,9 +61,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 						title,
 						status: 'publish',
 						wp_dataviews_type: dataViewTaxonomyId,
-						content: JSON.stringify(
-							DEFAULT_VIEWS[ type ][ 0 ].view
-						),
+						content: JSON.stringify( defaultViews[ 0 ].view ),
 					}
 				);
 				const {
@@ -80,6 +78,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 		>
 			<VStack spacing="5">
 				<TextControl
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ __( 'Name' ) }
 					value={ title }
@@ -89,6 +88,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 				/>
 				<HStack justify="right">
 					<Button
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ () => {
 							setIsAdding( false );
@@ -98,6 +98,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 					</Button>
 
 					<Button
+						__next40pxDefaultSize
 						variant="primary"
 						type="submit"
 						aria-disabled={ ! title || isSaving }
diff --git a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
index f033c932c59e1..847029e8d6dcf 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
@@ -51,6 +51,7 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
 		>
 			<VStack spacing="5">
 				<TextControl
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ __( 'Name' ) }
 					value={ title }
diff --git a/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js b/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js
index 0b5f93546875e..1e12d6706d81b 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js
@@ -29,7 +29,7 @@ export default function DataViewItem( {
 	suffix,
 } ) {
 	const {
-		params: { postType, layout },
+		params: { postType },
 	} = useLocation();
 
 	const iconToUse =
@@ -41,7 +41,7 @@ export default function DataViewItem( {
 	}
 	const linkInfo = useLink( {
 		postType,
-		layout,
+		layout: type,
 		activeView,
 		isCustom: isCustom ? 'true' : undefined,
 	} );
diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
index 2b8a9de4c2262..658fa319e9c66 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
@@ -77,105 +77,95 @@ export function useDefaultViews( { postType } ) {
 		[ postType ]
 	);
 	return useMemo( () => {
-		return {
-			[ postType ]: [
-				{
-					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',
-							},
-						],
+		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: __( '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: __( '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: __( '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: __( '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,
 				},
-				{
-					title: __( 'Trash' ),
-					slug: 'trash',
-					icon: trash,
-					view: {
-						...DEFAULT_POST_BASE,
-						filters: [
-							{
-								field: 'status',
-								operator: OPERATOR_IS_ANY,
-								value: 'trash',
-							},
-						],
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'trash',
 					},
-				},
-			],
-		};
-	}, [ labels, postType ] );
+				],
+			},
+		];
+	}, [ labels ] );
 }
diff --git a/packages/edit-site/src/components/sidebar-dataviews/index.js b/packages/edit-site/src/components/sidebar-dataviews/index.js
index e0a5b08a028f0..86420c4eec1d1 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/index.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/index.js
@@ -3,8 +3,6 @@
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useRef, useEffect } from '@wordpress/element';
-import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -14,45 +12,13 @@ import { unlock } from '../../lock-unlock';
 import DataViewItem from './dataview-item';
 import CustomDataViewsList from './custom-dataviews-list';
 
-const { useLocation, useHistory } = unlock( routerPrivateApis );
-
-/**
- * Hook to switch to table layout when switching to the trash view.
- * When going out of the trash view, it switches back to the previous layout if
- * there was an automatic switch to table layout.
- */
-function useSwitchToTableOnTrash() {
-	const {
-		params: { activeView, layout, ...restParams },
-	} = useLocation();
-	const history = useHistory();
-	const viewToSwitchOutOfTrash = useRef( undefined );
-	const previousActiveView = usePrevious( activeView );
-	useEffect( () => {
-		if ( activeView === 'trash' && previousActiveView !== 'trash' ) {
-			viewToSwitchOutOfTrash.current = layout || 'list';
-			history.push( { ...restParams, layout: 'table', activeView } );
-		} else if (
-			previousActiveView === 'trash' &&
-			activeView !== 'trash' &&
-			viewToSwitchOutOfTrash.current
-		) {
-			history.push( {
-				...restParams,
-				layout: viewToSwitchOutOfTrash.current,
-				activeView,
-			} );
-			viewToSwitchOutOfTrash.current = undefined;
-		}
-	}, [ previousActiveView, activeView, layout, history, restParams ] );
-}
+const { useLocation } = unlock( routerPrivateApis );
 
 export default function DataViewsSidebarContent() {
 	const {
 		params: { postType, activeView = 'all', isCustom = 'false' },
 	} = useLocation();
-	useSwitchToTableOnTrash();
-	const DEFAULT_VIEWS = useDefaultViews( { postType } );
+	const defaultViews = useDefaultViews( { postType } );
 	if ( ! postType ) {
 		return null;
 	}
@@ -61,7 +27,7 @@ export default function DataViewsSidebarContent() {
 	return (
 		<>
 			<ItemGroup>
-				{ DEFAULT_VIEWS[ postType ].map( ( dataview ) => {
+				{ defaultViews.map( ( dataview ) => {
 					return (
 						<DataViewItem
 							key={ dataview.slug }
diff --git a/packages/edit-site/src/components/sidebar-dataviews/style.scss b/packages/edit-site/src/components/sidebar-dataviews/style.scss
index 9c5b8f48e944f..14e6bf1d03fca 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/style.scss
+++ b/packages/edit-site/src/components/sidebar-dataviews/style.scss
@@ -8,7 +8,7 @@
 }
 
 .edit-site-sidebar-dataviews-dataview-item {
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	padding-right: $grid-unit-10;
 
 	.edit-site-sidebar-dataviews-dataview-item__dropdown-menu {
diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss
index 908056d52af48..016027ef715a4 100644
--- a/packages/edit-site/src/components/sidebar-navigation-item/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-item/style.scss
@@ -4,7 +4,6 @@
 	padding: $grid-unit-10 6px $grid-unit-10 $grid-unit-20;
 	border: none;
 	min-height: $grid-unit-50;
-	border-radius: $radius-block-ui;
 
 	&:hover,
 	&:focus,
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
index 43b789d669ba4..f0260581a8988 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -146,7 +146,6 @@
 	.components-input-control__input {
 		color: $gray-200 !important;
 		background: $gray-800 !important;
-		border-radius: $radius-block-ui;
 	}
 	.components-input-control__backdrop {
 		border: 4px !important;
diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
index 301f7165d5935..8cb3502493cff 100644
--- a/packages/edit-site/src/components/site-hub/index.js
+++ b/packages/edit-site/src/components/site-hub/index.js
@@ -7,7 +7,11 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, __experimentalHStack as HStack } from '@wordpress/components';
+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';
@@ -32,15 +36,12 @@ const SiteHub = memo(
 		const { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => {
 			const { getSettings } = unlock( select( editSiteStore ) );
 
-			const {
-				getSite,
-				getUnstableBase, // Site index.
-			} = select( coreStore );
-			const _site = getSite();
+			const { getEntityRecord } = select( coreStore );
+			const _site = getEntityRecord( 'root', 'site' );
 			return {
 				dashboardLink:
 					getSettings().__experimentalDashboardLink || 'index.php',
-				homeUrl: getUnstableBase()?.home,
+				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
 				siteTitle:
 					! _site?.title && !! _site?.url
 						? filterURLForDisplay( _site?.url )
@@ -61,6 +62,7 @@ const SiteHub = memo(
 						) }
 					>
 						<Button
+							__next40pxDefaultSize
 							ref={ ref }
 							href={ dashboardLink }
 							label={ __( 'Go to the Dashboard' ) }
@@ -77,12 +79,18 @@ const SiteHub = memo(
 					<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 ) }
+								<VisuallyHidden as="span">
+									{
+										/* translators: accessibility text */
+										__( '(opens in a new tab)' )
+									}
+								</VisuallyHidden>
 							</Button>
 						</div>
 						<HStack
@@ -91,6 +99,7 @@ const SiteHub = memo(
 							className="edit-site-site-hub__actions"
 						>
 							<Button
+								__next40pxDefaultSize
 								className="edit-site-site-hub_toggle-command-center"
 								icon={ search }
 								onClick={ () => openCommandCenter() }
@@ -113,13 +122,10 @@ export const SiteHubMobile = memo(
 		const { navigate } = useContext( SidebarNavigationContext );
 
 		const { homeUrl, siteTitle } = useSelect( ( select ) => {
-			const {
-				getSite,
-				getUnstableBase, // Site index.
-			} = select( coreStore );
-			const _site = getSite();
+			const { getEntityRecord } = select( coreStore );
+			const _site = getEntityRecord( 'root', 'site' );
 			return {
-				homeUrl: getUnstableBase()?.home,
+				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
 				siteTitle:
 					! _site?.title && !! _site?.url
 						? filterURLForDisplay( _site?.url )
@@ -140,6 +146,7 @@ export const SiteHubMobile = memo(
 						) }
 					>
 						<Button
+							__next40pxDefaultSize
 							ref={ ref }
 							label={ __( 'Go to Site Editor' ) }
 							className="edit-site-layout__view-mode-toggle"
@@ -159,6 +166,7 @@ export const SiteHubMobile = memo(
 					<HStack>
 						<div className="edit-site-site-hub__title">
 							<Button
+								__next40pxDefaultSize
 								variant="link"
 								href={ homeUrl }
 								target="_blank"
@@ -173,6 +181,7 @@ export const SiteHubMobile = memo(
 							className="edit-site-site-hub__actions"
 						>
 							<Button
+								__next40pxDefaultSize
 								className="edit-site-site-hub_toggle-command-center"
 								icon={ search }
 								onClick={ () => openCommandCenter() }
diff --git a/packages/edit-site/src/components/site-icon/style.scss b/packages/edit-site/src/components/site-icon/style.scss
index a461b43476fe5..a6cc7ad27fe5d 100644
--- a/packages/edit-site/src/components/site-icon/style.scss
+++ b/packages/edit-site/src/components/site-icon/style.scss
@@ -1,9 +1,11 @@
 .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 * 0.5; // 6px.
+		padding: $grid-unit-15;
 	}
 }
 
@@ -12,6 +14,7 @@
 	height: 100%;
 	object-fit: cover;
 	background: #333;
+	aspect-ratio: 1 / 1;
 
 	.edit-site-layout.is-full-canvas & {
 		border-radius: 0;
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 0000000000000..2c1b627c6d0c6
--- /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/constants.ts b/packages/edit-site/src/components/style-book/constants.ts
new file mode 100644
index 0000000000000..fc06d8f1409f0
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/constants.ts
@@ -0,0 +1,191 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { StyleBookCategory } from './types';
+
+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: 'text',
+		title: __( 'Text' ),
+		blocks: [
+			'core/post-content',
+			'core/home-link',
+			'core/navigation-link',
+		],
+	},
+	{
+		slug: 'colors',
+		title: __( 'Colors' ),
+		blocks: [ 'custom/colors' ],
+	},
+	{
+		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: [],
+	},
+];
+
+// 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 = `
+	// 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;
+		padding: 32px !important;
+	}
+
+	.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: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__examples.is-wide .edit-site-style-book__example {
+		flex-direction: row;
+	}
+	
+	.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: 11px;
+		font-weight: 500;
+		line-height: normal;
+		margin: 0;
+		text-align: left;
+		text-transform: uppercase;
+	}
+	
+	.edit-site-style-book__subcategory-title {
+		font-size: 16px;
+		margin-bottom: 40px;
+    	border-bottom: 1px solid #ddd;
+    	padding-bottom: 8px;
+	}
+
+	.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {
+		text-align: right;
+		width: 120px;
+	}
+
+	.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;
+	}
+
+	.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {
+		margin-top: 0;
+	}
+	.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {
+		margin-bottom: 0;
+	}
+`;
diff --git a/packages/edit-site/src/components/style-book/examples.ts b/packages/edit-site/src/components/style-book/examples.ts
new file mode 100644
index 0000000000000..80807b10374c6
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/examples.ts
@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	getBlockType,
+	getBlockTypes,
+	getBlockFromExample,
+	createBlock,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import type { BlockExample } from './types';
+
+/**
+ * Returns a list of examples for registered block types.
+ *
+ * @return {BlockExample[]} An array of block examples.
+ */
+export function getExamples(): 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,
+			blocks: getBlockFromExample( blockType.name, blockType.example ),
+		} ) );
+	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,
+			} );
+		} ),
+	};
+
+	return [ headingsExample, ...nonHeadingBlockExamples ];
+}
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 0d69954461320..7b85c320e20c9 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -8,15 +8,10 @@ import clsx from 'clsx';
  */
 import {
 	Disabled,
+	Composite,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	getCategories,
-	getBlockTypes,
-	getBlockFromExample,
-	createBlock,
-} from '@wordpress/blocks';
 import {
 	BlockList,
 	privateApis as blockEditorPrivateApis,
@@ -35,6 +30,12 @@ import { ENTER, SPACE } from '@wordpress/keycodes';
  */
 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,
@@ -44,139 +45,12 @@ const {
 } = unlock( blockEditorPrivateApis );
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
-const {
-	CompositeV2: Composite,
-	CompositeItemV2: CompositeItem,
-	useCompositeStoreV2: useCompositeStore,
-	Tabs,
-} = unlock( componentsPrivateApis );
-
-// 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.
-const STYLE_BOOK_IFRAME_STYLES = `
-	.edit-site-style-book__examples {
-		max-width: 900px;
-		margin: 0 auto;
-	}
-
-	.edit-site-style-book__example {
-		border-radius: 2px;
-		cursor: pointer;
-		display: flex;
-		flex-direction: column;
-		gap: 40px;
-		margin-bottom: 40px;
-		padding: 16px;
-		width: 100%;
-		box-sizing: border-box;
-		scroll-margin-top: 32px;
-		scroll-margin-bottom: 32px;
-	}
-
-	.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: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__examples.is-wide .edit-site-style-book__example {
-		flex-direction: row;
-	}
-
-	.edit-site-style-book__example-title {
-		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-		font-size: 11px;
-		font-weight: 500;
-		line-height: normal;
-		margin: 0;
-		text-align: left;
-		text-transform: uppercase;
-	}
-
-	.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {
-		text-align: right;
-		width: 120px;
-	}
-
-	.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;
-	}
-
-	.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {
-		margin-top: 0;
-	}
-	.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {
-		margin-bottom: 0;
-	}
-`;
+const { Tabs } = unlock( componentsPrivateApis );
 
 function isObjectEmpty( object ) {
 	return ! object || Object.keys( object ).length === 0;
 }
 
-function getExamples() {
-	// 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: [
-			createBlock( 'core/heading', {
-				content: __( 'Code Is Poetry' ),
-				level: 1,
-			} ),
-			createBlock( 'core/heading', {
-				content: __( 'Code Is Poetry' ),
-				level: 2,
-			} ),
-			createBlock( 'core/heading', {
-				content: __( 'Code Is Poetry' ),
-				level: 3,
-			} ),
-			createBlock( 'core/heading', {
-				content: __( 'Code Is Poetry' ),
-				level: 4,
-			} ),
-			createBlock( 'core/heading', {
-				content: __( 'Code Is Poetry' ),
-				level: 5,
-			} ),
-		],
-	};
-
-	const otherExamples = 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,
-			blocks: getBlockFromExample( blockType.name, blockType.example ),
-		} ) );
-
-	return [ headingsExample, ...otherExamples ];
-}
-
 function StyleBook( {
 	enableResizing = true,
 	isSelected,
@@ -193,17 +67,11 @@ function StyleBook( {
 	const [ examples ] = useState( getExamples );
 	const tabs = useMemo(
 		() =>
-			getCategories()
-				.filter( ( category ) =>
-					examples.some(
-						( example ) => example.category === category.slug
-					)
+			getTopLevelStyleBookCategories().filter( ( category ) =>
+				examples.some(
+					( example ) => example.category === category.slug
 				)
-				.map( ( category ) => ( {
-					name: category.slug,
-					title: category.title,
-					icon: category.icon,
-				} ) ),
+			),
 		[ examples ]
 	);
 	const { base: baseConfig } = useContext( GlobalStylesContext );
@@ -254,24 +122,26 @@ function StyleBook( {
 				{ showTabs ? (
 					<div className="edit-site-style-book__tabs">
 						<Tabs>
-							<Tabs.TabList>
-								{ tabs.map( ( tab ) => (
-									<Tabs.Tab
-										tabId={ tab.name }
-										key={ tab.name }
-									>
-										{ tab.title }
-									</Tabs.Tab>
-								) ) }
-							</Tabs.TabList>
+							<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.name }
-									tabId={ tab.name }
+									key={ tab.slug }
+									tabId={ tab.slug }
 									focusable={ false }
 								>
 									<StyleBookBody
-										category={ tab.name }
+										category={ tab.slug }
 										examples={ examples }
 										isSelected={ isSelected }
 										onSelect={ onSelect }
@@ -338,10 +208,6 @@ const StyleBookBody = ( {
 		readonly: true,
 	};
 
-	const buttonModeStyles = onClick
-		? 'body { cursor: pointer; } body * { pointer-events: none; }'
-		: '';
-
 	return (
 		<Iframe
 			className={ clsx( 'edit-site-style-book__iframe', {
@@ -354,14 +220,9 @@ const StyleBookBody = ( {
 		>
 			<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; padding: 32px !important; }` +
-						STYLE_BOOK_IFRAME_STYLES +
-						buttonModeStyles
-				}
+				{ STYLE_BOOK_IFRAME_STYLES }
+				{ !! onClick &&
+					'body { cursor: pointer; } body * { pointer-events: none; }' }
 			</style>
 			<Examples
 				className={ clsx( 'edit-site-style-book__examples', {
@@ -388,20 +249,25 @@ const StyleBookBody = ( {
 
 const Examples = memo(
 	( { className, examples, category, label, isSelected, onSelect } ) => {
-		const compositeStore = useCompositeStore( { orientation: 'vertical' } );
+		const categoryDefinition = category
+			? getTopLevelStyleBookCategories().find(
+					( _category ) => _category.slug === category
+			  )
+			: null;
+
+		const filteredExamples = categoryDefinition
+			? getExamplesByCategory( categoryDefinition, examples )
+			: { examples };
 
 		return (
 			<Composite
-				store={ compositeStore }
+				orientation="vertical"
 				className={ className }
 				aria-label={ label }
 				role="grid"
 			>
-				{ examples
-					.filter( ( example ) =>
-						category ? example.category === category : true
-					)
-					.map( ( example ) => (
+				{ !! filteredExamples?.examples?.length &&
+					filteredExamples.examples.map( ( example ) => (
 						<Example
 							key={ example.name }
 							id={ `example-${ example.name }` }
@@ -413,11 +279,47 @@ const Examples = memo(
 							} }
 						/>
 					) ) }
+				{ !! 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 }
+				blocks={ example.blocks }
+				isSelected={ isSelected( example.name ) }
+				onClick={ () => {
+					onSelect?.( example.name );
+				} }
+			/>
+		) )
+	);
+};
+
 const Example = ( { id, title, blocks, isSelected, onClick } ) => {
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
@@ -441,7 +343,7 @@ const Example = ( { id, title, blocks, isSelected, onClick } ) => {
 	return (
 		<div role="row">
 			<div role="gridcell">
-				<CompositeItem
+				<Composite.Item
 					className={ clsx( 'edit-site-style-book__example', {
 						'is-selected': isSelected,
 					} ) }
@@ -471,7 +373,7 @@ const Example = ( { id, title, blocks, isSelected, onClick } ) => {
 							</ExperimentalBlockEditorProvider>
 						</Disabled>
 					</div>
-				</CompositeItem>
+				</Composite.Item>
 			</div>
 		</div>
 	);
diff --git a/packages/edit-site/src/components/style-book/style.scss b/packages/edit-site/src/components/style-book/style.scss
index 3b2c6ab0867db..3e0c6466438a2 100644
--- a/packages/edit-site/src/components/style-book/style.scss
+++ b/packages/edit-site/src/components/style-book/style.scss
@@ -3,13 +3,13 @@
 	// This is useful when the style book is used to fill a frame.
 	height: 100%;
 	&.is-button {
-		border-radius: $radius-block-ui * 4;
+		border-radius: $radius-large;
 	}
 }
 
 .edit-site-style-book__iframe {
 	&.is-button {
-		border-radius: $radius-block-ui * 4;
+		border-radius: $radius-large;
 	}
 	&.is-focused {
 		outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
@@ -17,12 +17,16 @@
 	}
 }
 
-.edit-site-style-book__tabs {
-	[role="tablist"] {
-		background: $white;
-		color: $gray-900;
-	}
+.edit-site-style-book__tablist-container {
+	background: $white;
+	width: 100%;
+	padding-right: 56px;
+	display: flex;
+	position: absolute;
+	z-index: 1;
+}
 
+.edit-site-style-book__tabs {
 	[role="tabpanel"] {
 		bottom: 0;
 		left: 0;
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 0000000000000..5629689e260f8
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/test/categories.js
@@ -0,0 +1,171 @@
+/**
+ * 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: 'custom/colors',
+		title: 'Colors',
+		category: 'colors',
+	},
+	{
+		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 0000000000000..4729b38b1b2bb
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/types.ts
@@ -0,0 +1,27 @@
+type Block = {
+	name: string;
+	attributes: Record< string, unknown >;
+	innerBlocks?: Block[];
+};
+
+export type StyleBookCategory = {
+	title: string;
+	slug: string;
+	blocks?: string[];
+	exclude?: string[];
+	subcategories?: StyleBookCategory[];
+};
+
+export type BlockExample = {
+	name: string;
+	title: string;
+	category: string;
+	blocks: Block | Block[];
+};
+
+export type CategoryExamples = {
+	title: string;
+	slug: string;
+	examples?: BlockExample[];
+	subcategories?: CategoryExamples[];
+};
diff --git a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
index 5c8cdfd58f630..ab6ea92bac441 100644
--- a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
+++ b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
@@ -37,10 +37,9 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 		url,
 		frontPageTemplateId,
 	} = useSelect( ( select ) => {
-		const { getSite, getUnstableBase, getEntityRecords } =
-			select( coreDataStore );
-		const siteData = getSite();
-		const base = getUnstableBase();
+		const { getEntityRecord, getEntityRecords } = select( coreDataStore );
+		const siteData = getEntityRecord( 'root', 'site' );
+		const base = getEntityRecord( 'root', '__unstableBase' );
 		const templates = getEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
 			per_page: -1,
 		} );
@@ -90,6 +89,11 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 				return undefined;
 			}
 
+			// Don't trigger resolution for multi-selected posts.
+			if ( postId && postId.includes( ',' ) ) {
+				return undefined;
+			}
+
 			const {
 				getEditedEntityRecord,
 				getEntityRecords,
diff --git a/packages/edit-site/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js b/packages/edit-site/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js
index 9f0c8dd9a0e11..d9295f83ee245 100644
--- a/packages/edit-site/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js
+++ b/packages/edit-site/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js
@@ -21,48 +21,51 @@ export default function useSyncCanvasModeWithURL() {
 		[]
 	);
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const currentCanvasMode = useRef( canvasMode );
+	const currentCanvasModeRef = useRef( canvasMode );
 	const { canvas: canvasInUrl } = params;
-	const currentCanvasInUrl = useRef( canvasInUrl );
-	const currentUrlParams = useRef( params );
+	const currentCanvasInUrlRef = useRef( canvasInUrl );
+	const currentUrlParamsRef = useRef( params );
 	useEffect( () => {
-		currentUrlParams.current = params;
+		currentUrlParamsRef.current = params;
 	}, [ params ] );
 
 	useEffect( () => {
-		currentCanvasMode.current = canvasMode;
+		currentCanvasModeRef.current = canvasMode;
 		if ( canvasMode === 'init' ) {
 			return;
 		}
 
 		if (
 			canvasMode === 'edit' &&
-			currentCanvasInUrl.current !== canvasMode
+			currentCanvasInUrlRef.current !== canvasMode
 		) {
 			history.push( {
-				...currentUrlParams.current,
+				...currentUrlParamsRef.current,
 				canvas: 'edit',
 			} );
 		}
 
 		if (
 			canvasMode === 'view' &&
-			currentCanvasInUrl.current !== undefined
+			currentCanvasInUrlRef.current !== undefined
 		) {
 			history.push( {
-				...currentUrlParams.current,
+				...currentUrlParamsRef.current,
 				canvas: undefined,
 			} );
 		}
 	}, [ canvasMode, history ] );
 
 	useEffect( () => {
-		currentCanvasInUrl.current = canvasInUrl;
-		if ( canvasInUrl !== 'edit' && currentCanvasMode.current !== 'view' ) {
+		currentCanvasInUrlRef.current = canvasInUrl;
+		if (
+			canvasInUrl !== 'edit' &&
+			currentCanvasModeRef.current !== 'view'
+		) {
 			setCanvasMode( 'view' );
 		} else if (
 			canvasInUrl === 'edit' &&
-			currentCanvasMode.current !== 'edit'
+			currentCanvasModeRef.current !== 'edit'
 		) {
 			setCanvasMode( 'edit' );
 		}
diff --git a/packages/edit-site/src/components/welcome-guide/template.js b/packages/edit-site/src/components/welcome-guide/template.js
index 0e699e6b4b242..e6568a23bb3a3 100644
--- a/packages/edit-site/src/components/welcome-guide/template.js
+++ b/packages/edit-site/src/components/welcome-guide/template.js
@@ -10,29 +10,23 @@ import { store as editorStore } from '@wordpress/editor';
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
+import useEditedEntityRecord from '../use-edited-entity-record';
 
 export default function WelcomeGuideTemplate() {
 	const { toggle } = useDispatch( preferencesStore );
 
-	const isVisible = useSelect( ( select ) => {
-		const isTemplateActive = !! select( preferencesStore ).get(
-			'core/edit-site',
-			'welcomeGuideTemplate'
-		);
-		const isEditorActive = !! select( preferencesStore ).get(
-			'core/edit-site',
-			'welcomeGuide'
-		);
-		const { isPage } = select( editSiteStore );
-		const { getCurrentPostType } = select( editorStore );
-		return (
-			isTemplateActive &&
-			! isEditorActive &&
-			isPage() &&
-			getCurrentPostType() === 'wp_template'
-		);
+	const { isLoaded, record } = useEditedEntityRecord();
+	const isPostTypeTemplate = isLoaded && record.type === 'wp_template';
+	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 && isPostTypeTemplate && hasPreviousEntity;
 
 	if ( ! isVisible ) {
 		return null;
diff --git a/packages/edit-site/src/hooks/commands/use-common-commands.js b/packages/edit-site/src/hooks/commands/use-common-commands.js
index 2b5d0d8614c95..ca6e2d1c6b45d 100644
--- a/packages/edit-site/src/hooks/commands/use-common-commands.js
+++ b/packages/edit-site/src/hooks/commands/use-common-commands.js
@@ -287,11 +287,9 @@ function useGlobalStylesOpenRevisionsCommands() {
 
 export function useCommonCommands() {
 	const homeUrl = useSelect( ( select ) => {
-		const {
-			getUnstableBase, // Site index.
-		} = select( coreStore );
-
-		return getUnstableBase()?.home;
+		// Site index.
+		return select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+			?.home;
 	}, [] );
 
 	useCommand( {
diff --git a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
index a4aa81e88393a..49613c8b4c282 100644
--- a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
+++ b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
@@ -26,7 +26,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { useSupportedStyles } from '../../components/global-styles/hooks';
 import { unlock } from '../../lock-unlock';
-import cloneDeep from '../../utils/clone-deep';
 import setNestedValue from '../../utils/set-nested-value';
 
 const { cleanEmptyObject, GlobalStylesContext } = unlock(
@@ -259,8 +258,8 @@ function PushChangesToGlobalStylesControl( {
 		if ( changes.length > 0 ) {
 			const { style: blockStyles } = attributes;
 
-			const newBlockStyles = cloneDeep( blockStyles );
-			const newUserConfig = cloneDeep( userConfig );
+			const newBlockStyles = structuredClone( blockStyles );
+			const newUserConfig = structuredClone( userConfig );
 
 			for ( const { path, value } of changes ) {
 				setNestedValue( newBlockStyles, path, undefined );
@@ -324,6 +323,7 @@ function PushChangesToGlobalStylesControl( {
 
 	return (
 		<BaseControl
+			__nextHasNoMarginBottom
 			className="edit-site-push-changes-to-global-styles-control"
 			help={ sprintf(
 				// translators: %s: Title of the block e.g. 'Heading'.
diff --git a/packages/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
index 9486f15f80289..e6e3a1ccc3aa6 100644
--- 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
@@ -11,7 +11,6 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import cloneDeep from '../../utils/clone-deep';
 import { unlock } from '../../lock-unlock';
 
 const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
@@ -91,7 +90,7 @@ export function useCurrentMergeThemeStyleVariationsWithUserConfig(
 	const propertiesAsString = properties.toString();
 
 	return useMemo( () => {
-		const clonedUserVariation = cloneDeep( userVariation );
+		const clonedUserVariation = structuredClone( userVariation );
 
 		// Get user variation and remove the settings for the given property.
 		const userVariationWithoutProperties = removePropertiesFromObject(
@@ -167,7 +166,7 @@ export const filterObjectByProperties = ( object, properties ) => {
  */
 export function isVariationWithProperties( variation, properties ) {
 	const variationWithProperties = filterObjectByProperties(
-		cloneDeep( variation ),
+		structuredClone( variation ),
 		properties
 	);
 
diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
index 922e2f6ab933a..1aceecc4d8b1f 100644
--- a/packages/edit-site/src/index.js
+++ b/packages/edit-site/src/index.js
@@ -29,7 +29,6 @@ import { unlock } from './lock-unlock';
 import App from './components/app';
 
 const {
-	registerDefaultActions,
 	registerCoreBlockBindingsSources,
 	bootstrapBlockBindingsSourcesFromServer,
 } = unlock( editorPrivateApis );
@@ -59,7 +58,6 @@ export function initializeEditor( id, settings ) {
 			enableFSEBlocks: true,
 		} );
 	}
-	registerDefaultActions();
 
 	// We dispatch actions and update the store synchronously before rendering
 	// so that we won't trigger unnecessary re-renders with useEffect.
@@ -81,8 +79,16 @@ export function initializeEditor( id, settings ) {
 		openPanels: [ 'post-status' ],
 		showBlockBreadcrumbs: true,
 		showListViewByDefault: false,
+		enableChoosePatternModal: true,
 	} );
 
+	if ( window.__experimentalMediaProcessing ) {
+		dispatch( preferencesStore ).setDefaults( 'core/media', {
+			requireApproval: true,
+			optimizeOnUpload: true,
+		} );
+	}
+
 	dispatch( editSiteStore ).updateSettings( settings );
 
 	// Keep the defaultTemplateTypes in the core/editor settings too,
diff --git a/packages/edit-site/src/posts.js b/packages/edit-site/src/posts.js
index 9e2582ac23328..78d823b56c4c1 100644
--- a/packages/edit-site/src/posts.js
+++ b/packages/edit-site/src/posts.js
@@ -72,6 +72,7 @@ export function initializePostsDashboard( id, settings ) {
 		openPanels: [ 'post-status' ],
 		showBlockBreadcrumbs: true,
 		showListViewByDefault: false,
+		enableChoosePatternModal: true,
 	} );
 
 	dispatch( editSiteStore ).updateSettings( settings );
diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js
index 3980d08bbc27b..ddef4a71d0a91 100644
--- a/packages/edit-site/src/store/selectors.js
+++ b/packages/edit-site/src/store/selectors.js
@@ -2,16 +2,19 @@
  * 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 { 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 { 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.
@@ -210,7 +213,7 @@ export const __experimentalGetInsertionPoint = createRegistrySelector(
 				version: '6.7',
 			}
 		);
-		return unlock( select( editorStore ) ).getInsertionPoint();
+		return unlock( select( editorStore ) ).getInserter();
 	}
 );
 
@@ -240,18 +243,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 ) => () => {
-		return unlock(
-			select( editorStore )
-		).getCurrentTemplateTemplateParts();
-	}
+	( 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 )
+		)
 );
 
 /**
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 3a89c67627c9a..4e9e1071e3a77 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -28,6 +28,7 @@
 @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";
@@ -90,20 +91,4 @@ body.js.site-editor-php {
 	}
 }
 
-/**
- * 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;
-	}
-}
-
 @include wordpress-admin-schemes();
diff --git a/packages/edit-site/src/utils/clone-deep.js b/packages/edit-site/src/utils/clone-deep.js
deleted file mode 100644
index 149e1df2408ea..0000000000000
--- a/packages/edit-site/src/utils/clone-deep.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Makes a copy of an object without storing any references to the original object.
- * @param {Object} object
- * @return {Object} The cloned object.
- */
-export default function cloneDeep( object ) {
-	return ! object ? {} : JSON.parse( JSON.stringify( object ) );
-}
diff --git a/packages/editor/src/store/utils/get-filtered-template-parts.js b/packages/edit-site/src/utils/get-filtered-template-parts.js
similarity index 83%
rename from packages/editor/src/store/utils/get-filtered-template-parts.js
rename to packages/edit-site/src/utils/get-filtered-template-parts.js
index af24684ace615..bba982c0717a7 100644
--- a/packages/editor/src/store/utils/get-filtered-template-parts.js
+++ b/packages/edit-site/src/utils/get-filtered-template-parts.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import memoize from 'memize';
-
 /**
  * WordPress dependencies
  */
@@ -20,7 +15,10 @@ const EMPTY_ARRAY = [];
  * @param {?Array} templateParts Available template parts.
  * @return {Array} An array of template parts and their blocks.
  */
-function getFilteredTemplatePartBlocks( blocks = EMPTY_ARRAY, templateParts ) {
+export default function getFilteredTemplatePartBlocks(
+	blocks = EMPTY_ARRAY,
+	templateParts
+) {
 	const templatePartsById = templateParts
 		? // Key template parts by their ID.
 		  templateParts.reduce(
@@ -61,9 +59,3 @@ function getFilteredTemplatePartBlocks( blocks = EMPTY_ARRAY, templateParts ) {
 
 	return result;
 }
-
-const memoizedGetFilteredTemplatePartBlocks = memoize(
-	getFilteredTemplatePartBlocks
-);
-
-export { memoizedGetFilteredTemplatePartBlocks as getFilteredTemplatePartBlocks };
diff --git a/packages/edit-site/src/utils/is-template-removable.js b/packages/edit-site/src/utils/is-template-removable.js
index 9cb1de23daab7..f81cb74b022e7 100644
--- a/packages/edit-site/src/utils/is-template-removable.js
+++ b/packages/edit-site/src/utils/is-template-removable.js
@@ -7,7 +7,7 @@ import { TEMPLATE_ORIGINS } from './constants';
  * Check if a template is removable.
  *
  * @param {Object} template The template entity to check.
- * @return {boolean} Whether the template is revertable.
+ * @return {boolean} Whether the template is removable.
  */
 export default function isTemplateRemovable( template ) {
 	if ( ! template ) {
@@ -15,6 +15,8 @@ export default function isTemplateRemovable( template ) {
 	}
 
 	return (
-		template.source === TEMPLATE_ORIGINS.custom && ! template.has_theme_file
+		template.source === TEMPLATE_ORIGINS.custom &&
+		! Boolean( template.plugin ) &&
+		! template.has_theme_file
 	);
 }
diff --git a/packages/edit-site/src/utils/is-template-revertable.js b/packages/edit-site/src/utils/is-template-revertable.js
index a6274d07ebebb..42413b06cd48e 100644
--- a/packages/edit-site/src/utils/is-template-revertable.js
+++ b/packages/edit-site/src/utils/is-template-revertable.js
@@ -15,7 +15,8 @@ export default function isTemplateRevertable( template ) {
 	}
 	/* eslint-disable camelcase */
 	return (
-		template?.source === TEMPLATE_ORIGINS.custom && template?.has_theme_file
+		template?.source === TEMPLATE_ORIGINS.custom &&
+		( Boolean( template?.plugin ) || template?.has_theme_file )
 	);
 	/* eslint-enable camelcase */
 }
diff --git a/packages/editor/src/store/utils/test/get-filtered-template-parts.js b/packages/edit-site/src/utils/test/get-filtered-template-parts.js
similarity index 55%
rename from packages/editor/src/store/utils/test/get-filtered-template-parts.js
rename to packages/edit-site/src/utils/test/get-filtered-template-parts.js
index bf9fad5a1cf35..0d5c283633021 100644
--- a/packages/editor/src/store/utils/test/get-filtered-template-parts.js
+++ b/packages/edit-site/src/utils/test/get-filtered-template-parts.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { getFilteredTemplatePartBlocks } from '../get-filtered-template-parts';
+import getFilteredTemplatePartBlocks from '../get-filtered-template-parts';
 
 const NESTED_BLOCKS = [
 	{
@@ -98,16 +98,6 @@ const FLATTENED_BLOCKS = [
 	},
 ];
 
-const SINGLE_TEMPLATE_PART_BLOCK = {
-	clientId: '1',
-	name: 'core/template-part',
-	innerBlocks: [],
-	attributes: {
-		slug: 'aside',
-		theme: 'my-theme',
-	},
-};
-
 const TEMPLATE_PARTS = [
 	{
 		id: 'my-theme//header',
@@ -134,56 +124,4 @@ describe( 'getFilteredTemplatePartBlocks', () => {
 		);
 		expect( flattenedFilteredTemplateParts ).toEqual( FLATTENED_BLOCKS );
 	} );
-
-	it( 'returns a cached result when passed the same params', () => {
-		// Clear the cache and call the function twice.
-		getFilteredTemplatePartBlocks.clear();
-		getFilteredTemplatePartBlocks( NESTED_BLOCKS, TEMPLATE_PARTS );
-		expect(
-			getFilteredTemplatePartBlocks( NESTED_BLOCKS, TEMPLATE_PARTS )
-		).toEqual( FLATTENED_BLOCKS );
-
-		// The function has been called twice with the same params, so the cache size should be 1.
-		/**
-		 * TODO what should be done about this?
-		 * Can it be tested another way?
-		 * Is it necessary?
-		 */
-		// const [ , , originalSize ] =
-		// 	getFilteredTemplatePartBlocks.getCache();
-		// expect( originalSize ).toBe( 1 );
-
-		// Call the function again, with different params.
-		expect(
-			getFilteredTemplatePartBlocks(
-				[ SINGLE_TEMPLATE_PART_BLOCK ],
-				TEMPLATE_PARTS
-			)
-		).toEqual( [
-			{
-				block: {
-					clientId: '1',
-					name: 'core/template-part',
-					attributes: {
-						slug: 'aside',
-						theme: 'my-theme',
-					},
-				},
-				templatePart: {
-					id: 'my-theme//aside',
-					slug: 'aside',
-					theme: 'my-theme',
-				},
-			},
-		] );
-
-		// The function has been called with different params, so the cache size should now be 2.
-		/**
-		 * TODO what should be done about this?
-		 * Can it be tested another way?
-		 * Is it necessary?
-		 */
-		// const [ , , finalSize ] = getFilteredTemplatePartBlocks.getCache();
-		// expect( finalSize ).toBe( 2 );
-	} );
 } );
diff --git a/packages/edit-widgets/CHANGELOG.md b/packages/edit-widgets/CHANGELOG.md
index 9eb8a70690763..80fde2bfec86e 100644
--- a/packages/edit-widgets/CHANGELOG.md
+++ b/packages/edit-widgets/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json
index f3db642de980e..e9d0f18df460a 100644
--- a/packages/edit-widgets/package.json
+++ b/packages/edit-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-widgets",
-	"version": "6.3.0",
+	"version": "6.9.0",
 	"description": "Widgets Page module for WordPress..",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-widgets/src/components/error-boundary/index.js b/packages/edit-widgets/src/components/error-boundary/index.js
index 5bb7a44fea413..ff12bfe5fdf47 100644
--- a/packages/edit-widgets/src/components/error-boundary/index.js
+++ b/packages/edit-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 __next40pxDefaultSize variant="secondary" ref={ ref }>
 			{ children }
 		</Button>
 	);
diff --git a/packages/edit-widgets/src/components/error-boundary/style.scss b/packages/edit-widgets/src/components/error-boundary/style.scss
index c1605b42a5ea8..b909b79dc1d30 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/header/index.js b/packages/edit-widgets/src/components/header/index.js
index 0aadec83d5d2f..80dda479d59ed 100644
--- a/packages/edit-widgets/src/components/header/index.js
+++ b/packages/edit-widgets/src/components/header/index.js
@@ -61,8 +61,8 @@ function Header() {
 					) }
 				</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 6e5d8de8142f4..7bd3c41a6a22a 100644
--- a/packages/edit-widgets/src/components/header/style.scss
+++ b/packages/edit-widgets/src/components/header/style.scss
@@ -82,6 +82,7 @@
 	padding-right: $grid-unit-10;
 	padding-left: $grid-unit-20;
 	overflow: hidden;
+	height: $header-height;
 }
 
 .edit-widgets-header__title {
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 2374b35ad2d69..156a15e2f460c 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
@@ -44,6 +44,7 @@ export default function InserterSidebar() {
 		>
 			<TagName className="edit-widgets-layout__inserter-panel-header">
 				<Button
+					__next40pxDefaultSize
 					icon={ close }
 					onClick={ closeInserter }
 					label={ __( 'Close block inserter' ) }
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 6aa2123a6774a..1bb850393ad02 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
@@ -51,6 +51,7 @@ export default function ListViewSidebar() {
 			<div className="edit-widgets-editor__list-view-panel-header">
 				<strong>{ __( 'List View' ) }</strong>
 				<Button
+					__next40pxDefaultSize
 					icon={ closeSmall }
 					label={ __( 'Close' ) }
 					onClick={ closeListView }
diff --git a/packages/edit-widgets/src/components/sidebar/index.js b/packages/edit-widgets/src/components/sidebar/index.js
index f08ee81a0d19c..79a47b18c7bf1 100644
--- a/packages/edit-widgets/src/components/sidebar/index.js
+++ b/packages/edit-widgets/src/components/sidebar/index.js
@@ -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';
 
@@ -192,10 +192,10 @@ export default function Sidebar() {
 
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
-	// `newSelectedTabId` could technically be falsey if no tab is selected (i.e.
+	// `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 falsey handling.
+	// below, so we shouldn't need any additional falsy handling.
 	const onTabSelect = useCallback(
 		( newSelectedTabId ) => {
 			if ( !! newSelectedTabId ) {
diff --git a/packages/edit-widgets/src/components/sidebar/widget-areas.js b/packages/edit-widgets/src/components/sidebar/widget-areas.js
index 98ce523d6e4fe..c7b49c10b9746 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/welcome-guide/index.js b/packages/edit-widgets/src/components/welcome-guide/index.js
index 51244956286d8..bd06234e399b5 100644
--- a/packages/edit-widgets/src/components/welcome-guide/index.js
+++ b/packages/edit-widgets/src/components/welcome-guide/index.js
@@ -172,16 +172,20 @@ export default function WelcomeGuide() {
 								{ __( 'Learn how to use the block editor' ) }
 							</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/documentation/article/wordpress-block-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 a9024da1f0074..e1bd7a6b12f1e 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
@@ -45,7 +45,7 @@ export default function WidgetAreasBlockEditorContent( {
 				<KeyboardShortcuts />
 				<EditorStyles
 					styles={ styles }
-					scope=".editor-styles-wrapper"
+					scope=":where(.editor-styles-wrapper)"
 				/>
 				<BlockSelectionClearer>
 					<WritingFlow>
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 6d014a589252d..af844fe9da4fe 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
@@ -5,11 +5,7 @@ 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 { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
@@ -37,9 +33,9 @@ export default function WidgetAreasBlockEditorProvider( {
 	children,
 	...props
 } ) {
-	const mediaPermissions = useResourcePermissions( 'media' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
+		hasUploadPermissions,
 		reusableBlocks,
 		isFixedToolbarActive,
 		keepCaretInsideBlock,
@@ -55,6 +51,11 @@ export default function WidgetAreasBlockEditorProvider( {
 			? getEntityRecord( 'root', 'site' )
 			: undefined;
 		return {
+			hasUploadPermissions:
+				canUser( 'create', {
+					kind: 'root',
+					name: 'media',
+				} ) ?? true,
 			reusableBlocks: ALLOW_REUSABLE_BLOCKS
 				? getEntityRecords( 'postType', 'wp_block' )
 				: EMPTY_ARRAY,
@@ -74,7 +75,7 @@ export default function WidgetAreasBlockEditorProvider( {
 
 	const settings = useMemo( () => {
 		let mediaUploadBlockEditor;
-		if ( mediaPermissions.canCreate ) {
+		if ( hasUploadPermissions ) {
 			mediaUploadBlockEditor = ( { onError, ...argumentsObject } ) => {
 				uploadMedia( {
 					wpAllowedMimeTypes: blockEditorSettings.allowedMimeTypes,
@@ -95,11 +96,11 @@ export default function WidgetAreasBlockEditorProvider( {
 			pageForPosts,
 		};
 	}, [
+		hasUploadPermissions,
 		blockEditorSettings,
 		isFixedToolbarActive,
 		isLargeViewport,
 		keepCaretInsideBlock,
-		mediaPermissions.canCreate,
 		reusableBlocks,
 		setIsInserterOpened,
 		pageOnFront,
diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md
index 61bc9b796768b..dbd2884ab8856 100644
--- a/packages/editor/CHANGELOG.md
+++ b/packages/editor/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)).
diff --git a/packages/editor/README.md b/packages/editor/README.md
index 89ea15ef37849..2acb98ef13642 100644
--- a/packages/editor/README.md
+++ b/packages/editor/README.md
@@ -266,7 +266,7 @@ _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_ `import("@wordpress/components").IconType`: An icon for the document, defaulting to an icon for document or template 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_
 
@@ -862,6 +862,43 @@ _Returns_
 
 -   `Component`: The component to be rendered.
 
+### 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 = () => (
+	<PreviewDropdownMenuItem icon={ external } onClick={ onPreviewClick }>
+		{ __( 'Preview in new tab' ) }
+	</PreviewDropdownMenuItem>
+);
+registerPlugin( 'external-preview-menu-item', {
+	render: ExternalPreviewMenuItem,
+} );
+```
+
+_Parameters_
+
+-   _props_ `Object`: Component properties.
+-   _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_
+
+-   `Component`: 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:
@@ -1434,6 +1471,10 @@ Undocumented declaration.
 
 Displays the Post Trash Button and Confirm Dialog in the Editor.
 
+_Parameters_
+
+-   _An_ `?{onActionPerformed: Object}`: object containing the onActionPerformed function.
+
 _Returns_
 
 -   `JSX.Element|null`: The rendered PostTrash component.
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 6ecc00e5dccc3..8781b0b992d94 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "14.3.0",
+	"version": "14.9.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -47,6 +47,7 @@
 		"@wordpress/deprecated": "file:../deprecated",
 		"@wordpress/dom": "file:../dom",
 		"@wordpress/element": "file:../element",
+		"@wordpress/fields": "file:../fields",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
@@ -75,7 +76,8 @@
 		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0",
-		"remove-accents": "^0.5.0"
+		"remove-accents": "^0.5.0",
+		"uuid": "^9.0.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
diff --git a/packages/editor/src/bindings/api.js b/packages/editor/src/bindings/api.js
index 2cfed5168a143..84003fab7eaf7 100644
--- a/packages/editor/src/bindings/api.js
+++ b/packages/editor/src/bindings/api.js
@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import {
-	privateApis as blocksPrivateApis,
 	store as blocksStore,
+	registerBlockBindingsSource,
 } from '@wordpress/blocks';
 import { dispatch } from '@wordpress/data';
 
@@ -25,7 +25,6 @@ import { unlock } from '../lock-unlock';
  * ```
  */
 export function registerCoreBlockBindingsSources() {
-	const { registerBlockBindingsSource } = unlock( blocksPrivateApis );
 	registerBlockBindingsSource( patternOverrides );
 	registerBlockBindingsSource( postMeta );
 }
diff --git a/packages/editor/src/bindings/pattern-overrides.js b/packages/editor/src/bindings/pattern-overrides.js
index 88c6c73bdc61c..baa1f72f47694 100644
--- a/packages/editor/src/bindings/pattern-overrides.js
+++ b/packages/editor/src/bindings/pattern-overrides.js
@@ -7,9 +7,9 @@ const CONTENT = 'content';
 
 export default {
 	name: 'core/pattern-overrides',
-	getValues( { registry, clientId, context, bindings } ) {
+	getValues( { select, clientId, context, bindings } ) {
 		const patternOverridesContent = context[ 'pattern/overrides' ];
-		const { getBlockAttributes } = registry.select( blockEditorStore );
+		const { getBlockAttributes } = select( blockEditorStore );
 		const currentBlockAttributes = getBlockAttributes( clientId );
 
 		const overridesValues = {};
@@ -32,9 +32,9 @@ export default {
 		}
 		return overridesValues;
 	},
-	setValues( { registry, clientId, bindings } ) {
+	setValues( { select, dispatch, clientId, bindings } ) {
 		const { getBlockAttributes, getBlockParentsByBlockName, getBlocks } =
-			registry.select( blockEditorStore );
+			select( blockEditorStore );
 		const currentBlockAttributes = getBlockAttributes( clientId );
 		const blockName = currentBlockAttributes?.metadata?.name;
 		if ( ! blockName ) {
@@ -61,12 +61,10 @@ export default {
 			const syncBlocksWithSameName = ( blocks ) => {
 				for ( const block of blocks ) {
 					if ( block.attributes?.metadata?.name === blockName ) {
-						registry
-							.dispatch( blockEditorStore )
-							.updateBlockAttributes(
-								block.clientId,
-								attributes
-							);
+						dispatch( blockEditorStore ).updateBlockAttributes(
+							block.clientId,
+							attributes
+						);
 					}
 					syncBlocksWithSameName( block.innerBlocks );
 				}
@@ -77,27 +75,26 @@ export default {
 		}
 		const currentBindingValue =
 			getBlockAttributes( patternClientId )?.[ CONTENT ];
-		registry
-			.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;
-							},
-							{}
-						),
-					},
+
+		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
index aafc784a21bd4..9198ac0fe41e1 100644
--- a/packages/editor/src/bindings/post-meta.js
+++ b/packages/editor/src/bindings/post-meta.js
@@ -7,36 +7,99 @@ 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 ),
+			};
+		}
+	} );
+
+	if ( ! Object.keys( metaFields || {} ).length ) {
+		return null;
+	}
+
+	return metaFields;
+}
 
 export default {
 	name: 'core/post-meta',
-	getPlaceholder( { args } ) {
-		return args.key;
-	},
-	getValues( { registry, context, bindings } ) {
-		const meta = registry
-			.select( coreDataStore )
-			.getEditedEntityRecord(
-				'postType',
-				context?.postType,
-				context?.postId
-			)?.meta;
+	getValues( { select, context, bindings } ) {
+		const metaFields = getPostMetaFields( select, context );
+
 		const newValues = {};
 		for ( const [ attributeName, source ] of Object.entries( bindings ) ) {
-			newValues[ attributeName ] = meta?.[ source.args.key ];
+			// 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( { registry, context, bindings } ) {
+	setValues( { dispatch, context, bindings } ) {
 		const newMeta = {};
 		Object.values( bindings ).forEach( ( { args, newValue } ) => {
 			newMeta[ args.key ] = newValue;
 		} );
-		registry
-			.dispatch( coreDataStore )
-			.editEntityRecord( 'postType', context?.postType, context?.postId, {
+
+		dispatch( coreDataStore ).editEntityRecord(
+			'postType',
+			context?.postType,
+			context?.postId,
+			{
 				meta: newMeta,
-			} );
+			}
+		);
 	},
 	canUserEditValue( { select, context, args } ) {
 		// Lock editing in query loop.
@@ -52,14 +115,16 @@ export default {
 			return false;
 		}
 
-		// Check that the custom field is not protected and available in the REST API.
-		const isFieldExposed = !! select( coreDataStore ).getEntityRecord(
-			'postType',
-			postType,
-			context?.postId
-		)?.meta?.[ args.key ];
-
-		if ( ! isFieldExposed ) {
+		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;
 		}
 
@@ -75,4 +140,7 @@ export default {
 
 		return true;
 	},
+	getFieldsList( { select, context } ) {
+		return getPostMetaFields( select, context );
+	},
 };
diff --git a/packages/editor/src/components/block-manager/index.js b/packages/editor/src/components/block-manager/index.js
index 910eeda4470b0..4a1145839976f 100644
--- a/packages/editor/src/components/block-manager/index.js
+++ b/packages/editor/src/components/block-manager/index.js
@@ -2,11 +2,11 @@
  * WordPress dependencies
  */
 import { store as blocksStore } from '@wordpress/blocks';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { SearchControl, Button } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useEffect, useState } from '@wordpress/element';
-import { useDebounce, compose } from '@wordpress/compose';
+import { useDebounce } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import { store as preferencesStore } from '@wordpress/preferences';
 
@@ -17,21 +17,48 @@ import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 import BlockManagerCategory from './category';
 
-function BlockManager( {
-	blockTypes,
-	categories,
-	hasBlockSupport,
-	isMatchingSearchTerm,
-	numberOfHiddenBlocks,
-	enableAllBlockTypes,
-} ) {
+export default function BlockManager() {
 	const debouncedSpeak = useDebounce( speak, 500 );
 	const [ search, setSearch ] = useState( '' );
+	const { showBlockTypes } = unlock( useDispatch( editorStore ) );
 
-	// 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(
+	const {
+		blockTypes,
+		categories,
+		hasBlockSupport,
+		isMatchingSearchTerm,
+		numberOfHiddenBlocks,
+	} = useSelect( ( select ) => {
+		// 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 = select( blocksStore ).getBlockTypes();
+		const hiddenBlockTypes = (
+			select( preferencesStore ).get( 'core', 'hiddenBlockTypes' ) ?? []
+		).filter( ( hiddenBlock ) => {
+			return _blockTypes.some(
+				( registeredBlock ) => registeredBlock.name === hiddenBlock
+			);
+		} );
+
+		return {
+			blockTypes: _blockTypes,
+			categories: select( blocksStore ).getCategories(),
+			hasBlockSupport: select( blocksStore ).hasBlockSupport,
+			isMatchingSearchTerm: select( blocksStore ).isMatchingSearchTerm,
+			numberOfHiddenBlocks:
+				Array.isArray( hiddenBlockTypes ) && hiddenBlockTypes.length,
+		};
+	}, [] );
+
+	function enableAllBlockTypes( newBlockTypes ) {
+		const blockNames = newBlockTypes.map( ( { name } ) => name );
+		showBlockTypes( blockNames );
+	}
+
+	const filteredBlockTypes = blockTypes.filter(
 		( blockType ) =>
 			hasBlockSupport( blockType, 'inserter', true ) &&
 			( ! search || isMatchingSearchTerm( blockType, search ) ) &&
@@ -44,14 +71,14 @@ function BlockManager( {
 		if ( ! search ) {
 			return;
 		}
-		const count = blockTypes.length;
+		const count = filteredBlockTypes.length;
 		const resultsFoundMessage = sprintf(
 			/* translators: %d: number of results. */
 			_n( '%d result found.', '%d results found.', count ),
 			count
 		);
 		debouncedSpeak( resultsFoundMessage );
-	}, [ blockTypes.length, search, debouncedSpeak ] );
+	}, [ filteredBlockTypes?.length, search, debouncedSpeak ] );
 
 	return (
 		<div className="editor-block-manager__content">
@@ -67,8 +94,11 @@ function BlockManager( {
 						numberOfHiddenBlocks
 					) }
 					<Button
+						__next40pxDefaultSize
 						variant="link"
-						onClick={ () => enableAllBlockTypes( blockTypes ) }
+						onClick={ () =>
+							enableAllBlockTypes( filteredBlockTypes )
+						}
 					>
 						{ __( 'Reset' ) }
 					</Button>
@@ -88,7 +118,7 @@ function BlockManager( {
 				aria-label={ __( 'Available block types' ) }
 				className="editor-block-manager__results"
 			>
-				{ blockTypes.length === 0 && (
+				{ filteredBlockTypes.length === 0 && (
 					<p className="editor-block-manager__no-results">
 						{ __( 'No blocks found.' ) }
 					</p>
@@ -97,7 +127,7 @@ function BlockManager( {
 					<BlockManagerCategory
 						key={ category.slug }
 						title={ category.title }
-						blockTypes={ blockTypes.filter(
+						blockTypes={ filteredBlockTypes.filter(
 							( blockType ) =>
 								blockType.category === category.slug
 						) }
@@ -105,7 +135,7 @@ function BlockManager( {
 				) ) }
 				<BlockManagerCategory
 					title={ __( 'Uncategorized' ) }
-					blockTypes={ blockTypes.filter(
+					blockTypes={ filteredBlockTypes.filter(
 						( { category } ) => ! category
 					) }
 				/>
@@ -113,48 +143,3 @@ function BlockManager( {
 		</div>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		const {
-			getBlockTypes,
-			getCategories,
-			hasBlockSupport,
-			isMatchingSearchTerm,
-		} = select( blocksStore );
-		const { get } = select( preferencesStore );
-
-		// 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 = (
-			get( 'core', 'hiddenBlockTypes' ) ?? []
-		).filter( ( hiddenBlock ) => {
-			return blockTypes.some(
-				( registeredBlock ) => registeredBlock.name === hiddenBlock
-			);
-		} );
-		const numberOfHiddenBlocks =
-			Array.isArray( hiddenBlockTypes ) && hiddenBlockTypes.length;
-
-		return {
-			blockTypes,
-			categories: getCategories(),
-			hasBlockSupport,
-			isMatchingSearchTerm,
-			numberOfHiddenBlocks,
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { showBlockTypes } = unlock( dispatch( editorStore ) );
-		return {
-			enableAllBlockTypes: ( blockTypes ) => {
-				const blockNames = blockTypes.map( ( { name } ) => name );
-				showBlockTypes( blockNames );
-			},
-		};
-	} ),
-] )( BlockManager );
diff --git a/packages/editor/src/components/block-manager/style.scss b/packages/editor/src/components/block-manager/style.scss
index 62e5c9d60cb17..411ee9faf34f7 100644
--- a/packages/editor/src/components/block-manager/style.scss
+++ b/packages/editor/src/components/block-manager/style.scss
@@ -9,8 +9,8 @@
 }
 
 .editor-block-manager__disabled-blocks-count {
-	border: 1px solid $gray-300;
-	border-width: 1px 0;
+	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;
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
index b5e93659a4b7a..af0e9b30ae83b 100644
--- 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
@@ -10,28 +10,27 @@ import {
 import { store as coreStore } from '@wordpress/core-data';
 import { __experimentalText as Text, MenuItem } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+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 {
-				getBlockEditingMode,
 				getBlockParentsByBlockName,
 				getSettings,
 				getBlockAttributes,
+				getBlockParents,
 			} = select( blockEditorStore );
-			const contentOnly =
-				getBlockEditingMode( clientId ) === 'contentOnly';
-			if ( ! contentOnly ) {
-				return {};
-			}
+			const { getCurrentTemplateId, getRenderingMode } =
+				select( editorStore );
 			const patternParent = getBlockParentsByBlockName(
 				clientId,
 				'core/block',
@@ -45,19 +44,20 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
 					'wp_block',
 					getBlockAttributes( patternParent ).ref
 				);
-			} else {
-				const { getCurrentTemplateId } = select( editorStore );
-				const templateId = getCurrentTemplateId();
-				const { getContentLockingParent } = unlock(
-					select( blockEditorStore )
+			} else if (
+				getRenderingMode() === 'template-locked' &&
+				! getBlockParents( clientId ).some( ( parent ) =>
+					postContentBlocks.includes( parent )
+				)
+			) {
+				record = select( coreStore ).getEntityRecord(
+					'postType',
+					'wp_template',
+					getCurrentTemplateId()
 				);
-				if ( ! getContentLockingParent( clientId ) && templateId ) {
-					record = select( coreStore ).getEntityRecord(
-						'postType',
-						'wp_template',
-						templateId
-					);
-				}
+			}
+			if ( ! record ) {
+				return {};
 			}
 			const _canEditTemplates = select( coreStore ).canUser( 'create', {
 				kind: 'postType',
@@ -70,7 +70,7 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
 					getSettings().onNavigateToEntityRecord,
 			};
 		},
-		[ clientId ]
+		[ clientId, postContentBlocks ]
 	);
 
 	if ( ! entity ) {
@@ -137,27 +137,23 @@ function TemplateLockContentOnlyMenuItems( { clientId, onClose } ) {
 	);
 	const blockDisplayInformation =
 		useBlockDisplayInformation( contentLockingParent );
-	// Disable reason: We're using a hook here so it has to be on top-level.
-	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
-	const { modifyContentLockBlock, selectBlock } = unlock(
-		useDispatch( blockEditorStore )
-	);
-
+	const blockEditorActions = useDispatch( blockEditorStore );
 	if ( ! blockDisplayInformation?.title ) {
 		return null;
 	}
 
+	const { modifyContentLockBlock } = unlock( blockEditorActions );
+
 	return (
 		<>
 			<BlockSettingsMenuFirstItem>
 				<MenuItem
 					onClick={ () => {
-						selectBlock( contentLockingParent );
 						modifyContentLockBlock( contentLockingParent );
 						onClose();
 					} }
 				>
-					{ __( 'Unlock' ) }
+					{ _x( 'Unlock', 'Unlock content locked blocks' ) }
 				</MenuItem>
 			</BlockSettingsMenuFirstItem>
 			<Text
diff --git a/packages/editor/src/components/blog-title/index.js b/packages/editor/src/components/blog-title/index.js
index 1356edf9724e1..aee2a7f049eb0 100644
--- a/packages/editor/src/components/blog-title/index.js
+++ b/packages/editor/src/components/blog-title/index.js
@@ -111,7 +111,7 @@ export default function BlogTitle() {
 							onClose={ onClose }
 						/>
 						<InputControl
-							placeholder={ __( 'No Title' ) }
+							placeholder={ __( 'No title' ) }
 							size="__unstable-large"
 							value={ postsPageTitle }
 							onChange={ debounce( setPostsPageTitle, 300 ) }
diff --git a/packages/editor/src/components/collapsible-block-toolbar/index.js b/packages/editor/src/components/collapsible-block-toolbar/index.js
index 87d9b6473d8b6..cafbfecb72516 100644
--- a/packages/editor/src/components/collapsible-block-toolbar/index.js
+++ b/packages/editor/src/components/collapsible-block-toolbar/index.js
@@ -24,7 +24,7 @@ import { unlock } from '../../lock-unlock';
 
 const { useHasBlockToolbar } = unlock( blockEditorPrivateApis );
 
-function CollapsableBlockToolbar( { isCollapsed, onToggle } ) {
+export default function CollapsibleBlockToolbar( { isCollapsed, onToggle } ) {
 	const { blockSelectionStart } = useSelect( ( select ) => {
 		return {
 			blockSelectionStart:
@@ -73,5 +73,3 @@ function CollapsableBlockToolbar( { isCollapsed, onToggle } ) {
 		</>
 	);
 }
-
-export default CollapsableBlockToolbar;
diff --git a/packages/editor/src/components/collapsible-block-toolbar/style.scss b/packages/editor/src/components/collapsible-block-toolbar/style.scss
index 18fdc55668144..f559e1a055cdc 100644
--- a/packages/editor/src/components/collapsible-block-toolbar/style.scss
+++ b/packages/editor/src/components/collapsible-block-toolbar/style.scss
@@ -77,6 +77,3 @@
 	}
 }
 
-.editor-collapsible-block-toolbar__toggle {
-	margin-left: 2px; // Allow focus ring to be fully visible
-}
diff --git a/packages/editor/src/components/commands/index.js b/packages/editor/src/components/commands/index.js
index 460a595234e59..b1471e2558341 100644
--- a/packages/editor/src/components/commands/index.js
+++ b/packages/editor/src/components/commands/index.js
@@ -89,7 +89,8 @@ function useEditorCommandLoader() {
 		name: 'core/open-shortcut-help',
 		label: __( 'Keyboard shortcuts' ),
 		icon: keyboard,
-		callback: () => {
+		callback: ( { close } ) => {
+			close();
 			openModal( 'editor/keyboard-shortcut-help' );
 		},
 	} );
@@ -108,7 +109,8 @@ function useEditorCommandLoader() {
 	commands.push( {
 		name: 'core/open-preferences',
 		label: __( 'Editor preferences' ),
-		callback: () => {
+		callback: ( { close } ) => {
+			close();
 			openModal( 'editor/preferences' );
 		},
 	} );
diff --git a/packages/editor/src/components/create-template-part-modal/index.js b/packages/editor/src/components/create-template-part-modal/index.js
index a4b6c332cd800..63e3830295c37 100644
--- a/packages/editor/src/components/create-template-part-modal/index.js
+++ b/packages/editor/src/components/create-template-part-modal/index.js
@@ -143,6 +143,7 @@ export function CreateTemplatePartModalContents( {
 					required
 				/>
 				<BaseControl
+					__nextHasNoMarginBottom
 					label={ __( 'Area' ) }
 					id={ `editor-create-template-part-modal__area-selection-${ instanceId }` }
 					className="editor-create-template-part-modal__area-base-control"
diff --git a/packages/editor/src/components/create-template-part-modal/style.scss b/packages/editor/src/components/create-template-part-modal/style.scss
index 85df0270e3a5a..be15e8d76d536 100644
--- a/packages/editor/src/components/create-template-part-modal/style.scss
+++ b/packages/editor/src/components/create-template-part-modal/style.scss
@@ -5,7 +5,7 @@
 .editor-create-template-part-modal__area-radio-group {
 	width: 100%;
 	border: $border-width solid $gray-700;
-	border-radius: 2px;
+	border-radius: $radius-small;
 
 	.components-button.editor-create-template-part-modal__area-radio {
 		display: block;
diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js
index 34cb68de78515..904a877734cef 100644
--- a/packages/editor/src/components/document-bar/index.js
+++ b/packages/editor/src/components/document-bar/index.js
@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { __, isRTL, sprintf } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
@@ -28,18 +28,8 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import { TEMPLATE_POST_TYPES, GLOBAL_POST_TYPES } from '../../store/constants';
 import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 
-const TYPE_LABELS = {
-	// translators: 1: Pattern title.
-	wp_pattern: __( 'Editing pattern: %s' ),
-	// translators: 1: Navigation menu title.
-	wp_navigation: __( 'Editing navigation menu: %s' ),
-	// translators: 1: Template title.
-	wp_template: __( 'Editing template: %s' ),
-	// translators: 1: Template part title.
-	wp_template_part: __( 'Editing template part: %s' ),
-};
+/** @typedef {import("@wordpress/components").IconType} IconType */
 
 const MotionButton = motion( Button );
 
@@ -52,21 +42,21 @@ const MotionButton = motion( Button );
  * ```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 {import("@wordpress/components").IconType} props.icon  An icon for the document, defaulting to an icon for document
- *                                                               or template currently being edited.
+ * @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 {JSX.Element} The rendered DocumentBar component.
  */
 export default function DocumentBar( props ) {
 	const {
 		postType,
+		postTypeLabel,
 		documentTitle,
 		isNotFound,
 		isUnsyncedPattern,
-		templateIcon,
 		templateTitle,
 		onNavigateToPreviousEntityRecord,
 	} = useSelect( ( select ) => {
@@ -76,8 +66,11 @@ export default function DocumentBar( props ) {
 			getEditorSettings,
 			__experimentalGetTemplateInfo: getTemplateInfo,
 		} = select( editorStore );
-		const { getEditedEntityRecord, isResolving: isResolvingSelector } =
-			select( coreStore );
+		const {
+			getEditedEntityRecord,
+			getPostType,
+			isResolving: isResolvingSelector,
+		} = select( coreStore );
 		const _postType = getCurrentPostType();
 		const _postId = getCurrentPostId();
 		const _document = getEditedEntityRecord(
@@ -86,8 +79,11 @@ export default function DocumentBar( props ) {
 			_postId
 		);
 		const _templateInfo = getTemplateInfo( _document );
+		const _postTypeLabel = getPostType( _postType )?.labels?.singular_name;
+
 		return {
 			postType: _postType,
+			postTypeLabel: _postTypeLabel,
 			documentTitle: _document.title,
 			isNotFound:
 				! _document &&
@@ -98,12 +94,6 @@ export default function DocumentBar( props ) {
 					_postId
 				),
 			isUnsyncedPattern: _document?.wp_pattern_sync_status === 'unsynced',
-			templateIcon: unlock( select( editorStore ) ).getPostIcon(
-				_postType,
-				{
-					area: _document?.area,
-				}
-			),
 			templateTitle: _templateInfo.title,
 			onNavigateToPreviousEntityRecord:
 				getEditorSettings().onNavigateToPreviousEntityRecord,
@@ -118,11 +108,11 @@ export default function DocumentBar( props ) {
 	const hasBackButton = !! onNavigateToPreviousEntityRecord;
 	const entityTitle = isTemplate ? templateTitle : documentTitle;
 	const title = props.title || entityTitle;
-	const icon = props.icon || templateIcon;
+	const icon = props.icon;
 
-	const mounted = useRef( false );
+	const mountedRef = useRef( false );
 	useEffect( () => {
-		mounted.current = true;
+		mountedRef.current = true;
 	}, [] );
 
 	return (
@@ -143,7 +133,7 @@ export default function DocumentBar( props ) {
 						} }
 						size="compact"
 						initial={
-							mounted.current
+							mountedRef.current
 								? { opacity: 0, transform: 'translateX(15%)' }
 								: false // Don't show entry animation when DocumentBar mounts.
 						}
@@ -170,7 +160,7 @@ export default function DocumentBar( props ) {
 						// Force entry animation when the back button is added or removed.
 						key={ hasBackButton }
 						initial={
-							mounted.current
+							mountedRef.current
 								? {
 										opacity: 0,
 										transform: hasBackButton
@@ -187,20 +177,18 @@ export default function DocumentBar( props ) {
 							isReducedMotion ? { duration: 0 } : undefined
 						}
 					>
-						<BlockIcon icon={ icon } />
-						<Text
-							size="body"
-							as="h1"
-							aria-label={
-								! props.title && TYPE_LABELS[ postType ]
-									? // eslint-disable-next-line @wordpress/valid-sprintf
-									  sprintf( TYPE_LABELS[ postType ], title )
-									: undefined
-							}
-						>
-							{ title
-								? decodeEntities( title )
-								: __( 'No Title' ) }
+						{ icon && <BlockIcon icon={ icon } /> }
+						<Text size="body" as="h1">
+							<span className="editor-document-bar__post-title">
+								{ title
+									? decodeEntities( title )
+									: __( 'No title' ) }
+							</span>
+							{ postTypeLabel && ! props.title && (
+								<span className="editor-document-bar__post-type-label">
+									{ '· ' + decodeEntities( postTypeLabel ) }
+								</span>
+							) }
 						</Text>
 					</motion.div>
 					<span className="editor-document-bar__shortcut">
diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss
index 7e51605ad3028..3e5fbf5f4b1ae 100644
--- a/packages/editor/src/components/document-bar/style.scss
+++ b/packages/editor/src/components/document-bar/style.scss
@@ -10,7 +10,7 @@
 	min-width: 0;
 	background: $gray-100;
 	border-radius: $grid-unit-05;
-	width: min(100%, 416px);
+	width: min(100%, 450px);
 
 	&:hover {
 		background-color: $gray-200;
@@ -26,8 +26,12 @@
 		}
 	}
 
-	@include break-large() {
-		width: min(100%, 450px);
+	&.has-back-button {
+		@media screen and (min-width: #{ ($break-medium) }) and (max-width: #{ ($break-large) }) {
+			.editor-document-bar__post-type-label {
+				display: none;
+			}
+		}
 	}
 }
 
@@ -38,34 +42,44 @@
 }
 
 .editor-document-bar__title {
-	flex-grow: 1;
 	overflow: hidden;
 	color: $gray-900;
-	gap: $grid-unit-05;
-	display: flex;
-	justify-content: center;
-	align-items: center;
+	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.is-global & {
 		color: var(--wp-block-synced-color);
 	}
+}
 
-	.block-editor-block-icon {
-		min-width: $grid-unit-30;
-		flex-shrink: 0;
-	}
+.editor-document-bar__post-type-label {
+	flex: 0;
+	color: $gray-800;
+	padding-left: $grid-unit-05;
 
-	h1 {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		max-width: 70%;
-		color: currentColor;
+	@media screen and (max-width: #{ ($break-small) }) {
+		display: none;
 	}
 }
 
diff --git a/packages/editor/src/components/document-outline/style.scss b/packages/editor/src/components/document-outline/style.scss
index efd2606b82d39..49ce0c9b2d132 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;
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 27804e33f508b..0000000000000
--- 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 b396d7cc78349..0000000000000
--- a/packages/editor/src/components/document-outline/test/index.js
+++ /dev/null
@@ -1,185 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen, within } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import {
-	createBlock,
-	registerBlockType,
-	unregisterBlockType,
-} from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import DocumentOutline from '../';
-
-jest.mock( '@wordpress/block-editor', () => ( {
-	BlockTitle: () => 'Block Title',
-} ) );
-jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
-
-function setupMockSelect( blocks ) {
-	useSelect.mockImplementation( ( mapSelect ) => {
-		return mapSelect( () => ( {
-			getBlocks: () => blocks,
-			getEditedPostAttribute: () => null,
-			getPostType: () => null,
-		} ) );
-	} );
-}
-
-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', () => {
-			setupMockSelect( [] );
-			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 }` };
-			} );
-			setupMockSelect( blocks );
-			render( <DocumentOutline /> );
-
-			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 }` };
-			} );
-			setupMockSelect( blocks );
-			render( <DocumentOutline /> );
-
-			expect( screen.getByRole( 'list' ) ).toMatchSnapshot();
-		} );
-
-		it( 'should render an item when only one heading provided', () => {
-			const blocks = [ headingH2 ];
-			setupMockSelect( blocks );
-			render( <DocumentOutline /> );
-
-			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,
-			];
-			setupMockSelect( blocks );
-			render( <DocumentOutline /> );
-
-			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 }` };
-				}
-			);
-			setupMockSelect( blocks );
-			render( <DocumentOutline /> );
-
-			expect( screen.getByRole( 'list' ) ).toMatchSnapshot();
-		} );
-	} );
-
-	describe( 'nested headings', () => {
-		it( 'should render even if the heading is nested', () => {
-			const blocks = [ headingH2, nestedHeading ];
-			setupMockSelect( blocks );
-			render( <DocumentOutline /> );
-
-			// 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
index 54121652bbf13..6a8c20c8d7055 100644
--- a/packages/editor/src/components/document-tools/index.js
+++ b/packages/editor/src/components/document-tools/index.js
@@ -38,10 +38,8 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 		listViewShortcut,
 		inserterSidebarToggleRef,
 		listViewToggleRef,
-		hasFixedToolbar,
 		showIconLabels,
 	} = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
 		const { get } = select( preferencesStore );
 		const {
 			isListViewOpened,
@@ -60,7 +58,6 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 			),
 			inserterSidebarToggleRef: getInserterSidebarToggleRef(),
 			listViewToggleRef: getListViewToggleRef(),
-			hasFixedToolbar: getSettings().hasFixedToolbar,
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			isDistractionFree: get( 'core', 'distractionFree' ),
 			isVisualMode: getEditorMode() === 'visual',
@@ -137,7 +134,7 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 				) }
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<>
-						{ isLargeViewport && ! hasFixedToolbar && (
+						{ isLargeViewport && (
 							<ToolbarItem
 								as={ ToolSelector }
 								showTooltip={ ! showIconLabels }
diff --git a/packages/editor/src/components/document-tools/style.scss b/packages/editor/src/components/document-tools/style.scss
index 36c643bbaa027..a1abfd5abd7ae 100644
--- a/packages/editor/src/components/document-tools/style.scss
+++ b/packages/editor/src/components/document-tools/style.scss
@@ -65,12 +65,12 @@
 .editor-document-tools__left {
 	display: inline-flex;
 	align-items: center;
-	padding-left: $grid-unit-20;
 	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;
+	// 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 {
diff --git a/packages/editor/src/components/editor-history/redo.js b/packages/editor/src/components/editor-history/redo.js
index 2ded5bfd52539..46a263bb89926 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 }
diff --git a/packages/editor/src/components/editor-history/undo.js b/packages/editor/src/components/editor-history/undo.js
index 18f2cb2e7e35d..6ba6055706e99 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 }
diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js
index 5b0aea5400d7b..0709b91175712 100644
--- a/packages/editor/src/components/editor-interface/index.js
+++ b/packages/editor/src/components/editor-interface/index.js
@@ -32,6 +32,8 @@ import TextEditor from '../text-editor';
 import VisualEditor from '../visual-editor';
 import EditorContentSlotFill from './content-slot-fill';
 
+import { unlock } from '../../lock-unlock';
+
 const interfaceLabels = {
 	/* translators: accessibility text for the editor top bar landmark region. */
 	header: __( 'Editor top bar' ),
@@ -58,7 +60,6 @@ export default function EditorInterface( {
 	customSavePanel,
 	forceDisableBlockTools,
 	title,
-	icon,
 	iframeProps,
 } ) {
 	const {
@@ -72,12 +73,13 @@ export default function EditorInterface( {
 		nextShortcut,
 		showBlockBreadcrumbs,
 		documentLabel,
-		blockEditorMode,
+		isZoomOut,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
 		const editorSettings = getEditorSettings();
 		const postTypeLabel = getPostTypeLabel();
+		const { isZoomOut: _isZoomOut } = unlock( select( blockEditorStore ) );
 
 		return {
 			mode: select( editorStore ).getEditorMode(),
@@ -95,11 +97,9 @@ export default function EditorInterface( {
 			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 			// translators: Default label for the Document in the Block Breadcrumb.
 			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
-			blockEditorMode:
-				select( blockEditorStore ).__unstableGetEditorMode(),
+			isZoomOut: _isZoomOut(),
 		};
 	}, [] );
-	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const secondarySidebarLabel = isListViewOpened
 		? __( 'Document Overview' )
@@ -122,11 +122,10 @@ export default function EditorInterface( {
 	return (
 		<InterfaceSkeleton
 			enableRegionNavigation={ enableRegionNavigation }
-			isDistractionFree={ isDistractionFree && isWideViewport }
+			isDistractionFree={ isDistractionFree }
 			className={ clsx( 'editor-editor-interface', className, {
 				'is-entity-save-view-open': !! entitiesSavedStatesCallback,
-				'is-distraction-free':
-					isDistractionFree && isWideViewport && ! isPreviewMode,
+				'is-distraction-free': isDistractionFree && ! isPreviewMode,
 			} ) }
 			labels={ {
 				...interfaceLabels,
@@ -142,7 +141,7 @@ export default function EditorInterface( {
 						customSaveButton={ customSaveButton }
 						forceDisableBlockTools={ forceDisableBlockTools }
 						title={ title }
-						icon={ icon }
+						isEditorIframed={ ! disableIframe }
 					/>
 				)
 			}
@@ -209,7 +208,7 @@ export default function EditorInterface( {
 				isLargeViewport &&
 				showBlockBreadcrumbs &&
 				isRichEditingEnabled &&
-				blockEditorMode !== 'zoom-out' &&
+				! isZoomOut &&
 				mode === 'visual' && (
 					<BlockBreadcrumb rootLabelText={ documentLabel } />
 				)
diff --git a/packages/editor/src/components/editor-interface/style.scss b/packages/editor/src/components/editor-interface/style.scss
index e7e0a93af2090..05b23fe2304dd 100644
--- a/packages/editor/src/components/editor-interface/style.scss
+++ b/packages/editor/src/components/editor-interface/style.scss
@@ -1,3 +1,12 @@
 .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 {
+	flex: 1 0 auto;
+}
diff --git a/packages/editor/src/components/editor/index.js b/packages/editor/src/components/editor/index.js
index b094c3ceb4437..21becea43cd7e 100644
--- a/packages/editor/src/components/editor/index.js
+++ b/packages/editor/src/components/editor/index.js
@@ -74,11 +74,11 @@ function Editor( {
 					<EditorInterface { ...props }>
 						{ extraContent }
 					</EditorInterface>
+					{ children }
 					<Sidebar
 						onActionPerformed={ onActionPerformed }
 						extraPanels={ extraSidebarPanels }
 					/>
-					{ children }
 				</ExperimentalEditorProvider>
 			) }
 		</>
diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js
index 8c0d59573a44d..ba84ef2b392f5 100644
--- a/packages/editor/src/components/entities-saved-states/index.js
+++ b/packages/editor/src/components/entities-saved-states/index.js
@@ -128,11 +128,21 @@ export function EntitiesSavedStatesExtensible( {
 			aria-describedby={ renderDialog ? dialogDescription : undefined }
 		>
 			<Flex className="entities-saved-states__panel-header" gap={ 2 }>
+				<FlexItem
+					isBlock
+					as={ Button }
+					variant="secondary"
+					size="compact"
+					onClick={ dismissPanel }
+				>
+					{ __( 'Cancel' ) }
+				</FlexItem>
 				<FlexItem
 					isBlock
 					as={ Button }
 					ref={ saveButtonRef }
 					variant="primary"
+					size="compact"
 					disabled={ ! saveEnabled }
 					accessibleWhenDisabled
 					onClick={ () =>
@@ -147,14 +157,6 @@ export function EntitiesSavedStatesExtensible( {
 				>
 					{ saveLabel }
 				</FlexItem>
-				<FlexItem
-					isBlock
-					as={ Button }
-					variant="secondary"
-					onClick={ dismissPanel }
-				>
-					{ __( 'Cancel' ) }
-				</FlexItem>
 			</Flex>
 
 			<div className="entities-saved-states__text-prompt">
diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss
index 981a0d92e5ff6..e2c320678c322 100644
--- a/packages/editor/src/components/entities-saved-states/style.scss
+++ b/packages/editor/src/components/entities-saved-states/style.scss
@@ -1,8 +1,8 @@
 .entities-saved-states__panel-header {
 	box-sizing: border-box;
 	background: $white;
-	padding-left: $grid-unit-10;
-	padding-right: $grid-unit-10;
+	padding-left: $grid-unit-20;
+	padding-right: $grid-unit-20;
 	height: $header-height;
 	border-bottom: $border-width solid $gray-300;
 }
diff --git a/packages/editor/src/components/error-boundary/index.js b/packages/editor/src/components/error-boundary/index.js
index 966ea433c0d64..d43af5a556b67 100644
--- a/packages/editor/src/components/error-boundary/index.js
+++ b/packages/editor/src/components/error-boundary/index.js
@@ -29,7 +29,7 @@ function getContent() {
 function CopyButton( { text, children } ) {
 	const ref = useCopyToClipboard( text );
 	return (
-		<Button variant="secondary" ref={ ref }>
+		<Button __next40pxDefaultSize variant="secondary" ref={ ref }>
 			{ children }
 		</Button>
 	);
diff --git a/packages/editor/src/components/error-boundary/style.native.scss b/packages/editor/src/components/error-boundary/style.native.scss
index 1ff5c1799915d..413242a177994 100644
--- a/packages/editor/src/components/error-boundary/style.native.scss
+++ b/packages/editor/src/components/error-boundary/style.native.scss
@@ -86,7 +86,7 @@
 }
 
 .copy-button__container--secondary {
-	border: 1px #c6c6c8;
+	border: $border-width #c6c6c8;
 	background-color: $white;
 }
 
diff --git a/packages/editor/src/components/error-boundary/style.scss b/packages/editor/src/components/error-boundary/style.scss
index d1b792d0ff3d3..2913a644b9457 100644
--- a/packages/editor/src/components/error-boundary/style.scss
+++ b/packages/editor/src/components/error-boundary/style.scss
@@ -3,5 +3,5 @@
 	max-width: 780px;
 	padding: 20px;
 	margin-top: 60px;
-	box-shadow: $shadow-modal;
+	box-shadow: $elevation-large;
 }
diff --git a/packages/editor/src/components/global-styles-provider/index.js b/packages/editor/src/components/global-styles-provider/index.js
index 62e390cba25ae..6f2d8177056cb 100644
--- a/packages/editor/src/components/global-styles-provider/index.js
+++ b/packages/editor/src/components/global-styles-provider/index.js
@@ -23,10 +23,23 @@ const { GlobalStylesContext, cleanEmptyObject } = unlock(
 
 export function mergeBaseAndUserConfigs( base, user ) {
 	return deepmerge( base, user, {
-		// We only pass as arrays the presets,
-		// in which case we want the new array of values
-		// to override the old array (no merging).
+		/*
+		 * We only pass as arrays the presets,
+		 * in which case we want the new array of values
+		 * to override the old array (no merging).
+		 */
 		isMergeableObject: isPlainObject,
+		/*
+		 * Exceptions to the above rule.
+		 * Background images should be replaced, not merged,
+		 * as they themselves are specific object definitions for the style.
+		 */
+		customMerge: ( key ) => {
+			if ( key === 'backgroundImage' ) {
+				return ( baseConfig, userConfig ) => userConfig;
+			}
+			return undefined;
+		},
 	} );
 }
 
@@ -34,29 +47,37 @@ function useGlobalStylesUserConfig() {
 	const { globalStylesId, isReady, settings, styles, _links } = useSelect(
 		( select ) => {
 			const {
+				getEntityRecord,
 				getEditedEntityRecord,
 				hasFinishedResolution,
-				getUser,
-				getCurrentUser,
+				canUser,
 			} = select( coreStore );
 			const _globalStylesId =
 				select( coreStore ).__experimentalGetCurrentGlobalStylesId();
 
-			// Doing canUser( 'read', 'global_styles' ) returns false even for users with the capability.
-			// See: https://github.com/WordPress/gutenberg/issues/63438
-			// So we need to check the user capabilities directly.
-			const userId = getCurrentUser()?.id;
-			const canEditThemeOptions =
-				userId && getUser( userId )?.capabilities?.edit_theme_options;
-
-			const record =
-				_globalStylesId && canEditThemeOptions
-					? getEditedEntityRecord(
-							'root',
-							'globalStyles',
-							_globalStylesId
-					  )
-					: undefined;
+			let record;
+			const userCanEditGlobalStyles = canUser( 'update', {
+				kind: 'root',
+				name: 'globalStyles',
+				id: _globalStylesId,
+			} );
+
+			if ( _globalStylesId ) {
+				if ( userCanEditGlobalStyles ) {
+					record = getEditedEntityRecord(
+						'root',
+						'globalStyles',
+						_globalStylesId
+					);
+				} else {
+					record = getEntityRecord(
+						'root',
+						'globalStyles',
+						_globalStylesId,
+						{ context: 'view' }
+					);
+				}
+			}
 
 			let hasResolved = false;
 			if (
@@ -64,13 +85,22 @@ function useGlobalStylesUserConfig() {
 					'__experimentalGetCurrentGlobalStylesId'
 				)
 			) {
-				hasResolved = _globalStylesId
-					? hasFinishedResolution( 'getEditedEntityRecord', [
-							'root',
-							'globalStyles',
-							_globalStylesId,
-					  ] )
-					: true;
+				if ( _globalStylesId ) {
+					hasResolved = userCanEditGlobalStyles
+						? hasFinishedResolution( 'getEditedEntityRecord', [
+								'root',
+								'globalStyles',
+								_globalStylesId,
+						  ] )
+						: hasFinishedResolution( 'getEntityRecord', [
+								'root',
+								'globalStyles',
+								_globalStylesId,
+								{ context: 'view' },
+						  ] );
+				} else {
+					hasResolved = true;
+				}
 			}
 
 			return {
@@ -138,26 +168,11 @@ function useGlobalStylesUserConfig() {
 }
 
 function useGlobalStylesBaseConfig() {
-	const baseConfig = useSelect( ( select ) => {
-		const {
-			getCurrentUser,
-			getUser,
-			__experimentalGetCurrentThemeBaseGlobalStyles,
-		} = select( coreStore );
-
-		// Doing canUser( 'read', 'global_styles' ) returns false even for users with the capability.
-		// See: https://github.com/WordPress/gutenberg/issues/63438
-		// So we need to check the user capabilities directly.
-		const userId = getCurrentUser()?.id;
-		const canEditThemeOptions =
-			userId && getUser( userId )?.capabilities?.edit_theme_options;
-
-		return (
-			canEditThemeOptions &&
-			__experimentalGetCurrentThemeBaseGlobalStyles()
-		);
-	}, [] );
-
+	const baseConfig = useSelect(
+		( select ) =>
+			select( coreStore ).__experimentalGetCurrentThemeBaseGlobalStyles(),
+		[]
+	);
 	return [ !! baseConfig, baseConfig ];
 }
 
diff --git a/packages/editor/src/components/header/back-button.js b/packages/editor/src/components/header/back-button.js
index 3ac689c841526..a3d682f92970e 100644
--- a/packages/editor/src/components/header/back-button.js
+++ b/packages/editor/src/components/header/back-button.js
@@ -9,16 +9,16 @@ import {
 // 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 = ( { children } ) => {
+const BackButtonSlot = () => {
 	const fills = useSlotFills( slotName );
-	const hasFills = Boolean( fills && fills.length );
-
-	if ( ! hasFills ) {
-		return children;
-	}
 
 	return (
 		<Slot
diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
index 4cf28748b2d7a..631643f26d4d5 100644
--- a/packages/editor/src/components/header/index.js
+++ b/packages/editor/src/components/header/index.js
@@ -1,24 +1,19 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
+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';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import BackButton from './back-button';
-import CollapsableBlockToolbar from '../collapsible-block-toolbar';
+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';
@@ -27,6 +22,7 @@ import PostPublishButtonOrToggle from '../post-publish-button/post-publish-butto
 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';
 
 const toolbarVariations = {
@@ -51,52 +47,67 @@ function Header( {
 	forceDisableBlockTools,
 	setEntitiesSavedStatesCallback,
 	title,
-	icon,
+	isEditorIframed,
 } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
+	const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 403px)' );
 	const {
+		postType,
 		isTextEditor,
 		isPublishSidebarOpened,
 		showIconLabels,
 		hasFixedToolbar,
+		hasBlockSelection,
 		isNestedEntity,
-		isZoomedOutView,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
 		const {
 			getEditorMode,
 			getEditorSettings,
+			getCurrentPostType,
 			isPublishSidebarOpened: _isPublishSidebarOpened,
 		} = select( editorStore );
-		const { __unstableGetEditorMode } = select( blockEditorStore );
 
 		return {
+			postType: getCurrentPostType(),
 			isTextEditor: getEditorMode() === 'text',
 			isPublishSidebarOpened: _isPublishSidebarOpened(),
 			showIconLabels: getPreference( 'core', 'showIconLabels' ),
 			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
+			hasBlockSelection:
+				!! select( blockEditorStore ).getBlockSelectionStart(),
 			isNestedEntity:
 				!! getEditorSettings().onNavigateToPreviousEntityRecord,
-			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 
-	const hasTopToolbar = isLargeViewport && hasFixedToolbar;
+	const canBeZoomedOut = [ 'post', 'page', 'wp_template' ].includes(
+		postType
+	);
 
 	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
 		useState( true );
 
-	// The edit-post-header classname is only kept for backward compatibilty
-	// as some plugins might be relying on its presence.
+	const hasCenter =
+		( ! hasBlockSelection || isBlockToolsCollapsed ) &&
+		! isTooNarrowForDocumentBar;
+	const hasBackButton = useHasBackButton();
+	/*
+	 * 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">
-			<motion.div
-				variants={ backButtonVariations }
-				transition={ { type: 'tween' } }
-			>
-				<BackButton.Slot />
-			</motion.div>
+			{ 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"
@@ -105,43 +116,56 @@ function Header( {
 				<DocumentTools
 					disableBlockTools={ forceDisableBlockTools || isTextEditor }
 				/>
-				{ hasTopToolbar && (
-					<CollapsableBlockToolbar
+				{ hasFixedToolbar && isLargeViewport && (
+					<CollapsibleBlockToolbar
 						isCollapsed={ isBlockToolsCollapsed }
 						onToggle={ setIsBlockToolsCollapsed }
 					/>
 				) }
-				<div
-					className={ clsx( 'editor-header__center', {
-						'is-collapsed':
-							! isBlockToolsCollapsed && hasTopToolbar,
-					} ) }
-				>
-					<DocumentBar title={ title } icon={ icon } />
-				</div>
 			</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.
+					/*
+					 * 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 } />
 				) }
+
+				{ canBeZoomedOut && isEditorIframed && isWideViewport && (
+					<ZoomOutToggle />
+				) }
+
 				<PreviewDropdown
 					forceIsAutosaveable={ forceIsDirty }
-					disabled={ isNestedEntity || isZoomedOutView }
+					disabled={ isNestedEntity }
 				/>
 				<PostPreviewButton
 					className="editor-header__post-preview-button"
 					forceIsAutosaveable={ forceIsDirty }
 				/>
 				<PostViewLink />
+
+				{ ( isWideViewport || ! showIconLabels ) && (
+					<PinnedItems.Slot scope="core" />
+				) }
+
 				{ ! customSaveButton && (
 					<PostPublishButtonOrToggle
 						forceIsDirty={ forceIsDirty }
@@ -150,10 +174,8 @@ function Header( {
 						}
 					/>
 				) }
+
 				{ customSaveButton }
-				{ ( isWideViewport || ! showIconLabels ) && (
-					<PinnedItems.Slot scope="core" />
-				) }
 				<MoreMenu />
 			</motion.div>
 		</div>
diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss
index e2efba2e9375a..8712121fff3ea 100644
--- a/packages/editor/src/components/header/style.scss
+++ b/packages/editor/src/components/header/style.scss
@@ -1,8 +1,18 @@
 .editor-header {
 	height: $header-height;
 	background: $white;
-	display: flex;
-	flex-wrap: wrap;
+	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, 1fr) 2fr minmax(min-content, 1fr) $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;
@@ -15,19 +25,32 @@
 }
 
 .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;
-	// Allow this area to shrink to fit the toolbar buttons.
-	flex-shrink: 8;
-	// Take up the space of the toolbar so it can be justified to the left side of the toolbar.
-	flex-grow: 3;
-	// Hide the overflow so flex will limit its width. Block toolbar will allow scrolling on fixed toolbar.
-	overflow: hidden;
-	// Leave enough room for the focus ring to show.
-	padding: 2px 0;
+	// 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;
-	// Allow focus ring to be fully visible on furthest right button.
-	@include break-medium() {
-		padding-right: var(--wp-admin-border-width-focus);
+	// Clip the box while leaving room for focus rings.
+	clip-path: inset(-2px);
+	@include break-mobile {
+		clip-path: none;
 	}
 
 	.table-of-contents {
@@ -37,20 +60,35 @@
 			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 {
-	flex-grow: 1;
+	grid-column: 3 / 4;
 	display: flex;
 	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
+	align-items: center;
+	// To enable shrinking and truncating of child text, apply an explicit min-width.
 	min-width: 0;
-
-	&.is-collapsed {
-		display: none;
+	// 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;
+		}
 	}
 }
 
@@ -59,6 +97,11 @@
  */
 
 .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;
@@ -185,7 +228,7 @@
 }
 
 .editor-header__post-preview-button {
-	@include break-small {
+	@include break-mobile {
 		display: none;
 	}
 }
@@ -197,10 +240,13 @@
 
 	.editor-header {
 		background-color: $white;
-		border-bottom: 1px solid #e0e0e0;
-		position: absolute;
 		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 {
diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js
index 91dcc883d661b..b42566aac653b 100644
--- a/packages/editor/src/components/index.js
+++ b/packages/editor/src/components/index.js
@@ -32,6 +32,7 @@ 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';
diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
index 675ae5e11544b..5cace042fae58 100644
--- a/packages/editor/src/components/inserter-sidebar/index.js
+++ b/packages/editor/src/components/inserter-sidebar/index.js
@@ -24,22 +24,26 @@ export default function InserterSidebar() {
 	const {
 		blockSectionRootClientId,
 		inserterSidebarToggleRef,
-		insertionPoint,
+		inserter,
 		showMostUsedBlocks,
 		sidebarIsOpened,
 	} = useSelect( ( select ) => {
 		const {
 			getInserterSidebarToggleRef,
-			getInsertionPoint,
+			getInserter,
 			isPublishSidebarOpened,
 		} = unlock( select( editorStore ) );
-		const { getBlockRootClientId, __unstableGetEditorMode, getSettings } =
-			select( blockEditorStore );
+		const {
+			getBlockRootClientId,
+			__unstableGetEditorMode,
+			getSectionRootClientId,
+		} = unlock( select( blockEditorStore ) );
 		const { get } = select( preferencesStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
 		const getBlockSectionRootClientId = () => {
 			if ( __unstableGetEditorMode() === 'zoom-out' ) {
-				const { sectionRootClientId } = unlock( getSettings() );
+				const sectionRootClientId = getSectionRootClientId();
+
 				if ( sectionRootClientId ) {
 					return sectionRootClientId;
 				}
@@ -48,7 +52,7 @@ export default function InserterSidebar() {
 		};
 		return {
 			inserterSidebarToggleRef: getInserterSidebarToggleRef(),
-			insertionPoint: getInsertionPoint(),
+			inserter: getInserter(),
 			showMostUsedBlocks: get( 'core', 'mostUsedBlocks' ),
 			blockSectionRootClientId: getBlockSectionRootClientId(),
 			sidebarIsOpened: !! (
@@ -84,14 +88,11 @@ export default function InserterSidebar() {
 				showMostUsedBlocks={ showMostUsedBlocks }
 				showInserterHelpPanel
 				shouldFocusBlock={ isMobileViewport }
-				rootClientId={
-					blockSectionRootClientId ?? insertionPoint.rootClientId
-				}
-				__experimentalInsertionIndex={ insertionPoint.insertionIndex }
-				onSelect={ insertionPoint.onSelect }
-				__experimentalInitialTab={ insertionPoint.tab }
-				__experimentalInitialCategory={ insertionPoint.category }
-				__experimentalFilterValue={ insertionPoint.filterValue }
+				rootClientId={ blockSectionRootClientId }
+				onSelect={ inserter.onSelect }
+				__experimentalInitialTab={ inserter.tab }
+				__experimentalInitialCategory={ inserter.category }
+				__experimentalFilterValue={ inserter.filterValue }
 				onPatternCategorySelection={
 					sidebarIsOpened
 						? () => disableComplementaryArea( 'core' )
diff --git a/packages/editor/src/components/list-view-sidebar/style.scss b/packages/editor/src/components/list-view-sidebar/style.scss
index 3bf56b2c80760..54c7376d37485 100644
--- a/packages/editor/src/components/list-view-sidebar/style.scss
+++ b/packages/editor/src/components/list-view-sidebar/style.scss
@@ -1,5 +1,9 @@
 .editor-list-view-sidebar {
 	height: 100%;
+
+	@include break-medium {
+		width: $secondary-sidebar-width;
+	}
 }
 
 .editor-list-view-sidebar__list-view-panel-content,
diff --git a/packages/editor/src/components/local-autosave-monitor/index.js b/packages/editor/src/components/local-autosave-monitor/index.js
index f999cf9ef8534..ad4e40d15d5c5 100644
--- a/packages/editor/src/components/local-autosave-monitor/index.js
+++ b/packages/editor/src/components/local-autosave-monitor/index.js
@@ -144,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.
diff --git a/packages/editor/src/components/page-attributes/parent.js b/packages/editor/src/components/page-attributes/parent.js
index f83f700c96988..0f19ffcdd5daa 100644
--- a/packages/editor/src/components/page-attributes/parent.js
+++ b/packages/editor/src/components/page-attributes/parent.js
@@ -14,11 +14,16 @@ import {
 	ExternalLink,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
-import { useState, useMemo } from '@wordpress/element';
+import {
+	createInterpolateElement,
+	useState,
+	useMemo,
+} from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore } from '@wordpress/core-data';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { filterURLForDisplay } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -217,6 +222,11 @@ function PostParentToggle( { isOpen, onClick } ) {
 }
 
 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 );
@@ -249,23 +259,36 @@ export function ParentRow() {
 							onClose={ onClose }
 						/>
 						<div>
-							{
-								/* translators: The domain name should be a reserved domain name to prevent linking to third party sites outside the WordPress project's control. You may also wish to use wordpress.org or a wordpress.org sub-domain. */
-								__(
-									"Child pages inherit characteristics from their parent, such as URL structure. For instance, if 'Web Design' is a child of 'Services', its URL would be example.org/services/web-design."
-								)
-							}
+							{ createInterpolateElement(
+								sprintf(
+									/* translators: %1$s The home URL of the WordPress installation without the scheme. */
+									__(
+										'Child pages inherit characteristics from their parent, such as URL structure. For instance, if "Pricing" is a child of "Services", its URL would be %1$s<wbr />/services<wbr />/pricing.'
+									),
+									filterURLForDisplay( homeUrl ).replace(
+										/([/.])/g,
+										'<wbr />$1'
+									)
+								),
+								{
+									wbr: <wbr />,
+								}
+							) }
 							<p>
-								{ __(
-									'They also show up as sub-items in the default navigation menu. '
+								{ 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'
+												) }
+											/>
+										),
+									}
 								) }
-								<ExternalLink
-									href={ __(
-										'https://wordpress.org/documentation/article/page-post-settings-sidebar/#page-attributes'
-									) }
-								>
-									{ __( 'Learn more' ) }
-								</ExternalLink>
 							</p>
 						</div>
 						<PageAttributesParent />
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 0000000000000..422248e17b88e
--- /dev/null
+++ b/packages/editor/src/components/plugin-preview-menu-item/index.js
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { compose } from '@wordpress/compose';
+import { MenuItem } from '@wordpress/components';
+import { withPluginContext } 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 {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 = () => (
+ *   <PreviewDropdownMenuItem
+ *     icon={ external }
+ *     onClick={ onPreviewClick }
+ *   >
+ *     { __( 'Preview in new tab' ) }
+ *   </PreviewDropdownMenuItem>
+ * );
+ * registerPlugin( 'external-preview-menu-item', {
+ *     render: ExternalPreviewMenuItem,
+ * } );
+ * ```
+ *
+ * @return {Component} The rendered menu item component.
+ */
+export default compose(
+	withPluginContext( ( context, ownProps ) => {
+		return {
+			as: ownProps.as ?? MenuItem,
+			icon: ownProps.icon || context.icon,
+			name: 'core/plugin-preview-menu',
+		};
+	} )
+)( ActionItem );
diff --git a/packages/editor/src/components/plugin-sidebar/index.js b/packages/editor/src/components/plugin-sidebar/index.js
index b9c0177e30fc4..56a954cadffb6 100644
--- a/packages/editor/src/components/plugin-sidebar/index.js
+++ b/packages/editor/src/components/plugin-sidebar/index.js
@@ -3,7 +3,6 @@
  */
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { ComplementaryArea } from '@wordpress/interface';
 
 /**
@@ -77,12 +76,9 @@ import { store as editorStore } from '../../store';
  * ```
  */
 export default function PluginSidebar( { className, ...props } ) {
-	const { postTitle, shortcut } = useSelect( ( select ) => {
+	const { postTitle } = useSelect( ( select ) => {
 		return {
 			postTitle: select( editorStore ).getEditedPostAttribute( 'title' ),
-			shortcut: select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/editor/toggle-sidebar' ),
 		};
 	}, [] );
 	return (
@@ -91,7 +87,6 @@ export default function PluginSidebar( { className, ...props } ) {
 			className="editor-sidebar"
 			smallScreenTitle={ postTitle || __( '(no title)' ) }
 			scope="core"
-			toggleShortcut={ shortcut }
 			{ ...props }
 		/>
 	);
diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
index 2a97e688eeedb..e1c0ed1558193 100644
--- a/packages/editor/src/components/post-actions/actions.js
+++ b/packages/editor/src/components/post-actions/actions.js
@@ -1,1052 +1,39 @@
 /**
  * WordPress dependencies
  */
-import { external, trash, backup } from '@wordpress/icons';
-import { addQueryArgs } from '@wordpress/url';
-import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { store as coreStore } from '@wordpress/core-data';
-import { __, _n, sprintf, _x } from '@wordpress/i18n';
-import { store as noticesStore } from '@wordpress/notices';
-import { useMemo, useState } from '@wordpress/element';
-import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
-import { parse } from '@wordpress/blocks';
-import { DataForm } from '@wordpress/dataviews';
-import {
-	Button,
-	TextControl,
-	__experimentalText as Text,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	__experimentalNumberControl as NumberControl,
-} from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useMemo, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import {
-	TEMPLATE_ORIGINS,
-	TEMPLATE_PART_POST_TYPE,
-	TEMPLATE_POST_TYPE,
-	PATTERN_POST_TYPE,
-} from '../../store/constants';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import { CreateTemplatePartModalContents } from '../create-template-part-modal';
-import { getItemTitle } from '../../dataviews/actions/utils';
-
-// Patterns.
-const { PATTERN_TYPES, CreatePatternModalContents, useDuplicatePatternProps } =
-	unlock( patternsPrivateApis );
-
-// TODO: this should be shared with other components (page-pages).
-const fields = [
-	{
-		type: 'text',
-		header: __( 'Title' ),
-		id: 'title',
-		placeholder: __( 'No title' ),
-		getValue: ( { item } ) => item.title,
-	},
-];
-
-const form = {
-	visibleFields: [ 'title' ],
-};
-
-/**
- * Check if a template is removable.
- *
- * @param {Object} template The template entity to check.
- * @return {boolean} Whether the template is removable.
- */
-function isTemplateRemovable( template ) {
-	if ( ! template ) {
-		return false;
-	}
-	// In patterns list page we map the templates parts to a different object
-	// than the one returned from the endpoint. This is why we need to check for
-	// two props whether is custom or has a theme file.
-	return (
-		template?.source === TEMPLATE_ORIGINS.custom &&
-		! template?.has_theme_file
-	);
-}
-
-const trashPostAction = {
-	id: 'move-to-trash',
-	label: __( 'Move to Trash' ),
-	isPrimary: true,
-	icon: trash,
-	isEligible( item ) {
-		return ! [ 'auto-draft', 'trash' ].includes( item.status );
-	},
-	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 to trash "%s"?'
-								),
-								getItemTitle( items[ 0 ] )
-						  )
-						: sprintf(
-								// translators: %d: The number of items (2 or more).
-								_n(
-									'Are you sure you want to move to trash %d item?',
-									'Are you sure you want to move to trash %d items?',
-									items.length
-								),
-								items.length
-						  ) }
-				</Text>
-				<HStack justify="right">
-					<Button
-						variant="tertiary"
-						onClick={ closeModal }
-						disabled={ isBusy }
-						accessibleWhenDisabled
-					>
-						{ __( 'Cancel' ) }
-					</Button>
-					<Button
-						variant="primary"
-						onClick={ async () => {
-							setIsBusy( true );
-							const promiseResult = await Promise.allSettled(
-								items.map( ( item ) =>
-									deleteEntityRecord(
-										'postType',
-										item.type,
-										item.id,
-										{},
-										{ 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 trash.' ),
-										getItemTitle( items[ 0 ] )
-									);
-								} else {
-									successMessage = sprintf(
-										/* translators: The number of items. */
-										_n(
-											'%s item moved to trash.',
-											'%s items moved to 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 ) {
-									if ( promiseResult[ 0 ].reason?.message ) {
-										errorMessage =
-											promiseResult[ 0 ].reason.message;
-									} else {
-										errorMessage = __(
-											'An error occurred while moving to trash the item.'
-										);
-									}
-									// 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 ) {
-										if ( failedPromise.reason?.message ) {
-											errorMessages.add(
-												failedPromise.reason.message
-											);
-										}
-									}
-									if ( errorMessages.size === 0 ) {
-										errorMessage = __(
-											'An error occurred while moving to trash the items.'
-										);
-									} else if ( errorMessages.size === 1 ) {
-										errorMessage = sprintf(
-											/* translators: %s: an error message */
-											__(
-												'An error occurred while moving to trash the item: %s'
-											),
-											[ ...errorMessages ][ 0 ]
-										);
-									} else {
-										errorMessage = sprintf(
-											/* translators: %s: a list of comma separated error messages */
-											__(
-												'Some errors occurred while moving to trash the items: %s'
-											),
-											[ ...errorMessages ].join( ',' )
-										);
-									}
-								}
-								createErrorNotice( errorMessage, {
-									type: 'snackbar',
-								} );
-							}
-							if ( onActionPerformed ) {
-								onActionPerformed( items );
-							}
-							setIsBusy( false );
-							closeModal();
-						} }
-						isBusy={ isBusy }
-						disabled={ isBusy }
-						accessibleWhenDisabled
-					>
-						{ __( 'Trash' ) }
-					</Button>
-				</HStack>
-			</VStack>
-		);
-	},
-};
-
-function useCanUserEligibilityCheckPostType( capability, postType, action ) {
-	const registry = useRegistry();
-	return useMemo(
-		() => ( {
-			...action,
-			isEligible( item ) {
-				return (
-					action.isEligible( item ) &&
-					registry.select( coreStore ).canUser( capability, {
-						kind: 'postType',
-						name: postType,
-						id: item.id,
-					} )
-				);
-			},
-		} ),
-		[ action, registry, capability, postType ]
-	);
-}
-
-function useTrashPostAction( postType ) {
-	return useCanUserEligibilityCheckPostType(
-		'delete',
-		postType,
-		trashPostAction
-	);
-}
-
-const permanentlyDeletePostAction = {
-	id: 'permanently-delete',
-	label: __( 'Permanently delete' ),
-	supportsBulk: true,
-	isEligible( { status } ) {
-		return status === 'trash';
-	},
-	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 posts 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 ) {
-				if ( promiseResult[ 0 ].reason?.message ) {
-					errorMessage = promiseResult[ 0 ].reason.message;
-				} else {
-					errorMessage = __(
-						'An error occurred while permanently deleting the post.'
-					);
-				}
-				// 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 ) {
-					if ( failedPromise.reason?.message ) {
-						errorMessages.add( failedPromise.reason.message );
-					}
-				}
-				if ( errorMessages.size === 0 ) {
-					errorMessage = __(
-						'An error occurred while permanently deleting the posts.'
-					);
-				} else if ( errorMessages.size === 1 ) {
-					errorMessage = sprintf(
-						/* translators: %s: an error message */
-						__(
-							'An error occurred while permanently deleting the posts: %s'
-						),
-						[ ...errorMessages ][ 0 ]
-					);
-				} else {
-					errorMessage = sprintf(
-						/* translators: %s: a list of comma separated error messages */
-						__(
-							'Some errors occurred while permanently deleting the posts: %s'
-						),
-						[ ...errorMessages ].join( ',' )
-					);
-				}
-			}
-			createErrorNotice( errorMessage, {
-				type: 'snackbar',
-			} );
-		}
-	},
-};
-
-function usePermanentlyDeletePostAction( postType ) {
-	return useCanUserEligibilityCheckPostType(
-		'delete',
-		postType,
-		permanentlyDeletePostAction
-	);
-}
-
-const restorePostAction = {
-	id: 'restore',
-	label: __( 'Restore' ),
-	isPrimary: true,
-	icon: backup,
-	supportsBulk: true,
-	isEligible( { status } ) {
-		return status === 'trash';
-	},
-	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 ) {
-				if ( promiseResult[ 0 ].reason?.message ) {
-					errorMessage = promiseResult[ 0 ].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 ) {
-					if ( failedPromise.reason?.message ) {
-						errorMessages.add( failedPromise.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',
-			} );
-		}
-	},
-};
-
-function useRestorePostAction( postType ) {
-	return useCanUserEligibilityCheckPostType(
-		'update',
-		postType,
-		restorePostAction
-	);
-}
-
-const viewPostAction = {
-	id: 'view-post',
-	label: __( 'View' ),
-	isPrimary: true,
-	icon: external,
-	isEligible( post ) {
-		return post.status !== 'trash';
-	},
-	callback( posts, { onActionPerformed } ) {
-		const post = posts[ 0 ];
-		window.open( post.link, '_blank' );
-		if ( onActionPerformed ) {
-			onActionPerformed( posts );
-		}
-	},
-};
-
-const postRevisionsAction = {
-	id: 'view-post-revisions',
-	context: 'list',
-	label( items ) {
-		const revisionsCount =
-			items[ 0 ]._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
-		return sprintf(
-			/* translators: %s: number of revisions */
-			__( 'View revisions (%s)' ),
-			revisionsCount
-		);
-	},
-	isEligible: ( post ) => {
-		if ( post.status === 'trash' ) {
-			return false;
-		}
-		const lastRevisionId =
-			post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
-		const revisionsCount =
-			post?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
-		return lastRevisionId && revisionsCount > 1;
-	},
-	callback( posts, { onActionPerformed } ) {
-		const post = posts[ 0 ];
-		const href = addQueryArgs( 'revision.php', {
-			revision: post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id,
-		} );
-		document.location.href = href;
-		if ( onActionPerformed ) {
-			onActionPerformed( posts );
-		}
-	},
-};
-
-const renamePostAction = {
-	id: 'rename-post',
-	label: __( 'Rename' ),
-	isEligible( post ) {
-		if ( post.status === 'trash' ) {
-			return false;
-		}
-		// Templates, template parts and patterns have special checks for renaming.
-		if (
-			! [
-				TEMPLATE_POST_TYPE,
-				TEMPLATE_PART_POST_TYPE,
-				...Object.values( PATTERN_TYPES ),
-			].includes( post.type )
-		) {
-			return true;
-		}
-		// In the case of templates, we can only rename custom templates.
-		if ( post.type === TEMPLATE_POST_TYPE ) {
-			return isTemplateRemovable( post ) && post.is_custom;
-		}
-		// Make necessary checks for template parts and patterns.
-		const isTemplatePart = post.type === TEMPLATE_PART_POST_TYPE;
-		const isUserPattern = post.type === PATTERN_TYPES.user;
-		// In patterns list page we map the templates parts to a different object
-		// than the one returned from the endpoint. This is why we need to check for
-		// two props whether is custom or has a theme file.
-		const isCustomPattern =
-			isUserPattern ||
-			( isTemplatePart && post.source === TEMPLATE_ORIGINS.custom );
-		const hasThemeFile = post?.has_theme_file;
-		return isCustomPattern && ! hasThemeFile;
-	},
-	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
-		const [ item ] = items;
-		const [ title, setTitle ] = useState( () => getItemTitle( item ) );
-		const { editEntityRecord, saveEditedEntityRecord } =
-			useDispatch( coreStore );
-		const { createSuccessNotice, createErrorNotice } =
-			useDispatch( noticesStore );
-
-		async function onRename( event ) {
-			event.preventDefault();
-			try {
-				await editEntityRecord( 'postType', item.type, item.id, {
-					title,
-				} );
-				// Update state before saving rerenders the list.
-				setTitle( '' );
-				closeModal();
-				// Persist edited entity.
-				await saveEditedEntityRecord( 'postType', item.type, item.id, {
-					throwOnError: true,
-				} );
-				createSuccessNotice( __( 'Name updated' ), {
-					type: 'snackbar',
-				} );
-				onActionPerformed?.( items );
-			} catch ( error ) {
-				const errorMessage =
-					error.message && error.code !== 'unknown_error'
-						? error.message
-						: __( 'An error occurred while updating the name' );
-				createErrorNotice( errorMessage, { type: 'snackbar' } );
-			}
-		}
-
-		return (
-			<form onSubmit={ onRename }>
-				<VStack spacing="5">
-					<TextControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						label={ __( 'Name' ) }
-						value={ title }
-						onChange={ setTitle }
-						required
-					/>
-					<HStack justify="right">
-						<Button
-							__next40pxDefaultSize
-							variant="tertiary"
-							onClick={ () => {
-								closeModal();
-							} }
-						>
-							{ __( 'Cancel' ) }
-						</Button>
-						<Button
-							__next40pxDefaultSize
-							variant="primary"
-							type="submit"
-						>
-							{ __( 'Save' ) }
-						</Button>
-					</HStack>
-				</VStack>
-			</form>
-		);
-	},
-};
-
-function useRenamePostAction( postType ) {
-	return useCanUserEligibilityCheckPostType(
-		'update',
-		postType,
-		renamePostAction
-	);
-}
-
-function ReorderModal( { items, closeModal, onActionPerformed } ) {
-	const [ item ] = items;
-	const { editEntityRecord, saveEditedEntityRecord } =
-		useDispatch( coreStore );
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
-	const [ orderInput, setOrderInput ] = useState( item.menu_order );
-
-	async function onOrder( event ) {
-		event.preventDefault();
-		if (
-			! Number.isInteger( Number( orderInput ) ) ||
-			orderInput?.trim?.() === ''
-		) {
-			return;
-		}
-		try {
-			await editEntityRecord( 'postType', item.type, item.id, {
-				menu_order: orderInput,
-			} );
-			closeModal();
-			// Persist edited entity.
-			await saveEditedEntityRecord( 'postType', item.type, item.id, {
-				throwOnError: true,
-			} );
-			createSuccessNotice( __( 'Order updated' ), {
-				type: 'snackbar',
-			} );
-			onActionPerformed?.( items );
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while updating the order' );
-			createErrorNotice( errorMessage, {
-				type: 'snackbar',
-			} );
-		}
-	}
-	const saveIsDisabled =
-		! Number.isInteger( Number( orderInput ) ) ||
-		orderInput?.trim?.() === '';
-	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>
-				<NumberControl
-					__next40pxDefaultSize
-					label={ __( 'Order' ) }
-					help={ __( 'Set the page order.' ) }
-					value={ orderInput }
-					onChange={ setOrderInput }
-				/>
-				<HStack justify="right">
-					<Button
-						__next40pxDefaultSize
-						variant="tertiary"
-						onClick={ () => {
-							closeModal();
-						} }
-					>
-						{ __( 'Cancel' ) }
-					</Button>
-					<Button
-						__next40pxDefaultSize
-						variant="primary"
-						type="submit"
-						accessibleWhenDisabled
-						disabled={ saveIsDisabled }
-						__experimentalIsFocusable
-					>
-						{ __( 'Save' ) }
-					</Button>
-				</HStack>
-			</VStack>
-		</form>
-	);
-}
-
-function useReorderPagesAction( postType ) {
-	const supportsPageAttributes = useSelect(
-		( select ) => {
-			const { getPostType } = select( coreStore );
-			const postTypeObject = getPostType( postType );
-
-			return !! postTypeObject?.supports?.[ 'page-attributes' ];
-		},
-		[ postType ]
-	);
-
-	return useMemo(
-		() =>
-			supportsPageAttributes && {
-				id: 'order-pages',
-				label: __( 'Order' ),
-				isEligible( { status } ) {
-					return status !== 'trash';
-				},
-				RenderModal: ReorderModal,
-			},
-		[ supportsPageAttributes ]
-	);
-}
-
-const useDuplicatePostAction = ( postType ) => {
-	const userCanCreatePost = useSelect(
-		( select ) => {
-			return select( coreStore ).canUser( 'create', {
-				kind: 'postType',
-				name: postType,
-			} );
-		},
-		[ postType ]
-	);
-	return useMemo(
-		() =>
-			userCanCreatePost && {
-				id: 'duplicate-post',
-				label: _x( 'Duplicate', 'action label' ),
-				isEligible( { status } ) {
-					return status !== 'trash';
-				},
-				RenderModal: ( { items, closeModal, onActionPerformed } ) => {
-					const [ item, setItem ] = useState( {
-						...items[ 0 ],
-						title: sprintf(
-							/* translators: %s: Existing template title */
-							__( '%s (Copy)' ),
-							getItemTitle( items[ 0 ] )
-						),
-					} );
-
-					const [ isCreatingPage, setIsCreatingPage ] =
-						useState( false );
-
-					const { saveEntityRecord } = useDispatch( coreStore );
-					const { createSuccessNotice, createErrorNotice } =
-						useDispatch( noticesStore );
-
-					async function createPage( event ) {
-						event.preventDefault();
-
-						if ( isCreatingPage ) {
-							return;
-						}
-
-						const newItemOject = {
-							status: 'draft',
-							title: item.title,
-							slug: item.title || __( 'No title' ),
-							comment_status: item.comment_status,
-							content:
-								typeof item.content === 'string'
-									? item.content
-									: item.content.raw,
-							excerpt: item.excerpt.raw,
-							meta: item.meta,
-							parent: item.parent,
-							password: item.password,
-							template: item.template,
-							format: item.format,
-							featured_media: item.featured_media,
-							menu_order: item.menu_order,
-							ping_status: item.ping_status,
-						};
-						const assignablePropertiesPrefix = 'wp:action-assign-';
-						// Get all the properties that the current user is able to assign normally author, categories, tags,
-						// and custom taxonomies.
-						const assignableProperties = Object.keys(
-							item?._links || {}
-						)
-							.filter( ( property ) =>
-								property.startsWith(
-									assignablePropertiesPrefix
-								)
-							)
-							.map( ( property ) =>
-								property.slice(
-									assignablePropertiesPrefix.length
-								)
-							);
-						assignableProperties.forEach( ( property ) => {
-							if ( item[ property ] ) {
-								newItemOject[ property ] = item[ property ];
-							}
-						} );
-						setIsCreatingPage( true );
-						try {
-							const newItem = await saveEntityRecord(
-								'postType',
-								item.type,
-								newItemOject,
-								{ throwOnError: true }
-							);
-
-							createSuccessNotice(
-								sprintf(
-									// translators: %s: Title of the created template e.g: "Category".
-									__( '"%s" successfully created.' ),
-									decodeEntities(
-										newItem.title?.rendered || item.title
-									)
-								),
-								{
-									id: 'duplicate-post-action',
-									type: 'snackbar',
-								}
-							);
-
-							if ( onActionPerformed ) {
-								onActionPerformed( [ newItem ] );
-							}
-						} catch ( error ) {
-							const errorMessage =
-								error.message && error.code !== 'unknown_error'
-									? error.message
-									: __(
-											'An error occurred while duplicating the page.'
-									  );
-
-							createErrorNotice( errorMessage, {
-								type: 'snackbar',
-							} );
-						} finally {
-							setIsCreatingPage( false );
-							closeModal();
-						}
-					}
-
-					return (
-						<form onSubmit={ createPage }>
-							<VStack spacing={ 3 }>
-								<DataForm
-									data={ item }
-									fields={ fields }
-									form={ form }
-									onChange={ setItem }
-								/>
-								<HStack spacing={ 2 } justify="end">
-									<Button
-										variant="tertiary"
-										onClick={ closeModal }
-										__next40pxDefaultSize
-									>
-										{ __( 'Cancel' ) }
-									</Button>
-									<Button
-										variant="primary"
-										type="submit"
-										isBusy={ isCreatingPage }
-										aria-disabled={ isCreatingPage }
-										__next40pxDefaultSize
-									>
-										{ _x( 'Duplicate', 'action label' ) }
-									</Button>
-								</HStack>
-							</VStack>
-						</form>
-					);
-				},
-			},
-		[ userCanCreatePost ]
-	);
-};
-
-export const duplicatePatternAction = {
-	id: 'duplicate-pattern',
-	label: _x( 'Duplicate', 'action label' ),
-	isEligible: ( item ) => item.type !== TEMPLATE_PART_POST_TYPE,
-	modalHeader: _x( 'Duplicate pattern', 'action label' ),
-	RenderModal: ( { items, closeModal } ) => {
-		const [ item ] = items;
-		const duplicatedProps = useDuplicatePatternProps( {
-			pattern: item,
-			onSuccess: () => closeModal(),
-		} );
-		return (
-			<CreatePatternModalContents
-				onClose={ closeModal }
-				confirmLabel={ _x( 'Duplicate', 'action label' ) }
-				{ ...duplicatedProps }
-			/>
-		);
-	},
-};
-
-export const duplicateTemplatePartAction = {
-	id: 'duplicate-template-part',
-	label: _x( 'Duplicate', 'action label' ),
-	isEligible: ( item ) => item.type === TEMPLATE_PART_POST_TYPE,
-	modalHeader: _x( 'Duplicate template part', 'action label' ),
-	RenderModal: ( { items, closeModal } ) => {
-		const [ item ] = items;
-		const blocks = useMemo( () => {
-			return (
-				item.blocks ??
-				parse(
-					typeof item.content === 'string'
-						? item.content
-						: item.content.raw,
-					{
-						__unstableSkipMigrationLogs: true,
-					}
-				)
-			);
-		}, [ item.content, item.blocks ] );
-		const { createSuccessNotice } = useDispatch( noticesStore );
-		function onTemplatePartSuccess() {
-			createSuccessNotice(
-				sprintf(
-					// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
-					__( '"%s" duplicated.' ),
-					getItemTitle( item )
-				),
-				{ type: 'snackbar', id: 'edit-site-patterns-success' }
-			);
-			closeModal();
-		}
-		return (
-			<CreateTemplatePartModalContents
-				blocks={ blocks }
-				defaultArea={ item.area }
-				defaultTitle={ sprintf(
-					/* translators: %s: Existing template part title */
-					__( '%s (Copy)' ),
-					getItemTitle( item )
-				) }
-				onCreate={ onTemplatePartSuccess }
-				onError={ closeModal }
-				confirmLabel={ _x( 'Duplicate', 'action label' ) }
-			/>
-		);
-	},
-};
 
 export function usePostActions( { postType, onActionPerformed, context } ) {
-	const {
-		defaultActions,
-		postTypeObject,
-		userCanCreatePostType,
-		cachedCanUserResolvers,
-	} = useSelect(
+	const { defaultActions } = useSelect(
 		( select ) => {
-			const { getPostType, canUser, getCachedResolvers } =
-				select( coreStore );
 			const { getEntityActions } = unlock( select( editorStore ) );
-			const _postTypeObject = getPostType( postType );
 			return {
-				postTypeObject: _postTypeObject,
 				defaultActions: getEntityActions( 'postType', postType ),
-				userCanCreatePostType: canUser( 'create', {
-					kind: 'postType',
-					name: postType,
-				} ),
-				cachedCanUserResolvers: getCachedResolvers()?.canUser,
 			};
 		},
 		[ postType ]
 	);
 
-	const duplicatePostAction = useDuplicatePostAction( postType );
-	const trashPostActionForPostType = useTrashPostAction( postType );
-	const permanentlyDeletePostActionForPostType =
-		usePermanentlyDeletePostAction( postType );
-	const renamePostActionForPostType = useRenamePostAction( postType );
-	const restorePostActionForPostType = useRestorePostAction( postType );
-	const reorderPagesAction = useReorderPagesAction( postType );
-	const isTemplateOrTemplatePart = [
-		TEMPLATE_POST_TYPE,
-		TEMPLATE_PART_POST_TYPE,
-	].includes( postType );
-	const isPattern = postType === PATTERN_POST_TYPE;
-	const isLoaded = !! postTypeObject;
-	const supportsRevisions = !! postTypeObject?.supports?.revisions;
-	const supportsTitle = !! postTypeObject?.supports?.title;
-	return useMemo( () => {
-		if ( ! isLoaded ) {
-			return [];
-		}
+	const { registerPostTypeActions } = unlock( useDispatch( editorStore ) );
+	useEffect( () => {
+		registerPostTypeActions( postType );
+	}, [ registerPostTypeActions, postType ] );
 
-		let actions = [
-			postTypeObject?.viewable && viewPostAction,
-			supportsRevisions && postRevisionsAction,
-			globalThis.IS_GUTENBERG_PLUGIN
-				? ! isTemplateOrTemplatePart &&
-				  ! isPattern &&
-				  duplicatePostAction
-				: false,
-			isTemplateOrTemplatePart &&
-				userCanCreatePostType &&
-				duplicateTemplatePartAction,
-			isPattern && userCanCreatePostType && duplicatePatternAction,
-			supportsTitle && renamePostActionForPostType,
-			reorderPagesAction,
-			! isTemplateOrTemplatePart && restorePostActionForPostType,
-			! isTemplateOrTemplatePart &&
-				! isPattern &&
-				trashPostActionForPostType,
-			! isTemplateOrTemplatePart &&
-				permanentlyDeletePostActionForPostType,
-			...defaultActions,
-		].filter( Boolean );
+	return useMemo( () => {
 		// Filter actions based on provided context. If not provided
 		// all actions are returned. We'll have a single entry for getting the actions
 		// and the consumer should provide the context to filter the actions, if needed.
 		// Actions should also provide the `context` they support, if it's specific, to
 		// compare with the provided context to get all the actions.
 		// Right now the only supported context is `list`.
-		actions = actions.filter( ( action ) => {
+		const actions = defaultActions.filter( ( action ) => {
 			if ( ! action.context ) {
 				return true;
 			}
@@ -1101,26 +88,5 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		}
 
 		return actions;
-		// We are making this use memo depend on cachedCanUserResolvers as a way to make the component using this hook re-render
-		// when user capabilities are resolved. This makes sure the isEligible functions of actions dependent on capabilities are re-evaluated.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [
-		defaultActions,
-		userCanCreatePostType,
-		isTemplateOrTemplatePart,
-		isPattern,
-		postTypeObject?.viewable,
-		duplicatePostAction,
-		reorderPagesAction,
-		trashPostActionForPostType,
-		restorePostActionForPostType,
-		renamePostActionForPostType,
-		permanentlyDeletePostActionForPostType,
-		onActionPerformed,
-		isLoaded,
-		supportsRevisions,
-		supportsTitle,
-		context,
-		cachedCanUserResolvers,
-	] );
+	}, [ defaultActions, onActionPerformed, context ] );
 }
diff --git a/packages/editor/src/components/post-actions/index.js b/packages/editor/src/components/post-actions/index.js
index b2730e760c427..8a3850e8f547c 100644
--- a/packages/editor/src/components/post-actions/index.js
+++ b/packages/editor/src/components/post-actions/index.js
@@ -17,41 +17,44 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { unlock } from '../../lock-unlock';
 import { usePostActions } from './actions';
-import { store as editorStore } from '../../store';
 
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuGroupV2: DropdownMenuGroup,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-	kebabCase,
-} = unlock( componentsPrivateApis );
+const { DropdownMenuV2, kebabCase } = unlock( componentsPrivateApis );
 
-export default function PostActions( { onActionPerformed, buttonProps } ) {
+export default function PostActions( { postType, postId, onActionPerformed } ) {
 	const [ isActionsMenuOpen, setIsActionsMenuOpen ] = useState( false );
-	const { item, postType } = useSelect( ( select ) => {
-		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
-		const { getEditedEntityRecord } = select( coreStore );
-		const _postType = getCurrentPostType();
+	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: getEditedEntityRecord(
-				'postType',
-				_postType,
-				getCurrentPostId()
-			),
-			postType: _postType,
+			...item,
+			permissions,
 		};
-	}, [] );
+	}, [ item, permissions ] );
 	const allActions = usePostActions( { postType, onActionPerformed } );
 
 	const actions = useMemo( () => {
 		return allActions.filter( ( action ) => {
-			return ! action.isEligible || action.isEligible( item );
+			return (
+				! action.isEligible || action.isEligible( itemWithPermissions )
+			);
 		} );
-	}, [ allActions, item ] );
+	}, [ allActions, itemWithPermissions ] );
 
 	return (
-		<DropdownMenu
+		<DropdownMenuV2
 			open={ isActionsMenuOpen }
 			trigger={
 				<Button
@@ -64,7 +67,6 @@ export default function PostActions( { onActionPerformed, buttonProps } ) {
 					onClick={ () =>
 						setIsActionsMenuOpen( ! isActionsMenuOpen )
 					}
-					{ ...buttonProps }
 				/>
 			}
 			onOpenChange={ setIsActionsMenuOpen }
@@ -72,12 +74,12 @@ export default function PostActions( { onActionPerformed, buttonProps } ) {
 		>
 			<ActionsDropdownMenuGroup
 				actions={ actions }
-				item={ item }
+				item={ itemWithPermissions }
 				onClose={ () => {
 					setIsActionsMenuOpen( false );
 				} }
 			/>
-		</DropdownMenu>
+		</DropdownMenuV2>
 	);
 }
 
@@ -91,12 +93,12 @@ function DropdownMenuItemTrigger( { action, onClick, items } ) {
 	const label =
 		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
-		<DropdownMenuItem
+		<DropdownMenuV2.Item
 			onClick={ onClick }
 			hideOnClick={ ! action.RenderModal }
 		>
-			<DropdownMenuItemLabel>{ label }</DropdownMenuItemLabel>
-		</DropdownMenuItem>
+			<DropdownMenuV2.ItemLabel>{ label }</DropdownMenuV2.ItemLabel>
+		</DropdownMenuV2.Item>
 	);
 }
 
@@ -143,7 +145,7 @@ function ActionWithModal( { action, item, ActionTrigger, onClose } ) {
 // With an added onClose prop.
 function ActionsDropdownMenuGroup( { actions, item, onClose } ) {
 	return (
-		<DropdownMenuGroup>
+		<DropdownMenuV2.Group>
 			{ actions.map( ( action ) => {
 				if ( action.RenderModal ) {
 					return (
@@ -165,6 +167,6 @@ function ActionsDropdownMenuGroup( { actions, item, onClose } ) {
 					/>
 				);
 			} ) }
-		</DropdownMenuGroup>
+		</DropdownMenuV2.Group>
 	);
 }
diff --git a/packages/editor/src/components/post-author/hook.js b/packages/editor/src/components/post-author/hook.js
index 116c354669ca8..62830cf6ea60e 100644
--- a/packages/editor/src/components/post-author/hook.js
+++ b/packages/editor/src/components/post-author/hook.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -46,17 +47,24 @@ export function useAuthorsQuery( search ) {
 			( { value } ) => postAuthor?.id === value
 		);
 
+		let currentAuthor = [];
 		if ( foundAuthor < 0 && postAuthor ) {
-			return [
+			currentAuthor = [
 				{
 					value: postAuthor.id,
 					label: decodeEntities( postAuthor.name ),
 				},
-				...fetchedAuthors,
+			];
+		} else if ( foundAuthor < 0 && ! postAuthor ) {
+			currentAuthor = [
+				{
+					value: 0,
+					label: __( '(No author)' ),
+				},
 			];
 		}
 
-		return fetchedAuthors;
+		return [ ...currentAuthor, ...fetchedAuthors ];
 	}, [ authors, postAuthor ] );
 
 	return { authorId, authorOptions, postAuthor };
diff --git a/packages/editor/src/components/post-author/panel.js b/packages/editor/src/components/post-author/panel.js
index 5c162cfa50377..a3c53aa417163 100644
--- a/packages/editor/src/components/post-author/panel.js
+++ b/packages/editor/src/components/post-author/panel.js
@@ -4,6 +4,7 @@
 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';
 
 /**
@@ -16,7 +17,8 @@ import { useAuthorsQuery } from './hook';
 
 function PostAuthorToggle( { isOpen, onClick } ) {
 	const { postAuthor } = useAuthorsQuery();
-	const authorName = postAuthor?.name || '';
+	const authorName =
+		decodeEntities( postAuthor?.name ) || __( '(No author)' );
 	return (
 		<Button
 			size="compact"
diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js
index 0d06ff0dca106..ed13af9b55a4a 100644
--- a/packages/editor/src/components/post-card-panel/index.js
+++ b/packages/editor/src/components/post-card-panel/index.js
@@ -26,59 +26,56 @@ import {
 	GLOBAL_POST_TYPES,
 } from '../../store/constants';
 import { unlock } from '../../lock-unlock';
+import PostActions from '../post-actions';
 
-export default function PostCardPanel( { actions } ) {
+export default function PostCardPanel( {
+	postType,
+	postId,
+	onActionPerformed,
+} ) {
 	const { isFrontPage, isPostsPage, title, icon, isSync } = useSelect(
 		( select ) => {
-			const {
-				getEditedPostAttribute,
-				getCurrentPostType,
-				getCurrentPostId,
-				__experimentalGetTemplateInfo,
-			} = select( editorStore );
-			const { canUser } = select( coreStore );
-			const { getEditedEntityRecord } = select( coreStore );
+			const { __experimentalGetTemplateInfo } = select( editorStore );
+			const { canUser, getEditedEntityRecord } = select( coreStore );
 			const siteSettings = canUser( 'read', {
 				kind: 'root',
 				name: 'site',
 			} )
 				? getEditedEntityRecord( 'root', 'site' )
 				: undefined;
-			const _type = getCurrentPostType();
-			const _id = getCurrentPostId();
-			const _record = getEditedEntityRecord( 'postType', _type, _id );
+			const _record = getEditedEntityRecord(
+				'postType',
+				postType,
+				postId
+			);
 			const _templateInfo =
 				[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes(
-					_type
+					postType
 				) && __experimentalGetTemplateInfo( _record );
 			let _isSync = false;
-			if ( GLOBAL_POST_TYPES.includes( _type ) ) {
-				if ( PATTERN_POST_TYPE === _type ) {
+			if ( GLOBAL_POST_TYPES.includes( postType ) ) {
+				if ( PATTERN_POST_TYPE === postType ) {
 					// When the post is first created, the top level wp_pattern_sync_status is not set so get meta value instead.
 					const currentSyncStatus =
-						getEditedPostAttribute( 'meta' )
-							?.wp_pattern_sync_status === 'unsynced'
+						_record?.meta?.wp_pattern_sync_status === 'unsynced'
 							? 'unsynced'
-							: getEditedPostAttribute(
-									'wp_pattern_sync_status'
-							  );
+							: _record?.wp_pattern_sync_status;
 					_isSync = currentSyncStatus !== 'unsynced';
 				} else {
 					_isSync = true;
 				}
 			}
 			return {
-				title:
-					_templateInfo?.title || getEditedPostAttribute( 'title' ),
-				icon: unlock( select( editorStore ) ).getPostIcon( _type, {
+				title: _templateInfo?.title || _record?.title,
+				icon: unlock( select( editorStore ) ).getPostIcon( postType, {
 					area: _record?.area,
 				} ),
 				isSync: _isSync,
-				isFrontPage: siteSettings?.page_on_front === _id,
-				isPostsPage: siteSettings?.page_for_posts === _id,
+				isFrontPage: siteSettings?.page_on_front === postId,
+				isPostsPage: siteSettings?.page_for_posts === postId,
 			};
 		},
-		[]
+		[ postId, postType ]
 	);
 	return (
 		<div className="editor-post-card-panel">
@@ -101,10 +98,10 @@ export default function PostCardPanel( { actions } ) {
 					as="h2"
 					lineHeight="20px"
 				>
-					{ title ? decodeEntities( title ) : __( 'No Title' ) }
+					{ title ? decodeEntities( title ) : __( 'No title' ) }
 					{ isFrontPage && (
 						<span className="editor-post-card-panel__title-badge">
-							{ __( 'Front Page' ) }
+							{ __( 'Homepage' ) }
 						</span>
 					) }
 					{ isPostsPage && (
@@ -113,7 +110,11 @@ export default function PostCardPanel( { actions } ) {
 						</span>
 					) }
 				</Text>
-				{ actions }
+				<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
index 3547b0ab10493..73b638673f3e9 100644
--- a/packages/editor/src/components/post-card-panel/style.scss
+++ b/packages/editor/src/components/post-card-panel/style.scss
@@ -46,7 +46,7 @@
 	background: $gray-100;
 	color: $gray-700;
 	padding: 0 $grid-unit-05;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	font-size: 12px;
 	font-weight: 400;
 	flex-shrink: 0;
diff --git a/packages/editor/src/components/post-comments/index.js b/packages/editor/src/components/post-comments/index.js
index 75ca1ec0ee016..1d331811b46b2 100644
--- a/packages/editor/src/components/post-comments/index.js
+++ b/packages/editor/src/components/post-comments/index.js
@@ -1,10 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
 	RadioControl,
-	__experimentalText as Text,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -16,29 +15,17 @@ import { store as editorStore } from '../../store';
 
 const COMMENT_OPTIONS = [
 	{
-		label: (
-			<>
-				{ __( 'Open' ) }
-				<Text variant="muted" size={ 12 }>
-					{ __( 'Visitors can add new comments and replies.' ) }
-				</Text>
-			</>
-		),
+		label: _x( 'Open', 'Adjective: e.g. "Comments are open"' ),
 		value: 'open',
+		description: __( 'Visitors can add new comments and replies.' ),
 	},
 	{
-		label: (
-			<>
-				{ __( 'Closed' ) }
-				<Text variant="muted" size={ 12 }>
-					{ __( 'Visitors cannot add new comments or replies.' ) }
-				</Text>
-				<Text variant="muted" size={ 12 }>
-					{ __( 'Existing comments remain visible.' ) }
-				</Text>
-			</>
-		),
+		label: __( 'Closed' ),
 		value: 'closed',
+		description: [
+			__( 'Visitors cannot add new comments or replies.' ),
+			__( 'Existing comments remain visible.' ),
+		].join( ' ' ),
 	},
 ];
 
diff --git a/packages/editor/src/components/post-discussion/panel.js b/packages/editor/src/components/post-discussion/panel.js
index 718754d56857a..c539791d404de 100644
--- a/packages/editor/src/components/post-discussion/panel.js
+++ b/packages/editor/src/components/post-discussion/panel.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
 	Dropdown,
 	Button,
@@ -62,9 +62,11 @@ function PostDiscussionToggle( { isOpen, onClick } ) {
 	let label;
 	if ( commentStatus === 'open' ) {
 		if ( pingStatus === 'open' ) {
-			label = __( 'Open' );
+			label = _x( 'Open', 'Adjective: e.g. "Comments are open"' );
 		} else {
-			label = trackbacksSupported ? __( 'Comments only' ) : __( 'Open' );
+			label = trackbacksSupported
+				? __( 'Comments only' )
+				: _x( 'Open', 'Adjective: e.g. "Comments are open"' );
 		}
 	} else if ( pingStatus === 'open' ) {
 		label = commentsSupported ? __( 'Pings only' ) : __( 'Pings enabled' );
diff --git a/packages/editor/src/components/post-discussion/style.scss b/packages/editor/src/components/post-discussion/style.scss
index b2d65c9aa7cf3..d5320605579e4 100644
--- a/packages/editor/src/components/post-discussion/style.scss
+++ b/packages/editor/src/components/post-discussion/style.scss
@@ -2,15 +2,6 @@
 	// sidebar width - popover padding - form margin
 	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
 	margin: $grid-unit-10;
-
-	.components-radio-control__option {
-		align-items: flex-start;
-	}
-
-	.components-radio-control__label .components-text {
-		display: block;
-		margin-top: $grid-unit-05;
-	}
 }
 .editor-post-discussion__panel-toggle {
 
diff --git a/packages/editor/src/components/post-excerpt/panel.js b/packages/editor/src/components/post-excerpt/panel.js
index 0c800c1a360b9..9c09796f46704 100644
--- a/packages/editor/src/components/post-excerpt/panel.js
+++ b/packages/editor/src/components/post-excerpt/panel.js
@@ -198,7 +198,7 @@ function PrivateExcerpt() {
 				ref={ setPopoverAnchor }
 				renderToggle={ ( { onToggle } ) => (
 					<Button
-						className="editor-post-excerpt__dropdown__trigger"
+						__next40pxDefaultSize
 						onClick={ onToggle }
 						variant="link"
 					>
diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js
index 5e1874e9b8402..9907eb5dd0f22 100644
--- a/packages/editor/src/components/post-featured-image/index.js
+++ b/packages/editor/src/components/post-featured-image/index.js
@@ -160,6 +160,7 @@ function PostFeaturedImage( {
 						render={ ( { open } ) => (
 							<div className="editor-post-featured-image__container">
 								<Button
+									__next40pxDefaultSize
 									ref={ toggleRef }
 									className={
 										! featuredImageId
@@ -180,6 +181,8 @@ function PostFeaturedImage( {
 											: `editor-post-featured-image-${ featuredImageId }-describedby`
 									}
 									aria-haspopup="dialog"
+									disabled={ isLoading }
+									accessibleWhenDisabled
 								>
 									{ !! featuredImageId && media && (
 										<img
@@ -198,6 +201,7 @@ function PostFeaturedImage( {
 								{ !! featuredImageId && (
 									<HStack className="editor-post-featured-image__actions">
 										<Button
+											__next40pxDefaultSize
 											className="editor-post-featured-image__action"
 											onClick={ open }
 											aria-haspopup="dialog"
@@ -205,6 +209,7 @@ function PostFeaturedImage( {
 											{ __( 'Replace' ) }
 										</Button>
 										<Button
+											__next40pxDefaultSize
 											className="editor-post-featured-image__action"
 											onClick={ () => {
 												onRemoveImage();
diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss
index d3a4fbbcaef68..a14c2ea73a63c 100644
--- a/packages/editor/src/components/post-featured-image/style.scss
+++ b/packages/editor/src/components/post-featured-image/style.scss
@@ -22,7 +22,7 @@
 	}
 
 	.components-drop-zone__content {
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 	}
 
 	// Align text and icons horizontally to avoid clipping when the featured image is not set.
@@ -53,7 +53,7 @@
 }
 
 .editor-post-featured-image__preview {
-	height: auto;
+	height: auto !important;
 	outline: $border-width solid rgba($black, 0.1);
 
 	.editor-post-featured-image__preview-image {
@@ -65,11 +65,6 @@
 }
 
 .editor-post-featured-image__toggle {
-	border-radius: $radius-block-ui;
-	height: 100%;
-	line-height: 20px;
-	padding: $grid-unit-10 0;
-	text-align: center;
 	box-shadow: inset 0 0 0 $border-width $gray-400;
 }
 
diff --git a/packages/editor/src/components/post-format/index.js b/packages/editor/src/components/post-format/index.js
index a61d230a00119..8f7423239600f 100644
--- a/packages/editor/src/components/post-format/index.js
+++ b/packages/editor/src/components/post-format/index.js
@@ -100,6 +100,7 @@ export default function PostFormat() {
 				{ 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/style.scss b/packages/editor/src/components/post-format/style.scss
index ec3a8b1626b54..9c893f36bcc16 100644
--- a/packages/editor/src/components/post-format/style.scss
+++ b/packages/editor/src/components/post-format/style.scss
@@ -7,9 +7,3 @@
 	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
 	margin: $grid-unit-10;
 }
-
-.editor-post-format__options {
-	.components-base-control__field > .components-v-stack {
-		gap: $grid-unit-15;
-	}
-}
diff --git a/packages/editor/src/components/post-last-revision/index.js b/packages/editor/src/components/post-last-revision/index.js
index d0f94e26048d7..c0ce37198c951 100644
--- a/packages/editor/src/components/post-last-revision/index.js
+++ b/packages/editor/src/components/post-last-revision/index.js
@@ -36,6 +36,7 @@ function PostLastRevision() {
 	return (
 		<PostLastRevisionCheck>
 			<Button
+				__next40pxDefaultSize
 				href={ addQueryArgs( 'revision.php', {
 					revision: lastRevisionId,
 				} ) }
diff --git a/packages/editor/src/components/post-locked-modal/index.js b/packages/editor/src/components/post-locked-modal/index.js
index 6f858c13722a2..7bfa2d23fd980 100644
--- a/packages/editor/src/components/post-locked-modal/index.js
+++ b/packages/editor/src/components/post-locked-modal/index.js
@@ -178,6 +178,8 @@ export default function PostLockedModal() {
 			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"
 		>
 			<HStack alignment="top" spacing={ 6 }>
@@ -254,11 +256,19 @@ export default function PostLockedModal() {
 						justify="flex-end"
 					>
 						{ ! isTakeover && (
-							<Button variant="tertiary" href={ unlockUrl }>
+							<Button
+								__next40pxDefaultSize
+								variant="tertiary"
+								href={ unlockUrl }
+							>
 								{ __( 'Take over' ) }
 							</Button>
 						) }
-						<Button variant="primary" href={ allPostsUrl }>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							href={ allPostsUrl }
+						>
 							{ allPostsLabel }
 						</Button>
 					</HStack>
diff --git a/packages/editor/src/components/post-locked-modal/style.scss b/packages/editor/src/components/post-locked-modal/style.scss
index 03e86642493df..7f68002234466 100644
--- a/packages/editor/src/components/post-locked-modal/style.scss
+++ b/packages/editor/src/components/post-locked-modal/style.scss
@@ -3,7 +3,7 @@
 }
 
 .editor-post-locked-modal__avatar {
-	border-radius: $radius-block-ui;
+	border-radius: $radius-round;
 	margin-top: $grid-unit-20;
 	min-width: initial !important;
 }
diff --git a/packages/editor/src/components/post-panel-row/style.scss b/packages/editor/src/components/post-panel-row/style.scss
index f76c586850500..53e0c645f6f06 100644
--- a/packages/editor/src/components/post-panel-row/style.scss
+++ b/packages/editor/src/components/post-panel-row/style.scss
@@ -28,6 +28,7 @@
 		white-space: normal;
 		text-wrap: balance; // Fallback for Safari.
 		text-wrap: pretty;
+		height: auto;
 		min-height: $button-size-compact;
 	}
 
diff --git a/packages/editor/src/components/post-publish-button/index.js b/packages/editor/src/components/post-publish-button/index.js
index 0460b27b616e8..71e18a4d6a9c8 100644
--- a/packages/editor/src/components/post-publish-button/index.js
+++ b/packages/editor/src/components/post-publish-button/index.js
@@ -2,7 +2,7 @@
  * 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';
 
@@ -17,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 =
@@ -28,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 } =
@@ -182,7 +166,6 @@ export class PostPublishButton extends Component {
 		return (
 			<>
 				<Button
-					ref={ this.buttonNode }
 					{ ...componentProps }
 					className={ `${ componentProps.className } editor-post-publish-button__button` }
 					size="compact"
diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js
index 28567c6078021..6a2d393e20c4b 100644
--- a/packages/editor/src/components/post-publish-panel/index.js
+++ b/packages/editor/src/components/post-publish-panel/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { Component, createRef } from '@wordpress/element';
 import {
 	Button,
 	Spinner,
@@ -27,6 +27,20 @@ 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 ) {
@@ -78,21 +92,16 @@ 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
-									onSubmit={ this.onSubmit }
-									forceIsDirty={ forceIsDirty }
-								/>
-							</div>
 							<div className="editor-post-publish-panel__header-cancel-button">
 								<Button
+									ref={ this.cancelButtonNode }
 									accessibleWhenDisabled
 									disabled={ isSavingNonPostEntityChanges }
 									onClick={ onClose }
@@ -102,6 +111,12 @@ export class PostPublishPanel extends Component {
 									{ __( 'Cancel' ) }
 								</Button>
 							</div>
+							<div className="editor-post-publish-panel__header-publish-button">
+								<PostPublishButton
+									onSubmit={ this.onSubmit }
+									forceIsDirty={ forceIsDirty }
+								/>
+							</div>
 						</>
 					) }
 				</div>
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 4555b33dbb9ef..a81168808f1af 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
@@ -25,6 +25,7 @@ const PostFormatSuggestion = ( {
 	onUpdatePostFormat,
 } ) => (
 	<Button
+		__next40pxDefaultSize
 		variant="link"
 		onClick={ () => onUpdatePostFormat( suggestedPostFormat ) }
 	>
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
index 7061ab9c387ee..32ea69c425e0b 100644
--- a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js
+++ b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js
@@ -17,7 +17,7 @@ import { isBlobURL } from '@wordpress/blob';
 /**
  * Internal dependencies
  */
-import { store as editorStore } from '../../store';
+import { fetchMedia } from './media-util';
 
 function flattenBlocks( blocks ) {
 	const result = [];
@@ -30,7 +30,53 @@ function flattenBlocks( blocks ) {
 	return result;
 }
 
-function Image( block ) {
+/**
+ * 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
@@ -38,22 +84,22 @@ function Image( block ) {
 			role="button"
 			aria-label={ __( 'Select image block.' ) }
 			onClick={ () => {
-				selectBlock( block.clientId );
+				selectBlock( clientId );
 			} }
 			onKeyDown={ ( event ) => {
 				if ( event.key === 'Enter' || event.key === ' ' ) {
-					selectBlock( block.clientId );
+					selectBlock( clientId );
 					event.preventDefault();
 				}
 			} }
-			key={ block.clientId }
-			alt={ block.attributes.alt }
-			src={ block.attributes.url }
+			key={ clientId }
+			alt={ alt }
+			src={ url }
 			animate={ { opacity: 1 } }
 			exit={ { opacity: 0, scale: 0 } }
 			style={ {
-				width: '36px',
-				height: '36px',
+				width: '32px',
+				height: '32px',
 				objectFit: 'cover',
 				borderRadius: '2px',
 				cursor: 'pointer',
@@ -63,24 +109,25 @@ function Image( block ) {
 	);
 }
 
-export default function PostFormatPanel() {
+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( editorStore ).getEditorBlocks(),
+			editorBlocks: select( blockEditorStore ).getBlocks(),
 			mediaUpload: select( blockEditorStore ).getSettings().mediaUpload,
 		} ),
 		[]
 	);
-	const externalImages = flattenBlocks( editorBlocks ).filter(
-		( block ) =>
-			block.name === 'core/image' &&
-			block.attributes.url &&
-			! block.attributes.id
+
+	// Get a list of blocks with external media.
+	const blocksWithExternalMedia = flattenBlocks( editorBlocks ).filter(
+		( block ) => hasExternalMedia( block )
 	);
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	if ( ! mediaUpload || ! externalImages.length ) {
+	if ( ! mediaUpload || ! blocksWithExternalMedia.length ) {
 		return null;
 	}
 
@@ -91,18 +138,51 @@ export default function PostFormatPanel() {
 		</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 );
-		Promise.all(
-			externalImages.map( ( image ) =>
-				window
-					.fetch(
-						image.attributes.url.includes( '?' )
-							? image.attributes.url
-							: image.attributes.url + '?'
-					)
-					.then( ( response ) => response.blob() )
-					.then(
+		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( {
@@ -112,19 +192,32 @@ export default function PostFormatPanel() {
 											return;
 										}
 
-										updateBlockAttributes( image.clientId, {
-											id: media.id,
-											url: media.url,
-										} );
-										resolve();
+										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 );
 		} );
@@ -144,19 +237,34 @@ export default function PostFormatPanel() {
 					gap: '8px',
 				} }
 			>
-				<AnimatePresence>
-					{ externalImages.map( ( image ) => {
-						return <Image key={ image.clientId } { ...image } />;
+				<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 ? (
+				{ isUploading || isAnimating ? (
 					<Spinner />
 				) : (
-					<Button variant="primary" onClick={ uploadImages }>
+					<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 0000000000000..995802b0eebb4
--- /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 39f48d3bc811c..29ee1871057ea 100644
--- a/packages/editor/src/components/post-publish-panel/postpublish.js
+++ b/packages/editor/src/components/post-publish-panel/postpublish.js
@@ -44,7 +44,7 @@ const getFuturePostUrl = ( post ) => {
 function CopyButton( { text, onCopy, children } ) {
 	const ref = useCopyToClipboard( text, onCopy );
 	return (
-		<Button variant="secondary" ref={ ref }>
+		<Button __next40pxDefaultSize variant="secondary" ref={ ref }>
 			{ children }
 		</Button>
 	);
@@ -122,6 +122,7 @@ class PostPublishPanelPostpublish extends Component {
 					</p>
 					<div className="post-publish-panel__postpublish-post-address-container">
 						<TextControl
+							__next40pxDefaultSize
 							__nextHasNoMarginBottom
 							className="post-publish-panel__postpublish-post-address"
 							readOnly
@@ -145,12 +146,17 @@ class PostPublishPanelPostpublish extends Component {
 
 					<div className="post-publish-panel__postpublish-buttons">
 						{ ! isScheduled && (
-							<Button variant="primary" href={ link }>
+							<Button
+								variant="primary"
+								href={ link }
+								__next40pxDefaultSize
+							>
 								{ viewPostLabel }
 							</Button>
 						) }
 						<Button
 							variant={ isScheduled ? 'primary' : 'secondary' }
+							__next40pxDefaultSize
 							href={ addLink }
 						>
 							{ addNewPostLabel }
diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
index c319924086b0e..7b07571765178 100644
--- a/packages/editor/src/components/post-publish-panel/style.scss
+++ b/packages/editor/src/components/post-publish-panel/style.scss
@@ -37,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;
@@ -54,6 +55,7 @@
 	display: block;
 	color: $gray-700;
 	font-size: $helptext-font-size;
+	word-break: break-word;
 }
 
 .editor-post-publish-panel__header-publish-button,
@@ -66,12 +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 {
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 7f31c97018d09..b074159ac423d 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
@@ -22,7 +22,7 @@ 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;
 }
@@ -60,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
@@ -120,7 +120,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
                   post address
                 </label>
                 <input
-                  class="components-text-control__input"
+                  class="components-text-control__input is-next-40px-default-size"
                   id="inspector-text-control-0"
                   readonly=""
                   type="text"
@@ -132,7 +132,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
               class="post-publish-panel__postpublish-post-address__copy-button-wrap"
             >
               <button
-                class="components-button is-secondary"
+                class="components-button is-next-40px-default-size is-secondary"
                 type="button"
               >
                 Copy
@@ -143,11 +143,11 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
             class="post-publish-panel__postpublish-buttons"
           >
             <a
-              class="components-button is-primary"
+              class="components-button is-next-40px-default-size is-primary"
               href="https://wordpress.local/sample-page/"
             />
             <a
-              class="components-button is-secondary"
+              class="components-button is-next-40px-default-size is-secondary"
               href="post-new.php?"
             />
           </div>
@@ -214,7 +214,7 @@ 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;
 }
@@ -252,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
@@ -312,7 +312,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
                   post address
                 </label>
                 <input
-                  class="components-text-control__input"
+                  class="components-text-control__input is-next-40px-default-size"
                   id="inspector-text-control-1"
                   readonly=""
                   type="text"
@@ -324,7 +324,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
               class="post-publish-panel__postpublish-post-address__copy-button-wrap"
             >
               <button
-                class="components-button is-secondary"
+                class="components-button is-next-40px-default-size is-secondary"
                 type="button"
               >
                 Copy
@@ -335,11 +335,11 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
             class="post-publish-panel__postpublish-buttons"
           >
             <a
-              class="components-button is-primary"
+              class="components-button is-next-40px-default-size is-primary"
               href="https://wordpress.local/sample-page/"
             />
             <a
-              class="components-button is-secondary"
+              class="components-button is-next-40px-default-size is-secondary"
               href="post-new.php?"
             />
           </div>
@@ -433,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 is-compact"
+          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 is-compact"
+          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>
@@ -586,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 is-compact"
+          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 is-compact"
+          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>
@@ -783,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 is-compact"
+          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 is-compact"
+          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>
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 0000000000000..b91583cc3f17b
--- /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-slug/index.js b/packages/editor/src/components/post-slug/index.js
index cc86405157b88..1a4f8e93d7565 100644
--- a/packages/editor/src/components/post-slug/index.js
+++ b/packages/editor/src/components/post-slug/index.js
@@ -24,6 +24,7 @@ function PostSlugControl() {
 
 	return (
 		<TextControl
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label={ __( 'Slug' ) }
 			autoComplete="off"
diff --git a/packages/editor/src/components/post-status/index.js b/packages/editor/src/components/post-status/index.js
index 11b51bca80aa7..c2bf038875354 100644
--- a/packages/editor/src/components/post-status/index.js
+++ b/packages/editor/src/components/post-status/index.js
@@ -5,7 +5,6 @@ import {
 	Button,
 	CheckboxControl,
 	Dropdown,
-	__experimentalText as Text,
 	__experimentalVStack as VStack,
 	TextControl,
 	RadioControl,
@@ -49,59 +48,29 @@ const postStatusesInfo = {
 
 export const STATUS_OPTIONS = [
 	{
-		label: (
-			<>
-				{ __( 'Draft' ) }
-				<Text variant="muted" size={ 12 }>
-					{ __( 'Not ready to publish.' ) }
-				</Text>
-			</>
-		),
+		label: __( 'Draft' ),
 		value: 'draft',
+		description: __( 'Not ready to publish.' ),
 	},
 	{
-		label: (
-			<>
-				{ __( 'Pending' ) }
-				<Text variant="muted" size={ 12 }>
-					{ __( 'Waiting for review before publishing.' ) }
-				</Text>
-			</>
-		),
+		label: __( 'Pending' ),
 		value: 'pending',
+		description: __( 'Waiting for review before publishing.' ),
 	},
 	{
-		label: (
-			<>
-				{ __( 'Private' ) }
-				<Text variant="muted" size={ 12 }>
-					{ __( 'Only visible to site admins and editors.' ) }
-				</Text>
-			</>
-		),
+		label: __( 'Private' ),
 		value: 'private',
+		description: __( 'Only visible to site admins and editors.' ),
 	},
 	{
-		label: (
-			<>
-				{ __( 'Scheduled' ) }
-				<Text variant="muted" size={ 12 }>
-					{ __( 'Publish automatically on a chosen date.' ) }
-				</Text>
-			</>
-		),
+		label: __( 'Scheduled' ),
 		value: 'future',
+		description: __( 'Publish automatically on a chosen date.' ),
 	},
 	{
-		label: (
-			<>
-				{ __( 'Published' ) }
-				<Text variant="muted" size={ 12 }>
-					{ __( 'Visible to everyone.' ) }
-				</Text>
-			</>
-		),
+		label: __( 'Published' ),
 		value: 'publish',
+		description: __( 'Visible to everyone.' ),
 	},
 ];
 
@@ -202,17 +171,19 @@ export default function PostStatus() {
 					contentClassName="editor-change-status__content"
 					popoverProps={ popoverProps }
 					focusOnMount
-					renderToggle={ ( { onToggle } ) => (
+					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 post status: %s' ),
+								__( 'Change status: %s' ),
 								postStatusesInfo[ status ]?.label
 							) }
+							aria-expanded={ isOpen }
 						>
 							{ postStatusesInfo[ status ]?.label }
 						</Button>
@@ -285,6 +256,7 @@ export default function PostStatus() {
 														id={ passwordInputId }
 														__next40pxDefaultSize
 														__nextHasNoMarginBottom
+														maxLength={ 255 }
 													/>
 												</div>
 											) }
diff --git a/packages/editor/src/components/post-status/style.scss b/packages/editor/src/components/post-status/style.scss
index bfd9de46234da..670dc5fc35999 100644
--- a/packages/editor/src/components/post-status/style.scss
+++ b/packages/editor/src/components/post-status/style.scss
@@ -4,6 +4,11 @@
 	&.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,
@@ -18,25 +23,6 @@
 		padding: $grid-unit-20;
 	}
 
-	.editor-change-status__options {
-		.components-base-control__field > .components-v-stack {
-			gap: $grid-unit-15;
-		}
-
-		// TODO: it's not great to override component styles.. This might be resolved
-		// by the new radio control component.
-		.components-radio-control__option {
-			align-items: flex-start;
-		}
-
-		label {
-			.components-text {
-				display: block;
-				margin-top: $grid-unit-05;
-			}
-		}
-	}
-
 	.editor-change-status__password-legend {
 		padding: 0;
 		margin-bottom: $grid-unit-10;
diff --git a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
index 79039d0a5d0d2..071453f4f3f62 100644
--- a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
+++ b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
@@ -12,6 +12,7 @@ import {
 	withFilters,
 	Flex,
 	FlexItem,
+	SearchControl,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useDebounce } from '@wordpress/compose';
@@ -406,7 +407,8 @@ export function HierarchicalTermSelector( { slug } ) {
 	return (
 		<Flex direction="column" gap="4">
 			{ showFilter && (
-				<TextControl
+				<SearchControl
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ filterLabel }
 					value={ filterValue }
@@ -426,6 +428,7 @@ export function HierarchicalTermSelector( { slug } ) {
 			{ ! loading && hasCreateAction && (
 				<FlexItem>
 					<Button
+						__next40pxDefaultSize
 						onClick={ onToggleForm }
 						className="editor-post-taxonomies__hierarchical-terms-add"
 						aria-expanded={ showForm }
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 36a44fb7f986c..639e5752c8001 100644
--- a/packages/editor/src/components/post-taxonomies/most-used-terms.js
+++ b/packages/editor/src/components/post-taxonomies/most-used-terms.js
@@ -62,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/style.scss b/packages/editor/src/components/post-taxonomies/style.scss
index ce912573c7948..2d888baee0413 100644
--- a/packages/editor/src/components/post-taxonomies/style.scss
+++ b/packages/editor/src/components/post-taxonomies/style.scss
@@ -34,8 +34,4 @@
 		display: inline-block;
 		margin-right: $grid-unit-10;
 	}
-
-	.components-button {
-		font-size: 12px;
-	}
 }
diff --git a/packages/editor/src/components/post-template/block-theme.js b/packages/editor/src/components/post-template/block-theme.js
index 7fcc5ead14f5b..62de10a2c715f 100644
--- a/packages/editor/src/components/post-template/block-theme.js
+++ b/packages/editor/src/components/post-template/block-theme.js
@@ -8,6 +8,7 @@ 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
@@ -43,6 +44,8 @@ export default function BlockThemeControl( { id } ) {
 		};
 	}, [] );
 
+	const { get: getPreference } = useSelect( preferencesStore );
+
 	const { editedRecord: template, hasResolved } = useEntityRecord(
 		'postType',
 		'wp_template',
@@ -75,6 +78,17 @@ export default function BlockThemeControl( { id } ) {
 				},
 		  ]
 		: 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 }
@@ -99,15 +113,7 @@ export default function BlockThemeControl( { id } ) {
 										postType: 'wp_template',
 									} );
 									onClose();
-									createSuccessNotice(
-										__(
-											'Editing template. Changes made here affect all posts and pages that use the template.'
-										),
-										{
-											type: 'snackbar',
-											actions: notificationAction,
-										}
-									);
+									mayShowTemplateEditNotice();
 								} }
 							>
 								{ __( 'Edit template' ) }
diff --git a/packages/editor/src/components/post-template/classic-theme.js b/packages/editor/src/components/post-template/classic-theme.js
index 276c6454fef09..4a65a9b4c7563 100644
--- a/packages/editor/src/components/post-template/classic-theme.js
+++ b/packages/editor/src/components/post-template/classic-theme.js
@@ -177,6 +177,7 @@ function PostTemplateDropdownContent( { onClose } ) {
 			{ canEdit && onNavigateToEntityRecord && (
 				<p>
 					<Button
+						__next40pxDefaultSize
 						variant="link"
 						onClick={ () => {
 							onNavigateToEntityRecord( {
diff --git a/packages/editor/src/components/post-template/create-new-template-modal.js b/packages/editor/src/components/post-template/create-new-template-modal.js
index e6e5ea3f90680..69d31b7f8f714 100644
--- a/packages/editor/src/components/post-template/create-new-template-modal.js
+++ b/packages/editor/src/components/post-template/create-new-template-modal.js
@@ -118,6 +118,7 @@ export default function CreateNewTemplateModal( { onClose } ) {
 			>
 				<VStack spacing="3">
 					<TextControl
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Name' ) }
 						value={ title }
@@ -129,11 +130,16 @@ export default function CreateNewTemplateModal( { onClose } ) {
 						) }
 					/>
 					<HStack justify="right">
-						<Button variant="tertiary" onClick={ cancel }>
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ cancel }
+						>
 							{ __( 'Cancel' ) }
 						</Button>
 
 						<Button
+							__next40pxDefaultSize
 							variant="primary"
 							type="submit"
 							isBusy={ isBusy }
diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js
index 3e333b38eee00..50595d936b36d 100644
--- a/packages/editor/src/components/post-title/index.js
+++ b/packages/editor/src/components/post-title/index.js
@@ -15,7 +15,6 @@ import { pasteHandler } from '@wordpress/blocks';
 import {
 	__unstableUseRichText as useRichText,
 	create,
-	toHTMLString,
 	insert,
 } from '@wordpress/rich-text';
 import { useMergeRefs } from '@wordpress/compose';
@@ -50,9 +49,35 @@ function PostTitle( _, forwardedRef ) {
 	const { clearSelectedBlock, insertBlocks, insertDefaultBlock } =
 		useDispatch( blockEditorStore );
 
-	function onChange( value ) {
-		onUpdate( value.replace( REGEXP_NEWLINES, ' ' ) );
-	}
+	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 );
@@ -130,49 +155,14 @@ function PostTitle( _, forwardedRef ) {
 				onInsertBlockAfter( content );
 			}
 		} else {
-			const value = {
-				...create( { html: title } ),
-				...selection,
-			};
-
 			// 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 } ) );
-			onUpdate( toHTMLString( { value: newValue } ) );
-			setSelection( {
-				start: newValue.start,
-				end: newValue.end,
-			} );
+			onChange( insert( value, create( { html: contentNoHTML } ) ) );
 		}
 	}
 
-	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: 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, {
@@ -192,7 +182,6 @@ function PostTitle( _, forwardedRef ) {
 				onFocus={ onSelect }
 				onBlur={ onUnselect }
 				onKeyDown={ onKeyDown }
-				onKeyPress={ onUnselect }
 				onPaste={ onPaste }
 			/>
 		</PostTypeSupportCheck>
diff --git a/packages/editor/src/components/post-trash/check.js b/packages/editor/src/components/post-trash/check.js
index 8f51df175c898..7edc7c0f18c27 100644
--- a/packages/editor/src/components/post-trash/check.js
+++ b/packages/editor/src/components/post-trash/check.js
@@ -8,6 +8,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { GLOBAL_POST_TYPES } from '../../store/constants';
 
 /**
  * Wrapper component that renders its children only if the post can trashed.
@@ -34,10 +35,12 @@ export default function PostTrashCheck( { children } ) {
 			: false;
 
 		return {
-			canTrashPost: ( ! isNew || postId ) && canUserDelete,
+			canTrashPost:
+				( ! isNew || postId ) &&
+				canUserDelete &&
+				! GLOBAL_POST_TYPES.includes( postType ),
 		};
 	}, [] );
-
 	if ( ! canTrashPost ) {
 		return null;
 	}
diff --git a/packages/editor/src/components/post-trash/index.js b/packages/editor/src/components/post-trash/index.js
index c29dfd66a2d8c..743512e9efd7d 100644
--- a/packages/editor/src/components/post-trash/index.js
+++ b/packages/editor/src/components/post-trash/index.js
@@ -1,31 +1,35 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	Button,
 	__experimentalConfirmDialog as ConfirmDialog,
 } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import PostTrashCheck from './check';
 
 /**
  * Displays the Post Trash Button and Confirm Dialog in the Editor.
  *
+ * @param {?{onActionPerformed: Object}} An object containing the onActionPerformed function.
  * @return {JSX.Element|null} The rendered PostTrash component.
  */
-export default function PostTrash() {
-	const { isNew, isDeleting, postId } = useSelect( ( select ) => {
+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 );
@@ -35,13 +39,18 @@ export default function PostTrash() {
 		return null;
 	}
 
-	const handleConfirm = () => {
+	const handleConfirm = async () => {
 		setShowConfirmDialog( false );
-		trashPost();
+		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 (
-		<>
+		<PostTrashCheck>
 			<Button
 				__next40pxDefaultSize
 				className="editor-post-trash"
@@ -60,12 +69,14 @@ export default function PostTrash() {
 				onConfirm={ handleConfirm }
 				onCancel={ () => setShowConfirmDialog( false ) }
 				confirmButtonText={ __( 'Move to trash' ) }
-				size="medium"
+				size="small"
 			>
-				{ __(
-					'Are you sure you want to move this post to the trash?'
+				{ 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-url/index.js b/packages/editor/src/components/post-url/index.js
index c2b2ac8826b20..8d072fa2eeb5d 100644
--- a/packages/editor/src/components/post-url/index.js
+++ b/packages/editor/src/components/post-url/index.js
@@ -3,7 +3,7 @@
  */
 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 {
@@ -11,6 +11,7 @@ import {
 	Button,
 	__experimentalInputControl as InputControl,
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { store as noticesStore } from '@wordpress/notices';
@@ -83,14 +84,20 @@ export default function PostURL( { onClose } ) {
 			<VStack spacing={ 3 }>
 				{ isEditable && (
 					<div>
-						{ __( 'Customize the last part of the URL. ' ) }
-						<ExternalLink
-							href={ __(
-								'https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink'
-							) }
-						>
-							{ __( 'Learn more.' ) }
-						</ExternalLink>
+						{ createInterpolateElement(
+							__(
+								'Customize the last part of the URL. <a>Learn more.</a>'
+							),
+							{
+								a: (
+									<ExternalLink
+										href={ __(
+											'https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink'
+										) }
+									/>
+								),
+							}
+						) }
 					</div>
 				) }
 				<div>
@@ -103,11 +110,14 @@ export default function PostURL( { onClose } ) {
 								</InputControlPrefixWrapper>
 							}
 							suffix={
-								<Button
-									icon={ copySmall }
-									ref={ copyButtonRef }
-									label={ __( 'Copy' ) }
-								/>
+								<InputControlSuffixWrapper variant="control">
+									<Button
+										icon={ copySmall }
+										ref={ copyButtonRef }
+										size="small"
+										label="Copy"
+									/>
+								</InputControlSuffixWrapper>
 							}
 							label={ __( 'Link' ) }
 							hideLabelFromVision
diff --git a/packages/editor/src/components/post-url/panel.js b/packages/editor/src/components/post-url/panel.js
index be32b40eaf104..aca36566c0472 100644
--- a/packages/editor/src/components/post-url/panel.js
+++ b/packages/editor/src/components/post-url/panel.js
@@ -3,7 +3,11 @@
  */
 import { useMemo, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { Dropdown, Button } from '@wordpress/components';
+import {
+	Dropdown,
+	Button,
+	__experimentalTruncate as Truncate,
+} from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { safeDecodeURIComponent } from '@wordpress/url';
 import { store as coreStore } from '@wordpress/core-data';
@@ -86,7 +90,9 @@ function PostURLToggle( { isOpen, onClick } ) {
 			aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
 			onClick={ onClick }
 		>
-			{ isFrontPage ? postLink : <>/{ decodedSlug }</> }
+			<Truncate numberOfLines={ 1 }>
+				{ isFrontPage ? postLink : `/${ decodedSlug }` }
+			</Truncate>
 		</Button>
 	);
 }
diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js
index f3378d76d994b..a8cfd8245522c 100644
--- a/packages/editor/src/components/preferences-modal/index.js
+++ b/packages/editor/src/components/preferences-modal/index.js
@@ -26,6 +26,7 @@ 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,
@@ -57,214 +58,267 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 	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 && (
+		() =>
+			[
+				{
+					name: 'general',
+					tabLabel: __( 'General' ),
+					content: (
+						<>
+							<PreferencesModalSection
+								title={ __( 'Interface' ) }
+							>
 								<PreferenceToggleControl
 									scope="core"
-									featureName="showBlockBreadcrumbs"
+									featureName="showListViewByDefault"
 									help={ __(
-										'Display the block hierarchy trail at the bottom of the editor.'
+										'Opens the List View sidebar by default.'
 									) }
-									label={ __( 'Show block breadcrumbs' ) }
+									label={ __( 'Always open List View' ) }
 								/>
-							) }
-							<PreferenceToggleControl
-								scope="core"
-								featureName="allowRightClickOverrides"
-								help={ __(
-									'Allows contextual List View menus via right-click, overriding browser defaults.'
-								) }
-								label={ __(
-									'Allow right-click contextual menus'
-								) }
-							/>
-						</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 }` }
+								{ showBlockBreadcrumbsOption && (
+									<PreferenceToggleControl
+										scope="core"
+										featureName="showBlockBreadcrumbs"
+										help={ __(
+											'Display the block hierarchy trail at the bottom of the editor.'
+										) }
+										label={ __( 'Show block breadcrumbs' ) }
 									/>
 								) }
-							/>
-							<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"
+								<PreferenceToggleControl
+									scope="core"
+									featureName="allowRightClickOverrides"
+									help={ __(
+										'Allows contextual List View menus via right-click, overriding browser defaults.'
+									) }
+									label={ __(
+										'Allow right-click contextual menus'
+									) }
 								/>
-							</PageAttributesCheck>
-						</PreferencesModalSection>
-						{ isLargeViewport && (
+								{ hasStarterPatterns && (
+									<PreferenceToggleControl
+										scope="core"
+										featureName="enableChoosePatternModal"
+										help={ __(
+											'Shows starter patterns when creating a new page.'
+										) }
+										label={ __( 'Show starter patterns' ) }
+									/>
+								) }
+							</PreferencesModalSection>
 							<PreferencesModalSection
-								title={ __( 'Publishing' ) }
+								title={ __( 'Document settings' ) }
+								description={ __(
+									'Select what settings are shown in the document panel.'
+								) }
 							>
-								<EnablePublishSidebarOption
-									help={ __(
-										'Review settings, such as visibility and tags.'
+								<EnablePluginDocumentSettingPanelOption.Slot />
+								<PostTaxonomies
+									taxonomyWrapper={ ( content, taxonomy ) => (
+										<EnablePanelOption
+											label={ taxonomy.labels.menu_name }
+											panelName={ `taxonomy-panel-${ taxonomy.slug }` }
+										/>
 									) }
-									label={ __( 'Enable pre-publish checks' ) }
 								/>
+								<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>
-						) }
-						{ 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.'
+							{ isLargeViewport && (
+								<PreferencesModalSection
+									title={ __( 'Publishing' ) }
+								>
+									<EnablePublishSidebarOption
+										help={ __(
+											'Review settings, such as visibility and tags.'
+										) }
+										label={ __(
+											'Enable pre-publish checks'
+										) }
+									/>
+								</PreferencesModalSection>
 							) }
-							label={ __( 'Spotlight mode' ) }
-						/>
-						{ extraSections?.appearance }
-					</PreferencesModalSection>
-				),
-			},
-			{
-				name: 'accessibility',
-				tabLabel: __( 'Accessibility' ),
-				content: (
-					<>
+							{ extraSections?.general }
+						</>
+					),
+				},
+				{
+					name: 'appearance',
+					tabLabel: __( 'Appearance' ),
+					content: (
 						<PreferencesModalSection
-							title={ __( 'Navigation' ) }
+							title={ __( 'Appearance' ) }
 							description={ __(
-								'Optimize the editing experience for enhanced control.'
+								'Customize the editor interface to suit your needs.'
 							) }
 						>
 							<PreferenceToggleControl
 								scope="core"
-								featureName="keepCaretInsideBlock"
+								featureName="fixedToolbar"
+								onToggle={ () =>
+									setPreference(
+										'core',
+										'distractionFree',
+										false
+									)
+								}
 								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'
+									'Access all block and document tools in a single place.'
 								) }
+								label={ __( 'Top toolbar' ) }
 							/>
-						</PreferencesModalSection>
-						<PreferencesModalSection title={ __( 'Interface' ) }>
 							<PreferenceToggleControl
 								scope="core"
-								featureName="showIconLabels"
-								label={ __( 'Show button text labels' ) }
+								featureName="distractionFree"
+								onToggle={ () => {
+									setPreference(
+										'core',
+										'fixedToolbar',
+										true
+									);
+									setIsInserterOpened( false );
+									setIsListViewOpened( false );
+								} }
 								help={ __(
-									'Show text instead of icons on buttons across the interface.'
+									'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
 								) }
+								label={ __( 'Distraction free' ) }
 							/>
-						</PreferencesModalSection>
-					</>
-				),
-			},
-			{
-				name: 'blocks',
-				tabLabel: __( 'Blocks' ),
-				content: (
-					<>
-						<PreferencesModalSection title={ __( 'Inserter' ) }>
 							<PreferenceToggleControl
 								scope="core"
-								featureName="mostUsedBlocks"
+								featureName="focusMode"
 								help={ __(
-									'Adds a category with the most frequently used blocks in the inserter.'
+									'Highlights the current block and fades other content.'
 								) }
-								label={ __( 'Show most used blocks' ) }
+								label={ __( 'Spotlight mode' ) }
 							/>
+							{ extraSections?.appearance }
 						</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."
-							) }
-						>
-							<BlockManager />
-						</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."
+								) }
+							>
+								<BlockManager />
+							</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,
@@ -272,6 +326,7 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 			setIsListViewOpened,
 			setPreference,
 			isLargeViewport,
+			hasStarterPatterns,
 		]
 	);
 
diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index bc652ea4015c1..0fbb2beb62665 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -6,37 +11,50 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
+	MenuItemsChoice,
 	VisuallyHidden,
 	Icon,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { check, desktop, mobile, tablet, external } from '@wordpress/icons';
+import { desktop, mobile, tablet, external } 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 } =
 		useSelect( ( select ) => {
 			const { getDeviceType, getCurrentPostType } = select( editorStore );
-			const { getUnstableBase, getPostType } = select( coreStore );
+			const { getEntityRecord, getPostType } = select( coreStore );
 			const { get } = select( preferencesStore );
 			const _currentPostType = getCurrentPostType();
 			return {
 				deviceType: getDeviceType(),
-				homeUrl: getUnstableBase()?.home,
+				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
 				isTemplate: _currentPostType === 'wp_template',
 				isViewable: getPostType( _currentPostType )?.viewable ?? false,
 				showIconLabels: get( 'core', 'showIconLabels' ),
 			};
 		}, [] );
 	const { setDeviceType } = useDispatch( editorStore );
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
+
+	const handleDevicePreviewChange = ( newDeviceType ) => {
+		setDeviceType( newDeviceType );
+		__unstableSetEditorMode( 'edit' );
+		resetZoomLevel();
+	};
+
 	const isMobile = useViewportMatch( 'medium', '<' );
 	if ( isMobile ) {
 		return null;
@@ -47,6 +65,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	};
 	const toggleProps = {
 		className: 'editor-preview-dropdown__toggle',
+		iconPosition: 'right',
 		size: 'compact',
 		showTooltip: ! showIconLabels,
 		disabled,
@@ -57,14 +76,40 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	};
 
 	const deviceIcons = {
+		desktop,
 		mobile,
 		tablet,
-		desktop,
 	};
 
+	/**
+	 * 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="editor-preview-dropdown"
+			className={ clsx(
+				'editor-preview-dropdown',
+				`editor-preview-dropdown--${ deviceType.toLowerCase() }`
+			) }
 			popoverProps={ popoverProps }
 			toggleProps={ toggleProps }
 			menuProps={ menuProps }
@@ -75,24 +120,11 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			{ ( { onClose } ) => (
 				<>
 					<MenuGroup>
-						<MenuItem
-							onClick={ () => setDeviceType( 'Desktop' ) }
-							icon={ deviceType === 'Desktop' && check }
-						>
-							{ __( 'Desktop' ) }
-						</MenuItem>
-						<MenuItem
-							onClick={ () => setDeviceType( 'Tablet' ) }
-							icon={ deviceType === 'Tablet' && check }
-						>
-							{ __( 'Tablet' ) }
-						</MenuItem>
-						<MenuItem
-							onClick={ () => setDeviceType( 'Mobile' ) }
-							icon={ deviceType === 'Mobile' && check }
-						>
-							{ __( 'Mobile' ) }
-						</MenuItem>
+						<MenuItemsChoice
+							choices={ choices }
+							value={ deviceType }
+							onSelect={ handleDevicePreviewChange }
+						/>
 					</MenuGroup>
 					{ isTemplate && (
 						<MenuGroup>
@@ -118,6 +150,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 								className="editor-preview-dropdown__button-external"
 								role="menuitem"
 								forceIsAutosaveable={ forceIsAutosaveable }
+								aria-label={ __( 'Preview in new tab' ) }
 								textContent={
 									<>
 										{ __( 'Preview in new tab' ) }
@@ -128,6 +161,11 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 							/>
 						</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
index 43fa7cdd8ecd9..c117a4239e9df 100644
--- a/packages/editor/src/components/preview-dropdown/style.scss
+++ b/packages/editor/src/components/preview-dropdown/style.scss
@@ -1,3 +1,8 @@
+.editor-preview-dropdown .editor-preview-dropdown__toggle.has-icon.has-text {
+	padding-right: 4px;
+	padding-left: 6px;
+}
+
 .editor-preview-dropdown__button-external {
 	width: 100%;
 	display: flex;
diff --git a/packages/editor/src/components/provider/disable-non-page-content-blocks.js b/packages/editor/src/components/provider/disable-non-page-content-blocks.js
index 4ee3b9a8b2703..ae4fd1075fc26 100644
--- a/packages/editor/src/components/provider/disable-non-page-content-blocks.js
+++ b/packages/editor/src/components/provider/disable-non-page-content-blocks.js
@@ -4,48 +4,31 @@
 import { useSelect, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
-import { applyFilters } from '@wordpress/hooks';
 
-const DEFAULT_CONTENT_ONLY_BLOCKS = [
-	'core/post-title',
-	'core/post-featured-image',
-	'core/post-content',
-	'core/template-part',
-];
+/**
+ * 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 contentOnlyBlocks = applyFilters(
-		'editor.postContentBlockTypes',
-		DEFAULT_CONTENT_ONLY_BLOCKS
-	);
-
-	// Note that there are two separate subscription because the result for each
-	// returns a new array.
-	const contentOnlyIds = useSelect( ( select ) => {
-		const { getBlocksByName, getBlockParents, getBlockName } =
-			select( blockEditorStore );
-		return getBlocksByName( contentOnlyBlocks ).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.
-					! contentOnlyBlocks.includes( parentBlockName )
-				);
-			} )
-		);
-	}, [] );
-	const disabledIds = useSelect( ( select ) => {
-		const { getBlocksByName, getBlockOrder } = select( blockEditorStore );
-		return getBlocksByName( [ 'core/template-part' ] ).flatMap(
-			( clientId ) => getBlockOrder( clientId )
-		);
+	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();
 
@@ -58,6 +41,9 @@ export default function DisableNonPageContentBlocks() {
 			for ( const clientId of contentOnlyIds ) {
 				setBlockEditingMode( clientId, 'contentOnly' );
 			}
+			for ( const clientId of templateParts ) {
+				setBlockEditingMode( clientId, 'contentOnly' );
+			}
 			for ( const clientId of disabledIds ) {
 				setBlockEditingMode( clientId, 'disabled' );
 			}
@@ -69,12 +55,15 @@ export default function DisableNonPageContentBlocks() {
 				for ( const clientId of contentOnlyIds ) {
 					unsetBlockEditingMode( clientId );
 				}
+				for ( const clientId of templateParts ) {
+					unsetBlockEditingMode( clientId );
+				}
 				for ( const clientId of disabledIds ) {
 					unsetBlockEditingMode( clientId );
 				}
 			} );
 		};
-	}, [ contentOnlyIds, disabledIds, registry ] );
+	}, [ 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 aaf25621d3324..0c45dbc5e7199 100644
--- a/packages/editor/src/components/provider/index.js
+++ b/packages/editor/src/components/provider/index.js
@@ -4,7 +4,11 @@
 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,
@@ -48,7 +52,6 @@ const noop = () => {};
  */
 const NON_CONTEXTUAL_POST_TYPES = [
 	'wp_block',
-	'wp_template',
 	'wp_navigation',
 	'wp_template_part',
 ];
@@ -161,31 +164,52 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		BlockEditorProviderComponent = ExperimentalBlockEditorProvider,
 		__unstableTemplate: template,
 	} ) => {
-		const { editorSettings, selection, isReady, mode } = useSelect(
-			( select ) => {
+		const { editorSettings, selection, isReady, mode, postTypes } =
+			useSelect( ( select ) => {
 				const {
 					getEditorSettings,
 					getEditorSelection,
 					getRenderingMode,
 					__unstableIsEditorReady,
 				} = select( editorStore );
+				const { getPostTypes } = select( coreStore );
+
 				return {
 					editorSettings: getEditorSettings(),
 					isReady: __unstableIsEditorReady(),
 					mode: getRenderingMode(),
 					selection: getEditorSelection(),
+					postTypes: getPostTypes( { per_page: -1 } ),
 				};
-			},
-			[]
-		);
+			}, [] );
 		const shouldRenderTemplate = !! template && mode !== 'post-only';
 		const rootLevelPost = shouldRenderTemplate ? template : post;
 		const defaultBlockContext = useMemo( () => {
-			const postContext =
+			const postContext = {};
+			// If it is a template, try to inherit the post type from the slug.
+			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 slug.
+					const postTypesSlugs =
+						postTypes?.map( ( entity ) => entity.slug ) || [];
+					const match = post.slug.match(
+						`^single-(${ postTypesSlugs.join( '|' ) })(?:-.+)?$`
+					);
+					if ( match ) {
+						postContext.postType = match[ 1 ];
+					}
+				}
+			} else if (
 				! NON_CONTEXTUAL_POST_TYPES.includes( rootLevelPost.type ) ||
 				shouldRenderTemplate
-					? { postId: post.id, postType: post.type }
-					: {};
+			) {
+				postContext.postId = post.id;
+				postContext.postType = post.type;
+			}
 
 			return {
 				...postContext,
@@ -200,6 +224,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			post.type,
 			rootLevelPost.type,
 			rootLevelPost.slug,
+			postTypes,
 		] );
 		const { id, type } = rootLevelPost;
 		const blockEditorSettings = useBlockEditorSettings(
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 231e2df8f91e4..12a67e44262b2 100644
--- a/packages/editor/src/components/provider/use-block-editor-settings.js
+++ b/packages/editor/src/components/provider/use-block-editor-settings.js
@@ -23,18 +23,23 @@ import {
 import inserterMediaCategories from '../media-categories';
 import { mediaUpload } from '../../utils';
 import { store as editorStore } from '../../store';
-import { lock, unlock } from '../../lock-unlock';
+import { unlock } from '../../lock-unlock';
 import { useGlobalStylesContext } from '../global-styles-provider';
 
-const EMPTY_BLOCKS_LIST = [];
 const EMPTY_OBJECT = {};
 
 function __experimentalReusableBlocksSelect( select ) {
-	return (
-		select( coreStore ).getEntityRecords( 'postType', 'wp_block', {
-			per_page: -1,
-		} ) ?? EMPTY_BLOCKS_LIST
-	);
+	const { getEntityRecords, hasFinishedResolution } = select( coreStore );
+	const reusableBlocks = getEntityRecords( 'postType', 'wp_block', {
+		per_page: -1,
+	} );
+	return hasFinishedResolution( 'getEntityRecords', [
+		'postType',
+		'wp_block',
+		{ per_page: -1 },
+	] )
+		? reusableBlocks
+		: undefined;
 }
 
 const BLOCK_EDITOR_SETTINGS = [
@@ -47,6 +52,7 @@ const BLOCK_EDITOR_SETTINGS = [
 	'allowedMimeTypes',
 	'bodyPlaceholder',
 	'canLockBlocks',
+	'canUpdateBlockBindings',
 	'capabilities',
 	'clearBlockSelection',
 	'codeEditingEnabled',
@@ -74,7 +80,6 @@ const BLOCK_EDITOR_SETTINGS = [
 	'postContentAttributes',
 	'postsPerPage',
 	'readOnly',
-	'sectionRootClientId',
 	'styles',
 	'titlePlaceholder',
 	'supportsLayout',
@@ -90,6 +95,7 @@ const {
 	globalStylesLinksDataKey,
 	selectBlockPatternsKey,
 	reusableBlocksSelectKey,
+	sectionRootClientIdKey,
 } = unlock( privateApis );
 
 /**
@@ -311,7 +317,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			__experimentalUndo: undo,
 			// Check whether we want all site editor frames to have outlines
 			// including the navigation / pattern / parts editors.
-			outlineMode: postType === 'wp_template',
+			outlineMode: ! isDistractionFree && postType === 'wp_template',
 			// Check these two properties: they were not present in the site editor.
 			__experimentalCreatePageEntity: createPageEntity,
 			__experimentalUserCanCreatePages: userCanCreatePages,
@@ -325,10 +331,9 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 					? [ [ 'core/navigation', {}, [] ] ]
 					: settings.template,
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
+			[ sectionRootClientIdKey ]: sectionRootClientId,
 		};
-		lock( blockEditorSettings, {
-			sectionRootClientId,
-		} );
+
 		return blockEditorSettings;
 	}, [
 		allowedBlockTypes,
@@ -353,6 +358,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		setIsInserterOpened,
 		sectionRootClientId,
 		globalStylesData,
+		globalStylesLinksData,
 	] );
 }
 
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 0000000000000..bdd277157e47e
--- /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/resizable-editor/resize-handle.js b/packages/editor/src/components/resizable-editor/resize-handle.js
index dbba31f6f998b..ccd903d0f3a17 100644
--- a/packages/editor/src/components/resizable-editor/resize-handle.js
+++ b/packages/editor/src/components/resizable-editor/resize-handle.js
@@ -15,6 +15,11 @@ 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 )
diff --git a/packages/editor/src/components/resizable-editor/style.scss b/packages/editor/src/components/resizable-editor/style.scss
index 91ff1144c4179..364fdf39ad315 100644
--- a/packages/editor/src/components/resizable-editor/style.scss
+++ b/packages/editor/src/components/resizable-editor/style.scss
@@ -16,7 +16,7 @@
 	cursor: ew-resize;
 	outline: none;
 	background: none;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-full;
 	border: 0;
 	height: 100px;
 
@@ -29,7 +29,7 @@
 		content: "";
 		width: $grid-unit-05;
 		background-color: rgba($gray-700, 0.4);
-		border-radius: $radius-block-ui;
+		border-radius: $radius-full;
 	}
 
 	&.is-left {
diff --git a/packages/editor/src/components/save-publish-panels/index.js b/packages/editor/src/components/save-publish-panels/index.js
index 139ebd54bee95..d95d9f3592890 100644
--- a/packages/editor/src/components/save-publish-panels/index.js
+++ b/packages/editor/src/components/save-publish-panels/index.js
@@ -71,8 +71,8 @@ export default function SavePublishPanels( {
 		unmountableContent = (
 			<div className="editor-layout__toggle-publish-panel">
 				<Button
+					__next40pxDefaultSize
 					variant="secondary"
-					className="editor-layout__toggle-publish-panel-button"
 					onClick={ togglePublishSidebar }
 					aria-expanded={ false }
 				>
@@ -84,8 +84,8 @@ export default function SavePublishPanels( {
 		unmountableContent = (
 			<div className="editor-layout__toggle-entities-saved-states-panel">
 				<Button
+					__next40pxDefaultSize
 					variant="secondary"
-					className="editor-layout__toggle-entities-saved-states-panel-button"
 					onClick={ openEntitiesSavedStates }
 					aria-expanded={ false }
 					disabled={ ! isDirty }
diff --git a/packages/editor/src/components/save-publish-panels/style.scss b/packages/editor/src/components/save-publish-panels/style.scss
index 74dcf113f0479..1de6420a0a683 100644
--- a/packages/editor/src/components/save-publish-panels/style.scss
+++ b/packages/editor/src/components/save-publish-panels/style.scss
@@ -3,7 +3,7 @@
 .editor-layout__toggle-sidebar-panel,
 .editor-layout__toggle-entities-saved-states-panel {
 	z-index: z-index(".editor-layout__toggle-sidebar-panel");
-	position: fixed !important; // Need to override the default relative positionning
+	position: fixed !important; // Necessary to override the default relative positioning.
 	top: -9999em;
 	bottom: auto;
 	left: auto;
@@ -11,8 +11,8 @@
 	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
+	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;
diff --git a/packages/editor/src/components/sidebar/index.js b/packages/editor/src/components/sidebar/index.js
index dbd33459b7f0f..efca709e0eec7 100644
--- a/packages/editor/src/components/sidebar/index.js
+++ b/packages/editor/src/components/sidebar/index.js
@@ -51,7 +51,6 @@ const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
 const SidebarContent = ( {
 	tabName,
 	keyboardShortcut,
-	renderingMode,
 	onActionPerformed,
 	extraPanels,
 } ) => {
@@ -112,7 +111,7 @@ const SidebarContent = ( {
 				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
 					<PostSummary onActionPerformed={ onActionPerformed } />
 					<PluginDocumentSettingPanel.Slot />
-					<TemplateContentPanel renderingMode={ renderingMode } />
+					<TemplateContentPanel />
 					<TemplatePartContentPanel />
 					<PostTransformPanel />
 					<PostTaxonomiesPanel />
@@ -129,7 +128,7 @@ const SidebarContent = ( {
 
 const Sidebar = ( { extraPanels, onActionPerformed } ) => {
 	useAutoSwitchEditorSidebars();
-	const { tabName, keyboardShortcut, showSummary, renderingMode } = useSelect(
+	const { tabName, keyboardShortcut, showSummary } = useSelect(
 		( select ) => {
 			const shortcut = select(
 				keyboardShortcutsStore
@@ -158,7 +157,6 @@ const Sidebar = ( { extraPanels, onActionPerformed } ) => {
 					TEMPLATE_PART_POST_TYPE,
 					NAVIGATION_POST_TYPE,
 				].includes( select( editorStore ).getCurrentPostType() ),
-				renderingMode: select( editorStore ).getRenderingMode(),
 			};
 		},
 		[]
@@ -185,7 +183,6 @@ const Sidebar = ( { extraPanels, onActionPerformed } ) => {
 				tabName={ tabName }
 				keyboardShortcut={ keyboardShortcut }
 				showSummary={ showSummary }
-				renderingMode={ renderingMode }
 				onActionPerformed={ onActionPerformed }
 				extraPanels={ extraPanels }
 			/>
diff --git a/packages/editor/src/components/sidebar/post-summary.js b/packages/editor/src/components/sidebar/post-summary.js
index a6a95d36388ba..72f1080770fd9 100644
--- a/packages/editor/src/components/sidebar/post-summary.js
+++ b/packages/editor/src/components/sidebar/post-summary.js
@@ -8,7 +8,6 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import PluginPostStatusInfo from '../plugin-post-status-info';
-import PostActions from '../post-actions';
 import PostAuthorPanel from '../post-author/panel';
 import PostCardPanel from '../post-card-panel';
 import PostContentInformation from '../post-content-information';
@@ -29,6 +28,7 @@ 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
@@ -36,16 +36,23 @@ import { PrivatePostLastRevision } from '../post-last-revision';
 const PANEL_NAME = 'post-status';
 
 export default function PostSummary( { onActionPerformed } ) {
-	const { isRemovedPostStatusPanel } = useSelect( ( select ) => {
-		// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
-		// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
-		const { isEditorPanelRemoved, getCurrentPostType } =
-			select( editorStore );
-		return {
-			isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ),
-			postType: getCurrentPostType(),
-		};
-	}, [] );
+	const { isRemovedPostStatusPanel, postType, postId } = useSelect(
+		( select ) => {
+			// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
+			// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
+			const {
+				isEditorPanelRemoved,
+				getCurrentPostType,
+				getCurrentPostId,
+			} = select( editorStore );
+			return {
+				isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ),
+				postType: getCurrentPostType(),
+				postId: getCurrentPostId(),
+			};
+		},
+		[]
+	);
 
 	return (
 		<PostPanelSection className="editor-post-summary">
@@ -54,11 +61,9 @@ export default function PostSummary( { onActionPerformed } ) {
 					<>
 						<VStack spacing={ 4 }>
 							<PostCardPanel
-								actions={
-									<PostActions
-										onActionPerformed={ onActionPerformed }
-									/>
-								}
+								postType={ postType }
+								postId={ postId }
+								onActionPerformed={ onActionPerformed }
 							/>
 							<PostFeaturedImagePanel withPanelBody={ false } />
 							<PostExcerptPanel />
@@ -83,6 +88,9 @@ export default function PostSummary( { onActionPerformed } ) {
 										<SiteDiscussion />
 										<PostFormatPanel />
 									</VStack>
+									<PostTrash
+										onActionPerformed={ onActionPerformed }
+									/>
 									{ fills }
 								</VStack>
 							) }
diff --git a/packages/editor/src/components/site-discussion/index.js b/packages/editor/src/components/site-discussion/index.js
index b80b44b1f59c1..5b4d213148341 100644
--- a/packages/editor/src/components/site-discussion/index.js
+++ b/packages/editor/src/components/site-discussion/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import {
@@ -23,29 +23,17 @@ import { store as editorStore } from '../../store';
 
 const COMMENT_OPTIONS = [
 	{
-		label: (
-			<>
-				{ __( 'Open' ) }
-				<Text variant="muted" size={ 12 }>
-					{ __( 'Visitors can add new comments and replies.' ) }
-				</Text>
-			</>
-		),
+		label: _x( 'Open', 'Adjective: e.g. "Comments are open"' ),
 		value: 'open',
+		description: __( 'Visitors can add new comments and replies.' ),
 	},
 	{
-		label: (
-			<>
-				{ __( 'Closed' ) }
-				<Text variant="muted" size={ 12 }>
-					{ __( 'Visitors cannot add new comments or replies.' ) }
-				</Text>
-				<Text variant="muted" size={ 12 }>
-					{ __( 'Existing comments remain visible.' ) }
-				</Text>
-			</>
-		),
+		label: __( 'Closed' ),
 		value: '',
+		description: [
+			__( 'Visitors cannot add new comments or replies.' ),
+			__( 'Existing comments remain visible.' ),
+		].join( ' ' ),
 	},
 ];
 
diff --git a/packages/editor/src/components/site-discussion/style.scss b/packages/editor/src/components/site-discussion/style.scss
index 2c54424207ea5..dc0608f0cf3ab 100644
--- a/packages/editor/src/components/site-discussion/style.scss
+++ b/packages/editor/src/components/site-discussion/style.scss
@@ -3,17 +3,3 @@
 	padding: $grid-unit-20;
 }
 
-.editor-site-discussion__options {
-	// TODO: it's not great to override component styles.. This might be resolved
-	// by the new radio control component.
-	.components-radio-control__option {
-		align-items: flex-start;
-	}
-
-	label {
-		.components-text {
-			display: block;
-			margin-top: $grid-unit-05;
-		}
-	}
-}
diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js
index d888d1ccc4342..07fee67fbed19 100644
--- a/packages/editor/src/components/start-page-options/index.js
+++ b/packages/editor/src/components/start-page-options/index.js
@@ -3,7 +3,7 @@
  */
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState, useMemo, useEffect } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	__experimentalBlockPatternsList as BlockPatternsList,
@@ -12,6 +12,8 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useAsyncList } from '@wordpress/compose';
 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
@@ -19,7 +21,7 @@ import { __unstableSerializeAndClean } from '@wordpress/blocks';
 import { store as editorStore } from '../../store';
 import { TEMPLATE_POST_TYPE } from '../../store/constants';
 
-function useStartPatterns() {
+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.
@@ -45,8 +47,14 @@ function useStartPatterns() {
 	);
 
 	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.
+		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 ) ||
@@ -110,30 +118,24 @@ function StartPageOptionsModal( { onClose } ) {
 
 export default function StartPageOptions() {
 	const [ isClosed, setIsClosed ] = useState( false );
-	const { shouldEnableModal, postType, postId } = useSelect( ( select ) => {
-		const {
-			isEditedPostDirty,
-			isEditedPostEmpty,
-			getCurrentPostType,
-			getCurrentPostId,
-		} = select( editorStore );
-		const _postType = getCurrentPostType();
-
-		return {
-			shouldEnableModal:
-				! isEditedPostDirty() &&
-				isEditedPostEmpty() &&
-				TEMPLATE_POST_TYPE !== _postType,
-			postType: _postType,
-			postId: getCurrentPostId(),
-		};
+	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()
+		);
 	}, [] );
 
-	useEffect( () => {
-		// Should reset the modal state when navigating to a new page/post.
-		setIsClosed( false );
-	}, [ postType, postId ] );
-
 	if ( ! shouldEnableModal || isClosed ) {
 		return null;
 	}
diff --git a/packages/editor/src/components/start-template-options/index.js b/packages/editor/src/components/start-template-options/index.js
index e350ca9c607c3..3651c5c029a2c 100644
--- a/packages/editor/src/components/start-template-options/index.js
+++ b/packages/editor/src/components/start-template-options/index.js
@@ -155,7 +155,11 @@ function StartModal( { slug, isCustom, onClose, postType } ) {
 				expanded={ false }
 			>
 				<FlexItem>
-					<Button variant="tertiary" onClick={ onClose }>
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ onClose }
+					>
 						{ __( 'Skip' ) }
 					</Button>
 				</FlexItem>
diff --git a/packages/editor/src/components/table-of-contents/index.js b/packages/editor/src/components/table-of-contents/index.js
index 74a535240833d..6fd83557b13ab 100644
--- a/packages/editor/src/components/table-of-contents/index.js
+++ b/packages/editor/src/components/table-of-contents/index.js
@@ -30,6 +30,7 @@ function TableOfContents(
 			contentClassName="table-of-contents__popover"
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
+					__next40pxDefaultSize
 					{ ...props }
 					ref={ ref }
 					onClick={ hasBlocks ? onToggle : undefined }
diff --git a/packages/editor/src/components/template-content-panel/index.js b/packages/editor/src/components/template-content-panel/index.js
index 14532387ecd05..41e170e76daef 100644
--- a/packages/editor/src/components/template-content-panel/index.js
+++ b/packages/editor/src/components/template-content-panel/index.js
@@ -2,13 +2,12 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+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
@@ -19,31 +18,51 @@ import { store as editorStore } from '../../store';
 
 const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
 
-const PAGE_CONTENT_BLOCKS = [
-	'core/post-content',
-	'core/post-featured-image',
+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( { renderingMode } ) {
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
-	const { clientIds, postType } = useSelect( ( select ) => {
-		const { getBlocksByName } = select( blockEditorStore );
-		const { getCurrentPostType } = select( editorStore );
-		const _postType = getCurrentPostType();
-		return {
-			postType: _postType,
-			clientIds: getBlocksByName(
-				TEMPLATE_POST_TYPE === _postType
-					? TEMPLATE_PART_BLOCK
-					: PAGE_CONTENT_BLOCKS
+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 ) {
+	if (
+		( renderingMode === 'post-only' && postType !== TEMPLATE_POST_TYPE ) ||
+		clientIds.length === 0
+	) {
 		return null;
 	}
 
diff --git a/packages/editor/src/components/text-editor/index.js b/packages/editor/src/components/text-editor/index.js
index b65a958249b6f..fa0688859b5a6 100644
--- a/packages/editor/src/components/text-editor/index.js
+++ b/packages/editor/src/components/text-editor/index.js
@@ -40,6 +40,7 @@ export default function TextEditor( { autoFocus = false } ) {
 				<div className="editor-text-editor__toolbar">
 					<h2>{ __( 'Editing code' ) }</h2>
 					<Button
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ () => switchEditorMode( 'visual' ) }
 						shortcut={ shortcut }
diff --git a/packages/editor/src/components/text-editor/style.scss b/packages/editor/src/components/text-editor/style.scss
index c8589fed6de6e..9b2748e08fc5c 100644
--- a/packages/editor/src/components/text-editor/style.scss
+++ b/packages/editor/src/components/text-editor/style.scss
@@ -63,7 +63,7 @@
 	}
 
 	h2 {
-		line-height: $button-size;
+		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/visual-editor/edit-template-blocks-notification.js b/packages/editor/src/components/visual-editor/edit-template-blocks-notification.js
index 449834e3ab61c..3ccbe79127c01 100644
--- a/packages/editor/src/components/visual-editor/edit-template-blocks-notification.js
+++ b/packages/editor/src/components/visual-editor/edit-template-blocks-notification.js
@@ -55,7 +55,10 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 				return;
 			}
 
-			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
+			if (
+				! event.target.classList.contains( 'is-root-container' ) ||
+				event.target.dataset?.type === 'core/template-part'
+			) {
 				return;
 			}
 			setIsDialogOpen( true );
diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js
index 8b4877704f5f1..88d2dac8ffd77 100644
--- a/packages/editor/src/components/visual-editor/index.js
+++ b/packages/editor/src/components/visual-editor/index.js
@@ -107,6 +107,7 @@ function VisualEditor( {
 } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const isMobileViewport = useViewportMatch( 'small', '<' );
+	const isTabletViewport = useViewportMatch( 'medium', '<' );
 	const {
 		renderingMode,
 		postContentAttributes,
@@ -127,8 +128,7 @@ function VisualEditor( {
 			getRenderingMode,
 			getDeviceType,
 		} = select( editorStore );
-		const { getPostType, canUser, getEditedEntityRecord } =
-			select( coreStore );
+		const { getPostType, getEditedEntityRecord } = select( coreStore );
 		const postTypeSlug = getCurrentPostType();
 		const _renderingMode = getRenderingMode();
 		let _wrapperBlockName;
@@ -142,10 +142,6 @@ function VisualEditor( {
 		const editorSettings = getEditorSettings();
 		const supportsTemplateMode = editorSettings.supportsTemplateMode;
 		const postTypeObject = getPostType( postTypeSlug );
-		const canEditTemplate = canUser( 'create', {
-			kind: 'postType',
-			name: 'wp_template',
-		} );
 		const currentTemplateId = getCurrentTemplateId();
 		const template = currentTemplateId
 			? getEditedEntityRecord(
@@ -162,9 +158,7 @@ function VisualEditor( {
 			// 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 &&
-				canEditTemplate
+				postTypeObject?.viewable && supportsTemplateMode
 					? template
 					: undefined,
 			wrapperBlockName: _wrapperBlockName,
@@ -180,17 +174,19 @@ function VisualEditor( {
 		hasRootPaddingAwareAlignments,
 		themeHasDisabledLayoutStyles,
 		themeSupportsLayout,
-		isZoomOutMode,
+		isZoomedOut,
 	} = useSelect( ( select ) => {
-		const { getSettings, __unstableGetEditorMode } =
-			select( blockEditorStore );
+		const { getSettings, isZoomOut: _isZoomOut } = unlock(
+			select( blockEditorStore )
+		);
+
 		const _settings = getSettings();
 		return {
 			themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
 			themeSupportsLayout: _settings.supportsLayout,
 			hasRootPaddingAwareAlignments:
 				_settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
-			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+			isZoomedOut: _isZoomOut(),
 		};
 	}, [] );
 
@@ -341,12 +337,13 @@ function VisualEditor( {
 		} ),
 	] );
 
-	const zoomOutProps = isZoomOutMode
-		? {
-				scale: 'default',
-				frameSize: '48px',
-		  }
-		: {};
+	const zoomOutProps =
+		isZoomedOut && ! isTabletViewport
+			? {
+					scale: 'default',
+					frameSize: '48px',
+			  }
+			: {};
 
 	const forceFullHeight = postType === NAVIGATION_POST_TYPE;
 	const enableResizing =
@@ -360,7 +357,7 @@ function VisualEditor( {
 		// Disable resizing in mobile viewport.
 		! isMobileViewport &&
 		// Dsiable resizing in zoomed-out mode.
-		! isZoomOutMode;
+		! isZoomedOut;
 	const shouldIframe =
 		! disableIframe || [ 'Tablet', 'Mobile' ].includes( deviceType );
 
diff --git a/packages/editor/src/components/visual-editor/style.scss b/packages/editor/src/components/visual-editor/style.scss
index b7fbf882a897b..fae61eda6b801 100644
--- a/packages/editor/src/components/visual-editor/style.scss
+++ b/packages/editor/src/components/visual-editor/style.scss
@@ -1,10 +1,7 @@
 .editor-visual-editor {
 	position: relative;
-	height: 100%;
-	display: block;
+	display: flex;
 	background-color: $gray-300;
-	// Make this a stacking context to contain the z-index of children elements.
-	isolation: isolate;
 
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
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 0000000000000..b89bf15546f0d
--- /dev/null
+++ b/packages/editor/src/components/zoom-out-toggle/index.js
@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+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';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const ZoomOutToggle = () => {
+	const { isZoomOut, showIconLabels } = useSelect( ( select ) => ( {
+		isZoomOut: unlock( select( blockEditorStore ) ).isZoomOut(),
+		showIconLabels: select( preferencesStore ).get(
+			'core',
+			'showIconLabels'
+		),
+	} ) );
+
+	const { resetZoomLevel, setZoomLevel, __unstableSetEditorMode } = unlock(
+		useDispatch( blockEditorStore )
+	);
+
+	const handleZoomOut = () => {
+		if ( isZoomOut ) {
+			resetZoomLevel();
+		} else {
+			setZoomLevel( 50 );
+		}
+		__unstableSetEditorMode( isZoomOut ? 'edit' : 'zoom-out' );
+	};
+
+	return (
+		<Button
+			onClick={ handleZoomOut }
+			icon={ zoomOutIcon }
+			label={ __( 'Zoom Out' ) }
+			isPressed={ isZoomOut }
+			size="compact"
+			showTooltip={ ! showIconLabels }
+		/>
+	);
+};
+
+export default ZoomOutToggle;
diff --git a/packages/editor/src/dataviews/actions/delete-post.tsx b/packages/editor/src/dataviews/actions/delete-post.tsx
deleted file mode 100644
index 381c2964f943f..0000000000000
--- a/packages/editor/src/dataviews/actions/delete-post.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { trash } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
-import { __, _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 type { StoreDescriptor } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import {
-	isTemplateRemovable,
-	getItemTitle,
-	isTemplateOrTemplatePart,
-} from './utils';
-// @ts-ignore
-import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-import type { Post } from '../types';
-
-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< Post > = {
-	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 { removeTemplates } = unlock(
-			useDispatch( editorStore as StoreDescriptor )
-		);
-		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 titles
-								__( 'Delete "%s"?' ),
-								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 );
-							await removeTemplates( items, {
-								allowUndo: false,
-							} );
-							onActionPerformed?.( items );
-							setIsBusy( false );
-							closeModal?.();
-						} }
-						isBusy={ isBusy }
-						disabled={ isBusy }
-						accessibleWhenDisabled
-						__next40pxDefaultSize
-					>
-						{ __( 'Delete' ) }
-					</Button>
-				</HStack>
-			</VStack>
-		);
-	},
-};
-
-export default deletePostAction;
diff --git a/packages/editor/src/dataviews/actions/duplicate-template-part.tsx b/packages/editor/src/dataviews/actions/duplicate-template-part.tsx
new file mode 100644
index 0000000000000..fa3cf39ba7626
--- /dev/null
+++ b/packages/editor/src/dataviews/actions/duplicate-template-part.tsx
@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { __, sprintf, _x } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useMemo } from '@wordpress/element';
+// @ts-ignore
+import { parse } from '@wordpress/blocks';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_PART_POST_TYPE } from '../../store/constants';
+import { CreateTemplatePartModalContents } from '../../components/create-template-part-modal';
+import { getItemTitle } from './utils';
+import type { TemplatePart } from '../types';
+
+const duplicateTemplatePart: Action< TemplatePart > = {
+	id: 'duplicate-template-part',
+	label: _x( 'Duplicate', 'action label' ),
+	isEligible: ( item ) => item.type === TEMPLATE_PART_POST_TYPE,
+	modalHeader: _x( 'Duplicate template part', 'action label' ),
+	RenderModal: ( { items, closeModal } ) => {
+		const [ item ] = items;
+		const blocks = useMemo( () => {
+			return (
+				item.blocks ??
+				parse(
+					typeof item.content === 'string'
+						? item.content
+						: item.content.raw,
+					{
+						__unstableSkipMigrationLogs: true,
+					}
+				)
+			);
+		}, [ item.content, item.blocks ] );
+		const { createSuccessNotice } = useDispatch( noticesStore );
+		function onTemplatePartSuccess() {
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
+					__( '"%s" duplicated.' ),
+					getItemTitle( item )
+				),
+				{ type: 'snackbar', id: 'edit-site-patterns-success' }
+			);
+			closeModal?.();
+		}
+		return (
+			<CreateTemplatePartModalContents
+				blocks={ blocks }
+				defaultArea={ item.area }
+				defaultTitle={ sprintf(
+					/* translators: %s: Existing template part title */
+					__( '%s (Copy)' ),
+					getItemTitle( item )
+				) }
+				onCreate={ onTemplatePartSuccess }
+				onError={ closeModal }
+				confirmLabel={ _x( 'Duplicate', 'action label' ) }
+				closeModal={ closeModal }
+			/>
+		);
+	},
+};
+
+export default duplicateTemplatePart;
diff --git a/packages/editor/src/dataviews/actions/index.ts b/packages/editor/src/dataviews/actions/index.ts
deleted file mode 100644
index 730edf323578c..0000000000000
--- a/packages/editor/src/dataviews/actions/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { type StoreDescriptor, dispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import deletePost from './delete-post';
-import exportPattern from './export-pattern';
-import resetPost from './reset-post';
-
-// @ts-ignore
-import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-export default function registerDefaultActions() {
-	const { registerEntityAction } = unlock(
-		dispatch( editorStore as StoreDescriptor )
-	);
-
-	registerEntityAction( 'postType', 'wp_block', exportPattern );
-	registerEntityAction( 'postType', '*', resetPost );
-	registerEntityAction( 'postType', '*', deletePost );
-}
diff --git a/packages/editor/src/dataviews/actions/reset-post.tsx b/packages/editor/src/dataviews/actions/reset-post.tsx
deleted file mode 100644
index 59199555ddd4d..0000000000000
--- a/packages/editor/src/dataviews/actions/reset-post.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { backup } from '@wordpress/icons';
-import { 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';
-import {
-	Button,
-	__experimentalText as Text,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import type { Action } from '@wordpress/dataviews';
-import type { StoreDescriptor } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { TEMPLATE_POST_TYPE, TEMPLATE_ORIGINS } from '../../store/constants';
-import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-import type { Post, CoreDataError } from '../types';
-import { isTemplateOrTemplatePart, getItemTitle } from './utils';
-
-const resetPost: Action< Post > = {
-	id: 'reset-post',
-	label: __( 'Reset' ),
-	isEligible: ( item ) => {
-		return (
-			isTemplateOrTemplatePart( item ) &&
-			item?.source === TEMPLATE_ORIGINS.custom &&
-			item?.has_theme_file
-		);
-	},
-	icon: backup,
-	supportsBulk: true,
-	hideModalHeader: true,
-	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
-		const [ isBusy, setIsBusy ] = useState( false );
-		const { revertTemplate } = unlock(
-			useDispatch( editorStore as StoreDescriptor )
-		);
-		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 === TEMPLATE_POST_TYPE ) {
-					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
-						variant="tertiary"
-						onClick={ closeModal }
-						disabled={ isBusy }
-						accessibleWhenDisabled
-					>
-						{ __( 'Cancel' ) }
-					</Button>
-					<Button
-						variant="primary"
-						onClick={ async () => {
-							setIsBusy( true );
-							await onConfirm();
-							onActionPerformed?.( items );
-							setIsBusy( false );
-							closeModal?.();
-						} }
-						isBusy={ isBusy }
-						disabled={ isBusy }
-						accessibleWhenDisabled
-					>
-						{ __( 'Reset' ) }
-					</Button>
-				</HStack>
-			</VStack>
-		);
-	},
-};
-
-export default resetPost;
diff --git a/packages/editor/src/dataviews/actions/utils.ts b/packages/editor/src/dataviews/actions/utils.ts
index 56c8c9f54c850..33a2be16397f3 100644
--- a/packages/editor/src/dataviews/actions/utils.ts
+++ b/packages/editor/src/dataviews/actions/utils.ts
@@ -12,11 +12,19 @@ import {
 	TEMPLATE_POST_TYPE,
 } from '../../store/constants';
 
-import type { Post, TemplateOrTemplatePart } from '../types';
+import type { Post, TemplatePart, Template } from '../types';
+
+export function isTemplate( post: Post ): post is Template {
+	return post.type === TEMPLATE_POST_TYPE;
+}
+
+export function isTemplatePart( post: Post ): post is TemplatePart {
+	return post.type === TEMPLATE_PART_POST_TYPE;
+}
 
 export function isTemplateOrTemplatePart(
 	p: Post
-): p is TemplateOrTemplatePart {
+): p is Template | TemplatePart {
 	return p.type === TEMPLATE_POST_TYPE || p.type === TEMPLATE_PART_POST_TYPE;
 }
 
@@ -39,7 +47,7 @@ export function getItemTitle( item: Post ) {
  * @param template The template entity to check.
  * @return Whether the template is removable.
  */
-export function isTemplateRemovable( template: TemplateOrTemplatePart ) {
+export function isTemplateRemovable( template: Template | TemplatePart ) {
 	if ( ! template ) {
 		return false;
 	}
@@ -49,6 +57,8 @@ export function isTemplateRemovable( template: TemplateOrTemplatePart ) {
 	return (
 		[ template.source, template.source ].includes(
 			TEMPLATE_ORIGINS.custom
-		) && ! template.has_theme_file
+		) &&
+		! Boolean( template.type === 'wp_template' && template?.plugin ) &&
+		! template.has_theme_file
 	);
 }
diff --git a/packages/editor/src/dataviews/store/private-actions.ts b/packages/editor/src/dataviews/store/private-actions.ts
index 562e4140ed806..10f2b9ce872d5 100644
--- a/packages/editor/src/dataviews/store/private-actions.ts
+++ b/packages/editor/src/dataviews/store/private-actions.ts
@@ -1,7 +1,31 @@
 /**
  * WordPress dependencies
  */
+import { store as coreStore } from '@wordpress/core-data';
 import type { Action } from '@wordpress/dataviews';
+import { doAction } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import type { PostType } from '../types';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import {
+	viewPost,
+	viewPostRevisions,
+	duplicatePost,
+	duplicatePattern,
+	reorderPage,
+	exportPattern,
+	permanentlyDeletePost,
+	restorePost,
+	trashPost,
+	renamePost,
+	resetPost,
+	deletePost,
+} from '@wordpress/fields';
+import duplicateTemplatePart from '../actions/duplicate-template-part';
 
 export function registerEntityAction< Item >(
 	kind: string,
@@ -28,3 +52,90 @@ export function unregisterEntityAction(
 		actionId,
 	};
 }
+
+export function setIsReady( kind: string, name: string ) {
+	return {
+		type: 'SET_IS_READY' as const,
+		kind,
+		name,
+	};
+}
+
+export const registerPostTypeActions =
+	( 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,
+		];
+
+		registry.batch( () => {
+			actions.forEach( ( action ) => {
+				if ( ! action ) {
+					return;
+				}
+				unlock( registry.dispatch( editorStore ) ).registerEntityAction(
+					'postType',
+					postType,
+					action
+				);
+			} );
+		} );
+
+		doAction( 'core.registerPostTypeActions', postType );
+	};
diff --git a/packages/editor/src/dataviews/store/private-selectors.ts b/packages/editor/src/dataviews/store/private-selectors.ts
index bbe3d7ca95c7c..117c5b30966a3 100644
--- a/packages/editor/src/dataviews/store/private-selectors.ts
+++ b/packages/editor/src/dataviews/store/private-selectors.ts
@@ -1,22 +1,14 @@
-/**
- * WordPress dependencies
- */
-import { createSelector } from '@wordpress/data';
-
 /**
  * Internal dependencies
  */
 import type { State } from './reducer';
 
-export const getEntityActions = createSelector(
-	( state: State, kind: string, name: string ) => {
-		return [
-			...( state.actions[ kind ]?.[ name ] ?? [] ),
-			...( state.actions[ kind ]?.[ '*' ] ?? [] ),
-		];
-	},
-	( state: State, kind: string, name: string ) => [
-		state.actions[ kind ]?.[ name ],
-		state.actions[ kind ]?.[ '*' ],
-	]
-);
+const EMPTY_ARRAY = [] as [];
+
+export function getEntityActions( state: State, kind: string, name: string ) {
+	return state.actions[ 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
index 0e66fc0fcac72..9124b74f02860 100644
--- a/packages/editor/src/dataviews/store/reducer.ts
+++ b/packages/editor/src/dataviews/store/reducer.ts
@@ -6,13 +6,31 @@ import type { Action } from '@wordpress/dataviews';
 
 type ReduxAction =
 	| ReturnType< typeof import('./private-actions').registerEntityAction >
-	| ReturnType< typeof import('./private-actions').unregisterEntityAction >;
+	| ReturnType< typeof import('./private-actions').unregisterEntityAction >
+	| ReturnType< typeof import('./private-actions').setIsReady >;
 
 export type ActionState = Record< string, Record< string, Action< any >[] > >;
+export type ReadyState = Record< string, Record< string, boolean > >;
 export type State = {
 	actions: ActionState;
+	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':
@@ -48,4 +66,5 @@ function actions( state: ActionState = {}, action: ReduxAction ) {
 
 export default combineReducers( {
 	actions,
+	isReady,
 } );
diff --git a/packages/editor/src/dataviews/types.ts b/packages/editor/src/dataviews/types.ts
index 9f57ecba6174a..664c2dd417201 100644
--- a/packages/editor/src/dataviews/types.ts
+++ b/packages/editor/src/dataviews/types.ts
@@ -7,27 +7,79 @@ type PostStatus =
 	| 'auto-draft'
 	| 'trash';
 
-export interface BasePost {
+export interface CommonPost {
 	status?: PostStatus;
 	title: string | { rendered: string } | { raw: string };
+	content: string | { raw: string; rendered: string };
 	type: string;
 	id: string | number;
+	blocks?: Object[];
+	_links?: Links;
 }
-export interface TemplateOrTemplatePart extends BasePost {
-	type: 'wp_template' | 'wp_template_part';
+
+interface Links {
+	'predecessor-version'?: { href: string; id: number }[];
+	'version-history'?: { href: string; count: number }[];
+	[ key: string ]: { href: string }[] | undefined;
+}
+
+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;
+}
+
+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;
 }
 
-export interface Pattern extends BasePost {
+export interface Pattern extends CommonPost {
 	slug: string;
 	title: { raw: string };
-	content: { raw: string } | string;
 	wp_pattern_sync_status: string;
 }
 
-export type Post = TemplateOrTemplatePart | Pattern | BasePost;
+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;
+	};
+}
 
 // Will be unnecessary after typescript 5.0 upgrade.
 export type CoreDataError = { message?: string; code?: string };
diff --git a/packages/editor/src/hooks/pattern-overrides.js b/packages/editor/src/hooks/pattern-overrides.js
index 6f81f368351f3..8882856a89e0d 100644
--- a/packages/editor/src/hooks/pattern-overrides.js
+++ b/packages/editor/src/hooks/pattern-overrides.js
@@ -6,7 +6,7 @@ import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useBlockEditingMode } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
+import { getBlockBindingsSource } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -58,7 +58,6 @@ function ControlsWithStoreSubscription( props ) {
 	const blockEditingMode = useBlockEditingMode();
 	const { hasPatternOverridesSource, isEditingSyncedPattern } = useSelect(
 		( select ) => {
-			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
 			const { getCurrentPostType, getEditedPostAttribute } =
 				select( editorStore );
 
diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js
index f949be8e9321f..d4a5c3eebbb4c 100644
--- a/packages/editor/src/private-apis.js
+++ b/packages/editor/src/private-apis.js
@@ -9,11 +9,11 @@ import * as interfaceApis from '@wordpress/interface';
 import { lock } from './lock-unlock';
 import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
 import EditorContentSlotFill from './components/editor-interface/content-slot-fill';
-import useBlockEditorSettings from './components/provider/use-block-editor-settings';
 import BackButton from './components/header/back-button';
 import CreateTemplatePartModal from './components/create-template-part-modal';
 import Editor from './components/editor';
 import PluginPostExcerpt from './components/post-excerpt/plugin';
+import PostCardPanel from './components/post-card-panel';
 import PreferencesModal from './components/preferences-modal';
 import { usePostActions } from './components/post-actions/actions';
 import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group';
@@ -23,7 +23,6 @@ import {
 	mergeBaseAndUserConfigs,
 	GlobalStylesProvider,
 } from './components/global-styles-provider';
-import registerDefaultActions from './dataviews/actions';
 import {
 	registerCoreBlockBindingsSources,
 	bootstrapBlockBindingsSourcesFromServer,
@@ -41,17 +40,16 @@ lock( privateApis, {
 	GlobalStylesProvider,
 	mergeBaseAndUserConfigs,
 	PluginPostExcerpt,
+	PostCardPanel,
 	PreferencesModal,
 	usePostActions,
 	ToolsMoreMenuGroup,
 	ViewMoreMenuGroup,
 	ResizableEditor,
-	registerDefaultActions,
 	registerCoreBlockBindingsSources,
 	bootstrapBlockBindingsSourcesFromServer,
 
 	// 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 d934436800cba..f8a18fc86e537 100644
--- a/packages/editor/src/store/actions.js
+++ b/packages/editor/src/store/actions.js
@@ -12,7 +12,11 @@ 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 } from '@wordpress/hooks';
+import {
+	applyFilters,
+	applyFiltersAsync,
+	doActionAsync,
+} from '@wordpress/hooks';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { __ } from '@wordpress/i18n';
 
@@ -26,7 +30,7 @@ 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.
@@ -155,6 +159,29 @@ export function setEditedPost( postType, postId ) {
  *
  * @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 ) =>
@@ -184,7 +211,7 @@ export const savePost =
 		}
 
 		const previousRecord = select.getCurrentPost();
-		const edits = {
+		let edits = {
 			id: previousRecord.id,
 			...registry
 				.select( coreStore )
@@ -196,31 +223,65 @@ 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;
+		}
 
-		let error = registry
-			.select( coreStore )
-			.getLastEntitySaveError(
-				'postType',
-				previousRecord.type,
-				previousRecord.id
-			);
+		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 ) {
-			await applyFilters(
-				'editor.__unstableSavePost',
-				Promise.resolve(),
-				options
-			).catch( ( err ) => {
+			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', options );
+			} catch ( err ) {
+				error = err;
+			}
 		}
 		dispatch( { type: 'REQUEST_POST_UPDATE_FINISH', options } );
 
@@ -703,15 +764,32 @@ export function removeEditorPanel( panelName ) {
  *                                              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 function setIsInserterOpened( value ) {
-	return {
-		type: 'SET_IS_INSERTER_OPENED',
-		value,
+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.
diff --git a/packages/editor/src/store/private-actions.js b/packages/editor/src/store/private-actions.js
index c5fe1c260071a..358d00af396bb 100644
--- a/packages/editor/src/store/private-actions.js
+++ b/packages/editor/src/store/private-actions.js
@@ -137,7 +137,9 @@ export const saveDirtyEntities =
 			{ kind: 'postType', name: 'wp_navigation' },
 		];
 		const saveNoticeId = 'site-editor-save-success';
-		const homeUrl = registry.select( coreStore ).getUnstableBase()?.home;
+		const homeUrl = registry
+			.select( coreStore )
+			.getEntityRecord( 'root', '__unstableBase' )?.home;
 		registry.dispatch( noticesStore ).removeNotice( saveNoticeId );
 		const entitiesToSave = dirtyEntityRecords.filter(
 			( { kind, name, key, property } ) => {
@@ -269,7 +271,7 @@ export const revertTemplate =
 
 			const fileTemplatePath = addQueryArgs(
 				`${ templateEntityConfig.baseURL }/${ template.id }`,
-				{ context: 'edit', source: 'theme' }
+				{ context: 'edit', source: template.origin }
 			);
 
 			const fileTemplate = await apiFetch( { path: fileTemplatePath } );
@@ -393,10 +395,14 @@ export const removeTemplates =
 			if ( items.length === 1 ) {
 				// Depending on how the entity was retrieved its title might be
 				// an object or simple string.
-				const title =
-					typeof items[ 0 ].title === 'string'
-						? items[ 0 ].title
-						: items[ 0 ].title?.rendered;
+				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. */
diff --git a/packages/editor/src/store/private-selectors.js b/packages/editor/src/store/private-selectors.js
index c635cbc816f92..9bc065436c10b 100644
--- a/packages/editor/src/store/private-selectors.js
+++ b/packages/editor/src/store/private-selectors.js
@@ -25,7 +25,10 @@ import {
 	getCurrentPost,
 	__experimentalGetDefaultTemplatePartAreas,
 } from './selectors';
-import { getEntityActions as _getEntityActions } from '../dataviews/store/private-selectors';
+import {
+	getEntityActions as _getEntityActions,
+	isEntityReady as _isEntityReady,
+} from '../dataviews/store/private-selectors';
 
 const EMPTY_INSERTION_POINT = {
 	rootClientId: undefined,
@@ -34,13 +37,13 @@ const EMPTY_INSERTION_POINT = {
 };
 
 /**
- * Get the insertion point for the inserter.
+ * 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 getInsertionPoint = createRegistrySelector( ( select ) =>
+export const getInserter = createRegistrySelector( ( select ) =>
 	createSelector(
 		( state ) => {
 			if ( typeof state.blockInserterPanel === 'object' ) {
@@ -110,7 +113,10 @@ export const getPostIcon = createRegistrySelector(
 			// `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 ( postTypeEntity?.icon?.startsWith( 'dashicons-' ) ) {
+			if (
+				typeof postTypeEntity?.icon === 'string' &&
+				postTypeEntity.icon.startsWith( 'dashicons-' )
+			) {
 				return postTypeEntity.icon.slice( 10 );
 			}
 			return pageIcon;
@@ -160,3 +166,40 @@ export const hasPostMetaChanges = createRegistrySelector(
 export function getEntityActions( state, ...args ) {
 	return _getEntityActions( state.dataviews, ...args );
 }
+
+export function isEntityReady( state, ...args ) {
+	return _isEntityReady( 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/selectors.js b/packages/editor/src/store/selectors.js
index 8b0dfd4b370c4..abb744ee5f220 100644
--- a/packages/editor/src/store/selectors.js
+++ b/packages/editor/src/store/selectors.js
@@ -177,6 +177,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 ) {
@@ -316,6 +321,22 @@ const getNestedEditedPostProperty = createSelector(
  * @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 ) {
@@ -1276,9 +1297,15 @@ export function getRenderingMode( state ) {
  *
  * @return {string} Device type.
  */
-export function getDeviceType( state ) {
-	return state.deviceType;
-}
+export const getDeviceType = createRegistrySelector(
+	( select ) => ( state ) => {
+		const editorMode = select( blockEditorStore ).__unstableGetEditorMode();
+		if ( editorMode === 'zoom-out' ) {
+			return 'Desktop';
+		}
+		return state.deviceType;
+	}
+);
 
 /**
  * Returns true if the list view is opened.
diff --git a/packages/editor/src/store/test/actions.js b/packages/editor/src/store/test/actions.js
index fae30c6fc271e..206c60a159d04 100644
--- a/packages/editor/src/store/test/actions.js
+++ b/packages/editor/src/store/test/actions.js
@@ -576,4 +576,80 @@ describe( 'Editor actions', () => {
 			).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 0000000000000..bf2bc1f74065c
--- /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 b4fd013c6b4d4..3971ad30c9de7 100644
--- a/packages/editor/src/store/test/reducer.js
+++ b/packages/editor/src/store/test/reducer.js
@@ -18,7 +18,6 @@ import {
 	blockInserterPanel,
 	listViewPanel,
 } from '../reducer';
-import { setIsInserterOpened } from '../actions';
 
 describe( 'state', () => {
 	describe( 'hasSameKeys()', () => {
@@ -298,15 +297,6 @@ describe( '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, {
@@ -349,17 +339,5 @@ describe( 'state', () => {
 				} )
 			).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/editor/src/store/utils/is-template-revertable.js b/packages/editor/src/store/utils/is-template-revertable.js
index a09715af875bc..2cb674920e3e4 100644
--- a/packages/editor/src/store/utils/is-template-revertable.js
+++ b/packages/editor/src/store/utils/is-template-revertable.js
@@ -18,6 +18,7 @@ export default function isTemplateRevertable( templateOrTemplatePart ) {
 
 	return (
 		templateOrTemplatePart.source === TEMPLATE_ORIGINS.custom &&
-		templateOrTemplatePart.has_theme_file
+		( Boolean( templateOrTemplatePart?.plugin ) ||
+			templateOrTemplatePart?.has_theme_file )
 	);
 }
diff --git a/packages/editor/src/utils/media-upload/index.js b/packages/editor/src/utils/media-upload/index.js
index f1f60b7c1e99a..6b39db2443cc3 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';
 
 /**
@@ -32,7 +37,16 @@ export default function mediaUpload( {
 	onFileChange,
 } ) {
 	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();
@@ -41,18 +55,39 @@ export default function mediaUpload( {
 		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: {
 			...postData,
 			...additionalData,
 		},
 		maxUploadFileSize,
-		onError: ( { message } ) => onError( message ),
+		onError: ( { message } ) => {
+			clearSaveLock();
+			onError( message );
+		},
 		wpAllowedMimeTypes,
 	} );
 }
diff --git a/packages/editor/tsconfig.json b/packages/editor/tsconfig.json
index 8dfdf2ba7f2d5..3c45fbcb10db3 100644
--- a/packages/editor/tsconfig.json
+++ b/packages/editor/tsconfig.json
@@ -20,11 +20,13 @@
 		{ "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" },
diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md
index 9ee55cb98022e..c480f3a0469b5 100644
--- a/packages/element/CHANGELOG.md
+++ b/packages/element/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/element/package.json b/packages/element/package.json
index 62a4d91692c54..dc96c5a83b182 100644
--- a/packages/element/package.json
+++ b/packages/element/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/element",
-	"version": "6.3.0",
+	"version": "6.9.0",
 	"description": "Element React module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/element/src/react.js b/packages/element/src/react.js
index dfe776370b2d3..cf2f9614bc331 100644
--- a/packages/element/src/react.js
+++ b/packages/element/src/react.js
@@ -54,12 +54,26 @@ import {
  */
 
 /**
- * Object containing a React synthetic event.
+ * 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>
+ */
+
 /**
  * Object that provides utilities for dealing with React children.
  */
diff --git a/packages/env/CHANGELOG.md b/packages/env/CHANGELOG.md
index 25e554a1bec09..1adbc578b11e2 100644
--- a/packages/env/CHANGELOG.md
+++ b/packages/env/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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
diff --git a/packages/env/lib/wordpress.js b/packages/env/lib/wordpress.js
index 423547fad688b..bd3c4a23f8ff5 100644
--- a/packages/env/lib/wordpress.js
+++ b/packages/env/lib/wordpress.js
@@ -27,6 +27,30 @@ const { getCache, setCache } = require( './cache' );
  * @typedef {'development'|'tests'|'all'} WPEnvironmentSelection
  */
 
+/**
+ * Utility function to check if a WordPress version is lower than another version.
+ *
+ * This is a non-comprehensive check only intended for this usage, to avoid pulling in a full semver library.
+ * It only considers the major and minor portions of the version and ignores the rest. Additionally, it assumes that
+ * the minor version is always a single digit (i.e. 0-9).
+ *
+ * Do not use this function for general version comparison, as it will not work for all cases.
+ *
+ * @param {string} version        The version to check.
+ * @param {string} compareVersion The compare version to check whether the version is lower than.
+ * @return {boolean} True if the version is lower than the compare version, false otherwise.
+ */
+function isWPMajorMinorVersionLower( version, compareVersion ) {
+	const versionNumber = Number.parseFloat(
+		version.match( /^[0-9]+(\.[0-9]+)?/ )[ 0 ]
+	);
+	const compareVersionNumber = Number.parseFloat(
+		compareVersion.match( /^[0-9]+(\.[0-9]+)?/ )[ 0 ]
+	);
+
+	return versionNumber < compareVersionNumber;
+}
+
 /**
  * Checks a WordPress database connection. An error is thrown if the test is
  * unsuccessful.
@@ -51,11 +75,28 @@ async function checkDatabaseConnection( { dockerComposeConfigPath, debug } ) {
  * @param {Object}        spinner     A CLI spinner which indicates progress.
  */
 async function configureWordPress( environment, config, spinner ) {
+	let wpVersion = '';
+	try {
+		wpVersion = await readWordPressVersion(
+			config.env[ environment ].coreSource,
+			spinner,
+			config.debug
+		);
+	} catch ( err ) {
+		// Ignore error.
+	}
+
 	const installCommand = `wp core install --url="${ config.env[ environment ].config.WP_SITEURL }" --title="${ config.name }" --admin_user=admin --admin_password=password --admin_email=wordpress@example.com --skip-email`;
 
 	// -eo pipefail exits the command as soon as anything fails in bash.
 	const setupCommands = [ 'set -eo pipefail', installCommand ];
 
+	// WordPress versions below 5.1 didn't use proper spacing in wp-config.
+	const configAnchor =
+		wpVersion && isWPMajorMinorVersionLower( wpVersion, '5.1' )
+			? `"define('WP_DEBUG',"`
+			: `"define( 'WP_DEBUG',"`;
+
 	// Set wp-config.php values.
 	for ( let [ key, value ] of Object.entries(
 		config.env[ environment ].config
@@ -68,7 +109,7 @@ async function configureWordPress( environment, config, spinner ) {
 		// Add quotes around string values to work with multi-word strings better.
 		value = typeof value === 'string' ? `"${ value }"` : value;
 		setupCommands.push(
-			`wp config set ${ key } ${ value } --anchor="define( 'WP_DEBUG',"${
+			`wp config set ${ key } ${ value } --anchor=${ configAnchor }${
 				typeof value !== 'string' ? ' --raw' : ''
 			}`
 		);
@@ -98,6 +139,15 @@ async function configureWordPress( environment, config, spinner ) {
 		}
 	);
 
+	// WordPress versions below 5.1 didn't use proper spacing in wp-config.
+	// Additionally, WordPress versions below 5.4 used `dirname( __FILE__ )` instead of `__DIR__`.
+	let abspathDef = `define( 'ABSPATH', __DIR__ . '\\/' );`;
+	if ( wpVersion && isWPMajorMinorVersionLower( wpVersion, '5.1' ) ) {
+		abspathDef = `define('ABSPATH', dirname(__FILE__) . '\\/');`;
+	} else if ( wpVersion && isWPMajorMinorVersionLower( wpVersion, '5.4' ) ) {
+		abspathDef = `define( 'ABSPATH', dirname( __FILE__ ) . '\\/' );`;
+	}
+
 	// WordPress' PHPUnit suite expects a `wp-tests-config.php` in
 	// the directory that the test suite is contained within.
 	// Make sure ABSPATH points to the WordPress install.
@@ -106,7 +156,7 @@ async function configureWordPress( environment, config, spinner ) {
 		[
 			'sh',
 			'-c',
-			`sed -e "/^require.*wp-settings.php/d" -e "s/define( 'ABSPATH', __DIR__ . '\\/' );/define( 'ABSPATH', '\\/var\\/www\\/html\\/' );\\n\\tdefine( 'WP_DEFAULT_THEME', 'default' );/" /var/www/html/wp-config.php > /wordpress-phpunit/wp-tests-config.php`,
+			`sed -e "/^require.*wp-settings.php/d" -e "s/${ abspathDef }/define( 'ABSPATH', '\\/var\\/www\\/html\\/' );\\n\\tdefine( 'WP_DEFAULT_THEME', 'default' );/" /var/www/html/wp-config.php > /wordpress-phpunit/wp-tests-config.php`,
 		],
 		{
 			config: config.dockerComposeConfigPath,
diff --git a/packages/env/package.json b/packages/env/package.json
index 90c434bdc9e29..ef0a9ca183201 100644
--- a/packages/env/package.json
+++ b/packages/env/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/env",
-	"version": "10.3.0",
+	"version": "10.9.0",
 	"description": "A zero-config, self contained local WordPress environment for development and testing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/escape-html/CHANGELOG.md b/packages/escape-html/CHANGELOG.md
index 913c0d566911a..2ba6cc20e2438 100644
--- a/packages/escape-html/CHANGELOG.md
+++ b/packages/escape-html/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/escape-html/package.json b/packages/escape-html/package.json
index d10551ea3b58d..b45f4c236f41e 100644
--- a/packages/escape-html/package.json
+++ b/packages/escape-html/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/escape-html",
-	"version": "3.3.0",
+	"version": "3.9.0",
 	"description": "Escape HTML utils.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md
index 02f7c559d8e49..7425062a1cf10 100644
--- a/packages/eslint-plugin/CHANGELOG.md
+++ b/packages/eslint-plugin/CHANGELOG.md
@@ -2,6 +2,23 @@
 
 ## Unreleased
 
+## 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
diff --git a/packages/eslint-plugin/configs/i18n.js b/packages/eslint-plugin/configs/i18n.js
index c3271214e3ef5..fb8cad233232d 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/package.json b/packages/eslint-plugin/package.json
index 166754c8b755c..6638473b94b18 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/eslint-plugin",
-	"version": "20.0.0",
+	"version": "21.2.0",
 	"description": "ESLint plugin for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/fields/.npmrc b/packages/fields/.npmrc
new file mode 100644
index 0000000000000..43c97e719a5a8
--- /dev/null
+++ b/packages/fields/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/packages/fields/CHANGELOG.md b/packages/fields/CHANGELOG.md
new file mode 100644
index 0000000000000..986cbcdec8056
--- /dev/null
+++ b/packages/fields/CHANGELOG.md
@@ -0,0 +1,7 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+## 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 0000000000000..b4e45103600da
--- /dev/null
+++ b/packages/fields/README.md
@@ -0,0 +1,93 @@
+# 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) -->
+
+### deletePost
+
+Undocumented declaration.
+
+### duplicatePattern
+
+Undocumented declaration.
+
+### duplicatePost
+
+Undocumented declaration.
+
+### duplicatePostNative
+
+Undocumented declaration.
+
+### exportPattern
+
+Undocumented declaration.
+
+### exportPatternNative
+
+Undocumented declaration.
+
+### orderField
+
+Undocumented declaration.
+
+### permanentlyDeletePost
+
+Undocumented declaration.
+
+### renamePost
+
+Undocumented declaration.
+
+### reorderPage
+
+Undocumented declaration.
+
+### reorderPageNative
+
+Undocumented declaration.
+
+### resetPost
+
+Undocumented declaration.
+
+### restorePost
+
+Undocumented declaration.
+
+### titleField
+
+Undocumented declaration.
+
+### trashPost
+
+Undocumented declaration.
+
+### viewPost
+
+Undocumented declaration.
+
+### viewPostRevisions
+
+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/fields/package.json b/packages/fields/package.json
new file mode 100644
index 0000000000000..d0dd29138c5e5
--- /dev/null
+++ b/packages/fields/package.json
@@ -0,0 +1,63 @@
+{
+	"name": "@wordpress/fields",
+	"version": "0.1.0",
+	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"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",
+	"types": "build-types",
+	"sideEffects": [
+		"build-style/**",
+		"src/**/*.scss"
+	],
+	"dependencies": {
+		"@babel/runtime": "^7.16.0",
+		"@wordpress/api-fetch": "file:../api-fetch",
+		"@wordpress/blob": "file:../blob",
+		"@wordpress/blocks": "file:../blocks",
+		"@wordpress/components": "file:../components",
+		"@wordpress/compose": "file:../compose",
+		"@wordpress/core-data": "file:../core-data",
+		"@wordpress/data": "file:../data",
+		"@wordpress/dataviews": "file:../dataviews",
+		"@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/patterns": "file:../patterns",
+		"@wordpress/primitives": "file:../primitives",
+		"@wordpress/private-apis": "file:../private-apis",
+		"@wordpress/url": "file:../url",
+		"@wordpress/warning": "file:../warning",
+		"change-case": "4.1.2",
+		"client-zip": "^2.4.5"
+	},
+	"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 0000000000000..c5ab866e12479
--- /dev/null
+++ b/packages/fields/src/actions/delete-post.tsx
@@ -0,0 +1,203 @@
+/**
+ * WordPress dependencies
+ */
+import { trash } from '@wordpress/icons';
+import { __, _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 titles
+								__( 'Delete "%s"?' ),
+								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: The template/part's name. */
+														__( '"%s" deleted.' ),
+														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>
+		);
+	},
+};
+
+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 0000000000000..bf2820f951dba
--- /dev/null
+++ b/packages/fields/src/actions/duplicate-pattern.tsx
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+// @ts-ignore
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+import type { Pattern } from '../types';
+
+// Patterns.
+const { CreatePatternModalContents, useDuplicatePatternProps } =
+	unlock( patternsPrivateApis );
+
+const duplicatePattern: Action< Pattern > = {
+	id: 'duplicate-pattern',
+	label: _x( 'Duplicate', 'action label' ),
+	isEligible: ( item ) => item.type !== 'wp_template_part',
+	modalHeader: _x( 'Duplicate pattern', 'action label' ),
+	RenderModal: ( { items, closeModal } ) => {
+		const [ item ] = items;
+		const duplicatedProps = useDuplicatePatternProps( {
+			pattern: item,
+			onSuccess: () => closeModal?.(),
+		} );
+		return (
+			<CreatePatternModalContents
+				onClose={ closeModal }
+				confirmLabel={ _x( 'Duplicate', 'action label' ) }
+				{ ...duplicatedProps }
+			/>
+		);
+	},
+};
+
+export default duplicatePattern;
diff --git a/packages/fields/src/actions/duplicate-post.native.tsx b/packages/fields/src/actions/duplicate-post.native.tsx
new file mode 100644
index 0000000000000..5468aa649abbd
--- /dev/null
+++ b/packages/fields/src/actions/duplicate-post.native.tsx
@@ -0,0 +1,3 @@
+const duplicatePost = undefined;
+
+export default duplicatePost;
diff --git a/packages/fields/src/actions/duplicate-post.tsx b/packages/fields/src/actions/duplicate-post.tsx
new file mode 100644
index 0000000000000..d153073f4b6c1
--- /dev/null
+++ b/packages/fields/src/actions/duplicate-post.tsx
@@ -0,0 +1,174 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf, _x } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useState } from '@wordpress/element';
+import { DataForm } from '@wordpress/dataviews';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { 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 template title */
+				__( '%s (Copy)' ),
+				getItemTitle( items[ 0 ] )
+			),
+		} );
+
+		const [ isCreatingPage, setIsCreatingPage ] = useState( false );
+		const { saveEntityRecord } = useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+
+		async function createPage( event: React.FormEvent ) {
+			event.preventDefault();
+
+			if ( isCreatingPage ) {
+				return;
+			}
+
+			const newItemOject = {
+				status: 'draft',
+				title: item.title,
+				slug: item.title || __( 'No title' ),
+				comment_status: item.comment_status,
+				content:
+					typeof item.content === 'string'
+						? item.content
+						: item.content.raw,
+				excerpt:
+					typeof item.excerpt === 'string'
+						? item.excerpt
+						: item.excerpt?.raw,
+				meta: item.meta,
+				parent: item.parent,
+				password: item.password,
+				template: item.template,
+				format: item.format,
+				featured_media: item.featured_media,
+				menu_order: item.menu_order,
+				ping_status: item.ping_status,
+			};
+			const assignablePropertiesPrefix = 'wp:action-assign-';
+			// Get all the properties that the current user is able to assign normally author, categories, tags,
+			// and custom taxonomies.
+			const assignableProperties = Object.keys( item?._links || {} )
+				.filter( ( property ) =>
+					property.startsWith( assignablePropertiesPrefix )
+				)
+				.map( ( property ) =>
+					property.slice( assignablePropertiesPrefix.length )
+				);
+			assignableProperties.forEach( ( property ) => {
+				if ( item.hasOwnProperty( property ) ) {
+					// @ts-ignore
+					newItemOject[ property ] = item[ property ];
+				}
+			} );
+			setIsCreatingPage( true );
+			try {
+				const newItem = await saveEntityRecord(
+					'postType',
+					item.type,
+					newItemOject,
+					{ throwOnError: true }
+				);
+
+				createSuccessNotice(
+					sprintf(
+						// translators: %s: Title of the created template e.g: "Category".
+						__( '"%s" successfully created.' ),
+						decodeEntities( newItem.title?.rendered || item.title )
+					),
+					{
+						id: 'duplicate-post-action',
+						type: 'snackbar',
+					}
+				);
+
+				if ( onActionPerformed ) {
+					onActionPerformed( [ newItem ] );
+				}
+			} catch ( error ) {
+				const typedError = error as CoreDataError;
+				const errorMessage =
+					typedError.message && typedError.code !== 'unknown_error'
+						? typedError.message
+						: __( 'An error occurred while duplicating the page.' );
+
+				createErrorNotice( errorMessage, {
+					type: 'snackbar',
+				} );
+			} finally {
+				setIsCreatingPage( false );
+				closeModal?.();
+			}
+		}
+
+		return (
+			<form onSubmit={ createPage }>
+				<VStack spacing={ 3 }>
+					<DataForm
+						data={ item }
+						fields={ fields }
+						form={ formDuplicateAction }
+						onChange={ ( changes ) =>
+							setItem( ( prev ) => ( {
+								...prev,
+								...changes,
+							} ) )
+						}
+					/>
+					<HStack spacing={ 2 } justify="end">
+						<Button
+							variant="tertiary"
+							onClick={ closeModal }
+							__next40pxDefaultSize
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							type="submit"
+							isBusy={ isCreatingPage }
+							aria-disabled={ isCreatingPage }
+							__next40pxDefaultSize
+						>
+							{ _x( 'Duplicate', 'action label' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		);
+	},
+};
+
+export default duplicatePost;
diff --git a/packages/fields/src/actions/export-pattern.native.tsx b/packages/fields/src/actions/export-pattern.native.tsx
new file mode 100644
index 0000000000000..c58cffcbd79e8
--- /dev/null
+++ b/packages/fields/src/actions/export-pattern.native.tsx
@@ -0,0 +1,3 @@
+const exportPattern = undefined;
+
+export default exportPattern;
diff --git a/packages/editor/src/dataviews/actions/export-pattern.tsx b/packages/fields/src/actions/export-pattern.tsx
similarity index 96%
rename from packages/editor/src/dataviews/actions/export-pattern.tsx
rename to packages/fields/src/actions/export-pattern.tsx
index f4e5c91c7cabf..b6be83eeda84b 100644
--- a/packages/editor/src/dataviews/actions/export-pattern.tsx
+++ b/packages/fields/src/actions/export-pattern.tsx
@@ -9,6 +9,7 @@ import { downloadZip } from 'client-zip';
  */
 import { downloadBlob } from '@wordpress/blob';
 import { __ } from '@wordpress/i18n';
+import { download } from '@wordpress/icons';
 import type { Action } from '@wordpress/dataviews';
 
 /**
@@ -36,6 +37,7 @@ function getJsonFromItem( item: Pattern ) {
 const exportPattern: Action< Pattern > = {
 	id: 'export-pattern',
 	label: __( 'Export as JSON' ),
+	icon: download,
 	supportsBulk: true,
 	isEligible: ( item ) => item.type === 'wp_block',
 	callback: async ( items ) => {
diff --git a/packages/fields/src/actions/index.ts b/packages/fields/src/actions/index.ts
new file mode 100644
index 0000000000000..08e22836e68fd
--- /dev/null
+++ b/packages/fields/src/actions/index.ts
@@ -0,0 +1,15 @@
+export { default as viewPost } from './view-post';
+export { default as reorderPage } from './reorder-page';
+export { default as reorderPageNative } from './reorder-page.native';
+export { default as duplicatePost } from './duplicate-post';
+export { default as duplicatePostNative } from './duplicate-post.native';
+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 exportPatternNative } from './export-pattern.native';
+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';
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 0000000000000..afbb84ae12c74
--- /dev/null
+++ b/packages/fields/src/actions/permanently-delete-post.tsx
@@ -0,0 +1,118 @@
+/**
+ * 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',
+			} );
+		}
+	},
+};
+
+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 0000000000000..da1fd46669f0d
--- /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,
+	TEMPLATE_ORIGINS,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+} from './utils';
+import type { CoreDataError, PostWithPermissions } from '../types';
+
+// Patterns.
+const { PATTERN_TYPES } = unlock( patternsPrivateApis );
+
+const renamePost: Action< PostWithPermissions > = {
+	id: 'rename-post',
+	label: __( 'Rename' ),
+	isEligible( post ) {
+		if ( post.status === 'trash' ) {
+			return false;
+		}
+		// Templates, template parts and patterns have special checks for renaming.
+		if (
+			! [
+				TEMPLATE_POST_TYPE,
+				TEMPLATE_PART_POST_TYPE,
+				...Object.values( PATTERN_TYPES ),
+			].includes( post.type )
+		) {
+			return post.permissions?.update;
+		}
+
+		// In the case of templates, we can only rename custom templates.
+		if ( isTemplate( post ) ) {
+			return (
+				isTemplateRemovable( post ) &&
+				post.is_custom &&
+				post.permissions?.update
+			);
+		}
+
+		if ( isTemplatePart( post ) ) {
+			return (
+				post.source === TEMPLATE_ORIGINS.custom &&
+				! post?.has_theme_file &&
+				post.permissions?.update
+			);
+		}
+
+		return post.type === PATTERN_TYPES.user && post.permissions?.update;
+	},
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const [ item ] = items;
+		const [ title, setTitle ] = useState( () => getItemTitle( item ) );
+		const { editEntityRecord, saveEditedEntityRecord } =
+			useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+
+		async function onRename( event: React.FormEvent ) {
+			event.preventDefault();
+			try {
+				await editEntityRecord( 'postType', item.type, item.id, {
+					title,
+				} );
+				// Update state before saving rerenders the list.
+				setTitle( '' );
+				closeModal?.();
+				// Persist edited entity.
+				await saveEditedEntityRecord( 'postType', item.type, item.id, {
+					throwOnError: true,
+				} );
+				createSuccessNotice( __( 'Name updated' ), {
+					type: 'snackbar',
+				} );
+				onActionPerformed?.( items );
+			} catch ( error ) {
+				const typedError = error as CoreDataError;
+				const errorMessage =
+					typedError.message && typedError.code !== 'unknown_error'
+						? typedError.message
+						: __( 'An error occurred while updating the name' );
+				createErrorNotice( errorMessage, { type: 'snackbar' } );
+			}
+		}
+
+		return (
+			<form onSubmit={ onRename }>
+				<VStack spacing="5">
+					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+						required
+					/>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ () => {
+								closeModal?.();
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		);
+	},
+};
+
+export default renamePost;
diff --git a/packages/fields/src/actions/reorder-page.native.tsx b/packages/fields/src/actions/reorder-page.native.tsx
new file mode 100644
index 0000000000000..61e4733b6c6bd
--- /dev/null
+++ b/packages/fields/src/actions/reorder-page.native.tsx
@@ -0,0 +1,3 @@
+const reorderPage = undefined;
+
+export default reorderPage;
diff --git a/packages/fields/src/actions/reorder-page.tsx b/packages/fields/src/actions/reorder-page.tsx
new file mode 100644
index 0000000000000..1820884d8d8c7
--- /dev/null
+++ b/packages/fields/src/actions/reorder-page.tsx
@@ -0,0 +1,125 @@
+/**
+ * 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,
+};
+
+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 0000000000000..105d7b283b833
--- /dev/null
+++ b/packages/fields/src/actions/reset-post.tsx
@@ -0,0 +1,300 @@
+/**
+ * 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,
+	TEMPLATE_ORIGINS,
+	TEMPLATE_POST_TYPE,
+} from './utils';
+import type { CoreDataError, Template, TemplatePart } from '../types';
+
+const isTemplateRevertable = (
+	templateOrTemplatePart: Template | TemplatePart
+) => {
+	if ( ! templateOrTemplatePart ) {
+		return false;
+	}
+
+	return (
+		templateOrTemplatePart.source === TEMPLATE_ORIGINS.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 === TEMPLATE_ORIGINS.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 === TEMPLATE_POST_TYPE ) {
+					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>
+		);
+	},
+};
+
+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 0000000000000..874eca91fee11
--- /dev/null
+++ b/packages/fields/src/actions/restore-post.tsx
@@ -0,0 +1,134 @@
+/**
+ * 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',
+			} );
+		}
+	},
+};
+
+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 0000000000000..befbfb0ee7ffb
--- /dev/null
+++ b/packages/fields/src/actions/trash-post.tsx
@@ -0,0 +1,198 @@
+/**
+ * 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>
+		);
+	},
+};
+
+export default trashPost;
diff --git a/packages/fields/src/actions/utils.ts b/packages/fields/src/actions/utils.ts
new file mode 100644
index 0000000000000..14e8edae4be04
--- /dev/null
+++ b/packages/fields/src/actions/utils.ts
@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import type { Post, TemplatePart, Template } from '../types';
+
+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 function isTemplate( post: Post ): post is Template {
+	return post.type === TEMPLATE_POST_TYPE;
+}
+
+export function isTemplatePart( post: Post ): post is TemplatePart {
+	return post.type === TEMPLATE_PART_POST_TYPE;
+}
+
+export function isTemplateOrTemplatePart(
+	p: Post
+): p is Template | TemplatePart {
+	return p.type === TEMPLATE_POST_TYPE || p.type === TEMPLATE_PART_POST_TYPE;
+}
+
+export function getItemTitle( item: Post ) {
+	if ( typeof item.title === 'string' ) {
+		return decodeEntities( item.title );
+	}
+	if ( 'rendered' in item.title ) {
+		return decodeEntities( item.title.rendered );
+	}
+	if ( '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(
+			TEMPLATE_ORIGINS.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 0000000000000..875b925b94f07
--- /dev/null
+++ b/packages/fields/src/actions/view-post-revisions.tsx
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+import { __, sprintf } from '@wordpress/i18n';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { Post } from '../types';
+
+const viewPostRevisions: Action< Post > = {
+	id: 'view-post-revisions',
+	context: 'list',
+	label( items ) {
+		const revisionsCount =
+			items[ 0 ]._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
+		return sprintf(
+			/* translators: %s: number of revisions */
+			__( 'View revisions (%s)' ),
+			revisionsCount
+		);
+	},
+	isEligible( post ) {
+		if ( post.status === 'trash' ) {
+			return false;
+		}
+		const lastRevisionId =
+			post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
+		const revisionsCount =
+			post?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
+		return !! lastRevisionId && revisionsCount > 1;
+	},
+	callback( posts, { onActionPerformed } ) {
+		const post = posts[ 0 ];
+		const href = addQueryArgs( 'revision.php', {
+			revision: post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id,
+		} );
+		document.location.href = href;
+		if ( onActionPerformed ) {
+			onActionPerformed( posts );
+		}
+	},
+};
+
+export default viewPostRevisions;
diff --git a/packages/fields/src/actions/view-post.tsx b/packages/fields/src/actions/view-post.tsx
new file mode 100644
index 0000000000000..187faffafb5d3
--- /dev/null
+++ b/packages/fields/src/actions/view-post.tsx
@@ -0,0 +1,30 @@
+/**
+ * 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 );
+		}
+	},
+};
+
+export default viewPost;
diff --git a/packages/fields/src/fields/index.ts b/packages/fields/src/fields/index.ts
new file mode 100644
index 0000000000000..63ff87842fa4c
--- /dev/null
+++ b/packages/fields/src/fields/index.ts
@@ -0,0 +1,2 @@
+export { default as titleField } from './title';
+export { default as orderField } from './order';
diff --git a/packages/fields/src/fields/order/index.ts b/packages/fields/src/fields/order/index.ts
new file mode 100644
index 0000000000000..2fc0a216dcfa0
--- /dev/null
+++ b/packages/fields/src/fields/order/index.ts
@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+const orderField: Field< BasePost > = {
+	type: 'integer',
+	id: 'menu_order',
+	label: __( 'Order' ),
+	description: __( 'Determines the order of pages.' ),
+};
+
+export default orderField;
diff --git a/packages/fields/src/fields/title/index.ts b/packages/fields/src/fields/title/index.ts
new file mode 100644
index 0000000000000..5332f476f8ff5
--- /dev/null
+++ b/packages/fields/src/fields/title/index.ts
@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { getItemTitle } from '../../actions/utils';
+
+const titleField: Field< BasePost > = {
+	type: 'text',
+	id: 'title',
+	label: __( 'Title' ),
+	placeholder: __( 'No title' ),
+	getValue: ( { item } ) => getItemTitle( item ),
+};
+
+export default titleField;
diff --git a/packages/fields/src/index.native.ts b/packages/fields/src/index.native.ts
new file mode 100644
index 0000000000000..33a26e3c2e6e2
--- /dev/null
+++ b/packages/fields/src/index.native.ts
@@ -0,0 +1,2 @@
+export * from './actions/duplicate-post.native';
+export * from './actions/reorder-page.native';
diff --git a/packages/fields/src/index.ts b/packages/fields/src/index.ts
new file mode 100644
index 0000000000000..4c721b85b61a4
--- /dev/null
+++ b/packages/fields/src/index.ts
@@ -0,0 +1,2 @@
+export * from './fields';
+export * from './actions';
diff --git a/packages/fields/src/lock-unlock.ts b/packages/fields/src/lock-unlock.ts
new file mode 100644
index 0000000000000..2b5dcc4a50631
--- /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 0000000000000..80e399d74e947
--- /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';
+
+const 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/types.ts b/packages/fields/src/types.ts
new file mode 100644
index 0000000000000..a5ed9596b07df
--- /dev/null
+++ b/packages/fields/src/types.ts
@@ -0,0 +1,86 @@
+type PostStatus =
+	| 'published'
+	| '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;
+}
+
+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;
+}
+
+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;
+	};
+}
+
+// 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 0000000000000..69dbd076d0574
--- /dev/null
+++ b/packages/fields/tsconfig.json
@@ -0,0 +1,29 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+		"checkJs": false
+	},
+	"references": [
+		{ "path": "../api-fetch" },
+		{ "path": "../components" },
+		{ "path": "../compose" },
+		{ "path": "../data" },
+		{ "path": "../element" },
+		{ "path": "../i18n" },
+		{ "path": "../icons" },
+		{ "path": "../primitives" },
+		{ "path": "../private-apis" },
+		{ "path": "../warning" },
+		{ "path": "../url" },
+		{ "path": "../notices" },
+		{ "path": "../dataviews" },
+		{ "path": "../blob" },
+		{ "path": "../core-data" },
+		{ "path": "../hooks" },
+		{ "path": "../html-entities" }
+	],
+	"include": [ "src" ]
+}
diff --git a/packages/format-library/CHANGELOG.md b/packages/format-library/CHANGELOG.md
index 27eb96102391c..a2a23524a7a9a 100644
--- a/packages/format-library/CHANGELOG.md
+++ b/packages/format-library/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/format-library/package.json b/packages/format-library/package.json
index 11e27b3c1859e..fa2f45682a2b7 100644
--- a/packages/format-library/package.json
+++ b/packages/format-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "5.3.0",
+	"version": "5.9.0",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js
index 627e1e966b655..7f8e33550770d 100644
--- a/packages/format-library/src/image/index.js
+++ b/packages/format-library/src/image/index.js
@@ -6,8 +6,11 @@ import {
 	SVG,
 	Popover,
 	Button,
-	__experimentalNumberControl as NumberControl,
+	ExternalLink,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalNumberControl as NumberControl,
+	TextareaControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
@@ -17,7 +20,6 @@ import {
 	RichTextToolbarButton,
 	MediaUploadCheck,
 } from '@wordpress/block-editor';
-import { keyboardReturn } from '@wordpress/icons';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
@@ -41,8 +43,11 @@ 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,
 		settings: image,
@@ -64,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,
 						},
 					};
 
@@ -76,21 +82,54 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
 					event.preventDefault();
 				} }
 			>
-				<HStack alignment="bottom" spacing="0">
+				<VStack spacing={ 4 }>
 					<NumberControl
-						className="block-editor-format-toolbar__image-container-value"
+						__next40pxDefaultSize
 						label={ __( 'Width' ) }
-						value={ width }
+						value={ editedWidth }
 						min={ 1 }
-						onChange={ ( newWidth ) => setWidth( newWidth ) }
+						onChange={ ( newWidth ) => {
+							setEditedWidth( newWidth );
+						} }
 					/>
-					<Button
-						className="block-editor-format-toolbar__image-container-button"
-						icon={ keyboardReturn }
-						label={ __( 'Apply' ) }
-						type="submit"
+					<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>
+					<HStack justify="right">
+						<Button
+							disabled={ ! hasChanged }
+							accessibleWhenDisabled
+							variant="primary"
+							type="submit"
+							size="compact"
+						>
+							{ __( 'Apply' ) }
+						</Button>
+					</HStack>
+				</VStack>
 			</form>
 		</Popover>
 	);
diff --git a/packages/format-library/src/image/style.scss b/packages/format-library/src/image/style.scss
index 639d1ccc5961e..1e0b922fdf4c8 100644
--- a/packages/format-library/src/image/style.scss
+++ b/packages/format-library/src/image/style.scss
@@ -1,15 +1,8 @@
 .block-editor-format-toolbar__image-popover {
 	z-index: z-index(".block-editor-format-toolbar__image-popover");
 
-	.block-editor-format-toolbar__image-container-value {
-		margin: $grid-unit-10 - $border-width;
-		min-width: 150px;
-		max-width: 500px;
-	}
-
-	.block-editor-format-toolbar__image-container-button {
-		height: $grid-unit-10 * 4 - ($border-width * 2);
-		margin-bottom: $grid-unit-10;
-		margin-right: $grid-unit-10;
+	.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
index d37d8d6dbd0cd..6cfb8c4ad4492 100644
--- a/packages/format-library/src/language/index.js
+++ b/packages/format-library/src/language/index.js
@@ -13,6 +13,7 @@ import {
 	Button,
 	Popover,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text';
@@ -78,7 +79,9 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
 			anchor={ popoverAnchor }
 			onClose={ onClose }
 		>
-			<form
+			<VStack
+				as="form"
+				spacing={ 4 }
 				className="block-editor-format-toolbar__language-container-content"
 				onSubmit={ ( event ) => {
 					event.preventDefault();
@@ -95,6 +98,8 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
 				} }
 			>
 				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					label={ title }
 					value={ lang }
 					onChange={ ( val ) => setLang( val ) }
@@ -103,6 +108,8 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
 					) }
 				/>
 				<SelectControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					label={ __( 'Text direction' ) }
 					value={ dir }
 					options={ [
@@ -119,12 +126,13 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
 				/>
 				<HStack alignment="right">
 					<Button
+						__next40pxDefaultSize
 						variant="primary"
 						type="submit"
 						text={ __( 'Apply' ) }
 					/>
 				</HStack>
-			</form>
+			</VStack>
 		</Popover>
 	);
 }
diff --git a/packages/format-library/src/link/index.js b/packages/format-library/src/link/index.js
index ce1af0a36268e..ef7008451698a 100644
--- a/packages/format-library/src/link/index.js
+++ b/packages/format-library/src/link/index.js
@@ -12,7 +12,7 @@ import {
 	insert,
 	create,
 } from '@wordpress/rich-text';
-import { isURL, isEmail } from '@wordpress/url';
+import { isURL, isEmail, isPhoneNumber } from '@wordpress/url';
 import {
 	RichTextToolbarButton,
 	RichTextShortcut,
@@ -104,6 +104,13 @@ function Edit( {
 					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( {
diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md
index a72477e2adf78..962a94056fbbd 100644
--- a/packages/hooks/CHANGELOG.md
+++ b/packages/hooks/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/hooks/README.md b/packages/hooks/README.md
index 3e9897c79952c..f80d2e63af37b 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 28e6b3d1bf879..841dcd33afb7f 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/hooks",
-	"version": "4.3.0",
+	"version": "4.9.0",
 	"description": "WordPress hooks library.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/hooks/src/createCurrentHook.js b/packages/hooks/src/createCurrentHook.js
index 634901fe55f63..3ada032249600 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 652ab06b4ba72..9fccf38171f33 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 361383a3a97fc..1f9b1a8206b02 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 c2bf6fd187ce0..f2a56dbdc0d71 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[]) => 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,26 +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 undefined;
+		return ( async ? asyncRunner : syncRunner )();
 	};
 }
 
diff --git a/packages/hooks/src/index.js b/packages/hooks/src/index.js
index 653a9537145d9..1d13397e406c6 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 9b7eb3b8e0e22..5fdaf5fc7207a 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/html-entities/CHANGELOG.md b/packages/html-entities/CHANGELOG.md
index 6f159133f409e..99da545e4e9a9 100644
--- a/packages/html-entities/CHANGELOG.md
+++ b/packages/html-entities/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/html-entities/package.json b/packages/html-entities/package.json
index 858bfd949ba8b..fe0c1314b1a38 100644
--- a/packages/html-entities/package.json
+++ b/packages/html-entities/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/html-entities",
-	"version": "4.3.0",
+	"version": "4.9.0",
 	"description": "HTML entity utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/i18n/CHANGELOG.md b/packages/i18n/CHANGELOG.md
index 53c52849eef2c..613da356ace7f 100644
--- a/packages/i18n/CHANGELOG.md
+++ b/packages/i18n/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index b2196f9a519aa..7dc84901cafea 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/i18n",
-	"version": "5.3.0",
+	"version": "5.9.0",
 	"description": "WordPress internationalization (i18n) library.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index b3de660c72f1d..b1b19fdfbc0f2 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -2,6 +2,29 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 0bd6fd92b543c..39395b2b76cb0 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/icons",
-	"version": "10.3.0",
+	"version": "10.9.0",
 	"description": "WordPress Icons package, based on dashicon.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/icons/src/icon/stories/index.story.js b/packages/icons/src/icon/stories/index.story.js
index 8fda801f23884..092434de43b4d 100644
--- a/packages/icons/src/icon/stories/index.story.js
+++ b/packages/icons/src/icon/stories/index.story.js
@@ -47,7 +47,7 @@ const LibraryExample = () => {
 	const filteredIcons = filter.length
 		? Object.fromEntries(
 				Object.entries( availableIcons ).filter( ( [ name ] ) =>
-					name.includes( filter )
+					name.toLowerCase().includes( filter.toLowerCase() )
 				)
 		  )
 		: availableIcons;
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index c5d5976dd2d5f..586911ffc746b 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -10,13 +10,18 @@ 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';
@@ -76,6 +81,7 @@ 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';
@@ -117,6 +123,7 @@ 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';
@@ -224,6 +231,7 @@ 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';
@@ -240,6 +248,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';
@@ -253,6 +262,8 @@ 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';
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 0000000000000..3755b63873cef
--- /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 0000000000000..1b3686f6ec1e6
--- /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 0000000000000..173b609354380
--- /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 0000000000000..96c209ddb09f6
--- /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 0000000000000..910488ee3035a
--- /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/envelope.js b/packages/icons/src/library/envelope.js
new file mode 100644
index 0000000000000..45064b35785ec
--- /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/home-button.js b/packages/icons/src/library/home-button.js
new file mode 100644
index 0000000000000..b952f46d725ff
--- /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/send.js b/packages/icons/src/library/send.js
new file mode 100644
index 0000000000000..3770d9a94bc7b
--- /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/sides-axial.js b/packages/icons/src/library/sides-axial.js
index 660d3ac20853d..df8bbd808aef5 100644
--- a/packages/icons/src/library/sides-axial.js
+++ b/packages/icons/src/library/sides-axial.js
@@ -6,12 +6,9 @@ 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"
-			style={ {
-				fill: '#1e1e1e',
-				fillRule: 'evenodd',
-				clipRule: 'evenodd',
-			} }
 		/>
 	</SVG>
 );
diff --git a/packages/icons/src/library/sides-bottom.js b/packages/icons/src/library/sides-bottom.js
index 48cd1516e7c16..2029b28b6a83e 100644
--- a/packages/icons/src/library/sides-bottom.js
+++ b/packages/icons/src/library/sides-bottom.js
@@ -9,7 +9,7 @@ const sidesBottom = (
 			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" style={ { fill: '#1e1e1e' } } />
+		<Path d="m16.5 19.5h-9v-1.5h9z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/square.js b/packages/icons/src/library/square.js
new file mode 100644
index 0000000000000..843a8d2d5261d
--- /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/styles.js b/packages/icons/src/library/styles.js
index c91683d55dce1..7d3568e43fd17 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/thumbs-down.js b/packages/icons/src/library/thumbs-down.js
new file mode 100644
index 0000000000000..94e11ee8f0638
--- /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 0000000000000..f65b6445359e2
--- /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/interactivity-router/CHANGELOG.md b/packages/interactivity-router/CHANGELOG.md
index 21d37aa10323f..7878796b9004c 100644
--- a/packages/interactivity-router/CHANGELOG.md
+++ b/packages/interactivity-router/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/interactivity-router/README.md b/packages/interactivity-router/README.md
index 94b88e80886c9..efb52e59be2b5 100644
--- a/packages/interactivity-router/README.md
+++ b/packages/interactivity-router/README.md
@@ -1,21 +1,32 @@
-# Interactivity Router
+# `@wordpress/interactivity-router`
 
-> **Note**
-> This package is a extension of the API shared at [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/). As part of an [Open Source project](https://developer.wordpress.org/block-editor/getting-started/faq/#the-gutenberg-project) we encourage participation in helping shape this API and the [discussions in GitHub](https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api) is the best place to engage.
+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.
 
-This package defines an Interactivity API store with the `core/router` namespace, exposing state and actions like `navigate` and `prefetch` to handle client-side navigations.
+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.
+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';
 
-store( 'myblock', {
+// This is how you would typically use the navigate() action in your block.
+store( 'my-namespace/myblock', {
 	actions: {
-		*navigate( e ) {
+		*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'
 			);
@@ -25,52 +36,116 @@ store( 'myblock', {
 } );
 ```
 
-## Frequently Asked Questions
+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.
 
-At this point, some of the questions you have about the Interactivity API may be:
+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.
 
-### What is this?
+**Params**
 
-This is the base of a new standard to create interactive blocks. Read [the proposal](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/) to learn more about this.
+```js
+navigate( href: string, options: NavigateOptions = {} )
+```
 
-### Can I use it?
+-   `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`.
 
-You can test it, but it's still very experimental.
+#### `prefetch`
 
-### How do I get started?
+Prefetches the page for the passed URL. The page is cached and can be used for navigation.
 
-The best place to start with the Interactivity API is this [**Getting started guide**](https://github.com/WordPress/gutenberg/blob/trunk/packages/interactivity/docs/1-getting-started.md). There you'll will find a very quick start guide and the current requirements of the Interactivity API.
+The function normalizes the URL and stores internally the fetch promise, to avoid triggering a second fetch for an ongoing request.
 
-### Where can I ask questions?
+**Params**
 
-The [“Interactivity API” category](https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api) in Gutenberg repo discussions is the best place to ask questions about the Interactivity API.
+```js
+prefetch( url: string, options: PrefetchOptions = {} )
+```
 
-### Where can I share my feedback about the API?
+-   `url`: The page `url`.
+-   `options`: Options object.
 
-The [“Interactivity API” category](https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api) in Gutenberg repo discussions is also the best place to share your feedback about the Interactivity API.
+    -   `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 --save
+npm install @wordpress/interactivity-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._
-
-## Docs & Examples
+This step is only required if you use the Interactivity API outside WordPress.
 
-**[Interactivity API Documentation](https://github.com/WordPress/gutenberg/tree/trunk/packages/interactivity/docs)** is the best place to learn about this proposal. Although it's still in progress, some key pages are already available:
+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/).
 
--   **[Getting Started Guide](https://github.com/WordPress/gutenberg/blob/trunk/packages/interactivity/docs/1-getting-started.md)**: Follow this Getting Started guide to learn how to scaffold a new project and create your first interactive blocks.
--   **[API Reference](https://github.com/WordPress/gutenberg/blob/trunk/packages/interactivity/docs/2-api-reference.md)**: Check this page for technical detailed explanations and examples of the directives and the store.
+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.
 
-Here you have some more resources to learn/read more about the Interactivity API:
+## License
 
--   **[Interactivity API Discussions](https://github.com/WordPress/gutenberg/discussions/52882)**
--   [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/)
--   Developer Hours sessions ([Americas](https://www.youtube.com/watch?v=RXNoyP2ZiS8&t=664s) & [APAC/EMEA](https://www.youtube.com/watch?v=6ghbrhyAcvA))
--   [wpmovies.dev](http://wpmovies.dev/) demo and its [wp-movies-demo](https://github.com/WordPress/wp-movies-demo) repo
+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>
+<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
index e0f940170a3c5..529d7a2ad1f32 100644
--- a/packages/interactivity-router/package.json
+++ b/packages/interactivity-router/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interactivity-router",
-	"version": "2.3.0",
+	"version": "2.9.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",
@@ -26,7 +26,9 @@
 	"module": "build-module/index.js",
 	"react-native": "src/index",
 	"types": "build-types",
+	"wpScriptModuleExports": "./build-module/index.js",
 	"dependencies": {
+		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/interactivity": "file:../interactivity"
 	},
 	"publishConfig": {
diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts
index 79b67eeb98e65..b2e8e2d4395dc 100644
--- a/packages/interactivity-router/src/index.ts
+++ b/packages/interactivity-router/src/index.ts
@@ -14,8 +14,8 @@ const {
 	initialVdom,
 	toVdom,
 	render,
-	parseInitialData,
-	populateInitialData,
+	parseServerData,
+	populateServerData,
 	batch,
 } = privateApis(
 	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
@@ -103,7 +103,7 @@ const regionsToVdom: RegionsToVdom = async ( dom, { vdom } = {} ) => {
 		} );
 	}
 	const title = dom.querySelector( 'title' )?.innerText;
-	const initialData = parseInitialData( dom );
+	const initialData = parseServerData( dom );
 	return { regions, head, title, initialData };
 };
 
@@ -119,7 +119,7 @@ const renderRegions = ( page: Page ) => {
 			}
 		}
 		if ( navigationMode === 'regionBased' ) {
-			populateInitialData( page.initialData );
+			populateServerData( page.initialData );
 			const attrName = `data-${ directivePrefix }-router-region`;
 			document
 				.querySelectorAll( `[${ attrName }]` )
@@ -209,17 +209,32 @@ const isValidEvent = ( event: MouseEvent ) =>
 // Variable to store the current navigation.
 let navigatingTo = '';
 
-export const { state, actions } = store( 'core/router', {
+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,
-			texts: {
-				loading: '',
-				loaded: '',
-			},
-			message: '',
 		},
 	},
 	actions: {
@@ -275,7 +290,7 @@ export const { state, actions } = store( 'core/router', {
 					navigation.hasFinished = false;
 				}
 				if ( screenReaderAnnouncement ) {
-					navigation.message = navigation.texts.loading;
+					a11ySpeak( 'loading' );
 				}
 			}, 400 );
 
@@ -315,14 +330,7 @@ export const { state, actions } = store( 'core/router', {
 				}
 
 				if ( screenReaderAnnouncement ) {
-					// Announce that the page has been loaded. If the message is the
-					// same, we use a no-break space similar to the @wordpress/a11y
-					// package: https://github.com/WordPress/gutenberg/blob/c395242b8e6ee20f8b06c199e4fc2920d7018af1/packages/a11y/src/filter-message.js#L20-L26
-					navigation.message =
-						navigation.texts.loaded +
-						( navigation.message === navigation.texts.loaded
-							? '\u00A0'
-							: '' );
+					a11ySpeak( 'loaded' );
 				}
 
 				// Scroll to the anchor if exits in the link.
@@ -363,6 +371,56 @@ export const { state, actions } = store( 'core/router', {
 	},
 } );
 
+/**
+ * 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' ) {
diff --git a/packages/interactivity-router/tsconfig.json b/packages/interactivity-router/tsconfig.json
index eff80af2f28db..f601a26a86f5f 100644
--- a/packages/interactivity-router/tsconfig.json
+++ b/packages/interactivity-router/tsconfig.json
@@ -7,6 +7,6 @@
 		"checkJs": false,
 		"strict": false
 	},
-	"references": [ { "path": "../interactivity" } ],
+	"references": [ { "path": "../a11y" }, { "path": "../interactivity" } ],
 	"include": [ "src/**/*" ]
 }
diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
index a8a5a5cd4c78b..f4431d108dc36 100644
--- a/packages/interactivity/CHANGELOG.md
+++ b/packages/interactivity/CHANGELOG.md
@@ -2,12 +2,60 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   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)
diff --git a/packages/interactivity/package.json b/packages/interactivity/package.json
index 6e903400f4c9f..417ec8a2d337b 100644
--- a/packages/interactivity/package.json
+++ b/packages/interactivity/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interactivity",
-	"version": "6.3.0",
+	"version": "6.9.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",
@@ -26,9 +26,12 @@
 	"module": "build-module/index.js",
 	"react-native": "src/index",
 	"types": "build-types",
+	"wpScriptModuleExports": {
+		".": "./build-module/index.js",
+		"./debug": "./build-module/debug.js"
+	},
 	"dependencies": {
 		"@preact/signals": "^1.2.2",
-		"deepsignal": "^1.4.0",
 		"preact": "^10.19.3"
 	},
 	"publishConfig": {
diff --git a/packages/interactivity/src/directives.tsx b/packages/interactivity/src/directives.tsx
index fa59965607946..340880954683d 100644
--- a/packages/interactivity/src/directives.tsx
+++ b/packages/interactivity/src/directives.tsx
@@ -6,145 +6,21 @@
  */
 import { h as createElement, type RefObject } from 'preact';
 import { useContext, useMemo, useRef } from 'preact/hooks';
-import { deepSignal, peek, type DeepSignal } from 'deepsignal';
 
 /**
  * Internal dependencies
  */
-import { useWatch, useInit, kebabToCamelCase, warn, splitTask } from './utils';
-import type { DirectiveEntry } from './hooks';
-import { directive, getScope, getEvaluate } from './hooks';
-
-// Assigned objects should be ignored during proxification.
-const contextAssignedObjects = new WeakMap();
-
-// Store the context proxy and fallback for each object in the context.
-const contextObjectToProxy = new WeakMap();
-const contextProxyToObject = new WeakMap();
-const contextObjectToFallback = new WeakMap();
-
-const isPlainObject = ( item: unknown ): boolean =>
-	Boolean( item && typeof item === 'object' && item.constructor === Object );
-
-const descriptor = Reflect.getOwnPropertyDescriptor;
-
-/**
- * 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.
- *
- * By default, all plain objects inside the context are wrapped, unless it is
- * listed in the `ignore` option.
- *
- * @param current   Current context.
- * @param inherited Inherited context, used as fallback.
- *
- * @return The wrapped context object.
- */
-const proxifyContext = ( current: object, inherited: object = {} ): object => {
-	// Update the fallback object reference when it changes.
-	contextObjectToFallback.set( current, inherited );
-	if ( ! contextObjectToProxy.has( current ) ) {
-		const proxy = new Proxy( current, {
-			get: ( target: DeepSignal< any >, k ) => {
-				const fallback = contextObjectToFallback.get( current );
-				// Always subscribe to prop changes in the current context.
-				const currentProp = target[ k ];
-
-				// Return the inherited prop when missing in target.
-				if ( ! ( k in target ) && k in fallback ) {
-					return fallback[ k ];
-				}
-
-				// Proxify plain objects that were not directly assigned.
-				if (
-					k in target &&
-					! contextAssignedObjects.get( target )?.has( k ) &&
-					isPlainObject( peek( target, k ) )
-				) {
-					return proxifyContext( currentProp, fallback[ k ] );
-				}
-
-				// Return the stored proxy for `currentProp` when it exists.
-				if ( contextObjectToProxy.has( currentProp ) ) {
-					return contextObjectToProxy.get( currentProp );
-				}
-
-				/*
-				 * For other cases, return the value from target, also
-				 * subscribing to changes in the parent context when the current
-				 * prop is not defined.
-				 */
-				return k in target ? currentProp : fallback[ k ];
-			},
-			set: ( target, k, value ) => {
-				const fallback = contextObjectToFallback.get( current );
-				const obj =
-					k in target || ! ( k in fallback ) ? target : fallback;
-
-				/*
-				 * Assigned object values should not be proxified so they point
-				 * to the original object and don't inherit unexpected
-				 * properties.
-				 */
-				if ( value && typeof value === 'object' ) {
-					if ( ! contextAssignedObjects.has( obj ) ) {
-						contextAssignedObjects.set( obj, new Set() );
-					}
-					contextAssignedObjects.get( obj ).add( k );
-				}
-
-				/*
-				 * When the value is a proxy, it's because it comes from the
-				 * context, so the inner value is assigned instead.
-				 */
-				if ( contextProxyToObject.has( value ) ) {
-					const innerValue = contextProxyToObject.get( value );
-					obj[ k ] = innerValue;
-				} else {
-					obj[ k ] = value;
-				}
-
-				return true;
-			},
-			ownKeys: ( target ) => [
-				...new Set( [
-					...Object.keys( contextObjectToFallback.get( current ) ),
-					...Object.keys( target ),
-				] ),
-			],
-			getOwnPropertyDescriptor: ( target, k ) =>
-				descriptor( target, k ) ||
-				descriptor( contextObjectToFallback.get( current ), k ),
-		} );
-		contextObjectToProxy.set( current, proxy );
-		contextProxyToObject.set( proxy, current );
-	}
-	return contextObjectToProxy.get( current );
-};
-
-/**
- * Recursively update values within a deepSignal object.
- *
- * @param target A deepSignal instance.
- * @param source Object with properties to update in `target`.
- */
-const updateSignals = (
-	target: DeepSignal< any >,
-	source: DeepSignal< any >
-) => {
-	for ( const k in source ) {
-		if (
-			isPlainObject( peek( target, k ) ) &&
-			isPlainObject( peek( source, k ) )
-		) {
-			updateSignals( target[ `$${ k }` ].peek(), source[ k ] );
-		} else {
-			target[ k ] = source[ k ];
-		}
-	}
-};
+import {
+	useWatch,
+	useInit,
+	kebabToCamelCase,
+	warn,
+	splitTask,
+	isPlainObject,
+} from './utils';
+import { directive, getEvaluate, type DirectiveEntry } from './hooks';
+import { getScope } from './scopes';
+import { proxifyState, proxifyContext, deepMerge } from './proxies';
 
 /**
  * Recursively clone the passed object.
@@ -257,21 +133,28 @@ export default () => {
 	// data-wp-context
 	directive(
 		'context',
-		// @ts-ignore-next-line
 		( {
 			directives: { context },
 			props: { children },
 			context: inheritedContext,
 		} ) => {
 			const { Provider } = inheritedContext;
-			const inheritedValue = useContext( inheritedContext );
-			const currentValue = useRef( deepSignal( {} ) );
 			const defaultEntry = context.find(
 				( { suffix } ) => suffix === 'default'
 			);
+			const { 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.
@@ -280,12 +163,23 @@ export default () => {
 							`The value of data-wp-context in "${ namespace }" store must be a valid stringified JSON object.`
 						);
 					}
-					updateSignals( currentValue.current, {
-						[ namespace ]: deepClone( value ),
-					} );
+					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 proxifyContext( currentValue.current, inheritedValue );
-			}, [ defaultEntry, inheritedValue ] );
+				return result;
+			}, [ defaultEntry, inheritedClient, inheritedServer ] );
 
 			return createElement( Provider, { value: contextStack }, children );
 		},
@@ -295,7 +189,33 @@ export default () => {
 	// data-wp-watch--[name]
 	directive( 'watch', ( { directives: { watch }, evaluate } ) => {
 		watch.forEach( ( entry ) => {
-			useWatch( () => evaluate( 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;
+			} );
 		} );
 	} );
 
@@ -303,7 +223,33 @@ export default () => {
 	directive( 'init', ( { directives: { init }, evaluate } ) => {
 		init.forEach( ( entry ) => {
 			// TODO: Replace with useEffect to prevent unneeded scopes.
-			useInit( () => evaluate( entry ) );
+			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;
+			} );
 		} );
 	} );
 
@@ -327,7 +273,30 @@ export default () => {
 					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 }`,
+										},
+									},
+								}
+							);
+						}
+					}
 				} );
 			};
 		} );
@@ -602,16 +571,26 @@ export default () => {
 			return list.map( ( item ) => {
 				const itemProp =
 					suffix === 'default' ? 'item' : kebabToCamelCase( suffix );
-				const itemContext = deepSignal( { [ namespace ]: {} } );
-				const mergedContext = proxifyContext(
-					itemContext,
-					inheritedValue
+				const itemContext = proxifyContext(
+					proxifyState( namespace, {} ),
+					inheritedValue.client[ namespace ]
 				);
+				const mergedContext = {
+					client: {
+						...inheritedValue.client,
+						[ namespace ]: itemContext,
+					},
+					server: { ...inheritedValue.server },
+				};
 
 				// Set the item after proxifying the context.
-				mergedContext[ namespace ][ itemProp ] = item;
+				mergedContext.client[ namespace ][ itemProp ] = item;
 
-				const scope = { ...getScope(), context: mergedContext };
+				const scope = {
+					...getScope(),
+					context: mergedContext.client,
+					serverContext: mergedContext.server,
+				};
 				const key = eachKey
 					? getEvaluate( { scope } )( eachKey[ 0 ] )
 					: item;
diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx
index 9af6fb00d6aba..6b55ec014aa79 100644
--- a/packages/interactivity/src/hooks.tsx
+++ b/packages/interactivity/src/hooks.tsx
@@ -12,13 +12,14 @@ import {
 	type ComponentChildren,
 } from 'preact';
 import { useRef, useCallback, useContext } from 'preact/hooks';
-import type { VNode, Context, RefObject } from 'preact';
+import type { VNode, Context } from 'preact';
 
 /**
  * Internal dependencies
  */
 import { store, stores, universalUnlock } from './store';
 import { warn } from './utils';
+import { getScope, setScope, resetScope, type Scope } from './scopes';
 export interface DirectiveEntry {
 	value: string | object;
 	namespace: string;
@@ -56,7 +57,7 @@ interface DirectiveArgs {
 }
 
 interface DirectiveCallback {
-	( args: DirectiveArgs ): VNode | null | void;
+	( args: DirectiveArgs ): VNode< any > | null | void;
 }
 
 interface DirectiveOptions {
@@ -69,14 +70,7 @@ interface DirectiveOptions {
 	priority?: number;
 }
 
-interface Scope {
-	evaluate: Evaluate;
-	context: object;
-	ref: RefObject< HTMLElement >;
-	attributes: createElement.JSX.HTMLAttributes;
-}
-
-interface Evaluate {
+export interface Evaluate {
 	( entry: DirectiveEntry, ...args: any[] ): any;
 }
 
@@ -99,86 +93,7 @@ interface DirectivesProps {
 }
 
 // Main context.
-const context = createContext< any >( {} );
-
-// Wrap the element props to prevent modifications.
-const immutableMap = new WeakMap();
-const immutableError = () => {
-	throw new Error(
-		'Please use `data-wp-bind` to modify the attributes of an element.'
-	);
-};
-const immutableHandlers: ProxyHandler< object > = {
-	get( target, key, receiver ) {
-		const value = Reflect.get( target, key, receiver );
-		return !! value && typeof value === 'object'
-			? deepImmutable( value )
-			: value;
-	},
-	set: immutableError,
-	deleteProperty: immutableError,
-};
-const deepImmutable = < T extends object = {} >( target: T ): T => {
-	if ( ! immutableMap.has( target ) ) {
-		immutableMap.set( target, new Proxy( target, immutableHandlers ) );
-	}
-	return immutableMap.get( target );
-};
-
-// Store stacks for the current scope and the default namespaces and export APIs
-// to interact with them.
-const scopeStack: Scope[] = [];
-const namespaceStack: string[] = [];
-
-/**
- * Retrieves the context inherited by the element evaluating a function from the
- * store. The returned value depends on the element and the namespace where the
- * function calling `getContext()` exists.
- *
- * @param namespace Store namespace. By default, the namespace where the calling
- *                  function exists is used.
- * @return The context content.
- */
-export const getContext = < T extends object >( namespace?: string ): T =>
-	getScope()?.context[ namespace || getNamespace() ];
-
-/**
- * Retrieves a representation of the element where a function from the store
- * is being evalutated. Such representation is read-only, and contains a
- * reference to the DOM element, its props and a local reactive state.
- *
- * @return Element representation.
- */
-export const getElement = () => {
-	if ( ! getScope() ) {
-		throw Error(
-			'Cannot call `getElement()` outside getters and actions used by directives.'
-		);
-	}
-	const { ref, attributes } = getScope();
-	return Object.freeze( {
-		ref: ref.current,
-		attributes: deepImmutable( attributes ),
-	} );
-};
-
-export const getScope = () => scopeStack.slice( -1 )[ 0 ];
-
-export const setScope = ( scope: Scope ) => {
-	scopeStack.push( scope );
-};
-export const resetScope = () => {
-	scopeStack.pop();
-};
-
-export const getNamespace = () => namespaceStack.slice( -1 )[ 0 ];
-
-export const setNamespace = ( namespace: string ) => {
-	namespaceStack.push( namespace );
-};
-export const resetNamespace = () => {
-	namespaceStack.pop();
-};
+const context = createContext< any >( { client: {}, server: {} } );
 
 // WordPress Directives.
 const directiveCallbacks: Record< string, DirectiveCallback > = {};
@@ -275,9 +190,13 @@ const resolve = ( path: string, namespace: string ) => {
 	}
 	let resolvedStore = stores.get( namespace );
 	if ( typeof resolvedStore === 'undefined' ) {
-		resolvedStore = store( namespace, undefined, {
-			lock: universalUnlock,
-		} );
+		resolvedStore = store(
+			namespace,
+			{},
+			{
+				lock: universalUnlock,
+			}
+		);
 	}
 	const current = {
 		...resolvedStore,
@@ -338,7 +257,9 @@ const Directives = ( {
 	// element ref, state and props.
 	const scope = useRef< Scope >( {} as Scope ).current;
 	scope.evaluate = useCallback( getEvaluate( { scope } ), [] );
-	scope.context = useContext( context );
+	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 */
diff --git a/packages/interactivity/src/index.ts b/packages/interactivity/src/index.ts
index a43534509bb5a..9d013e4e744ed 100644
--- a/packages/interactivity/src/index.ts
+++ b/packages/interactivity/src/index.ts
@@ -3,7 +3,6 @@
  */
 import { h, cloneElement, render } from 'preact';
 import { batch } from '@preact/signals';
-import { deepSignal } from 'deepsignal';
 
 /**
  * Internal dependencies
@@ -12,11 +11,13 @@ import registerDirectives from './directives';
 import { init, getRegionRootFragment, initialVdom } from './init';
 import { directivePrefix } from './constants';
 import { toVdom } from './vdom';
-import { directive, getNamespace } from './hooks';
-import { parseInitialData, populateInitialData } from './store';
+import { directive } from './hooks';
+import { getNamespace } from './namespaces';
+import { parseServerData, populateServerData } from './store';
+import { proxifyState } from './proxies';
 
-export { store, getConfig } from './store';
-export { getContext, getElement } from './hooks';
+export { store, getConfig, getServerState } from './store';
+export { getContext, getServerContext, getElement } from './scopes';
 export {
 	withScope,
 	useWatch,
@@ -45,9 +46,9 @@ export const privateApis = ( lock ): any => {
 			h,
 			cloneElement,
 			render,
-			deepSignal,
-			parseInitialData,
-			populateInitialData,
+			proxifyState,
+			parseServerData,
+			populateServerData,
 			batch,
 		};
 	}
@@ -55,7 +56,5 @@ export const privateApis = ( lock ): any => {
 	throw new Error( 'Forbidden access.' );
 };
 
-document.addEventListener( 'DOMContentLoaded', async () => {
-	registerDirectives();
-	await init();
-} );
+registerDirectives();
+init();
diff --git a/packages/interactivity/src/namespaces.ts b/packages/interactivity/src/namespaces.ts
new file mode 100644
index 0000000000000..9103f3c76e67b
--- /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 0000000000000..64517c91a6940
--- /dev/null
+++ b/packages/interactivity/src/proxies/context.ts
@@ -0,0 +1,69 @@
+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 ),
+};
+
+/**
+ * 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 0000000000000..168e6467fc701
--- /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 0000000000000..3bfe3b9168b79
--- /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 0000000000000..29bd58aaa4fce
--- /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 0000000000000..f63c84738bcb1
--- /dev/null
+++ b/packages/interactivity/src/proxies/state.ts
@@ -0,0 +1,382 @@
+/**
+ * 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 ( ! ( 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 );
+
+		if (
+			typeof desc.get === 'function' ||
+			typeof desc.set === 'function'
+		) {
+			if ( override || isNew ) {
+				Object.defineProperty( target, key, {
+					...desc,
+					configurable: true,
+					enumerable: true,
+				} );
+				if ( desc.get && propSignal ) {
+					propSignal.setGetter( desc.get );
+				}
+			}
+		} else if ( isPlainObject( source[ key ] ) ) {
+			if ( isNew || ( override && ! isPlainObject( target[ key ] ) ) ) {
+				target[ key ] = {};
+				if ( propSignal ) {
+					propSignal.setValue( target[ key ] );
+				}
+			}
+			if ( isPlainObject( target[ key ] ) ) {
+				deepMergeRecursive( target[ key ], source[ key ], override );
+			}
+		} else if ( override || isNew ) {
+			Object.defineProperty( target, key, desc );
+			if ( propSignal ) {
+				propSignal.setValue( desc.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 0000000000000..506b8c3b097ba
--- /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 0000000000000..1e4a969d0f9dc
--- /dev/null
+++ b/packages/interactivity/src/proxies/test/context-proxy.ts
@@ -0,0 +1,351 @@
+/**
+ * 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 );
+			} );
+		} );
+
+		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 0000000000000..f475385a43787
--- /dev/null
+++ b/packages/interactivity/src/proxies/test/deep-merge.ts
@@ -0,0 +1,466 @@
+/* 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 arrays', () => {
+			const target = { a: [ 1, 2 ] };
+			const source = { a: [ 3, 4 ] };
+			const result = {};
+			deepMerge( result, target );
+			deepMerge( result, source );
+			expect( result ).toEqual( { a: [ 3, 4 ] } );
+		} );
+
+		it( 'should handle arrays when overwrite is false', () => {
+			const target = { a: [ 1, 2 ] };
+			const source = { a: [ 3, 4 ] };
+			const result = {};
+			deepMerge( result, target, false );
+			deepMerge( result, source, false );
+			expect( result ).toEqual( { a: [ 1, 2 ] } );
+		} );
+
+		it( 'should handle null values', () => {
+			const target = { a: 1, b: null };
+			const source = { b: 2, c: null };
+			const result = {};
+			deepMerge( result, target );
+			deepMerge( result, source );
+			expect( result ).toEqual( { a: 1, b: 2, c: null } );
+		} );
+
+		it( 'should handle undefined values', () => {
+			const target = { a: 1, b: undefined };
+			const source = { b: 2, c: undefined };
+			const result = {};
+			deepMerge( result, target );
+			deepMerge( result, source );
+			expect( result ).toEqual( { a: 1, b: 2, c: undefined } );
+		} );
+
+		it( 'should handle undefined values when overwrite is false', () => {
+			const target = { a: 1, b: undefined };
+			const source = { b: 2, c: undefined };
+			const result = {};
+			deepMerge( result, target, false );
+			deepMerge( result, source, false );
+			expect( result ).toEqual( { a: 1, b: undefined, c: undefined } );
+		} );
+
+		it( 'should handle deleted values when overwrite is false', () => {
+			const target = { a: 1 };
+			const source = { a: 2 };
+			const result: Record< string, any > = {};
+			deepMerge( result, target, false );
+			delete result.a;
+			deepMerge( result, source, false );
+			expect( result ).toEqual( { a: 2 } );
+		} );
+
+		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 };
+
+			const spy = jest.fn( () => Object.keys( target ) );
+			effect( spy );
+
+			expect( spy ).toHaveBeenCalledTimes( 1 );
+
+			deepMerge( target, source, false );
+
+			expect( spy ).toHaveBeenCalledTimes( 2 );
+			expect( spy ).toHaveLastReturnedWith( [ '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' );
+		} );
+
+		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();
+		} );
+	} );
+} );
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 0000000000000..4b0d2b0a708c3
--- /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 0000000000000..225621072929d
--- /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 0000000000000..722305f6bee11
--- /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
index 281a6c266021e..b147e0f61163b 100644
--- a/packages/interactivity/src/store.ts
+++ b/packages/interactivity/src/store.ts
@@ -1,174 +1,18 @@
 /**
- * External dependencies
+ * Internal dependencies
  */
-import { deepSignal } from 'deepsignal';
-import { computed } from '@preact/signals';
-
+import { proxifyState, proxifyStore, deepMerge } from './proxies';
 /**
- * Internal dependencies
+ * External dependencies
  */
-import {
-	getScope,
-	setScope,
-	resetScope,
-	getNamespace,
-	setNamespace,
-	resetNamespace,
-} from './hooks';
-const isObject = ( item: unknown ): item is Record< string, unknown > =>
-	Boolean( item && typeof item === 'object' && item.constructor === Object );
-
-const deepMerge = ( target: any, source: any ) => {
-	if ( isObject( target ) && isObject( source ) ) {
-		for ( const key in source ) {
-			const getter = Object.getOwnPropertyDescriptor( source, key )?.get;
-			if ( typeof getter === 'function' ) {
-				Object.defineProperty( target, key, { get: getter } );
-			} else if ( isObject( source[ key ] ) ) {
-				if ( ! target[ key ] ) {
-					target[ key ] = {};
-				}
-				deepMerge( target[ key ], source[ key ] );
-			} else {
-				try {
-					target[ key ] = source[ key ];
-				} catch ( e ) {
-					// Assignemnts fail for properties that are only getters.
-					// When that's the case, the assignment is simply ignored.
-				}
-			}
-		}
-	}
-};
+import { getNamespace } from './namespaces';
+import { isPlainObject } from './utils';
 
 export const stores = new Map();
 const rawStores = new Map();
 const storeLocks = new Map();
 const storeConfigs = new Map();
-
-const objToProxy = new WeakMap();
-const proxyToNs = new WeakMap();
-const scopeToGetters = new WeakMap();
-
-const proxify = ( obj: any, ns: string ) => {
-	if ( ! objToProxy.has( obj ) ) {
-		const proxy = new Proxy( obj, handlers );
-		objToProxy.set( obj, proxy );
-		proxyToNs.set( proxy, ns );
-	}
-	return objToProxy.get( obj );
-};
-
-const handlers = {
-	get: ( target: any, key: string | symbol, receiver: any ) => {
-		const ns = proxyToNs.get( receiver );
-
-		// Check if the property is a getter and we are inside an scope. If that is
-		// the case, we clone the getter to avoid overwriting the scoped
-		// dependencies of the computed each time that getter runs.
-		const getter = Object.getOwnPropertyDescriptor( target, key )?.get;
-		if ( getter ) {
-			const scope = getScope();
-			if ( scope ) {
-				const getters =
-					scopeToGetters.get( scope ) ||
-					scopeToGetters.set( scope, new Map() ).get( scope );
-				if ( ! getters.has( getter ) ) {
-					getters.set(
-						getter,
-						computed( () => {
-							setNamespace( ns );
-							setScope( scope );
-							try {
-								return getter.call( target );
-							} finally {
-								resetScope();
-								resetNamespace();
-							}
-						} )
-					);
-				}
-				return getters.get( getter ).value;
-			}
-		}
-
-		const result = Reflect.get( target, key );
-
-		// Check if the proxy is the store root and no key with that name exist. In
-		// that case, return an empty object for the requested key.
-		if ( typeof result === 'undefined' && receiver === stores.get( ns ) ) {
-			const obj = {};
-			Reflect.set( target, key, obj );
-			return proxify( obj, ns );
-		}
-
-		// Check if the property is a generator. If it is, we turn it into an
-		// asynchronous function where we restore the default namespace and scope
-		// each time it awaits/yields.
-		if ( result?.constructor?.name === 'GeneratorFunction' ) {
-			return async ( ...args: unknown[] ) => {
-				const scope = getScope();
-				const gen: Generator< any > = result( ...args );
-
-				let value: unknown;
-				let it: IteratorResult< any >;
-
-				while ( true ) {
-					setNamespace( ns );
-					setScope( scope );
-					try {
-						it = gen.next( value );
-					} finally {
-						resetScope();
-						resetNamespace();
-					}
-
-					try {
-						value = await it.value;
-					} catch ( e ) {
-						setNamespace( ns );
-						setScope( scope );
-						gen.throw( e );
-					} finally {
-						resetScope();
-						resetNamespace();
-					}
-
-					if ( it.done ) {
-						break;
-					}
-				}
-
-				return value;
-			};
-		}
-
-		// Check if the property is a synchronous function. If it is, set the
-		// default namespace. Synchronous functions always run in the proper scope,
-		// which is set by the Directives component.
-		if ( typeof result === 'function' ) {
-			return ( ...args: unknown[] ) => {
-				setNamespace( ns );
-				try {
-					return result( ...args );
-				} finally {
-					resetNamespace();
-				}
-			};
-		}
-
-		// Check if the property is an object. If it is, proxyify it.
-		if ( isObject( result ) ) {
-			return proxify( result, ns );
-		}
-
-		return result;
-	},
-	// Prevents passing the current proxy as the receiver to the deepSignal.
-	set( target: any, key: string, value: any ) {
-		return Reflect.set( target, key, value );
-	},
-};
+const serverStates = new Map();
 
 /**
  * Get the defined config for the store with the passed namespace.
@@ -179,6 +23,39 @@ const handlers = {
 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.
@@ -207,6 +84,42 @@ interface StoreOptions {
 	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.';
 
@@ -255,17 +168,34 @@ export const universalUnlock =
  *
  * @return A reference to the namespace content.
  */
-export function store< S extends object = {} >(
+
+// 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?: S,
+	storePart: ConvertPromisesToGenerators< T >,
 	options?: StoreOptions
-): S;
+): Prettify< ConvertGeneratorsToPromises< T > >;
 
+// Overload for when types are divided into multiple parts.
 export function store< T extends object >(
 	namespace: string,
-	storePart?: T,
+	storePart: ConvertPromisesToGenerators< DeepPartial< T > >,
 	options?: StoreOptions
-): T;
+): Prettify< ConvertGeneratorsToPromises< T > >;
 
 export function store(
 	namespace: string,
@@ -280,13 +210,15 @@ export function store(
 			storeLocks.set( namespace, lock );
 		}
 		const rawStore = {
-			state: deepSignal( isObject( state ) ? state : {} ),
+			state: proxifyState(
+				namespace,
+				isPlainObject( state ) ? state : {}
+			),
 			...block,
 		};
-		const proxiedStore = new Proxy( rawStore, handlers );
+		const proxifiedStore = proxifyStore( namespace, rawStore );
 		rawStores.set( namespace, rawStore );
-		stores.set( namespace, proxiedStore );
-		proxyToNs.set( proxiedStore, namespace );
+		stores.set( namespace, proxifiedStore );
 	} else {
 		// Lock the store if it wasn't locked yet and the passed lock is
 		// different from the universal unlock. If no lock is given, the store
@@ -318,7 +250,7 @@ export function store(
 	return stores.get( namespace );
 }
 
-export const parseInitialData = ( dom = document ) => {
+export const parseServerData = ( dom = document ) => {
 	const jsonDataScriptTag =
 		// Preferred Script Module data passing form
 		dom.getElementById(
@@ -334,16 +266,18 @@ export const parseInitialData = ( dom = document ) => {
 	return {};
 };
 
-export const populateInitialData = ( data?: {
+export const populateServerData = ( data?: {
 	state?: Record< string, unknown >;
 	config?: Record< string, unknown >;
 } ) => {
-	if ( isObject( data?.state ) ) {
+	if ( isPlainObject( data?.state ) ) {
 		Object.entries( data!.state ).forEach( ( [ namespace, state ] ) => {
-			store( namespace, { state }, { lock: universalUnlock } );
+			const st = store< any >( namespace, {}, { lock: universalUnlock } );
+			deepMerge( st.state, state, false );
+			deepMerge( getServerState( namespace ), state );
 		} );
 	}
-	if ( isObject( data?.config ) ) {
+	if ( isPlainObject( data?.config ) ) {
 		Object.entries( data!.config ).forEach( ( [ namespace, config ] ) => {
 			storeConfigs.set( namespace, config );
 		} );
@@ -351,5 +285,5 @@ export const populateInitialData = ( data?: {
 };
 
 // Parse and populate the initial state and config.
-const data = parseInitialData();
-populateInitialData( data );
+const data = parseServerData();
+populateServerData( data );
diff --git a/packages/interactivity/src/test/store.ts b/packages/interactivity/src/test/store.ts
new file mode 100644
index 0000000000000..1092001db0314
--- /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
index ff564fa7c4c25..2de0ffe6d31e0 100644
--- a/packages/interactivity/src/test/utils.ts
+++ b/packages/interactivity/src/test/utils.ts
@@ -3,24 +3,26 @@
  */
 import { kebabToCamelCase } from '../utils';
 
-describe( 'kebabToCamelCase', () => {
-	it( 'should work exactly as the PHP version', async () => {
-		expect( kebabToCamelCase( '' ) ).toBe( '' );
-		expect( kebabToCamelCase( 'item' ) ).toBe( 'item' );
-		expect( kebabToCamelCase( 'my-item' ) ).toBe( 'myItem' );
-		expect( kebabToCamelCase( 'my_item' ) ).toBe( 'my_item' );
-		expect( kebabToCamelCase( 'My-iTem' ) ).toBe( 'myItem' );
-		expect( kebabToCamelCase( 'my-item-with-multiple-hyphens' ) ).toBe(
-			'myItemWithMultipleHyphens'
-		);
-		expect( kebabToCamelCase( 'my-item-with--double-hyphens' ) ).toBe(
-			'myItemWith-DoubleHyphens'
-		);
-		expect( kebabToCamelCase( 'my-item-with_under-score' ) ).toBe(
-			'myItemWith_underScore'
-		);
-		expect( kebabToCamelCase( '-my-item' ) ).toBe( 'myItem' );
-		expect( kebabToCamelCase( 'my-item-' ) ).toBe( 'myItem' );
-		expect( kebabToCamelCase( '-my-item-' ) ).toBe( 'myItem' );
+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
index 3c880d43f1706..c5eb91681294f 100644
--- a/packages/interactivity/src/utils.ts
+++ b/packages/interactivity/src/utils.ts
@@ -14,14 +14,8 @@ import { effect } from '@preact/signals';
 /**
  * Internal dependencies
  */
-import {
-	getScope,
-	setScope,
-	resetScope,
-	getNamespace,
-	setNamespace,
-	resetNamespace,
-} from './hooks';
+import { getScope, setScope, resetScope } from './scopes';
+import { getNamespace, setNamespace, resetNamespace } from './namespaces';
 
 interface Flusher {
 	readonly flush: () => void;
@@ -145,18 +139,26 @@ export function withScope( func: ( ...args: unknown[] ) => unknown ) {
 				try {
 					it = gen.next( value );
 				} finally {
-					resetNamespace();
 					resetScope();
+					resetNamespace();
 				}
+
 				try {
 					value = await it.value;
 				} catch ( e ) {
+					setNamespace( ns );
+					setScope( scope );
 					gen.throw( e );
+				} finally {
+					resetScope();
+					resetNamespace();
 				}
+
 				if ( it.done ) {
 					break;
 				}
 			}
+
 			return value;
 		};
 	}
@@ -346,3 +348,19 @@ export const warn = ( message: string ): void => {
 		logged.add( message );
 	}
 };
+
+/**
+ * Checks if the passed `candidate` is a plain object with just the `Object`
+ * prototype.
+ *
+ * @param candidate The item to check.
+ * @return Whether `candidate` is a plain object.
+ */
+export const isPlainObject = (
+	candidate: unknown
+): candidate is Record< string, unknown > =>
+	Boolean(
+		candidate &&
+			typeof candidate === 'object' &&
+			candidate.constructor === Object
+	);
diff --git a/packages/interactivity/tsconfig.test.json b/packages/interactivity/tsconfig.test.json
new file mode 100644
index 0000000000000..6a90abc2ba221
--- /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/CHANGELOG.md b/packages/interface/CHANGELOG.md
index 2ae331b934f23..f590aeed5b6cc 100644
--- a/packages/interface/CHANGELOG.md
+++ b/packages/interface/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/interface/package.json b/packages/interface/package.json
index 949b67d41d177..cb55a37da29b5 100644
--- a/packages/interface/package.json
+++ b/packages/interface/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "6.3.0",
+	"version": "6.9.0",
 	"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/interface/src/components/complementary-area-toggle/index.js b/packages/interface/src/components/complementary-area-toggle/index.js
index b6690b7df5fc5..2f8d8dd413674 100644
--- a/packages/interface/src/components/complementary-area-toggle/index.js
+++ b/packages/interface/src/components/complementary-area-toggle/index.js
@@ -10,6 +10,25 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as interfaceStore } from '../../store';
 import complementaryAreaContext from '../complementary-area-context';
 
+/**
+ * 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 );
+}
+
 function ComplementaryAreaToggle( {
 	as = Button,
 	scope,
@@ -17,6 +36,7 @@ function ComplementaryAreaToggle( {
 	icon,
 	selectedIcon,
 	name,
+	shortcut,
 	...props
 } ) {
 	const ComponentToUse = as;
@@ -26,12 +46,18 @@ function ComplementaryAreaToggle( {
 			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 );
@@ -39,6 +65,7 @@ function ComplementaryAreaToggle( {
 					enableComplementaryArea( scope, identifier );
 				}
 			} }
+			shortcut={ shortcut }
 			{ ...props }
 		/>
 	);
diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
index b37b8b7da33d0..d9fa8e71acb23 100644
--- a/packages/interface/src/components/complementary-area/index.js
+++ b/packages/interface/src/components/complementary-area/index.js
@@ -119,42 +119,42 @@ 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 ) {
+		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;
+			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 &&
+			shouldOpenWhenNotSmallRef.current &&
 			! isSmall &&
-			previousIsSmall.current
+			previousIsSmallRef.current
 		) {
 			// Remove the flag indicating the complementary area should be
 			// enabled.
-			shouldOpenWhenNotSmall.current = false;
+			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 &&
+			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,
@@ -275,6 +275,7 @@ function ComplementaryArea( {
 							showTooltip={ ! showIconLabels }
 							variant={ showIconLabels ? 'tertiary' : undefined }
 							size="compact"
+							shortcut={ toggleShortcut }
 						/>
 					) }
 				</PinnedItems>
diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
index ed4d98cdf7637..a1fd20b642206 100644
--- a/packages/interface/src/components/interface-skeleton/index.js
+++ b/packages/interface/src/components/interface-skeleton/index.js
@@ -143,22 +143,22 @@ function InterfaceSkeleton(
 							className="interface-interface-skeleton__header"
 							aria-label={ mergedLabels.header }
 							initial={
-								isDistractionFree
+								isDistractionFree && ! isMobileViewport
 									? 'distractionFreeHidden'
 									: 'hidden'
 							}
 							whileHover={
-								isDistractionFree
+								isDistractionFree && ! isMobileViewport
 									? 'distractionFreeHover'
 									: 'visible'
 							}
 							animate={
-								isDistractionFree
+								isDistractionFree && ! isMobileViewport
 									? 'distractionFreeDisabled'
 									: 'visible'
 							}
 							exit={
-								isDistractionFree
+								isDistractionFree && ! isMobileViewport
 									? 'distractionFreeHidden'
 									: 'hidden'
 							}
@@ -182,30 +182,32 @@ function InterfaceSkeleton(
 								ariaLabel={ mergedLabels.secondarySidebar }
 								as={ motion.div }
 								initial="closed"
-								animate={
-									isMobileViewport ? 'mobileOpen' : 'open'
-								}
+								animate="open"
 								exit="closed"
 								variants={ {
 									open: { width: secondarySidebarSize.width },
 									closed: { width: 0 },
-									mobileOpen: { width: '100vw' },
 								} }
 								transition={ defaultTransition }
 							>
-								<div
+								<motion.div
 									style={ {
 										position: 'absolute',
 										width: isMobileViewport
 											? '100vw'
 											: 'fit-content',
 										height: '100%',
-										right: 0,
+										left: 0,
 									} }
+									variants={ {
+										open: { x: 0 },
+										closed: { x: '-100%' },
+									} }
+									transition={ defaultTransition }
 								>
 									{ secondarySidebarResizeListener }
 									{ secondarySidebar }
-								</div>
+								</motion.div>
 							</NavigableRegion>
 						) }
 					</AnimatePresence>
diff --git a/packages/is-shallow-equal/CHANGELOG.md b/packages/is-shallow-equal/CHANGELOG.md
index 9ecfd8a34f18a..44bbf38076085 100644
--- a/packages/is-shallow-equal/CHANGELOG.md
+++ b/packages/is-shallow-equal/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/is-shallow-equal/package.json b/packages/is-shallow-equal/package.json
index cf089d25a4760..bd28c31fc750b 100644
--- a/packages/is-shallow-equal/package.json
+++ b/packages/is-shallow-equal/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/is-shallow-equal",
-	"version": "5.3.0",
+	"version": "5.9.0",
 	"description": "Test for shallow equality between two objects or arrays.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/jest-console/CHANGELOG.md b/packages/jest-console/CHANGELOG.md
index e1b003526d0a6..440d41bcc2dc3 100644
--- a/packages/jest-console/CHANGELOG.md
+++ b/packages/jest-console/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/jest-console/package.json b/packages/jest-console/package.json
index 76b8a33600689..a35f92896950f 100644
--- a/packages/jest-console/package.json
+++ b/packages/jest-console/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-console",
-	"version": "8.3.0",
+	"version": "8.9.0",
 	"description": "Custom Jest matchers for the Console object.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/jest-preset-default/CHANGELOG.md b/packages/jest-preset-default/CHANGELOG.md
index 0e5e91bc8f657..137c03dce8c7a 100644
--- a/packages/jest-preset-default/CHANGELOG.md
+++ b/packages/jest-preset-default/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/jest-preset-default/package.json b/packages/jest-preset-default/package.json
index 9afd0cfe661e2..1a64cc47294f3 100644
--- a/packages/jest-preset-default/package.json
+++ b/packages/jest-preset-default/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-preset-default",
-	"version": "12.3.0",
+	"version": "12.9.0",
 	"description": "Default Jest preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/jest-puppeteer-axe/CHANGELOG.md b/packages/jest-puppeteer-axe/CHANGELOG.md
index c896ec074ddef..7e5503f13eddf 100644
--- a/packages/jest-puppeteer-axe/CHANGELOG.md
+++ b/packages/jest-puppeteer-axe/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/jest-puppeteer-axe/package.json b/packages/jest-puppeteer-axe/package.json
index abb22fe7cf015..71674e12e0df9 100644
--- a/packages/jest-puppeteer-axe/package.json
+++ b/packages/jest-puppeteer-axe/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-puppeteer-axe",
-	"version": "7.3.0",
+	"version": "7.9.0",
 	"description": "Axe API integration with Jest and Puppeteer.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/keyboard-shortcuts/CHANGELOG.md b/packages/keyboard-shortcuts/CHANGELOG.md
index 8e521528486c4..2c23a099857a3 100644
--- a/packages/keyboard-shortcuts/CHANGELOG.md
+++ b/packages/keyboard-shortcuts/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/keyboard-shortcuts/package.json b/packages/keyboard-shortcuts/package.json
index 5e291239c0b01..bf71b807329f7 100644
--- a/packages/keyboard-shortcuts/package.json
+++ b/packages/keyboard-shortcuts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keyboard-shortcuts",
-	"version": "5.3.0",
+	"version": "5.9.0",
 	"description": "Handling keyboard shortcuts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/keycodes/CHANGELOG.md b/packages/keycodes/CHANGELOG.md
index fe4fdb6d42879..1ef044b263e1f 100644
--- a/packages/keycodes/CHANGELOG.md
+++ b/packages/keycodes/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/keycodes/package.json b/packages/keycodes/package.json
index 805472edec6fa..cfff9c6984423 100644
--- a/packages/keycodes/package.json
+++ b/packages/keycodes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keycodes",
-	"version": "4.3.0",
+	"version": "4.9.0",
 	"description": "Keycodes utilities for WordPress. Used to check for keyboard events across browsers/operating systems.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/lazy-import/CHANGELOG.md b/packages/lazy-import/CHANGELOG.md
index 03b8020041d13..c09059768e81a 100644
--- a/packages/lazy-import/CHANGELOG.md
+++ b/packages/lazy-import/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/lazy-import/package.json b/packages/lazy-import/package.json
index e3d5765e3e245..8343dcfeed00b 100644
--- a/packages/lazy-import/package.json
+++ b/packages/lazy-import/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/lazy-import",
-	"version": "2.3.0",
+	"version": "2.9.0",
 	"description": "Lazily import a module, installing it automatically if missing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/list-reusable-blocks/CHANGELOG.md b/packages/list-reusable-blocks/CHANGELOG.md
index 3261381bf62f2..eb0b3a7cf6b48 100644
--- a/packages/list-reusable-blocks/CHANGELOG.md
+++ b/packages/list-reusable-blocks/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/list-reusable-blocks/package.json b/packages/list-reusable-blocks/package.json
index 8295c1f955a43..4971c35c947eb 100644
--- a/packages/list-reusable-blocks/package.json
+++ b/packages/list-reusable-blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/list-reusable-blocks",
-	"version": "5.3.0",
+	"version": "5.9.0",
 	"description": "Adding Export/Import support to the reusable blocks listing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/list-reusable-blocks/src/components/import-dropdown/index.js b/packages/list-reusable-blocks/src/components/import-dropdown/index.js
index 94f70a1551199..fdad08f80d213 100644
--- a/packages/list-reusable-blocks/src/components/import-dropdown/index.js
+++ b/packages/list-reusable-blocks/src/components/import-dropdown/index.js
@@ -17,6 +17,8 @@ function ImportDropdown( { onUpload } ) {
 			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 8c2dc9c94bd71..abef499a63b29 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 9c6e8bf57835f..ba6cffb956f04 100644
--- a/packages/list-reusable-blocks/src/components/import-form/index.js
+++ b/packages/list-reusable-blocks/src/components/import-form/index.js
@@ -84,6 +84,7 @@ function ImportForm( { instanceId, onUpload } ) {
 			</label>
 			<input id={ inputId } type="file" onChange={ onChangeFile } />
 			<Button
+				__next40pxDefaultSize
 				type="submit"
 				isBusy={ isLoading }
 				accessibleWhenDisabled
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 844130b7c5914..e72d63fd2a490 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/style.scss b/packages/list-reusable-blocks/src/style.scss
index ad85c70058609..6767bd0bd7e15 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/media-utils/CHANGELOG.md b/packages/media-utils/CHANGELOG.md
index 410e5199cc74a..20272be5b7d7b 100644
--- a/packages/media-utils/CHANGELOG.md
+++ b/packages/media-utils/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/media-utils/README.md b/packages/media-utils/README.md
index 6c2384061a5f6..1adc15186078a 100644
--- a/packages/media-utils/README.md
+++ b/packages/media-utils/README.md
@@ -13,6 +13,75 @@ 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.
+
+### 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
@@ -43,7 +112,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](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 24f1fc3df8ccd..25bdb46a352bb 100644
--- a/packages/media-utils/package.json
+++ b/packages/media-utils/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/media-utils",
-	"version": "5.3.0",
+	"version": "5.9.0",
 	"description": "WordPress Media Upload Utils.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -14,7 +14,7 @@
 	"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"
@@ -25,6 +25,7 @@
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"types": "build-types",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/api-fetch": "file:../api-fetch",
diff --git a/packages/media-utils/src/index.js b/packages/media-utils/src/index.js
deleted file mode 100644
index 590a7f4c9d188..0000000000000
--- 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 0000000000000..c37814afe7c48
--- /dev/null
+++ b/packages/media-utils/src/index.ts
@@ -0,0 +1,9 @@
+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';
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 0000000000000..594f172ef7eb2
--- /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 0000000000000..d4940d36cd6ae
--- /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 509b62f1e8864..0000000000000
--- 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/test/flatten-form-data.ts b/packages/media-utils/src/utils/test/flatten-form-data.ts
new file mode 100644
index 0000000000000..458dfd26c8f6e
--- /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 0000000000000..156955373bd0d
--- /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/upload-error.ts b/packages/media-utils/src/utils/test/upload-error.ts
new file mode 100644
index 0000000000000..4d5f025ed8cf3
--- /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.ts
similarity index 58%
rename from packages/media-utils/src/utils/test/upload-media.test.js
rename to packages/media-utils/src/utils/test/upload-media.ts
index fa9adc9f40881..b5075255ad4c8 100644
--- a/packages/media-utils/src/utils/test/upload-media.test.js
+++ b/packages/media-utils/src/utils/test/upload-media.ts
@@ -1,19 +1,18 @@
-/**
- * WordPress dependencies
- */
-import { createBlobURL } from '@wordpress/blob';
-import apiFetch from '@wordpress/api-fetch';
-
 /**
  * Internal dependencies
  */
-import { uploadMedia, getMimeTypesArray } from '../upload-media';
+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(),
 } ) );
-jest.mock( '@wordpress/api-fetch', () => jest.fn() );
 
 const xmlFile = new window.File( [ 'fake_file' ], 'test.xml', {
 	type: 'text/xml',
@@ -23,6 +22,10 @@ const imageFile = new window.File( [ 'fake_file' ], 'test.jpeg', {
 } );
 
 describe( 'uploadMedia', () => {
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
 	it( 'should do nothing on no files', async () => {
 		const onError = jest.fn();
 		const onFileChange = jest.fn();
@@ -33,7 +36,7 @@ describe( 'uploadMedia', () => {
 		} );
 
 		expect( onError ).not.toHaveBeenCalled();
-		expect( onFileChange ).not.toHaveBeenCalled();
+		expect( uploadToServer ).not.toHaveBeenCalled();
 	} );
 
 	it( 'should error if allowedTypes contains a partial mime type and the validation fails', async () => {
@@ -47,11 +50,14 @@ describe( 'uploadMedia', () => {
 		} );
 
 		expect( onError ).toHaveBeenCalledWith(
-			expect.objectContaining( {
+			new UploadError( {
 				code: 'MIME_TYPE_NOT_SUPPORTED',
+				message:
+					'test.xml: Sorry, this file type is not supported here.',
+				file: xmlFile,
 			} )
 		);
-		expect( onFileChange ).not.toHaveBeenCalled();
+		expect( uploadToServer ).not.toHaveBeenCalled();
 	} );
 
 	it( 'should error if allowedTypes contains a complete mime type and the validation fails', async () => {
@@ -65,17 +71,17 @@ describe( 'uploadMedia', () => {
 		} );
 
 		expect( onError ).toHaveBeenCalledWith(
-			expect.objectContaining( {
+			new UploadError( {
 				code: 'MIME_TYPE_NOT_SUPPORTED',
+				message:
+					'test.jpeg: Sorry, this file type is not supported here.',
+				file: xmlFile,
 			} )
 		);
-		expect( onFileChange ).not.toHaveBeenCalled();
+		expect( uploadToServer ).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( {
@@ -83,10 +89,11 @@ describe( 'uploadMedia', () => {
 			filesList: [ imageFile ],
 			onError,
 			onFileChange,
+			wpAllowedMimeTypes: { jpeg: 'image/jpeg' },
 		} );
 
 		expect( onError ).not.toHaveBeenCalled();
-		expect( onFileChange ).toHaveBeenCalledTimes( 2 );
+		expect( uploadToServer ).toHaveBeenCalled();
 	} );
 
 	it( 'should error if allowedTypes contains multiple types and the validation fails', async () => {
@@ -100,17 +107,17 @@ describe( 'uploadMedia', () => {
 		} );
 
 		expect( onError ).toHaveBeenCalledWith(
-			expect.objectContaining( {
+			new UploadError( {
 				code: 'MIME_TYPE_NOT_SUPPORTED',
+				message:
+					'test.xml: Sorry, this file type is not supported here.',
+				file: xmlFile,
 			} )
 		);
-		expect( onFileChange ).not.toHaveBeenCalled();
+		expect( uploadToServer ).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( {
@@ -118,16 +125,14 @@ describe( 'uploadMedia', () => {
 			filesList: [ imageFile ],
 			onError,
 			onFileChange,
+			wpAllowedMimeTypes: { jpeg: 'image/jpeg', mp4: 'video/mp4' },
 		} );
 
 		expect( onError ).not.toHaveBeenCalled();
-		expect( onFileChange ).toHaveBeenCalledTimes( 2 );
+		expect( uploadToServer ).toHaveBeenCalled();
 	} );
 
 	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( {
@@ -135,15 +140,18 @@ describe( 'uploadMedia', () => {
 			filesList: [ imageFile, xmlFile ],
 			onError,
 			onFileChange,
+			wpAllowedMimeTypes: { jpeg: 'image/jpeg' },
 		} );
 
 		expect( onError ).toHaveBeenCalledWith(
-			expect.objectContaining( {
+			new UploadError( {
 				code: 'MIME_TYPE_NOT_SUPPORTED',
+				message:
+					'test.xml: Sorry, you are not allowed to upload this file type.',
 				file: xmlFile,
 			} )
 		);
-		expect( onFileChange ).toHaveBeenCalledTimes( 2 );
+		expect( uploadToServer ).toHaveBeenCalledTimes( 1 );
 	} );
 
 	it( 'should error if the file size is greater than the maximum', async () => {
@@ -155,19 +163,22 @@ describe( 'uploadMedia', () => {
 			maxUploadFileSize: 1,
 			onError,
 			onFileChange,
+			wpAllowedMimeTypes: { jpeg: 'image/jpeg' },
 		} );
 
 		expect( onError ).toHaveBeenCalledWith(
-			expect.objectContaining( {
+			new UploadError( {
 				code: 'SIZE_ABOVE_LIMIT',
+				message:
+					'test.jpeg: This file exceeds the maximum upload size for this site.',
+				file: imageFile,
 			} )
 		);
-		expect( onFileChange ).not.toHaveBeenCalled();
+		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();
-		const onFileChange = jest.fn();
 		await uploadMedia( {
 			allowedTypes: [ 'image' ],
 			filesList: [ imageFile ],
@@ -176,53 +187,13 @@ describe( 'uploadMedia', () => {
 		} );
 
 		expect( onError ).toHaveBeenCalledWith(
-			expect.objectContaining( {
+			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( 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',
-		] );
+		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 0000000000000..31d6af0e7e4a5
--- /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 0000000000000..d256656686214
--- /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 0000000000000..a83cdcefe5f99
--- /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 0000000000000..a97287872f24a
--- /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 0000000000000..e05536400a760
--- /dev/null
+++ b/packages/media-utils/src/utils/types.ts
@@ -0,0 +1,207 @@
+/**
+ * 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' >;
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 0000000000000..d712e9dcdb696
--- /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 e3c9b95d5c25c..0000000000000
--- 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 0000000000000..1bc861cfb3b60
--- /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 0000000000000..7aa4243d5ccfd
--- /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 0000000000000..cc34462b268dd
--- /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 0000000000000..858c583561978
--- /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 0000000000000..2d99455d7b60f
--- /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 0000000000000..8559f1507b723
--- /dev/null
+++ b/packages/media-utils/tsconfig.json
@@ -0,0 +1,17 @@
+{
+	"$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" }
+	]
+}
diff --git a/packages/notices/CHANGELOG.md b/packages/notices/CHANGELOG.md
index 1dbe1fb943120..1c4f629fb2c34 100644
--- a/packages/notices/CHANGELOG.md
+++ b/packages/notices/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/notices/package.json b/packages/notices/package.json
index 31c7bcc4ad848..b6712776778e1 100644
--- a/packages/notices/package.json
+++ b/packages/notices/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/notices",
-	"version": "5.3.0",
+	"version": "5.9.0",
 	"description": "State management for notices.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/npm-package-json-lint-config/CHANGELOG.md b/packages/npm-package-json-lint-config/CHANGELOG.md
index 727828442cc36..511f6e8f3b6c4 100644
--- a/packages/npm-package-json-lint-config/CHANGELOG.md
+++ b/packages/npm-package-json-lint-config/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/npm-package-json-lint-config/package.json b/packages/npm-package-json-lint-config/package.json
index 851896019c739..abde4d2490cc9 100644
--- a/packages/npm-package-json-lint-config/package.json
+++ b/packages/npm-package-json-lint-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/npm-package-json-lint-config",
-	"version": "5.3.0",
+	"version": "5.9.0",
 	"description": "WordPress npm-package-json-lint shareable configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/nux/CHANGELOG.md b/packages/nux/CHANGELOG.md
index 1e54a52b7dce2..19ddfd39b2156 100644
--- a/packages/nux/CHANGELOG.md
+++ b/packages/nux/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/nux/package.json b/packages/nux/package.json
index be907acc797cd..f633695d5490a 100644
--- a/packages/nux/package.json
+++ b/packages/nux/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/nux",
-	"version": "9.3.0",
+	"version": "9.9.0",
 	"description": "NUX (New User eXperience) module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/nux/src/components/dot-tip/index.js b/packages/nux/src/components/dot-tip/index.js
index 50de7ddb3be9d..e2768789ad1fd 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 dbea46e35fb09..a160b7f655576 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
@@ -7,7 +7,7 @@ exports[`DotTip should render correctly 1`] = `
   data-wp-c16t="true"
   data-wp-component="Popover"
   role="dialog"
-  style="position: absolute; top: 0px; left: 0px; opacity: 1; transform: translateX(0px) translateY(0px) translateX(0em) scale(1) translateZ(0); transform-origin: 0% 50% 0;"
+  style="position: absolute; top: 0px; left: 0px; transform: none;"
   tabindex="-1"
 >
   <div
@@ -19,7 +19,7 @@ exports[`DotTip should render correctly 1`] = `
     </p>
     <p>
       <button
-        class="components-button is-link"
+        class="components-button is-next-40px-default-size is-link"
         type="button"
       >
         Got it
@@ -27,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
diff --git a/packages/patterns/CHANGELOG.md b/packages/patterns/CHANGELOG.md
index c8eeedd7ae99c..e15ac90000ba4 100644
--- a/packages/patterns/CHANGELOG.md
+++ b/packages/patterns/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/patterns/package.json b/packages/patterns/package.json
index fceb55f0e7914..b9654af383f72 100644
--- a/packages/patterns/package.json
+++ b/packages/patterns/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/patterns",
-	"version": "2.3.0",
+	"version": "2.9.0",
 	"description": "Management of user pattern editing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/patterns/src/components/create-pattern-modal.js b/packages/patterns/src/components/create-pattern-modal.js
index 226f48eb6c9e6..dd86709acbca3 100644
--- a/packages/patterns/src/components/create-pattern-modal.js
+++ b/packages/patterns/src/components/create-pattern-modal.js
@@ -131,6 +131,7 @@ export function CreatePatternModalContents( {
 					categoryMap={ categoryMap }
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ _x( 'Synced', 'pattern (singular)' ) }
 					help={ __(
 						'Sync this pattern across multiple locations.'
diff --git a/packages/patterns/src/components/pattern-overrides-controls.js b/packages/patterns/src/components/pattern-overrides-controls.js
index 3a5ff3e0674a6..5207348c7bd7c 100644
--- a/packages/patterns/src/components/pattern-overrides-controls.js
+++ b/packages/patterns/src/components/pattern-overrides-controls.js
@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { useState, useId } from '@wordpress/element';
-import { InspectorControls } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	useBlockBindingsUtils,
+} from '@wordpress/block-editor';
 import { BaseControl, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -15,22 +18,6 @@ import {
 	DisallowOverridesModal,
 } from './allow-overrides-modal';
 
-function removeBindings( bindings ) {
-	let updatedBindings = { ...bindings };
-	delete updatedBindings.__default;
-	if ( ! Object.keys( updatedBindings ).length ) {
-		updatedBindings = undefined;
-	}
-	return updatedBindings;
-}
-
-function addBindings( bindings ) {
-	return {
-		...bindings,
-		__default: { source: PATTERN_OVERRIDES_BINDING_SOURCE },
-	};
-}
-
 function PatternOverridesControls( {
 	attributes,
 	setAttributes,
@@ -49,24 +36,22 @@ function PatternOverridesControls( {
 	const isConnectedToOtherSources =
 		defaultBindings?.source &&
 		defaultBindings.source !== PATTERN_OVERRIDES_BINDING_SOURCE;
+	const { updateBlockBindings } = useBlockBindingsUtils();
 
 	function updateBindings( isChecked, customName ) {
-		const prevBindings = attributes?.metadata?.bindings;
-		const updatedBindings = isChecked
-			? addBindings( prevBindings )
-			: removeBindings( prevBindings );
-
-		const updatedMetadata = {
-			...attributes.metadata,
-			bindings: updatedBindings,
-		};
-
 		if ( customName ) {
-			updatedMetadata.name = customName;
+			setAttributes( {
+				metadata: {
+					...attributes.metadata,
+					name: customName,
+				},
+			} );
 		}
 
-		setAttributes( {
-			metadata: updatedMetadata,
+		updateBlockBindings( {
+			__default: isChecked
+				? { source: PATTERN_OVERRIDES_BINDING_SOURCE }
+				: undefined,
 		} );
 	}
 
@@ -92,6 +77,7 @@ function PatternOverridesControls( {
 		<>
 			<InspectorControls group="advanced">
 				<BaseControl
+					__nextHasNoMarginBottom
 					id={ controlId }
 					label={ __( 'Overrides' ) }
 					help={ helpText }
diff --git a/packages/patterns/src/components/style.scss b/packages/patterns/src/components/style.scss
index 30fe0300503c4..1b053ab7ac251 100644
--- a/packages/patterns/src/components/style.scss
+++ b/packages/patterns/src/components/style.scss
@@ -13,8 +13,8 @@
 	.components-form-token-field__suggestions-list:not(:empty) {
 		position: absolute;
 		border: $border-width solid var(--wp-admin-theme-color);
-		border-bottom-left-radius: $radius-block-ui;
-		border-bottom-right-radius: $radius-block-ui;
+		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;
diff --git a/packages/plugins/CHANGELOG.md b/packages/plugins/CHANGELOG.md
index 2d3de5542433e..9b378eb71f582 100644
--- a/packages/plugins/CHANGELOG.md
+++ b/packages/plugins/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/plugins/package.json b/packages/plugins/package.json
index 53be8700309eb..7772c7361cd5b 100644
--- a/packages/plugins/package.json
+++ b/packages/plugins/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/plugins",
-	"version": "7.3.0",
+	"version": "7.9.0",
 	"description": "Plugins module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/postcss-plugins-preset/CHANGELOG.md b/packages/postcss-plugins-preset/CHANGELOG.md
index 4e5b1b682cd70..f21d7016240e0 100644
--- a/packages/postcss-plugins-preset/CHANGELOG.md
+++ b/packages/postcss-plugins-preset/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/postcss-plugins-preset/package.json b/packages/postcss-plugins-preset/package.json
index 897377b815d52..8e1db61b9668c 100644
--- a/packages/postcss-plugins-preset/package.json
+++ b/packages/postcss-plugins-preset/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/postcss-plugins-preset",
-	"version": "5.3.0",
+	"version": "5.9.0",
 	"description": "PostCSS sharable plugins preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/postcss-themes/CHANGELOG.md b/packages/postcss-themes/CHANGELOG.md
index 430ecbf6778c1..19c2acccf0f75 100644
--- a/packages/postcss-themes/CHANGELOG.md
+++ b/packages/postcss-themes/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/postcss-themes/package.json b/packages/postcss-themes/package.json
index d8f3ec25bbbc7..e7752b3aaa352 100644
--- a/packages/postcss-themes/package.json
+++ b/packages/postcss-themes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/postcss-themes",
-	"version": "6.3.0",
+	"version": "6.9.0",
 	"description": "PostCSS plugin to generate theme colors.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/preferences-persistence/CHANGELOG.md b/packages/preferences-persistence/CHANGELOG.md
index 9bce8d892a7d4..b3f4193fa0c9e 100644
--- a/packages/preferences-persistence/CHANGELOG.md
+++ b/packages/preferences-persistence/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/preferences-persistence/package.json b/packages/preferences-persistence/package.json
index 8c7c3cc2a3d60..1872840d8a8cc 100644
--- a/packages/preferences-persistence/package.json
+++ b/packages/preferences-persistence/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/preferences-persistence",
-	"version": "2.3.0",
+	"version": "2.9.0",
 	"description": "Persistence utilities for `wordpress/preferences`.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/preferences/CHANGELOG.md b/packages/preferences/CHANGELOG.md
index 8e11437def899..114027eed2e22 100644
--- a/packages/preferences/CHANGELOG.md
+++ b/packages/preferences/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/preferences/package.json b/packages/preferences/package.json
index ca0deefdbefb9..722212c3d0d48 100644
--- a/packages/preferences/package.json
+++ b/packages/preferences/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/preferences",
-	"version": "4.3.0",
+	"version": "4.9.0",
 	"description": "Utilities for managing WordPress preferences.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/preferences/src/components/preference-base-option/style.scss b/packages/preferences/src/components/preference-base-option/style.scss
index d3caa60f8c803..32040d0c9093a 100644
--- a/packages/preferences/src/components/preference-base-option/style.scss
+++ b/packages/preferences/src/components/preference-base-option/style.scss
@@ -2,9 +2,4 @@
 	& + & {
 		margin-top: $grid-unit-20;
 	}
-
-	.components-base-control__help {
-		margin-top: 0;
-		margin-left: 48px;
-	}
 }
diff --git a/packages/preferences/src/components/preferences-modal-tabs/index.js b/packages/preferences/src/components/preferences-modal-tabs/index.js
index f70430367cc61..f73bdd7f029dc 100644
--- a/packages/preferences/src/components/preferences-modal-tabs/index.js
+++ b/packages/preferences/src/components/preferences-modal-tabs/index.js
@@ -3,10 +3,7 @@
  */
 import { useViewportMatch } from '@wordpress/compose';
 import {
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
+	Navigator,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 	__experimentalHStack as HStack,
@@ -98,19 +95,16 @@ export default function PreferencesModalTabs( { sections } ) {
 		);
 	} else {
 		modalContent = (
-			<NavigatorProvider
-				initialPath="/"
-				className="preferences__provider"
-			>
-				<NavigatorScreen path="/">
+			<Navigator initialPath="/" className="preferences__provider">
+				<Navigator.Screen path="/">
 					<Card isBorderless size="small">
 						<CardBody>
 							<ItemGroup>
 								{ tabs.map( ( tab ) => {
 									return (
-										<NavigatorButton
+										<Navigator.Button
 											key={ tab.name }
-											path={ tab.name }
+											path={ `/${ tab.name }` }
 											as={ Item }
 											isAction
 										>
@@ -130,19 +124,19 @@ export default function PreferencesModalTabs( { sections } ) {
 													/>
 												</FlexItem>
 											</HStack>
-										</NavigatorButton>
+										</Navigator.Button>
 									);
 								} ) }
 							</ItemGroup>
 						</CardBody>
 					</Card>
-				</NavigatorScreen>
+				</Navigator.Screen>
 				{ sections.length &&
 					sections.map( ( section ) => {
 						return (
-							<NavigatorScreen
+							<Navigator.Screen
 								key={ `${ section.name }-menu` }
-								path={ section.name }
+								path={ `/${ section.name }` }
 							>
 								<Card isBorderless size="large">
 									<CardHeader
@@ -151,7 +145,7 @@ export default function PreferencesModalTabs( { sections } ) {
 										size="small"
 										gap="6"
 									>
-										<NavigatorBackButton
+										<Navigator.BackButton
 											icon={
 												isRTL()
 													? chevronRight
@@ -165,10 +159,10 @@ export default function PreferencesModalTabs( { sections } ) {
 									</CardHeader>
 									<CardBody>{ section.content }</CardBody>
 								</Card>
-							</NavigatorScreen>
+							</Navigator.Screen>
 						);
 					} ) }
-			</NavigatorProvider>
+			</Navigator>
 		);
 	}
 
diff --git a/packages/prettier-config/CHANGELOG.md b/packages/prettier-config/CHANGELOG.md
index b662a6ea503b2..17b3fc88b5ccd 100644
--- a/packages/prettier-config/CHANGELOG.md
+++ b/packages/prettier-config/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/prettier-config/package.json b/packages/prettier-config/package.json
index 8e99f3a9a0116..3f77e6bb125bb 100644
--- a/packages/prettier-config/package.json
+++ b/packages/prettier-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/prettier-config",
-	"version": "4.3.0",
+	"version": "4.9.0",
 	"description": "WordPress Prettier shared configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/primitives/CHANGELOG.md b/packages/primitives/CHANGELOG.md
index a6788510a4cfd..8c646a4dc6c5c 100644
--- a/packages/primitives/CHANGELOG.md
+++ b/packages/primitives/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/primitives/package.json b/packages/primitives/package.json
index ed107037c8f68..4bf8849c0dba4 100644
--- a/packages/primitives/package.json
+++ b/packages/primitives/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/primitives",
-	"version": "4.3.0",
+	"version": "4.9.0",
 	"description": "WordPress cross-platform primitives.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,6 +35,9 @@
 		"@wordpress/element": "file:../element",
 		"clsx": "^2.1.1"
 	},
+	"peerDependencies": {
+		"react": "^18.0.0"
+	},
 	"publishConfig": {
 		"access": "public"
 	}
diff --git a/packages/priority-queue/CHANGELOG.md b/packages/priority-queue/CHANGELOG.md
index 22527196f17c8..7254d4e3f3718 100644
--- a/packages/priority-queue/CHANGELOG.md
+++ b/packages/priority-queue/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/priority-queue/package.json b/packages/priority-queue/package.json
index b342733a8a3a0..991d5a207c780 100644
--- a/packages/priority-queue/package.json
+++ b/packages/priority-queue/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/priority-queue",
-	"version": "3.3.0",
+	"version": "3.9.0",
 	"description": "Generic browser priority queue.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/private-apis/CHANGELOG.md b/packages/private-apis/CHANGELOG.md
index 76ba0b52193e6..bd13576ccbcd0 100644
--- a/packages/private-apis/CHANGELOG.md
+++ b/packages/private-apis/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/private-apis/package.json b/packages/private-apis/package.json
index de43e8aed09eb..ada754f940525 100644
--- a/packages/private-apis/package.json
+++ b/packages/private-apis/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/private-apis",
-	"version": "1.3.0",
+	"version": "1.9.0",
 	"description": "Internal experimental APIs for WordPress core.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/private-apis/src/implementation.js b/packages/private-apis/src/implementation.js
index c268e46f669cb..13ee9873e899d 100644
--- a/packages/private-apis/src/implementation.js
+++ b/packages/private-apis/src/implementation.js
@@ -31,6 +31,7 @@ const CORE_MODULES_USING_PRIVATE_APIS = [
 	'@wordpress/reusable-blocks',
 	'@wordpress/router',
 	'@wordpress/dataviews',
+	'@wordpress/fields',
 ];
 
 /**
diff --git a/packages/project-management-automation/CHANGELOG.md b/packages/project-management-automation/CHANGELOG.md
index 2430748099fe1..c48bc76452a5a 100644
--- a/packages/project-management-automation/CHANGELOG.md
+++ b/packages/project-management-automation/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/project-management-automation/package.json b/packages/project-management-automation/package.json
index 09319250c968d..67ad670628efc 100644
--- a/packages/project-management-automation/package.json
+++ b/packages/project-management-automation/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/project-management-automation",
-	"version": "2.3.0",
+	"version": "2.9.0",
 	"description": "GitHub Action that implements various automation to assist with managing the Gutenberg GitHub repository.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/react-i18n/CHANGELOG.md b/packages/react-i18n/CHANGELOG.md
index f50cefd3e3d82..fa1b416809ca5 100644
--- a/packages/react-i18n/CHANGELOG.md
+++ b/packages/react-i18n/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/react-i18n/package.json b/packages/react-i18n/package.json
index 9f9af3992222f..acf4656d65496 100644
--- a/packages/react-i18n/package.json
+++ b/packages/react-i18n/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-i18n",
-	"version": "4.3.0",
+	"version": "4.9.0",
 	"description": "React bindings for @wordpress/i18n.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
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 033e24c4cdf41..2c3521197d7c4 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 c747538fb38b5..efe2ff3449216 100644
--- a/packages/react-native-aztec/android/gradle/wrapper/gradle-wrapper.properties
+++ b/packages/react-native-aztec/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,7 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.2.1-all.zip
+distributionSha256Sum=258e722ec21e955201e31447b0aed14201765a3bfbae296a46cf60b70e66db70
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.9-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
diff --git a/packages/react-native-aztec/android/gradlew b/packages/react-native-aztec/android/gradlew
index fcb6fca147c0c..f5feea6d6b116 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/HEAD/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/.
@@ -83,7 +85,9 @@ done
 # This is normally unused
 # shellcheck disable=SC2034
 APP_BASE_NAME=${0##*/}
-APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
+# 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
@@ -144,7 +148,7 @@ 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
+        # shellcheck disable=SC2039,SC3045
         MAX_FD=$( ulimit -H -n ) ||
             warn "Could not query maximum file descriptor limit"
     esac
@@ -152,7 +156,7 @@ if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
       '' | soft) :;; #(
       *)
         # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
-        # shellcheck disable=SC3045
+        # shellcheck disable=SC2039,SC3045
         ulimit -n "$MAX_FD" ||
             warn "Could not set maximum file descriptor limit to $MAX_FD"
     esac
@@ -201,11 +205,11 @@ 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
-#     double quotes to make sure that they get re-expanded; and
-#   * put everything else in single quotes, so that it's not re-expanded.
+# 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" \
diff --git a/packages/react-native-aztec/android/gradlew.bat b/packages/react-native-aztec/android/gradlew.bat
index 6689b85beecde..9b42019c7915b 100644
--- a/packages/react-native-aztec/android/gradlew.bat
+++ b/packages/react-native-aztec/android/gradlew.bat
@@ -13,6 +13,8 @@
 @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
 @rem ##########################################################################
@@ -43,11 +45,11 @@ set JAVA_EXE=java.exe
 %JAVA_EXE% -version >NUL 2>&1
 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
 
@@ -57,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
 
diff --git a/packages/react-native-aztec/android/settings.gradle b/packages/react-native-aztec/android/settings.gradle
index e77808bf87ac8..5c91464a04245 100644
--- a/packages/react-native-aztec/android/settings.gradle
+++ b/packages/react-native-aztec/android/settings.gradle
@@ -1,6 +1,6 @@
 pluginManagement {
     gradle.ext.kotlinVersion = '1.8.0'
-    gradle.ext.agpVersion = '8.1.0'
+    gradle.ext.agpVersion = '8.5.1'
     gradle.ext.automatticPublishToS3Version = '0.8.0'
 
     plugins {
diff --git a/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.jar b/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.jar
index 033e24c4cdf41..2c3521197d7c4 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 c747538fb38b5..efe2ff3449216 100644
--- a/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.properties
+++ b/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,7 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.2.1-all.zip
+distributionSha256Sum=258e722ec21e955201e31447b0aed14201765a3bfbae296a46cf60b70e66db70
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.9-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
diff --git a/packages/react-native-bridge/android/gradlew b/packages/react-native-bridge/android/gradlew
index fcb6fca147c0c..f5feea6d6b116 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/HEAD/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/.
@@ -83,7 +85,9 @@ done
 # This is normally unused
 # shellcheck disable=SC2034
 APP_BASE_NAME=${0##*/}
-APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
+# 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
@@ -144,7 +148,7 @@ 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
+        # shellcheck disable=SC2039,SC3045
         MAX_FD=$( ulimit -H -n ) ||
             warn "Could not query maximum file descriptor limit"
     esac
@@ -152,7 +156,7 @@ if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
       '' | soft) :;; #(
       *)
         # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
-        # shellcheck disable=SC3045
+        # shellcheck disable=SC2039,SC3045
         ulimit -n "$MAX_FD" ||
             warn "Could not set maximum file descriptor limit to $MAX_FD"
     esac
@@ -201,11 +205,11 @@ 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
-#     double quotes to make sure that they get re-expanded; and
-#   * put everything else in single quotes, so that it's not re-expanded.
+# 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" \
diff --git a/packages/react-native-bridge/android/gradlew.bat b/packages/react-native-bridge/android/gradlew.bat
index 6689b85beecde..9b42019c7915b 100644
--- a/packages/react-native-bridge/android/gradlew.bat
+++ b/packages/react-native-bridge/android/gradlew.bat
@@ -13,6 +13,8 @@
 @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
 @rem ##########################################################################
@@ -43,11 +45,11 @@ set JAVA_EXE=java.exe
 %JAVA_EXE% -version >NUL 2>&1
 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
 
@@ -57,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
 
diff --git a/packages/react-native-bridge/android/settings.gradle b/packages/react-native-bridge/android/settings.gradle
index 35c14b4620d8e..2863d3bb06512 100644
--- a/packages/react-native-bridge/android/settings.gradle
+++ b/packages/react-native-bridge/android/settings.gradle
@@ -1,6 +1,6 @@
 pluginManagement {
     gradle.ext.kotlinVersion = '1.8.0'
-    gradle.ext.agpVersion = '8.1.0'
+    gradle.ext.agpVersion = '8.5.1'
     gradle.ext.automatticPublishToS3Version = '0.8.0'
 
     plugins {
diff --git a/packages/react-native-editor/android/build.gradle b/packages/react-native-editor/android/build.gradle
index a45374a58c7d3..cadcfa8704b51 100644
--- a/packages/react-native-editor/android/build.gradle
+++ b/packages/react-native-editor/android/build.gradle
@@ -1,6 +1,6 @@
 buildscript {
     ext {
-        gradlePluginVersion = '8.1.0'
+        gradlePluginVersion = '8.5.1'
         kotlinVersion = '1.8.0'
         buildToolsVersion = "34.0.0"
         minSdkVersion = 24
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 c747538fb38b5..515ab9d5f1822 100644
--- a/packages/react-native-editor/android/gradle/wrapper/gradle-wrapper.properties
+++ b/packages/react-native-editor/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,7 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.2.1-all.zip
+distributionSha256Sum=f8b4f4772d302c8ff580bc40d0f56e715de69b163546944f787c87abf209c961
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
diff --git a/packages/react-native-editor/android/gradlew b/packages/react-native-editor/android/gradlew
index 547ba0c2aa8ff..fcb6fca147c0c 100755
--- a/packages/react-native-editor/android/gradlew
+++ b/packages/react-native-editor/android/gradlew
@@ -83,8 +83,7 @@ done
 # This is normally unused
 # shellcheck disable=SC2034
 APP_BASE_NAME=${0##*/}
-# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
-APP_HOME=$( cd "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit
+APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
 MAX_FD=maximum
@@ -246,4 +245,4 @@ eval "set -- $(
         tr '\n' ' '
     )" '"$@"'
 
-exec "$JAVACMD" "$@"
\ No newline at end of file
+exec "$JAVACMD" "$@"
diff --git a/packages/react-native-editor/android/gradlew.bat b/packages/react-native-editor/android/gradlew.bat
index c138ebb7fb183..6689b85beecde 100644
--- a/packages/react-native-editor/android/gradlew.bat
+++ b/packages/react-native-editor/android/gradlew.bat
@@ -89,4 +89,4 @@ exit /b %EXIT_CODE%
 :mainEnd
 if "%OS%"=="Windows_NT" endlocal
 
-:omega
\ No newline at end of file
+:omega
diff --git a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
index b3c42bac7b583..c93a667a8faf0 100644
--- a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
+++ b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/readable-js-assets-webpack-plugin/package.json b/packages/readable-js-assets-webpack-plugin/package.json
index aa8a7dacb6ced..8f90b19356c4e 100644
--- a/packages/readable-js-assets-webpack-plugin/package.json
+++ b/packages/readable-js-assets-webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/readable-js-assets-webpack-plugin",
-	"version": "3.3.0",
+	"version": "3.9.0",
 	"description": "Generate a readable JS file for each JS asset.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/redux-routine/CHANGELOG.md b/packages/redux-routine/CHANGELOG.md
index adb0f764f5ed1..8154e640d3c98 100644
--- a/packages/redux-routine/CHANGELOG.md
+++ b/packages/redux-routine/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/redux-routine/package.json b/packages/redux-routine/package.json
index 489c9ff75f72d..80857aa15908d 100644
--- a/packages/redux-routine/package.json
+++ b/packages/redux-routine/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/redux-routine",
-	"version": "5.3.0",
+	"version": "5.9.0",
 	"description": "Redux middleware for generator coroutines.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/reusable-blocks/CHANGELOG.md b/packages/reusable-blocks/CHANGELOG.md
index 0f460be3226b7..5e94ec2407914 100644
--- a/packages/reusable-blocks/CHANGELOG.md
+++ b/packages/reusable-blocks/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/reusable-blocks/package.json b/packages/reusable-blocks/package.json
index 756de894fa31e..8936c97e24768 100644
--- a/packages/reusable-blocks/package.json
+++ b/packages/reusable-blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/reusable-blocks",
-	"version": "5.3.0",
+	"version": "5.9.0",
 	"description": "Reusable blocks utilities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
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 40f056a3a7388..e0d8592df4d8c 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
@@ -169,6 +169,7 @@ export default function ReusableBlockConvertButton( {
 					>
 						<VStack spacing="5">
 							<TextControl
+								__next40pxDefaultSize
 								__nextHasNoMarginBottom
 								label={ __( 'Name' ) }
 								value={ title }
@@ -176,6 +177,7 @@ export default function ReusableBlockConvertButton( {
 								placeholder={ __( 'My pattern' ) }
 							/>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ _x( 'Synced', 'pattern (singular)' ) }
 								help={ __(
 									'Sync this pattern across multiple locations.'
@@ -189,6 +191,7 @@ export default function ReusableBlockConvertButton( {
 							/>
 							<HStack justify="right">
 								<Button
+									__next40pxDefaultSize
 									variant="tertiary"
 									onClick={ () => {
 										setIsModalOpen( false );
@@ -198,7 +201,11 @@ export default function ReusableBlockConvertButton( {
 									{ __( 'Cancel' ) }
 								</Button>
 
-								<Button variant="primary" type="submit">
+								<Button
+									__next40pxDefaultSize
+									variant="primary"
+									type="submit"
+								>
 									{ __( 'Create' ) }
 								</Button>
 							</HStack>
diff --git a/packages/rich-text/CHANGELOG.md b/packages/rich-text/CHANGELOG.md
index af5b2270d5aac..7fe0e351c6f5f 100644
--- a/packages/rich-text/CHANGELOG.md
+++ b/packages/rich-text/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/rich-text/README.md b/packages/rich-text/README.md
index 3c3abc422fa5f..033a4f2c747ab 100644
--- a/packages/rich-text/README.md
+++ b/packages/rich-text/README.md
@@ -430,7 +430,7 @@ 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.preserveWhiteSpace_ `[boolean]`: Preserves newlines if true.
 
diff --git a/packages/rich-text/package.json b/packages/rich-text/package.json
index 13d5404786ea2..f9ecb72cfb6d0 100644
--- a/packages/rich-text/package.json
+++ b/packages/rich-text/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/rich-text",
-	"version": "7.3.0",
+	"version": "7.9.0",
 	"description": "Rich text value and manipulation API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js
index 2606ae9f902fa..600fc0faff520 100644
--- a/packages/rich-text/src/component/index.js
+++ b/packages/rich-text/src/component/index.js
@@ -60,46 +60,48 @@ 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 = value;
+		_valueRef.current = value;
+		recordRef.current = value;
 		if ( ! ( value instanceof RichTextData ) ) {
-			record.current = value
+			recordRef.current = value
 				? RichTextData.fromHTMLString( value, { preserveWhiteSpace } )
 				: RichTextData.empty();
 		}
 		// To do: make rich text internally work with RichTextData.
-		record.current = {
-			text: record.current.text,
-			formats: record.current.formats,
-			replacements: record.current.replacements,
+		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 ) {
-		hadSelectionUpdate.current = isSelected;
+	if ( ! recordRef.current ) {
+		hadSelectionUpdateRef.current = isSelected;
 		setRecordFromProps();
 	} 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,
@@ -113,34 +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 {
 			const newFormats = __unstableBeforeSerialize
 				? __unstableBeforeSerialize( newRecord )
 				: newRecord.formats;
 			newRecord = { ...newRecord, formats: newFormats };
 			if ( typeof value === 'string' ) {
-				_value.current = toHTMLString( {
+				_valueRef.current = toHTMLString( {
 					value: newRecord,
 					preserveWhiteSpace,
 				} );
 			} else {
-				_value.current = new RichTextData( newRecord );
+				_valueRef.current = new RichTextData( newRecord );
 			}
 		}
 
-		const { start, end, formats, text } = record.current;
+		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, {
+			onChange( _valueRef.current, {
 				__unstableFormats: formats,
 				__unstableText: text,
 			} );
@@ -150,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();
 		}
@@ -165,7 +167,7 @@ export function useRichText( {
 
 	// Value updates must happen synchonously to avoid overwriting newer values.
 	useLayoutEffect( () => {
-		if ( ! hadSelectionUpdate.current ) {
+		if ( ! hadSelectionUpdateRef.current ) {
 			return;
 		}
 
@@ -173,16 +175,16 @@ export function useRichText( {
 			ref.current.focus();
 		}
 
-		applyRecord( record.current );
-		hadSelectionUpdate.current = false;
-	}, [ hadSelectionUpdate.current ] );
+		applyRecord( recordRef.current );
+		hadSelectionUpdateRef.current = false;
+	}, [ hadSelectionUpdateRef.current ] );
 
 	const mergedRefs = useMergeRefs( [
 		ref,
 		useDefaultStyle(),
-		useBoundaryStyle( { record } ),
+		useBoundaryStyle( { record: recordRef } ),
 		useEventListeners( {
-			record,
+			record: recordRef,
 			handleChange,
 			applyRecord,
 			createRecord,
@@ -192,18 +194,18 @@ export function useRichText( {
 		} ),
 		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: () => record.current,
+		getValue: () => recordRef.current,
 		onChange: handleChange,
 		ref: mergedRefs,
 	};
diff --git a/packages/rich-text/src/create.js b/packages/rich-text/src/create.js
index 0b0a269509e7e..898bdfa73b330 100644
--- a/packages/rich-text/src/create.js
+++ b/packages/rich-text/src/create.js
@@ -431,7 +431,7 @@ export function removeReservedCharacters( string ) {
 /**
  * Creates a Rich Text value from a DOM element and range.
  *
- * @param {Object}  $1                  Named argements.
+ * @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]
@@ -591,7 +591,7 @@ function createFromElement( { element, range, isEditableTree } ) {
 /**
  * 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/to-html-string.js b/packages/rich-text/src/to-html-string.js
index 35089003f0b3f..f770dfdefc128 100644
--- a/packages/rich-text/src/to-html-string.js
+++ b/packages/rich-text/src/to-html-string.js
@@ -19,7 +19,7 @@ import { toTree } from './to-tree';
 /**
  * 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 {boolean}       [$1.preserveWhiteSpace] Preserves newlines if true.
  *
diff --git a/packages/rich-text/src/to-tree.js b/packages/rich-text/src/to-tree.js
index 131174460a74b..46671c951bc09 100644
--- a/packages/rich-text/src/to-tree.js
+++ b/packages/rich-text/src/to-tree.js
@@ -299,6 +299,8 @@ 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',
diff --git a/packages/router/CHANGELOG.md b/packages/router/CHANGELOG.md
index a8b6881e1e4b1..0ce856ea20e88 100644
--- a/packages/router/CHANGELOG.md
+++ b/packages/router/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 ## Unreleased
 
+### 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)
diff --git a/packages/router/package.json b/packages/router/package.json
index 8df816f9dabdc..eadc360d8e0cb 100644
--- a/packages/router/package.json
+++ b/packages/router/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/router",
-	"version": "1.3.0",
+	"version": "1.9.0",
 	"description": "Router API for WordPress pages.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -25,6 +25,7 @@
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"types": "build-types",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/element": "file:../element",
diff --git a/packages/router/src/history.js b/packages/router/src/history.ts
similarity index 75%
rename from packages/router/src/history.js
rename to packages/router/src/history.ts
index 3a04745923a81..e046522a75189 100644
--- a/packages/router/src/history.js
+++ b/packages/router/src/history.ts
@@ -1,13 +1,17 @@
 /**
  * External dependencies
  */
-import { createBrowserHistory } from 'history';
+import { createBrowserHistory, type BrowserHistory } from 'history';
 
 /**
  * WordPress dependencies
  */
 import { buildQueryString } from '@wordpress/url';
 
+export interface EnhancedHistory extends BrowserHistory {
+	getLocationWithParams: () => Location;
+}
+
 const history = createBrowserHistory();
 
 const originalHistoryPush = history.push;
@@ -16,7 +20,7 @@ const originalHistoryReplace = history.replace;
 // Preserve the `wp_theme_preview` query parameter when navigating
 // around the Site Editor.
 // TODO: move this hack out of the router into Site Editor code.
-function preserveThemePreview( params ) {
+function preserveThemePreview( params: Record< string, any > ) {
 	if ( params.hasOwnProperty( 'wp_theme_preview' ) ) {
 		return params;
 	}
@@ -28,12 +32,15 @@ function preserveThemePreview( params ) {
 	return { ...params, wp_theme_preview: currentThemePreview };
 }
 
-function push( params, state ) {
+function push( params: Record< string, any >, state: Record< string, any > ) {
 	const search = buildQueryString( preserveThemePreview( params ) );
 	return originalHistoryPush.call( history, { search }, state );
 }
 
-function replace( params, state ) {
+function replace(
+	params: Record< string, any >,
+	state: Record< string, any >
+) {
 	const search = buildQueryString( preserveThemePreview( params ) );
 	return originalHistoryReplace.call( history, { search }, state );
 }
@@ -54,8 +61,9 @@ function getLocationWithParams() {
 	return locationWithParams;
 }
 
-history.push = push;
-history.replace = replace;
-history.getLocationWithParams = getLocationWithParams;
-
-export default history;
+export default {
+	...history,
+	push,
+	replace,
+	getLocationWithParams,
+};
diff --git a/packages/router/src/index.js b/packages/router/src/index.ts
similarity index 100%
rename from packages/router/src/index.js
rename to packages/router/src/index.ts
diff --git a/packages/router/src/lock-unlock.js b/packages/router/src/lock-unlock.ts
similarity index 100%
rename from packages/router/src/lock-unlock.js
rename to packages/router/src/lock-unlock.ts
diff --git a/packages/router/src/private-apis.js b/packages/router/src/private-apis.ts
similarity index 100%
rename from packages/router/src/private-apis.js
rename to packages/router/src/private-apis.ts
diff --git a/packages/router/src/router.js b/packages/router/src/router.tsx
similarity index 71%
rename from packages/router/src/router.js
rename to packages/router/src/router.tsx
index 55807175a5bdd..9a1d01aa5f8d8 100644
--- a/packages/router/src/router.js
+++ b/packages/router/src/router.tsx
@@ -11,9 +11,10 @@ import {
  * Internal dependencies
  */
 import history from './history';
+import type { EnhancedHistory } from './history';
 
-const RoutesContext = createContext();
-const HistoryContext = createContext();
+const RoutesContext = createContext< Location | null >( null );
+const HistoryContext = createContext< EnhancedHistory >( history );
 
 export function useLocation() {
 	return useContext( RoutesContext );
@@ -23,7 +24,7 @@ export function useHistory() {
 	return useContext( HistoryContext );
 }
 
-export function RouterProvider( { children } ) {
+export function RouterProvider( { children }: { children: React.ReactNode } ) {
 	const location = useSyncExternalStore(
 		history.listen,
 		history.getLocationWithParams,
diff --git a/packages/router/tsconfig.json b/packages/router/tsconfig.json
new file mode 100644
index 0000000000000..e4945eef8bac0
--- /dev/null
+++ b/packages/router/tsconfig.json
@@ -0,0 +1,17 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+		"types": [ "gutenberg-env" ],
+		"allowJs": false,
+		"checkJs": false
+	},
+	"references": [
+		{ "path": "../element" },
+		{ "path": "../private-apis" },
+		{ "path": "../url" }
+	],
+	"include": [ "src/**/*" ]
+}
diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
index 0155cc24c1051..e7b40a3c1f346 100644
--- a/packages/scripts/CHANGELOG.md
+++ b/packages/scripts/CHANGELOG.md
@@ -2,6 +2,36 @@
 
 ## Unreleased
 
+## 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)).
diff --git a/packages/scripts/config/.stylelintrc.json b/packages/scripts/config/.stylelintrc.json
index 1cfc8fc10ea56..96c4ccca74905 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/webpack.config.js b/packages/scripts/config/webpack.config.js
index 508d4d262942d..91ef19fc27ed6 100644
--- a/packages/scripts/config/webpack.config.js
+++ b/packages/scripts/config/webpack.config.js
@@ -13,7 +13,6 @@ const RtlCssPlugin = require( 'rtlcss-webpack-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 const { realpathSync } = require( 'fs' );
 const { sync: glob } = require( 'fast-glob' );
-const { validate } = require( 'schema-utils' );
 
 /**
  * WordPress dependencies
@@ -32,11 +31,11 @@ const {
 	hasPostCSSConfig,
 	getWordPressSrcDirectory,
 	getWebpackEntryPoints,
-	getPhpFilePaths,
 	getAsBooleanFromENV,
 	getBlockJsonModuleFields,
 	getBlockJsonScriptFields,
 	fromProjectRoot,
+	PhpFilePathsPlugin,
 } = require( '../utils' );
 
 const isProduction = process.env.NODE_ENV === 'production';
@@ -50,49 +49,6 @@ const hasExperimentalModulesFlag = getAsBooleanFromENV(
 	'WP_EXPERIMENTAL_MODULES'
 );
 
-const phpFilePathsPluginSchema = {
-	type: 'object',
-	properties: {
-		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.props );
-		} );
-	}
-}
-
 const cssLoaders = [
 	{
 		loader: MiniCSSExtractPlugin.loader,
@@ -119,6 +75,7 @@ const cssLoaders = [
 					plugins: isProduction
 						? [
 								...postcssPlugins,
+								require( 'postcss-import' ),
 								require( 'cssnano' )( {
 									// Provide a fallback configuration if there's not
 									// one explicitly available in the project.
@@ -147,6 +104,7 @@ const baseConfig = {
 	target,
 	output: {
 		filename: '[name].js',
+		chunkFilename: '[name].js?v=[chunkhash]',
 		path: resolve( process.cwd(), 'build' ),
 	},
 	resolve: {
@@ -343,7 +301,10 @@ const scriptConfig = {
 				cleanStaleWebpackAssets: false,
 			} ),
 
-		new PhpFilePathsPlugin( { props: [ 'render', 'variations' ] } ),
+		new PhpFilePathsPlugin( {
+			context: getWordPressSrcDirectory(),
+			props: [ 'render', 'variations' ],
+		} ),
 		new CopyWebpackPlugin( {
 			patterns: [
 				{
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index 6f5218f7978f0..29fef4864a991 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/scripts",
-	"version": "28.3.0",
+	"version": "30.1.0",
 	"description": "Collection of reusable scripts for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -73,9 +73,10 @@
 		"npm-package-json-lint": "^6.4.0",
 		"npm-packlist": "^3.0.0",
 		"postcss": "^8.4.5",
+		"postcss-import": "^16.1.0",
 		"postcss-loader": "^6.2.1",
 		"prettier": "npm:wp-prettier@3.0.3",
-		"puppeteer-core": "^13.2.0",
+		"puppeteer-core": "^23.1.0",
 		"react-refresh": "^0.14.0",
 		"read-pkg-up": "^7.0.1",
 		"resolve-bin": "^0.4.0",
@@ -84,7 +85,7 @@
 		"sass-loader": "^12.1.0",
 		"schema-utils": "^4.2.0",
 		"source-map-loader": "^3.0.0",
-		"stylelint": "^14.2.0",
+		"stylelint": "^16.8.2",
 		"terser-webpack-plugin": "^5.3.9",
 		"url-loader": "^4.1.1",
 		"webpack": "^5.88.2",
@@ -93,7 +94,7 @@
 		"webpack-dev-server": "^4.15.1"
 	},
 	"peerDependencies": {
-		"@playwright/test": "^1.45.1",
+		"@playwright/test": "^1.47.0",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0"
 	},
diff --git a/packages/scripts/utils/config.js b/packages/scripts/utils/config.js
index 7196c0376377d..dfb44730438c4 100644
--- a/packages/scripts/utils/config.js
+++ b/packages/scripts/utils/config.js
@@ -351,22 +351,23 @@ function getWebpackEntryPoints( buildType ) {
 /**
  * Returns the list of PHP file paths found in `block.json` files for the given props.
  *
- * @param {string[]} props The props to search for in the `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 getPhpFilePaths( props ) {
+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( '**/block.json', {
 		absolute: true,
-		cwd: fromProjectRoot( getWordPressSrcDirectory() ),
+		cwd: fromProjectRoot( context ),
 	} );
 
-	const srcDirectory = fromProjectRoot( getWordPressSrcDirectory() + sep );
+	const srcDirectory = fromProjectRoot( context + sep );
 
 	return blockMetadataFiles.flatMap( ( blockMetadataFile ) => {
 		const blockJson = JSON.parse( readFileSync( blockMetadataFile ) );
@@ -396,7 +397,7 @@ function getPhpFilePaths( props ) {
 						) }" listed in "${ blockMetadataFile.replace(
 							fromProjectRoot( sep ),
 							''
-						) }". File is located outside of the "${ getWordPressSrcDirectory() }" directory.`
+						) }". File is located outside of the "${ context }" directory.`
 					)
 				);
 				continue;
diff --git a/packages/scripts/utils/index.js b/packages/scripts/utils/index.js
index dc4008b16197d..cb7e592f83d55 100644
--- a/packages/scripts/utils/index.js
+++ b/packages/scripts/utils/index.js
@@ -29,6 +29,7 @@ const {
 	getBlockJsonModuleFields,
 	getBlockJsonScriptFields,
 } = require( './block-json' );
+const { PhpFilePathsPlugin } = require( './php-file-paths-plugin' );
 
 module.exports = {
 	fromProjectRoot,
@@ -55,5 +56,6 @@ module.exports = {
 	hasPostCSSConfig,
 	hasPrettierConfig,
 	hasProjectFile,
+	PhpFilePathsPlugin,
 	spawnScript,
 };
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 0000000000000..6f95dae6505a8
--- /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/server-side-render/CHANGELOG.md b/packages/server-side-render/CHANGELOG.md
index c54d277fc4ab4..43de483ed7ae5 100644
--- a/packages/server-side-render/CHANGELOG.md
+++ b/packages/server-side-render/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/server-side-render/package.json b/packages/server-side-render/package.json
index add2de979fa33..d7dd1311a2f10 100644
--- a/packages/server-side-render/package.json
+++ b/packages/server-side-render/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/server-side-render",
-	"version": "5.3.0",
+	"version": "5.9.0",
 	"description": "The component used with WordPress to server-side render a preview of dynamic blocks to display in the editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/shortcode/CHANGELOG.md b/packages/shortcode/CHANGELOG.md
index abcd556a134ab..e3efee9b49779 100644
--- a/packages/shortcode/CHANGELOG.md
+++ b/packages/shortcode/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/shortcode/package.json b/packages/shortcode/package.json
index 3e3899472bc9a..b0e2f5eb34181 100644
--- a/packages/shortcode/package.json
+++ b/packages/shortcode/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/shortcode",
-	"version": "4.3.0",
+	"version": "4.9.0",
 	"description": "Shortcode module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/style-engine/CHANGELOG.md b/packages/style-engine/CHANGELOG.md
index 301583e490731..3435553b63a71 100644
--- a/packages/style-engine/CHANGELOG.md
+++ b/packages/style-engine/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/style-engine/README.md b/packages/style-engine/README.md
index 44b78eed8a81a..a3e302fab4bb9 100644
--- a/packages/style-engine/README.md
+++ b/packages/style-engine/README.md
@@ -258,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/package.json b/packages/style-engine/package.json
index 5840efb582987..80babe6bcd4ca 100644
--- a/packages/style-engine/package.json
+++ b/packages/style-engine/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/style-engine",
-	"version": "2.3.0",
+	"version": "2.9.0",
 	"description": "A suite of parsers and compilers for WordPress styles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/style-engine/src/index.ts b/packages/style-engine/src/index.ts
index fe5b9929877be..102d5842e7a0b 100644
--- a/packages/style-engine/src/index.ts
+++ b/packages/style-engine/src/index.ts
@@ -91,3 +91,6 @@ export function getCSSRules(
 
 	return rules;
 }
+
+// Export style utils.
+export { getCSSValueFromRawStyle } from './styles/utils';
diff --git a/packages/style-engine/src/styles/background/index.ts b/packages/style-engine/src/styles/background/index.ts
index 211b97343d89c..b943032f9c441 100644
--- a/packages/style-engine/src/styles/background/index.ts
+++ b/packages/style-engine/src/styles/background/index.ts
@@ -8,6 +8,12 @@ const backgroundImage = {
 	name: 'backgroundImage',
 	generate: ( style: Style, options: StyleOptions ) => {
 		const _backgroundImage = style?.background?.backgroundImage;
+
+		/*
+		 * The background image can be a string or an object.
+		 * If the background image is a string, it could already contain a url() function,
+		 * or have a linear-gradient value.
+		 */
 		if ( typeof _backgroundImage === 'object' && _backgroundImage?.url ) {
 			return [
 				{
@@ -21,20 +27,12 @@ const backgroundImage = {
 			];
 		}
 
-		/*
-		 * If the background image is a string, it could already contain a url() function,
-		 * or have a linear-gradient value.
-		 */
-		if ( typeof _backgroundImage === 'string' ) {
-			return generateRule(
-				style,
-				options,
-				[ 'background', 'backgroundImage' ],
-				'backgroundImage'
-			);
-		}
-
-		return [];
+		return generateRule(
+			style,
+			options,
+			[ 'background', 'backgroundImage' ],
+			'backgroundImage'
+		);
 	},
 };
 
diff --git a/packages/style-engine/src/styles/test/utils.js b/packages/style-engine/src/styles/test/utils.js
new file mode 100644
index 0000000000000..02f0adf494e71
--- /dev/null
+++ b/packages/style-engine/src/styles/test/utils.js
@@ -0,0 +1,54 @@
+/**
+ * Internal dependencies
+ */
+import { camelCaseJoin, getCSSValueFromRawStyle, upperFirst } from '../utils';
+
+describe( 'utils', () => {
+	describe( 'upperFirst()', () => {
+		it( 'should return an string with a capitalized first letter', () => {
+			expect( upperFirst( 'toontown' ) ).toEqual( 'Toontown' );
+		} );
+	} );
+
+	describe( 'camelCaseJoin()', () => {
+		it( 'should return a camelCase string', () => {
+			expect( camelCaseJoin( [ 'toon', 'town' ] ) ).toEqual( 'toonTown' );
+		} );
+	} );
+
+	describe( 'getCSSValueFromRawStyle()', () => {
+		it.each( [
+			[ 'min(40%, 400px)', 'min(40%, 400px)' ],
+			[
+				'var(--wp--preset--color--yellow-bun)',
+				'var:preset|color|yellow-bun',
+			],
+			[ 'var(--wp--preset--font-size--h-1)', 'var:preset|font-size|h1' ],
+			[
+				'var(--wp--preset--font-size--1-px)',
+				'var:preset|font-size|1px',
+			],
+			[
+				'var(--wp--preset--color--orange-11-orange)',
+				'var:preset|color|orange11orange',
+			],
+			[
+				'var(--wp--preset--color--heavenly-blue)',
+				'var:preset|color|heavenlyBlue',
+			],
+			[
+				'var(--wp--preset--background--dark-secrets-100)',
+				'var:preset|background|dark_Secrets_100',
+			],
+			[ null, null ],
+			[ false, false ],
+			[ 1000, 1000 ],
+			[ undefined, undefined ],
+		] )(
+			'should return %s using an incoming value of %s',
+			( expected, value ) => {
+				expect( getCSSValueFromRawStyle( value ) ).toEqual( expected );
+			}
+		);
+	} );
+} );
diff --git a/packages/style-engine/src/styles/utils.ts b/packages/style-engine/src/styles/utils.ts
index 00e9dab8b5892..74a18d2c2a6e4 100644
--- a/packages/style-engine/src/styles/utils.ts
+++ b/packages/style-engine/src/styles/utils.ts
@@ -61,7 +61,7 @@ export function generateRule(
 				{
 					selector: options?.selector,
 					key: ruleKey,
-					value: getCSSVarFromStyleValue( styleValue ),
+					value: getCSSValueFromRawStyle( styleValue ),
 				},
 		  ]
 		: [];
@@ -103,7 +103,7 @@ export function generateBoxRules(
 	} else {
 		const sideRules = individualProperties.reduce(
 			( acc: GeneratedCSSRule[], side: string ) => {
-				const value: string | undefined = getCSSVarFromStyleValue(
+				const value = getCSSValueFromRawStyle(
 					getStyleValueByPath( boxStyle, [ side ] )
 				);
 				if ( value ) {
@@ -127,13 +127,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 )
@@ -152,7 +162,7 @@ export function getCSSVarFromStyleValue( styleValue: string ): string {
 				} )
 			)
 			.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );
-		return `var(--wp--${ variable })`;
+		return `var(--wp--${ variable })` as StyleValue;
 	}
 	return styleValue;
 }
diff --git a/packages/style-engine/src/test/utils.js b/packages/style-engine/src/test/utils.js
deleted file mode 100644
index 9f1f84d2b4531..0000000000000
--- a/packages/style-engine/src/test/utils.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	camelCaseJoin,
-	getCSSVarFromStyleValue,
-	upperFirst,
-} from '../styles/utils';
-
-describe( 'utils', () => {
-	describe( 'upperFirst()', () => {
-		it( 'should return an string with a capitalized first letter', () => {
-			expect( upperFirst( 'toontown' ) ).toEqual( 'Toontown' );
-		} );
-	} );
-
-	describe( 'camelCaseJoin()', () => {
-		it( 'should return a camelCase string', () => {
-			expect( camelCaseJoin( [ 'toon', 'town' ] ) ).toEqual( 'toonTown' );
-		} );
-	} );
-
-	describe( 'getCSSVarFromStyleValue()', () => {
-		it( 'should return a compiled CSS var', () => {
-			expect(
-				getCSSVarFromStyleValue( 'var:preset|color|yellow-bun' )
-			).toEqual( 'var(--wp--preset--color--yellow-bun)' );
-		} );
-
-		it( 'should kebab case numbers', () => {
-			expect(
-				getCSSVarFromStyleValue( 'var:preset|font-size|h1' )
-			).toEqual( 'var(--wp--preset--font-size--h-1)' );
-		} );
-
-		it( 'should kebab case numbers as prefix', () => {
-			expect(
-				getCSSVarFromStyleValue( 'var:preset|font-size|1px' )
-			).toEqual( 'var(--wp--preset--font-size--1-px)' );
-		} );
-
-		it( 'should kebab case both sides of numbers', () => {
-			expect(
-				getCSSVarFromStyleValue( 'var:preset|color|orange11orange' )
-			).toEqual( 'var(--wp--preset--color--orange-11-orange)' );
-		} );
-
-		it( 'should kebab case camel case', () => {
-			expect(
-				getCSSVarFromStyleValue( 'var:preset|color|heavenlyBlue' )
-			).toEqual( 'var(--wp--preset--color--heavenly-blue)' );
-		} );
-
-		it( 'should kebab case underscores', () => {
-			expect(
-				getCSSVarFromStyleValue(
-					'var:preset|background|dark_Secrets_100'
-				)
-			).toEqual( 'var(--wp--preset--background--dark-secrets-100)' );
-		} );
-	} );
-} );
diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
index 5b361836a8e37..8de623fcfcb2b 100644
--- a/packages/style-engine/src/types.ts
+++ b/packages/style-engine/src/types.ts
@@ -94,7 +94,7 @@ export interface StyleOptions {
 
 export interface GeneratedCSSRule {
 	selector?: string;
-	value: string;
+	value: string | unknown;
 	/**
 	 * The CSS key in JS style attribute format, compatible with React.
 	 * E.g. `paddingTop` instead of `padding-top`.
diff --git a/packages/stylelint-config/CHANGELOG.md b/packages/stylelint-config/CHANGELOG.md
index 8c09b44c83e4b..ada350fe2fe57 100644
--- a/packages/stylelint-config/CHANGELOG.md
+++ b/packages/stylelint-config/CHANGELOG.md
@@ -2,6 +2,32 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/stylelint-config/README.md b/packages/stylelint-config/README.md
index c6d69a9d18348..5d760dddc8f92 100644
--- a/packages/stylelint-config/README.md
+++ b/packages/stylelint-config/README.md
@@ -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 0ab4f954cb35b..3e5e00b05a2a4 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 16ae6b73089e0..3cb8b481dd420 100644
--- a/packages/stylelint-config/package.json
+++ b/packages/stylelint-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/stylelint-config",
-	"version": "22.3.0",
+	"version": "23.1.0",
 	"description": "stylelint config for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "MIT",
@@ -28,15 +28,18 @@
 		"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 0000000000000..5d9bbb50c7b66
--- /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 09940642b218b..3f0aacce31d5a 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 0000000000000..54a1a2ca63dd7
--- /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 0000000000000..f74c877ecba44
--- /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 1ea6c83527d28..059284930a130 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 0000000000000..c80288c8dc8bb
--- /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 4eaddcac0148c..ab191a80e1e73 100644
--- a/packages/stylelint-config/test/__snapshots__/commenting.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/commenting.js.snap
@@ -2,8 +2,19 @@
 
 exports[`flags warnings with invalid commenting css snapshot matches warnings 1`] = `
 [
+  {
+    "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",
@@ -11,17 +22,12 @@ exports[`flags warnings with invalid commenting css snapshot matches warnings 1`
   },
   {
     "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)",
   },
-  {
-    "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 2a559eaea3317..aa3ee40e69cc6 100644
--- a/packages/stylelint-config/test/__snapshots__/functions.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/functions.js.snap
@@ -4,6 +4,8 @@ exports[`flags warnings with invalid functions css snapshot matches warnings 1`]
 [
   {
     "column": 9,
+    "endColumn": 13,
+    "endLine": 4,
     "line": 4,
     "rule": "function-name-case",
     "severity": "error",
diff --git a/packages/stylelint-config/test/__snapshots__/index.js.snap b/packages/stylelint-config/test/__snapshots__/index.js.snap
index ec66034995164..10c35b02e0e93 100644
--- a/packages/stylelint-config/test/__snapshots__/index.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/index.js.snap
@@ -4,10 +4,12 @@ exports[`flags warnings with invalid css snapshot matches warnings 1`] = `
 [
   {
     "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 298e30bb24b9c..93bcf3c13d399 100644
--- a/packages/stylelint-config/test/__snapshots__/media-queries.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/media-queries.js.snap
@@ -2,82 +2,104 @@
 
 exports[`flags warnings with invalid media queries css snapshot matches warnings 1`] = `
 [
-  {
-    "column": 1,
-    "line": 31,
-    "rule": "at-rule-no-unknown",
-    "severity": "error",
-    "text": "Unexpected unknown at-rule "@mdia" (at-rule-no-unknown)",
-  },
   {
     "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)",
   },
   {
     "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)",
   },
   {
     "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)",
-  },
-  {
-    "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)",
   },
   {
     "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)",
   },
   {
     "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)",
   },
   {
     "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)",
   },
   {
     "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)",
   },
   {
     "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)",
   },
   {
     "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 9bb0ab2395484..a0c36aa885e1f 100644
--- a/packages/stylelint-config/test/__snapshots__/properties.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/properties.js.snap
@@ -4,13 +4,35 @@ exports[`flags warnings with invalid properties css snapshot matches warnings 1`
 [
   {
     "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)",
   },
   {
     "column": 13,
+    "endColumn": 14,
+    "endLine": 2,
+    "line": 2,
+    "rule": "@stylistic/declaration-colon-space-after",
+    "severity": "error",
+    "text": "Expected single space after ":" with a single-line declaration (@stylistic/declaration-colon-space-after)",
+  },
+  {
+    "column": 17,
+    "endColumn": 19,
+    "endLine": 4,
+    "line": 4,
+    "rule": "@stylistic/unit-case",
+    "severity": "error",
+    "text": "Expected "PX" to be "px" (@stylistic/unit-case)",
+  },
+  {
+    "column": 13,
+    "endColumn": 20,
+    "endLine": 2,
     "line": 2,
     "rule": "color-hex-length",
     "severity": "error",
@@ -18,34 +40,26 @@ exports[`flags warnings with invalid properties css snapshot matches warnings 1`
   },
   {
     "column": 2,
+    "endColumn": 8,
+    "endLine": 5,
     "line": 5,
     "rule": "declaration-block-no-shorthand-property-overrides",
     "severity": "error",
     "text": "Unexpected shorthand "margin" after "margin-left" (declaration-block-no-shorthand-property-overrides)",
   },
-  {
-    "column": 13,
-    "line": 2,
-    "rule": "declaration-colon-space-after",
-    "severity": "error",
-    "text": "Expected single space after ":" with a single-line declaration (declaration-colon-space-after)",
-  },
   {
     "column": 2,
+    "endColumn": 7,
+    "endLine": 6,
     "line": 6,
     "rule": "property-no-unknown",
     "severity": "error",
     "text": "Unexpected unknown property "argin" (property-no-unknown)",
   },
-  {
-    "column": 15,
-    "line": 4,
-    "rule": "unit-case",
-    "severity": "error",
-    "text": "Expected "PX" to be "px" (unit-case)",
-  },
   {
     "column": 11,
+    "endColumn": 16,
+    "endLine": 3,
     "line": 3,
     "rule": "value-keyword-case",
     "severity": "error",
diff --git a/packages/stylelint-config/test/__snapshots__/scss.js.snap b/packages/stylelint-config/test/__snapshots__/scss.js.snap
index dd199336323ff..a1abeef86ac96 100644
--- a/packages/stylelint-config/test/__snapshots__/scss.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/scss.js.snap
@@ -2,8 +2,37 @@
 
 exports[`flags warnings with invalid scss snapshot matches warnings 1`] = `
 [
+  {
+    "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",
@@ -11,6 +40,8 @@ exports[`flags warnings with invalid scss snapshot matches warnings 1`] = `
   },
   {
     "column": 2,
+    "endColumn": 3,
+    "endLine": 12,
     "line": 12,
     "rule": "scss/at-if-closing-brace-newline-after",
     "severity": "error",
@@ -18,6 +49,8 @@ exports[`flags warnings with invalid scss snapshot matches warnings 1`] = `
   },
   {
     "column": 2,
+    "endColumn": 3,
+    "endLine": 12,
     "line": 12,
     "rule": "scss/at-if-closing-brace-space-after",
     "severity": "error",
@@ -25,6 +58,8 @@ exports[`flags warnings with invalid scss snapshot matches warnings 1`] = `
   },
   {
     "column": 1,
+    "endColumn": 9,
+    "endLine": 1,
     "line": 1,
     "rule": "scss/at-rule-no-unknown",
     "severity": "error",
@@ -32,31 +67,12 @@ exports[`flags warnings with invalid scss snapshot matches warnings 1`] = `
   },
   {
     "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)",
   },
-  {
-    "column": 5,
-    "line": 14,
-    "rule": "block-opening-brace-space-before",
-    "severity": "error",
-    "text": "Expected single space before "{" (block-opening-brace-space-before)",
-  },
-  {
-    "column": 15,
-    "line": 28,
-    "rule": "no-extra-semicolons",
-    "severity": "error",
-    "text": "Unexpected extra semicolon (no-extra-semicolons)",
-  },
-  {
-    "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 31cbf77098ec6..ea1746c538362 100644
--- a/packages/stylelint-config/test/__snapshots__/selectors-scss.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/selectors-scss.js.snap
@@ -4,6 +4,8 @@ exports[`flags warnings with invalid selectors scss snapshot matches warnings 1`
 [
   {
     "column": 2,
+    "endColumn": 3,
+    "endLine": 3,
     "line": 3,
     "rule": "scss/selector-no-redundant-nesting-selector",
     "severity": "error",
@@ -11,6 +13,8 @@ exports[`flags warnings with invalid selectors scss snapshot matches warnings 1`
   },
   {
     "column": 2,
+    "endColumn": 3,
+    "endLine": 10,
     "line": 10,
     "rule": "scss/selector-no-redundant-nesting-selector",
     "severity": "error",
@@ -18,6 +22,8 @@ exports[`flags warnings with invalid selectors scss snapshot matches warnings 1`
   },
   {
     "column": 2,
+    "endColumn": 3,
+    "endLine": 17,
     "line": 17,
     "rule": "scss/selector-no-redundant-nesting-selector",
     "severity": "error",
@@ -25,6 +31,8 @@ exports[`flags warnings with invalid selectors scss snapshot matches warnings 1`
   },
   {
     "column": 2,
+    "endColumn": 3,
+    "endLine": 24,
     "line": 24,
     "rule": "scss/selector-no-redundant-nesting-selector",
     "severity": "error",
@@ -32,6 +40,8 @@ exports[`flags warnings with invalid selectors scss snapshot matches warnings 1`
   },
   {
     "column": 2,
+    "endColumn": 3,
+    "endLine": 31,
     "line": 31,
     "rule": "scss/selector-no-redundant-nesting-selector",
     "severity": "error",
@@ -39,6 +49,8 @@ exports[`flags warnings with invalid selectors scss snapshot matches warnings 1`
   },
   {
     "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 42242da99d451..f39edbfdb3fa5 100644
--- a/packages/stylelint-config/test/__snapshots__/selectors.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/selectors.js.snap
@@ -2,8 +2,19 @@
 
 exports[`flags warnings with invalid selectors css snapshot matches warnings 1`] = `
 [
+  {
+    "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",
@@ -11,6 +22,8 @@ exports[`flags warnings with invalid selectors css snapshot matches warnings 1`]
   },
   {
     "column": 1,
+    "endColumn": 11,
+    "endLine": 25,
     "line": 25,
     "rule": "selector-class-pattern",
     "severity": "error",
@@ -18,6 +31,8 @@ exports[`flags warnings with invalid selectors css snapshot matches warnings 1`]
   },
   {
     "column": 1,
+    "endColumn": 13,
+    "endLine": 1,
     "line": 1,
     "rule": "selector-id-pattern",
     "severity": "error",
@@ -25,6 +40,8 @@ exports[`flags warnings with invalid selectors css snapshot matches warnings 1`]
   },
   {
     "column": 1,
+    "endColumn": 14,
+    "endLine": 5,
     "line": 5,
     "rule": "selector-id-pattern",
     "severity": "error",
@@ -32,6 +49,8 @@ exports[`flags warnings with invalid selectors css snapshot matches warnings 1`]
   },
   {
     "column": 4,
+    "endColumn": 17,
+    "endLine": 9,
     "line": 9,
     "rule": "selector-id-pattern",
     "severity": "error",
@@ -39,6 +58,8 @@ exports[`flags warnings with invalid selectors css snapshot matches warnings 1`]
   },
   {
     "column": 1,
+    "endColumn": 10,
+    "endLine": 21,
     "line": 21,
     "rule": "selector-id-pattern",
     "severity": "error",
@@ -46,17 +67,12 @@ exports[`flags warnings with invalid selectors css snapshot matches warnings 1`]
   },
   {
     "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)",
   },
-  {
-    "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 b41ef9131547f..c59cfb0fc2918 100644
--- a/packages/stylelint-config/test/__snapshots__/structure.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/structure.js.snap
@@ -4,59 +4,75 @@ exports[`flags warnings with invalid structure css snapshot matches warnings 1`]
 [
   {
     "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)",
   },
   {
     "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)",
   },
   {
     "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)",
   },
   {
-    "column": 12,
-    "line": 1,
-    "rule": "selector-list-comma-newline-after",
+    "column": 3,
+    "endColumn": 4,
+    "endLine": 4,
+    "line": 4,
+    "rule": "@stylistic/indentation",
     "severity": "error",
-    "text": "Expected newline after "," (selector-list-comma-newline-after)",
+    "text": "Expected indentation of 0 tabs (@stylistic/indentation)",
   },
   {
-    "column": 25,
-    "line": 1,
-    "rule": "selector-list-comma-newline-after",
+    "column": 3,
+    "endColumn": 20,
+    "endLine": 2,
+    "line": 2,
+    "rule": "@stylistic/indentation",
     "severity": "error",
-    "text": "Expected newline after "," (selector-list-comma-newline-after)",
+    "text": "Expected indentation of 1 tab (@stylistic/indentation)",
   },
   {
     "column": 3,
-    "line": 4,
-    "rule": "indentation",
+    "endColumn": 15,
+    "endLine": 3,
+    "line": 3,
+    "rule": "@stylistic/indentation",
     "severity": "error",
-    "text": "Expected indentation of 0 tabs (indentation)",
+    "text": "Expected indentation of 1 tab (@stylistic/indentation)",
   },
   {
-    "column": 3,
-    "line": 2,
-    "rule": "indentation",
+    "column": 12,
+    "endColumn": 13,
+    "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)",
   },
   {
-    "column": 3,
-    "line": 3,
-    "rule": "indentation",
+    "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 2331e0364e5c7..95c34fcbfc8d4 100644
--- a/packages/stylelint-config/test/__snapshots__/values.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/values.js.snap
@@ -4,20 +4,26 @@ exports[`flags warnings with invalid values css snapshot matches warnings 1`] =
 [
   {
     "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)",
   },
   {
     "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)",
   },
   {
     "column": 15,
+    "endColumn": 20,
+    "endLine": 12,
     "line": 12,
     "rule": "declaration-property-unit-allowed-list",
     "severity": "error",
@@ -25,6 +31,8 @@ exports[`flags warnings with invalid values css snapshot matches warnings 1`] =
   },
   {
     "column": 15,
+    "endColumn": 30,
+    "endLine": 10,
     "line": 10,
     "rule": "font-family-name-quotes",
     "severity": "error",
@@ -32,13 +40,17 @@ exports[`flags warnings with invalid values css snapshot matches warnings 1`] =
   },
   {
     "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)",
   },
   {
     "column": 11,
+    "endColumn": 13,
+    "endLine": 6,
     "line": 6,
     "rule": "length-zero-no-unit",
     "severity": "error",
@@ -46,6 +58,8 @@ exports[`flags warnings with invalid values css snapshot matches warnings 1`] =
   },
   {
     "column": 15,
+    "endColumn": 17,
+    "endLine": 6,
     "line": 6,
     "rule": "length-zero-no-unit",
     "severity": "error",
@@ -53,6 +67,8 @@ exports[`flags warnings with invalid values css snapshot matches warnings 1`] =
   },
   {
     "column": 24,
+    "endColumn": 26,
+    "endLine": 6,
     "line": 6,
     "rule": "length-zero-no-unit",
     "severity": "error",
@@ -60,6 +76,8 @@ exports[`flags warnings with invalid values css snapshot matches warnings 1`] =
   },
   {
     "column": 1,
+    "endColumn": 10,
+    "endLine": 15,
     "line": 15,
     "rule": "no-duplicate-selectors",
     "severity": "error",
diff --git a/packages/stylelint-config/test/commenting.js b/packages/stylelint-config/test/commenting.js
index 1a23a47434fc1..dde02f605faf1 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 38b0fbf37a3a8..d6fb2a7ddf84e 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 dfc857e8a4504..d974a9ac110f7 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 c89a2776bb807..8fff7111065e0 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 a3b59aa0fb541..6b8390e7933b9 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 35cedc7697515..51dded0543d43 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 9372d502b0d8a..efe01c3d0f2cc 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 94a85ff86543e..5ec1f2fbd1b42 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 337d1d00eed31..276ac87548961 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 7ec03a3b667ba..29dc22a35daf1 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 f0016832b24d7..0a25c6e871df7 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 0000000000000..c24e04f0a67a4
--- /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 97cbc58e02f3b..749a50a94c204 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 e3ec4d2a7e5df..bc3e1f571aee5 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
index a862528c37816..00141ee08526d 100644
--- a/packages/sync/CHANGELOG.md
+++ b/packages/sync/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/sync/package.json b/packages/sync/package.json
index 5e9309d443838..27f618f334558 100644
--- a/packages/sync/package.json
+++ b/packages/sync/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/sync",
-	"version": "1.3.0",
+	"version": "1.9.0",
 	"description": "Sync Data.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/token-list/CHANGELOG.md b/packages/token-list/CHANGELOG.md
index c97123b4d1b9a..77fb52c6ddd2a 100644
--- a/packages/token-list/CHANGELOG.md
+++ b/packages/token-list/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/token-list/package.json b/packages/token-list/package.json
index 74c2703f2cf97..69c59f5ff582f 100644
--- a/packages/token-list/package.json
+++ b/packages/token-list/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/token-list",
-	"version": "3.3.0",
+	"version": "3.9.0",
 	"description": "Constructable, plain JavaScript DOMTokenList implementation, supporting non-browser runtimes.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/undo-manager/CHANGELOG.md b/packages/undo-manager/CHANGELOG.md
index f60460fbadb46..7375a328e01e9 100644
--- a/packages/undo-manager/CHANGELOG.md
+++ b/packages/undo-manager/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/undo-manager/package.json b/packages/undo-manager/package.json
index 408a29486064b..c08951947ee37 100644
--- a/packages/undo-manager/package.json
+++ b/packages/undo-manager/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/undo-manager",
-	"version": "1.3.0",
+	"version": "1.9.0",
 	"description": "A small package to manage undo/redo.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/url/CHANGELOG.md b/packages/url/CHANGELOG.md
index b8be3e4a165c5..93be01f8540a2 100644
--- a/packages/url/CHANGELOG.md
+++ b/packages/url/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/url/README.md b/packages/url/README.md
index 70e8579acc518..0e4628669d11f 100644
--- a/packages/url/README.md
+++ b/packages/url/README.md
@@ -322,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.
diff --git a/packages/url/package.json b/packages/url/package.json
index 0a811e11ec8d9..9fa2c416619cf 100644
--- a/packages/url/package.json
+++ b/packages/url/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/url",
-	"version": "4.3.0",
+	"version": "4.9.0",
 	"description": "WordPress URL utilities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/url/src/index.js b/packages/url/src/index.js
index 141e19d3fa55f..378334ba131a6 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';
diff --git a/packages/url/src/is-phone-number.js b/packages/url/src/is-phone-number.js
new file mode 100644
index 0000000000000..857b468bc5239
--- /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/test/index.js b/packages/url/src/test/index.js
index bd48105baed96..4fc3d5e2970d6 100644
--- a/packages/url/src/test/index.js
+++ b/packages/url/src/test/index.js
@@ -17,6 +17,7 @@ import {
 	hasQueryArg,
 	isEmail,
 	isURL,
+	isPhoneNumber,
 	isValidAuthority,
 	isValidFragment,
 	isValidPath,
@@ -73,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(
diff --git a/packages/viewport/CHANGELOG.md b/packages/viewport/CHANGELOG.md
index 4edb8b45b7131..c80489b94eac6 100644
--- a/packages/viewport/CHANGELOG.md
+++ b/packages/viewport/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/viewport/package.json b/packages/viewport/package.json
index f40e83f654401..cc990e6732ba8 100644
--- a/packages/viewport/package.json
+++ b/packages/viewport/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/viewport",
-	"version": "6.3.0",
+	"version": "6.9.0",
 	"description": "Viewport module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/warning/CHANGELOG.md b/packages/warning/CHANGELOG.md
index b9b7baf8ed897..dc56abe7208cb 100644
--- a/packages/warning/CHANGELOG.md
+++ b/packages/warning/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/warning/package.json b/packages/warning/package.json
index 1caf69bbf80d0..7499ced5cb962 100644
--- a/packages/warning/package.json
+++ b/packages/warning/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/warning",
-	"version": "3.3.0",
+	"version": "3.9.0",
 	"description": "Warning utility for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/widgets/CHANGELOG.md b/packages/widgets/CHANGELOG.md
index 4da550eb86f26..aaa2e56d0c625 100644
--- a/packages/widgets/CHANGELOG.md
+++ b/packages/widgets/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/widgets/package.json b/packages/widgets/package.json
index 0175fce56c12f..bf73872934da5 100644
--- a/packages/widgets/package.json
+++ b/packages/widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/widgets",
-	"version": "4.3.0",
+	"version": "4.9.0",
 	"description": "Functionality used by the widgets block editor in the Widgets screen and the Customizer.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/widgets/src/blocks/legacy-widget/edit/index.js b/packages/widgets/src/blocks/legacy-widget/edit/index.js
index f371786c106d6..c5ca43211e58e 100644
--- a/packages/widgets/src/blocks/legacy-widget/edit/index.js
+++ b/packages/widgets/src/blocks/legacy-widget/edit/index.js
@@ -11,13 +11,11 @@ import {
 	BlockControls,
 	InspectorControls,
 	BlockIcon,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
 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';
 
 /**
@@ -102,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 } );
 	}, [] );
@@ -130,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/widget-type-selector.js b/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js
index 215e2d2447c3c..432588f6aea85 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,8 +27,9 @@ export default function WidgetTypeSelector( { selectedId, onSelect } ) {
 
 	return (
 		<SelectControl
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
-			label={ __( 'Select a legacy widget to display:' ) }
+			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 78bcf533ac5e9..8c213eec86f9f 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;
diff --git a/packages/widgets/src/blocks/widget-group/editor.scss b/packages/widgets/src/blocks/widget-group/editor.scss
index f854c792eeb24..1cd179539bc1a 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/wordcount/CHANGELOG.md b/packages/wordcount/CHANGELOG.md
index 4cdc465b01b22..9eeefc104183d 100644
--- a/packages/wordcount/CHANGELOG.md
+++ b/packages/wordcount/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 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)
diff --git a/packages/wordcount/package.json b/packages/wordcount/package.json
index 012d480d97f9c..b813249f1f7d7 100644
--- a/packages/wordcount/package.json
+++ b/packages/wordcount/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/wordcount",
-	"version": "4.3.0",
+	"version": "4.9.0",
 	"description": "WordPress word count utility.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/phpunit/block-supports/background-test.php b/phpunit/block-supports/background-test.php
index 33e72e9b07010..c698f9e7c2f1c 100644
--- a/phpunit/block-supports/background-test.php
+++ b/phpunit/block-supports/background-test.php
@@ -130,8 +130,7 @@ public function data_background_block_support() {
 				),
 				'background_style'    => array(
 					'backgroundImage' => array(
-						'url'    => 'https://example.com/image.jpg',
-						'source' => 'file',
+						'url' => 'https://example.com/image.jpg',
 					),
 				),
 				'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
@@ -157,14 +156,13 @@ public function data_background_block_support() {
 				),
 				'background_style'    => array(
 					'backgroundImage'      => array(
-						'url'    => 'https://example.com/image.jpg',
-						'source' => 'file',
+						'url' => 'https://example.com/image.jpg',
 					),
 					'backgroundRepeat'     => 'no-repeat',
 					'backgroundSize'       => 'contain',
 					'backgroundAttachment' => 'fixed',
 				),
-				'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-position:center;background-repeat:no-repeat;background-size:contain;background-attachment:fixed;">Content</div>',
+				'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-position:50% 50%;background-repeat:no-repeat;background-size:contain;background-attachment:fixed;">Content</div>',
 				'wrapper'             => '<div>Content</div>',
 			),
 			'background image style is appended if a style attribute already exists' => array(
@@ -175,8 +173,7 @@ public function data_background_block_support() {
 				),
 				'background_style'    => array(
 					'backgroundImage' => array(
-						'url'    => 'https://example.com/image.jpg',
-						'source' => 'file',
+						'url' => 'https://example.com/image.jpg',
 					),
 				),
 				'expected_wrapper'    => '<div class="wp-block-test has-background" style="color: red;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
@@ -190,8 +187,7 @@ public function data_background_block_support() {
 				),
 				'background_style'    => array(
 					'backgroundImage' => array(
-						'url'    => 'https://example.com/image.jpg',
-						'source' => 'file',
+						'url' => 'https://example.com/image.jpg',
 					),
 				),
 				'expected_wrapper'    => '<div class="wp-block-test has-background" style="color: red;font-size: 15px;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
@@ -205,8 +201,7 @@ public function data_background_block_support() {
 				),
 				'background_style'    => array(
 					'backgroundImage' => array(
-						'url'    => 'https://example.com/image.jpg',
-						'source' => 'file',
+						'url' => 'https://example.com/image.jpg',
 					),
 				),
 				'expected_wrapper'    => '<div>Content</div>',
diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php
index 61aa76d591e9c..eafd505db6ec6 100644
--- a/phpunit/block-supports/typography-test.php
+++ b/phpunit/block-supports/typography-test.php
@@ -351,7 +351,11 @@ public function data_generate_font_size_preset_fixtures() {
 				'font_size'       => array(
 					'size' => null,
 				),
-				'settings'        => null,
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
 				'expected_output' => null,
 			),
 
@@ -425,8 +429,7 @@ public function data_generate_font_size_preset_fixtures() {
 
 			'returns already clamped value'              => array(
 				'font_size'       => array(
-					'size'  => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
-					'fluid' => false,
+					'size' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
 				),
 				'settings'        => array(
 					'typography' => array(
@@ -438,8 +441,7 @@ public function data_generate_font_size_preset_fixtures() {
 
 			'returns value with unsupported unit'        => array(
 				'font_size'       => array(
-					'size'  => '1000%',
-					'fluid' => false,
+					'size' => '1000%',
 				),
 				'settings'        => array(
 					'typography' => array(
@@ -769,6 +771,33 @@ public function data_generate_font_size_preset_fixtures() {
 				),
 				'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)',
+			),
 		);
 	}
 
diff --git a/phpunit/block-template-test.php b/phpunit/block-template-test.php
new file mode 100644
index 0000000000000..6589aad90b805
--- /dev/null
+++ b/phpunit/block-template-test.php
@@ -0,0 +1,37 @@
+<?php
+/**
+ * Tests block template registry via block-related functions.
+ */
+class Tests_Block_Template extends WP_UnitTestCase {
+	public function set_up() {
+		parent::set_up();
+		switch_theme( 'block-theme' );
+	}
+
+	public function test_get_block_templates_from_registry() {
+		$template_name = 'test-plugin//test-template';
+
+		wp_register_block_template( $template_name );
+
+		$templates = get_block_templates();
+
+		$this->assertArrayHasKey( $template_name, $templates );
+
+		wp_unregister_block_template( $template_name );
+	}
+
+	public function test_get_block_template_from_registry() {
+		$template_name = 'test-plugin//test-template';
+		$args          = array(
+			'title' => 'Test Template',
+		);
+
+		wp_register_block_template( $template_name, $args );
+
+		$template = get_block_template( 'block-theme//test-template' );
+
+		$this->assertEquals( 'Test Template', $template->title );
+
+		wp_unregister_block_template( $template_name );
+	}
+}
diff --git a/phpunit/blocks/block-navigation-block-hooks-test.php b/phpunit/blocks/block-navigation-block-hooks-test.php
index 3cb2e785a8e11..1d3c86bf4bca4 100644
--- a/phpunit/blocks/block-navigation-block-hooks-test.php
+++ b/phpunit/blocks/block-navigation-block-hooks-test.php
@@ -58,10 +58,6 @@ public function tear_down() {
 	 * @covers ::gutenberg_block_core_navigation_update_ignore_hooked_blocks_meta
 	 */
 	public function test_block_core_navigation_update_ignore_hooked_blocks_meta_preserves_entities() {
-		if ( ! function_exists( 'set_ignored_hooked_blocks_metadata' ) ) {
-			$this->markTestSkipped( 'Test skipped on WordPress versions that do not included required Block Hooks functionality.' );
-		}
-
 		register_block_type(
 			'tests/my-block',
 			array(
@@ -97,10 +93,6 @@ public function test_block_core_navigation_update_ignore_hooked_blocks_meta_pres
 	 * @covers ::gutenberg_block_core_navigation_update_ignore_hooked_blocks_meta
 	 */
 	public function test_block_core_navigation_dont_modify_no_post_id() {
-		if ( ! function_exists( 'set_ignored_hooked_blocks_metadata' ) ) {
-			$this->markTestSkipped( 'Test skipped on WordPress versions that do not included required Block Hooks functionality.' );
-		}
-
 		register_block_type(
 			'tests/my-block',
 			array(
@@ -127,10 +119,6 @@ public function test_block_core_navigation_dont_modify_no_post_id() {
 	 * @covers ::gutenberg_block_core_navigation_update_ignore_hooked_blocks_meta
 	 */
 	public function test_block_core_navigation_retains_content_if_not_set() {
-		if ( ! function_exists( 'set_ignored_hooked_blocks_metadata' ) ) {
-			$this->markTestSkipped( 'Test skipped on WordPress versions that do not included required Block Hooks functionality.' );
-		}
-
 		register_block_type(
 			'tests/my-block',
 			array(
diff --git a/phpunit/blocks/render-block-media-text-test.php b/phpunit/blocks/render-block-media-text-test.php
index 94c184408c89f..f5b67f0a8dc9b 100644
--- a/phpunit/blocks/render-block-media-text-test.php
+++ b/phpunit/blocks/render-block-media-text-test.php
@@ -81,15 +81,14 @@ public function test_render_block_core_media_text_featured_image() {
 		$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 the background-image url,
-		// and not the image element, when image fill is true.
+		// 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( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered );
-		$this->assertStringNotContainsString( '<img', $rendered );
+		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
 	}
 
 	/**
@@ -107,15 +106,14 @@ public function test_render_block_core_media_text_featured_image_nested() {
 		$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 the background-image url,
-		// and not the image element, when image fill is true.
+		// 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( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered );
-		$this->assertStringNotContainsString( '<img', $rendered );
+		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
 	}
 
 	/**
@@ -134,16 +132,15 @@ public function test_render_block_core_media_text_featured_image_media_on_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 the background-image url,
-		// and not the image element, when image fill is true and the media is on the right.
+		// 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( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered );
-		$this->assertStringNotContainsString( '<img', $rendered );
+		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
 	}
 
 	/**
@@ -164,8 +161,8 @@ public function test_render_block_core_media_text_featured_image_media_on_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 the background-image url,
-		// and not the image element, when image fill is true and the media is on the right.
+		// 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',
@@ -173,7 +170,6 @@ public function test_render_block_core_media_text_featured_image_media_on_right_
 		);
 
 		$rendered = gutenberg_render_block_core_media_text( $attributes, $content );
-		$this->assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered );
-		$this->assertStringNotContainsString( '<img', $rendered );
+		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
 	}
 }
diff --git a/phpunit/blocks/render-post-template-test.php b/phpunit/blocks/render-post-template-test.php
index e375758044681..e929e459654fe 100644
--- a/phpunit/blocks/render-post-template-test.php
+++ b/phpunit/blocks/render-post-template-test.php
@@ -113,24 +113,33 @@ public function test_rendering_post_template_with_main_query_loop() {
 	}
 
 	/**
-	 * Tests that the `core/post-template` block does not tamper with the main query loop when rendering within a post
+	 * 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":true}} -->';
+		$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">';
-		$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 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.
@@ -156,4 +165,55 @@ public function test_rendering_post_template_with_main_query_loop_already_starte
 
 		$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/renderBlockCorePostTitle.php b/phpunit/blocks/renderBlockCorePostTitle.php
new file mode 100644
index 0000000000000..4c080a1c905ff
--- /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 295d02978f120..36746d0566951 100644
--- a/phpunit/bootstrap.php
+++ b/phpunit/bootstrap.php
@@ -24,12 +24,6 @@
 define( 'GUTENBERG_DIR_TESTDATA', __DIR__ . '/data/' );
 define( 'GUTENBERG_DIR_TESTFIXTURES', __DIR__ . '/fixtures/' );
 
-// Pretend that these are Core unit tests. This is needed so that
-// wp_theme_has_theme_json() does not cache its return value between each test.
-if ( ! defined( 'WP_RUN_CORE_TESTS' ) ) {
-	define( 'WP_RUN_CORE_TESTS', true );
-}
-
 // Require composer dependencies.
 require_once dirname( __DIR__ ) . '/vendor/autoload.php';
 
@@ -95,6 +89,8 @@ function fail_if_died( $message ) {
 		'gutenberg-widget-experiments' => '1',
 		'gutenberg-full-site-editing'  => 1,
 		'gutenberg-form-blocks'        => 1,
+		'gutenberg-block-experiments'  => 1,
+		'gutenberg-media-processing'   => 1,
 	),
 );
 
diff --git a/phpunit/class-gutenberg-rest-global-styles-revisions-controller-test.php b/phpunit/class-gutenberg-rest-global-styles-revisions-controller-test.php
deleted file mode 100644
index 30780c50f1863..0000000000000
--- a/phpunit/class-gutenberg-rest-global-styles-revisions-controller-test.php
+++ /dev/null
@@ -1,351 +0,0 @@
-<?php
-/**
- * Unit tests covering Gutenberg_REST_Global_Styles_Revisions_Controller_6_4 functionality.
- *
- * Note: the bulk of the tests covering this class and its methods have been ported to Core as of 6.3.
- *
- * @package WordPress
- * @subpackage REST API
- */
-
-class Gutenberg_REST_Global_Styles_Revisions_Controller_Test extends WP_Test_REST_Controller_Testcase {
-	/**
-	 * @var int
-	 */
-	protected static $admin_id;
-
-	/**
-	 * @var int
-	 */
-	protected static $global_styles_id;
-
-	/**
-	 * @var int
-	 */
-	protected static $global_styles_id_2;
-
-	/**
-	 * @var array
-	 */
-	private $revision_1;
-
-	/**
-	 * @var int
-	 */
-	private $revision_1_id;
-
-	/**
-	 * 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',
-			)
-		);
-
-		wp_set_current_user( self::$admin_id );
-		// This creates the global styles for the current theme.
-		self::$global_styles_id = $factory->post->create(
-			array(
-				'post_content' => '{"version": ' . WP_Theme_JSON::LATEST_SCHEMA . ', "isGlobalStylesUserThemeJSON": true }',
-				'post_status'  => 'publish',
-				'post_title'   => __( 'Custom Styles', 'default' ),
-				'post_type'    => 'wp_global_styles',
-				'post_name'    => 'wp-global-styles-tt1-blocks-revisions',
-				'tax_input'    => array(
-					'wp_theme' => 'tt1-blocks',
-				),
-			)
-		);
-
-		// This creates another global styles post for the current theme.
-		self::$global_styles_id_2 = $factory->post->create(
-			array(
-				'post_content' => '{"version": ' . WP_Theme_JSON::LATEST_SCHEMA . ', "isGlobalStylesUserThemeJSON": true }',
-				'post_status'  => 'publish',
-				'post_title'   => __( 'Custom Styles', 'default' ),
-				'post_type'    => 'wp_global_styles',
-				'post_name'    => 'wp-global-styles-tt1-blocks-revisions-2',
-				'tax_input'    => array(
-					'wp_theme' => 'tt1-blocks',
-				),
-			)
-		);
-
-		// Update post to create a new revisions.
-		$new_styles_post = array(
-			'ID'           => self::$global_styles_id,
-			'post_content' => wp_json_encode(
-				array(
-					'version'                     => WP_Theme_JSON::LATEST_SCHEMA,
-					'isGlobalStylesUserThemeJSON' => true,
-					'styles'                      => array(
-						'color' => array(
-							'background' => 'hotpink',
-						),
-					),
-					'settings'                    => array(
-						'color' => array(
-							'palette' => array(
-								'custom' => array(
-									array(
-										'name'  => 'Ghost',
-										'slug'  => 'ghost',
-										'color' => 'ghost',
-									),
-								),
-							),
-						),
-					),
-				)
-			),
-		);
-
-		wp_update_post( $new_styles_post, true, true );
-
-		$new_styles_post = array(
-			'ID'           => self::$global_styles_id,
-			'post_content' => wp_json_encode(
-				array(
-					'version'                     => WP_Theme_JSON::LATEST_SCHEMA,
-					'isGlobalStylesUserThemeJSON' => true,
-					'styles'                      => array(
-						'color' => array(
-							'background' => 'lemonchiffon',
-						),
-					),
-					'settings'                    => array(
-						'color' => array(
-							'palette' => array(
-								'custom' => array(
-									array(
-										'name'  => 'Gwanda',
-										'slug'  => 'gwanda',
-										'color' => 'gwanda',
-									),
-								),
-							),
-						),
-					),
-				)
-			),
-		);
-
-		wp_update_post( $new_styles_post, true, true );
-
-		$new_styles_post = array(
-			'ID'           => self::$global_styles_id,
-			'post_content' => wp_json_encode(
-				array(
-					'version'                     => WP_Theme_JSON::LATEST_SCHEMA,
-					'isGlobalStylesUserThemeJSON' => true,
-					'styles'                      => array(
-						'color' => array(
-							'background' => 'chocolate',
-						),
-					),
-					'settings'                    => array(
-						'color' => array(
-							'palette' => array(
-								'custom' => array(
-									array(
-										'name'  => 'Stacy',
-										'slug'  => 'stacy',
-										'color' => 'stacy',
-									),
-								),
-							),
-						),
-					),
-				)
-			),
-		);
-
-		wp_update_post( $new_styles_post, true, true );
-		wp_set_current_user( 0 );
-	}
-
-	/**
-	 * Removes users after our tests run.
-	 */
-	public static function wpTearDownAfterClass() {
-		self::delete_user( self::$admin_id );
-	}
-
-	/**
-	 * Sets up before tests.
-	 */
-	public function set_up() {
-		parent::set_up();
-		switch_theme( 'emptytheme' );
-		$revisions           = wp_get_post_revisions( self::$global_styles_id );
-		$this->revision_1    = array_pop( $revisions );
-		$this->revision_1_id = $this->revision_1->ID;
-
-		/*
-		 * For some reason the `rest_api_init` doesn't run early enough to ensure an overwritten `get_item_schema()`
-		 * is used. So we manually call it here.
-		 * See: https://github.com/WordPress/gutenberg/pull/52370#issuecomment-1643331655.
-		 */
-		$global_styles_revisions_controller = new Gutenberg_REST_Global_Styles_Revisions_Controller_6_5();
-		$global_styles_revisions_controller->register_routes();
-	}
-
-	/**
-	 * @ticket 58524
-	 *
-	 * @covers WP_REST_Global_Styles_Controller::register_routes
-	 */
-	public function test_register_routes() {
-		$routes = rest_get_server()->get_routes();
-		$this->assertArrayHasKey(
-			'/wp/v2/global-styles/(?P<parent>[\d]+)/revisions/(?P<id>[\d]+)',
-			$routes,
-			'Single global style revisions based on the given parentID and revision ID route does not exist.'
-		);
-	}
-
-	/**
-	 * @ticket 59810
-	 *
-	 * @covers WP_REST_Global_Styles_Controller::get_items
-	 */
-	public function test_get_item_valid_parent_id() {
-		wp_set_current_user( self::$admin_id );
-		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/' . self::$global_styles_id . '/revisions/' . $this->revision_1_id );
-		$response = rest_get_server()->dispatch( $request );
-		$data     = $response->get_data();
-
-		$this->assertSame( self::$global_styles_id, $data['parent'], "The returned revision's id should match the parent id." );
-		$this->check_get_revision_response( $data, $this->revision_1 );
-	}
-
-	/**
-	 * @ticket 59810
-	 *
-	 * @covers WP_REST_Global_Styles_Controller::get_items
-	 */
-	public function test_get_item_invalid_parent_id() {
-		wp_set_current_user( self::$admin_id );
-		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/' . self::$global_styles_id_2 . '/revisions/' . $this->revision_1_id );
-		$response = rest_get_server()->dispatch( $request );
-		$this->assertErrorResponse( 'rest_revision_parent_id_mismatch', $response, 404 );
-
-		$expected_message = 'The revision does not belong to the specified parent with id of "' . self::$global_styles_id_2 . '"';
-		$this->assertSame( $expected_message, $response->as_error()->get_error_messages()[0], 'The message must contain the correct parent ID.' );
-	}
-
-	/**
-	 * Utility function to check the items in WP_REST_Global_Styles_Controller::get_items
-	 * against the expected values.
-	 *
-	 * @ticket 58524
-	 */
-	protected function check_get_revision_response( $response_revision_item, $revision_expected_item ) {
-		$this->assertSame( (int) $revision_expected_item->post_author, $response_revision_item['author'], 'Check that the revision item `author` exists.' );
-		$this->assertSame( mysql_to_rfc3339( $revision_expected_item->post_date ), $response_revision_item['date'], 'Check that the revision item `date` exists.' );
-		$this->assertSame( mysql_to_rfc3339( $revision_expected_item->post_date_gmt ), $response_revision_item['date_gmt'], 'Check that the revision item `date_gmt` exists.' );
-		$this->assertSame( mysql_to_rfc3339( $revision_expected_item->post_modified ), $response_revision_item['modified'], 'Check that the revision item `modified` exists.' );
-		$this->assertSame( mysql_to_rfc3339( $revision_expected_item->post_modified_gmt ), $response_revision_item['modified_gmt'], 'Check that the revision item `modified_gmt` exists.' );
-		$this->assertSame( $revision_expected_item->post_parent, $response_revision_item['parent'], 'Check that an id for the parent exists.' );
-
-		// Global styles.
-		$config = ( new WP_Theme_JSON_Gutenberg( json_decode( $revision_expected_item->post_content, true ), 'custom' ) )->get_raw_data();
-		$this->assertEquals(
-			$config['settings'],
-			$response_revision_item['settings'],
-			'Check that the revision settings exist in the response.'
-		);
-		$this->assertEquals(
-			$config['styles'],
-			$response_revision_item['styles'],
-			'Check that the revision styles match the updated styles.'
-		);
-	}
-
-	/**
-	 * @ticket 59810
-	 *
-	 * @covers Gutenberg_REST_Global_Styles_Revisions_Controller_6_4::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 . '/revisions/' . $this->revision_1_id );
-		$response = rest_get_server()->dispatch( $request );
-		$data     = $response->get_data();
-
-		$this->assertSame( 200, $response->get_status(), 'Response status is 200.' );
-		$this->check_get_revision_response( $data, $this->revision_1 );
-	}
-
-	/**
-	 * @ticket 59810
-	 *
-	 * @covers Gutenberg_REST_Global_Styles_Revisions_Controller_6_4::get_revision
-	 */
-	public function test_get_item_invalid_revision_id_should_error() {
-		wp_set_current_user( self::$admin_id );
-
-		$expected_error  = 'rest_post_invalid_id';
-		$expected_status = 404;
-		$request         = new WP_REST_Request( 'GET', '/wp/v2/global-styles/' . self::$global_styles_id . '/revisions/20000001' );
-		$response        = rest_get_server()->dispatch( $request );
-
-		$this->assertErrorResponse( $expected_error, $response, $expected_status );
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_get_items() {
-		// Unit tests have been more to WordPress Core for test_get_items().
-		// No unique compat unit tests exist.
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_get_item_schema() {
-		// Unit tests have been more to WordPress Core for test_get_item_schema().
-		// No unique compat unit tests exist.
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_context_param() {
-		// Controller does not implement test_context_param().
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_create_item() {
-		// Controller does not implement create_item().
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_delete_item() {
-		// Controller does not implement delete_item().
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_prepare_item() {
-		// Controller does not implement prepare_item().
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_update_item() {
-		// Controller does not implement update_item().
-	}
-}
diff --git a/phpunit/class-gutenberg-rest-server-test.php b/phpunit/class-gutenberg-rest-server-test.php
new file mode 100644
index 0000000000000..943d5b34b999e
--- /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
new file mode 100644
index 0000000000000..14735246c6fb2
--- /dev/null
+++ b/phpunit/class-gutenberg-rest-templates-controller-test.php
@@ -0,0 +1,119 @@
+<?php
+/**
+ * Unit tests covering Gutenberg_REST_Templates_Controller_6_7 functionality.
+ */
+class Gutenberg_REST_Templates_Controller_6_7_Test extends WP_Test_REST_Controller_Testcase {
+
+	/**
+	 * @var int
+	 */
+	protected static $admin_id;
+
+	public static function wpSetupBeforeClass( $factory ) {
+		self::$admin_id = $factory->user->create(
+			array(
+				'role' => 'administrator',
+			)
+		);
+	}
+
+	public static function wpTearDownAfterClass() {
+		self::delete_user( self::$admin_id );
+	}
+
+	public function test_get_item() {
+		wp_set_current_user( self::$admin_id );
+
+		$template_name = 'test-plugin//test-template';
+		$args          = array(
+			'content'     => 'Template content',
+			'title'       => 'Test Template',
+			'description' => 'Description of test template',
+			'post_types'  => array( 'post', 'page' ),
+		);
+
+		wp_register_block_template( $template_name, $args );
+
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/templates/test-plugin//test-template' );
+		$response = rest_get_server()->dispatch( $request );
+
+		$this->assertNotWPError( $response, "Fetching a registered template shouldn't cause an error." );
+
+		$data = $response->get_data();
+
+		$this->assertSame( 'default//test-template', $data['id'], 'Template ID mismatch.' );
+		$this->assertSame( 'default', $data['theme'], 'Template theme mismatch.' );
+		$this->assertSame( 'Template content', $data['content']['raw'], 'Template content mismatch.' );
+		$this->assertSame( 'test-template', $data['slug'], 'Template slug mismatch.' );
+		$this->assertSame( 'plugin', $data['source'], "Template source should be 'plugin'." );
+		$this->assertSame( 'plugin', $data['origin'], "Template origin should be 'plugin'." );
+		$this->assertSame( 'test-plugin', $data['author_text'], 'Template author text mismatch.' );
+		$this->assertSame( 'Description of test template', $data['description'], 'Template description mismatch.' );
+		$this->assertSame( 'Test Template', $data['title']['rendered'], 'Template title mismatch.' );
+		$this->assertSame( 'test-plugin', $data['plugin'], 'Plugin name mismatch.' );
+
+		wp_unregister_block_template( $template_name );
+
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/templates/test-plugin//test-template' );
+		$response = rest_get_server()->dispatch( $request );
+
+		$this->assertNotWPError( $response, "Fetching an unregistered template shouldn't cause an error." );
+		$this->assertSame( 404, $response->get_status(), 'Fetching an unregistered template should return 404.' );
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_register_routes() {
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_get_items() {
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_create_item() {
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_update_item() {
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_delete_item() {
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_context_param() {
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_prepare_item() {
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_get_item_schema() {
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
+	}
+}
diff --git a/phpunit/class-test-plugin-version-meta-test.php b/phpunit/class-test-plugin-version-meta-test.php
new file mode 100644
index 0000000000000..f0dadf873166f
--- /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 0000000000000..fb8436eb6153d
--- /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-rest-global-styles-controller-gutenberg-test.php b/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php
index 3fd0bb21ce562..c9453f4bd8e5c 100644
--- a/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php
+++ b/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php
@@ -12,11 +12,21 @@ class WP_REST_Global_Styles_Controller_Gutenberg_Test extends WP_Test_REST_Contr
 	 */
 	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
 	 */
@@ -44,12 +54,30 @@ public static function wpSetupBeforeClass( $factory ) {
 			)
 		);
 
+		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(
@@ -72,13 +100,19 @@ public static function wpSetupBeforeClass( $factory ) {
 	 */
 	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-]+)',
@@ -86,7 +120,7 @@ public function test_register_routes() {
 			'Single global style based on the given ID route does not exist'
 		);
 		$this->assertCount(
-			4, // Double core because both sets get registered in the plugin.
+			2,
 			$routes['/wp/v2/global-styles/(?P<id>[\/\w-]+)'],
 			'Single global style based on the given ID route does not have exactly two elements'
 		);
@@ -96,7 +130,7 @@ public function test_register_routes() {
 			'Theme global styles route does not exist'
 		);
 		$this->assertCount(
-			2, // Double core because both sets get registered in the plugin.
+			1,
 			$routes['/wp/v2/global-styles/themes/(?P<stylesheet>[^\/:<>\*\?"\|]+(?:\/[^\/:<>\*\?"\|]+)?)'],
 			'Theme global styles route does not have exactly one element'
 		);
@@ -191,17 +225,50 @@ 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_manage_global_styles', $response, 401 );
+		$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_permission_check() {
+	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_manage_global_styles', $response, 403 );
+		$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' );
 	}
 
 	/**
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index 2f76ec7a5d473..10bb47b87fba8 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -46,6 +46,52 @@ public static function set_up_before_class() {
 		static::$user_id = self::factory()->user->create();
 	}
 
+	/**
+	 * 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 string $css A string of raw css with no line breaks.
+	 * @return string The css with line breaks.
+	 */
+	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;
+	}
+
+	/**
+	 * 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.
+	 *
+	 * 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.
+	 */
+	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(
@@ -556,10 +602,10 @@ public function test_get_stylesheet() {
 		$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->assertSame( $variables, $theme_json->get_stylesheet( array( 'variables' ) ) );
-		$this->assertSame( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
-		$this->assertSame( $presets, $theme_json->get_stylesheet( array( 'presets' ) ) );
-		$this->assertSame( $all, $theme_json->get_stylesheet() );
+		$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_styles_for_block_support_for_shorthand_and_longhand_values() {
@@ -618,8 +664,8 @@ public function test_get_styles_for_block_support_for_shorthand_and_longhand_val
 
 		$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->assertSame( $group_styles, $theme_json->get_styles_for_block( $group_node ) );
-		$this->assertSame( $image_styles, $theme_json->get_styles_for_block( $image_node ) );
+		$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_skips_disabled_protected_properties() {
@@ -647,8 +693,8 @@ public function test_get_stylesheet_skips_disabled_protected_properties() {
 		);
 
 		$expected = static::$base_styles . ':where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}';
-		$this->assertSame( $expected, $theme_json->get_stylesheet() );
-		$this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet() );
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
 	}
 
 	public function test_get_stylesheet_renders_enabled_protected_properties() {
@@ -668,9 +714,9 @@ public function test_get_stylesheet_renders_enabled_protected_properties() {
 			)
 		);
 
-		$expected = ':where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1em; }.is-layout-flow  > :first-child{margin-block-start: 0;}.is-layout-flow  > :last-child{margin-block-end: 0;}.is-layout-flow  > *{margin-block-start: 1em;margin-block-end: 0;}.is-layout-constrained  > :first-child{margin-block-start: 0;}.is-layout-constrained  > :last-child{margin-block-end: 0;}.is-layout-constrained  > *{margin-block-start: 1em;margin-block-end: 0;}.is-layout-flex {gap: 1em;}.is-layout-grid {gap: 1em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}';
-		$this->assertSame( $expected, $theme_json->get_stylesheet() );
-		$this->assertSame( $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_preset_classes_work_with_compounded_selectors() {
@@ -694,7 +740,7 @@ public function test_get_stylesheet_preset_classes_work_with_compounded_selector
 			)
 		);
 
-		$this->assertSame(
+		$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' ) )
 		);
@@ -736,10 +782,10 @@ public function test_get_stylesheet_preset_rules_come_after_block_rules() {
 
 		$all = $variables . $styles . $presets;
 
-		$this->assertSame( $all, $theme_json->get_stylesheet( array( 'styles', 'presets', 'variables' ), null, array( 'skip_root_layout_styles' => true ) ) );
-		$this->assertSame( $styles, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
-		$this->assertSame( $presets, $theme_json->get_stylesheet( array( 'presets' ) ) );
-		$this->assertSame( $variables, $theme_json->get_stylesheet( array( 'variables' ) ) );
+		$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' ) ) );
 	}
 
 	public function test_get_stylesheet_generates_proper_classes_and_css_vars_from_slugs() {
@@ -774,11 +820,11 @@ public function test_get_stylesheet_generates_proper_classes_and_css_vars_from_s
 			)
 		);
 
-		$this->assertSame(
+		$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->assertSame(
+		$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' ) )
 		);
@@ -834,9 +880,9 @@ public function test_get_styles_for_block_handles_whitelisted_element_pseudo_sel
 		$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->assertSame( $link_style, $theme_json->get_styles_for_block( $link_node ) );
-		$this->assertSame( $hover_style, $theme_json->get_styles_for_block( $hover_node ) );
-		$this->assertSame( $focus_style, $theme_json->get_styles_for_block( $focus_node ) );
+		$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 ) );
 	}
 
 	/**
@@ -872,8 +918,7 @@ public function test_get_stylesheet_handles_only_pseudo_selector_rules_for_given
 		);
 
 		$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->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
 	}
 
 	public function test_get_stylesheet_ignores_pseudo_selectors_on_non_whitelisted_elements() {
@@ -906,8 +951,7 @@ public function test_get_stylesheet_ignores_pseudo_selectors_on_non_whitelisted_
 		);
 
 		$expected = 'h4{background-color: red;color: green;}';
-
-		$this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
 	}
 
 	public function test_get_stylesheet_ignores_non_whitelisted_pseudo_selectors() {
@@ -940,8 +984,7 @@ public function test_get_stylesheet_ignores_non_whitelisted_pseudo_selectors() {
 		);
 
 		$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->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+		$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' ) ) );
 	}
 
@@ -987,8 +1030,7 @@ public function test_get_stylesheet_handles_priority_of_elements_vs_block_elemen
 		);
 
 		$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->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
 	}
 
 	/**
@@ -1032,8 +1074,7 @@ public function test_get_stylesheet_with_deprecated_feature_level_selectors() {
 		$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->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles', 'presets', 'variables' ), null, array( 'skip_root_layout_styles' => true ) ) );
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles', 'presets', 'variables' ), null, array( 'skip_root_layout_styles' => true ) ) );
 	}
 
 
@@ -1063,8 +1104,7 @@ public function test_get_stylesheet_with_block_json_selectors() {
 		);
 
 		$expected = ':root :where(.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder){border-radius: 374px;}';
-
-		$this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles', 'presets', 'variables' ), null, array( 'skip_root_layout_styles' => true ) ) );
+		$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() {
@@ -1090,8 +1130,8 @@ public function test_get_stylesheet_generates_layout_styles() {
 		);
 
 		// Results also include root site blocks styles.
-		$this->assertSame(
-			':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1em; }.is-layout-flow  > :first-child{margin-block-start: 0;}.is-layout-flow  > :last-child{margin-block-end: 0;}.is-layout-flow  > *{margin-block-start: 1em;margin-block-end: 0;}.is-layout-constrained  > :first-child{margin-block-start: 0;}.is-layout-constrained  > :last-child{margin-block-end: 0;}.is-layout-constrained  > *{margin-block-start: 1em;margin-block-end: 0;}.is-layout-flex {gap: 1em;}.is-layout-grid {gap: 1em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}',
+		$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' ) )
 		);
 	}
@@ -1119,8 +1159,8 @@ public function test_get_stylesheet_generates_layout_styles_with_spacing_presets
 		);
 
 		// Results also include root site blocks styles.
-		$this->assertSame(
-			':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: var(--wp--preset--spacing--60); margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: var(--wp--preset--spacing--60); }.is-layout-flow  > :first-child{margin-block-start: 0;}.is-layout-flow  > :last-child{margin-block-end: 0;}.is-layout-flow  > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}.is-layout-constrained  > :first-child{margin-block-start: 0;}.is-layout-constrained  > :last-child{margin-block-end: 0;}.is-layout-constrained  > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}.is-layout-flex {gap: var(--wp--preset--spacing--60);}.is-layout-grid {gap: var(--wp--preset--spacing--60);}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}',
+		$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' ) )
 		);
 	}
@@ -1149,7 +1189,7 @@ public function test_get_stylesheet_generates_fallback_gap_layout_styles() {
 		$stylesheet = $theme_json->get_stylesheet( array( 'styles' ) );
 
 		// Results also include root site blocks styles.
-		$this->assertSame(
+		$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
 		);
@@ -1170,7 +1210,7 @@ public function test_get_stylesheet_generates_base_fallback_gap_layout_styles()
 		$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->assertSame(
+		$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
 		);
@@ -1193,7 +1233,7 @@ public function test_get_stylesheet_skips_layout_styles() {
 		remove_theme_support( 'disable-layout-styles' );
 
 		// All Layout styles should be skipped.
-		$this->assertSame(
+		$this->assertSameCSS(
 			'',
 			$stylesheet
 		);
@@ -1243,9 +1283,8 @@ public function test_get_stylesheet_generates_valid_block_gap_values_and_skips_n
 			'default'
 		);
 
-		$this->assertSame(
-			':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1rem; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1rem; }.is-layout-flow  > :first-child{margin-block-start: 0;}.is-layout-flow  > :last-child{margin-block-end: 0;}.is-layout-flow  > *{margin-block-start: 1rem;margin-block-end: 0;}.is-layout-constrained  > :first-child{margin-block-start: 0;}.is-layout-constrained  > :last-child{margin-block-end: 0;}.is-layout-constrained  > *{margin-block-start: 1rem;margin-block-end: 0;}.is-layout-flex {gap: 1rem;}.is-layout-grid {gap: 1rem;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}' .
-			':root :where(.wp-block-post-content){color: gray;}.wp-block-social-links-is-layout-flow  > :first-child{margin-block-start: 0;}.wp-block-social-links-is-layout-flow  > :last-child{margin-block-end: 0;}.wp-block-social-links-is-layout-flow  > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-constrained  > :first-child{margin-block-start: 0;}.wp-block-social-links-is-layout-constrained  > :last-child{margin-block-end: 0;}.wp-block-social-links-is-layout-constrained  > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-flex {gap: 0;}.wp-block-social-links-is-layout-grid {gap: 0;}.wp-block-buttons-is-layout-flow  > :first-child{margin-block-start: 0;}.wp-block-buttons-is-layout-flow  > :last-child{margin-block-end: 0;}.wp-block-buttons-is-layout-flow  > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-constrained  > :first-child{margin-block-start: 0;}.wp-block-buttons-is-layout-constrained  > :last-child{margin-block-end: 0;}.wp-block-buttons-is-layout-constrained  > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-flex {gap: 0;}.wp-block-buttons-is-layout-grid {gap: 0;}',
+		$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()
 		);
 	}
@@ -1279,7 +1318,7 @@ public function test_get_stylesheet_returns_outline_styles() {
 
 		$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->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
 	}
 
 	public function test_get_stylesheet_custom_root_selector() {
@@ -1302,7 +1341,7 @@ public function test_get_stylesheet_custom_root_selector() {
 		);
 		$actual  = $theme_json->get_stylesheet( array( 'styles' ), null, $options );
 
-		$this->assertSame(
+		$this->assertSameCSS(
 			':root :where(.custom){color: teal;}',
 			$actual
 		);
@@ -1360,7 +1399,7 @@ public function test_get_stylesheet_generates_fluid_typography_values() {
 
 		unregister_block_type( 'test/clamp-me' );
 
-		$this->assertSame(
+		$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 ) )
 		);
@@ -2255,6 +2294,112 @@ public function test_merge_incoming_data_presets_use_default_names() {
 		$this->assertSameSetsWithIndex( $expected, $actual );
 	}
 
+	public function test_merge_incoming_background_styles() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'background' => array(
+						'backgroundImage' => array(
+							'url' => 'http://example.org/quote.png',
+						),
+						'backgroundSize'  => 'cover',
+					),
+					'blocks'     => array(
+						'core/group' => array(
+							'background' => array(
+								'backgroundImage'      => array(
+									'ref' => 'styles.blocks.core/verse.background.backgroundImage',
+								),
+								'backgroundAttachment' => 'fixed',
+							),
+						),
+						'core/quote' => array(
+							'background' => array(
+								'backgroundImage'      => array(
+									'url' => 'http://example.org/quote.png',
+								),
+								'backgroundAttachment' => array(
+									'ref' => 'styles.blocks.core/group.background.backgroundAttachment',
+								),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$update_background_image_styles = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'background' => array(
+					'backgroundSize' => 'contain',
+				),
+				'blocks'     => array(
+					'core/group' => array(
+						'background' => array(
+							'backgroundImage' => array(
+								'url' => 'http://example.org/group.png',
+							),
+						),
+					),
+					'core/quote' => array(
+						'background' => array(
+							'backgroundAttachment' => 'fixed',
+						),
+					),
+					'core/verse' => array(
+						'background' => array(
+							'backgroundImage' => array(
+								'ref' => 'styles.blocks.core/group.background.backgroundImage',
+							),
+						),
+					),
+				),
+			),
+		);
+		$expected                       = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'background' => array(
+					'backgroundImage' => array(
+						'url' => 'http://example.org/quote.png',
+					),
+					'backgroundSize'  => 'contain',
+				),
+				'blocks'     => array(
+					'core/group' => array(
+						'background' => array(
+							'backgroundImage'      => array(
+								'url' => 'http://example.org/group.png',
+							),
+							'backgroundAttachment' => 'fixed',
+						),
+					),
+					'core/quote' => array(
+						'background' => array(
+							'backgroundImage'      => array(
+								'url' => 'http://example.org/quote.png',
+							),
+							'backgroundAttachment' => 'fixed',
+						),
+					),
+					'core/verse' => array(
+						'background' => array(
+							'backgroundImage' => array(
+								'ref' => 'styles.blocks.core/group.background.backgroundImage',
+							),
+						),
+					),
+				),
+			),
+		);
+		$theme_json->merge( new WP_Theme_JSON_Gutenberg( $update_background_image_styles ) );
+		$actual = $theme_json->get_raw_data();
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
 	public function test_remove_insecure_properties_removes_unsafe_styles() {
 		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties(
 			array(
@@ -3419,7 +3564,7 @@ public function test_get_property_value_valid() {
 		);
 
 		$expected = 'body{background-color: #ffffff;color: #000000;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #000000;color: #ffffff;}';
-		$this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
 	}
 
 	/**
@@ -3496,7 +3641,7 @@ public function test_get_property_value_loop() {
 		);
 
 		$expected = 'body{background-color: #ffffff;}:root :where(.wp-element-button, .wp-block-button__link){color: #ffffff;}';
-		$this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
 	}
 
 	/**
@@ -3528,7 +3673,7 @@ public function test_get_property_value_recursion() {
 		);
 
 		$expected = 'body{background-color: #ffffff;color: #ffffff;}:root :where(.wp-element-button, .wp-block-button__link){color: #ffffff;}';
-		$this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
 	}
 
 	/**
@@ -3551,7 +3696,7 @@ public function test_get_property_value_self() {
 		);
 
 		$expected = 'body{background-color: #ffffff;}';
-		$this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+		$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() {
@@ -3582,7 +3727,7 @@ public function test_get_styles_for_block_with_padding_aware_alignments() {
 		$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->assertSame( $expected, $root_rules . $style_rules );
+		$this->assertSameCSS( $expected, $root_rules . $style_rules );
 	}
 
 	public function test_get_styles_for_block_without_padding_aware_alignments() {
@@ -3610,7 +3755,7 @@ public function test_get_styles_for_block_without_padding_aware_alignments() {
 		$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->assertSame( $expected, $root_rules . $style_rules );
+		$this->assertSameCSS( $expected, $root_rules . $style_rules );
 	}
 
 	public function test_get_styles_with_content_width() {
@@ -3632,7 +3777,7 @@ public function test_get_styles_with_content_width() {
 		);
 
 		$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->assertSame( $expected, $theme_json->get_root_layout_rules( WP_Theme_JSON::ROOT_BLOCK_SELECTOR, $metadata ) );
+		$this->assertSameCSS( $expected, $theme_json->get_root_layout_rules( WP_Theme_JSON::ROOT_BLOCK_SELECTOR, $metadata ) );
 	}
 
 	public function test_get_styles_with_appearance_tools() {
@@ -3650,8 +3795,8 @@ public function test_get_styles_with_appearance_tools() {
 			'selector' => 'body',
 		);
 
-		$expected = ':where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: ; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: ; }.is-layout-flow  > :first-child{margin-block-start: 0;}.is-layout-flow  > :last-child{margin-block-end: 0;}.is-layout-flow  > *{margin-block-start: 1;margin-block-end: 0;}.is-layout-constrained  > :first-child{margin-block-start: 0;}.is-layout-constrained  > :last-child{margin-block-end: 0;}.is-layout-constrained  > *{margin-block-start: 1;margin-block-end: 0;}.is-layout-flex {gap: 1;}.is-layout-grid {gap: 1;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}';
-		$this->assertSame( $expected, $theme_json->get_root_layout_rules( WP_Theme_JSON_Gutenberg::ROOT_BLOCK_SELECTOR, $metadata ) );
+		$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() {
@@ -4717,8 +4862,8 @@ public function test_shadow_preset_styles() {
 		);
 
 		$expected_styles = ':root{--wp--preset--shadow--natural: 5px 5px 5px 0 black;--wp--preset--shadow--sharp: 5px 5px black;}';
-		$this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" does not match expectations' );
-		$this->assertSame( $expected_styles, $theme_json->get_stylesheet( array( 'variables' ) ), 'Styles returned from "::get_stylesheet()" when requiring "variables" type does not match expectations' );
+		$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() {
@@ -4756,7 +4901,7 @@ public function test_get_shadow_styles_for_blocks() {
 		$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->assertSame( $expected_styles, $theme_json->get_stylesheet( array( 'styles', 'presets', 'variables' ), null, array( 'skip_root_layout_styles' => true ) ) );
+		$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() {
@@ -4768,7 +4913,6 @@ public function test_get_top_level_background_image_styles() {
 						'backgroundImage'      => array(
 							'url' => 'http://example.org/image.png',
 						),
-						'backgroundSize'       => 'contain',
 						'backgroundRepeat'     => 'no-repeat',
 						'backgroundPosition'   => 'center center',
 						'backgroundAttachment' => 'fixed',
@@ -4782,8 +4926,8 @@ public function test_get_top_level_background_image_styles() {
 			'selector' => 'body',
 		);
 
-		$expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;background-attachment: fixed;}";
-		$this->assertSame( $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' );
+		$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(
@@ -4801,7 +4945,7 @@ public function test_get_top_level_background_image_styles() {
 		);
 
 		$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->assertSame( $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' );
+		$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() {
@@ -4813,7 +4957,6 @@ public function test_get_block_background_image_styles() {
 						'core/group' => array(
 							'background' => array(
 								'backgroundImage'      => "url('http://example.org/group.png')",
-								'backgroundSize'       => 'cover',
 								'backgroundRepeat'     => 'no-repeat',
 								'backgroundPosition'   => 'center center',
 								'backgroundAttachment' => 'fixed',
@@ -4821,12 +4964,19 @@ public function test_get_block_background_image_styles() {
 						),
 						'core/quote' => array(
 							'background' => array(
-								'backgroundImage'    => array(
+								'backgroundImage' => array(
 									'url' => 'http://example.org/quote.png',
+									'id'  => 321,
+								),
+								'backgroundSize'  => 'contain',
+							),
+						),
+						'core/verse' => array(
+							'background' => array(
+								'backgroundImage' => array(
+									'url' => 'http://example.org/verse.png',
+									'id'  => 123,
 								),
-								'backgroundSize'     => 'cover',
-								'backgroundRepeat'   => 'no-repeat',
-								'backgroundPosition' => 'center center',
 							),
 						),
 					),
@@ -4834,6 +4984,18 @@ public function test_get_block_background_image_styles() {
 			)
 		);
 
+		$group_node = array(
+			'name'      => 'core/group',
+			'path'      => array( 'styles', 'blocks', 'core/group' ),
+			'selector'  => '.wp-block-group',
+			'selectors' => array(
+				'root' => '.wp-block-group',
+			),
+		);
+
+		$group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-attachment: fixed;}";
+		$this->assertSameCSS( $group_styles, $theme_json->get_styles_for_block( $group_node ), 'Styles returned from "::get_styles_for_block()" with core/group background styles as string type do not match expectations' );
+
 		$quote_node = array(
 			'name'      => 'core/quote',
 			'path'      => array( 'styles', 'blocks', 'core/quote' ),
@@ -4843,20 +5005,74 @@ public function test_get_block_background_image_styles() {
 			),
 		);
 
-		$quote_styles = ":root :where(.wp-block-quote){background-image: url('http://example.org/quote.png');background-position: center center;background-repeat: no-repeat;background-size: cover;}";
-		$this->assertSame( $quote_styles, $theme_json->get_styles_for_block( $quote_node ), 'Styles returned from "::get_styles_for_block()" with block-level background styles do not match expectations' );
+		$quote_styles = ":root :where(.wp-block-quote){background-image: url('http://example.org/quote.png');background-position: 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' );
 
-		$group_node = array(
-			'name'      => 'core/group',
-			'path'      => array( 'styles', 'blocks', 'core/group' ),
-			'selector'  => '.wp-block-group',
+		$verse_node = array(
+			'name'      => 'core/verse',
+			'path'      => array( 'styles', 'blocks', 'core/verse' ),
+			'selector'  => '.wp-block-verse',
 			'selectors' => array(
-				'root' => '.wp-block-group',
+				'root' => '.wp-block-verse',
 			),
 		);
 
-		$group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}";
-		$this->assertSame( $group_styles, $theme_json->get_styles_for_block( $group_node ), 'Styles returned from "::get_styles_for_block()" with block-level background styles as string type do not match expectations' );
+		$verse_styles = ":root :where(.wp-block-verse){background-image: url('http://example.org/verse.png');background-size: cover;}";
+		$this->assertSameCSS( $verse_styles, $theme_json->get_styles_for_block( $verse_node ), 'Styles returned from "::get_styles_for_block()" with default core/verse background styles as string type do not match expectations' );
+	}
+
+	/**
+	 * 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 ) ) );
 	}
 
 	/**
@@ -5004,6 +5220,13 @@ public function test_process_blocks_custom_css( $input, $expected ) {
 	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',
@@ -5011,6 +5234,13 @@ public function data_process_blocks_custom_css() {
 				),
 				'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(
@@ -5025,7 +5255,7 @@ public function data_process_blocks_custom_css() {
 					'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;}',
+				'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(
@@ -5033,7 +5263,7 @@ public function data_process_blocks_custom_css() {
 					'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::before, .bar::before){color: yellow;}:root :where(.foo ::before, .bar ::before){color: purple;}:root :where(.foo.three::before, .bar.three::before){color: orange;}:root :where(.foo .four::before, .bar .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;}',
 			),
 		);
 	}
diff --git a/phpunit/experimental/block-editor-settings-mobile-test.php b/phpunit/experimental/block-editor-settings-mobile-test.php
index 907b750d8c863..967efebc346fc 100644
--- a/phpunit/experimental/block-editor-settings-mobile-test.php
+++ b/phpunit/experimental/block-editor-settings-mobile-test.php
@@ -10,11 +10,6 @@
  *
  * @covers WP_REST_Block_Editor_Settings_Controller
  */
-
-if ( ! defined( 'REST_REQUEST' ) ) {
-	define( 'REST_REQUEST', true );
-}
-
 class Gutenberg_REST_Block_Editor_Settings_Controller_Test extends WP_Test_REST_Controller_Testcase {
 	/**
 	 * @var int
@@ -56,10 +51,9 @@ public function test_register_routes() {
 	public function test_get_items() {
 		wp_set_current_user( self::$admin_id );
 		$request = new WP_REST_Request( 'GET', '/wp-block-editor/v1/settings' );
-		// Set context for mobile settings.
-		$_GET['context'] = 'mobile';
-		$response        = rest_get_server()->dispatch( $request );
-		$data            = $response->get_data();
+		$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' );
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 0000000000000..56286f76ace83
--- /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 0000000000000..2717d2582879f
--- /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/tests/fonts/font-library/fontFamilyBackwardsCompatibility.php b/phpunit/tests/fonts/font-library/fontFamilyBackwardsCompatibility.php
deleted file mode 100644
index dc720b6b7db70..0000000000000
--- a/phpunit/tests/fonts/font-library/fontFamilyBackwardsCompatibility.php
+++ /dev/null
@@ -1,196 +0,0 @@
-<?php
-// @core-merge: Do not include these tests, they are for Gutenberg only.
-
-/**
- * Test deleting converting legacy font family posts into font family and font faces.
- *
- * @package WordPress
- * @subpackage Font Library
- *
- * @group fonts
- * @group font-library
- */
-class Tests_Font_Family_Backwards_Compatibility extends WP_UnitTestCase {
-	private $post_ids_to_delete;
-
-	public function set_up() {
-		parent::set_up();
-
-		$this->post_ids_to_delete = array();
-		delete_option( 'gutenberg_font_family_format_converted' );
-	}
-
-	public function tear_down() {
-		foreach ( $this->post_ids_to_delete as $post_id ) {
-			wp_delete_post( $post_id, true );
-		}
-
-		delete_option( 'gutenberg_font_family_format_converted' );
-
-		parent::tear_down();
-	}
-
-	public function test_font_faces_with_remote_src() {
-		$legacy_content = '{"fontFace":[{"fontFamily":"Open Sans","fontStyle":"normal","fontWeight":"400","preview":"https://s.w.org/images/fonts/16.7/previews/open-sans/open-sans-400-normal.svg","src":"https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4nY1M2xLER.ttf"},{"fontFamily":"Open Sans","fontStyle":"italic","fontWeight":"400","preview":"https://s.w.org/images/fonts/16.7/previews/open-sans/open-sans-400-italic.svg","src":"https://fonts.gstatic.com/s/opensans/v35/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkaVcUwaERZjA.ttf"},{"fontFamily":"Open Sans","fontStyle":"normal","fontWeight":"700","preview":"https://s.w.org/images/fonts/16.7/previews/open-sans/open-sans-700-normal.svg","src":"https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4nY1M2xLER.ttf"}],"fontFamily":"\'Open Sans\', sans-serif","name":"Open Sans","preview":"https://s.w.org/images/fonts/16.7/previews/open-sans/open-sans.svg","slug":"open-sans"}';
-
-		$font_family_id = $this->create_font_family( $legacy_content );
-
-		gutenberg_convert_legacy_font_family_format();
-
-		$font_family = $this->get_post( $font_family_id );
-		$font_faces  = $this->get_font_faces( $font_family_id );
-
-		list( $font_face1, $font_face2, $font_face3 ) = $font_faces;
-
-		// Updated font family post.
-		$this->assertSame( 'wp_font_family', $font_family->post_type, 'The font family post type should be wp_font_family.' );
-		$this->assertSame( 'publish', $font_family->post_status, 'The font family post status should be publish.' );
-
-		$font_family_title = 'Open Sans';
-		$this->assertSame( $font_family_title, $font_family->post_title, 'The font family post title should be Open Sans.' );
-
-		$font_family_slug = 'open-sans';
-		$this->assertSame( $font_family_slug, $font_family->post_name, 'The font family post name should be open-sans.' );
-
-		$font_family_content = wp_json_encode( json_decode( '{"fontFamily":"\'Open Sans\', sans-serif","preview":"https://s.w.org/images/fonts/16.7/previews/open-sans/open-sans.svg"}', true ) );
-		$this->assertSame( $font_family_content, $font_family->post_content, 'The font family post content should match.' );
-
-		$meta = get_post_meta( $font_family_id, '_gutenberg_legacy_font_family', true );
-		$this->assertSame( $legacy_content, $meta, 'The _gutenberg_legacy_font_family post meta content should match.' );
-
-		// First font face post.
-		$this->assertSame( 'wp_font_face', $font_face1->post_type, 'The 1st font face post type should be wp_font_face.' );
-		$this->assertSame( $font_family_id, $font_face1->post_parent, 'The 1st font face post parent should match.' );
-		$this->assertSame( 'publish', $font_face1->post_status, 'The 1st font face post status should be publish.' );
-
-		$font_face1_title = 'open sans;normal;400;100%;U+0-10FFFF';
-		$this->assertSame( $font_face1_title, $font_face1->post_title, 'The 1st font face post title should match.' );
-		$this->assertSame( sanitize_title( $font_face1_title ), $font_face1->post_name, 'The 1st font face post name should match.' );
-
-		$font_face1_content = wp_json_encode( json_decode( '{"fontFamily":"Open Sans","fontStyle":"normal","fontWeight":"400","preview":"https://s.w.org/images/fonts/16.7/previews/open-sans/open-sans-400-normal.svg","src":"https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4nY1M2xLER.ttf"}' ) );
-		$this->assertSame( $font_face1_content, $font_face1->post_content, 'The 1st font face post content should match.' );
-
-		// With a remote url, file post meta should not be set.
-		$meta = get_post_meta( $font_face1->ID, '_wp_font_face_file', true );
-		$this->assertSame( '', $meta, 'The _wp_font_face_file post meta for the 1st font face should be an empty string.' );
-
-		// Second font face post.
-		$this->assertSame( 'wp_font_face', $font_face2->post_type, 'The 2nd font face post type should be wp_font_face.' );
-		$this->assertSame( $font_family_id, $font_face2->post_parent, 'The 2md font face post type should be wp_font_face.' );
-		$this->assertSame( 'publish', $font_face2->post_status, 'The 2nd font face post status should be publish.' );
-
-		$font_face2_title = 'open sans;italic;400;100%;U+0-10FFFF';
-		$this->assertSame( $font_face2_title, $font_face2->post_title, 'The 2nd font face post title should match.' );
-		$this->assertSame( sanitize_title( $font_face2_title ), $font_face2->post_name, 'The 2nd font face post name should match.' );
-
-		$font_face2_content = wp_json_encode( json_decode( '{"fontFamily":"Open Sans","fontStyle":"italic","fontWeight":"400","preview":"https://s.w.org/images/fonts/16.7/previews/open-sans/open-sans-400-italic.svg","src":"https://fonts.gstatic.com/s/opensans/v35/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkaVcUwaERZjA.ttf"}' ) );
-		$this->assertSame( $font_face2_content, $font_face2->post_content, 'The 2nd font face post content should match.' );
-
-		// With a remote url, file post meta should not be set.
-		$meta = get_post_meta( $font_face2->ID, '_wp_font_face_file', true );
-		$this->assertSame( '', $meta, 'The _wp_font_face_file post meta for the 2nd font face should be an empty string.' );
-
-		// Third font face post.
-		$this->assertSame( 'wp_font_face', $font_face3->post_type, 'The 3rd font face post type should be wp_font_face.' );
-		$this->assertSame( $font_family_id, $font_face3->post_parent, 'The 3rd font face post type should be wp_font_face.' );
-		$this->assertSame( 'publish', $font_face3->post_status, 'The 3rd font face post status should be publish.' );
-
-		$font_face3_title = 'open sans;normal;700;100%;U+0-10FFFF';
-		$this->assertSame( $font_face3_title, $font_face3->post_title, 'The 3rd font face post title should match.' );
-		$this->assertSame( sanitize_title( $font_face3_title ), $font_face3->post_name, 'The 3rd font face post name should match.' );
-
-		$font_face3_content = wp_json_encode( json_decode( '{"fontFamily":"Open Sans","fontStyle":"normal","fontWeight":"700","preview":"https://s.w.org/images/fonts/16.7/previews/open-sans/open-sans-700-normal.svg","src":"https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4nY1M2xLER.ttf"}' ) );
-		$this->assertSame( $font_face3_content, $font_face3->post_content, 'The 3rd font face post content should match.' );
-
-		// With a remote url, file post meta should not be set.
-		$meta = get_post_meta( $font_face3->ID, '_wp_font_face_file', true );
-		$this->assertSame( '', $meta, 'The _wp_font_face_file post meta for the 3rd font face should be an empty string.' );
-	}
-
-	public function test_font_faces_with_local_src() {
-		$legacy_content = '{"fontFace":[{"fontFamily":"Open Sans","fontStyle":"normal","fontWeight":"400","preview":"https://s.w.org/images/fonts/16.7/previews/open-sans/open-sans-400-normal.svg","src":"' . site_url() . '/wp-content/fonts/open-sans_normal_400.ttf"}],"fontFamily":"\'Open Sans\', sans-serif","name":"Open Sans","preview":"https://s.w.org/images/fonts/16.7/previews/open-sans/open-sans.svg","slug":"open-sans"}';
-
-		$font_family_id = $this->create_font_family( $legacy_content );
-
-		gutenberg_convert_legacy_font_family_format();
-
-		$font_faces = $this->get_font_faces( $font_family_id );
-
-		$this->assertCount( 1, $font_faces, 'There should be 1 font face.' );
-		$font_face = reset( $font_faces );
-
-		// Check that file meta is present.
-		$file_path = 'open-sans_normal_400.ttf';
-		$meta      = get_post_meta( $font_face->ID, '_wp_font_face_file', true );
-		$this->assertSame( $file_path, $meta, 'The _wp_font_face_file should match.' );
-	}
-
-	public function test_migration_only_runs_once() {
-		$legacy_content = '{"fontFace":[],"fontFamily":"\'Open Sans\', sans-serif","name":"Open Sans","preview":"","slug":"open-sans"}';
-
-		// Simulate that the migration has already run.
-		update_option( 'gutenberg_font_family_format_converted', true );
-
-		$font_family_id = $this->create_font_family( $legacy_content );
-
-		gutenberg_convert_legacy_font_family_format();
-
-		// Meta with backup content will not be present if migration isn't triggered.
-		$meta = get_post_meta( $font_family_id, '_gutenberg_legacy_font_family', true );
-		$this->assertSame( '', $meta );
-	}
-
-	protected function create_font_family( $content ) {
-		$post_id = wp_insert_post(
-			array(
-				'post_type'    => 'wp_font_family',
-				'post_status'  => 'publish',
-				'post_title'   => 'Open Sans',
-				'post_name'    => 'open-sans',
-				'post_content' => $content,
-			)
-		);
-
-		$this->store_id_for_cleanup_in_teardown( $post_id );
-
-		return $post_id;
-	}
-
-	private function get_post( $post_id ) {
-		$post = get_post( $post_id );
-
-		$this->store_id_for_cleanup_in_teardown( $post );
-
-		return $post;
-	}
-
-	protected function get_font_faces( $font_family_id ) {
-		$posts = get_posts(
-			array(
-				'post_parent' => $font_family_id,
-				'post_type'   => 'wp_font_face',
-				'order'       => 'ASC',
-				'orderby'     => 'id',
-			)
-		);
-
-		$this->store_id_for_cleanup_in_teardown( $posts );
-
-		return $posts;
-	}
-
-	private function store_id_for_cleanup_in_teardown( $post ) {
-		if ( null === $post ) {
-			return;
-		}
-
-		$posts = is_array( $post ) ? $post : array( $post );
-
-		foreach ( $posts as $post ) {
-			if ( null === $post ) {
-				continue;
-			}
-			$this->post_ids_to_delete[] = is_int( $post ) ? $post : $post->ID;
-		}
-	}
-}
diff --git a/platform-docs/package-lock.json b/platform-docs/package-lock.json
index 79783f1c1d5a1..9ebc6258ce71c 100644
--- a/platform-docs/package-lock.json
+++ b/platform-docs/package-lock.json
@@ -3365,24 +3365,6 @@
 				"@types/ms": "*"
 			}
 		},
-		"node_modules/@types/eslint": {
-			"version": "8.56.5",
-			"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.5.tgz",
-			"integrity": "sha512-u5/YPJHo1tvkSF2CE0USEkxon82Z5DBy2xR+qfyYNszpX9qcs4sT6uq2kBbj4BXY1+DBGDPnrhMZV3pKWGNukw==",
-			"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==",
-			"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",
@@ -3645,9 +3627,10 @@
 			}
 		},
 		"node_modules/@types/unist": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
-			"integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+			"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",
@@ -3863,10 +3846,11 @@
 				"node": ">=0.4.0"
 			}
 		},
-		"node_modules/acorn-import-assertions": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-			"integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+		"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"
 			}
@@ -3908,15 +3892,15 @@
 			}
 		},
 		"node_modules/ajv": {
-			"version": "8.16.0",
-			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.16.0.tgz",
-			"integrity": "sha512-F0twR8U1ZU67JIEtekUcLkXkoO5mMMmgGD8sK/xUFzJ805jxHQl92hImFAqqXMyMYjSPOyUPAwHYhB72g5sTXw==",
+			"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",
-				"uri-js": "^4.4.1"
+				"require-from-string": "^2.0.2"
 			},
 			"funding": {
 				"type": "github",
@@ -4284,9 +4268,10 @@
 			}
 		},
 		"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==",
+			"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",
@@ -4296,7 +4281,7 @@
 				"http-errors": "2.0.0",
 				"iconv-lite": "0.4.24",
 				"on-finished": "2.4.1",
-				"qs": "6.11.0",
+				"qs": "6.13.0",
 				"raw-body": "2.5.2",
 				"type-is": "~1.6.18",
 				"unpipe": "1.0.0"
@@ -4310,6 +4295,7 @@
 			"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"
 			}
@@ -4318,6 +4304,7 @@
 			"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"
 			}
@@ -4325,7 +4312,8 @@
 		"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=="
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+			"license": "MIT"
 		},
 		"node_modules/bonjour-service": {
 			"version": "1.2.1",
@@ -4875,9 +4863,10 @@
 			}
 		},
 		"node_modules/compressible/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==",
+			"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"
 			}
@@ -4979,6 +4968,7 @@
 			"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"
 			}
@@ -5438,12 +5428,12 @@
 			"integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
 		},
 		"node_modules/debug": {
-			"version": "4.3.5",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
-			"integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
+			"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.2"
+				"ms": "^2.1.3"
 			},
 			"engines": {
 				"node": ">=6.0"
@@ -5591,6 +5581,7 @@
 			"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"
 			}
@@ -5607,6 +5598,7 @@
 			"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"
@@ -5735,9 +5727,10 @@
 			}
 		},
 		"node_modules/docusaurus-lunr-search/node_modules/@types/unist": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-			"integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+			"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",
@@ -5925,7 +5918,8 @@
 		"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=="
+			"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+			"license": "MIT"
 		},
 		"node_modules/electron-to-chromium": {
 			"version": "1.4.704",
@@ -5960,17 +5954,19 @@
 			}
 		},
 		"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==",
+			"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.16.0",
-			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
-			"integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==",
+			"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"
@@ -6217,6 +6213,7 @@
 			"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"
 			}
@@ -6269,37 +6266,37 @@
 			}
 		},
 		"node_modules/express": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
-			"integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
+			"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.2",
+				"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": "~1.0.2",
+				"encodeurl": "~2.0.0",
 				"escape-html": "~1.0.3",
 				"etag": "~1.8.1",
-				"finalhandler": "1.2.0",
+				"finalhandler": "1.3.1",
 				"fresh": "0.5.2",
 				"http-errors": "2.0.0",
-				"merge-descriptors": "1.0.1",
+				"merge-descriptors": "1.0.3",
 				"methods": "~1.1.2",
 				"on-finished": "2.4.1",
 				"parseurl": "~1.3.3",
-				"path-to-regexp": "0.1.7",
+				"path-to-regexp": "0.1.10",
 				"proxy-addr": "~2.0.7",
-				"qs": "6.11.0",
+				"qs": "6.13.0",
 				"range-parser": "~1.2.1",
 				"safe-buffer": "5.2.1",
-				"send": "0.18.0",
-				"serve-static": "1.15.0",
+				"send": "0.19.0",
+				"serve-static": "1.16.2",
 				"setprototypeof": "1.2.0",
 				"statuses": "2.0.1",
 				"type-is": "~1.6.18",
@@ -6335,9 +6332,10 @@
 			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
 		},
 		"node_modules/express/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=="
+			"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",
@@ -6388,6 +6386,12 @@
 			"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",
@@ -6523,12 +6527,13 @@
 			}
 		},
 		"node_modules/finalhandler": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-			"integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+			"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": "~1.0.2",
+				"encodeurl": "~2.0.0",
 				"escape-html": "~1.0.3",
 				"on-finished": "2.4.1",
 				"parseurl": "~1.3.3",
@@ -6543,6 +6548,7 @@
 			"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"
 			}
@@ -6550,7 +6556,8 @@
 		"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=="
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+			"license": "MIT"
 		},
 		"node_modules/find-cache-dir": {
 			"version": "4.0.0",
@@ -6770,6 +6777,7 @@
 			"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"
 			}
@@ -7212,9 +7220,10 @@
 			}
 		},
 		"node_modules/hast-util-from-parse5/node_modules/@types/unist": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-			"integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+			"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",
@@ -7383,9 +7392,10 @@
 			}
 		},
 		"node_modules/hast-util-raw/node_modules/vfile-location": {
-			"version": "5.0.2",
-			"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.2.tgz",
-			"integrity": "sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==",
+			"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"
@@ -7439,9 +7449,10 @@
 			}
 		},
 		"node_modules/hast-util-select/node_modules/@types/unist": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-			"integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+			"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",
@@ -7594,9 +7605,9 @@
 			}
 		},
 		"node_modules/hast-util-to-jsx-runtime/node_modules/inline-style-parser": {
-			"version": "0.2.3",
-			"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.3.tgz",
-			"integrity": "sha512-qlD8YNDqyTKTyuITrDOffsl6Tdhv+UC4hcdAVuQsK4IMQ99nSgd1MIA/Q+jQYoh9r3hVUXhYh7urSRmXPkW04g==",
+			"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": {
@@ -7619,12 +7630,12 @@
 			}
 		},
 		"node_modules/hast-util-to-jsx-runtime/node_modules/style-to-object": {
-			"version": "1.0.6",
-			"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.6.tgz",
-			"integrity": "sha512-khxq+Qm3xEyZfKd/y9L3oIWQimxuc4STrQKtQn8aSDRHb8mFgpukgX1hdzfrMEW6JCjyJ8p89x+IUMVnCBI1PA==",
+			"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.3"
+				"inline-style-parser": "0.2.4"
 			}
 		},
 		"node_modules/hast-util-to-parse5": {
@@ -7748,9 +7759,10 @@
 			}
 		},
 		"node_modules/hastscript/node_modules/@types/unist": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-			"integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+			"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",
@@ -7987,6 +7999,7 @@
 			"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",
@@ -8074,6 +8087,7 @@
 			"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"
 			},
@@ -9281,6 +9295,7 @@
 			"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"
 			}
@@ -9297,9 +9312,13 @@
 			}
 		},
 		"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=="
+			"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",
@@ -10994,11 +11013,12 @@
 			]
 		},
 		"node_modules/micromatch": {
-			"version": "4.0.5",
-			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-			"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+			"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.2",
+				"braces": "^3.0.3",
 				"picomatch": "^2.3.1"
 			},
 			"engines": {
@@ -11009,6 +11029,7 @@
 			"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"
 			},
@@ -11115,9 +11136,10 @@
 			}
 		},
 		"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=="
+			"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",
@@ -11279,9 +11301,13 @@
 			}
 		},
 		"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==",
+			"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"
 			}
@@ -11320,6 +11346,7 @@
 			"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"
 			},
@@ -11508,9 +11535,10 @@
 			}
 		},
 		"node_modules/parse-entities/node_modules/@types/unist": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-			"integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+			"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",
@@ -11609,9 +11637,10 @@
 			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
 		},
 		"node_modules/path-to-regexp": {
-			"version": "1.8.0",
-			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-			"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+			"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"
 			}
@@ -12452,11 +12481,12 @@
 			}
 		},
 		"node_modules/qs": {
-			"version": "6.11.0",
-			"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-			"integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+			"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.4"
+				"side-channel": "^1.0.6"
 			},
 			"engines": {
 				"node": ">=0.6"
@@ -12523,6 +12553,7 @@
 			"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",
@@ -12537,6 +12568,7 @@
 			"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"
 			}
@@ -13392,7 +13424,8 @@
 		"node_modules/safer-buffer": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+			"license": "MIT"
 		},
 		"node_modules/sax": {
 			"version": "1.3.0",
@@ -13462,9 +13495,9 @@
 			}
 		},
 		"node_modules/semver": {
-			"version": "7.6.2",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-			"integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+			"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"
@@ -13488,9 +13521,10 @@
 			}
 		},
 		"node_modules/send": {
-			"version": "0.18.0",
-			"resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-			"integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+			"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",
@@ -13514,6 +13548,7 @@
 			"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"
 			}
@@ -13521,17 +13556,23 @@
 		"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=="
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+			"license": "MIT"
 		},
-		"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=="
+		"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"
 			}
@@ -13635,14 +13676,15 @@
 			}
 		},
 		"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==",
+			"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": "~1.0.2",
+				"encodeurl": "~2.0.0",
 				"escape-html": "~1.0.3",
 				"parseurl": "~1.3.3",
-				"send": "0.18.0"
+				"send": "0.19.0"
 			},
 			"engines": {
 				"node": ">= 0.8.0"
@@ -13667,7 +13709,8 @@
 		"node_modules/setprototypeof": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-			"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+			"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+			"license": "ISC"
 		},
 		"node_modules/shallow-clone": {
 			"version": "3.0.1",
@@ -13732,6 +13775,7 @@
 			"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",
@@ -13919,6 +13963,7 @@
 			"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"
 			}
@@ -13960,9 +14005,10 @@
 			}
 		},
 		"node_modules/string-width/node_modules/ansi-regex": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-			"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+			"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"
 			},
@@ -14378,9 +14424,10 @@
 			}
 		},
 		"node_modules/to-vfile/node_modules/@types/unist": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-			"integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+			"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",
@@ -14426,6 +14473,7 @@
 			"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"
 			}
@@ -14476,6 +14524,7 @@
 			"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"
@@ -14488,6 +14537,7 @@
 			"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"
 			}
@@ -14496,6 +14546,7 @@
 			"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"
 			},
@@ -14734,6 +14785,7 @@
 			"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"
 			}
@@ -14991,12 +15043,12 @@
 			}
 		},
 		"node_modules/vfile": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
-			"integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+			"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",
-				"unist-util-stringify-position": "^4.0.0",
 				"vfile-message": "^4.0.0"
 			},
 			"funding": {
@@ -15056,25 +15108,25 @@
 			}
 		},
 		"node_modules/webpack": {
-			"version": "5.90.3",
-			"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.3.tgz",
-			"integrity": "sha512-h6uDYlWCctQRuXBs1oYpVe6sFcWedl0dpcVaTf/YF67J9bKvwJajFulMVSYKHrksMB3I/pIagRzDxwxkebuzKA==",
+			"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/eslint-scope": "^3.7.3",
 				"@types/estree": "^1.0.5",
-				"@webassemblyjs/ast": "^1.11.5",
-				"@webassemblyjs/wasm-edit": "^1.11.5",
-				"@webassemblyjs/wasm-parser": "^1.11.5",
+				"@webassemblyjs/ast": "^1.12.1",
+				"@webassemblyjs/wasm-edit": "^1.12.1",
+				"@webassemblyjs/wasm-parser": "^1.12.1",
 				"acorn": "^8.7.1",
-				"acorn-import-assertions": "^1.9.0",
+				"acorn-import-attributes": "^1.9.5",
 				"browserslist": "^4.21.10",
 				"chrome-trace-event": "^1.0.2",
-				"enhanced-resolve": "^5.15.0",
+				"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.9",
+				"graceful-fs": "^4.2.11",
 				"json-parse-even-better-errors": "^2.3.1",
 				"loader-runner": "^4.2.0",
 				"mime-types": "^2.1.27",
@@ -15082,7 +15134,7 @@
 				"schema-utils": "^3.2.0",
 				"tapable": "^2.1.1",
 				"terser-webpack-plugin": "^5.3.10",
-				"watchpack": "^2.4.0",
+				"watchpack": "^2.4.1",
 				"webpack-sources": "^3.2.3"
 			},
 			"bin": {
@@ -15244,9 +15296,9 @@
 			}
 		},
 		"node_modules/webpack-dev-server/node_modules/ws": {
-			"version": "8.17.1",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
-			"integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+			"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"
@@ -15308,6 +15360,12 @@
 				"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",
@@ -15463,9 +15521,10 @@
 			}
 		},
 		"node_modules/wrap-ansi/node_modules/ansi-regex": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-			"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+			"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"
 			},
@@ -15579,9 +15638,10 @@
 			}
 		},
 		"node_modules/yocto-queue": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz",
-			"integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==",
+			"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"
 			},
diff --git a/readme.txt b/readme.txt
index 3fe6e3aaf1dc4..4bd7ddc36d6e9 100644
--- a/readme.txt
+++ b/readme.txt
@@ -1,6 +1,6 @@
 === Gutenberg ===
 Contributors: matveb, joen, karmatosed
-Tested up to: 6.5
+Tested up to: 6.6
 Stable tag: V.V.V
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -55,7 +55,7 @@ To report a security issue, please visit the [WordPress HackerOne](https://hacke
 
 = 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/documentation/article/wordpress-block-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/json/block.json b/schemas/json/block.json
index 6a27447f7b496..8e314a45ae1cf 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": {
-			"type": "integer",
 			"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.",
-			"default": 1,
-			"enum": [ 1, 2, 3 ]
+			"type": "integer",
+			"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,52 +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": {
-			"type": "array",
 			"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",
@@ -145,25 +146,19 @@
 							]
 						},
 						"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",
@@ -175,40 +170,36 @@
 							]
 						},
 						"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."
+							"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/#step-2-add-meta-block"
+							"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."
 						}
 					},
 					"anyOf": [
-						{
-							"required": [ "type" ]
-						},
-						{
-							"required": [ "enum" ]
-						}
+						{ "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"
@@ -216,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": [
 						{
@@ -251,129 +241,129 @@
 								]
 							}
 						}
-					]
+					],
+					"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": {
-							"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, its attributes definition is extended to include two new attributes: backgroundColor and style",
+							"type": "boolean",
 							"default": true
 						},
 						"gradients": {
-							"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, its attributes definition is extended to include two new attributes: gradient and style",
+							"type": "boolean",
 							"default": false
 						},
 						"link": {
-							"type": "boolean",
 							"description": "This property adds block controls which allow the user to set link color in a block, link color is disabled by default.\n\nLink color presets are sourced from the editor-color-palette theme support.\n\nWhen the block declares support for color.link, its attributes definition is extended to include the style attribute",
+							"type": "boolean",
 							"default": false
 						},
 						"text": {
-							"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, its attributes definition is extended to include two new attributes: textColor and style",
+							"type": "boolean",
 							"default": true
 						},
 						"heading": {
-							"type": "boolean",
 							"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": {
-							"type": "boolean",
 							"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": {
-							"type": "boolean",
 							"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.",
+					"type": "boolean",
 					"default": true
 				},
 				"dimensions": {
-					"type": "object",
 					"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": {
-							"type": "boolean",
 							"description": "Allow blocks to define an aspect ratio value.",
+							"type": "boolean",
 							"default": false
 						},
 						"minHeight": {
-							"type": "boolean",
 							"description": "Allow blocks to define a minimum height value.",
+							"type": "boolean",
 							"default": false
 						}
 					}
 				},
 				"filter": {
-					"type": "object",
 					"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": {
-							"type": "boolean",
 							"description": "Allow blocks to define a duotone filter.",
+							"type": "boolean",
 							"default": false
 						}
 					}
 				},
 				"background": {
-					"type": "object",
 					"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": {
-							"type": "boolean",
 							"description": "Allow blocks to define a background image.",
+							"type": "boolean",
 							"default": false
 						},
 						"backgroundSize": {
-							"type": "boolean",
 							"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": {
-					"type": "boolean",
 					"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",
 					"default": true
 				},
 				"renaming": {
-					"type": "boolean",
 					"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": {
-					"default": false,
 					"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" },
@@ -381,12 +371,12 @@
 							"type": "object",
 							"properties": {
 								"default": {
-									"type": "object",
 									"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": {
-											"type": "string",
 											"description": "The layout type.",
+											"type": "string",
 											"enum": [
 												"constrained",
 												"grid",
@@ -394,16 +384,16 @@
 											]
 										},
 										"contentSize": {
-											"type": "string",
-											"description": "The content size used on all children."
+											"description": "The content size used on all children.",
+											"type": "string"
 										},
 										"wideSize": {
-											"type": "string",
-											"description": "The wide size used on alignwide children."
+											"description": "The wide size used on alignwide children.",
+											"type": "string"
 										},
 										"justifyContent": {
-											"type": "string",
 											"description": "Content justification value.",
+											"type": "string",
 											"enum": [
 												"right",
 												"center",
@@ -413,18 +403,18 @@
 											]
 										},
 										"orientation": {
-											"type": "string",
 											"description": "The orientation of the layout.",
+											"type": "string",
 											"enum": [ "horizontal", "vertical" ]
 										},
 										"flexWrap": {
-											"type": "string",
 											"description": "The flex wrap value.",
+											"type": "string",
 											"enum": [ "wrap", "nowrap" ]
 										},
 										"verticalAlignment": {
-											"type": "string",
 											"description": "The vertical alignment value.",
+											"type": "string",
 											"enum": [
 												"top",
 												"center",
@@ -434,88 +424,89 @@
 											]
 										},
 										"minimumColumnWidth": {
-											"type": "string",
-											"description": "The minimum column width value."
+											"description": "The minimum column width value.",
+											"type": "string"
 										},
 										"columnCount": {
-											"type": "number",
-											"description": "The column count value."
+											"description": "The column count value.",
+											"type": "number"
 										}
 									}
 								},
 								"allowSwitching": {
-									"type": "boolean",
 									"description": "Exposes a switcher control that allows toggling between all existing layout types.",
+									"type": "boolean",
 									"default": false
 								},
 								"allowEditing": {
-									"type": "boolean",
 									"description": "Determines display of layout controls in the block sidebar. If set to false, layout controls will be hidden.",
+									"type": "boolean",
 									"default": true
 								},
 								"allowInheriting": {
-									"type": "boolean",
 									"description": "For the `flow` layout type only, determines display of the `Inner blocks use content width` toggle.",
+									"type": "boolean",
 									"default": true
 								},
 								"allowSizingOnChildren": {
-									"type": "boolean",
 									"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": {
-									"type": "boolean",
 									"description": "For the `flex` layout type only, determines display of vertical alignment controls in the block toolbar.",
+									"type": "boolean",
 									"default": true
 								},
 								"allowJustification": {
-									"type": "boolean",
 									"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": {
-									"type": "boolean",
 									"description": "For the `flex` layout type only, determines display of the orientation control in the block toolbar.",
+									"type": "boolean",
 									"default": true
 								},
 								"allowCustomContentAndWideSize": {
-									"type": "boolean",
 									"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": {
-					"type": "boolean",
 					"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": {
-					"type": "object",
 					"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": {
-							"type": "boolean",
 							"description": "Allow blocks to stick to their immediate parent when scrolling the page.",
+							"type": "boolean",
 							"default": false
 						}
 					}
 				},
 				"spacing": {
-					"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, its attributes definition is extended to include the style attribute.",
+					"type": "object",
 					"properties": {
 						"margin": {
 							"oneOf": [
@@ -572,30 +563,30 @@
 					}
 				},
 				"shadow": {
-					"default": false,
 					"description": "Allow blocks to define a box shadow.",
 					"oneOf": [
 						{
-							"type": "boolean",
-							"description": "Defines whether a box shadow is enabled or not."
+							"description": "Defines whether a box shadow is enabled or not.",
+							"type": "boolean"
 						},
 						{
 							"type": "object"
 						}
-					]
+					],
+					"default": false
 				},
 				"typography": {
-					"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, its attributes definition is extended to include the style attribute.",
+					"type": "object",
 					"properties": {
 						"fontSize": {
-							"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, its attributes definition is extended to include two new attributes: fontSize and style",
+							"type": "boolean",
 							"default": false
 						},
 						"lineHeight": {
-							"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, 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",
 							"default": false
 						},
 						"textAlign": {
@@ -620,21 +611,21 @@
 					"description": "Indicates if the block is using Interactivity API features.",
 					"oneOf": [
 						{
-							"type": "boolean",
 							"description": "Indicates whether the block is using the Interactivity API directives.",
+							"type": "boolean",
 							"default": false
 						},
 						{
 							"type": "object",
 							"properties": {
 								"clientNavigation": {
-									"type": "boolean",
 									"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": {
-									"type": "boolean",
 									"description": "Indicates whether the block is using the Interactivity API directives.",
+									"type": "boolean",
 									"default": false
 								}
 							}
@@ -642,20 +633,20 @@
 					]
 				},
 				"splitting": {
-					"type": "boolean",
 					"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": {
-			"type": "object",
 			"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": {
-					"type": "string",
-					"description": "The primary CSS class to apply to the block. This replaces the `.wp-block-name` class if set."
+					"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.",
@@ -749,8 +740,8 @@
 			}
 		},
 		"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/block-api/block-styles",
+			"type": "array",
 			"items": {
 				"type": "object",
 				"properties": {
@@ -770,21 +761,21 @@
 			}
 		},
 		"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 attributes 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[ { \"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."
+					"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"
 				}
 			}
 		},
@@ -793,6 +784,7 @@
 			"type": "object",
 			"patternProperties": {
 				"^[a-z][a-z0-9-]*/[a-z][a-z0-9-]*$": {
+					"type": "string",
 					"enum": [ "before", "after", "firstChild", "lastChild" ]
 				}
 			},
@@ -900,28 +892,26 @@
 			"description": "Block Variations is the API that allows a block to have similar versions of it, but all these versions share some common functionality.",
 			"oneOf": [
 				{
-					"type": "string",
-					"description": "The path to a PHP file that returns an array of block variations."
+					"description": "The path to a PHP file that returns an array of block variations.",
+					"type": "string"
 				},
 				{
-					"type": "array",
 					"description": "An array of block variations.",
+					"type": "array",
 					"items": {
 						"type": "object",
-						"required": [ "name", "title" ],
-						"additionalProperties": false,
 						"properties": {
 							"name": {
-								"type": "string",
-								"description": "The unique and machine-readable name."
+								"description": "The unique and machine-readable name.",
+								"type": "string"
 							},
 							"title": {
-								"type": "string",
-								"description": "A human-readable variation title."
+								"description": "A human-readable variation title.",
+								"type": "string"
 							},
 							"description": {
-								"type": "string",
-								"description": "A detailed variation description."
+								"description": "A detailed variation description.",
+								"type": "string"
 							},
 							"category": {
 								"description": "A category classification, used in search interfaces to arrange block types by category.",
@@ -930,6 +920,7 @@
 										"type": "string"
 									},
 									{
+										"type": "string",
 										"enum": [
 											"text",
 											"media",
@@ -946,55 +937,58 @@
 								"type": "string"
 							},
 							"isDefault": {
+								"description": "Indicates whether the current variation is the default one.",
 								"type": "boolean",
-								"default": false,
-								"description": "Indicates whether the current variation is the default one."
+								"default": false
 							},
 							"attributes": {
-								"type": "object",
-								"description": "Values that override block attributes."
+								"description": "Values that override block attributes.",
+								"type": "object"
 							},
 							"innerBlocks": {
+								"description": "Initial configuration of nested blocks.",
 								"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."
+								"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": {
-								"type": "array",
 								"description": "The list of scopes where the variation is applicable.",
+								"type": "array",
 								"items": {
+									"type": "string",
 									"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.",
+								"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"
-								},
-								"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
index e52455b220cdb..7b5bd8f7979ba 100644
--- a/schemas/json/font-collection.json
+++ b/schemas/json/font-collection.json
@@ -1,7 +1,6 @@
 {
 	"title": "JSON schema for WordPress Font Collections",
-	"$schema": "http://json-schema.org/draft-04/schema#",
-	"type": "object",
+	"$schema": "http://json-schema.org/draft-07/schema#",
 	"definitions": {
 		"fontFace": {
 			"description": "Font face settings, with added preview property.",
@@ -23,28 +22,19 @@
 				},
 				"fontWeight": {
 					"description": "List of available font weights, separated by a space.",
-					"default": "400",
-					"oneOf": [
-						{
-							"type": "string"
-						},
-						{
-							"type": "integer"
-						}
-					]
+					"oneOf": [ { "type": "string" }, { "type": "integer" } ],
+					"default": "400"
 				},
 				"fontDisplay": {
 					"description": "CSS font-display value.",
 					"type": "string",
-					"default": "fallback",
-					"enum": [ "auto", "block", "fallback", "swap", "optional" ]
+					"enum": [ "auto", "block", "fallback", "swap", "optional" ],
+					"default": "fallback"
 				},
 				"src": {
 					"description": "Paths or URLs to the font files.",
 					"oneOf": [
-						{
-							"type": "string"
-						},
+						{ "type": "string" },
 						{
 							"type": "array",
 							"items": {
@@ -95,14 +85,15 @@
 			"additionalProperties": false
 		}
 	},
+	"type": "object",
 	"properties": {
 		"$schema": {
 			"description": "JSON schema URI for font-collection.json.",
 			"type": "string"
 		},
 		"font_families": {
-			"type": "array",
 			"description": "Array of font families ready to be installed.",
+			"type": "array",
 			"items": {
 				"type": "object",
 				"properties": {
@@ -123,18 +114,14 @@
 								"type": "string"
 							},
 							"preview": {
-								"type": "string",
-								"description": "URL to a preview image of the font family."
+								"description": "URL to a preview image of the font family.",
+								"type": "string"
 							},
 							"fontFace": {
 								"description": "Array of font-face definitions.",
 								"type": "array",
 								"items": {
-									"allOf": [
-										{
-											"$ref": "#/definitions/fontFace"
-										}
-									]
+									"$ref": "#/definitions/fontFace"
 								}
 							}
 						},
@@ -142,8 +129,8 @@
 						"additionalProperties": false
 					},
 					"categories": {
-						"type": "array",
 						"description": "Array of category slugs.",
+						"type": "array",
 						"items": {
 							"type": "string"
 						}
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index e04c21cf4bd58..a1f51ace92025 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -1,6 +1,6 @@
 {
 	"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/",
@@ -17,7 +17,7 @@
 			},
 			"additionalProperties": false
 		},
-		"settingsPropertiesAppearanceTools": {
+		"settingsAppearanceToolsProperties": {
 			"type": "object",
 			"properties": {
 				"appearanceTools": {
@@ -27,16 +27,29 @@
 				}
 			}
 		},
-		"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": {
@@ -68,47 +81,7 @@
 				}
 			}
 		},
-		"settingsPropertiesShadow": {
-			"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
-				}
-			}
-		},
-		"settingsPropertiesColor": {
+		"settingsColorProperties": {
 			"type": "object",
 			"properties": {
 				"color": {
@@ -253,29 +226,7 @@
 				}
 			}
 		},
-		"settingsPropertiesBackground": {
-			"type": "object",
-			"properties": {
-				"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
-				}
-			}
-		},
-		"settingsPropertiesDimensions": {
+		"settingsDimensionsProperties": {
 			"type": "object",
 			"properties": {
 				"dimensions": {
@@ -323,7 +274,7 @@
 				}
 			}
 		},
-		"settingsPropertiesLayout": {
+		"settingsLayoutProperties": {
 			"type": "object",
 			"properties": {
 				"layout": {
@@ -353,7 +304,7 @@
 				}
 			}
 		},
-		"settingsPropertiesLightbox": {
+		"settingsLightboxProperties": {
 			"type": "object",
 			"properties": {
 				"lightbox": {
@@ -373,7 +324,7 @@
 				}
 			}
 		},
-		"settingsPropertiesPosition": {
+		"settingsPositionProperties": {
 			"type": "object",
 			"properties": {
 				"position": {
@@ -390,7 +341,47 @@
 				}
 			}
 		},
-		"settingsPropertiesSpacing": {
+		"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
+				}
+			}
+		},
+		"settingsSpacingProperties": {
 			"type": "object",
 			"properties": {
 				"spacing": {
@@ -421,8 +412,8 @@
 							"items": {
 								"type": "string"
 							},
-							"default": [ "px", "em", "rem", "vh", "vw", "%" ],
-							"minItems": 1
+							"minItems": 1,
+							"default": [ "px", "em", "rem", "vh", "vw", "%" ]
 						},
 						"customSpacingSize": {
 							"description": "Allow users to set custom space sizes.",
@@ -469,8 +460,7 @@
 								"increment": {
 									"description": "The amount to increment each step by.",
 									"type": "number",
-									"exclusiveMinimum": true,
-									"minimum": 0,
+									"exclusiveMinimum": 0,
 									"default": 1.5
 								},
 								"steps": {
@@ -483,8 +473,7 @@
 								"mediumStep": {
 									"description": "The value to medium setting in the scale.",
 									"type": "number",
-									"exclusiveMinimum": true,
-									"minimum": 0,
+									"exclusiveMinimum": 0,
 									"default": 1.5
 								},
 								"unit": {
@@ -530,7 +519,7 @@
 				}
 			}
 		},
-		"settingsPropertiesTypography": {
+		"settingsTypographyProperties": {
 			"type": "object",
 			"properties": {
 				"typography": {
@@ -672,8 +661,8 @@
 							"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": {
-								"type": "object",
 								"description": "Font family preset",
+								"type": "object",
 								"properties": {
 									"name": {
 										"description": "Name of the font family preset, translatable.",
@@ -691,7 +680,96 @@
 										"description": "Array of font-face declarations.",
 										"type": "array",
 										"items": {
-											"$ref": "#/definitions/fontFace"
+											"type": "object",
+											"properties": {
+												"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
 										}
 									}
 								},
@@ -703,93 +781,7 @@
 				}
 			}
 		},
-		"fontFace": {
-			"type": "object",
-			"properties": {
-				"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.",
-					"default": "400",
-					"oneOf": [
-						{
-							"type": "string"
-						},
-						{
-							"type": "integer"
-						}
-					]
-				},
-				"fontDisplay": {
-					"description": "CSS font-display value.",
-					"type": "string",
-					"default": "fallback",
-					"enum": [ "auto", "block", "fallback", "swap", "optional" ]
-				},
-				"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
-		},
-		"settingsPropertiesCustom": {
+		"settingsCustomProperties": {
 			"type": "object",
 			"properties": {
 				"custom": {
@@ -799,42 +791,46 @@
 		},
 		"settingsProperties": {
 			"allOf": [
-				{ "$ref": "#/definitions/settingsPropertiesAppearanceTools" },
-				{ "$ref": "#/definitions/settingsPropertiesBackground" },
-				{ "$ref": "#/definitions/settingsPropertiesBorder" },
-				{ "$ref": "#/definitions/settingsPropertiesColor" },
-				{ "$ref": "#/definitions/settingsPropertiesDimensions" },
-				{ "$ref": "#/definitions/settingsPropertiesShadow" },
-				{ "$ref": "#/definitions/settingsPropertiesLayout" },
-				{ "$ref": "#/definitions/settingsPropertiesLightbox" },
-				{ "$ref": "#/definitions/settingsPropertiesPosition" },
-				{ "$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": {},
-						"background": {},
-						"border": {},
-						"color": {},
-						"dimensions": {},
-						"layout": {},
-						"lightbox": {},
-						"position": {},
-						"shadow": {},
-						"spacing": {},
-						"typography": {},
-						"custom": {}
-					},
-					"additionalProperties": false
+					"type": "object",
+					"propertyNames": {
+						"$ref": "#/definitions/settingsPropertyNames"
+					}
 				}
 			]
 		},
@@ -1171,10 +1167,8 @@
 						"backgroundImage": {
 							"description": "Sets the `background-image` CSS property.",
 							"oneOf": [
-								{
-									"description": "A valid CSS value for the background-image CSS property.",
-									"type": "string"
-								},
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" },
 								{
 									"type": "object",
 									"properties": {
@@ -1184,54 +1178,35 @@
 										}
 									},
 									"additionalProperties": false
-								},
-								{
-									"$ref": "#/definitions/refComplete"
 								}
 							]
 						},
 						"backgroundPosition": {
 							"description": "Sets the `background-position` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						},
 						"backgroundRepeat": {
 							"description": "Sets the `background-repeat` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						},
 						"backgroundSize": {
 							"description": "Sets the `background-size` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						},
 						"backgroundAttachment": {
 							"description": "Sets the `background-attachment` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						}
 					},
@@ -1244,32 +1219,22 @@
 						"color": {
 							"description": "Sets the `border-color` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						},
 						"radius": {
 							"description": "Sets the `border-radius` CSS property.",
 							"anyOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								},
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" },
 								{
 									"type": "object",
 									"properties": {
 										"topLeft": {
 											"description": "Sets the `border-top-left-radius` CSS property.",
 											"oneOf": [
-												{
-													"type": "string"
-												},
+												{ "type": "string" },
 												{
 													"$ref": "#/definitions/refComplete"
 												}
@@ -1278,9 +1243,7 @@
 										"topRight": {
 											"description": "Sets the `border-top-right-radius` CSS property.",
 											"oneOf": [
-												{
-													"type": "string"
-												},
+												{ "type": "string" },
 												{
 													"$ref": "#/definitions/refComplete"
 												}
@@ -1289,9 +1252,7 @@
 										"bottomLeft": {
 											"description": "Sets the `border-bottom-left-radius` CSS property.",
 											"oneOf": [
-												{
-													"type": "string"
-												},
+												{ "type": "string" },
 												{
 													"$ref": "#/definitions/refComplete"
 												}
@@ -1300,9 +1261,7 @@
 										"bottomRight": {
 											"description": "Sets the `border-bottom-right-radius` CSS property.",
 											"oneOf": [
-												{
-													"type": "string"
-												},
+												{ "type": "string" },
 												{
 													"$ref": "#/definitions/refComplete"
 												}
@@ -1315,23 +1274,15 @@
 						"style": {
 							"description": "Sets the `border-style` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						},
 						"width": {
 							"description": "Sets the `border-width` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						},
 						"top": {
@@ -1340,34 +1291,22 @@
 								"color": {
 									"description": "Sets the `border-top-color` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								},
 								"style": {
 									"description": "Sets the `border-top-style` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								},
 								"width": {
 									"description": "Sets the `border-top-width` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								}
 							},
@@ -1379,34 +1318,22 @@
 								"color": {
 									"description": "Sets the `border-right-color` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								},
 								"style": {
 									"description": "Sets the `border-right-style` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								},
 								"width": {
 									"description": "Sets the `border-right-width` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								}
 							},
@@ -1418,34 +1345,22 @@
 								"color": {
 									"description": "Sets the `border-bottom-color` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								},
 								"style": {
 									"description": "Sets the `border-bottom-style` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								},
 								"width": {
 									"description": "Sets the `border-bottom-width` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								}
 							},
@@ -1457,34 +1372,22 @@
 								"color": {
 									"description": "Sets the `border-left-color` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								},
 								"style": {
 									"description": "Sets the `border-left-style` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								},
 								"width": {
 									"description": "Sets the `border-left-width` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								}
 							},
@@ -1500,67 +1403,107 @@
 						"background": {
 							"description": "Sets the `background-color` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						},
 						"gradient": {
 							"description": "Sets the `background` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						},
 						"text": {
 							"description": "Sets the `color` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "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",
+					"description": "Dimensions styles.",
 					"type": "object",
 					"properties": {
 						"aspectRatio": {
 							"description": "Sets the `aspect-ratio` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						},
 						"minHeight": {
 							"description": "Sets the `min-height` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "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",
@@ -1568,12 +1511,8 @@
 						"blockGap": {
 							"description": "Sets the `--wp--style--block-gap` CSS custom property when settings.spacing.blockGap is true.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						},
 						"margin": {
@@ -1583,45 +1522,29 @@
 								"top": {
 									"description": "Sets the `margin-top` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								},
 								"right": {
 									"description": "Sets the `margin-right` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								},
 								"bottom": {
 									"description": "Sets the `margin-bottom` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								},
 								"left": {
 									"description": "Sets the `margin-left` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								}
 							},
@@ -1634,45 +1557,29 @@
 								"top": {
 									"description": "Sets the `padding-top` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								},
 								"right": {
 									"description": "Sets the `padding-right` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								},
 								"bottom": {
 									"description": "Sets the `padding-bottom` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								},
 								"left": {
 									"description": "Sets the `padding-left` CSS property.",
 									"oneOf": [
-										{
-											"type": "string"
-										},
-										{
-											"$ref": "#/definitions/refComplete"
-										}
+										{ "type": "string" },
+										{ "$ref": "#/definitions/refComplete" }
 									]
 								}
 							},
@@ -1688,220 +1595,143 @@
 						"fontFamily": {
 							"description": "Sets the `font-family` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						},
 						"fontSize": {
 							"description": "Sets the `font-size` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						},
 						"fontStyle": {
 							"description": "Sets the `font-style` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						},
 						"fontWeight": {
 							"description": "Sets the `font-weight` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						},
 						"letterSpacing": {
 							"description": "Sets the `letter-spacing` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						},
 						"lineHeight": {
 							"description": "Sets the `line-height` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						},
 						"textAlign": {
 							"description": "Sets the `text-align` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
+							]
 						},
 						"textColumns": {
 							"description": "Sets the `column-count` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
+							]
 						},
 						"textDecoration": {
 							"description": "Sets the `text-decoration` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						},
 						"writingMode": {
 							"description": "Sets the `writing-mode` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						},
 						"textTransform": {
 							"description": "Sets the `text-transform` CSS property.",
 							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
-							]
-						}
-					},
-					"additionalProperties": false
-				},
-				"filter": {
-					"description": "CSS and SVG filter styles.",
-					"type": "object",
-					"properties": {
-						"duotone": {
-							"description": "Sets the duotone filter.",
-							"oneOf": [
-								{
-									"type": "string"
-								},
-								{
-									"$ref": "#/definitions/refComplete"
-								}
-							]
-						}
-					},
-					"additionalProperties": false
-				},
-				"shadow": {
-					"description": "Box shadow styles.",
-					"oneOf": [
-						{
-							"type": "string"
-						},
-						{
-							"$ref": "#/definitions/refComplete"
-						}
-					]
-				},
-				"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"
-								}
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
 							]
 						}
 					},
 					"additionalProperties": false
-				},
-				"css": {
-					"description": "Sets custom CSS to apply styling not covered by other theme.json properties.",
-					"type": "string"
 				}
 			}
 		},
+		"stylesPropertyNames": {
+			"enum": [
+				"background",
+				"border",
+				"color",
+				"css",
+				"dimensions",
+				"filter",
+				"outline",
+				"shadow",
+				"spacing",
+				"typography"
+			]
+		},
 		"stylesPropertiesComplete": {
-			"type": "object",
 			"allOf": [
 				{
 					"$ref": "#/definitions/stylesProperties"
 				},
 				{
-					"properties": {
-						"background": {},
-						"border": {},
-						"color": {},
-						"dimensions": {},
-						"spacing": {},
-						"typography": {},
-						"filter": {},
-						"shadow": {},
-						"outline": {},
-						"css": {}
-					},
-					"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": {
@@ -1909,84 +1739,48 @@
 			"type": "object",
 			"properties": {
 				"button": {
-					"type": "object",
 					"allOf": [
 						{
 							"$ref": "#/definitions/stylesProperties"
 						},
 						{
-							"properties": {
-								"border": {},
-								"background": {},
-								"color": {},
-								"dimensions": {},
-								"filter": {},
-								"shadow": {},
-								"outline": {},
-								"spacing": {},
-								"typography": {},
-								"css": {},
-								":hover": {
-									"$ref": "#/definitions/stylesPropertiesComplete"
-								},
-								":focus": {
-									"$ref": "#/definitions/stylesPropertiesComplete"
-								},
-								":active": {
-									"$ref": "#/definitions/stylesPropertiesComplete"
-								},
-								":visited": {
-									"$ref": "#/definitions/stylesPropertiesComplete"
-								},
-								":link": {
-									"$ref": "#/definitions/stylesPropertiesComplete"
-								},
-								":any-link": {
-									"$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": {
-								"background": {},
-								"border": {},
-								"color": {},
-								"dimensions": {},
-								"spacing": {},
-								"typography": {},
-								"filter": {},
-								"shadow": {},
-								"outline": {},
-								"css": {},
-								":hover": {
-									"$ref": "#/definitions/stylesPropertiesComplete"
-								},
-								":focus": {
-									"$ref": "#/definitions/stylesPropertiesComplete"
-								},
-								":active": {
-									"$ref": "#/definitions/stylesPropertiesComplete"
-								},
-								":visited": {
-									"$ref": "#/definitions/stylesPropertiesComplete"
-								},
-								":link": {
-									"$ref": "#/definitions/stylesPropertiesComplete"
-								},
-								":any-link": {
-									"$ref": "#/definitions/stylesPropertiesComplete"
-								}
-							},
-							"additionalProperties": false
+							"$ref": "#/definitions/stylesElementsPseudoSelectorsProperties"
+						},
+						{
+							"type": "object",
+							"propertyNames": {
+								"anyOf": [
+									{
+										"$ref": "#/definitions/stylesPropertyNames"
+									},
+									{
+										"$ref": "#/definitions/stylesElementsPseudoSelectorsPropertyNames"
+									}
+								]
+							}
 						}
 					]
 				},
@@ -2327,31 +2121,33 @@
 			"additionalProperties": false
 		},
 		"stylesPropertiesAndElementsComplete": {
-			"type": "object",
 			"allOf": [
 				{
 					"$ref": "#/definitions/stylesProperties"
 				},
 				{
+					"type": "object",
 					"properties": {
-						"background": {},
-						"border": {},
-						"color": {},
-						"dimensions": {},
-						"spacing": {},
-						"typography": {},
-						"filter": {},
-						"shadow": {},
-						"outline": {},
-						"css": {},
 						"elements": {
 							"$ref": "#/definitions/stylesElementsPropertiesComplete"
 						},
 						"variations": {
 							"$ref": "#/definitions/stylesVariationsPropertiesComplete"
 						}
-					},
-					"additionalProperties": false
+					}
+				},
+				{
+					"type": "object",
+					"propertyNames": {
+						"anyOf": [
+							{
+								"$ref": "#/definitions/stylesPropertyNames"
+							},
+							{
+								"enum": [ "elements", "variations" ]
+							}
+						]
+					}
 				}
 			]
 		},
@@ -2364,31 +2160,33 @@
 			}
 		},
 		"stylesVariationProperties": {
-			"type": "object",
 			"allOf": [
 				{
 					"$ref": "#/definitions/stylesProperties"
 				},
 				{
+					"type": "object",
 					"properties": {
-						"background": {},
-						"border": {},
-						"color": {},
-						"dimensions": {},
-						"spacing": {},
-						"typography": {},
-						"filter": {},
-						"shadow": {},
-						"outline": {},
-						"css": {},
 						"elements": {
 							"$ref": "#/definitions/stylesElementsPropertiesComplete"
 						},
 						"blocks": {
 							"$ref": "#/definitions/stylesVariationBlocksPropertiesComplete"
 						}
-					},
-					"additionalProperties": false
+					}
+				},
+				{
+					"type": "object",
+					"propertyNames": {
+						"anyOf": [
+							{
+								"$ref": "#/definitions/stylesPropertyNames"
+							},
+							{
+								"enum": [ "elements", "blocks" ]
+							}
+						]
+					}
 				}
 			]
 		},
@@ -2401,31 +2199,33 @@
 			}
 		},
 		"stylesVariationPropertiesComplete": {
-			"type": "object",
 			"allOf": [
 				{
 					"$ref": "#/definitions/stylesProperties"
 				},
 				{
+					"type": "object",
 					"properties": {
-						"background": {},
-						"border": {},
-						"color": {},
-						"dimensions": {},
-						"spacing": {},
-						"typography": {},
-						"filter": {},
-						"shadow": {},
-						"outline": {},
-						"css": {},
 						"elements": {
 							"$ref": "#/definitions/stylesElementsPropertiesComplete"
 						},
 						"blocks": {
 							"$ref": "#/definitions/stylesVariationBlocksPropertiesComplete"
 						}
-					},
-					"additionalProperties": false
+					}
+				},
+				{
+					"type": "object",
+					"propertyNames": {
+						"anyOf": [
+							{
+								"$ref": "#/definitions/stylesPropertyNames"
+							},
+							{
+								"enum": [ "elements", "blocks" ]
+							}
+						]
+					}
 				}
 			]
 		},
@@ -2735,28 +2535,30 @@
 			"additionalProperties": false
 		},
 		"stylesVariationBlockPropertiesComplete": {
-			"type": "object",
 			"allOf": [
 				{
 					"$ref": "#/definitions/stylesProperties"
 				},
 				{
+					"type": "object",
 					"properties": {
-						"background": {},
-						"border": {},
-						"color": {},
-						"dimensions": {},
-						"spacing": {},
-						"typography": {},
-						"filter": {},
-						"shadow": {},
-						"outline": {},
-						"css": {},
 						"elements": {
 							"$ref": "#/definitions/stylesElementsPropertiesComplete"
 						}
-					},
-					"additionalProperties": false
+					}
+				},
+				{
+					"type": "object",
+					"propertyNames": {
+						"anyOf": [
+							{
+								"$ref": "#/definitions/stylesPropertyNames"
+							},
+							{
+								"enum": [ "elements" ]
+							}
+						]
+					}
 				}
 			]
 		}
@@ -2770,78 +2572,73 @@
 		"version": {
 			"description": "Version of theme.json to use.",
 			"type": "integer",
-			"enum": [ 3 ]
+			"const": 3
 		},
 		"title": {
-			"type": "string",
-			"description": "Title of the global styles variation. If not defined, the file name will be used."
+			"description": "Title of the global styles variation. If not defined, the file name will be used.",
+			"type": "string"
 		},
 		"slug": {
-			"type": "string",
-			"description": "Slug of the global styles variation. If not defined, the kebab-case title will be used."
+			"description": "Slug of the global styles variation. If not defined, the kebab-case title will be used.",
+			"type": "string"
 		},
 		"description": {
-			"type": "string",
-			"description": "Description of the global styles variation."
+			"description": "Description of the global styles variation.",
+			"type": "string"
 		},
 		"blockTypes": {
-			"type": "array",
 			"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).",
-			"type": "object",
 			"allOf": [
 				{
 					"$ref": "#/definitions/settingsProperties"
 				},
 				{
+					"type": "object",
 					"properties": {
-						"appearanceTools": {},
 						"useRootPaddingAwareAlignments": {
-							"$ref": "#/definitions/settingsPropertiesUseRootPaddingAwareAlignments/properties/useRootPaddingAwareAlignments"
-						},
-						"background": {},
-						"color": {},
-						"layout": {},
-						"lightbox": {},
-						"spacing": {},
-						"typography": {},
-						"border": {},
-						"shadow": {},
-						"position": {},
-						"dimensions": {},
-						"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": {
 							"$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": {
-						"background": {},
-						"border": {},
-						"color": {},
-						"dimensions": {},
-						"spacing": {},
-						"typography": {},
-						"filter": {},
-						"shadow": {},
-						"outline": {},
-						"css": {},
 						"elements": {
 							"$ref": "#/definitions/stylesElementsPropertiesComplete"
 						},
@@ -2851,8 +2648,20 @@
 						"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
index b082c861e4b67..491d1f8cf7301 100644
--- a/schemas/json/wp-env.json
+++ b/schemas/json/wp-env.json
@@ -1,15 +1,15 @@
 {
 	"title": "JSON schema for WordPress wp-env configuration files",
-	"$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/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.",
-					"default": null,
 					"oneOf": [
 						{
 							"type": "string"
@@ -17,11 +17,11 @@
 						{
 							"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.",
-					"default": null,
 					"oneOf": [
 						{
 							"type": "string"
@@ -29,48 +29,60 @@
 						{
 							"type": "null"
 						}
-					]
+					],
+					"default": null
 				},
 				"plugins": {
 					"description": "A list of plugins to install and activate in the environment.",
-					"default": [],
 					"type": "array",
 					"items": {
 						"type": "string"
-					}
+					},
+					"default": []
 				},
 				"themes": {
 					"description": "A list of themes to install in the environment.",
-					"default": [],
 					"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'.",
-					"default": 8888,
-					"type": "integer"
+					"type": "integer",
+					"default": 8888
 				},
 				"config": {
 					"description": "Mapping of wp-config.php constants to their desired values.",
-					"default": {},
-					"type": "object"
+					"type": "object",
+					"default": {}
 				},
 				"mappings": {
 					"description": "Mapping of WordPress directories to local directories to be mounted in the WordPress instance.",
-					"default": {},
-					"type": "object"
+					"type": "object",
+					"default": {}
 				}
 			}
+		},
+		"wpEnvPropertyNames": {
+			"enum": [
+				"core",
+				"phpVersion",
+				"plugins",
+				"themes",
+				"port",
+				"config",
+				"mappings"
+			]
 		}
 	},
-	"type": "object",
 	"allOf": [
 		{
 			"$ref": "#/definitions/wpEnvProperties"
 		},
 		{
+			"type": "object",
 			"properties": {
 				"$schema": {
 					"type": "string"
@@ -78,43 +90,35 @@
 				"env": {
 					"description": "The key env is available to override any of the above options on an individual-environment basis.",
 					"type": "object",
-					"default": {},
 					"patternProperties": {
 						"[a-zA-Z]": {
-							"type": "object",
 							"allOf": [
 								{ "$ref": "#/definitions/wpEnvProperties" },
 								{
-									"properties": {
-										"core": {},
-										"phpVersion": {},
-										"plugins": {},
-										"themes": {},
-										"port": {},
-										"config": {},
-										"mappings": {}
-									},
-									"additionalProperties": false
+									"type": "object",
+									"propertyNames": {
+										"$ref": "#/definitions/wpEnvPropertyNames"
+									}
 								}
 							]
 						}
-					}
+					},
+					"default": {}
 				}
 			}
 		},
 		{
-			"properties": {
-				"$schema": {},
-				"core": {},
-				"phpVersion": {},
-				"plugins": {},
-				"themes": {},
-				"port": {},
-				"config": {},
-				"mappings": {},
-				"env": {}
-			},
-			"additionalProperties": false
+			"type": "object",
+			"propertyNames": {
+				"anyOf": [
+					{
+						"$ref": "#/definitions/wpEnvPropertyNames"
+					},
+					{
+						"enum": [ "$schema", "env" ]
+					}
+				]
+			}
 		}
 	]
 }
diff --git a/storybook/main.js b/storybook/main.js
index 66e951b26b1de..f111e9f5d8cd3 100644
--- a/storybook/main.js
+++ b/storybook/main.js
@@ -41,6 +41,7 @@ module.exports = {
 		disableTelemetry: true,
 	},
 	stories,
+	staticDirs: [ './static' ],
 	addons: [
 		{
 			name: '@storybook/addon-docs',
diff --git a/storybook/manager-head.html b/storybook/manager-head.html
index ab9c1a7101071..dcafe36caefa7 100644
--- a/storybook/manager-head.html
+++ b/storybook/manager-head.html
@@ -1,10 +1,16 @@
 <script>
 	( function redirectIfStoryMoved() {
 		const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [
-			'navigation',
+			'alignmentmatrixcontrol',
+			'borderboxcontrol',
+			'bordercontrol',
+			'boxcontrol',
 			'customselectcontrol-v2',
-			'theme',
+			'dimensioncontrol',
+			'navigation',
+			'navigator',
 			'progressbar',
+			'theme',
 		];
 		const REDIRECTS = [
 			{
diff --git a/storybook/static/wp-logo@2x.png b/storybook/static/wp-logo@2x.png
new file mode 100644
index 0000000000000..a95cd961902b0
Binary files /dev/null and b/storybook/static/wp-logo@2x.png differ
diff --git a/storybook/stories/playground/fullpage/style.lazy.scss b/storybook/stories/playground/fullpage/style.lazy.scss
index 6d28c1d3c8163..0249011c3e960 100644
--- a/storybook/stories/playground/fullpage/style.lazy.scss
+++ b/storybook/stories/playground/fullpage/style.lazy.scss
@@ -46,19 +46,3 @@
 		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/theme.js b/storybook/theme.js
index c13de5b53d4f5..9e340119eb48f 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/test/e2e/specs/editor/blocks/cover.spec.js b/test/e2e/specs/editor/blocks/cover.spec.js
index fa5103ebaa4ee..cf3005c9eaa18 100644
--- a/test/e2e/specs/editor/blocks/cover.spec.js
+++ b/test/e2e/specs/editor/blocks/cover.spec.js
@@ -158,7 +158,7 @@ test.describe( 'Cover', () => {
 
 		// Ensure there the default value for the minimum height of cover is undefined.
 		const defaultHeightValue = await coverBlockEditorSettings
-			.getByLabel( 'Minimum height of cover' )
+			.getByLabel( 'Minimum height' )
 			.inputValue();
 		expect( defaultHeightValue ).toBeFalsy();
 
diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js
index c4c725e083625..43527b48fbf70 100644
--- a/test/e2e/specs/editor/blocks/image.spec.js
+++ b/test/e2e/specs/editor/blocks/image.spec.js
@@ -708,13 +708,14 @@ test.describe( 'Image', () => {
 
 		await editor.clickBlockToolbarButton( 'Upload to Media Library' );
 
-		const imageBlock = editor.canvas.locator(
-			'role=document[name="Block: Image"i]'
+		await expect(
+			editor.canvas
+				.locator( 'role=document[name="Block: Image"i]' )
+				.locator( 'img[src^="http"]' )
+		).toHaveAttribute(
+			'src',
+			expect.stringMatching( /\/wp-content\/uploads\// )
 		);
-		const image = imageBlock.locator( 'img[src^="http"]' );
-		const src = await image.getAttribute( 'src' );
-
-		expect( src ).toMatch( /\/wp-content\/uploads\// );
 	} );
 
 	test( 'should upload through prepublish panel', async ( {
@@ -736,14 +737,45 @@ test.describe( 'Image', () => {
 			.click();
 
 		await expect( page.locator( '.components-spinner' ) ).toHaveCount( 0 );
-
-		const imageBlock = editor.canvas.locator(
-			'role=document[name="Block: Image"i]'
+		await expect(
+			editor.canvas
+				.locator( 'role=document[name="Block: Image"i]' )
+				.locator( 'img[src^="http"]' )
+		).toHaveAttribute(
+			'src',
+			expect.stringMatching( /\/wp-content\/uploads\// )
 		);
-		const image = imageBlock.locator( 'img[src^="http"]' );
-		const src = await image.getAttribute( 'src' );
+	} );
 
-		expect( src ).toMatch( /\/wp-content\/uploads\// );
+	test( 'uploads data url through blobs from raw handling', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		const blobUrl = await page.evaluate( async () => {
+			const canvas = document.createElement( 'canvas' );
+			canvas.width = 20;
+			canvas.height = 20;
+
+			const ctx = canvas.getContext( '2d' );
+			ctx.fillStyle = 'red';
+			ctx.fillRect( 0, 0, 20, 20 );
+
+			return canvas.toDataURL( 'image/png' );
+		} );
+
+		pageUtils.setClipboardData( { html: `<img src="${ blobUrl }">` } );
+
+		await pageUtils.pressKeys( 'primary+v' );
+
+		await expect(
+			editor.canvas
+				.locator( 'role=document[name="Block: Image"i]' )
+				.locator( 'img[src^="http"]' )
+		).toHaveAttribute(
+			'src',
+			expect.stringMatching( /\/wp-content\/uploads\// )
+		);
 	} );
 
 	test( 'should have keyboard navigable link UI popover', async ( {
diff --git a/test/e2e/specs/editor/plugins/meta-boxes.spec.js b/test/e2e/specs/editor/plugins/meta-boxes.spec.js
index 1b7adc18760ff..511b3837f8030 100644
--- a/test/e2e/specs/editor/plugins/meta-boxes.spec.js
+++ b/test/e2e/specs/editor/plugins/meta-boxes.spec.js
@@ -26,7 +26,7 @@ test.describe( 'Meta boxes', () => {
 		await expect( saveDraft ).toBeDisabled();
 
 		// Add title to enable valid non-empty post save.
-		await page
+		await editor.canvas
 			.getByRole( 'textbox', { name: 'Add title' } )
 			.fill( 'Hello Meta' );
 
@@ -44,7 +44,7 @@ test.describe( 'Meta boxes', () => {
 		page,
 	} ) => {
 		// Publish a post so there's something for the latest posts dynamic block to render.
-		await page
+		await editor.canvas
 			.getByRole( 'textbox', { name: 'Add title' } )
 			.fill( 'A published post' );
 		await page.keyboard.press( 'Enter' );
@@ -53,7 +53,7 @@ test.describe( 'Meta boxes', () => {
 
 		// Publish a post with the latest posts dynamic block.
 		await admin.createNewPost();
-		await page
+		await editor.canvas
 			.getByRole( 'textbox', { name: 'Add title' } )
 			.fill( 'Dynamic block test' );
 		await editor.insertBlock( { name: 'core/latest-posts' } );
@@ -70,10 +70,12 @@ test.describe( 'Meta boxes', () => {
 		editor,
 		page,
 	} ) => {
-		await page
+		await editor.canvas
 			.getByRole( 'textbox', { name: 'Add title' } )
 			.fill( 'A published post' );
-		await page.getByRole( 'button', { name: 'Add default block' } ).click();
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
 		await page.keyboard.type( 'Excerpt from content.' );
 
 		const postId = await editor.publishPost();
@@ -89,9 +91,11 @@ test.describe( 'Meta boxes', () => {
 		page,
 	} ) => {
 		await editor.openDocumentSettingsSidebar();
-		await page.getByRole( 'button', { name: 'Add default block' } ).click();
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
 		await page.keyboard.type( 'Excerpt from content.' );
-		await page
+		await editor.canvas
 			.getByRole( 'textbox', { name: 'Add title' } )
 			.fill( 'A published post' );
 
diff --git a/test/e2e/specs/editor/plugins/plugins-api.spec.js b/test/e2e/specs/editor/plugins/plugins-api.spec.js
index c71b49e3c4d81..c7f3a655e1424 100644
--- a/test/e2e/specs/editor/plugins/plugins-api.spec.js
+++ b/test/e2e/specs/editor/plugins/plugins-api.spec.js
@@ -230,4 +230,25 @@ test.describe( 'Plugins API', () => {
 			).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
index dc56b6a9b3b42..af6256d05e02e 100644
--- a/test/e2e/specs/editor/plugins/post-type-locking.spec.js
+++ b/test/e2e/specs/editor/plugins/post-type-locking.spec.js
@@ -363,6 +363,7 @@ test.describe( 'Post-type locking', () => {
 				'Buttons',
 				'Code',
 				'Columns',
+				'Details',
 				'Group',
 				'Preformatted',
 				'Pullquote',
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 710e06b35e124..c5eafdafe918d 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,7 +20,7 @@ test.describe( 'WP Editor Meta Boxes', () => {
 		await admin.createNewPost();
 
 		// Add title to enable valid non-empty post save.
-		await page
+		await editor.canvas
 			.locator( 'role=textbox[name="Add title"i]' )
 			.type( 'Hello Meta' );
 
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 0000000000000..73ed409054991
--- /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__/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 45d99c7c27e6f..753c30a092670 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","metadata":{"categories":["call-to-action"],"patternName":"core/social-links-shared-background-color","name":"Social links with a shared background color"},"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 45d99c7c27e6f..753c30a092670 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","metadata":{"categories":["call-to-action"],"patternName":"core/social-links-shared-background-color","name":"Social links with a shared background color"},"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/adding-inline-tokens.spec.js b/test/e2e/specs/editor/various/adding-inline-tokens.spec.js
index 15f9d9ea87732..c7826ebf26282 100644
--- a/test/e2e/specs/editor/various/adding-inline-tokens.spec.js
+++ b/test/e2e/specs/editor/various/adding-inline-tokens.spec.js
@@ -64,13 +64,16 @@ test.describe( 'adding inline tokens', () => {
 		await pageUtils.pressKeys( 'shift+ArrowLeft' );
 
 		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-		await page.fill( 'role=spinbutton[name="WIDTH"i]', '20' );
+		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=""\\/?>`
+			`a <img class="wp-image-\\d+" style="width:\\s*20px;?" src="[^"]+\\/${ filename }\\.png" alt="Alt"\\/?>`
 		);
 
 		await expect.poll( editor.getBlocks ).toMatchObject( [
diff --git a/test/e2e/specs/editor/various/adding-patterns.spec.js b/test/e2e/specs/editor/various/adding-patterns.spec.js
index 2846c7adac271..35192dd364dc6 100644
--- a/test/e2e/specs/editor/various/adding-patterns.spec.js
+++ b/test/e2e/specs/editor/various/adding-patterns.spec.js
@@ -14,15 +14,13 @@ test.describe( 'adding patterns', () => {
 		await page.getByRole( 'tab', { name: 'Patterns' } ).click();
 		await page.fill(
 			'role=region[name="Block Library"i] >> role=searchbox[name="Search for blocks and patterns"i]',
-			'Social links with a shared background color'
+			'Standard'
 		);
 
-		await page.click(
-			'role=option[name="Social links with a shared background color"i]'
-		);
+		await page.getByRole( 'option', { name: 'Standard' } ).click();
 		await expect.poll( editor.getBlocks ).toMatchObject( [
 			{
-				name: 'core/social-links',
+				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
index e592f776c61dd..83d44403d60ee 100644
--- a/test/e2e/specs/editor/various/allowed-patterns.spec.js
+++ b/test/e2e/specs/editor/various/allowed-patterns.spec.js
@@ -14,10 +14,7 @@ test.describe( 'Allowed Patterns', () => {
 		);
 	} );
 
-	test( 'should show all patterns when all blocks are allowed', async ( {
-		admin,
-		page,
-	} ) => {
+	test( 'should show all patterns by default', async ( { admin, page } ) => {
 		await admin.createNewPost();
 		await page
 			.getByRole( 'toolbar', { name: 'Document tools' } )
@@ -57,7 +54,7 @@ test.describe( 'Allowed Patterns', () => {
 			);
 		} );
 
-		test( 'should show only allowed patterns', async ( {
+		test( 'should hide patterns with only hidden blocks', async ( {
 			admin,
 			page,
 		} ) => {
diff --git a/test/e2e/specs/editor/various/block-bindings.spec.js b/test/e2e/specs/editor/various/block-bindings.spec.js
deleted file mode 100644
index 1499e255482c6..0000000000000
--- a/test/e2e/specs/editor/various/block-bindings.spec.js
+++ /dev/null
@@ -1,2204 +0,0 @@
-/**
- * External dependencies
- */
-const path = require( 'path' );
-/**
- * WordPress dependencies
- */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
-
-test.describe( 'Block bindings', () => {
-	let imagePlaceholderSrc;
-	let imageCustomFieldSrc;
-	test.beforeAll( async ( { requestUtils } ) => {
-		await requestUtils.activateTheme( 'emptytheme' );
-		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;
-	} );
-
-	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( 'Template context', () => {
-		test.beforeEach( async ( { admin, editor } ) => {
-			await admin.visitSiteEditor( {
-				postId: 'emptytheme//index',
-				postType: 'wp_template',
-				canvas: 'edit',
-			} );
-			await editor.openDocumentSettingsSidebar();
-		} );
-
-		test.describe( 'Paragraph', () => {
-			test( 'should show the value of the custom field', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						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 ).toHaveText(
-					'text_custom_field'
-				);
-			} );
-
-			test( 'should lock the appropriate controls with a registered source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						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 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( 'should lock the appropriate controls when source is not defined', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						content: 'paragraph default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'plugin/undefined-source',
-									args: { key: 'text_custom_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( 'Heading', () => {
-			test( 'should show the key of the custom field', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/heading',
-					attributes: {
-						content: 'heading default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const headingBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Heading',
-				} );
-				await expect( headingBlock ).toHaveText( 'text_custom_field' );
-			} );
-
-			test( 'should lock the appropriate controls with a registered source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/heading',
-					attributes: {
-						content: 'heading default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_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( 'should lock the appropriate controls when source is not defined', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/heading',
-					attributes: {
-						content: 'heading default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'plugin/undefined-source',
-									args: { key: 'text_custom_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.describe( 'Button', () => {
-			test( 'should show the key of the custom field when text is bound', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/buttons',
-					innerBlocks: [
-						{
-							name: 'core/button',
-							attributes: {
-								text: 'button default text',
-								url: '#default-url',
-								metadata: {
-									bindings: {
-										text: {
-											source: 'core/post-meta',
-											args: { key: 'text_custom_field' },
-										},
-									},
-								},
-							},
-						},
-					],
-				} );
-				const buttonBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Button',
-					exact: true,
-				} );
-				await expect( buttonBlock ).toHaveText( 'text_custom_field' );
-			} );
-
-			test( 'should lock text controls when text is bound to a registered source', 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: 'core/post-meta',
-											args: { key: 'text_custom_field' },
-										},
-									},
-								},
-							},
-						},
-					],
-				} );
-				const buttonBlock = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Button',
-						exact: true,
-					} )
-					.getByRole( 'textbox' );
-				await buttonBlock.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();
-
-				// Button is not editable.
-				await expect( buttonBlock ).toHaveAttribute(
-					'contenteditable',
-					'false'
-				);
-
-				// Link controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', { name: 'Unlink' } )
-				).toBeVisible();
-			} );
-
-			test( 'should lock text controls when text is bound to an undefined source', 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: 'plugin/undefined-source',
-											args: { key: 'text_custom_field' },
-										},
-									},
-								},
-							},
-						},
-					],
-				} );
-				const buttonBlock = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Button',
-						exact: true,
-					} )
-					.getByRole( 'textbox' );
-				await buttonBlock.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();
-
-				// Button is not editable.
-				await expect( buttonBlock ).toHaveAttribute(
-					'contenteditable',
-					'false'
-				);
-
-				// Link controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', { name: 'Unlink' } )
-				).toBeVisible();
-			} );
-
-			test( 'should lock url controls when url is bound to a registered source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/buttons',
-					innerBlocks: [
-						{
-							name: 'core/button',
-							attributes: {
-								text: 'button default text',
-								url: '#default-url',
-								metadata: {
-									bindings: {
-										url: {
-											source: 'core/post-meta',
-											args: { key: 'url_custom_field' },
-										},
-									},
-								},
-							},
-						},
-					],
-				} );
-				const buttonBlock = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Button',
-						exact: true,
-					} )
-					.getByRole( 'textbox' );
-				await buttonBlock.click();
-
-				// Format controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Bold',
-						} )
-				).toBeVisible();
-
-				// Button is editable.
-				await expect( buttonBlock ).toHaveAttribute(
-					'contenteditable',
-					'true'
-				);
-
-				// 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( 'should lock url controls when url is bound to an undefined source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/buttons',
-					innerBlocks: [
-						{
-							name: 'core/button',
-							attributes: {
-								text: 'button default text',
-								url: '#default-url',
-								metadata: {
-									bindings: {
-										url: {
-											source: 'plugin/undefined-source',
-											args: { key: 'url_custom_field' },
-										},
-									},
-								},
-							},
-						},
-					],
-				} );
-				const buttonBlock = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Button',
-						exact: true,
-					} )
-					.getByRole( 'textbox' );
-				await buttonBlock.click();
-
-				// Format controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Bold',
-						} )
-				).toBeVisible();
-
-				// Button is editable.
-				await expect( buttonBlock ).toHaveAttribute(
-					'contenteditable',
-					'true'
-				);
-
-				// 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( 'should lock url and text controls when both are bound', 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: 'core/post-meta',
-											args: { key: 'text_custom_field' },
-										},
-										url: {
-											source: 'core/post-meta',
-											args: { key: 'url_custom_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.describe( 'Image', () => {
-			test( 'should show the upload form when url is not bound', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( { name: 'core/image' } );
-				const imageBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Image',
-				} );
-				await imageBlock.click();
-				await expect(
-					imageBlock.getByRole( 'button', { name: 'Upload' } )
-				).toBeVisible();
-			} );
-
-			test( 'should NOT show the upload form when url is bound to a registered source', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								url: {
-									source: 'core/post-meta',
-									args: { key: 'url_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Image',
-				} );
-				await imageBlock.click();
-				await expect(
-					imageBlock.getByRole( 'button', { name: 'Upload' } )
-				).toBeHidden();
-			} );
-
-			test( 'should NOT show the upload form when url is bound to an undefined source', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								url: {
-									source: 'plugin/undefined-source',
-									args: { key: 'url_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Image',
-				} );
-				await imageBlock.click();
-				await expect(
-					imageBlock.getByRole( 'button', { name: 'Upload' } )
-				).toBeHidden();
-			} );
-
-			test( 'should lock url controls when url is bound to a registered source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								url: {
-									source: 'core/post-meta',
-									args: { key: 'url_custom_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 enabled and with the original value.
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Alternative text' )
-				).toBeEnabled();
-				const altValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Alternative text' )
-					.inputValue();
-				expect( altValue ).toBe( 'default alt 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' )
-				).toBeEnabled();
-				const titleValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Title attribute' )
-					.inputValue();
-				expect( titleValue ).toBe( 'default title value' );
-			} );
-
-			test( 'should lock url controls when url is bound to an undefined source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								url: {
-									source: 'plugin/undefined-source',
-									args: { key: 'url_custom_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 enabled and with the original value.
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Alternative text' )
-				).toBeEnabled();
-				const altValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Alternative text' )
-					.inputValue();
-				expect( altValue ).toBe( 'default alt 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' )
-				).toBeEnabled();
-				const titleValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Title attribute' )
-					.inputValue();
-				expect( titleValue ).toBe( 'default title value' );
-			} );
-
-			test( 'should disable alt textarea when alt is bound to a registered source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								alt: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Image',
-				} );
-				await imageBlock.click();
-
-				// Replace controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Replace',
-						} )
-				).toBeVisible();
-
-				// 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_custom_field' );
-
-				// 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' )
-				).toBeEnabled();
-				const titleValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Title attribute' )
-					.inputValue();
-				expect( titleValue ).toBe( 'default title value' );
-			} );
-
-			test( 'should disable alt textarea when alt is bound to an undefined source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								alt: {
-									source: 'plguin/undefined-source',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Image',
-				} );
-				await imageBlock.click();
-
-				// Replace controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Replace',
-						} )
-				).toBeVisible();
-
-				// 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( 'default alt 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' )
-				).toBeEnabled();
-				const titleValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Title attribute' )
-					.inputValue();
-				expect( titleValue ).toBe( 'default title value' );
-			} );
-
-			test( 'should disable title input when title is bound to a registered source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								title: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Image',
-				} );
-				await imageBlock.click();
-
-				// Replace controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Replace',
-						} )
-				).toBeVisible();
-
-				// Alt textarea is enabled and with the original value.
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Alternative text' )
-				).toBeEnabled();
-				const altValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Alternative text' )
-					.inputValue();
-				expect( altValue ).toBe( 'default alt value' );
-
-				// Title input is disabled and with the custom field 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_custom_field' );
-			} );
-
-			test( 'should disable title input when title is bound to an undefined source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								title: {
-									source: 'plugin/undefined-source',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Image',
-				} );
-				await imageBlock.click();
-
-				// Replace controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Replace',
-						} )
-				).toBeVisible();
-
-				// Alt textarea is enabled and with the original value.
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Alternative text' )
-				).toBeEnabled();
-				const altValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Alternative text' )
-					.inputValue();
-				expect( altValue ).toBe( 'default alt value' );
-
-				// Title input is disabled and with the custom field 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( 'default title value' );
-			} );
-
-			test( 'Multiple bindings should lock the appropriate controls', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								url: {
-									source: 'core/post-meta',
-									args: { key: 'url_custom_field' },
-								},
-								alt: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_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_custom_field' );
-
-				// 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' )
-				).toBeEnabled();
-				const titleValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Title attribute' )
-					.inputValue();
-				expect( titleValue ).toBe( 'default title value' );
-			} );
-		} );
-	} );
-
-	test.describe( 'Post/page context', () => {
-		test.beforeEach( async ( { admin } ) => {
-			await admin.createNewPost( { title: 'Test bindings' } );
-		} );
-		test.describe( 'Paragraph', () => {
-			test( 'should show the value of the custom field when exists', 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 ).toHaveText(
-					'Value of the text_custom_field'
-				);
-
-				// Check the frontend shows the value of the custom field.
-				const previewPage = await editor.openPreviewPage();
-				await expect(
-					previewPage.locator( '#paragraph-binding' )
-				).toHaveText( 'Value of the text_custom_field' );
-			} );
-
-			test( "should show the value of the key when custom field doesn't exist", async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						anchor: 'paragraph-binding',
-						content: 'fallback value',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'non_existing_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const paragraphBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Paragraph',
-				} );
-				await expect( paragraphBlock ).toHaveText(
-					'non_existing_custom_field'
-				);
-				// Paragraph is not editable.
-				await expect( paragraphBlock ).toHaveAttribute(
-					'contenteditable',
-					'false'
-				);
-
-				// Check the frontend doesn't show the content.
-				const previewPage = await editor.openPreviewPage();
-				await expect(
-					previewPage.locator( '#paragraph-binding' )
-				).toHaveText( 'fallback value' );
-			} );
-
-			test( 'should not show the value of a protected meta field', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						anchor: 'paragraph-binding',
-						content: 'fallback value',
-						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' );
-				// Check the frontend doesn't show the content.
-				const previewPage = await editor.openPreviewPage();
-				await expect(
-					previewPage.locator( '#paragraph-binding' )
-				).toHaveText( 'fallback value' );
-			} );
-
-			test( 'should not show the value of a meta field with `show_in_rest` false', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						anchor: 'paragraph-binding',
-						content: 'fallback value',
-						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'
-				);
-				// Check the frontend doesn't show the content.
-				const previewPage = await editor.openPreviewPage();
-				await expect(
-					previewPage.locator( '#paragraph-binding' )
-				).toHaveText( 'fallback value' );
-			} );
-
-			test( 'should add empty paragraph block when pressing enter', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						content: 'paragraph default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_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(
-					'Value of the text_custom_field'
-				);
-				await expect( newEmptyParagraph ).toHaveText( '' );
-				await expect( newEmptyParagraph ).toBeEditable();
-			} );
-
-			test( 'should NOT be possible to edit the value of the custom field when it is protected', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						anchor: 'protected-field-binding',
-						content: 'fallback value',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: '_protected_field' },
-								},
-							},
-						},
-					},
-				} );
-
-				const protectedFieldBlock = editor.canvas.getByRole(
-					'document',
-					{
-						name: 'Block: Paragraph',
-					}
-				);
-
-				await expect( protectedFieldBlock ).toHaveAttribute(
-					'contenteditable',
-					'false'
-				);
-			} );
-
-			test( 'should NOT be possible to edit the value of the custom field when it is not shown in the REST API', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						anchor: 'show-in-rest-false-binding',
-						content: 'fallback value',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'show_in_rest_false_field' },
-								},
-							},
-						},
-					},
-				} );
-
-				const showInRestFalseBlock = editor.canvas.getByRole(
-					'document',
-					{
-						name: 'Block: Paragraph',
-					}
-				);
-
-				await expect( showInRestFalseBlock ).toHaveAttribute(
-					'contenteditable',
-					'false'
-				);
-			} );
-		} );
-
-		test.describe( 'Heading', () => {
-			test( 'should show the value of the custom field', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/heading',
-					attributes: {
-						anchor: 'heading-binding',
-						content: 'heading default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const headingBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Heading',
-				} );
-				await expect( headingBlock ).toHaveText(
-					'Value of the text_custom_field'
-				);
-
-				// Check the frontend shows the value of the custom field.
-				const previewPage = await editor.openPreviewPage();
-				await expect(
-					previewPage.locator( '#heading-binding' )
-				).toHaveText( 'Value of the text_custom_field' );
-			} );
-
-			test( 'should add empty paragraph block when pressing enter', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/heading',
-					attributes: {
-						anchor: 'heading-binding',
-						content: 'heading default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_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(
-					'Value of the text_custom_field'
-				);
-				// 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.describe( 'Button', () => {
-			test( 'should show the value of the custom field when text is bound', async ( {
-				editor,
-			} ) => {
-				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: 'core/post-meta',
-											args: { key: 'text_custom_field' },
-										},
-									},
-								},
-							},
-						},
-					],
-				} );
-				const buttonBlock = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Button',
-						exact: true,
-					} )
-					.getByRole( 'textbox' );
-				await buttonBlock.click();
-				await expect( buttonBlock ).toHaveText(
-					'Value of the text_custom_field'
-				);
-
-				// Check the frontend shows the value of the custom field.
-				const previewPage = await editor.openPreviewPage();
-				const buttonDom = previewPage.locator(
-					'#button-text-binding a'
-				);
-				await expect( buttonDom ).toHaveText(
-					'Value of the text_custom_field'
-				);
-				await expect( buttonDom ).toHaveAttribute(
-					'href',
-					'#default-url'
-				);
-			} );
-
-			test( 'should use the value of the custom field when url is bound', async ( {
-				editor,
-			} ) => {
-				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' },
-										},
-									},
-								},
-							},
-						},
-					],
-				} );
-
-				// Check the frontend shows the original value of the custom field.
-				const previewPage = await editor.openPreviewPage();
-				const buttonDom = previewPage.locator(
-					'#button-url-binding a'
-				);
-				await expect( buttonDom ).toHaveText( 'button default text' );
-				await expect( buttonDom ).toHaveAttribute(
-					'href',
-					'#url-custom-field'
-				);
-			} );
-
-			test( 'should use the values of the custom fields when text and url are bound', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/buttons',
-					innerBlocks: [
-						{
-							name: 'core/button',
-							attributes: {
-								anchor: 'button-multiple-bindings',
-								text: 'button default text',
-								url: '#default-url',
-								metadata: {
-									bindings: {
-										text: {
-											source: 'core/post-meta',
-											args: { key: 'text_custom_field' },
-										},
-										url: {
-											source: 'core/post-meta',
-											args: { key: 'url_custom_field' },
-										},
-									},
-								},
-							},
-						},
-					],
-				} );
-
-				// Check the frontend uses the values of the custom fields.
-				const previewPage = await editor.openPreviewPage();
-				const buttonDom = previewPage.locator(
-					'#button-multiple-bindings a'
-				);
-				await expect( buttonDom ).toHaveText(
-					'Value of the text_custom_field'
-				);
-				await expect( buttonDom ).toHaveAttribute(
-					'href',
-					'#url-custom-field'
-				);
-			} );
-
-			test( 'should add empty button block when pressing enter', 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: 'core/post-meta',
-											args: { key: 'text_custom_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(
-					'Value of the text_custom_field'
-				);
-				// Second block should be an empty paragraph block.
-				await expect( newEmptyButton ).toHaveText( '' );
-				await expect( newEmptyButton ).toBeEditable();
-			} );
-		} );
-
-		test.describe( 'Image', () => {
-			test.beforeAll( async ( { requestUtils } ) => {
-				const customFieldMedia = await requestUtils.uploadMedia(
-					path.join(
-						'./test/e2e/assets',
-						'1024x768_e2e_test_image_size.jpeg'
-					)
-				);
-				imageCustomFieldSrc = customFieldMedia.source_url;
-			} );
-
-			test.beforeEach( async ( { editor, page, requestUtils } ) => {
-				const postId = await editor.publishPost();
-				await requestUtils.rest( {
-					method: 'POST',
-					path: '/wp/v2/posts/' + postId,
-					data: {
-						meta: {
-							url_custom_field: imageCustomFieldSrc,
-						},
-					},
-				} );
-				await page.reload();
-			} );
-			test( 'should show the value of the custom field when url is bound', async ( {
-				editor,
-			} ) => {
-				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' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlockImg = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Image',
-					} )
-					.locator( 'img' );
-				await expect( imageBlockImg ).toHaveAttribute(
-					'src',
-					imageCustomFieldSrc
-				);
-
-				// Check the frontend uses the value of the custom field.
-				const previewPage = await editor.openPreviewPage();
-				const imageDom = previewPage.locator(
-					'#image-url-binding img'
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'src',
-					imageCustomFieldSrc
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'alt',
-					'default alt value'
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'title',
-					'default title value'
-				);
-			} );
-
-			test( 'should show value of the custom field in the alt textarea when alt is bound', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						anchor: 'image-alt-binding',
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								alt: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlockImg = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Image',
-					} )
-					.locator( 'img' );
-				await imageBlockImg.click();
-
-				// Image src is the placeholder.
-				await expect( imageBlockImg ).toHaveAttribute(
-					'src',
-					imagePlaceholderSrc
-				);
-
-				// Alt textarea should have the custom field value.
-				const altValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Alternative text' )
-					.inputValue();
-				expect( altValue ).toBe( 'Value of the text_custom_field' );
-
-				// Check the frontend uses the value of the custom field.
-				const previewPage = await editor.openPreviewPage();
-				const imageDom = previewPage.locator(
-					'#image-alt-binding img'
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'src',
-					imagePlaceholderSrc
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'alt',
-					'Value of the text_custom_field'
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'title',
-					'default title value'
-				);
-			} );
-
-			test( 'should show value of the custom field in the title input when title is bound', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						anchor: 'image-title-binding',
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								title: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlockImg = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Image',
-					} )
-					.locator( 'img' );
-				await imageBlockImg.click();
-
-				// Image src is the placeholder.
-				await expect( imageBlockImg ).toHaveAttribute(
-					'src',
-					imagePlaceholderSrc
-				);
-
-				// Title input should have the custom field 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( 'Value of the text_custom_field' );
-
-				// Check the frontend uses the value of the custom field.
-				const previewPage = await editor.openPreviewPage();
-				const imageDom = previewPage.locator(
-					'#image-title-binding img'
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'src',
-					imagePlaceholderSrc
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'alt',
-					'default alt value'
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'title',
-					'Value of the text_custom_field'
-				);
-			} );
-
-			test( 'Multiple bindings should show the value of the custom fields', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						anchor: 'image-multiple-bindings',
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								url: {
-									source: 'core/post-meta',
-									args: { key: 'url_custom_field' },
-								},
-								alt: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlockImg = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Image',
-					} )
-					.locator( 'img' );
-				await imageBlockImg.click();
-
-				// Image src is the custom field value.
-				await expect( imageBlockImg ).toHaveAttribute(
-					'src',
-					imageCustomFieldSrc
-				);
-
-				// Alt textarea should have the custom field value.
-				const altValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Alternative text' )
-					.inputValue();
-				expect( altValue ).toBe( 'Value of the text_custom_field' );
-
-				// 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(
-					'#image-multiple-bindings img'
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'src',
-					imageCustomFieldSrc
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'alt',
-					'Value of the text_custom_field'
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'title',
-					'default title value'
-				);
-			} );
-		} );
-
-		test.describe( 'Edit custom fields', () => {
-			test( 'should be possible to edit the value of the custom field from the paragraph', 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( '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( '#paragraph-binding' )
-				).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'
-					)
-				);
-				imageCustomFieldSrc = 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( imageCustomFieldSrc );
-				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', imageCustomFieldSrc );
-			} );
-
-			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' );
-				await imageBlockImg.click();
-
-				// 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( 'Sources registration', () => {
-		test.beforeEach( async ( { admin } ) => {
-			await admin.createNewPost( { title: 'Test bindings' } );
-		} );
-
-		test( 'should show the label of a source only registered in the server', async ( {
-			editor,
-			page,
-		} ) => {
-			await editor.insertBlock( {
-				name: 'core/paragraph',
-				attributes: {
-					metadata: {
-						bindings: {
-							content: {
-								source: 'core/server-source',
-							},
-						},
-					},
-				},
-			} );
-
-			const bindingLabel = page.locator(
-				'.components-item__block-bindings-source'
-			);
-			await expect( bindingLabel ).toHaveText( 'Server Source' );
-		} );
-	} );
-} );
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 0000000000000..d6563ce9cb5f5
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-bindings/custom-sources.spec.js
@@ -0,0 +1,1204 @@
+/**
+ * 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' );
+			await imageBlockImg.click();
+
+			// 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' );
+			await imageBlockImg.click();
+
+			// 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 0000000000000..d82def6feb66b
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-bindings/post-meta.spec.js
@@ -0,0 +1,551 @@
+/**
+ * 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();
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/block-moving-mode.spec.js b/test/e2e/specs/editor/various/block-moving-mode.spec.js
deleted file mode 100644
index 5b8ef6bdcd051..0000000000000
--- a/test/e2e/specs/editor/various/block-moving-mode.spec.js
+++ /dev/null
@@ -1,155 +0,0 @@
-/**
- * WordPress dependencies
- */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
-
-test.describe( 'Block moving mode', () => {
-	test.beforeEach( async ( { admin } ) => {
-		await admin.createNewPost();
-	} );
-
-	test.afterEach( async ( { requestUtils } ) => {
-		await requestUtils.deleteAllPosts();
-	} );
-
-	test( 'can move block', async ( { editor, page } ) => {
-		await editor.insertBlock( {
-			name: 'core/paragraph',
-			attributes: { content: 'First Paragraph' },
-		} );
-		await editor.insertBlock( {
-			name: 'core/paragraph',
-			attributes: { content: 'Second Paragraph' },
-		} );
-
-		// Move the second block in front of the first block.
-		await editor.showBlockToolbar();
-		await page
-			.getByRole( 'toolbar', { name: 'Block tools' } )
-			.getByRole( 'button', { name: 'Options' } )
-			.click();
-		await page.getByRole( 'menuitem', { name: 'Move to' } ).click();
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'Enter' );
-
-		await expect.poll( editor.getBlocks ).toMatchObject( [
-			{
-				name: 'core/paragraph',
-				attributes: { content: 'Second Paragraph' },
-			},
-			{
-				name: 'core/paragraph',
-				attributes: { content: 'First Paragraph' },
-			},
-		] );
-	} );
-
-	test( 'can move block in the nested block', async ( { editor, page } ) => {
-		// Create two group blocks with some blocks.
-		await editor.insertBlock( { name: 'core/group' } );
-		await editor.canvas
-			.locator(
-				'role=button[name="Group: Gather blocks in a container."i]'
-			)
-			.click();
-		await page.keyboard.press( 'ArrowDown' );
-		await page.keyboard.press( 'Enter' );
-		await page.getByRole( 'option', { name: 'Paragraph' } ).click();
-		await page.keyboard.type( 'First Paragraph' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Second Paragraph' );
-
-		await editor.insertBlock( { name: 'core/group' } );
-		await editor.canvas
-			.locator(
-				'role=button[name="Group: Gather blocks in a container."i]'
-			)
-			.click();
-		await page.keyboard.press( 'ArrowDown' );
-		await page.keyboard.press( 'Enter' );
-		await page.getByRole( 'option', { name: 'Paragraph' } ).click();
-		await page.keyboard.type( 'Third Paragraph' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Fourth Paragraph' );
-
-		// Move a paragraph block in the first group block into the second group block.
-		const paragraphBlock = editor.canvas.locator(
-			'text="First Paragraph"'
-		);
-		await paragraphBlock.focus();
-		await editor.showBlockToolbar();
-		await page
-			.getByRole( 'toolbar', { name: 'Block tools' } )
-			.getByRole( 'button', { name: 'Options' } )
-			.click();
-		await page.getByRole( 'menuitem', { name: 'Move to' } ).click();
-		await page.keyboard.press( 'ArrowLeft' ); // Select the first group block.
-		await page.keyboard.press( 'ArrowDown' ); // Select the second group block.
-		await page.keyboard.press( 'ArrowRight' ); // Enter the second group block.
-		await page.keyboard.press( 'ArrowDown' ); // Move down in the second group block.
-		await page.keyboard.press( 'Enter' );
-
-		await expect.poll( editor.getBlocks ).toMatchObject( [
-			{
-				name: 'core/group',
-				innerBlocks: [
-					{
-						name: 'core/paragraph',
-						attributes: { content: 'Second Paragraph' },
-					},
-				],
-			},
-			{
-				name: 'core/group',
-				innerBlocks: [
-					{
-						name: 'core/paragraph',
-						attributes: { content: 'Third Paragraph' },
-					},
-					{
-						name: 'core/paragraph',
-						attributes: { content: 'First Paragraph' },
-					},
-					{
-						name: 'core/paragraph',
-						attributes: { content: 'Fourth Paragraph' },
-					},
-				],
-			},
-		] );
-	} );
-
-	test( 'can not move inside its own block', async ( { editor, page } ) => {
-		// Create a paragraph block and a group block.
-		await editor.insertBlock( {
-			name: 'core/paragraph',
-			attributes: { content: 'First Paragraph' },
-		} );
-		await editor.insertBlock( { name: 'core/group' } );
-		await editor.canvas
-			.locator(
-				'role=button[name="Group: Gather blocks in a container."i]'
-			)
-			.click();
-		await page.keyboard.press( 'ArrowDown' );
-		await page.keyboard.press( 'Enter' );
-		await page.getByRole( 'option', { name: 'Paragraph' } ).click();
-		await page.keyboard.type( 'Second Paragraph' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Third Paragraph' );
-
-		// Trying to move the group block into its own.
-		const groupBlock = editor.canvas.locator(
-			'role=document[name="Block: Group"i]'
-		);
-		await groupBlock.focus();
-		await editor.showBlockToolbar();
-		await page
-			.getByRole( 'toolbar', { name: 'Block tools' } )
-			.getByRole( 'button', { name: 'Options' } )
-			.click();
-		await page.getByRole( 'menuitem', { name: 'Move to' } ).click();
-		await page.keyboard.press( 'ArrowRight' );
-		await expect( groupBlock ).toHaveClass( /is-selected/ );
-	} );
-} );
diff --git a/test/e2e/specs/editor/various/block-switcher.spec.js b/test/e2e/specs/editor/various/block-switcher.spec.js
index 88d58651a715a..41b0b1ee49c88 100644
--- a/test/e2e/specs/editor/various/block-switcher.spec.js
+++ b/test/e2e/specs/editor/various/block-switcher.spec.js
@@ -34,7 +34,14 @@ test.describe( 'Block Switcher', () => {
 		await blockSwitcher.click();
 		await expect(
 			page.getByRole( 'menu', { name: 'List' } ).getByRole( 'menuitem' )
-		).toHaveText( [ 'Paragraph', 'Heading', 'Quote', 'Columns', 'Group' ] );
+		).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 ( {
@@ -74,7 +81,13 @@ test.describe( 'Block Switcher', () => {
 		await blockSwitcher.click();
 		await expect(
 			page.getByRole( 'menu', { name: 'List' } ).getByRole( 'menuitem' )
-		).toHaveText( [ 'Paragraph', 'Heading', 'Columns', 'Group' ] );
+		).toHaveText( [
+			'Paragraph',
+			'Heading',
+			'Columns',
+			'Details',
+			'Group',
+		] );
 	} );
 
 	test( 'Should not show the block switcher if the block has no styles and cannot be removed', async ( {
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 0000000000000..bed337624275e
--- /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: 'Toggle block inserter' } )
+			.click();
+		await page
+			.getByRole( 'region', { name: 'Block Library' } )
+			.getByRole( 'searchbox', {
+				name: 'Search for blocks and patterns',
+			} )
+			.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: 'Toggle block inserter' } )
+			.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: 'Toggle block inserter' } )
+			.click();
+		await page
+			.getByRole( 'region', { name: 'Block Library' } )
+			.getByRole( 'searchbox', {
+				name: 'Search for blocks and patterns',
+			} )
+			.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: 'Toggle block inserter' } )
+			.click();
+
+		await expect(
+			page
+				.getByRole( 'tabpanel', { name: 'Blocks' } )
+				.getByRole( 'heading', { name: 'Media' } ),
+			'Media category should not be visible'
+		).toBeHidden();
+
+		await page
+			.getByRole( 'button', { name: 'Toggle block inserter' } )
+			.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: 'Toggle block inserter' } )
+			.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
index 4ac262f4c1348..12d13b4890e36 100644
--- a/test/e2e/specs/editor/various/change-detection.spec.js
+++ b/test/e2e/specs/editor/various/change-detection.spec.js
@@ -80,9 +80,7 @@ test.describe( 'Change detection', () => {
 
 		// Toggle post as needing review (not persisted for autosave).
 		await editor.openDocumentSettingsSidebar();
-		await page
-			.getByRole( 'button', { name: 'Change post status:' } )
-			.click();
+		await page.getByRole( 'button', { name: 'Change status:' } ).click();
 		await page.getByRole( 'radio', { name: 'Pending' } ).click();
 		// Force autosave to occur immediately.
 		await Promise.all( [
@@ -416,7 +414,7 @@ test.describe( 'Change detection', () => {
 			.click();
 		await page
 			.getByRole( 'menu' )
-			.getByRole( 'menuitem', { name: 'Move to Trash' } )
+			.getByRole( 'menuitem', { name: 'Move to trash' } )
 			.click();
 		await page
 			.getByRole( 'dialog' )
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 33a65e6f5a119..bca062b06416a 100644
--- a/test/e2e/specs/editor/various/copy-cut-paste.spec.js
+++ b/test/e2e/specs/editor/various/copy-cut-paste.spec.js
@@ -565,6 +565,27 @@ test.describe( 'Copy/cut/paste', () => {
 		] );
 	} );
 
+	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',
diff --git a/test/e2e/specs/editor/various/footnotes.spec.js b/test/e2e/specs/editor/various/footnotes.spec.js
index fc1918ba7ceb0..d9f571414bacf 100644
--- a/test/e2e/specs/editor/various/footnotes.spec.js
+++ b/test/e2e/specs/editor/various/footnotes.spec.js
@@ -456,4 +456,36 @@ test.describe( 'Footnotes', () => {
 			'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/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js
index 1a443152800de..b4f23c8b8e2bb 100644
--- a/test/e2e/specs/editor/various/inserting-blocks.spec.js
+++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js
@@ -194,7 +194,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 			'role=region[name="Editor top bar"i] >> role=button[name="Toggle 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]',
@@ -350,7 +350,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 			'role=region[name="Editor top bar"i] >> role=button[name="Toggle 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]',
diff --git a/test/e2e/specs/editor/various/invalid-block.spec.js b/test/e2e/specs/editor/various/invalid-block.spec.js
index 07c04a5a55457..3487c326d2851 100644
--- a/test/e2e/specs/editor/various/invalid-block.spec.js
+++ b/test/e2e/specs/editor/various/invalid-block.spec.js
@@ -81,7 +81,7 @@ test.describe( 'Invalid blocks', () => {
 		await expect(
 			editor.canvas
 				.getByRole( 'document', { name: 'Block: Paragraph' } )
-				.getByRole( 'button', { name: 'Attempt Block Recovery' } )
+				.getByRole( 'button', { name: 'Attempt recovery' } )
 		).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
index e2c65f01928e0..da4492a89bef3 100644
--- a/test/e2e/specs/editor/various/is-typing.spec.js
+++ b/test/e2e/specs/editor/various/is-typing.spec.js
@@ -4,10 +4,18 @@
 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' );
@@ -42,33 +50,23 @@ test.describe( 'isTyping', () => {
 		page,
 	} ) => {
 		// Add a block with a dropdown in the toolbar that contains an input.
-		await editor.insertBlock( { name: 'core/query' } );
-
-		await editor.canvas
-			.getByRole( 'document', { name: 'Block: Query Loop' } )
-			.getByRole( 'button', { name: 'Start blank' } )
-			.click();
-
-		await editor.canvas
-			.getByRole( 'button', { name: 'Title & Date' } )
-			.click();
-
-		await editor.openDocumentSettingsSidebar();
-		await page.getByLabel( 'Inherit query from template' ).click();
+		await editor.insertBlock( { name: 'e2e-tests/observe-typing' } );
 
 		// Moving the mouse shows the toolbar.
 		await editor.showBlockToolbar();
 		// Open the dropdown.
-		const displaySettings = page.getByRole( 'button', {
-			name: 'Display settings',
+		await page
+			.getByRole( 'button', {
+				name: 'Open Dropdown',
+			} )
+			.click();
+
+		const textControl = page.getByRole( 'textbox', {
+			name: 'Dropdown field',
 		} );
-		await displaySettings.click();
-		const itemsPerPageInput = page.getByLabel( 'Items per Page' );
-		// Make sure we're where we think we are
-		await expect( itemsPerPageInput ).toBeFocused();
 		// Type inside the dropdown's input
-		await page.keyboard.type( '00' );
+		await textControl.pressSequentially( 'Hello' );
 		// The input should still be visible.
-		await expect( itemsPerPageInput ).toBeVisible();
+		await expect( textControl ).toBeVisible();
 	} );
 } );
diff --git a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
index 6a7125d04f7a6..e1ca121040b97 100644
--- a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
+++ b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
@@ -17,108 +17,26 @@ test.describe( 'Order of block keyboard navigation', () => {
 		await editor.openDocumentSettingsSidebar();
 	} );
 
-	test( 'permits tabbing through paragraph blocks in the expected order', async ( {
+	test( 'permits tabbing through the block toolbar of the paragraph block', async ( {
 		editor,
 		KeyboardNavigableBlocks,
 		page,
+		pageUtils,
 	} ) => {
-		const paragraphBlocks = [ 'Paragraph 0', 'Paragraph 1', 'Paragraph 2' ];
-
-		// Create 3 paragraphs blocks with some content.
-		for ( const paragraphBlock of paragraphBlocks ) {
+		// Insert three paragraph blocks.
+		for ( let i = 0; i < 3; i++ ) {
 			await editor.insertBlock( { name: 'core/paragraph' } );
-			await page.keyboard.type( paragraphBlock );
+			await page.keyboard.type( `Paragraph ${ i + 1 }` );
 		}
-
-		// Select the middle block.
+		// Select the middle paragraph block.
 		await page.keyboard.press( 'ArrowUp' );
 		await editor.showBlockToolbar();
-		await KeyboardNavigableBlocks.navigateToContentEditorTop();
-		await KeyboardNavigableBlocks.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 KeyboardNavigableBlocks.navigateToContentEditorTop();
-		await KeyboardNavigableBlocks.tabThroughParagraphBlock( 'Paragraph 1' );
-	} );
-
-	test( 'allows tabbing in navigation mode if no block is selected', async ( {
-		editor,
-		KeyboardNavigableBlocks,
-		page,
-	} ) => {
-		const paragraphBlocks = [ '0', '1' ];
-
-		// Create 2 paragraphs blocks with some content.
-		for ( const paragraphBlock of paragraphBlocks ) {
-			await editor.insertBlock( { name: 'core/paragraph' } );
-			await page.keyboard.type( paragraphBlock );
-		}
-
-		// Clear the selected block.
-		const paragraph = editor.canvas
-			.locator( '[data-type="core/paragraph"]' )
-			.getByText( '1' );
-		const box = await paragraph.boundingBox();
-		await page.mouse.click( box.x - 1, box.y );
-
-		await page.keyboard.press( 'Tab' );
-		await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Add title' );
-
-		await page.keyboard.press( 'Tab' );
-		await KeyboardNavigableBlocks.expectLabelToHaveFocus(
-			'Paragraph Block. Row 1. 0'
-		);
-
-		await page.keyboard.press( 'Tab' );
-		await KeyboardNavigableBlocks.expectLabelToHaveFocus(
-			'Paragraph Block. Row 2. 1'
-		);
-
-		await page.keyboard.press( 'Tab' );
-		await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Post' );
-	} );
-
-	test( 'allows tabbing in navigation mode if no block is selected (reverse)', async ( {
-		editor,
-		KeyboardNavigableBlocks,
-		page,
-		pageUtils,
-	} ) => {
-		const paragraphBlocks = [ '0', '1' ];
-
-		// Create 2 paragraphs blocks with some content.
-		for ( const paragraphBlock of paragraphBlocks ) {
-			await editor.insertBlock( { name: 'core/paragraph' } );
-			await page.keyboard.type( paragraphBlock );
-		}
-
-		// Clear the selected block.
-		const paragraph = editor.canvas
-			.locator( '[data-type="core/paragraph"]' )
-			.getByText( '1' );
-		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 pageUtils.pressKeys( 'shift+Tab' );
-		await KeyboardNavigableBlocks.expectLabelToHaveFocus(
-			'Paragraph Block. Row 2. 1'
-		);
-
 		await pageUtils.pressKeys( 'shift+Tab' );
+		await KeyboardNavigableBlocks.navigateThroughBlockToolbar();
+		await page.keyboard.press( 'Tab' );
 		await KeyboardNavigableBlocks.expectLabelToHaveFocus(
-			'Paragraph Block. Row 1. 0'
+			'Block: Paragraph'
 		);
-
-		await pageUtils.pressKeys( 'shift+Tab' );
-		await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Add title' );
 	} );
 
 	test( 'should navigate correctly with multi selection', async ( {
@@ -208,31 +126,7 @@ class KeyboardNavigableBlocks {
 		expect( ariaLabel ).toBe( label );
 	}
 
-	async navigateToContentEditorTop() {
-		// Use 'Ctrl+`' to return to the top of the editor.
-		await this.pageUtils.pressKeys( 'ctrl+`', { times: 5 } );
-	}
-
-	async tabThroughParagraphBlock( paragraphText ) {
-		await this.tabThroughBlockToolbar();
-
-		await this.page.keyboard.press( 'Tab' );
-		await this.expectLabelToHaveFocus( 'Block: Paragraph' );
-
-		const activeElement = this.editor.canvas.locator( ':focus' );
-
-		await expect( activeElement ).toHaveText( paragraphText );
-
-		await this.page.keyboard.press( 'Tab' );
-		await this.expectLabelToHaveFocus( 'Block' );
-
-		// Need to shift+tab here to end back in the block. If not, we'll be in the next region and it will only require 4 region jumps instead of 5.
-		await this.pageUtils.pressKeys( 'shift+Tab' );
-		await this.expectLabelToHaveFocus( 'Block: Paragraph' );
-	}
-
-	async tabThroughBlockToolbar() {
-		await this.page.keyboard.press( 'Tab' );
+	async navigateThroughBlockToolbar() {
 		await this.expectLabelToHaveFocus( 'Paragraph' );
 
 		await this.page.keyboard.press( 'ArrowRight' );
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 0000000000000..d8abe7a46fbc1
--- /dev/null
+++ b/test/e2e/specs/editor/various/parsing-patterns.spec.js
@@ -0,0 +1,57 @@
+/**
+ * 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( 'Toggle 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 -->`,
+					},
+				],
+			} );
+		} );
+		await page.fill(
+			'role=region[name="Block Library"i] >> role=searchbox[name="Search for blocks and patterns"i]',
+			'whitespace'
+		);
+		await page
+			.locator( 'role=option[name="Pattern with top-level whitespace"i]' )
+			.click();
+		expect( await 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
index 5e529043ec3ed..5fbd0e66b5fd0 100644
--- a/test/e2e/specs/editor/various/pattern-overrides.spec.js
+++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js
@@ -1131,7 +1131,7 @@ test.describe( 'Pattern Overrides', () => {
 			/\/wp-content\/uploads\//
 		);
 		await editor.showBlockToolbar();
-		await editor.clickBlockToolbarButton( 'Alt' );
+		await editor.clickBlockToolbarButton( 'Alternative text' );
 		await page
 			.getByRole( 'textbox', { name: 'alternative text' } )
 			.fill( 'Test Image' );
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 d46062eded07b..981f8ccbbd5d3 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
@@ -196,7 +196,7 @@ class PostEditorTemplateMode {
 		);
 
 		const title = this.editorTopBar.getByRole( 'heading', {
-			name: 'Editing template: Single Entries',
+			name: 'Single Entries',
 		} );
 
 		await expect( title ).toBeVisible();
diff --git a/test/e2e/specs/editor/various/post-visibility.spec.js b/test/e2e/specs/editor/various/post-visibility.spec.js
index 61cd5e65f0101..67c8597953815 100644
--- a/test/e2e/specs/editor/various/post-visibility.spec.js
+++ b/test/e2e/specs/editor/various/post-visibility.spec.js
@@ -18,7 +18,7 @@ test.describe( 'Post visibility', () => {
 			await editor.openDocumentSettingsSidebar();
 
 			await page
-				.getByRole( 'button', { name: 'Change post status:' } )
+				.getByRole( 'button', { name: 'Change status:' } )
 				.click();
 			await page.getByRole( 'radio', { name: 'Private' } ).click();
 
@@ -57,9 +57,7 @@ test.describe( 'Post visibility', () => {
 				name: 'Close',
 			} )
 			.click();
-		await page
-			.getByRole( 'button', { name: 'Change post status:' } )
-			.click();
+		await page.getByRole( 'button', { name: 'Change status:' } ).click();
 		await page.getByRole( 'radio', { name: 'Private' } ).click();
 		await page
 			.getByRole( 'region', { name: 'Editor top bar' } )
diff --git a/test/e2e/specs/editor/various/preview.spec.js b/test/e2e/specs/editor/various/preview.spec.js
index b25d1da48122c..e15f143983b74 100644
--- a/test/e2e/specs/editor/various/preview.spec.js
+++ b/test/e2e/specs/editor/various/preview.spec.js
@@ -183,9 +183,7 @@ test.describe( 'Preview', () => {
 
 		// Return to editor and switch to Draft.
 		await editorPage.bringToFront();
-		await page
-			.getByRole( 'button', { name: 'Change post status:' } )
-			.click();
+		await page.getByRole( 'button', { name: 'Change status:' } ).click();
 		await page.getByRole( 'radio', { name: 'Draft' } ).click();
 		await page
 			.getByRole( 'region', { name: 'Editor top bar' } )
diff --git a/test/e2e/specs/editor/various/publish-button.spec.js b/test/e2e/specs/editor/various/publish-button.spec.js
index 631ddcd0fe61b..cdc9c1a993636 100644
--- a/test/e2e/specs/editor/various/publish-button.spec.js
+++ b/test/e2e/specs/editor/various/publish-button.spec.js
@@ -70,13 +70,12 @@ test.describe( 'Post publish button', () => {
 		admin,
 		page,
 		requestUtils,
+		editor,
 	} ) => {
 		await requestUtils.activatePlugin( 'gutenberg-test-plugin-meta-box' );
 		await admin.createNewPost();
-		await page
-			.getByRole( 'textbox', {
-				name: 'Add title',
-			} )
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
 			.fill( 'Test post' );
 
 		const topBar = page.getByRole( 'region', { name: 'Editor top bar' } );
diff --git a/test/e2e/specs/editor/various/publish-panel.spec.js b/test/e2e/specs/editor/various/publish-panel.spec.js
index 534fea5289c9e..1fe94ff334f3b 100644
--- a/test/e2e/specs/editor/various/publish-panel.spec.js
+++ b/test/e2e/specs/editor/various/publish-panel.spec.js
@@ -58,7 +58,7 @@ test.describe( 'Post publish panel', () => {
 		).toBeFocused();
 	} );
 
-	test( 'should move focus to the publish button in the panel', async ( {
+	test( 'should move focus to the cancel button in the panel', async ( {
 		editor,
 		page,
 	} ) => {
@@ -74,7 +74,7 @@ test.describe( 'Post publish panel', () => {
 			page
 				.getByRole( 'region', { name: 'Editor publish' } )
 				.locator( ':focus' )
-		).toHaveText( 'Publish' );
+		).toHaveText( 'Cancel' );
 	} );
 
 	test( 'should focus on the post list after publishing', async ( {
diff --git a/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js b/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
index a8e49f7a6b84d..cfaf4e0be9188 100644
--- a/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
+++ b/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
@@ -50,32 +50,6 @@ test.describe( 'Focus toolbar shortcut (alt + F10)', () => {
 		await expect( toolbarUtils.documentToolbarTooltip ).toBeHidden();
 	} );
 
-	test( 'Focuses correct toolbar in default view options 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 top level toolbar from empty block
-		await editor.insertBlock( { name: 'core/paragraph' } );
-		await toolbarUtils.useSelectMode();
-		await toolbarUtils.moveToToolbarShortcut();
-		await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
-
-		// Test: Focus the top level toolbar from paragraph block
-		await editor.insertBlock( { name: 'core/paragraph' } );
-		await page.keyboard.type(
-			'Focus top level toolbar from paragraph block in select mode.'
-		);
-		await toolbarUtils.useSelectMode();
-		await toolbarUtils.moveToToolbarShortcut();
-		await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
-	} );
-
 	test.describe( 'In Top Toolbar option:', () => {
 		test.beforeEach( async ( { editor } ) => {
 			// Ensure the fixed toolbar option is on
diff --git a/test/e2e/specs/editor/various/sidebar.spec.js b/test/e2e/specs/editor/various/sidebar.spec.js
index c051b4e767329..153a48e325c88 100644
--- a/test/e2e/specs/editor/various/sidebar.spec.js
+++ b/test/e2e/specs/editor/various/sidebar.spec.js
@@ -111,7 +111,7 @@ test.describe( 'Sidebar', () => {
 			.getByRole( 'heading', { level: 2 } );
 
 		await expect( documentSettingsPanels ).toHaveText( [
-			'No Title',
+			'No title',
 			'Categories',
 			'Tags',
 		] );
diff --git a/test/e2e/specs/editor/various/splitting-merging.spec.js b/test/e2e/specs/editor/various/splitting-merging.spec.js
index 29e7e5d64522c..eba9f1d3163fd 100644
--- a/test/e2e/specs/editor/various/splitting-merging.spec.js
+++ b/test/e2e/specs/editor/various/splitting-merging.spec.js
@@ -373,6 +373,103 @@ test.describe( 'splitting and merging blocks (@firefox, @webkit)', () => {
 		);
 	} );
 
+	// 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 placeholderBlock = { name: 'core/separator' };
+		await editor.insertBlock( {
+			name: 'core/group',
+			innerBlocks: [
+				emptyAlignedParagraph,
+				emptyAlignedHeading,
+				headingWithContent,
+				placeholderBlock,
+			],
+		} );
+		await editor.canvas
+			.getByRole( 'document', { name: 'Empty block' } )
+			.focus();
+
+		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 ),
+					],
+				},
+			] );
+
+		// Move the caret to the beginning of the empty heading block.
+		await page.keyboard.press( 'ArrowDown' );
+		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 ),
+					],
+				},
+			] );
+		await page.keyboard.press( 'Backspace' );
+		await expect.poll( editor.getBlocks ).toEqual( [
+			{
+				name: 'core/group',
+				attributes: { tagName: 'div' },
+				innerBlocks: [
+					headingWithContent,
+					expect.objectContaining( placeholderBlock ),
+				],
+			},
+		] );
+
+		// Move the caret to the beginning of the "heading" heading block.
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'Backspace' );
+		await expect
+			.poll( editor.getBlocks, 'Lift the non-empty non-default block' )
+			.toEqual( [
+				headingWithContent,
+				{
+					name: 'core/group',
+					attributes: { tagName: 'div' },
+					innerBlocks: [
+						expect.objectContaining( placeholderBlock ),
+					],
+				},
+			] );
+	} );
+
 	test.describe( 'test restore selection when merge produces more than one block', () => {
 		const snap1 = [
 			{
diff --git a/test/e2e/specs/editor/various/switch-to-draft.spec.js b/test/e2e/specs/editor/various/switch-to-draft.spec.js
index 516de6d0c85cc..81652d9c11e2b 100644
--- a/test/e2e/specs/editor/various/switch-to-draft.spec.js
+++ b/test/e2e/specs/editor/various/switch-to-draft.spec.js
@@ -47,7 +47,7 @@ test.describe( 'Clicking "Switch to draft" on a published/scheduled post/page',
 
 					await editor.openDocumentSettingsSidebar();
 					await page
-						.getByRole( 'button', { name: 'Change post status:' } )
+						.getByRole( 'button', { name: 'Change status:' } )
 						.click();
 					await page.getByRole( 'radio', { name: 'Draft' } ).click();
 
diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js
index bd1552ad4cb66..4077d6dcc5820 100644
--- a/test/e2e/specs/editor/various/writing-flow.spec.js
+++ b/test/e2e/specs/editor/various/writing-flow.spec.js
@@ -106,48 +106,6 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
 		] );
 	} );
 
-	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' );
-	} );
-
 	test( 'should navigate around inline boundaries', async ( {
 		editor,
 		page,
@@ -958,32 +916,6 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
 <!-- /wp:table -->` );
 	} );
 
-	test( 'escape should set select mode and then focus the canvas', async ( {
-		page,
-		writingFlowUtils,
-	} ) => {
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Random Paragraph' );
-
-		// First escape enters navigation mode.
-		await page.keyboard.press( 'Escape' );
-		const navigationButton = page.getByLabel(
-			'Paragraph Block. Row 1. Random Paragraph'
-		);
-		await expect( navigationButton ).toBeVisible();
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/paragraph' );
-
-		// Second escape should send focus to the canvas
-		await page.keyboard.press( 'Escape' );
-		// The navigation button should be hidden.
-		await expect( navigationButton ).toBeHidden();
-		await expect(
-			page.getByRole( 'region', { name: 'Editor content' } )
-		).toBeFocused();
-	} );
-
 	// 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,
@@ -1222,11 +1154,11 @@ class WritingFlowUtils {
 			'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/deferred-store.spec.ts b/test/e2e/specs/interactivity/deferred-store.spec.ts
index b6a7853c40dcd..0ddbcb0a60d2f 100644
--- a/test/e2e/specs/interactivity/deferred-store.spec.ts
+++ b/test/e2e/specs/interactivity/deferred-store.spec.ts
@@ -27,9 +27,7 @@ test.describe( 'deferred store', () => {
 		await expect( resultInput ).toHaveText( 'Hello, world!' );
 	} );
 
-	// There is a known issue for deferred getters right now.
-	// eslint-disable-next-line playwright/no-skipped-test
-	test.skip( 'Ensure that a state getter can be subscribed to before it is initialized', async ( {
+	test( 'Ensure that a state getter can be subscribed to before it is initialized', async ( {
 		page,
 	} ) => {
 		const resultInput = page.getByTestId( 'result-getter' );
diff --git a/test/e2e/specs/interactivity/directive-context.spec.ts b/test/e2e/specs/interactivity/directive-context.spec.ts
index 41afa274155a2..0a27fe258d5a8 100644
--- a/test/e2e/specs/interactivity/directive-context.spec.ts
+++ b/test/e2e/specs/interactivity/directive-context.spec.ts
@@ -38,7 +38,7 @@ test.describe( 'data-wp-context', () => {
 		} );
 	} );
 
-	test( 'is correctly extended', async ( { page } ) => {
+	test( 'is correctly extended (shallow)', async ( { page } ) => {
 		const childContext = await parseContent(
 			page.getByTestId( 'child context' )
 		);
@@ -47,12 +47,12 @@ test.describe( 'data-wp-context', () => {
 			prop1: 'parent',
 			prop2: 'child',
 			prop3: 'child',
-			obj: { prop4: 'parent', prop5: 'child', prop6: 'child' },
+			obj: { prop5: 'child', prop6: 'child' },
 			array: [ 4, 5, 6 ],
 		} );
 	} );
 
-	test( 'changes in inherited properties are reflected (child)', async ( {
+	test( "changes in inherited properties are reflected and don't leak down (child)", async ( {
 		page,
 	} ) => {
 		await page.getByTestId( 'child prop1' ).click();
@@ -70,10 +70,10 @@ test.describe( 'data-wp-context', () => {
 		);
 
 		expect( parentContext.prop1 ).toBe( 'modifiedFromChild' );
-		expect( parentContext.obj.prop4 ).toBe( 'modifiedFromChild' );
+		expect( parentContext.obj.prop4 ).toBe( 'parent' );
 	} );
 
-	test( 'changes in inherited properties are reflected (parent)', async ( {
+	test( "changes in inherited properties are reflected and don't leak up (parent)", async ( {
 		page,
 	} ) => {
 		await page.getByTestId( 'parent prop1' ).click();
@@ -84,7 +84,7 @@ test.describe( 'data-wp-context', () => {
 		);
 
 		expect( childContext.prop1 ).toBe( 'modifiedFromParent' );
-		expect( childContext.obj.prop4 ).toBe( 'modifiedFromParent' );
+		expect( childContext.obj.prop4 ).toBeUndefined();
 
 		const parentContext = await parseContent(
 			page.getByTestId( 'parent context' )
@@ -170,7 +170,7 @@ test.describe( 'data-wp-context', () => {
 		expect( childContext.array ).toMatchObject( [ 4, 5, 6 ] );
 	} );
 
-	test( 'overwritten objects updates inherited values', async ( {
+	test( "overwritten objects don't inherit values (shallow)", async ( {
 		page,
 	} ) => {
 		await page.getByTestId( 'parent replace' ).click();
@@ -182,7 +182,7 @@ test.describe( 'data-wp-context', () => {
 		expect( childContext.obj.prop4 ).toBeUndefined();
 		expect( childContext.obj.prop5 ).toBe( 'child' );
 		expect( childContext.obj.prop6 ).toBe( 'child' );
-		expect( childContext.obj.overwritten ).toBe( true );
+		expect( childContext.obj.overwritten ).toBeUndefined();
 
 		const parentContext = await parseContent(
 			page.getByTestId( 'parent context' )
@@ -230,13 +230,13 @@ test.describe( 'data-wp-context', () => {
 		await expect( element ).toHaveAttribute( 'value', 'Text 1' );
 	} );
 
-	test( 'should replace values on navigation', async ( { page } ) => {
+	test( 'should preserve values on navigation', async ( { page } ) => {
 		const element = page.getByTestId( 'navigation text' );
 		await expect( element ).toHaveText( 'first page' );
 		await page.getByTestId( 'toggle text' ).click();
 		await expect( element ).toHaveText( 'changed dynamically' );
 		await page.getByTestId( 'navigate' ).click();
-		await expect( element ).toHaveText( 'second page' );
+		await expect( element ).toHaveText( 'changed dynamically' );
 	} );
 
 	test( 'should preserve the previous context values', async ( { page } ) => {
@@ -248,16 +248,16 @@ test.describe( 'data-wp-context', () => {
 		await expect( element ).toHaveText( 'some new text' );
 	} );
 
-	test( 'should update values when navigating back or forward', async ( {
+	test( 'should preserve values when navigating back or forward', async ( {
 		page,
 	} ) => {
 		const element = page.getByTestId( 'navigation text' );
 		await page.getByTestId( 'navigate' ).click();
-		await expect( element ).toHaveText( 'second page' );
+		await expect( element ).toHaveText( 'first page' );
 		await page.goBack();
 		await expect( element ).toHaveText( 'first page' );
 		await page.goForward();
-		await expect( element ).toHaveText( 'second page' );
+		await expect( element ).toHaveText( 'first page' );
 	} );
 
 	test( 'should inherit values on navigation', async ( { page } ) => {
@@ -270,15 +270,14 @@ test.describe( 'data-wp-context', () => {
 		await page.getByTestId( 'add text2' ).click();
 		await expect( text2 ).toHaveText( 'some new text' );
 		await page.getByTestId( 'navigate' ).click();
-		await expect( text ).toHaveText( 'second page' );
-		await expect( text2 ).toHaveText( 'second page' );
+		await expect( text ).toHaveText( 'changed dynamically' );
+		await expect( text2 ).toHaveText( 'some new text' );
 		await page.goBack();
-		await expect( text ).toHaveText( 'first page' );
-		// text2 maintains its value as it is not defined in the first page.
-		await expect( text2 ).toHaveText( 'second page' );
+		await expect( text ).toHaveText( 'changed dynamically' );
+		await expect( text2 ).toHaveText( 'some new text' );
 		await page.goForward();
-		await expect( text ).toHaveText( 'second page' );
-		await expect( text2 ).toHaveText( 'second page' );
+		await expect( text ).toHaveText( 'changed dynamically' );
+		await expect( text2 ).toHaveText( 'some new text' );
 	} );
 
 	test( 'should maintain the same context reference on async actions', async ( {
@@ -289,11 +288,14 @@ test.describe( 'data-wp-context', () => {
 		await page.getByTestId( 'async navigate' ).click();
 		await expect( element ).toHaveText( 'changed from async action' );
 	} );
+
 	test( 'should bail out if the context is not a default directive', async ( {
 		page,
 	} ) => {
-		// This test is to ensure that the context directive is only applied to the default directive
-		// and not to any other directive.
+		/*
+		 * This test is to ensure that the context directive is only applied to the
+		 * default directive and not to any other directive.
+		 */
 		const defaultElement = page.getByTestId( 'default suffix context' );
 		await expect( defaultElement ).toHaveText( 'default' );
 		const element = page.getByTestId( 'non-default suffix context' );
@@ -363,7 +365,7 @@ test.describe( 'data-wp-context', () => {
 			page.getByTestId( 'child context' )
 		);
 
-		expect( childContextBefore.obj2.prop4 ).toBe( 'parent' );
+		expect( childContextBefore.obj2.prop4 ).toBeUndefined();
 		expect( childContextBefore.obj2.prop5 ).toBe( 'child' );
 		expect( childContextBefore.obj2.prop6 ).toBe( 'child' );
 
@@ -376,6 +378,21 @@ test.describe( 'data-wp-context', () => {
 		expect( childContextAfter.obj2.prop4 ).toBeUndefined();
 		expect( childContextAfter.obj2.prop5 ).toBe( 'child' );
 		expect( childContextAfter.obj2.prop6 ).toBe( 'child' );
-		expect( childContextAfter.obj2.overwritten ).toBe( true );
+		expect( childContextAfter.obj2.overwritten ).toBeUndefined();
+	} );
+
+	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
index 9dbd1e47a2ef1..511b38e7ddbb8 100644
--- a/test/e2e/specs/interactivity/directive-each.spec.ts
+++ b/test/e2e/specs/interactivity/directive-each.spec.ts
@@ -314,19 +314,14 @@ test.describe( 'data-wp-each', () => {
 			} )
 		);
 
-		await expect( elements ).toHaveText( [ 'beta', 'gamma', 'delta' ] );
+		await expect( elements ).toHaveText( [ 'b', 'c', 'd' ] );
 
 		await page
 			.getByTestId( 'navigation-updated list' )
 			.getByTestId( 'navigate' )
 			.click();
 
-		await expect( elements ).toHaveText( [
-			'alpha',
-			'beta',
-			'gamma',
-			'delta',
-		] );
+		await expect( elements ).toHaveText( [ 'a', 'b', 'c', 'd' ] );
 
 		// Get the tags. They should not have disappeared or changed,
 		// except for the newly created element.
diff --git a/test/e2e/specs/interactivity/get-sever-context.spec.ts b/test/e2e/specs/interactivity/get-sever-context.spec.ts
new file mode 100644
index 0000000000000..d7bc4075f9760
--- /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 0000000000000..16406c1d82446
--- /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/router-navigate.spec.ts b/test/e2e/specs/interactivity/router-navigate.spec.ts
index 872fe9ea7ea52..d1ac30783ee2b 100644
--- a/test/e2e/specs/interactivity/router-navigate.spec.ts
+++ b/test/e2e/specs/interactivity/router-navigate.spec.ts
@@ -6,10 +6,6 @@ import { test, expect } from './fixtures';
 test.describe( 'Router navigate', () => {
 	test.beforeAll( async ( { interactivityUtils: utils } ) => {
 		await utils.activatePlugins();
-		const link2 = await utils.addPostWithBlock( 'test/router-navigate', {
-			alias: 'router navigate - link 2',
-			attributes: { title: 'Link 2' },
-		} );
 		const link1 = await utils.addPostWithBlock( 'test/router-navigate', {
 			alias: 'router navigate - link 1',
 			attributes: {
@@ -21,6 +17,10 @@ test.describe( 'Router navigate', () => {
 				},
 			},
 		} );
+		const link2 = await utils.addPostWithBlock( 'test/router-navigate', {
+			alias: 'router navigate - link 2',
+			attributes: { title: 'Link 2' },
+		} );
 		const link3 = await utils.addPostWithBlock( 'test/router-navigate', {
 			alias: 'router navigate - disabled',
 			attributes: {
@@ -211,29 +211,26 @@ test.describe( 'Router navigate', () => {
 		await expect( count ).toHaveText( '0' );
 	} );
 
-	test( 'should overwrite the state with the one serialized in the new page', async ( {
+	test( 'should merge the state with the one serialized in the new page', async ( {
 		page,
 	} ) => {
 		const prop1 = page.getByTestId( 'prop1' );
 		const prop2 = page.getByTestId( 'prop2' );
 		const prop3 = page.getByTestId( 'prop3' );
+		const title = page.getByTestId( 'title' );
 
 		await expect( prop1 ).toHaveText( 'main' );
 		await expect( prop2 ).toHaveText( 'main' );
 		await expect( prop3 ).toBeEmpty();
 
 		await page.getByTestId( 'link 1' ).click();
-
-		// New values for existing properties should change.
-		// Old values not overwritten should remain the same.
-		// New properties should appear.
-		await expect( prop1 ).toHaveText( 'link 1' );
+		await expect( title ).toHaveText( 'Link 1' );
+		await expect( prop1 ).toHaveText( 'main' );
 		await expect( prop2 ).toHaveText( 'main' );
 		await expect( prop3 ).toHaveText( 'link 1' );
 
 		await page.goBack();
-
-		// New added properties are preserved.
+		await expect( title ).toHaveText( 'Main' );
 		await expect( prop1 ).toHaveText( 'main' );
 		await expect( prop2 ).toHaveText( 'main' );
 		await expect( prop3 ).toHaveText( 'link 1' );
@@ -245,26 +242,20 @@ test.describe( 'Router navigate', () => {
 		const title = page.getByTestId( 'title' );
 		const getter = page.getByTestId( 'getterProp' );
 
-		// Title should start in 'Main' and the getter prop should be the one
-		// returned once hydrated.
 		await expect( title ).toHaveText( 'Main' );
 		await expect( getter ).toHaveText( 'value from getter (main)' );
 
 		await page.getByTestId( 'link 1' ).click();
-
-		// Title should have changed. If not, that means there was an error
-		// during render. The getter should return the correct value.
 		await expect( title ).toHaveText( 'Link 1' );
-		await expect( getter ).toHaveText( 'value from getter (link 1)' );
+		await expect( getter ).toHaveText( 'value from getter (main)' );
 
-		// Same behavior navigating back and forward.
 		await page.goBack();
 		await expect( title ).toHaveText( 'Main' );
 		await expect( getter ).toHaveText( 'value from getter (main)' );
 
 		await page.goForward();
 		await expect( title ).toHaveText( 'Link 1' );
-		await expect( getter ).toHaveText( 'value from getter (link 1)' );
+		await expect( getter ).toHaveText( 'value from getter (main)' );
 	} );
 
 	test( 'should force a page reload when navigating to a page with `clientNavigationDisabled`', async ( {
diff --git a/test/e2e/specs/site-editor/command-center.spec.js b/test/e2e/specs/site-editor/command-center.spec.js
index fce951ca767be..19318081aa171 100644
--- a/test/e2e/specs/site-editor/command-center.spec.js
+++ b/test/e2e/specs/site-editor/command-center.spec.js
@@ -28,10 +28,12 @@ test.describe( 'Site editor command palette', () => {
 		await page.keyboard.type( 'new page' );
 		await page.getByRole( 'option', { name: 'Add new page' } ).click();
 		await expect( page ).toHaveURL(
-			'/wp-admin/post-new.php?post_type=page'
+			/\/wp-admin\/site-editor.php\?postId=(\d+)&postType=page&canvas=edit/
 		);
 		await expect(
-			editor.canvas.getByRole( 'textbox', { name: 'Add title' } )
+			editor.canvas
+				.getByLabel( 'Block: Title' )
+				.locator( '[data-rich-text-placeholder="No title"]' )
 		).toBeVisible();
 	} );
 
@@ -47,7 +49,7 @@ test.describe( 'Site editor command palette', () => {
 			page
 				.getByRole( 'region', { name: 'Editor top bar' } )
 				.getByRole( 'heading', { level: 1 } )
-		).toHaveText( 'Index' );
+		).toContainText( 'Index' );
 	} );
 
 	test( 'Open the command palette and navigate to Customize CSS', async ( {
diff --git a/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js b/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js
index f6b01db63d911..0ff375a9f45a3 100644
--- a/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js
+++ b/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js
@@ -41,11 +41,6 @@ test.describe( 'Dataviews List Layout', () => {
 			page.getByRole( 'button', { name: 'Add filter' } )
 		).toBeFocused();
 
-		await page.keyboard.press( 'Tab' );
-		await expect(
-			page.getByRole( 'button', { name: 'Reset' } )
-		).toBeFocused();
-
 		await page.keyboard.press( 'Tab' );
 		await expect(
 			page.getByRole( 'button', { name: 'Layout' } )
@@ -74,12 +69,16 @@ test.describe( 'Dataviews List Layout', () => {
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
+
+		const firstItem = page
+			.getByRole( 'grid' )
+			.getByRole( 'button' )
+			.first();
 
 		// Make sure the items have loaded before reaching for the 1st item in the list.
 		await expect( page.getByRole( 'grid' ) ).toBeVisible();
 		await page.keyboard.press( 'Tab' );
-		await expect( page.getByLabel( 'Privacy Policy' ) ).toBeFocused();
+		await expect( firstItem ).toBeFocused();
 
 		// Go to the preview.
 		await page.keyboard.press( 'Tab' );
@@ -91,7 +90,7 @@ test.describe( 'Dataviews List Layout', () => {
 
 		// Go back to the items list using SHIFT+TAB.
 		await page.keyboard.press( 'Shift+Tab' );
-		await expect( page.getByLabel( 'Privacy Policy' ) ).toBeFocused();
+		await expect( firstItem ).toBeFocused();
 	} );
 
 	test( 'Navigates the items list via UP/DOWN arrow keys', async ( {
@@ -104,7 +103,6 @@ test.describe( 'Dataviews List Layout', () => {
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
 
 		// Make sure the items have loaded before reaching for the 1st item in the list.
 		await expect( page.getByRole( 'grid' ) ).toBeVisible();
@@ -128,7 +126,6 @@ test.describe( 'Dataviews List Layout', () => {
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
 
 		// Make sure the items have loaded before reaching for the 1st item in the list.
 		await expect( page.getByRole( 'grid' ) ).toBeVisible();
@@ -170,7 +167,6 @@ test.describe( 'Dataviews List Layout', () => {
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
 
 		// Make sure the items have loaded before reaching for the 1st item in the list.
 		await expect( page.getByRole( 'grid' ) ).toBeVisible();
diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js
index 36b12eaf186c6..6d699f4b02a63 100644
--- a/test/e2e/specs/site-editor/font-library.spec.js
+++ b/test/e2e/specs/site-editor/font-library.spec.js
@@ -9,13 +9,40 @@ test.describe( 'Font Library', () => {
 			await requestUtils.activateTheme( 'emptytheme' );
 		} );
 
-		test.beforeEach( async ( { admin, editor } ) => {
-			await admin.visitSiteEditor();
-			await editor.canvas.locator( 'body' ).click();
+		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 Styles' } )
+				.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 "Add fonts" button', async ( { page } ) => {
-			await page.getByRole( 'button', { name: 'Styles' } ).click();
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Styles' } )
+				.click();
 			await page
 				.getByRole( 'button', { name: 'Typography Styles' } )
 				.click();
@@ -31,15 +58,21 @@ test.describe( 'Font Library', () => {
 			await requestUtils.activateTheme( 'twentytwentythree' );
 		} );
 
-		test.beforeEach( async ( { admin, editor } ) => {
-			await admin.visitSiteEditor();
-			await editor.canvas.locator( 'body' ).click();
+		test.beforeEach( async ( { admin } ) => {
+			await admin.visitSiteEditor( {
+				postId: 'twentytwentythree//index',
+				postType: 'wp_template',
+				canvas: 'edit',
+			} );
 		} );
 
 		test( 'should display the "Manage fonts" button', async ( {
 			page,
 		} ) => {
-			await page.getByRole( 'button', { name: 'Styles' } ).click();
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Styles' } )
+				.click();
 			await page
 				.getByRole( 'button', { name: 'Typography Styles' } )
 				.click();
@@ -52,7 +85,10 @@ test.describe( 'Font Library', () => {
 		test( 'should open the "Manage fonts" modal when clicking the "Manage fonts" button', async ( {
 			page,
 		} ) => {
-			await page.getByRole( 'button', { name: 'Styles' } ).click();
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Styles' } )
+				.click();
 			await page
 				.getByRole( 'button', { name: 'Typography Styles' } )
 				.click();
@@ -70,7 +106,10 @@ test.describe( 'Font Library', () => {
 		test( 'should show font variant panel when clicking on a font family', async ( {
 			page,
 		} ) => {
-			await page.getByRole( 'button', { name: 'Styles' } ).click();
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Styles' } )
+				.click();
 			await page
 				.getByRole( 'button', { name: 'Typography Styles' } )
 				.click();
@@ -107,16 +146,22 @@ test.describe( 'Font Library', () => {
 			);
 		} );
 
-		test.beforeEach( async ( { admin, editor } ) => {
-			await admin.visitSiteEditor();
-			await editor.canvas.locator( 'body' ).click();
+		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( 'button', { name: 'Styles' } ).click();
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Styles' } )
+				.click();
 			await page
 				.getByRole( 'button', { name: 'Typography Styles' } )
 				.click();
@@ -184,15 +229,21 @@ test.describe( 'Font Library', () => {
 			await requestUtils.activateTheme( 'twentytwentyfour' );
 		} );
 
-		test.beforeEach( async ( { admin, editor } ) => {
-			await admin.visitSiteEditor();
-			await editor.canvas.locator( 'body' ).click();
+		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( 'button', { name: /styles/i } ).click();
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Styles' } )
+				.click();
 
 			// Click "Browse styles"
 			await page.getByRole( 'button', { name: 'Browse styles' } ).click();
diff --git a/test/e2e/specs/site-editor/navigation.spec.js b/test/e2e/specs/site-editor/navigation.spec.js
index 4db860b703892..1b92ef2e850e6 100644
--- a/test/e2e/specs/site-editor/navigation.spec.js
+++ b/test/e2e/specs/site-editor/navigation.spec.js
@@ -83,19 +83,6 @@ test.describe( 'Site editor navigation', () => {
 		// The button role should have been removed from the iframe.
 		await expect( editorCanvasButton ).toBeHidden();
 
-		// Test to make sure a Tab keypress works as expected.
-		// As of this writing, we are in select mode and a tab
-		// keypress will reveal the header template select mode
-		// button. This test is not documenting that we _want_
-		// that action, but checking that we are within the site
-		// editor and keypresses work as intened.
-		await pageUtils.pressKeys( 'Tab' );
-		await expect(
-			page.getByRole( 'button', {
-				name: 'Template Part Block. Row 1. header',
-			} )
-		).toBeFocused();
-
 		// Test: We can go back to the main navigation from the editor frame
 		// Move to the document toolbar
 		await pageUtils.pressKeys( 'alt+F10' );
diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js
index 92edc74101183..6faa85a2659cf 100644
--- a/test/e2e/specs/site-editor/new-templates-list.spec.js
+++ b/test/e2e/specs/site-editor/new-templates-list.spec.js
@@ -22,11 +22,11 @@ test.describe( 'Templates', () => {
 	test( 'Sorting', async ( { admin, page } ) => {
 		await admin.visitSiteEditor( { postType: 'wp_template' } );
 
-		// Descending by title.
-		await page.getByRole( 'button', { name: 'View options' } ).click();
-		await page.getByRole( 'menuitem', { name: 'Sort by' } ).click();
-		await page.getByRole( 'menuitem', { name: 'Template' } ).click();
-		await page.getByRole( 'menuitemradio', { name: 'descending' } ).click();
+		// Wait for the template list to be visible.
+		await expect(
+			page.locator( '[aria-label="Templates"]' )
+		).toBeVisible();
+
 		const firstTitle = page
 			.getByRole( 'region', {
 				name: 'Template',
@@ -34,10 +34,14 @@ test.describe( 'Templates', () => {
 			} )
 			.getByRole( 'link', { includeHidden: true } )
 			.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( 'menuitemradio', { name: 'ascending' } ).click();
+		await page.getByRole( 'radio', { name: 'Sort ascending' } ).click();
 		await expect( firstTitle ).toHaveText( 'Category Archives' );
 	} );
 
@@ -56,7 +60,7 @@ test.describe( 'Templates', () => {
 		await expect( titles ).toHaveCount( 1 );
 		await expect( titles.first() ).toHaveText( 'Tag Archives' );
 		await page
-			.getByRole( 'button', { name: 'Reset', exact: true } )
+			.getByRole( 'button', { name: 'Reset search', exact: true } )
 			.click();
 		await expect( titles ).toHaveCount( 6 );
 
diff --git a/test/e2e/specs/site-editor/patterns.spec.js b/test/e2e/specs/site-editor/patterns.spec.js
index 0b0fada39c262..162ec15146c67 100644
--- a/test/e2e/specs/site-editor/patterns.spec.js
+++ b/test/e2e/specs/site-editor/patterns.spec.js
@@ -148,6 +148,7 @@ test.describe( 'Patterns', () => {
 		await admin.visitSiteEditor( { postType: 'wp_block' } );
 
 		await expect( patterns.item ).toHaveCount( 3 );
+
 		const searchBox = patterns.content.getByRole( 'searchbox', {
 			name: 'Search',
 		} );
diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
index c4e153e9b5e2f..3f871d28ef941 100644
--- a/test/e2e/specs/site-editor/style-book.spec.js
+++ b/test/e2e/specs/site-editor/style-book.spec.js
@@ -42,9 +42,6 @@ test.describe( 'Style Book', () => {
 	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="Design"i]' )
-		).toBeVisible();
 		await expect(
 			page.locator( 'role=tab[name="Widgets"i]' )
 		).toBeVisible();
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 0000000000000..90e56645813c3
--- /dev/null
+++ b/test/e2e/specs/site-editor/template-registration.spec.js
@@ -0,0 +1,367 @@
+/**
+ * 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.getByRole( 'link', { name: 'Author: Admin' } ).click();
+		const actions = page.getByLabel( 'Actions' );
+		await actions.first().click();
+		await page.getByRole( 'menuitem', { name: 'Reset' } ).click();
+		await page.getByRole( 'button', { name: 'Reset' } ).click();
+
+		await expect( resetNotice ).toBeVisible();
+
+		// Verify the template registered by the plugin is applied in the editor...
+		await expect(
+			editor.canvas.getByText( 'Author template customized by the user.' )
+		).toBeHidden();
+		await expect(
+			editor.canvas.getByText(
+				'This is a plugin-registered author template.'
+			)
+		).toBeVisible();
+
+		// ... and the frontend.
+		await page.goto( '?author=1' );
+		await expect(
+			page.getByText( 'Author template customized by the user.' )
+		).toBeHidden();
+		await expect(
+			page.getByText( 'This is a plugin-registered author template.' )
+		).toBeVisible();
+	} );
+} );
+
+class BlockTemplateRegistrationUtils {
+	constructor( { page } ) {
+		this.page = page;
+	}
+
+	async searchForTemplate( searchTerm ) {
+		const searchResults = this.page.getByLabel( 'Actions' );
+		await expect
+			.poll( async () => await searchResults.count() )
+			.toBeGreaterThan( 0 );
+		const initialSearchResultsCount = await searchResults.count();
+		await this.page.getByPlaceholder( 'Search' ).fill( searchTerm );
+		await expect
+			.poll( async () => await searchResults.count() )
+			.toBeLessThan( initialSearchResultsCount );
+	}
+}
diff --git a/test/e2e/specs/site-editor/title.spec.js b/test/e2e/specs/site-editor/title.spec.js
index 3224c519f4f9e..8f6c5252c9f41 100644
--- a/test/e2e/specs/site-editor/title.spec.js
+++ b/test/e2e/specs/site-editor/title.spec.js
@@ -25,7 +25,7 @@ test.describe( 'Site editor title', () => {
 		const title = page
 			.getByRole( 'region', { name: 'Editor top bar' } )
 			.getByRole( 'heading', {
-				name: 'Editing template: Index',
+				name: 'Index',
 			} );
 
 		await expect( title ).toBeVisible();
@@ -44,7 +44,7 @@ test.describe( 'Site editor title', () => {
 		const title = page
 			.getByRole( 'region', { name: 'Editor top bar' } )
 			.getByRole( 'heading', {
-				name: 'Editing template part: header',
+				name: 'header',
 			} );
 
 		await expect( title ).toBeVisible();
diff --git a/test/e2e/specs/widgets/customizing-widgets.spec.js b/test/e2e/specs/widgets/customizing-widgets.spec.js
index 34400ea00976e..38e9d3ee2c58a 100644
--- a/test/e2e/specs/widgets/customizing-widgets.spec.js
+++ b/test/e2e/specs/widgets/customizing-widgets.spec.js
@@ -358,9 +358,7 @@ test.describe( 'Widgets Customizer', () => {
 		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(
@@ -467,16 +465,6 @@ test.describe( 'Widgets Customizer', () => {
 		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(
-				'css=.block-editor-block-list__layout.is-navigate-mode'
-			)
-		).toBeVisible();
-		await expect( paragraphBlock ).toBeVisible();
 	} );
 
 	test( 'should move (inner) blocks to another sidebar', async ( {
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 0000000000000..0c6530acc1aaf
--- /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 0000000000000..a6b91a613da6e
--- /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 0000000000000..a8602b1c679a8
--- /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 0000000000000..ab136ac8df9a7
--- /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 0000000000000..cd05d5fe917fe
--- /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 0000000000000..cd05d5fe917fe
--- /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 0000000000000..c996b01432839
--- /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/integration/blocks-schema.test.js b/test/integration/blocks-schema.test.js
index c9456efddc1ad..37137ddd09d21 100644
--- a/test/integration/blocks-schema.test.js
+++ b/test/integration/blocks-schema.test.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import Ajv from 'ajv-draft-04';
+import Ajv from 'ajv';
 import glob from 'fast-glob';
 
 /**
@@ -16,7 +16,7 @@ describe( 'block.json schema', () => {
 	);
 	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.
diff --git a/test/integration/fixtures/blocks/core__categories.json b/test/integration/fixtures/blocks/core__categories.json
index 5d271aa5c8499..698105d892134 100644
--- a/test/integration/fixtures/blocks/core__categories.json
+++ b/test/integration/fixtures/blocks/core__categories.json
@@ -3,6 +3,7 @@
 		"name": "core/categories",
 		"isValid": true,
 		"attributes": {
+			"taxonomy": "category",
 			"displayAsDropdown": false,
 			"showHierarchy": false,
 			"showPostCounts": false,
diff --git a/test/integration/fixtures/blocks/core__form-input.html b/test/integration/fixtures/blocks/core__form-input.html
index 33f1fe88c2c6a..81ff6cf53534e 100644
--- a/test/integration/fixtures/blocks/core__form-input.html
+++ b/test/integration/fixtures/blocks/core__form-input.html
@@ -1,3 +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
index fee4df284f115..2d9865ef73556 100644
--- a/test/integration/fixtures/blocks/core__form-input.json
+++ b/test/integration/fixtures/blocks/core__form-input.json
@@ -11,5 +11,57 @@
 			"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
index 5470c653c403b..439943df2841c 100644
--- a/test/integration/fixtures/blocks/core__form-input.parsed.json
+++ b/test/integration/fixtures/blocks/core__form-input.parsed.json
@@ -7,5 +7,77 @@
 		"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
index 33f1fe88c2c6a..d66cedcf9215b 100644
--- a/test/integration/fixtures/blocks/core__form-input.serialized.html
+++ b/test/integration/fixtures/blocks/core__form-input.serialized.html
@@ -1,3 +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 0000000000000..fd08525a17eb3
--- /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 0000000000000..cc86ecd2a9080
--- /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 0000000000000..60b7b7dd37b09
--- /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 0000000000000..fd08525a17eb3
--- /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 0000000000000..bd64e201e1918
--- /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 0000000000000..162304dc84b0c
--- /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 0000000000000..2a2490e5c1260
--- /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 0000000000000..6670593401970
--- /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 0000000000000..3f1de1c602847
--- /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 0000000000000..162304dc84b0c
--- /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 0000000000000..dfa57c0755f68
--- /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 0000000000000..6670593401970
--- /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
index 08ea661838620..5f043b0b2ef64 100644
--- a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.html
+++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.html
@@ -4,3 +4,33 @@
 	<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
index fee4df284f115..2d9865ef73556 100644
--- a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.json
+++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.json
@@ -11,5 +11,57 @@
 			"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
index 645337cbfdb4a..963614974675d 100644
--- a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.parsed.json
+++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.parsed.json
@@ -7,5 +7,77 @@
 		"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
index 33f1fe88c2c6a..d66cedcf9215b 100644
--- a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.serialized.html
+++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.serialized.html
@@ -1,3 +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 0000000000000..1e6c76424334f
--- /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 0000000000000..18cec11e3305b
--- /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 0000000000000..8dbb5b5a09942
--- /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 0000000000000..1e6c76424334f
--- /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 0000000000000..8c41e02f10f04
--- /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 0000000000000..113ce01f7ab7e
--- /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 0000000000000..7433a6c7e9c50
--- /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 0000000000000..be1ae98e02310
--- /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 0000000000000..a1c1b58f9b7fc
--- /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 0000000000000..113ce01f7ab7e
--- /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 0000000000000..14c7828b1c890
--- /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 0000000000000..be1ae98e02310
--- /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 0000000000000..b39e1c8b51166
--- /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 0000000000000..62ae6f76a0e9d
--- /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 0000000000000..3f76a2194f27e
--- /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 0000000000000..b39e1c8b51166
--- /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 0000000000000..8f7722f81ccc5
--- /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 0000000000000..398106d8de1ca
--- /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 0000000000000..e5e11f26d9960
--- /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 0000000000000..530403c4964fa
--- /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__media-text__deprecated-v5.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html
index 7d7a76c730b27..8c88b8b67795d 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 {"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"><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…"} -->
+<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-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 0000000000000..22a2a3e18f74f
--- /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 0000000000000..bf195f6fa1c95
--- /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 0000000000000..2e878c98a18a8
--- /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 0000000000000..b9d5e14f90277
--- /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 0000000000000..47a0f0c126fa7
--- /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 0000000000000..986e049099541
--- /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 0000000000000..175fbad27927b
--- /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 0000000000000..4b001f4f27c8a
--- /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 0000000000000..92b4b4d275413
--- /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 0000000000000..a6f0dff927874
--- /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 0000000000000..49b392d423138
--- /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 0000000000000..b44ebe1c4ee89
--- /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-fill-no-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html
index 22a2a3e18f74f..30667e0dd24dc 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 bf195f6fa1c95..bb57f08ad5cfa 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
@@ -6,11 +6,12 @@
 			"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=",
-			"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 2e878c98a18a8..674b3724af8e8 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 40382e884f618..b9d5e14f90277 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 {"align":"wide","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"} -->
+<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 47a0f0c126fa7..60e2cc7be572d 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 986e049099541..0de71c867457e 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
@@ -6,15 +6,16 @@
 			"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=",
 			"imageFill": true,
 			"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 175fbad27927b..92bd57443a1c3 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 9445d0ad259b2..4b001f4f27c8a 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 {"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"><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"} -->
+<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__query.json b/test/integration/fixtures/blocks/core__query.json
index b050aaa2b5b1f..a5ee4523128df 100644
--- a/test/integration/fixtures/blocks/core__query.json
+++ b/test/integration/fixtures/blocks/core__query.json
@@ -16,7 +16,8 @@
 				"sticky": "",
 				"inherit": true,
 				"taxQuery": null,
-				"parents": []
+				"parents": [],
+				"format": []
 			},
 			"tagName": "div",
 			"enhancedPagination": false
diff --git a/test/integration/fixtures/blocks/core__site-tagline.json b/test/integration/fixtures/blocks/core__site-tagline.json
index e504bc75df30c..fe837d41df43b 100644
--- a/test/integration/fixtures/blocks/core__site-tagline.json
+++ b/test/integration/fixtures/blocks/core__site-tagline.json
@@ -3,7 +3,8 @@
 		"name": "core/site-tagline",
 		"isValid": true,
 		"attributes": {
-			"level": 0
+			"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 12f32615473cc..8ca7091f30d5e 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/schemas/settings.json b/test/integration/fixtures/schemas/settings.json
new file mode 100644
index 0000000000000..0ed0548aa7b0a
--- /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 0000000000000..e70019cc26697
--- /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 0000000000000..50635d3de7e92
--- /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 0000000000000..8c596653abcb0
--- /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 0000000000000..b8bbd11910d50
--- /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 0000000000000..cf9e2c5689534
--- /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 0000000000000..0727fb2abdbe1
--- /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 0000000000000..42b3e4b2174f5
--- /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 0000000000000..a8a28550dbeee
--- /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 0000000000000..4fc448a22a016
--- /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/theme-schema.test.js b/test/integration/theme-schema.test.js
index df6ee29fbec1e..01c95ddaefadc 100644
--- a/test/integration/theme-schema.test.js
+++ b/test/integration/theme-schema.test.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import Ajv from 'ajv-draft-04';
+import Ajv from 'ajv';
 import glob from 'fast-glob';
 
 /**
@@ -14,13 +14,17 @@ describe( 'theme.json schema', () => {
 		[ '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.
@@ -45,4 +49,13 @@ describe( 'theme.json schema', () => {
 
 		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 0000000000000..48ef039a8fb0d
--- /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/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js
index 520ad76de22ee..9c9d8aec71da4 100644
--- a/test/performance/specs/site-editor.spec.js
+++ b/test/performance/specs/site-editor.spec.js
@@ -438,9 +438,7 @@ test.describe( 'Site Editor Performance', () => {
 				await Promise.all(
 					Array.from( { length: perPage }, async ( el, index ) => {
 						return await page
-							.getByRole( 'link', {
-								name: `Page (${ index })`,
-							} )
+							.getByLabel( `Page (${ index })` )
 							.waitFor( { state: 'attached' } );
 					} )
 				);
diff --git a/test/php/gutenberg-coding-standards/.phpcs.xml.dist b/test/php/gutenberg-coding-standards/.phpcs.xml.dist
index 7f717f65374d7..7ebe60e3d2856 100644
--- a/test/php/gutenberg-coding-standards/.phpcs.xml.dist
+++ b/test/php/gutenberg-coding-standards/.phpcs.xml.dist
@@ -1,15 +1,8 @@
 <?xml version="1.0"?>
-<ruleset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" name="WordPress Coding Standards" xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/squizlabs/PHP_CodeSniffer/master/phpcs.xsd">
+<ruleset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" name="Gutenberg Coding Standards" xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/PHPCSStandards/PHP_CodeSniffer/master/phpcs.xsd">
 
 	<description>The Coding standard for the Gutenberg Coding Standards itself.</description>
 
-	<!--
-	#############################################################################
-	COMMAND LINE ARGUMENTS
-	https://github.com/squizlabs/PHP_CodeSniffer/wiki/Annotated-Ruleset
-	#############################################################################
-	-->
-
 	<file>.</file>
 
 	<!-- Exclude Composer vendor directory. -->
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/ForbiddenFunctionsAndClassesSniff.php b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/ForbiddenFunctionsAndClassesSniff.php
index 87d966ecb5603..12d388cc37818 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/ForbiddenFunctionsAndClassesSniff.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/ForbiddenFunctionsAndClassesSniff.php
@@ -3,8 +3,7 @@
  * Gutenberg Coding Standards.
  *
  * @package gutenberg/gutenberg-coding-standards
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 namespace GutenbergCS\Gutenberg\Sniffs\CodeAnalysis;
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/GuardedFunctionAndClassNamesSniff.php b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/GuardedFunctionAndClassNamesSniff.php
index c6e51119f1513..d947d6d9382b3 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/GuardedFunctionAndClassNamesSniff.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/GuardedFunctionAndClassNamesSniff.php
@@ -3,8 +3,7 @@
  * Gutenberg Coding Standards.
  *
  * @package gutenberg/gutenberg-coding-standards
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 namespace GutenbergCS\Gutenberg\Sniffs\CodeAnalysis;
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/Commenting/SinceTagSniff.php b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/Commenting/SinceTagSniff.php
index f216f4f681f0e..20f698954cb26 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/Commenting/SinceTagSniff.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/Commenting/SinceTagSniff.php
@@ -3,8 +3,7 @@
  * Gutenberg Coding Standards.
  *
  * @package gutenberg/gutenberg-coding-standards
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 namespace GutenbergCS\Gutenberg\Sniffs\Commenting;
@@ -22,7 +21,7 @@
 /**
  * This sniff verifies the presence of valid `@since` tags in the docblocks of various PHP structures
  * and WordPress hooks. Supported structures include classes, interfaces, traits, enums, functions, methods and properties.
- * Files located within the __experimental block of the block-library are excluded from checks.
+ * Files located within the __experimental blocks of the block-library folder are excluded from checks.
  */
 class SinceTagSniff implements Sniff {
 
@@ -147,7 +146,7 @@ protected function process_hook( File $phpcs_file, $stack_pointer ) {
 
 		$violation_codes = static::get_violation_codes( 'Hook' );
 
-		$docblock = static::find_hook_docblock( $phpcs_file, $stack_pointer );
+		$docblock = static::find_docblock( $phpcs_file, $stack_pointer );
 
 		$version_tags = static::parse_since_tags( $phpcs_file, $docblock );
 		if ( empty( $version_tags ) ) {
@@ -436,114 +435,81 @@ protected function check_below_minimum_visibility( $visibility ) {
 	}
 
 	/**
-	 * Finds the docblock associated with a hook, starting from a specified position in the token stack.
-	 * Since a line containing a hook can include any type of tokens, this method backtracks through the tokens
-	 * to locate the first token on the current line. This token is then used as the starting point for searching the docblock.
+	 * Finds the first token on the previous line relative to the stack pointer passed to the method.
 	 *
 	 * @param File $phpcs_file    The file being scanned.
-	 * @param int  $stack_pointer The position to start looking for the docblock.
-	 * @return array|false An associative array containing the start and end tokens of the docblock, or false if not found.
+	 * @param int  $stack_pointer The position to find the previous line token from.
+	 * @return int|false The last token on the previous line, or false if not found.
 	 */
-	protected static function find_hook_docblock( File $phpcs_file, $stack_pointer ) {
+	protected static function find_previous_line_token( File $phpcs_file, $stack_pointer ) {
 		$tokens       = $phpcs_file->getTokens();
 		$current_line = $tokens[ $stack_pointer ]['line'];
 
-		for ( $i = $stack_pointer; $i >= 0; $i-- ) {
-			if ( $tokens[ $i ]['line'] < $current_line ) {
-				// The previous token is on the previous line, so the current token is the first on the line.
-				return static::find_docblock( $phpcs_file, $i + 1 );
+		for ( $token = $stack_pointer; $token >= 0; $token-- ) {
+			if ( $tokens[ $token ]['line'] < $current_line ) {
+				return $token;
 			}
 		}
 
-		return static::find_docblock( $phpcs_file, 0 );
+		return false;
 	}
 
 	/**
-	 * Determines if a T_STRING token represents a function call.
-	 * The implementation was copied from PHPCompatibility\Sniffs\Extensions\RemovedExtensionsSniff::process().
+	 * Finds the docblock preceding a specified position (stack pointer) in a given PHP file.
 	 *
 	 * @param File $phpcs_file    The file being scanned.
-	 * @param int  $stack_pointer The position of the T_STRING token in question.
-	 * @return bool True if the token represents a function call, false otherwise.
+	 * @param int  $stack_pointer The position (stack pointer) in the token stack from which to start searching backwards.
+	 * @return array|false An associative array containing the start and end tokens of the docblock, or false if not found.
 	 */
-	protected static function is_function_call( File $phpcs_file, $stack_pointer ) {
-		$tokens = $phpcs_file->getTokens();
-
-		// Find the next non-empty token.
-		$open_bracket = $phpcs_file->findNext( Tokens::$emptyTokens, ( $stack_pointer + 1 ), null, true );
-
-		if ( T_OPEN_PARENTHESIS !== $tokens[ $open_bracket ]['code'] ) {
-			// Not a function call.
+	protected static function find_docblock( File $phpcs_file, $stack_pointer ) {
+		// It can be assumed that the DocBlock should end on the previous line, not the current one.
+		$previous_line_end_token = static::find_previous_line_token( $phpcs_file, $stack_pointer );
+		if ( false === $previous_line_end_token ) {
 			return false;
 		}
 
-		if ( false === isset( $tokens[ $open_bracket ]['parenthesis_closer'] ) ) {
-			// Not a function call.
+		$docblock_end_token = $phpcs_file->findPrevious( array( T_WHITESPACE ), $previous_line_end_token, null, true );
+
+		$tokens = $phpcs_file->getTokens();
+		if ( false === $docblock_end_token || T_DOC_COMMENT_CLOSE_TAG !== $tokens[ $docblock_end_token ]['code'] ) {
+			// Only "/**" style comments are supported.
 			return false;
 		}
 
-		// Find the previous non-empty token.
-		$search   = Tokens::$emptyTokens;
-		$search[] = T_BITWISE_AND;
-		$previous = $phpcs_file->findPrevious( $search, ( $stack_pointer - 1 ), null, true );
-
-		$previous_tokens_to_ignore = array(
-			T_FUNCTION, // Function declaration.
-			T_NEW, // Creating an object.
-			T_OBJECT_OPERATOR, // Calling an object.
+		return array(
+			'start_token' => $tokens[ $docblock_end_token ]['comment_opener'],
+			'end_token'   => $docblock_end_token,
 		);
-
-		return ! in_array( $tokens[ $previous ]['code'], $previous_tokens_to_ignore, true );
 	}
 
 	/**
-	 * Finds the docblock preceding a specified position (stack pointer) in a given PHP file.
-	 * The implementation was copied from PHP_CodeSniffer\Standards\PEAR\Sniffs\Commenting\FunctionCommentSniff::process().
+	 * Determines if a T_STRING token represents a function call.
 	 *
 	 * @param File $phpcs_file    The file being scanned.
-	 * @param int  $stack_pointer The position (stack pointer) in the token stack from which to start searching backwards.
-	 * @return array|false An associative array containing the start and end tokens of the docblock, or false if not found.
+	 * @param int  $stack_pointer The position of the T_STRING token in question.
+	 * @return bool True if the token represents a function call, false otherwise.
 	 */
-	protected static function find_docblock( File $phpcs_file, $stack_pointer ) {
-		$tokens                 = $phpcs_file->getTokens();
-		$ignore                 = Tokens::$methodPrefixes;
-		$ignore[ T_WHITESPACE ] = T_WHITESPACE;
-
-		for ( $comment_end = ( $stack_pointer - 1 ); $comment_end >= 0; $comment_end-- ) {
-			if ( isset( $ignore[ $tokens[ $comment_end ]['code'] ] ) ) {
-				continue;
-			}
-
-			if ( T_ATTRIBUTE_END === $tokens[ $comment_end ]['code']
-			     && isset( $tokens[ $comment_end ]['attribute_opener'] )
-			) {
-				$comment_end = $tokens[ $comment_end ]['attribute_opener'];
-				continue;
-			}
+	protected static function is_function_call( File $phpcs_file, $stack_pointer ) {
+		$tokens = $phpcs_file->getTokens();
 
-			break;
-		}
+		// Find the previous non-empty token.
+		$previous = $phpcs_file->findPrevious( Tokens::$emptyTokens, ( $stack_pointer - 1 ), null, true );
 
-		if ( $tokens[ $comment_end ]['code'] === T_COMMENT ) {
-			// Inline comments might just be closing comments for
-			// control structures or functions instead of function comments
-			// using the wrong comment type. If there is other code on the line,
-			// assume they relate to that code.
-			$previous = $phpcs_file->findPrevious( $ignore, ( $comment_end - 1 ), null, true );
-			if ( false !== $previous && $tokens[ $previous ]['line'] === $tokens[ $comment_end ]['line'] ) {
-				$comment_end = $previous;
-			}
-		}
+		$previous_tokens_to_ignore = array(
+			T_NEW,             // Creating an object.
+			T_OBJECT_OPERATOR, // Calling an object.
+			T_FUNCTION,        // Function declaration.
+		);
 
-		if ( T_DOC_COMMENT_CLOSE_TAG !== $tokens[ $comment_end ]['code'] ) {
-			// Only "/**" style comments are supported.
+		if ( in_array( $tokens[ $previous ]['code'], $previous_tokens_to_ignore, true ) ) {
+			// This is an object or function declaration.
 			return false;
 		}
 
-		return array(
-			'start_token' => $tokens[ $comment_end ]['comment_opener'],
-			'end_token'   => $comment_end,
-		);
+		// Find the next non-empty token.
+		$open_bracket = $phpcs_file->findNext( Tokens::$emptyTokens, ( $stack_pointer + 1 ), null, true );
+
+		return ( false !== $open_bracket ) && ( T_OPEN_PARENTHESIS === $tokens[ $open_bracket ]['code'] );
 	}
 
 	/**
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/NamingConventions/ValidBlockLibraryFunctionNameSniff.php b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/NamingConventions/ValidBlockLibraryFunctionNameSniff.php
index 74608921c32d8..bf7dbc2fd85d3 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/NamingConventions/ValidBlockLibraryFunctionNameSniff.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/NamingConventions/ValidBlockLibraryFunctionNameSniff.php
@@ -3,8 +3,7 @@
  * Gutenberg Coding Standards.
  *
  * @package gutenberg/gutenberg-coding-standards
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 namespace GutenbergCS\Gutenberg\Sniffs\NamingConventions;
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/AbstractSniffUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/AbstractSniffUnitTest.php
index 08838ce412fc3..f1be5ab00b075 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Tests/AbstractSniffUnitTest.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/AbstractSniffUnitTest.php
@@ -3,8 +3,7 @@
  * An abstract class that all sniff unit tests must extend.
  *
  * @package gutenberg-coding-standards/gbc
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 namespace GutenbergCS\Gutenberg\Tests;
@@ -14,6 +13,9 @@
 use PHP_CodeSniffer\Ruleset;
 use PHP_CodeSniffer\Sniffs\Sniff;
 
+/**
+ * An abstract test class that contains common methods for all sniff unit tests.
+ */
 abstract class AbstractSniffUnitTest extends BaseAbstractSniffUnitTest {
 
 	/**
@@ -65,7 +67,7 @@ public function setCliValues( $filename, $config ) {
 		if ( ! isset( $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] )
 			|| ( ! $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] instanceof Ruleset )
 		) {
-			throw new \RuntimeException( $error_message );
+			throw new \RuntimeException( $error_message ); // phpcs:ignore WordPress.Security.EscapeOutput.ExceptionNotEscaped -- this is non-production code.
 		}
 
 		// Backup the original Ruleset instance.
@@ -76,7 +78,7 @@ public function setCliValues( $filename, $config ) {
 
 		$sniff_fqcn = $this->get_sniff_fqcn();
 		if ( ! isset( $current_ruleset->sniffs[ $sniff_fqcn ] ) ) {
-			throw new \RuntimeException( $error_message );
+			throw new \RuntimeException( $error_message ); // phpcs:ignore WordPress.Security.EscapeOutput.ExceptionNotEscaped -- this is non-production code.
 		}
 
 		$sniff = $current_ruleset->sniffs[ $sniff_fqcn ];
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/ForbiddenFunctionsAndClassesUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/ForbiddenFunctionsAndClassesUnitTest.php
index 8026e88f1d945..79719fba6039d 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/ForbiddenFunctionsAndClassesUnitTest.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/ForbiddenFunctionsAndClassesUnitTest.php
@@ -3,8 +3,7 @@
  * Unit test class for Gutenberg Coding Standard.
  *
  * @package gutenberg-coding-standards/gbc
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 namespace GutenbergCS\Gutenberg\Tests\CodeAnalysis;
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/GuardedFunctionAndClassNamesUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/GuardedFunctionAndClassNamesUnitTest.php
index 652f6b735378c..b4e26fd2e69c4 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/GuardedFunctionAndClassNamesUnitTest.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/GuardedFunctionAndClassNamesUnitTest.php
@@ -3,8 +3,7 @@
  * Unit test class for Gutenberg Coding Standard.
  *
  * @package gutenberg-coding-standards/gbc
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 namespace GutenbergCS\Gutenberg\Tests\CodeAnalysis;
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.php
index bc7ca28c263ff..1318687768c9d 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.php
@@ -3,8 +3,7 @@
  * Unit test class for Gutenberg Coding Standard.
  *
  * @package gutenberg-coding-standards/gbc
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 namespace GutenbergCS\Gutenberg\Tests\Commenting;
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/NamingConventions/ValidBlockLibraryFunctionNameUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/NamingConventions/ValidBlockLibraryFunctionNameUnitTest.php
index 51174dd769d0a..14a2cb1a97dd7 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Tests/NamingConventions/ValidBlockLibraryFunctionNameUnitTest.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/NamingConventions/ValidBlockLibraryFunctionNameUnitTest.php
@@ -3,8 +3,7 @@
  * Unit test class for Gutenberg Coding Standard.
  *
  * @package gutenberg-coding-standards/gbc
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 namespace GutenbergCS\Gutenberg\Tests\NamingConventions;
diff --git a/test/php/gutenberg-coding-standards/README.md b/test/php/gutenberg-coding-standards/README.md
index 51f6574fa2053..500abe2e5b481 100644
--- a/test/php/gutenberg-coding-standards/README.md
+++ b/test/php/gutenberg-coding-standards/README.md
@@ -1,3 +1,9 @@
 # Gutenberg Coding Standards for Gutenberg
 
-This project is a collection of [PHP_CodeSniffer](https://github.com/squizlabs/PHP_CodeSniffer) rules (sniffs) to validate code developed for Gutenberg. It ensures code quality and adherence to coding conventions.
\ No newline at end of file
+This project is a collection of [PHP_CodeSniffer](https://github.com/PHPCSStandards/PHP_CodeSniffer) rules (sniffs) to validate code developed for Gutenberg. It ensures code quality and adherence to coding conventions.
+
+## License
+
+This project is licensed under the same terms as the Gutenberg project.
+
+Please refer to this [LICENSE.md](../../../LICENSE.md) file for detailed license information.
diff --git a/test/php/gutenberg-coding-standards/Tests/bootstrap.php b/test/php/gutenberg-coding-standards/Tests/bootstrap.php
index f28528bc1b972..547a1ce303835 100644
--- a/test/php/gutenberg-coding-standards/Tests/bootstrap.php
+++ b/test/php/gutenberg-coding-standards/Tests/bootstrap.php
@@ -1,86 +1,51 @@
 <?php
 /**
- * Gutenberg Coding Standard.
+ * Gutenberg Coding Standards (GBCS) Bootstrap File.
  *
- * Bootstrap file for running the tests.
- *
- * - Load the PHPCS PHPUnit bootstrap file providing cross-version PHPUnit support.
- *   {@link https://github.com/squizlabs/PHP_CodeSniffer/pull/1384}
- * - Load the Composer autoload file.
- * - Automatically limit the testing to the WordPressCS tests.
+ * Initializes the environment for running GBCS tests.
  *
  * @package gutenberg/gutenberg-coding-standards
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
  */
 
 if ( ! defined( 'PHP_CODESNIFFER_IN_TESTS' ) ) {
 	define( 'PHP_CODESNIFFER_IN_TESTS', true );
 }
 
-$ds = DIRECTORY_SEPARATOR;
-
-/*
- * Load the necessary PHPCS files.
- */
-// Get the PHPCS dir from an environment variable.
-$phpcsDir          = getenv( 'PHPCS_DIR' );
-$composerPHPCSPath = dirname( __DIR__ ) . $ds . 'vendor' . $ds . 'squizlabs' . $ds . 'php_codesniffer';
-
-if ( false === $phpcsDir && is_dir( $composerPHPCSPath ) ) {
-	// PHPCS installed via Composer.
-	$phpcsDir = $composerPHPCSPath;
-} elseif ( false !== $phpcsDir ) {
-	/*
-	 * PHPCS in a custom directory.
-	 * For this to work, the `PHPCS_DIR` needs to be set in a custom `phpunit.xml` file.
-	 */
-	$phpcsDir = realpath( $phpcsDir );
-}
-
-// Try and load the PHPCS autoloader.
-if ( false !== $phpcsDir
-	&& file_exists( $phpcsDir . $ds . 'autoload.php' )
-	&& file_exists( $phpcsDir . $ds . 'tests' . $ds . 'bootstrap.php' )
-) {
-	require_once $phpcsDir . $ds . 'autoload.php';
-	require_once $phpcsDir . $ds . 'tests' . $ds . 'bootstrap.php'; // PHPUnit 6.x+ support.
-} else {
-	echo 'Uh oh... can\'t find PHPCS.
+$dir_separator = DIRECTORY_SEPARATOR;
 
-If you use Composer, please run `composer install`.
-Otherwise, make sure you set a `PHPCS_DIR` environment variable in your phpunit.xml file
-pointing to the PHPCS directory and that PHPCSUtils is included in the `installed_paths`
-for that PHPCS install.
-';
+// Define the path to the PHPCS directory.
+$phpcs_path            = dirname( __DIR__ ) . $dir_separator . 'vendor' . $dir_separator . 'squizlabs' . $dir_separator . 'php_codesniffer';
+$autoload_script_path  = $phpcs_path . $dir_separator . 'autoload.php';
+$bootstrap_script_path = $phpcs_path . $dir_separator . 'tests' . $dir_separator . 'bootstrap.php';
 
-	die( 1 );
+// Attempt to load the PHPCS autoloader.
+if ( ! file_exists( $autoload_script_path ) || ! file_exists( $bootstrap_script_path ) ) {
+	echo 'PHP_CodeSniffer not found. Please run "composer install".' . PHP_EOL;
+	exit( 1 );
 }
 
+require_once $autoload_script_path;
+require_once $bootstrap_script_path; // Support for PHPUnit 6.x+.
 
-/*
- * Set the PHPCS_IGNORE_TEST environment variable to ignore tests from other standards.
+/**
+ * Configure the environment to ignore tests from other coding standards.
  */
-$gbcsStandards = array(
-	'Gutenberg' => true,
-);
-
-$allStandards   = PHP_CodeSniffer\Util\Standards::getInstalledStandards();
-$allStandards[] = 'Generic';
+$available_standards = PHP_CodeSniffer\Util\Standards::getInstalledStandards();
+$ignored_standards   = array( 'Generic' );
 
-$standardsToIgnore = array();
-foreach ( $allStandards as $standard ) {
-	if ( isset( $gbcsStandards[ $standard ] ) === true ) {
+foreach ( $available_standards as $available_standard ) {
+	if ( 'Gutenberg' === $available_standard ) {
 		continue;
 	}
 
-	$standardsToIgnore[] = $standard;
+	$ignored_standards[] = $available_standard;
 }
 
-$standardsToIgnoreString = implode( ',', $standardsToIgnore );
+$ignore_standards_string = implode( ',', $ignored_standards );
 
-// phpcs:ignore WordPress.PHP.DiscouragedPHPFunctions.runtime_configuration_putenv -- This is not production, but test code.
-putenv( "PHPCS_IGNORE_TESTS={$standardsToIgnoreString}" );
+// phpcs:ignore WordPress.PHP.DiscouragedPHPFunctions.runtime_configuration_putenv -- This is non-production code.
+putenv( "PHPCS_IGNORE_TESTS={$ignore_standards_string}" );
 
-// Clean up.
-unset( $ds, $phpcsDir, $composerPHPCSPath, $allStandards, $standardsToIgnore, $standard, $standardsToIgnoreString );
+// Cleanup.
+unset( $dir_separator, $phpcs_path, $available_standards, $ignored_standards, $available_standard, $ignore_standards_string );
diff --git a/test/php/gutenberg-coding-standards/composer.json b/test/php/gutenberg-coding-standards/composer.json
index c1c27f81818aa..2d79dc906a8d9 100644
--- a/test/php/gutenberg-coding-standards/composer.json
+++ b/test/php/gutenberg-coding-standards/composer.json
@@ -8,7 +8,7 @@
 		"static analysis",
 		"Gutenberg"
 	],
-	"license": "MIT",
+	"license": "GPL-2.0-or-later",
 	"authors": [
 		{
 			"name": "Contributors",
diff --git a/test/unit/jest.config.js b/test/unit/jest.config.js
index 4a19d5bb37f31..8564d4116691f 100644
--- a/test/unit/jest.config.js
+++ b/test/unit/jest.config.js
@@ -19,7 +19,10 @@ module.exports = {
 		'<rootDir>/test/unit/config/global-mocks.js',
 		'<rootDir>/test/unit/config/gutenberg-env.js',
 	],
-	setupFilesAfterEnv: [ '<rootDir>/test/unit/config/testing-library.js' ],
+	setupFilesAfterEnv: [
+		'<rootDir>/test/unit/config/testing-library.js',
+		'<rootDir>/test/unit/mocks/match-media.js',
+	],
 	testEnvironmentOptions: {
 		url: 'http://localhost/',
 	},
@@ -40,7 +43,7 @@ module.exports = {
 		'^.+\\.[jt]sx?$': '<rootDir>/test/unit/scripts/babel-transformer.js',
 	},
 	transformIgnorePatterns: [
-		'/node_modules/(?!(docker-compose|yaml|preact|@preact|deepsignal)/)',
+		'/node_modules/(?!(docker-compose|yaml|preact|@preact|parsel-js)/)',
 		'\\.pnp\\.[^\\/]+$',
 	],
 	snapshotSerializers: [
diff --git a/test/unit/mocks/match-media.js b/test/unit/mocks/match-media.js
new file mode 100644
index 0000000000000..3a9ff7b901ff1
--- /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/tools/webpack/blocks.js b/tools/webpack/blocks.js
index 36329d39c1212..a7866b61a6a1f 100644
--- a/tools/webpack/blocks.js
+++ b/tools/webpack/blocks.js
@@ -2,13 +2,15 @@
  * External dependencies
  */
 const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
-const { join, sep } = require( 'path' );
+const { join, sep, basename } = require( 'path' );
 const fastGlob = require( 'fast-glob' );
+const { realpathSync } = require( 'fs' );
 
 /**
  * WordPress dependencies
  */
 const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
+const { PhpFilePathsPlugin } = require( '@wordpress/scripts/utils' );
 
 /**
  * Internal dependencies
@@ -90,6 +92,10 @@ module.exports = [
 		plugins: [
 			...plugins,
 			new DependencyExtractionWebpackPlugin( { injectPolyfill: false } ),
+			new PhpFilePathsPlugin( {
+				context: './packages/block-library/src/',
+				props: [ 'render', 'variations' ],
+			} ),
 			new CopyWebpackPlugin( {
 				patterns: [].concat(
 					[
@@ -127,17 +133,35 @@ module.exports = [
 							'build/widgets/blocks/',
 					} ).flatMap( ( [ from, to ] ) => [
 						{
-							from: `${ from }/**/index.php`,
+							from: `${ from }/**/*.php`,
 							to( { absoluteFilename } ) {
-								const [ , dirname ] = absoluteFilename.match(
-									new RegExp(
-										`([\\w-]+)${ escapeRegExp(
-											sep
-										) }index\\.php$`
+								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,
+											'/'
+										)
 									)
 								);
-
-								return join( to, `${ dirname }.php` );
 							},
 							transform: ( content ) => {
 								const prefix = 'gutenberg_';
diff --git a/tools/webpack/interactivity.js b/tools/webpack/interactivity.js
deleted file mode 100644
index cbde31171fe26..0000000000000
--- a/tools/webpack/interactivity.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * External dependencies
- */
-const { join } = require( 'path' );
-const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
-/**
- * WordPress dependencies
- */
-const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
-
-/**
- * Internal dependencies
- */
-const { baseConfig, plugins } = require( './shared' );
-
-module.exports = {
-	...baseConfig,
-	name: 'interactivity',
-	entry: {
-		index: './packages/interactivity',
-		debug: './packages/interactivity/src/debug',
-		router: './packages/interactivity-router',
-		navigation: './packages/block-library/src/navigation/view.js',
-		query: './packages/block-library/src/query/view.js',
-		image: './packages/block-library/src/image/view.js',
-		file: './packages/block-library/src/file/view.js',
-		search: './packages/block-library/src/search/view.js',
-	},
-	experiments: {
-		outputModule: true,
-	},
-	output: {
-		devtoolNamespace: 'wp',
-		filename: './build/interactivity/[name].min.js',
-		library: {
-			type: 'module',
-		},
-		path: join( __dirname, '..', '..' ),
-		environment: { module: true },
-		module: true,
-		chunkFormat: 'module',
-	},
-	resolve: {
-		extensions: [ '.js', '.ts', '.tsx' ],
-	},
-	module: {
-		rules: [
-			{
-				test: /\.(j|t)sx?$/,
-				exclude: /node_modules/,
-				use: [
-					{
-						loader: require.resolve( 'babel-loader' ),
-						options: {
-							cacheDirectory:
-								process.env.BABEL_CACHE_DIRECTORY || true,
-							babelrc: false,
-							configFile: false,
-							presets: [
-								'@babel/preset-typescript',
-								'@babel/preset-react',
-							],
-						},
-					},
-				],
-			},
-		],
-	},
-	plugins: [
-		...plugins,
-		// TODO: Move it to a different Webpack file.
-		new CopyWebpackPlugin( {
-			patterns: [
-				{
-					from: './node_modules/es-module-shims/dist/es-module-shims.wasm.js',
-					to: './build/modules/importmap-polyfill.min.js',
-				},
-			],
-		} ),
-		new DependencyExtractionWebpackPlugin(),
-	],
-	watchOptions: {
-		ignored: [ '**/node_modules' ],
-		aggregateTimeout: 500,
-	},
-};
diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
index 055665c2feb1c..76d460cafc15d 100644
--- a/tools/webpack/packages.js
+++ b/tools/webpack/packages.js
@@ -34,6 +34,7 @@ const BUNDLED_PACKAGES = [
 	'@wordpress/interface',
 	'@wordpress/sync',
 	'@wordpress/undo-manager',
+	'@wordpress/fields',
 ];
 
 // PHP files in packages that have to be copied during build.
@@ -145,7 +146,7 @@ module.exports = {
 	},
 	plugins: [
 		...plugins,
-		new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ),
+		new DependencyExtractionWebpackPlugin( { injectPolyfill: false } ),
 		new CopyWebpackPlugin( {
 			patterns: gutenbergPackages
 				.map( ( packageName ) => ( {
diff --git a/tools/webpack/script-modules.js b/tools/webpack/script-modules.js
new file mode 100644
index 0000000000000..021f11f5f5ed9
--- /dev/null
+++ b/tools/webpack/script-modules.js
@@ -0,0 +1,116 @@
+/**
+ * External dependencies
+ */
+const { join } = require( 'path' );
+
+/**
+ * WordPress dependencies
+ */
+const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
+
+/**
+ * Internal dependencies
+ */
+const { baseConfig, plugins } = require( './shared' );
+
+const WORDPRESS_NAMESPACE = '@wordpress/';
+const { createRequire } = require( 'node:module' );
+
+const rootURL = new URL( '..', `file://${ __dirname }` );
+const fromRootRequire = createRequire( rootURL );
+
+/** @type {Iterable<[string, string]>} */
+const iterableDeps = Object.entries(
+	fromRootRequire( './package.json' ).dependencies
+);
+
+/** @type {Map<string, string>} */
+const gutenbergScriptModules = new Map();
+for ( const [ packageName, versionSpecifier ] of iterableDeps ) {
+	if (
+		! packageName.startsWith( WORDPRESS_NAMESPACE ) ||
+		! versionSpecifier.startsWith( 'file:' ) ||
+		packageName.startsWith( WORDPRESS_NAMESPACE + 'react-native' )
+	) {
+		continue;
+	}
+
+	const packageRequire = createRequire(
+		// Remove the leading "file:" specifier to build a package URL.
+		new URL( `${ versionSpecifier.substring( 5 ) }/`, rootURL )
+	);
+
+	const depPackageJson = packageRequire( './package.json' );
+	if ( ! Object.hasOwn( depPackageJson, 'wpScriptModuleExports' ) ) {
+		continue;
+	}
+
+	const moduleName = packageName.substring( WORDPRESS_NAMESPACE.length );
+	let { wpScriptModuleExports } = depPackageJson;
+
+	// 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 }`,
+			packageRequire.resolve( 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/tsconfig.json b/tsconfig.json
index cf986ddbee72b..4dafc0acc958c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,16 +25,19 @@
 		{ "path": "packages/element" },
 		{ "path": "packages/escape-html" },
 		{ "path": "packages/eslint-plugin" },
+		{ "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" },
@@ -46,6 +49,7 @@
 		{ "path": "packages/redux-routine" },
 		{ "path": "packages/report-flaky-tests" },
 		{ "path": "packages/rich-text" },
+		{ "path": "packages/router" },
 		{ "path": "packages/style-engine" },
 		{ "path": "packages/sync" },
 		{ "path": "packages/token-list" },
diff --git a/webpack.config.js b/webpack.config.js
index 45b22cc5354dc..51889b06d1eb4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,13 +3,13 @@
  */
 const blocksConfig = require( './tools/webpack/blocks' );
 const developmentConfigs = require( './tools/webpack/development' );
-const interactivity = require( './tools/webpack/interactivity' );
+const scriptModules = require( './tools/webpack/script-modules' );
 const packagesConfig = require( './tools/webpack/packages' );
 const vendorsConfig = require( './tools/webpack/vendors' );
 
 module.exports = [
 	...blocksConfig,
-	interactivity,
+	scriptModules,
 	packagesConfig,
 	...developmentConfigs,
 	...vendorsConfig,