diff --git a/.eslintrc.js b/.eslintrc.js
index 9ac141fd09a04..e997e7804beac 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -76,6 +76,11 @@ const restrictedImports = [
 		message:
 			"edit-widgets is a WordPress top level package that shouldn't be imported into other packages",
 	},
+	{
+		name: 'classnames',
+		message:
+			"Please use `clsx` instead. It's a lighter and faster drop-in replacement for `classnames`.",
+	},
 ];
 
 module.exports = {
@@ -87,6 +92,7 @@ module.exports = {
 	],
 	globals: {
 		wp: 'off',
+		globalThis: 'readonly',
 	},
 	settings: {
 		jsdoc: {
@@ -98,8 +104,12 @@ module.exports = {
 	rules: {
 		'jest/expect-expect': 'off',
 		'react/jsx-boolean-value': 'error',
+		'react/jsx-curly-brace-presence': [
+			'error',
+			{ props: 'never', children: 'never' },
+		],
 		'@wordpress/dependency-group': 'error',
-		'@wordpress/is-gutenberg-plugin': 'error',
+		'@wordpress/wp-global-usage': 'error',
 		'@wordpress/react-no-unsafe-timeout': 'error',
 		'@wordpress/i18n-text-domain': [
 			'error',
@@ -243,6 +253,24 @@ module.exports = {
 				],
 			},
 		},
+		{
+			files: [
+				'packages/*/src/**/*.[tj]s?(x)',
+				'storybook/stories/**/*.[tj]s?(x)',
+			],
+			excludedFiles: [ '**/*.native.js' ],
+			rules: {
+				'no-restricted-syntax': [
+					'error',
+					{
+						selector:
+							'JSXOpeningElement[name.name="Button"]:not(:has(JSXAttribute[name.name="__experimentalIsFocusable"])) JSXAttribute[name.name="disabled"]',
+						message:
+							'`disabled` used without the `__experimentalIsFocusable` prop. Disabling a control without maintaining focusability can cause accessibility issues, by hiding their presence from screen reader users, or preventing focus from returning to a trigger element. (Ignore this error if you truly mean to disable.)',
+					},
+				],
+			},
+		},
 		{
 			files: [
 				// Components package.
diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
index f6527c3de9d97..477cd4fbacb40 100644
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@@ -18,3 +18,6 @@ c56e8a1910ed74f405b74bbb12fe81dea974e5c3
 
 # Autofix eslint curly rule.
 0221522f253e094b277a1485b7a2d186cb172632
+
+# ESLint: Enable react/jsx-curly-brace-presence
+5d4baa9ab5f57d207cc3a048003216a8574574d9
diff --git a/.github/setup-node/action.yml b/.github/setup-node/action.yml
index af71abd3cd9b2..a17adfe5f5007 100644
--- a/.github/setup-node/action.yml
+++ b/.github/setup-node/action.yml
@@ -32,8 +32,15 @@ runs:
 
         - name: Install npm dependencies
           if: ${{ steps.cache-node_modules.outputs.cache-hit != 'true' }}
-          run: npm ci
+          run: |
+              npm ci
           shell: bash
+        - name: Upload npm logs as an artifact on failure
+          uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
+          if: failure()
+          with:
+              name: npm-logs
+              path: C:\npm\cache\_logs
 
         # On cache hit, we run the post-install script to match the native `npm ci` behavior.
         # An example of this is to patch `node_modules` using patch-package.
diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml
index d1621ed5106aa..a572074f72c9c 100644
--- a/.github/workflows/build-plugin-zip.yml
+++ b/.github/workflows/build-plugin-zip.yml
@@ -69,7 +69,7 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   token: ${{ secrets.GUTENBERG_TOKEN }}
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
@@ -165,7 +165,7 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   ref: ${{ needs.bump-version.outputs.release_branch || github.ref }}
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
@@ -222,7 +222,7 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   fetch-depth: 2
                   ref: ${{ needs.bump-version.outputs.release_branch }}
@@ -311,14 +311,14 @@ jobs:
         if: ${{ endsWith( needs.bump-version.outputs.new_version, '-rc.1' ) }}
         steps:
             - name: Checkout (for CLI)
-              uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   path: main
                   ref: trunk
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Checkout (for publishing)
-              uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   path: publish
                   # Later, we switch this branch in the script that publishes packages.
diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml
index 8eafe4267bc43..2e7f2c98305fb 100644
--- a/.github/workflows/bundle-size.yml
+++ b/.github/workflows/bundle-size.yml
@@ -37,7 +37,7 @@ jobs:
         runs-on: ubuntu-latest
 
         steps:
-            - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+            - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   fetch-depth: 1
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
diff --git a/.github/workflows/check-backport-changelog.yml b/.github/workflows/check-backport-changelog.yml
new file mode 100644
index 0000000000000..99d7e1ca5b53a
--- /dev/null
+++ b/.github/workflows/check-backport-changelog.yml
@@ -0,0 +1,59 @@
+name: Verify Core Backport Changlog
+
+on:
+    pull_request:
+        types: [opened, synchronize, labeled, unlabeled]
+        paths:
+            - 'lib/**'
+            - '!lib/load.php'
+            - '!lib/experiments-page.php'
+            - '!lib/experimental/**'
+            - 'phpunit/**'
+            - '!phpunit/experimental/**'
+            - '!phpunit/blocks/**'
+            - 'packages/**/*.php'
+            - '!packages/block-library/**'
+            - '!packages/e2e-tests/**'
+jobs:
+    check:
+        name: Check CHANGELOG diff
+        runs-on: ubuntu-latest
+        steps:
+            - name: 'Get PR commit count'
+              run: echo "PR_COMMIT_COUNT=$(( ${{ github.event.pull_request.commits }} + 1 ))" >> "${GITHUB_ENV}"
+            - name: Checkout code
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+              with:
+                  ref: ${{ github.event.pull_request.head.ref }}
+                  repository: ${{ github.event.pull_request.head.repo.full_name }}
+                  fetch-depth: ${{ env.PR_COMMIT_COUNT }}
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+            - name: 'Fetch relevant history from origin'
+              run: git fetch origin ${{ github.event.pull_request.base.ref }}
+            - name: Check CHANGELOG status
+              if: ${{ !contains(github.event.pull_request.labels.*.name, 'No Core Sync Required') && !contains(github.event.pull_request.labels.*.name, 'Backport from WordPress Core') }}
+              env:
+                  PR_NUMBER: ${{ github.event.number }}
+              run: |
+                  changelog_folder="backport-changelog"
+
+                  # Find any changelog file that contains the Gutenberg PR link
+                  gutenberg_pr_url="https://github\.com/WordPress/gutenberg/pull/${PR_NUMBER}"
+                  changelog_file=$(grep -rl "[-*] ${gutenberg_pr_url}" "${changelog_folder}" | head -n 1)
+
+                  # Confirm that there is an entry containing the Gutenberg PR link
+                  if [[ -z "${changelog_file}" ]]; then
+                    echo "Please create a core backport PR and add a file with the path <wp-release-number>/<core-pr-number>.md in the $changelog_folder folder with the core backport PR URL and a list item with this PR URL."
+                    echo "If changes are related to an existing, open core PR, you may add this PR URL to the core PR's file."
+                    echo "See $changelog_folder/readme.md for more information."
+                    exit 1
+                  fi
+
+                  core_pr_number=$(basename "${changelog_file}" .md)
+                  core_pr_url="https://github\.com/WordPress/wordpress-develop/pull/${core_pr_number}"
+
+                  # Confirm that the entry has the correct core backport PR URL.
+                  if ! grep -q -e "${core_pr_url}" "${changelog_file}"; then
+                    echo "Please update the content of ${changelog_file} to include the core backport PR URL, or update the file name to match the core backport PR number."
+                    exit 1
+                  fi
diff --git a/.github/workflows/check-components-changelog.yml b/.github/workflows/check-components-changelog.yml
index 77fdf4759f7de..ccc6efac3c378 100644
--- a/.github/workflows/check-components-changelog.yml
+++ b/.github/workflows/check-components-changelog.yml
@@ -20,7 +20,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@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   ref: ${{ github.event.pull_request.head.ref }}
                   repository: ${{ github.event.pull_request.head.repo.full_name }}
diff --git a/.github/workflows/create-block.yml b/.github/workflows/create-block.yml
index 2b93546926480..ff1f1eb980347 100644
--- a/.github/workflows/create-block.yml
+++ b/.github/workflows/create-block.yml
@@ -24,7 +24,7 @@ jobs:
                 os: ['macos-latest', 'ubuntu-latest', 'windows-latest']
 
         steps:
-            - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+            - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml
index c919e733360ff..c4f165d42699d 100644
--- a/.github/workflows/end2end-test.yml
+++ b/.github/workflows/end2end-test.yml
@@ -27,7 +27,7 @@ jobs:
                 totalParts: [8]
 
         steps:
-            - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+            - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
@@ -53,35 +53,61 @@ jobs:
 
             - name: Archive debug artifacts (screenshots, traces)
               uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
-              if: always()
+              if: ${{ !cancelled() }}
               with:
-                  name: failures-artifacts
+                  name: failures-artifacts--${{ matrix.part }}
                   path: artifacts/test-results
                   if-no-files-found: ignore
 
             - name: Archive flaky tests report
               uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
-              if: always()
+              if: ${{ !cancelled() }}
               with:
-                  name: flaky-tests-report
+                  name: flaky-tests-report--${{ matrix.part }}
                   path: flaky-tests
                   if-no-files-found: ignore
 
+    merge-artifacts:
+        name: Merge Artifacts
+        if: ${{ !cancelled() }}
+        needs: [e2e-playwright]
+        runs-on: ubuntu-latest
+        outputs:
+            has-flaky-test-report: ${{ !!steps.merge-flaky-tests-reports.outputs.artifact-id }}
+        steps:
+            - name: Merge failures artifacts
+              uses: actions/upload-artifact/merge@v4
+              # Don't fail the job if there aren't any artifacts to merge.
+              continue-on-error: true
+              with:
+                  name: failures-artifacts
+                  # Retain the merged artifacts in case of a rerun.
+                  pattern: failures-artifacts*
+                  delete-merged: true
+
+            - name: Merge flaky tests reports
+              id: merge-flaky-tests-reports
+              uses: actions/upload-artifact/merge@v4
+              continue-on-error: true
+              with:
+                  name: flaky-tests-report
+                  pattern: flaky-tests-report*
+                  delete-merged: true
+
     report-to-issues:
         name: Report to GitHub
-        needs: [e2e-playwright]
-        if: ${{ always() }}
+        needs: [merge-artifacts]
+        if: ${{ needs.merge-artifacts.outputs.has-flaky-test-report == 'true' }}
         runs-on: ubuntu-latest
         steps:
             # Checkout defaults to using the branch which triggered the event, which
             # isn't necessarily `trunk` (e.g. in the case of a merge).
-            - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+            - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   ref: trunk
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - uses: actions/download-artifact@v4.1.7
-              id: download_artifact
               # Don't fail the job if there isn't any flaky tests report.
               continue-on-error: true
               with:
@@ -89,16 +115,13 @@ jobs:
                   path: flaky-tests
 
             - name: Setup Node.js and install dependencies
-              if: ${{ steps.download_artifact.outcome == 'success' }}
               uses: ./.github/setup-node
 
             - name: Npm build
-              if: ${{ steps.download_artifact.outcome == 'success' }}
               # TODO: We don't have to build the entire project, just the action itself.
               run: npm run build:packages
 
             - name: Report flaky tests
-              if: ${{ steps.download_artifact.outcome == 'success' }}
               uses: ./packages/report-flaky-tests
               with:
                   repo-token: '${{ secrets.GITHUB_TOKEN }}'
diff --git a/.github/workflows/gradle-wrapper-validation.yml b/.github/workflows/gradle-wrapper-validation.yml
index bcd0fee6453fd..b444b8f974df7 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@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+            - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               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 b78ff9532c22d..9090ab305dadf 100644
--- a/.github/workflows/performance.yml
+++ b/.github/workflows/performance.yml
@@ -25,6 +25,7 @@ concurrency:
 
 jobs:
     performance:
+        timeout-minutes: 60
         name: Run performance tests
         runs-on: ubuntu-latest
         if: ${{ github.repository == 'WordPress/gutenberg' }}
@@ -32,7 +33,7 @@ jobs:
             WP_ARTIFACTS_PATH: ${{ github.workspace }}/artifacts
 
         steps:
-            - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+            - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
@@ -84,6 +85,9 @@ jobs:
               run: |
                   ./bin/plugin/cli.js perf $(echo $BRANCHES | tr ',' ' ') --tests-branch $GITHUB_SHA --wp-version "$WP_VERSION"
 
+            - name: Add workflow summary
+              run: cat ${{ env.WP_ARTIFACTS_PATH }}/summary.md >> $GITHUB_STEP_SUMMARY
+
             - name: Archive performance results
               if: success()
               uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
diff --git a/.github/workflows/php-changes-detection.yml b/.github/workflows/php-changes-detection.yml
index ba34e0d806185..2642485bce1ce 100644
--- a/.github/workflows/php-changes-detection.yml
+++ b/.github/workflows/php-changes-detection.yml
@@ -10,17 +10,19 @@ jobs:
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
         steps:
             - name: Check out code
-              uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   fetch-depth: 0
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Get changed PHP files
               id: changed-files-php
-              uses: tj-actions/changed-files@0874344d6ebbaa00a27da73276ae7162fadcaf69 # v44.3.0
+              uses: tj-actions/changed-files@03334d095e2739fa9ac4034ec16f66d5d01e9eba # v44.5.1
               with:
                   files: |
-                      **.{php}
+                      lib/**
+                      packages/**/*.php
+                      phpunit/**
 
             - name: List all changed files
               if: steps.changed-files-php.outputs.any_changed == 'true'
diff --git a/.github/workflows/publish-npm-packages.yml b/.github/workflows/publish-npm-packages.yml
index 11dfdb878ef28..ab139c19e6dde 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@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   path: cli
                   ref: trunk
@@ -39,7 +39,7 @@ jobs:
 
             - name: Checkout (for publishing)
               if: ${{ github.event.inputs.release_type != 'wp' }}
-              uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               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@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   path: publish
                   ref: wp/${{ github.event.inputs.wp_version }}
diff --git a/.github/workflows/pull-request-automation.yml b/.github/workflows/pull-request-automation.yml
index 05d28f888d0ae..61c522474a7b3 100644
--- a/.github/workflows/pull-request-automation.yml
+++ b/.github/workflows/pull-request-automation.yml
@@ -12,7 +12,7 @@ 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@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+            - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   ref: trunk
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml
index 5d1d476226b12..bd23fb219ce75 100644
--- a/.github/workflows/rnmobile-android-runner.yml
+++ b/.github/workflows/rnmobile-android-runner.yml
@@ -23,7 +23,7 @@ jobs:
 
         steps:
             - name: checkout
-              uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
@@ -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@6b0df4b0efb23bb0ec63d881db79aefbc976e4b2 # v2.30.1
+              uses: reactivecircus/android-emulator-runner@77986be26589807b8ebab3fde7bbf5c60dabec32 # v2.31.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@6b0df4b0efb23bb0ec63d881db79aefbc976e4b2 # v2.30.1
+              uses: reactivecircus/android-emulator-runner@77986be26589807b8ebab3fde7bbf5c60dabec32 # v2.31.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 409ba9f8fe171..9640243e86629 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@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+            - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
-            - uses: ruby/setup-ruby@1198b074305f9356bd56dd4b311757cc0dab2f1c # v1.175.1
+            - uses: ruby/setup-ruby@943103cae7d3f1bb1e4951d5fcc7928b40e4b742 # v1.177.1
               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 12c8931efca06..32d7c60968119 100644
--- a/.github/workflows/static-checks.yml
+++ b/.github/workflows/static-checks.yml
@@ -22,7 +22,7 @@ jobs:
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
 
         steps:
-            - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+            - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
diff --git a/.github/workflows/storybook-pages.yml b/.github/workflows/storybook-pages.yml
index 56b7471f06d9b..dfe301386849f 100644
--- a/.github/workflows/storybook-pages.yml
+++ b/.github/workflows/storybook-pages.yml
@@ -12,7 +12,7 @@ jobs:
 
         steps:
             - name: Checkout
-              uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   ref: trunk
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml
index 22bca2dc78186..dd50ea68e0e5d 100644
--- a/.github/workflows/unit-test.yml
+++ b/.github/workflows/unit-test.yml
@@ -32,7 +32,7 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
@@ -70,7 +70,7 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
@@ -121,7 +121,7 @@ jobs:
         name: Build JavaScript assets for PHP unit tests
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+            - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
@@ -170,7 +170,7 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
@@ -281,7 +281,7 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
@@ -351,7 +351,7 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               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 8a92d0443d577..60ecacb2a8d70 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@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+              uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
               with:
                   ref: ${{ matrix.branch }}
                   token: ${{ secrets.GUTENBERG_TOKEN }}
diff --git a/.npmrc b/.npmrc
index cd7566c820233..7a346f877b931 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,3 +1,4 @@
 save-exact = true
 engine-strict = true
 legacy-peer-deps = true
+prefer-dedupe = true
diff --git a/.stylelintrc.json b/.stylelintrc.json
index 7629410913402..df01978222e63 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -15,6 +15,12 @@
 		"font-weight-notation": null,
 		"max-line-length": null,
 		"no-descending-specificity": null,
+		"property-disallowed-list": [
+			[ "order" ],
+			{
+				"message": "Avoid the order property. For accessibility reasons, visual, reading, and DOM order must match. Only use the order property when it does not affect reading order, meaning, and interaction"
+			}
+		],
 		"rule-empty-line-before": null,
 		"selector-class-pattern": null,
 		"value-keyword-case": null,
@@ -29,5 +35,6 @@
 		"scss/at-else-empty-line-before": null,
 		"scss/at-if-closing-brace-space-after": null,
 		"no-invalid-position-at-import-rule": null
-	}
+	},
+	"reportDescriptionlessDisables": true
 }
diff --git a/README.md b/README.md
index 360b2851be092..9c920337ef594 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,7 @@ Get hands on: check out the [block editor live demo](https://wordpress.org/guten
 
 Extending and customizing is at the heart of the WordPress platform, this is no different for the Gutenberg project. The editor and future products can be extended by third-party developers using plugins.
 
-Review the [Create a Block tutorial](/docs/getting-started/devenv/get-started-with-create-block.md) for the fastest way to get started extending the block editor. See the [Developer Documentation](https://developer.wordpress.org/block-editor/#develop-for-the-block-editor) for extensive tutorials, documentation, and API references.
+Review the [Quick Start Guide](https://developer.wordpress.org/block-editor/getting-started/quick-start-guide/) for the fastest way to get started extending the block editor. See the [Block Editor Handbook](https://developer.wordpress.org/block-editor/) for extensive tutorials, documentation, and API references. Also, check the [WordPress Developer Blog](https://developer.wordpress.org/blog/) for great articles about block development, among other topics.
 
 ### Contribute to Gutenberg
 
diff --git a/backport-changelog/6.6/6279.md b/backport-changelog/6.6/6279.md
new file mode 100644
index 0000000000000..f372c33d339b8
--- /dev/null
+++ b/backport-changelog/6.6/6279.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6279
+
+* https://github.com/WordPress/gutenberg/pull/60063
diff --git a/backport-changelog/6.6/6522.md b/backport-changelog/6.6/6522.md
new file mode 100644
index 0000000000000..172464cf664de
--- /dev/null
+++ b/backport-changelog/6.6/6522.md
@@ -0,0 +1,5 @@
+https://github.com/WordPress/wordpress-develop/pull/6522
+
+* https://github.com/WordPress/gutenberg/pull/60106
+* https://github.com/WordPress/gutenberg/pull/60228
+* https://github.com/WordPress/gutenberg/pull/61638
diff --git a/backport-changelog/6.6/6559.md b/backport-changelog/6.6/6559.md
new file mode 100644
index 0000000000000..176a2e04f0257
--- /dev/null
+++ b/backport-changelog/6.6/6559.md
@@ -0,0 +1,6 @@
+https://github.com/WordPress/wordpress-develop/pull/6559
+
+* https://github.com/WordPress/gutenberg/pull/60349
+* https://github.com/WordPress/gutenberg/pull/60464
+* https://github.com/WordPress/gutenberg/pull/60491
+* https://github.com/WordPress/gutenberg/pull/61757
diff --git a/backport-changelog/6.6/6567.md b/backport-changelog/6.6/6567.md
new file mode 100644
index 0000000000000..8f200bed3b5c0
--- /dev/null
+++ b/backport-changelog/6.6/6567.md
@@ -0,0 +1,4 @@
+https://github.com/WordPress/wordpress-develop/pull/6567
+
+* https://github.com/WordPress/gutenberg/pull/47271
+* https://github.com/WordPress/gutenberg/pull/61774
diff --git a/backport-changelog/6.6/6590.md b/backport-changelog/6.6/6590.md
new file mode 100644
index 0000000000000..47ef89e0db40c
--- /dev/null
+++ b/backport-changelog/6.6/6590.md
@@ -0,0 +1,5 @@
+https://github.com/WordPress/wordpress-develop/pull/6590
+
+* https://github.com/WordPress/gutenberg/pull/59531
+* https://github.com/WordPress/gutenberg/pull/61182
+* https://github.com/WordPress/gutenberg/pull/61717
diff --git a/backport-changelog/6.6/6605.md b/backport-changelog/6.6/6605.md
new file mode 100644
index 0000000000000..c45a37d77e660
--- /dev/null
+++ b/backport-changelog/6.6/6605.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6605
+
+* https://github.com/WordPress/gutenberg/pull/61851
diff --git a/backport-changelog/6.6/6616.md b/backport-changelog/6.6/6616.md
new file mode 100644
index 0000000000000..bb35d6c74493c
--- /dev/null
+++ b/backport-changelog/6.6/6616.md
@@ -0,0 +1,7 @@
+https://github.com/WordPress/wordpress-develop/pull/6616
+
+* https://github.com/WordPress/gutenberg/pull/58409
+* https://github.com/WordPress/gutenberg/pull/61328
+* https://github.com/WordPress/gutenberg/pull/61842
+* https://github.com/WordPress/gutenberg/pull/62199
+* https://github.com/WordPress/gutenberg/pull/62252
diff --git a/backport-changelog/6.6/6656.md b/backport-changelog/6.6/6656.md
new file mode 100644
index 0000000000000..f0bf8900335f4
--- /dev/null
+++ b/backport-changelog/6.6/6656.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6656
+
+* https://github.com/WordPress/gutenberg/pull/60715
\ No newline at end of file
diff --git a/backport-changelog/6.6/6662.md b/backport-changelog/6.6/6662.md
new file mode 100644
index 0000000000000..5b25fc9930491
--- /dev/null
+++ b/backport-changelog/6.6/6662.md
@@ -0,0 +1,4 @@
+https://github.com/WordPress/wordpress-develop/pull/6662
+
+* https://github.com/WordPress/gutenberg/pull/57908
+* https://github.com/WordPress/gutenberg/pull/62125
diff --git a/backport-changelog/6.6/6694.md b/backport-changelog/6.6/6694.md
new file mode 100644
index 0000000000000..a9eb5a7f37ef5
--- /dev/null
+++ b/backport-changelog/6.6/6694.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6694
+
+* https://github.com/WordPress/gutenberg/pull/60694
diff --git a/backport-changelog/readme.md b/backport-changelog/readme.md
new file mode 100644
index 0000000000000..200cb9db40486
--- /dev/null
+++ b/backport-changelog/readme.md
@@ -0,0 +1,16 @@
+# 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 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`.
+
+## Example
+
+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/gutenberg/pull/{first-gb-pr-number}
+* https://github.com/WordPress/gutenberg/pull/{second-gb-pr-number}
+```
diff --git a/bin/log-performance-results.js b/bin/log-performance-results.js
index f18e40fea3d2f..da22253546eb6 100755
--- a/bin/log-performance-results.js
+++ b/bin/log-performance-results.js
@@ -50,7 +50,7 @@ const data = new TextEncoder().encode(
 						performanceResults[ index ][ hash ] ?? {}
 					).map( ( [ key, value ] ) => [
 						metricsPrefix + key,
-						value,
+						typeof value === 'object' ? value.q50 : value,
 					] )
 				),
 			};
@@ -64,7 +64,7 @@ const data = new TextEncoder().encode(
 							performanceResults[ index ][ baseHash ] ?? {}
 						).map( ( [ key, value ] ) => [
 							metricsPrefix + key,
-							value,
+							typeof value === 'object' ? value.q50 : value,
 						] )
 					),
 				};
diff --git a/bin/plugin/commands/performance.js b/bin/plugin/commands/performance.js
index 9d9b39fce0984..a945319a5491b 100644
--- a/bin/plugin/commands/performance.js
+++ b/bin/plugin/commands/performance.js
@@ -20,6 +20,7 @@ const config = require( '../config' );
 
 const ARTIFACTS_PATH =
 	process.env.WP_ARTIFACTS_PATH || path.join( process.cwd(), 'artifacts' );
+const RAW_RESULTS_FILE_SUFFIX = '.performance-results.raw.json';
 const RESULTS_FILE_SUFFIX = '.performance-results.json';
 
 /**
@@ -56,24 +57,97 @@ function sanitizeBranchName( branch ) {
 }
 
 /**
- * Computes the median number from an array numbers.
- *
+ * @param {number} number
+ */
+function fixed( number ) {
+	return Math.round( number * 100 ) / 100;
+}
+
+/**
  * @param {number[]} array
- *
- * @return {number|undefined} Median value or undefined if array empty.
  */
-function median( array ) {
-	if ( ! array || ! array.length ) {
-		return undefined;
+function quartiles( array ) {
+	const numbers = array.slice().sort( ( a, b ) => a - b );
+
+	/**
+	 * @param {number} offset
+	 * @param {number} length
+	 */
+	function med( offset, length ) {
+		if ( length % 2 === 0 ) {
+			// even length, average of two middle numbers
+			return (
+				( numbers[ offset + length / 2 - 1 ] +
+					numbers[ offset + length / 2 ] ) /
+				2
+			);
+		}
+
+		// odd length, exact middle point
+		return numbers[ offset + ( length - 1 ) / 2 ];
 	}
 
-	const numbers = [ ...array ].sort( ( a, b ) => a - b );
-	const middleIndex = Math.floor( numbers.length / 2 );
+	const q50 = med( 0, numbers.length );
 
+	let q25, q75;
 	if ( numbers.length % 2 === 0 ) {
-		return ( numbers[ middleIndex - 1 ] + numbers[ middleIndex ] ) / 2;
+		// medians of two exact halves
+		const mid = numbers.length / 2;
+		q25 = med( 0, mid );
+		q75 = med( mid, mid );
+	} else {
+		// quartiles are average of medians of the smaller and bigger slice
+		const midl = ( numbers.length - 1 ) / 2;
+		const midh = ( numbers.length + 1 ) / 2;
+		q25 = ( med( 0, midl ) + med( 0, midh ) ) / 2;
+		q75 = ( med( midl, midh ) + med( midh, midl ) ) / 2;
 	}
-	return numbers[ middleIndex ];
+	return { q25, q50, q75 };
+}
+
+/**
+ * @param {number[]|undefined} values
+ */
+function stats( values ) {
+	if ( ! values || values.length === 0 ) {
+		return undefined;
+	}
+	const { q25, q50, q75 } = quartiles( values );
+	const cnt = values.length;
+	return {
+		q25: fixed( q25 ),
+		q50: fixed( q50 ),
+		q75: fixed( q75 ),
+		cnt,
+	};
+}
+
+/**
+ * Nicely formats a given value.
+ *
+ * @param {string} metric Metric.
+ * @param {number} value
+ */
+function formatValue( metric, value ) {
+	if ( 'wpMemoryUsage' === metric ) {
+		return `${ ( value / Math.pow( 10, 6 ) ).toFixed( 2 ) } MB`;
+	}
+
+	if ( 'wpDbQueries' === metric ) {
+		return value.toString();
+	}
+
+	return `${ value } ms`;
+}
+
+/**
+ * @param {string}                 m
+ * @param {Record<string, number>} s
+ */
+function printStats( m, s ) {
+	const pp = fixed( ( 100 * ( s.q75 - s.q50 ) ) / s.q50 );
+	const mp = fixed( ( 100 * ( s.q50 - s.q25 ) ) / s.q50 );
+	return `${ formatValue( m, s.q50 ) } +${ pp }% -${ mp }%`;
 }
 
 /**
@@ -96,6 +170,61 @@ async function runTestSuite( testSuite, testRunnerDir, runKey ) {
 	);
 }
 
+/**
+ * Formats an array of objects as a Markdown table.
+ *
+ * For example, this array:
+ *
+ * [
+ * 	{
+ * 	    foo: 123,
+ * 	    bar: 456,
+ * 	    baz: 'Yes',
+ * 	},
+ * 	{
+ * 	    foo: 777,
+ * 	    bar: 999,
+ * 	    baz: 'No',
+ * 	}
+ * ]
+ *
+ * Will result in the following table:
+ *
+ * | foo | bar | baz |
+ * |-----|-----|-----|
+ * | 123 | 456 | Yes |
+ * | 777 | 999 | No  |
+ *
+ * @param {Array<Object>} rows Table rows.
+ * @return {string} Markdown table content.
+ */
+function formatAsMarkdownTable( rows ) {
+	let result = '';
+
+	if ( ! rows.length ) {
+		return result;
+	}
+
+	const headers = Object.keys( rows[ 0 ] );
+	for ( const header of headers ) {
+		result += `| ${ header } `;
+	}
+	result += '|\n';
+	for ( let i = 0; i < headers.length; i++ ) {
+		result += '| ------ ';
+	}
+	result += '|\n';
+
+	for ( const row of rows ) {
+		for ( const value of Object.values( row ) ) {
+			result += `| ${ value } `;
+		}
+		result += '|\n';
+	}
+
+	return result;
+}
+
 /**
  * Runs the performances tests on an array of branches and output the result.
  *
@@ -364,9 +493,9 @@ async function runPerformanceTests( branches, options ) {
 	logAtIndent( 0, 'Calculating results' );
 
 	const resultFiles = getFilesFromDir( ARTIFACTS_PATH ).filter( ( file ) =>
-		file.endsWith( RESULTS_FILE_SUFFIX )
+		file.endsWith( RAW_RESULTS_FILE_SUFFIX )
 	);
-	/** @type {Record<string,Record<string, Record<string, number>>>} */
+	/** @type {Record<string,Record<string, Record<string, Record<string, number>>>>} */
 	const results = {};
 
 	// Calculate medians from all rounds.
@@ -387,20 +516,21 @@ async function runPerformanceTests( branches, options ) {
 					return readJSONFile( file );
 				} );
 
-			const metrics = Object.keys( resultsRounds[ 0 ] );
+			const metrics = Object.keys( resultsRounds[ 0 ] ?? {} );
 			results[ testSuite ][ branch ] = {};
 
 			for ( const metric of metrics ) {
-				const values = resultsRounds
-					.map( ( round ) => round[ metric ] )
-					.filter( ( value ) => typeof value === 'number' );
+				const values = resultsRounds.flatMap(
+					( round ) => round[ metric ] ?? []
+				);
 
-				const value = median( values );
+				const value = stats( values );
 				if ( value !== undefined ) {
 					results[ testSuite ][ branch ][ metric ] = value;
 				}
 			}
 		}
+
 		const calculatedResultsPath = path.join(
 			ARTIFACTS_PATH,
 			testSuite + RESULTS_FILE_SUFFIX
@@ -424,40 +554,82 @@ async function runPerformanceTests( branches, options ) {
 		)
 	);
 
+	let summaryMarkdown = `## Performance Test Results\n\n`;
+
+	summaryMarkdown += `Please note that client side metrics **exclude** the server response time.\n\n`;
+
 	for ( const testSuite of testSuites ) {
 		logAtIndent( 0, formats.success( testSuite ) );
 
 		// Invert the results so we can display them in a table.
-		/** @type {Record<string, Record<string, string>>} */
+		/** @type {Record<string, Record<string, Record<string, number>>>} */
 		const invertedResult = {};
 		for ( const [ branch, metrics ] of Object.entries(
 			results[ testSuite ]
 		) ) {
 			for ( const [ metric, value ] of Object.entries( metrics ) ) {
 				invertedResult[ metric ] = invertedResult[ metric ] || {};
-				invertedResult[ metric ][ branch ] = `${ value } ms`;
+				invertedResult[ metric ][ branch ] = value;
 			}
 		}
 
-		if ( branches.length === 2 ) {
-			const [ branch1, branch2 ] = branches;
-			for ( const metric in invertedResult ) {
-				const value1 = parseFloat(
-					invertedResult[ metric ][ branch1 ]
+		/** @type {Record<string, Record<string, string>>} */
+		const printedResult = {};
+		for ( const [ metric, branch ] of Object.entries( invertedResult ) ) {
+			printedResult[ metric ] = {};
+			for ( const [ branchName, data ] of Object.entries( branch ) ) {
+				printedResult[ metric ][ branchName ] = printStats(
+					metric,
+					data
 				);
-				const value2 = parseFloat(
-					invertedResult[ metric ][ branch2 ]
+			}
+
+			if ( branches.length === 2 ) {
+				const [ branch1, branch2 ] = branches;
+				const value1 = branch[ branch1 ].q50;
+				const value2 = branch[ branch2 ].q50;
+				const percentageChange = fixed(
+					( ( value1 - value2 ) / value2 ) * 100
 				);
-				const percentageChange = ( ( value1 - value2 ) / value2 ) * 100;
-				invertedResult[ metric ][
+				printedResult[ metric ][
 					'% Change'
-				] = `${ percentageChange.toFixed( 2 ) }%`;
+				] = `${ percentageChange }%`;
 			}
 		}
 
 		// Print the results.
-		console.table( invertedResult );
+		console.table( printedResult );
+
+		// Use yet another structure to generate a Markdown table.
+
+		const rows = [];
+
+		for ( const [ metric, resultBranches ] of Object.entries(
+			printedResult
+		) ) {
+			/**
+			 * @type {Record< string, string >}
+			 */
+			const row = {
+				Metric: metric,
+			};
+
+			for ( const [ branch, value ] of Object.entries(
+				resultBranches
+			) ) {
+				row[ branch ] = value;
+			}
+			rows.push( row );
+		}
+
+		summaryMarkdown += `**${ testSuite }**\n\n`;
+		summaryMarkdown += `${ formatAsMarkdownTable( rows ) }\n`;
 	}
+
+	fs.writeFileSync(
+		path.join( ARTIFACTS_PATH, 'summary.md' ),
+		summaryMarkdown
+	);
 }
 
 module.exports = {
diff --git a/bin/test-create-block.sh b/bin/test-create-block.sh
index 7959334a8e30e..99b7e8e608260 100755
--- a/bin/test-create-block.sh
+++ b/bin/test-create-block.sh
@@ -69,7 +69,7 @@ status "Building block..."
 ../node_modules/.bin/wp-scripts build
 
 status "Verifying build..."
-expected=7
+expected=9
 actual=$( find build -maxdepth 1 -type f | wc -l )
 if [ "$expected" -ne "$actual" ]; then
 	error "Expected $expected files in the \`build\` directory, but found $actual."
diff --git a/changelog.txt b/changelog.txt
index aee9a5c1a1575..006ca4a7c3e6b 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,8 +1,790 @@
 == Changelog ==
 
-= 18.3.0-rc.1 =
+= 18.5.0-rc.1 =
 
 
+## Changelog
+
+### Features
+
+#### Global Styles
+- Add defaultSpacingSizes option (theme.json v3). ([61842](https://github.com/WordPress/gutenberg/pull/61842))
+- Edit/create shadows in global styles. ([60706](https://github.com/WordPress/gutenberg/pull/60706))
+- Relocate Background Image controls to sit under Layout. ([61886](https://github.com/WordPress/gutenberg/pull/61886))
+
+#### Block Library
+- Enable shadow support for cover block. ([61883](https://github.com/WordPress/gutenberg/pull/61883))
+
+#### Block bindings
+- Allow editing in post meta source. ([61753](https://github.com/WordPress/gutenberg/pull/61753))
+
+#### Script Modules API
+- Add script module data implementation. ([61658](https://github.com/WordPress/gutenberg/pull/61658))
+
+#### Synced Patterns
+- Add `__default` binding for pattern overrides. ([60694](https://github.com/WordPress/gutenberg/pull/60694))
+
+#### Block Styles
+- Extend block style variations as mechanism for achieving section styling. ([57908](https://github.com/WordPress/gutenberg/pull/57908))
+
+
+### Enhancements
+
+- Block card: Fix typographic widow. ([61438](https://github.com/WordPress/gutenberg/pull/61438))
+- Block settings: Update variant of "Apply globally" Button component to secondary. ([61850](https://github.com/WordPress/gutenberg/pull/61850))
+- Editor: Align the Post Format control design with the rest of the post sidebar controls. ([62066](https://github.com/WordPress/gutenberg/pull/62066))
+- Editor: Polish the style of some of the post summary rows. ([61645](https://github.com/WordPress/gutenberg/pull/61645))
+- Format Library: Refactor 'Inline Image' edit component. ([62135](https://github.com/WordPress/gutenberg/pull/62135))
+- Playwright end-to-end Utils: Add fullscreenMode option to createNewPost. ([61766](https://github.com/WordPress/gutenberg/pull/61766))
+- Post Sticky Toggle: Improve the design. ([62012](https://github.com/WordPress/gutenberg/pull/62012))
+- Post Summary: Move PostTemplatePanel below URL and Author. ([62137](https://github.com/WordPress/gutenberg/pull/62137))
+- Remove trash button in post/page inspector. ([61792](https://github.com/WordPress/gutenberg/pull/61792))
+- Shadows instead of borders on interface skeleton. ([61835](https://github.com/WordPress/gutenberg/pull/61835))
+- Tweak contextual block toolbar position. ([61836](https://github.com/WordPress/gutenberg/pull/61836))
+- Update: For synced entities the icon should be purple. ([62024](https://github.com/WordPress/gutenberg/pull/62024))
+- Update: Implement new author panel design. ([61362](https://github.com/WordPress/gutenberg/pull/61362))
+- Update: Implement new parent and order design. ([61918](https://github.com/WordPress/gutenberg/pull/61918))
+- Update: Move duplicate pattern and template part actions to the editor package. ([61879](https://github.com/WordPress/gutenberg/pull/61879))
+
+#### Site Editor
+- Block Editor: Check for multiple block usage in the block-editor package. ([62086](https://github.com/WordPress/gutenberg/pull/62086))
+- Copy custom CSS between variations when switching. ([61752](https://github.com/WordPress/gutenberg/pull/61752))
+- Data views: Align page headers. ([62115](https://github.com/WordPress/gutenberg/pull/62115))
+- Inspector summary rows: Make tooltips appear middle-left. ([61815](https://github.com/WordPress/gutenberg/pull/61815))
+- Inspector: Add '/' prefix to Link button. ([62073](https://github.com/WordPress/gutenberg/pull/62073))
+- Inspector: Display home / posts page badge. ([62071](https://github.com/WordPress/gutenberg/pull/62071))
+- Inspector: Remove revisions panel. ([61867](https://github.com/WordPress/gutenberg/pull/61867))
+- Make post meta row button treatment consistent. ([61954](https://github.com/WordPress/gutenberg/pull/61954))
+- Remove 'Manage...' prefix in Pages / Templates data views. ([62107](https://github.com/WordPress/gutenberg/pull/62107))
+- Remove the details pages. ([61741](https://github.com/WordPress/gutenberg/pull/61741))
+- Update actions order in site editor for template and template parts. ([61803](https://github.com/WordPress/gutenberg/pull/61803))
+- Use site title as a link. ([61258](https://github.com/WordPress/gutenberg/pull/61258))
+- [Site Editor]: Add create pattern button in patterns page. ([60302](https://github.com/WordPress/gutenberg/pull/60302))
+- withRegistryProvider: Prevent intermediate state with no children. ([61859](https://github.com/WordPress/gutenberg/pull/61859))
+
+#### Data Views
+- Add badge to title for posts & front pages. ([61718](https://github.com/WordPress/gutenberg/pull/61718))
+- Clarify `date` value in Pages. ([61709](https://github.com/WordPress/gutenberg/pull/61709))
+- DataViews: `label` prop in Actions API can be either a `string` or a `function`. ([61942](https://github.com/WordPress/gutenberg/pull/61942))
+- Fix pagination position on pages with short lists. ([61712](https://github.com/WordPress/gutenberg/pull/61712))
+- Pages data view: Add Pending and Private views. ([62138](https://github.com/WordPress/gutenberg/pull/62138))
+- Pages sidebar: Adds published & scheduled items. ([62021](https://github.com/WordPress/gutenberg/pull/62021))
+- Stop Patterns data view header shrinking. ([61801](https://github.com/WordPress/gutenberg/pull/61801))
+- Update grid layout on small screens. ([61820](https://github.com/WordPress/gutenberg/pull/61820))
+- Update list layout action styling. ([61797](https://github.com/WordPress/gutenberg/pull/61797))
+- Update page component (and some data view elements) spacing metrics. ([61333](https://github.com/WordPress/gutenberg/pull/61333))
+- Visually hide 'Actions' column header. ([61710](https://github.com/WordPress/gutenberg/pull/61710))
+
+#### Global Styles
+- Add block-level Text Alignment UI. ([61717](https://github.com/WordPress/gutenberg/pull/61717))
+- Add option to remove site-wide theme background image. ([61998](https://github.com/WordPress/gutenberg/pull/61998))
+- Background image: Add support for relative theme path URLs in top-level theme.json styles. ([61271](https://github.com/WordPress/gutenberg/pull/61271))
+- Background image: Update controls defaults and layout. ([62000](https://github.com/WordPress/gutenberg/pull/62000))
+- Background images: Add defaults for background size. ([62046](https://github.com/WordPress/gutenberg/pull/62046))
+- Don't filter out typography variations where the heading and body fonts are the same. ([61327](https://github.com/WordPress/gutenberg/pull/61327))
+- Make color variations fit in a bit better visually. ([61617](https://github.com/WordPress/gutenberg/pull/61617))
+- Make it clearer how to edit a site's palette. ([61364](https://github.com/WordPress/gutenberg/pull/61364))
+- Move type presets below elements. ([61863](https://github.com/WordPress/gutenberg/pull/61863))
+- Restore the default variation to the color and typography style tiles. ([61901](https://github.com/WordPress/gutenberg/pull/61901))
+- Show shadow tool by default under global styles. ([61981](https://github.com/WordPress/gutenberg/pull/61981))
+
+#### Components
+- Add vw and vh units to the custom font size picker. ([60607](https://github.com/WordPress/gutenberg/pull/60607))
+- CustomSelectControlV2: Use `InputBase` for styling. ([60261](https://github.com/WordPress/gutenberg/pull/60261))
+- Tabs: Indicator animation. ([60560](https://github.com/WordPress/gutenberg/pull/60560))
+- Try: Add CSS Custom Properties to CSS types. ([61872](https://github.com/WordPress/gutenberg/pull/61872))
+
+#### Zoom Out
+- Hide inserters behind the experiment flag. ([61866](https://github.com/WordPress/gutenberg/pull/61866))
+- Inserter: Auto-close the inserter unless  the zoom out experiment is on. ([61856](https://github.com/WordPress/gutenberg/pull/61856))
+- Show the inserters only when a section is selected. ([61559](https://github.com/WordPress/gutenberg/pull/61559))
+- The patterns tab behind a new experiment. ([61601](https://github.com/WordPress/gutenberg/pull/61601))
+
+#### Block Editor
+- Adjust pattern list items resting, hover, focus styles. ([61831](https://github.com/WordPress/gutenberg/pull/61831))
+- Tweak pattern categories sidebar. ([62113](https://github.com/WordPress/gutenberg/pull/62113))
+- Writing flow: Remove first empty paragraph on Backspace. ([61889](https://github.com/WordPress/gutenberg/pull/61889))
+
+#### Block bindings
+- Add Block Bindings Panel to Block Inspector. ([61527](https://github.com/WordPress/gutenberg/pull/61527))
+- Add indicator for metadata changes to Save Panel when reviewing modified entities. ([61811](https://github.com/WordPress/gutenberg/pull/61811))
+- Lock binding editing with functions. ([61734](https://github.com/WordPress/gutenberg/pull/61734))
+
+#### Block Variations
+- Have `getActiveBlockVariation` return variation with highest specificity. ([62031](https://github.com/WordPress/gutenberg/pull/62031))
+- Support dot notation in `isActive` string array. ([62088](https://github.com/WordPress/gutenberg/pull/62088))
+
+#### Layout
+- More consistent root padding. ([60715](https://github.com/WordPress/gutenberg/pull/60715))
+- Try using coloured overlay instead of border for grid visualiser. ([61390](https://github.com/WordPress/gutenberg/pull/61390))
+
+#### Block Library
+- Added Bluesky icon to the Social Icon Block. ([61372](https://github.com/WordPress/gutenberg/pull/61372))
+- Media & Text: Replace the deprecated __experimentalImageSizeControl with ResolutionTool. ([57540](https://github.com/WordPress/gutenberg/pull/57540))
+
+#### Inspector Controls
+- Align both "Design" pattern list panels. ([62161](https://github.com/WordPress/gutenberg/pull/62161))
+
+#### Post Editor
+- Add home template details to inspector controls. ([61762](https://github.com/WordPress/gutenberg/pull/61762))
+
+#### Interactivity API
+- Clarify some warning messages. ([61720](https://github.com/WordPress/gutenberg/pull/61720))
+
+#### Patterns
+- Adjust the icons and text of the binding connected blocks. ([61560](https://github.com/WordPress/gutenberg/pull/61560))
+
+
+### Bug Fixes
+
+- Compose: Fix 'useFocusOnMount' cleanup callback. ([62053](https://github.com/WordPress/gutenberg/pull/62053))
+- Do not auto save post status changes. ([62171](https://github.com/WordPress/gutenberg/pull/62171))
+- Editor: Fix canvas padding in post editor. ([61893](https://github.com/WordPress/gutenberg/pull/61893))
+- EntityProvider: Avoid remounts and simplify. ([61882](https://github.com/WordPress/gutenberg/pull/61882))
+- Fix shadow and border for pattern categories panel. ([62158](https://github.com/WordPress/gutenberg/pull/62158))
+- Image Block: Conditionally Render Block Control Based on Component Presence. ([62132](https://github.com/WordPress/gutenberg/pull/62132))
+- Interactivity API: Fix null and number strings as namespaces runtime error. ([61960](https://github.com/WordPress/gutenberg/pull/61960))
+- PostCardPanel: Fix ESLint error. ([62109](https://github.com/WordPress/gutenberg/pull/62109))
+- Remove build-types/ clean from clean:Packages. ([62008](https://github.com/WordPress/gutenberg/pull/62008))
+- Script Modules: Fix private method reflection access. ([62154](https://github.com/WordPress/gutenberg/pull/62154))
+- ServerSideRender: Fix data loading in development mode. ([62140](https://github.com/WordPress/gutenberg/pull/62140))
+- Shadow Panel: Make subtitle translatable. ([62022](https://github.com/WordPress/gutenberg/pull/62022))
+- Site Editor: Fix the Root Padding styles. ([61906](https://github.com/WordPress/gutenberg/pull/61906))
+- Writing flow: Fix heading crash on split (via paste). ([61900](https://github.com/WordPress/gutenberg/pull/61900))
+- e2e: Fix Site Editor Styles test. ([62111](https://github.com/WordPress/gutenberg/pull/62111))
+
+#### Post Editor
+- Consolidate and fix `delete` and `edit` post actions. ([61912](https://github.com/WordPress/gutenberg/pull/61912))
+- Consolidate and fix `rename` post action. ([61857](https://github.com/WordPress/gutenberg/pull/61857))
+- Document Bar: Decode HTML entities and take into account cases where there is no title. ([62087](https://github.com/WordPress/gutenberg/pull/62087))
+- Editor: Don't apply purple accent to the unsynced pattern title. ([61704](https://github.com/WordPress/gutenberg/pull/61704))
+- Editor: Ensure Copy button in sidebar copies whole permalink, *with* URL protocol. ([61876](https://github.com/WordPress/gutenberg/pull/61876))
+- Editor: Fix the 'DocumentBar' position for long titles. ([61691](https://github.com/WordPress/gutenberg/pull/61691))
+- Editor: Render publish date control when the status is `future`(scheduled). ([62070](https://github.com/WordPress/gutenberg/pull/62070))
+- Editor: Unify button size in pre-publish panel. ([62123](https://github.com/WordPress/gutenberg/pull/62123))
+- Editor: Use edited entity for post actions. ([61892](https://github.com/WordPress/gutenberg/pull/61892))
+- Fix read only post status styles. ([61722](https://github.com/WordPress/gutenberg/pull/61722))
+- Post Actions: Hide the trash action for auto-drafts. ([61865](https://github.com/WordPress/gutenberg/pull/61865))
+
+#### Block Editor
+- Fix being unable to switch modes while inserter is open. ([61563](https://github.com/WordPress/gutenberg/pull/61563))
+- Fix editor inserter tabs indicator. ([61973](https://github.com/WordPress/gutenberg/pull/61973))
+- Fix positioning of close icons in panels to be consistent. ([61832](https://github.com/WordPress/gutenberg/pull/61832))
+- Fix syncing of publish date between publish and post status panel. ([62165](https://github.com/WordPress/gutenberg/pull/62165))
+- Improve link conrol preview when show button text label is enabled. ([61726](https://github.com/WordPress/gutenberg/pull/61726))
+- Inserter: Show all blocks (alternative). ([62169](https://github.com/WordPress/gutenberg/pull/62169))
+- InspectorControls: Text not displayed when "Show button text labels" is enabled. ([61949](https://github.com/WordPress/gutenberg/pull/61949))
+- Link Control: Fix focus handlers in development mode. ([62141](https://github.com/WordPress/gutenberg/pull/62141))
+- Media & Text block: Remove the link option when the featured image is used. ([60510](https://github.com/WordPress/gutenberg/pull/60510))
+- Writing flow: Fix paste for input fields. ([61389](https://github.com/WordPress/gutenberg/pull/61389))
+
+#### Block Library
+- Classic block: Fix content syncing effect for React StrictMode. ([62051](https://github.com/WordPress/gutenberg/pull/62051))
+- Don't steal focus when opening browse all blocks. ([61975](https://github.com/WordPress/gutenberg/pull/61975))
+- Fix: The latest post block - post titles overlapping. ([61356](https://github.com/WordPress/gutenberg/pull/61356))
+- Fixed : Update `alt text decision tree` links to be translatable. ([62076](https://github.com/WordPress/gutenberg/pull/62076))
+- Fixed: Custom HTML Block should display content in LTR layout for all languages. ([62083](https://github.com/WordPress/gutenberg/pull/62083))
+- More block: Fix React warning when adding custom text. ([61936](https://github.com/WordPress/gutenberg/pull/61936))
+- useUploadMediaFromBlobURL: Prevent duplicate uploads in StrictMode. ([62059](https://github.com/WordPress/gutenberg/pull/62059))
+
+#### Global Styles
+- Fix make dimensions.aspectRatios key of theme.json files translatable. ([61774](https://github.com/WordPress/gutenberg/pull/61774))
+- Hide the presets panel for when there are less or exactly one presets available. ([62074](https://github.com/WordPress/gutenberg/pull/62074))
+- Prevent Typography panel title from wrapping. ([62124](https://github.com/WordPress/gutenberg/pull/62124))
+- Shadow Panel: Generates unique shadow slugs by finding max suffix and incrementing it. ([61997](https://github.com/WordPress/gutenberg/pull/61997))
+- Styles: try wrapping with :Root to fix reset styles. ([61638](https://github.com/WordPress/gutenberg/pull/61638))
+- Transform Styles: Update selector so that styles work when custom fields panel is active. ([62121](https://github.com/WordPress/gutenberg/pull/62121))
+
+#### Site Editor
+- Align the template title to the center in the 'Add template' screen. ([62175](https://github.com/WordPress/gutenberg/pull/62175))
+- Close publish sidebar if not in `edit` mode. ([61707](https://github.com/WordPress/gutenberg/pull/61707))
+- Fix the site editor Admin Bar menu item. ([61851](https://github.com/WordPress/gutenberg/pull/61851))
+- Use a consistent snackbar position. ([61756](https://github.com/WordPress/gutenberg/pull/61756))
+
+#### Components
+- Fix: The focus styles for tabPanel. ([61317](https://github.com/WordPress/gutenberg/pull/61317))
+- InputControl: Fix z-index issue causing slider dots to appear in front of the Appearance dropdown. ([61937](https://github.com/WordPress/gutenberg/pull/61937))
+- getAutocompleterUI: Don't redefine ListBox component on every render. ([61877](https://github.com/WordPress/gutenberg/pull/61877))
+
+#### Synced Patterns
+- Block Bindings: Filter pattern overrides source in bindings panel. ([62015](https://github.com/WordPress/gutenberg/pull/62015))
+- Fix detaching patterns when a pattern has overrides, but there are no override values. ([62014](https://github.com/WordPress/gutenberg/pull/62014))
+
+#### Block bindings
+- Don't show non-existing and not supported attributes in block bindings panel. ([62183](https://github.com/WordPress/gutenberg/pull/62183))
+
+#### Layout
+- Remove extra bracket in the site editor root padding styles. ([62159](https://github.com/WordPress/gutenberg/pull/62159))
+
+#### Block Styles
+- Fix block style variation styles for blocks with complex selectors. ([62125](https://github.com/WordPress/gutenberg/pull/62125))
+
+#### Code Editor
+- Editor: Unify text/code editor between post and site editors. ([61934](https://github.com/WordPress/gutenberg/pull/61934))
+
+#### Page Content Focus
+- Remove lock icons from Content blocks inner blocks when editing a page in the site editor. ([61922](https://github.com/WordPress/gutenberg/pull/61922))
+
+#### Patterns
+- Templates: Only resolve patterns for REST API endpoints. ([61757](https://github.com/WordPress/gutenberg/pull/61757))
+
+#### Interactivity API
+- Turn named capturing groups back into numbered ones inside `toVdom`. ([61728](https://github.com/WordPress/gutenberg/pull/61728))
+
+#### Block API
+- Fix: Enable Text Align UI to be controlled correctly with theme.json. ([61182](https://github.com/WordPress/gutenberg/pull/61182))
+
+#### REST API
+- Return an empty object when no fallback templates are found (wp/v2/templates/lookup). ([60925](https://github.com/WordPress/gutenberg/pull/60925))
+
+
+### Accessibility
+
+#### Global Styles
+- Shadow Panel: Improve a11y and fix browser console error. ([61980](https://github.com/WordPress/gutenberg/pull/61980))
+
+#### Data Views
+- Always show Actions table header. ([61847](https://github.com/WordPress/gutenberg/pull/61847))
+
+#### Block Library
+- Fix: Adds help props for description of Play Inline toggle. ([61310](https://github.com/WordPress/gutenberg/pull/61310))
+
+
+### Performance
+
+- Perf: Batch block list settings in single action. ([61329](https://github.com/WordPress/gutenberg/pull/61329))
+- Remove additional call to `WP_Theme_JSON_Gutenberg::__construct`. ([61262](https://github.com/WordPress/gutenberg/pull/61262))
+
+#### Interactivity API
+- Introduce `wp-on-async` directive as performant alternative over synchronous `wp-on` directive. ([61885](https://github.com/WordPress/gutenberg/pull/61885))
+
+#### Post Editor
+- DocumentBar: Only selected data needed for rendering. ([61706](https://github.com/WordPress/gutenberg/pull/61706))
+
+
+### Experiments
+
+#### Interactivity API
+- Use output buffer and HTML tag processor to inject directives on BODY tag for full-page client-side navigation. ([61212](https://github.com/WordPress/gutenberg/pull/61212))
+
+
+### Documentation
+
+- Add JSDoc to PostVisibility, PostVisibilityCheck, and PostVisibilityLabel. ([61735](https://github.com/WordPress/gutenberg/pull/61735))
+- Add PostURL component documentation. ([61737](https://github.com/WordPress/gutenberg/pull/61737))
+- Add a section about block filters to the Filters and Hooks doc. ([61771](https://github.com/WordPress/gutenberg/pull/61771))
+- Add an example and improve readability of the Block Filters doc. ([61770](https://github.com/WordPress/gutenberg/pull/61770))
+- Add docblock to PostTitle and PostTitleRaw component. ([61740](https://github.com/WordPress/gutenberg/pull/61740))
+- Add documentation for DocumentBar. ([61733](https://github.com/WordPress/gutenberg/pull/61733))
+- Add documentation for PostFeaturedImage, PostFeaturedImageCheck, PostFeaturedImagePanel. ([61165](https://github.com/WordPress/gutenberg/pull/61165))
+- Add documentation for PostLastRevision, PostLastRevisionCheck, PostLastRevisionPanel components. ([61166](https://github.com/WordPress/gutenberg/pull/61166))
+- Add documentation for PostSchedule, PostScheduleCheck, PostSchedulePanel, PostScheduleLabel, usePostScheduleLabel components. ([61345](https://github.com/WordPress/gutenberg/pull/61345))
+- Add documentation for the EditorNotices component. ([61736](https://github.com/WordPress/gutenberg/pull/61736))
+- Add documentation for the EditorProvider and ExperimentalEditorProvider components. ([61739](https://github.com/WordPress/gutenberg/pull/61739))
+- Added missing @global documentation. ([61537](https://github.com/WordPress/gutenberg/pull/61537))
+- Changelog: Add note about removing legacy operators. ([62013](https://github.com/WordPress/gutenberg/pull/62013))
+- Docs: Fix spacing in PHP doc block in comments block. ([61911](https://github.com/WordPress/gutenberg/pull/61911))
+- EditorBoundary editor component. ([61950](https://github.com/WordPress/gutenberg/pull/61950))
+- Fix typo. ([61830](https://github.com/WordPress/gutenberg/pull/61830))
+- Fix: Block library README.md link. ([62081](https://github.com/WordPress/gutenberg/pull/62081))
+- Fix: Custom block editor link. ([61962](https://github.com/WordPress/gutenberg/pull/61962))
+- For `PostTextEditor` component. ([62099](https://github.com/WordPress/gutenberg/pull/62099))
+- LocalAutosaveMonitor editor component. ([61951](https://github.com/WordPress/gutenberg/pull/61951))
+- PageTemplate + PostTemplatePanel editor components. ([61961](https://github.com/WordPress/gutenberg/pull/61961))
+- PostComments editor component. ([61964](https://github.com/WordPress/gutenberg/pull/61964))
+- PostDiscussionPanel editor component. ([61966](https://github.com/WordPress/gutenberg/pull/61966))
+- PostExcerptPanel editor component. ([61967](https://github.com/WordPress/gutenberg/pull/61967))
+- PostLockedModal editor component. ([61968](https://github.com/WordPress/gutenberg/pull/61968))
+- PostPendingStatus + PostPendingStatusCheck editor components. ([61970](https://github.com/WordPress/gutenberg/pull/61970))
+- PostPingbacks editor component. ([62035](https://github.com/WordPress/gutenberg/pull/62035))
+- PostPreviewButton editor component. ([62036](https://github.com/WordPress/gutenberg/pull/62036))
+- Storybook: Add badges based on `tags`. ([61111](https://github.com/WordPress/gutenberg/pull/61111))
+- Update PostFormat, PostFormatCheck editor component documentation. ([61732](https://github.com/WordPress/gutenberg/pull/61732))
+- Update block.json file with correct links. ([61880](https://github.com/WordPress/gutenberg/pull/61880))
+- Update link to architecture key concepts. ([61965](https://github.com/WordPress/gutenberg/pull/61965))
+- Update links to correct lodash website. ([62188](https://github.com/WordPress/gutenberg/pull/62188))
+- Update plugin-document-setting-panel.md. ([61782](https://github.com/WordPress/gutenberg/pull/61782))
+- Update tutorial.md. ([62054](https://github.com/WordPress/gutenberg/pull/62054))
+
+
+### Code Quality
+
+- Add curly brace autofix commit to `.git-blame-ignore-revs`. ([62144](https://github.com/WordPress/gutenberg/pull/62144))
+- Add eslint rule for curly brace presence in JSX. ([62026](https://github.com/WordPress/gutenberg/pull/62026))
+- Blocks: Remove pipe usage and dependency on compose. ([62127](https://github.com/WordPress/gutenberg/pull/62127))
+- Clean up packages build-types when cleaning types. ([61939](https://github.com/WordPress/gutenberg/pull/61939))
+- Command Palette: Remove unused URL parameter. ([61783](https://github.com/WordPress/gutenberg/pull/61783))
+- Commands: Unify the editor context between post and site editors. ([61862](https://github.com/WordPress/gutenberg/pull/61862))
+- Dataviews: Remove unused dependencies. ([62010](https://github.com/WordPress/gutenberg/pull/62010))
+- Distraction Free: Unify the header animation. ([62167](https://github.com/WordPress/gutenberg/pull/62167))
+- Editor: Move editor toggle commands to the editor package. ([62093](https://github.com/WordPress/gutenberg/pull/62093))
+- Editor: Move the InterfaceSkeleton to the editor package. ([62118](https://github.com/WordPress/gutenberg/pull/62118))
+- Editor: Move the resizing of the editor to the EditorCanvas component. ([61896](https://github.com/WordPress/gutenberg/pull/61896))
+- Editor: Remove extra div container and unify the container between post and site editors. ([62016](https://github.com/WordPress/gutenberg/pull/62016))
+- Editor: Remove obsolete `listViewLabel` prop from DocumentTools. ([62032](https://github.com/WordPress/gutenberg/pull/62032))
+- Editor: Remove useless props from InserterSidebar component. ([62103](https://github.com/WordPress/gutenberg/pull/62103))
+- Editor: Unify the MediaUpload hook between post and site editors. ([62085](https://github.com/WordPress/gutenberg/pull/62085))
+- Editor: Unify the content area of the post and site editors. ([61860](https://github.com/WordPress/gutenberg/pull/61860))
+- Fix: React compiler error on button. ([61958](https://github.com/WordPress/gutenberg/pull/61958))
+- Fix: Remove unused css block on patterns page. ([62058](https://github.com/WordPress/gutenberg/pull/62058))
+- Fix: Remove unused css code from the navigation screen. ([62060](https://github.com/WordPress/gutenberg/pull/62060))
+- Fix: Some jsdoc return types on edit site selector. ([62061](https://github.com/WordPress/gutenberg/pull/62061))
+- Improve distclean script. ([62019](https://github.com/WordPress/gutenberg/pull/62019))
+- Interactivity API: Move all utils inside `utils.ts`. ([61721](https://github.com/WordPress/gutenberg/pull/61721))
+- Interactivity API: Move init.js to TypeScript. ([61723](https://github.com/WordPress/gutenberg/pull/61723))
+- Make onPatternCategorySelection private. ([62130](https://github.com/WordPress/gutenberg/pull/62130))
+- Remove useless clsx calls. ([61969](https://github.com/WordPress/gutenberg/pull/61969))
+- Rename backport-changelog/6279.md to backport-changelog/6.6/6279.md. ([61894](https://github.com/WordPress/gutenberg/pull/61894))
+- Update: Remove unused components. ([61955](https://github.com/WordPress/gutenberg/pull/61955))
+- end-to-end Tests: Fix React warnings triggered by test plugins. ([61935](https://github.com/WordPress/gutenberg/pull/61935))
+
+#### Components
+- CustomSelectControl: Fix `menuProps` mutation. ([62149](https://github.com/WordPress/gutenberg/pull/62149))
+- Fix remaining warning in ColorPanelDropdown. ([61933](https://github.com/WordPress/gutenberg/pull/61933))
+- Make the `ProgressBar` public. ([61062](https://github.com/WordPress/gutenberg/pull/61062))
+- Remove reduceMotion utility. ([61963](https://github.com/WordPress/gutenberg/pull/61963))
+- SlotFills: Use state for registry initialization. ([61802](https://github.com/WordPress/gutenberg/pull/61802))
+- Style Book: Use state to initialize examples. ([61848](https://github.com/WordPress/gutenberg/pull/61848))
+- Tooltip: Fix Ariakit tooltip store usage. ([61858](https://github.com/WordPress/gutenberg/pull/61858))
+- `ProgressBar`: Simplify default `width` implementation and make it more easily overridable. ([61976](https://github.com/WordPress/gutenberg/pull/61976))
+
+#### Block Editor
+- Fix `ZoomOutModeInserters` dependencies. ([61908](https://github.com/WordPress/gutenberg/pull/61908))
+- Fix wrapper props mutation in BlockListBlock. ([61789](https://github.com/WordPress/gutenberg/pull/61789))
+- Remove some utility functions. ([61784](https://github.com/WordPress/gutenberg/pull/61784))
+- Shadows: Unlock private components and hooks at the file level. ([61790](https://github.com/WordPress/gutenberg/pull/61790))
+- Unlock private setting keys at the file level. ([61813](https://github.com/WordPress/gutenberg/pull/61813))
+- Unlock the private 'kebabCase' function at a file level. ([60755](https://github.com/WordPress/gutenberg/pull/60755))
+- useBlockInspectorAnimationSettings: Remove unnecessary deps. ([61822](https://github.com/WordPress/gutenberg/pull/61822))
+
+#### Data Views
+- DataViews: Full type the dataviews package. ([61854](https://github.com/WordPress/gutenberg/pull/61854))
+- DataViews: Remove non-used file. ([61853](https://github.com/WordPress/gutenberg/pull/61853))
+- DataViews: Remove unnecessary dependency for pattern fields memo. ([61870](https://github.com/WordPress/gutenberg/pull/61870))
+- DataViews: Type all the filters components. ([61795](https://github.com/WordPress/gutenberg/pull/61795))
+- DataViews: Type the BulkActionsToolbar component. ([61673](https://github.com/WordPress/gutenberg/pull/61673))
+- DataViews: Type the ViewActions component. ([61729](https://github.com/WordPress/gutenberg/pull/61729))
+- DataViews: Type the ViewTable component. ([61682](https://github.com/WordPress/gutenberg/pull/61682))
+
+#### Block Library
+- Added unit test for post excerpt block render function. ([43451](https://github.com/WordPress/gutenberg/pull/43451))
+- Avoid using component naming conventions for non-component code. ([61793](https://github.com/WordPress/gutenberg/pull/61793))
+- Button: Fix ESLint warning. ([62126](https://github.com/WordPress/gutenberg/pull/62126))
+- Remove CSS hack for Internet Explorer 11. ([62043](https://github.com/WordPress/gutenberg/pull/62043))
+- Remove useless styles. ([62017](https://github.com/WordPress/gutenberg/pull/62017))
+- Search Block: Fix `borderRadius` mutation. ([61794](https://github.com/WordPress/gutenberg/pull/61794))
+
+#### Site Editor
+- History: Add getLocationWithParams method. ([61823](https://github.com/WordPress/gutenberg/pull/61823))
+- Navigation Focus Mode: Remove leftover code. ([61897](https://github.com/WordPress/gutenberg/pull/61897))
+- Remove useless onClick handler. ([61902](https://github.com/WordPress/gutenberg/pull/61902))
+- Update to use the EditorInterface component from the editor package. ([62146](https://github.com/WordPress/gutenberg/pull/62146))
+
+#### Block hooks
+- Navigation block: Check for insert_hooked_blocks_into_rest_response i…. ([62134](https://github.com/WordPress/gutenberg/pull/62134))
+- Navigation block: Check for update_ignored_hooked_blocks_postmeta in core. ([61903](https://github.com/WordPress/gutenberg/pull/61903))
+
+#### Font Library
+- Font Library Modal: Remove some contexts. ([62042](https://github.com/WordPress/gutenberg/pull/62042))
+
+#### Post Editor
+- Template Actions: Fix console error when resetting template. ([61921](https://github.com/WordPress/gutenberg/pull/61921))
+
+#### Global Styles
+- Components: Fix React Warning triggers by the new JSX transform. ([61917](https://github.com/WordPress/gutenberg/pull/61917))
+
+#### Interactivity API
+- Interactivity API : Refactor interactivity-router to TS. ([61730](https://github.com/WordPress/gutenberg/pull/61730))
+
+#### CSS & Styling
+- Fix editor view mode canvas shadow. ([61688](https://github.com/WordPress/gutenberg/pull/61688))
+
+
+### Tools
+
+- Build: Use globalThis over process.env and enable TS lib checking. ([61486](https://github.com/WordPress/gutenberg/pull/61486))
+
+#### Testing
+- E2E: Fix canvas waiter in visitSiteEditor. ([61816](https://github.com/WordPress/gutenberg/pull/61816))
+- PaletteEdit: Fix another flaky test. ([61818](https://github.com/WordPress/gutenberg/pull/61818))
+- PaletteEdit: Fix flaky test. ([61791](https://github.com/WordPress/gutenberg/pull/61791))
+- Shadow: Add unit tests for shadow support. ([60063](https://github.com/WordPress/gutenberg/pull/60063))
+- Skip flaky 'Zoom out' end-to-end test. ([61925](https://github.com/WordPress/gutenberg/pull/61925))
+- Synced Pattern: Wait for pattern creation in end-to-end tests. ([62174](https://github.com/WordPress/gutenberg/pull/62174))
+- Tests: Change how directives processing gets disabled. ([62095](https://github.com/WordPress/gutenberg/pull/62095))
+- Workflows: Try a backport changelog. ([61785](https://github.com/WordPress/gutenberg/pull/61785))
+
+#### Build Tooling
+- Add 60 minute timeout to performance job. ([61957](https://github.com/WordPress/gutenberg/pull/61957))
+- Enable parallel processing for PHPCS sniffs. ([61700](https://github.com/WordPress/gutenberg/pull/61700))
+- Fix an issue causing wp-scripts commands to fail if the file path contained a space character. ([61748](https://github.com/WordPress/gutenberg/pull/61748))
+- React: Upgrade to the new JSX transform. ([61692](https://github.com/WordPress/gutenberg/pull/61692))
+- Workflows: Test to check for label and skip backport changelog. ([61808](https://github.com/WordPress/gutenberg/pull/61808))
+
+
+### Various
+
+- Inserter: Encapsulate styles for tablist and close button. ([61760](https://github.com/WordPress/gutenberg/pull/61760))
+- Update 'Add template' screen to prefer template_name label instead of singular_name. ([60367](https://github.com/WordPress/gutenberg/pull/60367))
+- Update: Move pattern actions to the editor package. [take 2]. ([61612](https://github.com/WordPress/gutenberg/pull/61612))
+
+#### Global Styles
+- Update copy for color variations from "Presets" to "Palettes". ([62147](https://github.com/WordPress/gutenberg/pull/62147))
+
+#### Synced Patterns
+- Remove `IS_GUTENBERG_PLUGIN` check to ensure pattern overrides ship in 6.6. ([62011](https://github.com/WordPress/gutenberg/pull/62011))
+
+#### npm Packages
+- Packages: Increase the minimum required Node.js version to v18.12.0. ([61930](https://github.com/WordPress/gutenberg/pull/61930))
+
+#### Layout
+- Update child layout selector to match core. ([61777](https://github.com/WordPress/gutenberg/pull/61777))
+
+#### Components
+- Introduce Combobox `expandOnFocus` property. ([61705](https://github.com/WordPress/gutenberg/pull/61705))
+
+
+## First time contributors
+
+The following PRs were merged by first time contributors:
+
+- @akashdhawade2005: Fix: Block library README.md link. ([62081](https://github.com/WordPress/gutenberg/pull/62081))
+- @amitraj2203: Added Bluesky icon to the Social Icon Block. ([61372](https://github.com/WordPress/gutenberg/pull/61372))
+- @dbrian: Add JSDoc to PostVisibility, PostVisibilityCheck, and PostVisibilityLabel. ([61735](https://github.com/WordPress/gutenberg/pull/61735))
+- @gemkev: Update tutorial.md. ([62054](https://github.com/WordPress/gutenberg/pull/62054))
+- @kellenmace: Fix an issue causing wp-scripts commands to fail if the file path contained a space character. ([61748](https://github.com/WordPress/gutenberg/pull/61748))
+- @narenin: Fixed: Custom HTML Block should display content in LTR layout for all languages. ([62083](https://github.com/WordPress/gutenberg/pull/62083))
+- @nateinaction: Add documentation for the EditorProvider and ExperimentalEditorProvider components. ([61739](https://github.com/WordPress/gutenberg/pull/61739))
+- @paolopiaggio: Playwright end-to-end Utils: Add fullscreenMode option to createNewPost. ([61766](https://github.com/WordPress/gutenberg/pull/61766))
+- @sanjucta: Add docblock to PostTitle and PostTitleRaw component. ([61740](https://github.com/WordPress/gutenberg/pull/61740))
+- @vipul0425: Fix: The latest post block - post titles overlapping. ([61356](https://github.com/WordPress/gutenberg/pull/61356))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @abhi3315 @afercia @ajlende @akashdhawade2005 @akasunil @Aljullu @amitraj2203 @andrewserong @anton-vlasenko @anver @artemiomorales @carolinan @cbravobernal @colorful-tones @creativecoder @DaniGuardiola @DAreRodz @dbrian @draganescu @ellatrix @fabiankaegy @fullofcaffeine @gemkev @geriux @glendaviesnz @gziolo @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @kellenmace @kevin940726 @kt-12 @madhusudhand @Mamaduka @mattsherman @mcsf @michalczaplinski @mirka @narenin @nateinaction @ndiego @ntsekouras @oandregal @ockham @paolopiaggio @ramonjd @retrofox @richtabor @sanjucta @SantosGuillamot @scruffian @senadir @shail-mehta @sirreal @stokesman @t-hamano @talldan @taylorgorman @tellthemachines @tjcafferkey @twstokes @tyxla @vcanales @vipul0425 @westonruter @WunderBart @youknowriad
+
+
+= 18.4.1 =
+
+## Changelog
+
+### Bug fixes
+
+- Writing flow: fix paste for input fields ([61389](https://github.com/WordPress/gutenberg/pull/61389))
+
+
+= 18.4.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Layout
+- Check child layout exists before generating classname. ([61392](https://github.com/WordPress/gutenberg/pull/61392))
+- Hide Image block resizer when inside a grid layout. ([61603](https://github.com/WordPress/gutenberg/pull/61603))
+
+#### Grid interactivity
+- Improve `max` attribute logic. ([61420](https://github.com/WordPress/gutenberg/pull/61420))
+- Improve how grid resizer handles 0-width and 0-height cells. ([61423](https://github.com/WordPress/gutenberg/pull/61423))
+- Show grid visualizer when block inspector is closed. ([61429](https://github.com/WordPress/gutenberg/pull/61429))
+- Stabilise grid layout visualiser and resizer. ([61640](https://github.com/WordPress/gutenberg/pull/61640))
+
+#### Global Styles
+- Add aspect ratio presets support via theme.json. ([47271](https://github.com/WordPress/gutenberg/pull/47271), [61774](https://github.com/WordPress/gutenberg/pull/61774))
+- Background images: Remove required "file" prop. ([61387](https://github.com/WordPress/gutenberg/pull/61387), [61469](https://github.com/WordPress/gutenberg/pull/61469))
+- Change "Solid" tab to "Color". ([61366](https://github.com/WordPress/gutenberg/pull/61366))
+- Improve panel title and description for palette. ([61365](https://github.com/WordPress/gutenberg/pull/61365))
+- Tweak palette panel spacing and empty message. ([61368](https://github.com/WordPress/gutenberg/pull/61368))
+- Update color variations. ([61334](https://github.com/WordPress/gutenberg/pull/61334))
+
+#### Block Styles
+- Add extended version of register block style functions. ([61029](https://github.com/WordPress/gutenberg/pull/61029))
+
+### Post actions
+- Improve success messages of some post actions. ([61539](https://github.com/WordPress/gutenberg/pull/61539))
+- Unify the list of available post type actions. ([61520](https://github.com/WordPress/gutenberg/pull/61520))
+- Don't export duplicatePostAction for now. ([61407](https://github.com/WordPress/gutenberg/pull/61407))
+
+#### Zoom Out
+- Editor: Enable Zoom-out mode in the post editor. ([61293](https://github.com/WordPress/gutenberg/pull/61293))
+- Keep original viewport width (single scale). ([61424](https://github.com/WordPress/gutenberg/pull/61424))
+- Open inserter sidebar when clicking on inserter buttons on zoom-out mode. ([61434](https://github.com/WordPress/gutenberg/pull/61434))
+- Remove experimental zoom out control. ([61509](https://github.com/WordPress/gutenberg/pull/61509))
+- Zoomed Out View: Don't close the inserter. ([61004](https://github.com/WordPress/gutenberg/pull/61004))
+
+#### Components
+- Do not render FormTokenField label when not defined. ([61336](https://github.com/WordPress/gutenberg/pull/61336))
+- Placeholder: Tweak placeholder style. ([61590](https://github.com/WordPress/gutenberg/pull/61590))
+- Add content only descriptions in dropdown menus for patterns and templates. ([61127](https://github.com/WordPress/gutenberg/pull/61127))
+
+#### Block Library
+- List Block: Add block class name to the list block. ([56469](https://github.com/WordPress/gutenberg/pull/56469))
+- Embeds Block: Add Bluesky variation. ([61352](https://github.com/WordPress/gutenberg/pull/61352))
+- Site Logo Block: Add setting labels via the 'register_setting' method. ([61351](https://github.com/WordPress/gutenberg/pull/61351))
+
+#### Block Editor
+- Make `BlockPopover` component public. ([61529](https://github.com/WordPress/gutenberg/pull/61529))
+- Only add the selected pattern category in metadata during insertion. ([61557](https://github.com/WordPress/gutenberg/pull/61557))
+- Add a keyboard shortcut to create group from the selected blocks. ([46972](https://github.com/WordPress/gutenberg/pull/46972))
+- Enhance block outlines and selection interactions. ([60757](https://github.com/WordPress/gutenberg/pull/60757))
+- Tiny tweak to position close button properly in the inserter. ([61461](https://github.com/WordPress/gutenberg/pull/61461))
+
+#### Editor
+- Editor: Unify Header component. ([61273](https://github.com/WordPress/gutenberg/pull/61273))
+- Editor: Unify the sidebar between the post and site editors. ([61507](https://github.com/WordPress/gutenberg/pull/61507))
+- Editor: Update and simplify the Post Summary and Post Card section in the document sidebar. ([61624](https://github.com/WordPress/gutenberg/pull/61624))
+- Try: Improve date-wrapping in prepublish flow. ([61490](https://github.com/WordPress/gutenberg/pull/61490))
+- Update: Implement the new discussion panel design. ([61357](https://github.com/WordPress/gutenberg/pull/61357))
+
+#### Post Editor
+- Add global styles to settings using existing context code. ([61556](https://github.com/WordPress/gutenberg/pull/61556))
+- Display a notice after moving a post into the trash. ([61670](https://github.com/WordPress/gutenberg/pull/61670))
+- Simplify Post Publish Flow status term. ([61386](https://github.com/WordPress/gutenberg/pull/61386))
+
+#### Site Editor
+- Redirect `/wp_template_part/all` to `/patterns`. ([61446](https://github.com/WordPress/gutenberg/pull/61446))
+- Moves "Patterns" command to site editor main navigation. ([61416](https://github.com/WordPress/gutenberg/pull/61416))
+- Adds "Template Parts" command to site editor. ([61287](https://github.com/WordPress/gutenberg/pull/61287))
+- Show pin/unpin button on the site editor plugin sidebar. ([61448](https://github.com/WordPress/gutenberg/pull/61448))
+- Remove default entry into Navigation Menu focus mode but retain ability to access via "Edit". ([61275](https://github.com/WordPress/gutenberg/pull/61275))
+
+#### Data Views
+- Add bulk actions toolbar. ([59714](https://github.com/WordPress/gutenberg/pull/59714))
+- Align list and table layout visuals. ([61157](https://github.com/WordPress/gutenberg/pull/61157))
+- Add actions to list layout. ([60805](https://github.com/WordPress/gutenberg/pull/60805))
+- Make pattern preview click area larger. ([61250](https://github.com/WordPress/gutenberg/pull/61250))
+
+
+### Bug Fixes
+
+#### Layout
+- Fix grid item resizing in non-iframed editor. ([61636](https://github.com/WordPress/gutenberg/pull/61636))
+- Fix resizing items to top and left with GridItemResizer. ([60986](https://github.com/WordPress/gutenberg/pull/60986))
+- Grid Visualizer: Fix grid item resizing in site editor. ([61641](https://github.com/WordPress/gutenberg/pull/61641))
+- Grid Visualizer: Fix resize not ending when mouse is released outside grid's bounds. ([61668](https://github.com/WordPress/gutenberg/pull/61668))
+- GridItemResizer: Fix resizing when List View is open. ([61643](https://github.com/WordPress/gutenberg/pull/61643))
+- Only show grid resizer if grid block allows resizing on children. ([61552](https://github.com/WordPress/gutenberg/pull/61552))
+
+#### Global Styles
+- Background image: Explicitly set background repeat value in user styles. ([61526](https://github.com/WordPress/gutenberg/pull/61526))
+- Background image: Size controls should show when an image is set. ([61388](https://github.com/WordPress/gutenberg/pull/61388))
+- Make sure to replace all instances of `:Where(body)` instead of just …. ([61602](https://github.com/WordPress/gutenberg/pull/61602))
+- Reduce specificity of global styles body margin reset rule. ([61340](https://github.com/WordPress/gutenberg/pull/61340))
+- Remove Post Template background override. ([61545](https://github.com/WordPress/gutenberg/pull/61545))
+
+#### Patterns
+- Fix blocks in unsynced patterns can enable overrides. ([61639](https://github.com/WordPress/gutenberg/pull/61639))
+- Revert "Use contentOnly locking for pattern block, remove hard-coded block check in block inspector". ([61517](https://github.com/WordPress/gutenberg/pull/61517))
+
+#### List View
+- Account for text fields in shortcut handler. ([61583](https://github.com/WordPress/gutenberg/pull/61583))
+- Add a special case for shortcuts coming from modals. ([61606](https://github.com/WordPress/gutenberg/pull/61606))
+- Standardize List View feature name to use title case capitalization. ([61535](https://github.com/WordPress/gutenberg/pull/61535))
+
+#### Zoom Out
+- Block editor: Scroll block into view on insert. ([61418](https://github.com/WordPress/gutenberg/pull/61418))
+- Fix double scrollbars in site editor with zoom out view enabled. ([61548](https://github.com/WordPress/gutenberg/pull/61548))
+- Fix zoom out UI scale. ([61265](https://github.com/WordPress/gutenberg/pull/61265))
+- Add bottom and top inserters. ([61473](https://github.com/WordPress/gutenberg/pull/61473))
+- Add patterns loading state. ([61513](https://github.com/WordPress/gutenberg/pull/61513))
+- Don't allow dropping outside section root. ([61512](https://github.com/WordPress/gutenberg/pull/61512))
+- Don't select last block. ([61484](https://github.com/WordPress/gutenberg/pull/61484))
+- Pass the section root ID to the inserter. ([61464](https://github.com/WordPress/gutenberg/pull/61464))
+- Zoom-out: Fix iframe ref error. ([61200](https://github.com/WordPress/gutenberg/pull/61200))
+
+#### Components
+- Fix inconsistent complementary header styles. ([61331](https://github.com/WordPress/gutenberg/pull/61331))
+- Fix sticking “Reset” option in `ToolsPanel`. ([60621](https://github.com/WordPress/gutenberg/pull/60621))
+- RadioControl: Fix shrinking radio controls. ([61476](https://github.com/WordPress/gutenberg/pull/61476))
+
+#### Block Library
+- Navigation Block: Add list item wrapper to social links when used in navigation block. ([61396](https://github.com/WordPress/gutenberg/pull/61396))
+- HTML Block: Remove font weight on toolbar tab button - #61254. ([61308](https://github.com/WordPress/gutenberg/pull/61308))
+- Time to Read Block: Fix "this block has encountered an error" - #61459. ([61614](https://github.com/WordPress/gutenberg/pull/61614))
+- Image Block: Enable crop action when image has a link. ([61470](https://github.com/WordPress/gutenberg/pull/61470))
+- Shortcode Block: Fix layout margin override. ([55028](https://github.com/WordPress/gutenberg/pull/55028))
+
+#### Block Editor
+- Editor styles: Fix cache (by wrapper selector). ([61397](https://github.com/WordPress/gutenberg/pull/61397))
+- Fix Truncate component for long unbreakable text. ([61137](https://github.com/WordPress/gutenberg/pull/61137))
+- Fix focus loss due to filtering blocks. ([61558](https://github.com/WordPress/gutenberg/pull/61558))
+- Fix: The issue of appender button not clickable in row/stack group. ([61585](https://github.com/WordPress/gutenberg/pull/61585))
+- Writing Flow/Rich Text: Unify split logic. ([54543](https://github.com/WordPress/gutenberg/pull/54543))
+
+#### Post Editor
+- Fix the 'usePaddingAppender' error. ([61500](https://github.com/WordPress/gutenberg/pull/61500))
+- Return an empty object when no fallback templates are found (wp/v2/templates/lookup). ([60925](https://github.com/WordPress/gutenberg/pull/60925))
+
+#### Site Editor
+- Fix user capabilities check for the Site Editor. ([61444](https://github.com/WordPress/gutenberg/pull/61444))
+- Preserve the wp_theme_preview query arg when navigating in Site Editor. ([61394](https://github.com/WordPress/gutenberg/pull/61394))
+- Trigger sidebar animations only on cross-route navigations. ([61402](https://github.com/WordPress/gutenberg/pull/61402))
+- Site Editor: Restore the hover zoom effect when hovering the editor frame. ([61647](https://github.com/WordPress/gutenberg/pull/61647))
+
+#### Widgets Editor
+- Hide the close button on the inserter for widgets editor. ([61510](https://github.com/WordPress/gutenberg/pull/61510))
+
+#### Data Views
+- Fix regression on keyboard navigation. ([61478](https://github.com/WordPress/gutenberg/pull/61478))
+- Improve dataview types. ([61586](https://github.com/WordPress/gutenberg/pull/61586))
+
+#### Interactivity API
+- Interactivity API: Allow multiple event handlers for the same type with `data-wp-on-document` and `data-wp-on-window`. ([61009](https://github.com/WordPress/gutenberg/pull/61009))
+- Interactivity API: Prevent empty namespace or different namespaces from killing the runtime. ([61409](https://github.com/WordPress/gutenberg/pull/61409))
+- Interactivity API: Prevent wrong written directives from killing the runtime. ([61249](https://github.com/WordPress/gutenberg/pull/61249))
+
+
+### Accessibility
+
+#### Components
+- ComboboxControl supports disabled items. ([61294](https://github.com/WordPress/gutenberg/pull/61294))
+- Remove usage of aria-details from InputControl and BaseControl. ([61203](https://github.com/WordPress/gutenberg/pull/61203))
+
+#### Block Library
+- Fix the RRS block placeholder labeling and improve spacing. ([61576](https://github.com/WordPress/gutenberg/pull/61576))
+
+#### Block Editor
+- Focus currently selected block when entering canvas. ([61472](https://github.com/WordPress/gutenberg/pull/61472))
+- Focus inserter toggle when closing the inserter sidebar. ([61467](https://github.com/WordPress/gutenberg/pull/61467))
+- Inserter: Add close button. ([61421](https://github.com/WordPress/gutenberg/pull/61421))
+
+#### Post Editor
+- Post Actions: Correctly disable dropdown trigger. ([61625](https://github.com/WordPress/gutenberg/pull/61625))
+
+
+### Performance
+
+- Calculate and report quartiles in performance results. ([60950](https://github.com/WordPress/gutenberg/pull/60950))
+- Refactor InserterTabs to use children and remove re-memoizing. ([61295](https://github.com/WordPress/gutenberg/pull/61295))
+- Tests: Improve collection and reporting. ([61450](https://github.com/WordPress/gutenberg/pull/61450))
+- Performance tests: Fix results file path. ([61686](https://github.com/WordPress/gutenberg/pull/61686))
+- Revert "useBlockSync: Remove isControlled effect". ([61480](https://github.com/WordPress/gutenberg/pull/61480))
+
+
+### Documentation
+
+-  Update old document URLs to new ones. ([61595](https://github.com/WordPress/gutenberg/pull/61595))
+- Add a section about `block_editor_settings_all` to the Filters and Hooks doc. ([61597](https://github.com/WordPress/gutenberg/pull/61597))
+- Add link to VS Code Playwright Extension. ([61505](https://github.com/WordPress/gutenberg/pull/61505))
+- Added check for duplicated slugs during manifest.json generation. ([61332](https://github.com/WordPress/gutenberg/pull/61332))
+- Block Editor: Remove `multiline` prop from `Richtext` doc. ([61592](https://github.com/WordPress/gutenberg/pull/61592))
+- Docs: How-to Guides > Meta Boxes - Update metabox.md. ([61314](https://github.com/WordPress/gutenberg/pull/61314))
+- Docs: Interactivity API - Add viewScriptModule as a requirement to work with the Interactivity API. ([61355](https://github.com/WordPress/gutenberg/pull/61355))
+- Docs: Interactivity API : New pages - About and FAQ. ([61323](https://github.com/WordPress/gutenberg/pull/61323))
+- Docs: Interactivity Api - Small fixes. ([61403](https://github.com/WordPress/gutenberg/pull/61403))
+- Docs: Remove list of keyboard shortcuts from FAQ page. ([61591](https://github.com/WordPress/gutenberg/pull/61591))
+- Docs: Update theme-json-living.md to fix little issue. ([61354](https://github.com/WordPress/gutenberg/pull/61354))
+- Fix WP versions for theme.json v3 migration in inline documentation. ([61328](https://github.com/WordPress/gutenberg/pull/61328))
+- Several Typo Correction in Inline doc. ([61379](https://github.com/WordPress/gutenberg/pull/61379))
+- Small fixes as per feedback received. ([61445](https://github.com/WordPress/gutenberg/pull/61445))
+- Theme.json: Update schema with working create theme link. ([61306](https://github.com/WordPress/gutenberg/pull/61306))
+- Update @wordpress/a11y README.md. ([61635](https://github.com/WordPress/gutenberg/pull/61635))
+- Update Node.js requirement in create-block docs. ([60962](https://github.com/WordPress/gutenberg/pull/60962))
+- Update and restructure the Editor Hooks doc. ([61596](https://github.com/WordPress/gutenberg/pull/61596))
+- Updated links to developer resources on README.md. ([61525](https://github.com/WordPress/gutenberg/pull/61525))
+- theme.json schema: Remove duplicate key. ([61523](https://github.com/WordPress/gutenberg/pull/61523))
+- Several Typo Corrections in Inline Documentations. ([61662](https://github.com/WordPress/gutenberg/pull/61662))
+
+
+### Code Quality
+
+- PHP load: move rest template controller 6.6 import to "REST" area. ([61564](https://github.com/WordPress/gutenberg/pull/61564))
+- Replace classnames with clsx. ([61138](https://github.com/WordPress/gutenberg/pull/61138), [61380](https://github.com/WordPress/gutenberg/pull/61380))
+
+#### Block Bindings
+- Remove not needed breaks in `gutenberg_block_bindings_replace_html`. ([61660](https://github.com/WordPress/gutenberg/pull/61660))
+- Simplify the HTML replacement logic until the HTML API is ready. ([61236](https://github.com/WordPress/gutenberg/pull/61236))
+
+#### Patterns
+- Pattern overrides: Use block binding editing API. ([60721](https://github.com/WordPress/gutenberg/pull/60721))
+
+#### Components
+- Assess stabilization of `Theme`. ([61077](https://github.com/WordPress/gutenberg/pull/61077))
+- Upgrade @types/react package and @types/react-dom. ([60796](https://github.com/WordPress/gutenberg/pull/60796))
+- Fix problem with gradient-parser types. ([61679](https://github.com/WordPress/gutenberg/pull/61679))
+
+#### Block Editor
+- Improve `LineHeightControl` unit tests. ([61337](https://github.com/WordPress/gutenberg/pull/61337))
+
+#### Editor
+- Move the starter template options to the editor package. ([61665](https://github.com/WordPress/gutenberg/pull/61665))
+
+#### Post Editor
+- Edit post: Do not consider sidebars mutually exclusive. ([61468](https://github.com/WordPress/gutenberg/pull/61468))
+- Editor: Move the sidebar component to the editor package. ([61497](https://github.com/WordPress/gutenberg/pull/61497))
+
+#### Site Editor
+- Site Editor sidebar: Provide explicit backPaths, remove the getBackPath helper. ([61286](https://github.com/WordPress/gutenberg/pull/61286))
+
+#### Data Views
+- Expand typing more components. ([61654](https://github.com/WordPress/gutenberg/pull/61654))
+- Add end-to-end tests for keyboard interactions in DataViews ListView. ([61648](https://github.com/WordPress/gutenberg/pull/61648))
+- Add types to the ViewGrid component. ([61667](https://github.com/WordPress/gutenberg/pull/61667))
+- Type the BulkActions component. ([61666](https://github.com/WordPress/gutenberg/pull/61666))
+- Type the ItemActions component. ([61400](https://github.com/WordPress/gutenberg/pull/61400))
+- Type the ViewList component. ([61246](https://github.com/WordPress/gutenberg/pull/61246))
+- Remove `onActionPerformed` & `onActionStart` from the ActionModal API. ([61659](https://github.com/WordPress/gutenberg/pull/61659))
+
+#### Interactivity API
+- Add types for warn helper. ([61687](https://github.com/WordPress/gutenberg/pull/61687))
+- Enable strict type checking. ([59865](https://github.com/WordPress/gutenberg/pull/59865))
+
+
+### Tools
+
+#### Testing
+- Convert FocalPointPicker tests to TypeScript. ([61373](https://github.com/WordPress/gutenberg/pull/61373))
+- E2E: Fix artifacts handling in CI. ([61338](https://github.com/WordPress/gutenberg/pull/61338))
+- Interactivity API: Fix flaky tests for attribute hydration. ([61615](https://github.com/WordPress/gutenberg/pull/61615))
+- Lightbox UI block override tests. ([61414](https://github.com/WordPress/gutenberg/pull/61414))
+- Playwright Utils: Silence some of the warnings coming from Firefox. ([61451](https://github.com/WordPress/gutenberg/pull/61451))
+- Test: Fix failing style linting error. ([61649](https://github.com/WordPress/gutenberg/pull/61649))
+- Tests: Fix flaky interactivity deferred test. ([61359](https://github.com/WordPress/gutenberg/pull/61359))
+
+#### Build Tooling
+- Add stylelint rule to disallow the `order` CSS property. ([61243](https://github.com/WordPress/gutenberg/pull/61243))
+- Enforce `@since` tags in /packages/block-serialization-default-parser/ and other files. ([60007](https://github.com/WordPress/gutenberg/pull/60007))
+- Bug: False positives for `react-hooks/exhaustive-deps`. ([61599](https://github.com/WordPress/gutenberg/pull/61599))
+- Scripts: Add RTLCSS to wp-scripts. ([61540](https://github.com/WordPress/gutenberg/pull/61540))
+- WP-ENV: Fix return type and tests. ([61631](https://github.com/WordPress/gutenberg/pull/61631))
+- Create Block: Match specified engines with Gutenberg and Core. ([61430](https://github.com/WordPress/gutenberg/pull/61430))
+- Set `prefer-dedupe` as the default. ([61630](https://github.com/WordPress/gutenberg/pull/61630))
+- build: Suggest workaround if `tsc --build` fails. ([61501](https://github.com/WordPress/gutenberg/pull/61501))
+- build:package-types: Run silently to reduce user confusion. ([61530](https://github.com/WordPress/gutenberg/pull/61530))
+- GitHub Actions: Fix PHP file change detection filter pattern. ([61183](https://github.com/WordPress/gutenberg/pull/61183))
+- Dedupe packages. ([61532](https://github.com/WordPress/gutenberg/pull/61532))
+- Patch `react-autosize-textarea` for updated types. ([61570](https://github.com/WordPress/gutenberg/pull/61570))
+- Upgrade @use-gesture/react. ([61503](https://github.com/WordPress/gutenberg/pull/61503))
+- Upgrade framer-motion. ([61572](https://github.com/WordPress/gutenberg/pull/61572))
+
+
+## First time contributors
+
+The following PRs were merged by first time contributors:
+
+- @amitraj2203: Embeds: Add Bluesky variation. ([61352](https://github.com/WordPress/gutenberg/pull/61352))
+- @jpstevens: Convert FocalPointPicker tests to TypeScript. ([61373](https://github.com/WordPress/gutenberg/pull/61373))
+- @kovshenin: Update Node.js requirement in create-block docs. ([60962](https://github.com/WordPress/gutenberg/pull/60962))
+- @mrmurphy: Upgrade @types/react package and @types/react-dom. ([60796](https://github.com/WordPress/gutenberg/pull/60796))
+- @scheinercc: Update @wordpress/a11y README.md. ([61635](https://github.com/WordPress/gutenberg/pull/61635))
+- @StyleShit: Bug: False positives for `react-hooks/exhaustive-deps`. ([61599](https://github.com/WordPress/gutenberg/pull/61599))
+- @vipul0425: Fix: The issue of appender button not clickable in row/stack group. ([61585](https://github.com/WordPress/gutenberg/pull/61585))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @ajlende @amitraj2203 @anton-vlasenko @artemiomorales @bacoords @carolinan @cbravobernal @colinduwe @DaniGuardiola @DAreRodz @desrosj @draganescu @ellatrix @fullofcaffeine @geriux @getdave @gigitux @hbhalodia @jameskoster @jasmussen @jeryj @jffng @johnhooks @jorgefilipecosta @jpstevens @jsnajdr @juanmaguitar @kevin940726 @kovshenin @MaggieCabrera @Mamaduka @mcsf @mrmurphy @ndiego @noisysocks @ntsekouras @oandregal @ramonjd @retrofox @richtabor @ryelle @SantosGuillamot @scheinercc @scruffian @shail-mehta @sirreal @stokesman @StyleShit @swissspidy @t-hamano @talldan @tellthemachines @tyxla @vipul0425 @WunderBart @youknowriad
+
+
+
+
+= 18.3.0 =
+
 ## Changelog
 
 ### Enhancements
@@ -233,6 +1015,8 @@ The following contributors merged PRs in this release:
 @aaronrobertshaw @afercia @ajlende @carolinan @cbravobernal @colorful-tones @DaniGuardiola @desrosj @draganescu @ellatrix @fabiankaegy @fullofcaffeine @geriux @huubl @itzmekhokan @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @juanfra @juanmaguitar @lanresmith @MaggieCabrera @Mamaduka @mirka @ntsekouras @oandregal @ockham @ramonjd @retrofox @richtabor @SantosGuillamot @scruffian @shail-mehta @sirreal @stokesman @sunil25393 @swissspidy @t-hamano @talldan @twstokes @tyxla @youknowriad
 
 
+
+
 = 18.2.0 =
 
 ## Changelog
diff --git a/docs/contributors/code/coding-guidelines.md b/docs/contributors/code/coding-guidelines.md
index 63114073b1b80..d89df5876e380 100644
--- a/docs/contributors/code/coding-guidelines.md
+++ b/docs/contributors/code/coding-guidelines.md
@@ -39,13 +39,13 @@ Components may be assigned with class names that indicate states (for example, a
 
 **Example:**
 
-Consider again the Notices example. We may want to apply specific styling for dismissible notices. The [`classnames` package](https://www.npmjs.com/package/classnames) can be a helpful utility for conditionally applying modifier class names.
+Consider again the Notices example. We may want to apply specific styling for dismissible notices. The [`clsx` package](https://www.npmjs.com/package/clsx) can be a helpful utility for conditionally applying modifier class names.
 
 ```jsx
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export default function Notice( { children, onRemove, isDismissible } ) {
-	const classes = classnames( 'components-notice', {
+	const classes = clsx( 'components-notice', {
 		'is-dismissible': isDismissible,
 	} );
 
@@ -141,9 +141,9 @@ An **plugin-only API** is one which is planned for eventual public availability,
 Plugin-only APIs are excluded from WordPress Core and only available in the Gutenberg Plugin:
 
 ```js
-// Using process.env.IS_GUTENBERG_PLUGIN allows Webpack to exclude this
+// Using globalThis.IS_GUTENBERG_PLUGIN allows Webpack to exclude this
 // export from WordPress core:
-if ( process.env.IS_GUTENBERG_PLUGIN ) {
+if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 	export { doSomethingExciting } from './api';
 }
 ```
@@ -448,8 +448,8 @@ lock( privateApis, { privateEverywhere, privateInCorePublicInPlugin } );
 
 // The privateInCorePublicInPlugin function is explicitly exported,
 // but this export will not be merged into WordPress core thanks to
-// the process.env.IS_GUTENBERG_PLUGIN check.
-if ( process.env.IS_GUTENBERG_PLUGIN ) {
+// the globalThis.IS_GUTENBERG_PLUGIN check.
+if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 	export const privateInCorePublicInPlugin =
 		unlock( privateApis ).privateInCorePublicInPlugin;
 }
diff --git a/docs/contributors/code/e2e/README.md b/docs/contributors/code/e2e/README.md
index 43443cddd6aeb..3a123cc2988b7 100644
--- a/docs/contributors/code/e2e/README.md
+++ b/docs/contributors/code/e2e/README.md
@@ -36,6 +36,7 @@ xvfb-run npm run test:e2e
 # Only run webkit tests.
 xvfb-run -- npm run test:e2e -- --project=webkit
 ```
+If you're already editing in VS Code, you may find the [Playwright extension](https://playwright.dev/docs/getting-started-vscode) helpful for running, writing and debugging tests.
 
 ## Best practices
 
diff --git a/docs/contributors/code/getting-started-with-code-contribution.md b/docs/contributors/code/getting-started-with-code-contribution.md
index 30a78037ab75e..921c8ad6ddc3e 100644
--- a/docs/contributors/code/getting-started-with-code-contribution.md
+++ b/docs/contributors/code/getting-started-with-code-contribution.md
@@ -126,7 +126,7 @@ Port: {MYSQL_PORT_NUMBER}
 
 **Please note**: the MySQL port number will change each time `wp-env` restarts. If you find you can no longer access your database, simply repeat the steps above to find the new port number and restore your connection.
 
-**Tip**: [Sequel Ace](https://sequel-ace.com/) is a useful GUI tool for accessing a MySQL database. Other tools are available and documented in this [article on accessing the WordPress database](https://wordpress.org/documentation/article/creating-database-for-wordpress/).
+**Tip**: [Sequel Ace](https://sequel-ace.com/) is a useful GUI tool for accessing a MySQL database. Other tools are available and documented in this [article on accessing the WordPress database](https://developer.wordpress.org/advanced-administration/before-install/creating-database/).
 
 #### Troubleshooting
 
diff --git a/docs/getting-started/faq.md b/docs/getting-started/faq.md
index 57a379a9fafe1..8ac489e3c154a 100644
--- a/docs/getting-started/faq.md
+++ b/docs/getting-started/faq.md
@@ -68,219 +68,6 @@ Yes. There are a lot! There is a help modal showing all available keyboard short
 
 You can see the whole list going to the top right corner menu of the new editor and clicking on “Keyboard Shortcuts” (or by using the keyboard shortcut <kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>H</kbd> on Linux/Windows and <kbd>⌃</kbd><kbd>⌥</kbd><kbd>H</kbd> on macOS).
 
-This is the canonical list of keyboard shortcuts:
-
-#### Editor shortcuts
-
-<table>
-	<thead>
-		<tr>
-			<th>Shortcut description</th>
-			<th>Linux/Windows shortcut</th>
-			<th>macOS shortcut</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr>
-			<td>Display keyboard shortcuts.</td>
-			<td><kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>H</kbd></td>
-			<td><kbd>⌃</kbd><kbd>⌥</kbd><kbd>H</kbd></td>
-		</tr>
-		<tr>
-			<td>Save your changes.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>S</kbd></td>
-			<td><kbd>⌘</kbd><kbd>S</kbd></td>
-		</tr>
-		<tr>
-			<td>Undo your last changes.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Z</kbd></td>
-			<td><kbd>⌘</kbd><kbd>Z</kbd></td>
-		</tr>
-		<tr>
-			<td>Redo your last undo.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd></td>
-			<td><kbd>⇧</kbd><kbd>⌘</kbd><kbd>Z</kbd></td>
-		</tr>
-		<tr>
-			<td>Show or hide the Settings sidebar.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>,</kbd></td>
-			<td><kbd>⇧</kbd><kbd>⌘</kbd><kbd>,</kbd></td>
-		</tr>
-		<tr>
-			<td>Open the list view menu.</td>
-			<td><kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>O</kbd></td>
-			<td><kbd>⌃</kbd><kbd>⌥</kbd><kbd>O</kbd></td>
-		</tr>
-		<tr>
-			<td>Navigate to the next part of the editor.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>`</kbd></td>
-			<td><kbd>⌃</kbd><kbd>`</kbd></td>
-		</tr>
-		<tr>
-			<td>Navigate to the previous part of the editor.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>`</kbd></td>
-			<td><kbd>⌃</kbd><kbd>⇧</kbd><kbd>`</kbd></td>
-		</tr>
-		<tr>
-			<td>Navigate to the next part of the editor (alternative).</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>N</kbd></td>
-			<td><kbd>⌃</kbd><kbd>⌥</kbd><kbd>N</kbd></td>
-		</tr>
-		<tr>
-			<td>Navigate to the previous part of the editor (alternative).</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>P</kbd></td>
-			<td><kbd>⌃</kbd><kbd>⌥</kbd><kbd>P</kbd></td>
-		</tr>
-		<tr>
-			<td>Navigate to the nearest toolbar.</td>
-			<td><kbd>Alt</kbd>+<kbd>F10</kbd></td>
-			<td><kbd>⌥</kbd><kbd>F10</kbd></td>
-		</tr>
-		<tr>
-			<td>Switch between visual editor and code editor.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>M</kbd></td>
-			<td><kbd>⇧</kbd><kbd>⌥</kbd><kbd>⌘</kbd><kbd>M</kbd></td>
-		</tr>
-		<tr>
-			<td>Toggle fullscreen mode.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Shift</kbd>+<kbd>F</kbd></td>
-			<td><kbd>⇧</kbd><kbd>⌥</kbd><kbd>⌘</kbd><kbd>F</kbd></td>
-		</tr>
-	</tbody>
-</table>
-
-#### Selection shortcuts
-
-<table>
-	<thead>
-		<tr>
-			<th>Shortcut description</th>
-			<th>Linux/Windows shortcut</th>
-			<th>macOS shortcut</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr>
-			<td>Select all text when typing. Press again to select all blocks.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>A</kbd></td>
-			<td><kbd>⌘</kbd><kbd>A</kbd></td>
-		</tr>
-		<tr>
-			<td>Clear selection.</td>
-			<td><kbd>Esc</kbd></td>
-			<td><kbd>Esc</kbd></td>
-		</tr>
-		<tr>
-			<td>Select text across multiple blocks.</td>
-			<td><kbd>Shift</kbd>+<kbd>Arrow (⇦, ⇧, ⇨, ⇩)</kbd></td>
-			<td><kbd>Shift</kbd>+<kbd>Arrow (⇦, ⇧, ⇨, ⇩)</kbd></td>
-		</tr>
-	</tbody>
-</table>
-
-#### Block shortcuts
-
-<table>
-	<thead>
-		<tr>
-			<th>Shortcut description</th>
-			<th>Linux/Windows shortcut</th>
-			<th>macOS shortcut</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr>
-			<td>Duplicate the selected block(s).</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd></td>
-			<td><kbd>⇧</kbd><kbd>⌘</kbd><kbd>D</kbd></td>
-		</tr>
-		<tr>
-			<td>Remove the selected block(s).</td>
-			<td><kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>Z</kbd></td>
-			<td><kbd>⌃</kbd><kbd>⌥</kbd><kbd>Z</kbd></td>
-		</tr>
-		<tr>
-			<td>Insert a new block before the selected block(s).</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>T</kbd></td>
-			<td><kbd>⌥</kbd><kbd>⌘</kbd><kbd>T</kbd></td>
-		</tr>
-		<tr>
-			<td>Insert a new block after the selected block(s).</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Y</kbd></td>
-			<td><kbd>⌥</kbd><kbd>⌘</kbd><kbd>Y</kbd></td>
-		</tr>
-		<tr>
-			<td>Move the selected block(s) up.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Shift</kbd>+<kbd>T</kbd></td>
-			<td><kbd>⌥</kbd><kbd>⌘</kbd><kbd>⇧</kbd><kbd>T</kbd></td>
-		</tr>
-		<tr>
-			<td>Move the selected block(s) down.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Shift</kbd>+<kbd>Y</kbd></td>
-			<td><kbd>⌥</kbd><kbd>⌘</kbd><kbd>⇧</kbd><kbd>Y</kbd></td>
-		</tr>
-		<tr>
-			<td>Change the block type after adding a new paragraph.</td>
-			<td><kbd>/</kbd></td>
-			<td><kbd>/</kbd></td>
-		</tr>
-		<tr>
-			<td>Remove multiple selected blocks.</td>
-			<td><kbd>del</kbd><kbd>backspace</kbd></td>
-			<td><kbd>del</kbd><kbd>backspace</kbd></td>
-		</tr>
-	</tbody>
-</table>
-
-#### Text formatting
-
-<table>
-	<thead>
-		<tr>
-			<th>Shortcut description</th>
-			<th>Linux/Windows shortcut</th>
-			<th>macOS shortcut</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr>
-			<td>Make the selected text bold.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>B</kbd></td>
-			<td><kbd>⌘</kbd><kbd>B</kbd></td>
-		</tr>
-		<tr>
-			<td>Make the selected text italic.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>I</kbd></td>
-			<td><kbd>⌘</kbd><kbd>I</kbd></td>
-		</tr>
-		<tr>
-			<td>Underline the selected text.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>U</kbd></td>
-			<td><kbd>⌘</kbd><kbd>U</kbd></td>
-		</tr>
-		<tr>
-			<td>Convert the selected text into a link.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>K</kbd></td>
-			<td><kbd>⌘</kbd><kbd>K</kbd></td>
-		</tr>
-		<tr>
-			<td>Remove a link.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>K</kbd></td>
-			<td><kbd>⇧</kbd><kbd>⌘</kbd><kbd>K</kbd></td>
-		</tr>
-		<tr>
-			<td>Add a strikethrough to the selected text.</td>
-			<td><kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>D</kbd></td>
-			<td><kbd>⌃</kbd><kbd>⌥</kbd><kbd>D</kbd></td>
-		</tr>
-		<tr>
-			<td>Display the selected text in a monospaced font.</td>
-			<td><kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>X</kbd></td>
-			<td><kbd>⌃</kbd><kbd>⌥</kbd><kbd>X</kbd></td>
-		</tr>
-	</tbody>
-</table>
-
 Here is a brief animation illustrating how to find and use the keyboard shortcuts:
 
 ![GIF showing how to access keyboard shortcuts](https://make.wordpress.org/core/files/2020/07/keyboard-shortcuts.gif)
@@ -413,7 +200,7 @@ Our approach—as outlined in [the technical overview introduction](https://make
 
 This also [gives us the flexibility](https://github.com/WordPress/gutenberg/issues/1516) to store those blocks that are inherently separate from the content stream (reusable pieces like widgets or small post type elements) elsewhere, and just keep token references for their placement.
 
-We suggest you look at the [Gutenberg key concepts](/docs/getting-started/architecture/key-concepts.md) to learn more about how this aspect of the project works.
+We suggest you look at the [Gutenberg key concepts](/docs/explanations/architecture/key-concepts.md) to learn more about how this aspect of the project works.
 
 ### How can I parse the post content back out into blocks in PHP or JS?
 
diff --git a/docs/getting-started/fundamentals/file-structure-of-a-block.md b/docs/getting-started/fundamentals/file-structure-of-a-block.md
index eb3f38e0be5c4..24972b219e0b6 100644
--- a/docs/getting-started/fundamentals/file-structure-of-a-block.md
+++ b/docs/getting-started/fundamentals/file-structure-of-a-block.md
@@ -29,7 +29,7 @@ The [build process](docs/block-editor/getting-started/fundamentals/javascript-in
 
 The `block.json` file contains the [block's metadata](docs/block-editor/reference-guides/block-api/block-metadata/), streamlining its definition and registration across client-side and server-side environments. 
 
-This file includes the block name, description, [attributes](docs/block-editor/reference-guides/block-api/block-attributes.md), [supports](docs/block-editor/reference-guides/block-api/block-supports.md), and more, as well as the locations of essential files responsible for the block's functionality, appearance, and styling. 
+This file includes the block name, description, [attributes](docs/block-editor/reference-guides/block-api/block-attributes/), [supports](docs/block-editor/reference-guides/block-api/block-supports/), and more, as well as the locations of essential files responsible for the block's functionality, appearance, and styling. 
 
 When a build process is applied, the `block.json` file and the other generated files are moved to a designated folder, often the `build` folder. Consequently, the file paths specified within `block.json` point to these processed, bundled versions of the files. 
 
diff --git a/docs/getting-started/tutorial.md b/docs/getting-started/tutorial.md
index 1f33eeb146e6c..b57391a806cf6 100644
--- a/docs/getting-started/tutorial.md
+++ b/docs/getting-started/tutorial.md
@@ -781,7 +781,7 @@ This block validation error occurs because the `save()` function returns block c
 
 You will see more of these errors as you update the `save()` function in subsequent steps. Just click "Attempt Block Recovery" and update the page.
 
-After preforming block recovery, open the Code editor and you will see the markup now looks like this.
+After performing block recovery, open the Code editor and you will see the markup now looks like this.
 
 ```html
 <!-- wp:create-block/copyright-date-block {"showStartingYear":true,"startingYear":"2017"} -->
diff --git a/docs/how-to-guides/block-tutorial/extending-the-query-loop-block.md b/docs/how-to-guides/block-tutorial/extending-the-query-loop-block.md
index d3628d991f872..bf48c5db4e9bb 100644
--- a/docs/how-to-guides/block-tutorial/extending-the-query-loop-block.md
+++ b/docs/how-to-guides/block-tutorial/extending-the-query-loop-block.md
@@ -178,7 +178,7 @@ As of Gutenberg version 14.2, the following controls are available:
 -   `sticky` - Shows a dropdown to select how to handle sticky posts.
 -   `taxQuery` - Shows available taxonomies filters for the currently selected post type.
 -   `author` - Shows an input field to filter the query by author.
--   `search` - Shows an input filed to filter the query by keywords.
+-   `search` - Shows an input field to filter the query by keywords.
 
 In our case, the property would look like this:
 
diff --git a/docs/how-to-guides/curating-the-editor-experience/filters-and-hooks.md b/docs/how-to-guides/curating-the-editor-experience/filters-and-hooks.md
index fbc4de1258639..b28fdf7d9e5db 100644
--- a/docs/how-to-guides/curating-the-editor-experience/filters-and-hooks.md
+++ b/docs/how-to-guides/curating-the-editor-experience/filters-and-hooks.md
@@ -2,6 +2,39 @@
 
 The Editor provides numerous filters and hooks that allow you to modify the editing experience. Here are a few.
 
+## Editor settings
+
+One of the most common ways to modify the Editor is through the [`block_editor_settings_all`](https://developer.wordpress.org/reference/hooks/block_editor_settings_all/) PHP filter, which is applied before settings are sent to the initialized Editor. 
+
+The `block_editor_settings_all` hook passes two parameters to the callback function:
+
+- `$settings` – An array of [configurable settings](https://developer.wordpress.org/block-editor/reference-guides/filters/editor-filters/#editor-settings) for the Editor.
+- `$context` – An instance of [`WP_Block_Editor_Context`](https://developer.wordpress.org/reference/classes/wp_block_editor_context/), an object that contains information about the current Editor.
+
+The following example disables the Code Editor for users who cannot activate plugins (Administrators). Add this to a plugin or your theme's `functions.php` file to test it.
+
+```php
+add_filter( 'block_editor_settings_all', 'example_restrict_code_editor' );
+
+function example_restrict_code_editor( $settings ) {
+	$can_active_plugins = current_user_can( 'activate_plugins' );
+
+	// Disable the Code Editor for users that cannot activate plugins (Administrators).
+	if ( ! $can_active_plugins ) {
+		$settings[ 'codeEditingEnabled' ] = false;
+	}
+
+	return $settings;
+}
+```
+
+For more examples, check out the [Editor Hooks](https://developer.wordpress.org/block-editor/reference-guides/filters/editor-filters/) documentation that includes the following use cases: 
+
+- [Set a default image size](https://developer.wordpress.org/block-editor/reference-guides/filters/editor-filters/#set-a-default-image-size)
+- [Disable Openverse](https://developer.wordpress.org/block-editor/reference-guides/filters/editor-filters/#disable-openverse)
+- [Disable the Font Library](https://developer.wordpress.org/block-editor/reference-guides/filters/editor-filters/#disable-the-font-library)
+- [Disable block inspector tabs](https://developer.wordpress.org/block-editor/reference-guides/filters/editor-filters/#disable-block-inspector-tabs)
+
 ## Server-side theme.json filters
 
 The theme.json file is a great way to control interface options, but it only allows for global or block-level modifications, which can be limiting in some scenarios.
@@ -103,6 +136,43 @@ addFilter(
 );
 ```
 
+## Block Filters
+
+Beyond curating the Editor itself, there are many ways that you can modify individual blocks. Perhaps you want to disable particular block supports like background color or define which settings should be displayed by default on specific blocks.
+
+One of the most commonly used filters is [`block_type_metadata`](https://developer.wordpress.org/reference/hooks/block_type_metadata/). It allows you to filter the raw metadata loaded from a block's `block.json` file when a block type is registered on the server with PHP. 
+
+The filter takes one parameter:
+
+- `$metadata` (`array`) – metadata loaded from `block.json` for registering a block type.
+
+The `$metadata` array contains everything you might want to know about a block, from its description and [attributes](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) to block [supports](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/). 
+
+In the following example, background color and gradient support are disabled for Heading blocks.
+
+```php
+function example_disable_heading_background_color_and_gradients( $metadata ) {
+
+    // Only apply the filter to Heading blocks.
+    if ( ! isset( $metadata['name'] ) || 'core/heading' !== $metadata['name'] ) {
+        return $metadata;
+    }
+
+    // Check if 'supports' key exists.
+    if ( isset( $metadata['supports'] ) && isset( $metadata['supports']['color'] ) ) {
+
+        // Remove Background color and Gradients support.
+        $metadata['supports']['color']['background'] = false;
+        $metadata['supports']['color']['gradients']  = false;
+    }
+
+    return $metadata;
+}
+add_filter( 'block_type_metadata', 'example_disable_heading_background_color_and_gradients' );
+```
+
+You can learn more about the available block filters in the [Block Filters](https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/) documentation.
+
 ## Additional resources
 
 - [How to modify theme.json data using server-side filters](https://developer.wordpress.org/news/2023/07/05/how-to-modify-theme-json-data-using-server-side-filters/) (WordPress Developer Blog)
diff --git a/docs/how-to-guides/feature-flags.md b/docs/how-to-guides/feature-flags.md
index 5855f93f8ed9f..11c5ae881337d 100644
--- a/docs/how-to-guides/feature-flags.md
+++ b/docs/how-to-guides/feature-flags.md
@@ -2,9 +2,9 @@
 
 'Feature flags' are variables that allow you to prevent specific code in the Gutenberg project from being shipped to WordPress core, and to run certain experimental features only in the plugin.
 
-## Introducing `process.env.IS_GUTENBERG_PLUGIN`
+## Introducing `globalThis.IS_GUTENBERG_PLUGIN`
 
-The `process.env.IS_GUTENBERG_PLUGIN` is an environment variable whose value 'flags' whether code is running within the Gutenberg plugin. 
+The `globalThis.IS_GUTENBERG_PLUGIN` is an environment variable whose value 'flags' whether code is running within the Gutenberg plugin.
 
 When the codebase is built for the plugin, this variable will be set to `true`. When building for WordPress core, it will be set to `false` or `undefined`.
 
@@ -19,8 +19,9 @@ function myPluginOnlyFeature() {
 	// implementation
 }
 
-export const pluginOnlyFeature =
-	process.env.IS_GUTENBERG_PLUGIN ? myPluginOnlyFeature : undefined;
+export const pluginOnlyFeature = globalThis.IS_GUTENBERG_PLUGIN
+	? myPluginOnlyFeature
+	: undefined;
 ```
 
 In the above example, the `pluginOnlyFeature` export will be `undefined` in non-plugin environments such as WordPress core.
@@ -32,37 +33,39 @@ If you're attempting to import and call a plugin-only feature, be sure to wrap t
 ```js
 import { pluginOnlyFeature } from '@wordpress/foo';
 
-if ( process.env.IS_GUTENBERG_PLUGIN ) {
+if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 	pluginOnlyFeature();
 }
 ```
 
 ## How it works
 
-During the webpack build, instances of `process.env.IS_GUTENBERG_PLUGIN` will be replaced using webpack's [define plugin](https://webpack.js.org/plugins/define-plugin/).
+During the webpack build, instances of `globalThis.IS_GUTENBERG_PLUGIN` will be replaced using webpack's [define plugin](https://webpack.js.org/plugins/define-plugin/).
 
 For example, in the following code –
 
 ```js
-if ( process.env.IS_GUTENBERG_PLUGIN ) {
+if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 	pluginOnlyFeature();
 }
 ```
 
-– the variable `process.env.IS_GUTENBERG_PLUGIN` will be replaced with the boolean `true` during the plugin-only build:
+– the variable `globalThis.IS_GUTENBERG_PLUGIN` will be replaced with the boolean `true` during the plugin-only build:
 
 ```js
-if ( true ) { // Wepack has replaced `process.env.IS_GUTENBERG_PLUGIN` with `true`
+if ( true ) {
+	// Wepack has replaced `globalThis.IS_GUTENBERG_PLUGIN` with `true`
 	pluginOnlyFeature();
 }
 ```
 
 This ensures that code within the body of the `if` statement will always be executed.
 
-In WordPress core, the `process.env.IS_GUTENBERG_PLUGIN` variable is replaced with `undefined`. The built code looks like this:
+In WordPress core, the `globalThis.IS_GUTENBERG_PLUGIN` variable is replaced with `undefined`. The built code looks like this:
 
 ```js
-if ( undefined ) { // Wepack has replaced `process.env.IS_GUTENBERG_PLUGIN` with `undefined`
+if ( undefined ) {
+	// Webpack has replaced `globalThis.IS_GUTENBERG_PLUGIN` with `undefined`
 	pluginOnlyFeature();
 }
 ```
@@ -99,6 +102,6 @@ In this case, the minification process will remove the entire `if` statement inc
 
 ## Frequently asked questions
 
-### Why shouldn't I assign the result of an expression involving `IS_GUTENBERG_PLUGIN` to a variable, e.g. `const isMyFeatureActive = process.env.IS_GUTENBERG_PLUGIN === 2`?
+### Why shouldn't I assign the result of an expression involving `IS_GUTENBERG_PLUGIN` to a variable, e.g. `const isMyFeatureActive = ! Object.is( undefined, globalThis.IS_GUTENBERG_PLUGIN )`?
 
 Introducing complexity may prevent webpack's minifier from identifying and therefore eliminating dead code. Therefore it is recommended to use the examples in this document to ensure your feature flag functions as intended. For further details, see the [Dead Code Elimination](#dead-code-elimination) section.
diff --git a/docs/how-to-guides/themes/global-settings-and-styles.md b/docs/how-to-guides/themes/global-settings-and-styles.md
index 730595df4d4be..f71bd67bfaf2e 100644
--- a/docs/how-to-guides/themes/global-settings-and-styles.md
+++ b/docs/how-to-guides/themes/global-settings-and-styles.md
@@ -310,20 +310,21 @@ There's one special setting property, `appearanceTools`, which is a boolean and
 
 To retain backward compatibility, the existing `add_theme_support` declarations that configure the block editor are retrofit in the proper categories for the top-level section. For example, if a theme uses `add_theme_support('disable-custom-colors')`, it'll be the same as setting `settings.color.custom` to `false`. If the `theme.json` contains any settings, these will take precedence over the values declared via `add_theme_support`. This is the complete list of equivalences:
 
-| add_theme_support           | theme.json setting                                        |
-| --------------------------- | --------------------------------------------------------- |
-| `custom-line-height`        | Set `typography.lineHeight` to `true`.              |
-| `custom-spacing`            | Set `spacing.padding` to `true`.                    |
-| `custom-units`              | Provide the list of units via `spacing.units`.            |
-| `disable-custom-colors`     | Set `color.custom` to `false`.                            |
-| `disable-custom-font-sizes` | Set `typography.customFontSize` to `false`.               |
-| `disable-custom-gradients`  | Set `color.customGradient` to `false`.                    |
-| `editor-color-palette`      | Provide the list of colors via `color.palette`.           |
-| `editor-font-sizes`         | Provide the list of font size via `typography.fontSizes`. |
-| `editor-gradient-presets`   | Provide the list of gradients via `color.gradients`.      |
-| `appearance-tools`          | Set `appearanceTools` to `true`.                          |
-| `border`                    | Set `border: color, radius, style, width` to `true`.      |
-| `link-color `               | Set `color.link` to `true`.                               |
+| add_theme_support           | theme.json setting                                            |
+| --------------------------- | ------------------------------------------------------------- |
+| `custom-line-height`        | Set `typography.lineHeight` to `true`.                        |
+| `custom-spacing`            | Set `spacing.padding` to `true`.                              |
+| `custom-units`              | Provide the list of units via `spacing.units`.                |
+| `disable-custom-colors`     | Set `color.custom` to `false`.                                |
+| `disable-custom-font-sizes` | Set `typography.customFontSize` to `false`.                   |
+| `disable-custom-gradients`  | Set `color.customGradient` to `false`.                        |
+| `editor-color-palette`      | Provide the list of colors via `color.palette`.               |
+| `editor-font-sizes`         | Provide the list of font size via `typography.fontSizes`.     |
+| `editor-gradient-presets`   | Provide the list of gradients via `color.gradients`.          |
+| `editor-spacing-sizes`      | Provide the list of spacing sizes via `spacing.spacingSizes`. |
+| `appearance-tools`          | Set `appearanceTools` to `true`.                              |
+| `border`                    | Set `border: color, radius, style, width` to `true`.          |
+| `link-color `               | Set `color.link` to `true`.                                   |
 
 #### Presets
 
@@ -336,16 +337,7 @@ The following presets can be defined via `theme.json`:
 - `color.palette`:
     - generates 3 classes per preset value: color, background-color, and border-color.
     - generates a single custom property per preset value.
-- `spacing.spacingScale`: used to generate an array of spacing preset sizes for use with padding, margin, and gap settings.
-    - `operator`: specifies how to calculate the steps with either `*` for multiplier, or `+` for sum.
-    - `increment`: the amount to increment each step by. Core by default uses a 'perfect 5th' multiplier of `1.5`.
-    - `steps`: the number of steps to generate in the spacing scale. The default is 7. To prevent the generation of the spacing presets, and to disable the related UI, this can be set to `0`.
-    - `mediumStep`: the steps in the scale are generated descending and ascending from a medium step, so this should be the size value of the medium space, without the unit. The default medium step is `1.5rem` so the mediumStep value is `1.5`.
-    - `unit`: the unit the scale uses, eg. `px, rem, em, %`. The default is `rem`.
-- `spacing.spacingSizes`: themes can choose to include a static `spacing.spacingSizes` array of spacing preset sizes if they have a sequence of sizes that can't be generated via an increment or multiplier.
-    - `name`: a human readable name for the size, eg. `Small, Medium, Large`.
-    - `slug`: the machine readable name. In order to provide the best cross site/theme compatibility the slugs should be in the format, "10","20","30","40","50","60", with "50" representing the `Medium` size value.
-    - `size`: the size, including the unit, eg. `1.5rem`. It is possible to include fluid values like `clamp(2rem, 10vw, 20rem)`.
+- `spacing.spacingSizes`/`spacing.spacingScale`: generates a single custom property per preset value.
 - `typography.fontSizes`: generates a single class and custom property per preset value.
 - `typography.fontFamilies`: generates a single custom property per preset value.
 
@@ -1337,4 +1329,4 @@ The value defined for the root `styles.spacing.blockGap` style is also output as
 
 ### Why does it take so long to update the styles in the browser?
 
-When you are actively developing with theme.json you may notice it takes 30+ seconds for your changes to show up in the browser, this is because `theme.json` is cached. To remove this caching issue, set either [`WP_DEBUG`](https://wordpress.org/documentation/article/debugging-in-wordpress/#wp_debug) or [`SCRIPT_DEBUG`](https://wordpress.org/documentation/article/debugging-in-wordpress/#script_debug) to 'true' in your [`wp-config.php`](https://wordpress.org/documentation/article/editing-wp-config-php/). This tells WordPress to skip the cache and always use fresh data.
+When you are actively developing with theme.json you may notice it takes 30+ seconds for your changes to show up in the browser, this is because `theme.json` is cached. To remove this caching issue, set either [`WP_DEBUG`](https://developer.wordpress.org/advanced-administration/debug/debug-wordpress/#wp_debug) or [`SCRIPT_DEBUG`](https://developer.wordpress.org/advanced-administration/debug/debug-wordpress/#script_debug) to 'true' in your [`wp-config.php`](https://developer.wordpress.org/advanced-administration/wordpress/wp-config/). This tells WordPress to skip the cache and always use fresh data.
diff --git a/docs/manifest.json b/docs/manifest.json
index 05f1f36ce7ca6..ac269e4784633 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -509,6 +509,18 @@
 		"markdown_source": "../docs/reference-guides/interactivity-api/api-reference.md",
 		"parent": "interactivity-api"
 	},
+	{
+		"title": "About the Interactivity API",
+		"slug": "iapi-about",
+		"markdown_source": "../docs/reference-guides/interactivity-api/iapi-about.md",
+		"parent": "interactivity-api"
+	},
+	{
+		"title": "Frequently Asked Questions",
+		"slug": "iapi-faq",
+		"markdown_source": "../docs/reference-guides/interactivity-api/iapi-faq.md",
+		"parent": "interactivity-api"
+	},
 	{
 		"title": "SlotFills Reference",
 		"slug": "slotfills",
@@ -1109,6 +1121,12 @@
 		"markdown_source": "../packages/components/src/popover/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "ProgressBar",
+		"slug": "progress-bar",
+		"markdown_source": "../packages/components/src/progress-bar/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "QueryControls",
 		"slug": "query-controls",
diff --git a/docs/reference-guides/block-api/block-styles.md b/docs/reference-guides/block-api/block-styles.md
index 90b6c06d18f59..b47b1a76a71f6 100644
--- a/docs/reference-guides/block-api/block-styles.md
+++ b/docs/reference-guides/block-api/block-styles.md
@@ -1,6 +1,6 @@
 # Styles
 
-Block Styles allow alternative styles to be applied to existing blocks. They work by adding a className to the block's wrapper. This className can be used to provide an alternative styling for the block if the block style is selected. See the [Getting Started with JavaScript tutorial](/docs/how-to-guides/javascript/) for a full example.
+Block Styles allow alternative styles to be applied to existing blocks. They work by adding a className to the block's wrapper. This className can be used to provide an alternative styling for the block if the block style is selected. See the [Use styles and stylesheets](/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md) for a full example on how to apply styles to a block.
 
 _Example:_
 
diff --git a/docs/reference-guides/block-api/block-variations.md b/docs/reference-guides/block-api/block-variations.md
index 0440858810b65..ffd3cc49adda8 100644
--- a/docs/reference-guides/block-api/block-variations.md
+++ b/docs/reference-guides/block-api/block-variations.md
@@ -129,9 +129,9 @@ While the `isActive` property is optional, it's recommended. This API is used by
 
 If `isActive` is not set, the Editor cannot distinguish between an instance of the original block and your variation, so the original block information will be displayed.
 
-The property can be set to either a function or an array of strings (`string[]`).
+The property can be set to either an array of strings (`string[]`), or a function. It is recommended to use the string array version whenever possible.
 
-The function version of this property accepts a block instance's `blockAttributes` as the first argument, and the `variationAttributes` declared for a variation as the second argument. These arguments can be used to determine if a variation is active by comparing them and returning a `true` or `false` (indicating whether this variation is inactive for this block instance).
+The `string[]` version is used to declare which of the block instance's attributes should be compared to the given variation's. Each attribute will be checked and the variation will be active if all of them match.
 
 As an example, in the core Embed block, the `providerNameSlug` attribute is used to determine the embed provider (e.g. 'youtube' or 'twitter'). The variations may be declared like this:
 
@@ -162,22 +162,32 @@ const variations = [
 ]
 ```
 
- The `isActive` function can compare the block instance value for `providerNameSlug` to the value declared in the variation's declaration (the values in the code snippet above) to determine which embed variation is active:
+The `isActive` property would then look like this:
 
 ```js
-isActive: ( blockAttributes, variationAttributes ) =>
-	blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,
+isActive: [ 'providerNameSlug' ]
 ```
 
-The `string[]` version is used to declare which attributes should be compared as a shorthand. Each attribute will be checked and the variation will be active if all of them match. Using the same example for the embed block, the string version would look like this:
+This will cause the block instance value for `providerNameSlug` to be compared to the value declared in the variation's declaration (the values in the code snippet above) to determine which embed variation is active.
+
+Nested object paths are also supported. For example, consider a block variation that has a `query` object as an attribute. It is possible to determine if the variation is active solely based on that object's `postType` property (while ignoring all its other properties):
 
 ```js
-isActive: [ 'providerNameSlug' ]
+isActive: [ 'query.postType' ]
+```
+
+The function version of this property accepts a block instance's `blockAttributes` as the first argument, and the `variationAttributes` declared for a variation as the second argument. These arguments can be used to determine if a variation is active by comparing them and returning a `true` or `false` (indicating whether this variation is inactive for this block instance).
+
+Using the same example for the embed block, the function version would look like this:
+
+```js
+isActive: ( blockAttributes, variationAttributes ) =>
+	blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,
 ```
 
-### Caveats to using `isActive`
+### Specificity of `isActive` matches
 
-The `isActive` property can return false positives if multiple variations exist for a specific block and the `isActive` checks are not specific enough. To demonstrate this, consider the following example:
+If there are multiple variations whose `isActive` check matches a given block instance, and all of them are string arrays, then the variation with the highest _specificity_ will be chosen. Consider the following example:
 
 ```js
 wp.blocks.registerBlockVariation(
@@ -206,6 +216,6 @@ wp.blocks.registerBlockVariation(
 );
 ```
 
-The `isActive` check on both variations tests the `textColor`, but each variations uses `vivid-red`. Since the `paragraph-red` variation is registered first, once the `paragraph-red-grey` variation is inserted into the Editor, it will have the title `Red Paragraph` instead of `Red/Grey Paragraph`. As soon as the Editor finds a match, it stops checking.
+If a block instance has attributes `textColor: vivid-red` and `backgroundColor: cyan-bluish-gray`, both variations' `isActive` criterion will match that block instance. In this case, the more _specific_ match will be determined to be the active variation, where specificity is calculated as the length of each `isActive` array. This means that the `Red/Grey Paragraph` will be shown as the active variation.
 
-There have been [discussions](https://github.com/WordPress/gutenberg/issues/41303#issuecomment-1526193087) around how the API can be improved, but as of WordPress 6.3, this remains an issue to watch out for.
+Note that specificity cannot be determined for a matching variation if its `isActive` property is a function rather than a `string[]`. In this case, the first matching variation will be determined to be the active variation. For this reason, it is generally recommended to use a `string[]` rather than a `function` for the `isActive` property.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 3a0a88048e982..7b7dbe9291567 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -245,7 +245,7 @@ Add an image or video with a text overlay. ([Source](https://github.com/WordPres
 
 -	**Name:** core/cover
 -	**Category:** media
--	**Supports:** align, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), dimensions (aspectRatio), interactivity (clientNavigation), layout (~~allowJustification~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), dimensions (aspectRatio), interactivity (clientNavigation), layout (~~allowJustification~~), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, isUserOverlayColor, minHeight, minHeightUnit, overlayColor, tagName, templateLock, url, useFeaturedImage
 
 ## Details
@@ -415,7 +415,7 @@ Create a bulleted or numbered list. ([Source](https://github.com/WordPress/guten
 -	**Name:** core/list
 -	**Category:** text
 -	**Allowed Blocks:** core/list-item
--	**Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~, ~~html~~
+-	**Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** ordered, placeholder, reversed, start, type, values
 
 ## List item
diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md
index 486fcddfe04ac..f687eb79732b5 100644
--- a/docs/reference-guides/data/data-core-block-editor.md
+++ b/docs/reference-guides/data/data-core-block-editor.md
@@ -1439,7 +1439,7 @@ wp.data.dispatch( 'core/block-editor' ).registerInserterMediaCategory( {
 			per_page: 'page_size',
 			search: 'q',
 		};
-		const url = new URL( 'https://api.openverse.engineering/v1/images/' );
+		const url = new URL( 'https://api.openverse.org/v1/images/' );
 		Object.entries( finalQuery ).forEach( ( [ key, value ] ) => {
 			const queryKey = mapFromInserterMediaRequest[ key ] || key;
 			url.searchParams.set( queryKey, value );
@@ -1841,11 +1841,11 @@ _Returns_
 
 ### updateBlockListSettings
 
-Action that changes the nested settings of a given block.
+Action that changes the nested settings of the given block(s).
 
 _Parameters_
 
--   _clientId_ `string`: Client ID of the block whose nested setting are being received.
+-   _clientId_ `string | SettingsByClientId`: Client ID of the block whose nested setting are being received, or object of settings by client ID.
 -   _settings_ `Object`: Object with the new settings for the nested block.
 
 _Returns_
diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md
index 1f050ca98576a..b22fd2238f303 100644
--- a/docs/reference-guides/data/data-core-edit-site.md
+++ b/docs/reference-guides/data/data-core-edit-site.md
@@ -58,7 +58,7 @@ _Parameters_
 
 _Returns_
 
--   `string?`: Post ID.
+-   `?string`: Post ID.
 
 ### getEditedPostType
 
@@ -70,7 +70,7 @@ _Parameters_
 
 _Returns_
 
--   `TemplateType?`: Template type.
+-   `?TemplateType`: Template type.
 
 ### getEditorMode
 
diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md
index a7b5d37da8464..4fea2c51fa54f 100644
--- a/docs/reference-guides/data/data-core-editor.md
+++ b/docs/reference-guides/data/data-core-editor.md
@@ -485,7 +485,7 @@ _Returns_
 
 ### getPermalinkParts
 
-Returns the permalink for a post, split into it's three parts: the prefix, the postName, and the suffix.
+Returns the permalink for a post, split into its three parts: the prefix, the postName, and the suffix.
 
 _Parameters_
 
diff --git a/docs/reference-guides/filters/block-filters.md b/docs/reference-guides/filters/block-filters.md
index 7fa2024976040..ee100431eb512 100644
--- a/docs/reference-guides/filters/block-filters.md
+++ b/docs/reference-guides/filters/block-filters.md
@@ -1,61 +1,76 @@
 # Block Filters
 
-To modify the behavior of existing blocks, WordPress exposes several APIs.
+WordPress exposes several APIs that allow you to modify the behavior of existing blocks.
 
 ## Registration
 
-The following filters are available to extend the settings for blocks during their registration.
+The following filters are available to extend block settings during their registration.
 
 ### `block_type_metadata`
 
-Filters the raw metadata loaded from the `block.json` file when registering a block type on the server with PHP. It allows applying modifications before the metadata gets processed.
+Filters the raw metadata loaded from the `block.json` file when registering a block type on the server with PHP. It allows modifications to be applied before the metadata gets processed.
 
-The filter takes one param:
+The filter takes one parameter:
 
--   `$metadata` (`array`) – metadata loaded from `block.json` for registering a block type.
+- `$metadata` (`array`) – metadata loaded from `block.json` for registering a block type.
 
-_Example_:
+The following example sets the `apiVersion` of all blocks to `2`.
 
 ```php
-<?php
-
-function wpdocs_filter_metadata_registration( $metadata ) {
-	$metadata['apiVersion'] = 1;
+function example_filter_metadata_registration( $metadata ) {
+	$metadata['apiVersion'] = 2;
 	return $metadata;
 };
-add_filter( 'block_type_metadata', 'wpdocs_filter_metadata_registration' );
+add_filter( 'block_type_metadata', 'example_filter_metadata_registration' );
+```
+
+Here's a more robust example that disables background color and gradient support for Heading blocks. The `block_type_metadata` filter is excellent for [curating the Editor experience](https://developer.wordpress.org/block-editor/how-to-guides/curating-the-editor-experience/). 
 
-register_block_type( __DIR__ );
+```php
+function example_disable_heading_background_color_and_gradients( $metadata ) {
+    
+    // Only apply the filter to Heading blocks.
+    if ( ! isset( $metadata['name'] ) || 'core/heading' !== $metadata['name'] ) {
+        return $metadata;
+    }
+
+    // Check if 'supports' key exists.
+    if ( isset( $metadata['supports'] ) && isset( $metadata['supports']['color'] ) ) {
+        
+        // Remove Background color and Gradients support.
+        $metadata['supports']['color']['background'] = false;
+        $metadata['supports']['color']['gradients']  = false;
+    }
+
+    return $metadata;
+}
+add_filter( 'block_type_metadata', 'example_disable_heading_background_color_and_gradients' );
 ```
 
 ### `block_type_metadata_settings`
 
 Filters the settings determined from the processed block type metadata. It makes it possible to apply custom modifications using the block metadata that isn’t handled by default.
 
-The filter takes two params:
+The filter takes two parameters:
 
 -   `$settings` (`array`) – Array of determined settings for registering a block type.
 -   `$metadata` (`array`) – Metadata loaded from the `block.json` file.
 
-_Example:_
+The following example increases the `apiVersion` for all blocks by `1`.
 
 ```php
-function wpdocs_filter_metadata_registration( $settings, $metadata ) {
+function example_filter_metadata_registration( $settings, $metadata ) {
 	$settings['api_version'] = $metadata['apiVersion'] + 1;
 	return $settings;
 };
-add_filter( 'block_type_metadata_settings', 'wpdocs_filter_metadata_registration', 10, 2 );
-
-register_block_type( __DIR__ );
+add_filter( 'block_type_metadata_settings', 'example_filter_metadata_registration', 10, 2 );
 ```
 
 ### `blocks.registerBlockType`
 
 Used to filter the block settings when registering the block on the client with JavaScript. It receives the block settings, the name of the registered block, and either null or the deprecated block settings (when applied to a registered deprecation) as arguments. This filter is also applied to each of a block's deprecated settings.
 
-_Example:_
-
-Ensure that List blocks are saved with the canonical generated class name (`wp-block-list`):
+The following example ensures that List blocks are saved with the canonical generated class name (`wp-block-list`):
 
 ```js
 function addListBlockClassName( settings, name ) {
@@ -87,11 +102,9 @@ The following filters are available to change the behavior of blocks while editi
 
 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.
 
-The filter's callback receives an element, a block type definition object and the block attributes as arguments. It should return an element.
+The filter's callback receives an element, a block-type definition object, and the block attributes as arguments. It should return an element.
 
-_Example:_
-
-Wraps a cover block into an outer container.
+The following example wraps a Cover block in an outer container div.
 
 ```js
 function wrapCoverBlockInContainer( element, blockType, attributes ) {
@@ -120,11 +133,9 @@ wp.hooks.addFilter(
 
 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.
 
-The filter receives the current `save` element's props, a block type and the block attributes as arguments. It should return a props object.
-
-_Example:_
+The filter receives the current `save` element's props, a block type, and the block attributes as arguments. It should return a props object.
 
-Adding a background by default to all blocks.
+The following example adds a red background by default to all blocks.
 
 ```js
 function addBackgroundColorStyle( props ) {
@@ -206,11 +217,11 @@ wp.hooks.addFilter(
 ```
 
 
-Note that as this hook is run for _all blocks_, consuming it has potential for performance regressions particularly around block selection metrics.
+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, if you are adding components that only need to render when the block is _selected_, then you can use the block's "selected" state (`props.isSelected`) to conditionalize your rendering.
+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.
 
 ```js
 const withMyPluginControls = createHigherOrderComponent( ( BlockEdit ) => {
@@ -233,7 +244,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.
 
-_Example:_
+The following example adds a unique class name.
 
 ```js
 const { createHigherOrderComponent } = wp.compose;
@@ -259,10 +270,7 @@ wp.hooks.addFilter(
 );
 ```
 
-Adding new properties to the block's wrapper component can be achieved by adding them to the `wrapperProps` property of the returned component.
-
-_Example:_
-
+You can add new properties to the block's wrapper component using the `wrapperProps` property of the returned component as shown in the following example.
 
 ```js
 const { createHigherOrderComponent } = wp.compose;
@@ -275,6 +283,7 @@ const withMyWrapperProp = createHigherOrderComponent( ( BlockListBlock ) => {
 		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
 	};
 }, 'withMyWrapperProp' );
+
 wp.hooks.addFilter(
 	'editor.BlockListBlock',
 	'my-plugin/with-my-wrapper-prop',
@@ -282,12 +291,11 @@ wp.hooks.addFilter(
 );
 ```
 
-
 ### `editor.postContentBlockTypes`
 
-Used to modify the list of blocks that should be enabled even when used inside a locked template. Any block that saves data to a post should be added here. Examples of this are the post featured image block. Which often gets used in templates but should still allow selecting the image even when the template is locked.
+Used to modify the list of blocks that should be enabled even when used inside a locked template. Any block that saves data to a post should be added here. An example of this is the Post Featured Image block. Often used in templates, this block should still allow selecting the image even when the template is locked.
 
-_Example:_
+The following example enables the fictitious block `namespace/example`.
 
 ```js
 const addExampleBlockToPostContentBlockTypes = ( blockTypes ) => {
@@ -305,8 +313,9 @@ wp.hooks.addFilter(
 
 ### Using a deny list
 
-Adding blocks is easy enough, removing them is as easy. Plugin or theme authors have the possibility to "unregister" blocks.
+Adding blocks is easy enough, and removing them is as easy. Plugin or theme authors can "unregister" blocks using a deny list in JavaScript.
 
+Place the following code in a `my-plugin.js` file.
 
 ```js
 // my-plugin.js
@@ -318,8 +327,7 @@ domReady( function () {
 } );
 ```
 
-
-and load this script in the Editor
+Then, load this script in the Editor using the following function.
 
 ```php
 <?php
@@ -335,7 +343,9 @@ function my_plugin_deny_list_blocks() {
 add_action( 'enqueue_block_editor_assets', 'my_plugin_deny_list_blocks' );
 ```
 
-**Important:** When unregistering a block, there can be a [race condition](https://en.wikipedia.org/wiki/Race_condition) on which code runs first: registering the block, or unregistering the block. You want your unregister code to run last. The way to do that is specify the component that is registering the block as a dependency, in this case `wp-edit-post`. Additionally, using `wp.domReady()` ensures the unregister code runs once the dom is loaded.
+<div class="callout callout-warning">
+	When unregistering a block, there can be a <a href="https://en.wikipedia.org/wiki/Race_condition">race condition</a> on which code runs first: registering the block or unregistering the block. You want your unregister code to run last. To do this, you must specify the component that is registering the block as a dependency, in this case, <code>wp-edit-post</code>. Additionally, using <code>wp.domReady()</code> ensures the unregister code runs once the dom is loaded.
+</div>
 
 ### Using an allow list
 
@@ -362,37 +372,37 @@ wp.blocks.getBlockTypes().forEach( function ( blockType ) {
 
 ### `allowed_block_types_all`
 
-_**Note:** Before WordPress 5.8 known as `allowed_block_types`. In the case when you want to support older versions of WordPress you might need a way to detect which filter should be used – the deprecated one vs the new one. The recommended way to proceed is to check if the `WP_Block_Editor_Context` class exists._
+<div class="callout callout-warning">
+	Before WordPress 5.8, this hook was known as <code>allowed_block_types</code>, which is now deprecated. If you need to support older versions of WordPress, you might need a way to detect which filter should be used. You can check if <code>allowed_block_types</code> is safe to use by seeing if the <code>WP_Block_Editor_Context</code> class exists, which was introduced in 5.8.
+</div>
 
-On the server, you can filter the list of blocks shown in the inserter using the `allowed_block_types_all` filter. You can return either true (all block types supported), false (no block types supported), or an array of block type names to allow. You can also use the second provided param `$editor_context` to filter block types based on its content.
+On the server, you can filter the list of blocks shown in the inserter using the `allowed_block_types_all` filter. You can return either true (all block types supported), false (no block types supported), or an array of block type names to allow. You can also use the second provided parameter `$editor_context` to filter block types based on their content.
 
 ```php
 <?php
 // my-plugin.php
-
-function wpdocs_filter_allowed_block_types_when_post_provided( $allowed_block_types, $editor_context ) {
+function example_filter_allowed_block_types_when_post_provided( $allowed_block_types, $editor_context ) {
 	if ( ! empty( $editor_context->post ) ) {
 		return array( 'core/paragraph', 'core/heading' );
 	}
 	return $allowed_block_types;
 }
-
-add_filter( 'allowed_block_types_all', 'wpdocs_filter_allowed_block_types_when_post_provided', 10, 2 );
+add_filter( 'allowed_block_types_all', 'example_filter_allowed_block_types_when_post_provided', 10, 2 );
 ```
 
 ## Managing block categories
 
 ### `block_categories_all`
 
-_**Note:** Before WordPress 5.8 known as `block_categories`. In the case when you want to support older versions of WordPress you might need a way to detect which filter should be used – the deprecated one vs the new one. The recommended way to proceed is to check if the `WP_Block_Editor_Context` class exists._
+<div class="callout callout-warning">
+	Before WordPress 5.8, this hook was known as <code>block_categories</code>, which is now deprecated. If you need to support older versions of WordPress, you might need a way to detect which filter should be used. You can check if <code>block_categories</code> is safe to use by seeing if the <code>WP_Block_Editor_Context</code> class exists, which was introduced in 5.8.
+</div>
 
-It is possible to filter the list of default block categories using the `block_categories_all` filter. You can do it on the server by implementing a function which returns a list of categories. It is going to be used during blocks registration and to group blocks in the inserter. You can also use the second provided param `$editor_context` to filter the based on its content.
+It is possible to filter the list of default block categories using the `block_categories_all` filter. You can do it on the server by implementing a function which returns a list of categories. It is going to be used during block registration and to group blocks in the inserter. You can also use the second provided parameter `$editor_context` to filter the based on its content.
 
 ```php
-<?php
 // my-plugin.php
-
-function wpdocs_filter_block_categories_when_post_provided( $block_categories, $editor_context ) {
+function example_filter_block_categories_when_post_provided( $block_categories, $editor_context ) {
 	if ( ! empty( $editor_context->post ) ) {
 		array_push(
 			$block_categories,
@@ -405,8 +415,7 @@ function wpdocs_filter_block_categories_when_post_provided( $block_categories, $
 	}
 	return $block_categories;
 }
-
-add_filter( 'block_categories_all', 'wpdocs_filter_block_categories_when_post_provided', 10, 2 );
+add_filter( 'block_categories_all', 'example_filter_block_categories_when_post_provided', 10, 2 );
 ```
 
 ### `wp.blocks.updateCategory`
diff --git a/docs/reference-guides/filters/editor-filters.md b/docs/reference-guides/filters/editor-filters.md
index 943e161a1df49..a27a989dbc788 100644
--- a/docs/reference-guides/filters/editor-filters.md
+++ b/docs/reference-guides/filters/editor-filters.md
@@ -1,23 +1,166 @@
 # Editor Hooks
 
-To modify the behavior of the editor experience, WordPress exposes several APIs.
+WordPress exposes several APIs that allow you to modify the editor experience.
+
+## Editor settings
+
+One of the most common ways to modify the Editor is through the [`block_editor_settings_all`](https://developer.wordpress.org/reference/hooks/block_editor_settings_all/) PHP filter, which is applied before settings are sent to the initialized Editor. This filter allows plugin and theme authors extensive control over how the Editor behaves.
+
+<div class="callout callout-warning">
+	Before WordPress 5.8, this hook was known as <code>block_editor_settings</code>, which is now deprecated. If you need to support older versions of WordPress, you might need a way to detect which filter should be used. You can check if <code>block_editor_settings</code> is safe to use by seeing if the <code>WP_Block_Editor_Context</code> class exists, which was introduced in 5.8.
+</div>
+
+The `block_editor_settings_all` hook passes two parameters to the callback function:
+
+- `$settings` – An array of configurable settings for the Editor.
+- `$context` – An instance of [`WP_Block_Editor_Context`](https://developer.wordpress.org/reference/classes/wp_block_editor_context/), an object that contains information about the current Editor.
+
+The following example modifies the maximum upload file size. Add this to a plugin or your theme's `functions.php` file to test it.
+
+```php
+add_filter( 'block_editor_settings_all', 'example_filter_block_editor_settings_when_post_provided', 10, 2 );
+
+function example_filter_block_editor_settings_when_post_provided( $editor_settings, $editor_context ) {
+	if ( ! empty( $editor_context->post ) ) {
+		$editor_settings['maxUploadFileSize'] = 12345;
+	}
+	return $editor_settings;
+}
+```
+
+There are dozens of editor settings, too many to list in this documentation article, but here are a few examples of what you can do with the `block_editor_settings_all` filter.
+
+<div class="callout callout-info">
+	To view all available settings, open the Editor and then open the console in your browser's <a href="https://developer.wordpress.org/advanced-administration/debug/debug-javascript/#open-the-developer-tools">Developer Tools</a>. Enter the command <code>wp.data.select( 'core/block-editor' ).getSettings()</code> to display the current values for all Editor settings.
+</div>
+
+### Restrict code editor access
+
+The `codeEditingEnabled`, which defaults to `true`, controls whether the user can access the code editor **in addition** to the visual editor. There may be instances where you don't want certain users to be able to access this view.
+
+If this setting is set to `false`, the user will not be able to switch between visual and code editor. The option in the settings menu will not be available, and the keyboard shortcut for switching editor types will not fire. Here's an example:
+
+```php
+add_filter( 'block_editor_settings_all', 'example_restrict_code_editor' );
+
+function example_restrict_code_editor( $settings ) {
+	$can_active_plugins = current_user_can( 'activate_plugins' );
+
+	// Disable the Code Editor for users that cannot activate plugins (Administrators).
+	if ( ! $can_active_plugins ) {
+		$settings[ 'codeEditingEnabled' ] = false;
+	}
+
+	return $settings;
+}
+```
+
+### Restrict visual editor access
+
+Similar to the `codeEditingEnabled` setting, `richEditingEnabled` allows you to control who can access the visual editor. If `true`, the user can edit the content using the visual editor.
+
+The setting defaults to the returned value of the [`user_can_richedit`](https://developer.wordpress.org/reference/functions/user_can_richedit/) function. It checks whether the user can access the visual editor and whether the user's browser supports it.
+
+### Set a default image size
+
+Images are set to the `large` image size by default in the Editor. You can modify this using the `imageDefaultSize` setting, which is especially useful if you have configured your own custom image sizes. The following example changes the default image size to `medium`.
+
+```php
+add_filter( 'block_editor_settings_all', 'example_set_default_image_size' );
+
+function example_set_default_image_size( $settings ) {
+	$settings['imageDefaultSize'] = 'medium';
+	return $settings;
+}
+```
+
+### Disable Openverse
+
+The [Openverse](https://openverse.org/) integration is enabled for all WordPress sites by default and is controlled by the `enableOpenverseMediaCategory` setting. To disable Openverse, apply the following filter:
+
+```php
+add_filter( 'block_editor_settings_all', 'example_disable_openverse' );
+
+function example_disable_openverse( $settings ) {
+	$settings['enableOpenverseMediaCategory'] = false;
+	return $settings;
+}
+```
+
+### Disable the Font Library
+
+The Font Library allows users to install new fonts on their site, which is enabled by default and is controlled by the `fontLibraryEnabled` setting. To disable the Font Library, apply the following filter:
+
+```php
+add_filter( 'block_editor_settings_all', 'example_disable_font_library' );
+
+function example_disable_font_library( $settings ) {
+	$settings['fontLibraryEnabled'] = false;
+	return $settings;
+}
+```
+
+### Disable block inspector tabs
+
+Most blocks display [two tabs](https://make.wordpress.org/core/2023/03/07/introduction-of-block-inspector-tabs/) in the Inspector, one for Settings and another for Styles. You can disable these tabs using the `blockInspectorTabs` setting.
+
+```php
+add_filter( 'block_editor_settings_all', 'example_disable_inspector_tabs_by_default' );
+
+function example_disable_inspector_tabs_by_default( $settings ) {
+	$settings['blockInspectorTabs'] = array( 'default' => false );
+	return $settings;
+}
+```
+
+You can also modify which blocks have inspector tabs. Here's an example that disables tabs for a specific block.
+
+```php
+add_filter( 'block_editor_settings_all', 'example_disable_tabs_for_my_custom_block' );
+
+function example_disable_tabs_for_my_custom_block( $settings ) {
+	$current_tab_settings = _wp_array_get( $settings, array( 'blockInspectorTabs' ), array() );
+	$settings['blockInspectorTabs'] = array_merge(
+		$current_tab_settings,
+		array( 'my-plugin/my-custom-block' => false )
+	);
+
+	return $settings;
+}
+```
+
+## Block Directory
+
+The Block Directory allows users to install new block plugins directly in the Editor from the WordPress.org [Plugin Directory](https://wordpress.org/plugins/browse/block/). You can disable this functionality by removing the action that enqueues it, which is `wp_enqueue_editor_block_directory_assets`. To do so, use [`remove_action`](https://developer.wordpress.org/reference/functions/remove_action/) like this:
+
+```php
+remove_action( 'enqueue_block_editor_assets', 'wp_enqueue_editor_block_directory_assets' );
+```
+
+## Block patterns
+
+Remote patterns, such as those from the WordPress.org [Pattern Directory](https://wordpress.org/patterns/), are available to users by default in the Editor. This functionality is controlled by `should_load_remote_block_patterns`, which defaults to `true`. You can disable remote patterns by setting the filter to false (`__return_false`).
+
+```php
+add_filter( 'should_load_remote_block_patterns', '__return_false' );
+```
 
 ## Editor features
 
-The following filters are available to extend the editor features.
+The following filters are available to extend features in the Editor.
 
 ### `editor.PostFeaturedImage.imageSize`
 
-Used to modify the image size displayed in the Post Featured Image component. It defaults to `'post-thumbnail'`, and will fail back to the `full` image size when the specified image size doesn't exist in the media object. It's modeled after the `admin_post_thumbnail_size` filter in the classic editor.
-
-_Example:_
+You can use this filter to modify the image size displayed in the Post Featured Image component. It defaults to `'post-thumbnail'` and will fail back to the `full` image size when the specified image size doesn't exist in the media object. It's modeled after the `admin_post_thumbnail_size` filter in the Classic Editor.
 
 ```js
-var withImageSize = function ( size, mediaId, postId ) {
+import { addFilter } from '@wordpress/hooks';
+
+const withImageSize = function ( size, mediaId, postId ) {
 	return 'large';
 };
 
-wp.hooks.addFilter(
+addFilter(
 	'editor.PostFeaturedImage.imageSize',
 	'my-plugin/with-image-size',
 	withImageSize
@@ -26,16 +169,16 @@ wp.hooks.addFilter(
 
 ### `editor.PostPreview.interstitialMarkup`
 
-Filters the interstitial message shown when generating previews.
-
-_Example:_
+You can also filter the interstitial message shown when generating previews. Here's an example:
 
 ```js
-var customPreviewMessage = function () {
+import { addFilter } from '@wordpress/hooks';
+
+const customPreviewMessage = function () {
 	return '<b>Post preview is being generated!</b>';
 };
 
-wp.hooks.addFilter(
+addFilter(
 	'editor.PostPreview.interstitialMarkup',
 	'my-plugin/custom-preview-message',
 	customPreviewMessage
@@ -44,13 +187,13 @@ wp.hooks.addFilter(
 
 ### `media.crossOrigin`
 
-Used to set or modify the `crossOrigin` attribute for foreign-origin media elements (i.e `<audio>` , `<img>` , `<link>` , `<script>`, `<video>`). See this [article](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) for more information the `crossOrigin` attribute, its values and how it applies to each element.
-
-One example of it in action is in the Image block's transform feature to allow cross-origin images to be used in a `<canvas>`.
+This filter is used to set or modify the `crossOrigin` attribute for foreign-origin media elements (i.e., `<audio>`, `<img>`, `<link>`, `<script>`, `<video>`). See this [article](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) for more information on the `crossOrigin` attribute, its values, and how it applies to each element.
 
-_Example:_
+One example of it in action is in the Image block's transform feature to allow cross-origin images to be used in a `<canvas>`. Here's an example:
 
 ```js
+import { addFilter } from '@wordpress/hooks';
+
 addFilter(
 	'media.crossOrigin',
 	'my-plugin/with-cors-media',
@@ -66,112 +209,39 @@ addFilter(
 );
 ```
 
-## Editor settings
-
-### `block_editor_settings_all`
-
-_**Note:** Before WordPress 5.8 known as `block_editor_settings`. In the case when you want to support older versions of WordPress you might need a way to detect which filter should be used – the deprecated one vs the new one. The recommended way to proceed is to check if the `WP_Block_Editor_Context` class exists._
-
-This is a PHP filter which is applied before sending settings to the WordPress block editor.
-
-You may find details about this filter [on its WordPress Code Reference page](https://developer.wordpress.org/reference/hooks/block_editor_settings_all/).
-
-The filter will send any setting to the initialized Editor, which means any editor setting that is used to configure the editor at initialization can be filtered by a PHP WordPress plugin before being sent.
+## Editor REST API preload paths
 
-_Example:_
+You can use [`block_editor_rest_api_preload_paths`](https://developer.wordpress.org/reference/hooks/block_editor_rest_api_preload_paths/) to filter the array of REST API paths that will be used to preload common data to use with the block editor. Here's an example:
 
 ```php
-<?php
-// my-plugin.php
+add_filter( 'block_editor_rest_api_preload_paths', 'example_filter_block_editor_rest_api_preload_paths_when_post_provided', 10, 2 );
 
-function wpdocs_filter_block_editor_settings_when_post_provided( $editor_settings, $editor_context ) {
-	if ( ! empty( $editor_context->post ) ) {
-		$editor_settings['maxUploadFileSize'] = 12345;
-	}
-	return $editor_settings;
-}
-
-add_filter( 'block_editor_settings_all', 'wpdocs_filter_block_editor_settings_when_post_provided', 10, 2 );
-```
-
-#### `block_editor_rest_api_preload_paths`
-
-Filters the array of REST API paths that will be used to preloaded common data to use with the block editor.
-
-_Example:_
-
-```php
-<?php
-// my-plugin.php
-
-function wpdocs_filter_block_editor_rest_api_preload_paths_when_post_provided( $preload_paths, $editor_context ) {
+function example_filter_block_editor_rest_api_preload_paths_when_post_provided( $preload_paths, $editor_context ) {
 	if ( ! empty( $editor_context->post ) ) {
 		array_push( $preload_paths, array( '/wp/v2/blocks', 'OPTIONS' ) );
 	}
 	return $preload_paths;
 }
-
-add_filter( 'block_editor_rest_api_preload_paths', 'wpdocs_filter_block_editor_rest_api_preload_paths_when_post_provided', 10, 2 );
 ```
 
-### Available default editor settings
-
-#### `richEditingEnabled`
-
-If it is `true` the user can edit the content using the visual editor.
-
-It is set by default to the return value of the [`user_can_richedit`](https://developer.wordpress.org/reference/functions/user_can_richedit/) function. It checks if the user can access the visual editor and whether it’s supported by the user’s browser.
-
-#### `codeEditingEnabled`
-
-Default `true`. Indicates whether the user can access the code editor **in addition** to the visual editor.
-
-If set to false the user will not be able to switch between visual and code editor. The option in the settings menu will not be available and the keyboard shortcut for switching editor types will not fire.
-
 ## Logging errors
 
-_**Note:** Since WordPress 6.1._
+A JavaScript error in a part of the UI shouldn't break the whole app. To solve this problem for users, React library uses the concept of an ["error boundary"](https://reactjs.org/docs/error-boundaries.html). Error boundaries are React components that catch JavaScript errors anywhere in their child component tree and display a fallback UI instead of the component tree that crashed.
 
-A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for users, React library uses a concept of an [“error boundary”](https://reactjs.org/docs/error-boundaries.html). Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, and display a fallback UI instead of the component tree that crashed.
+The `editor.ErrorBoundary.errorLogged` action allows you to hook into the [Error Boundaries](https://reactjs.org/docs/error-boundaries.html) and gives you access to the error object.
 
-### `editor.ErrorBoundary.errorLogged`
-
-Allows you to hook into the [Error Boundaries](https://reactjs.org/docs/error-boundaries.html) and gives you access to the error object.
-
-You can use this action if you want to get hold of the error object that's handled by the boundaries, i.e to send them to an external error tracking tool.
-
-_Example_:
+You can use this action to get hold of the error object handled by the boundaries. For example, you may want to send them to an external error-tracking tool. Here's an example:
 
 ```js
+import { addAction } from '@wordpress/hooks';
+
 addAction(
 	'editor.ErrorBoundary.errorLogged',
 	'mu-plugin/error-capture-setup',
 	( error ) => {
-		// error is the exception's error object
-		ErrorCaptureTool.captureError( error );
+		// Error is the exception's error object. 
+		// You can console.log it or send it to an external error-tracking tool.
+		console.log ( error );
 	}
 );
 ```
-
-## Block Directory
-
-The Block Directory enables installing new block plugins from [WordPress.org.](https://wordpress.org/plugins/browse/block/) It can be disabled by removing the actions that enqueue it. In WordPress core, the function is `wp_enqueue_editor_block_directory_assets`. To remove the feature, use [`remove_action`,](https://developer.wordpress.org/reference/functions/remove_action/) like this:
-
-```php
-<?php
-// my-plugin.php
-
-remove_action( 'enqueue_block_editor_assets', 'wp_enqueue_editor_block_directory_assets' );
-```
-
-## Block Patterns
-
-### `should_load_remote_block_patterns`
-
-Default `true`. The filter is checked when registering remote block patterns, set to false to disable.
-
-For example, to disable use:
-
-```
-add_filter( 'should_load_remote_block_patterns', '__return_false' );
-```
diff --git a/docs/reference-guides/interactivity-api/README.md b/docs/reference-guides/interactivity-api/README.md
index de6b0c5b1c455..b6e0d639c3fc8 100644
--- a/docs/reference-guides/interactivity-api/README.md
+++ b/docs/reference-guides/interactivity-api/README.md
@@ -9,7 +9,7 @@ Blocks can share data, actions, and callbacks between them. This makes communica
 For more information about the genesis of the Interactivity API, check out the [original proposal](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/). You can also review the [merge announcement](https://make.wordpress.org/core/2024/02/19/merge-announcement-interactivity-api/), the [status update post](https://make.wordpress.org/core/2023/08/15/status-update-on-the-interactivity-api/), and the official [Trac ticket](https://core.trac.wordpress.org/ticket/60356).
 
 <div class="callout callout-info">
-    The Interactivity API is supported by the package <code>@wordpress/interactivity</code> which is bundled in WordPress Core from v6.5
+    The Interactivity API is supported by the package <a href="https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/"><code>@wordpress/interactivity</code></a> which is bundled in WordPress Core from v6.5
 </div>
 
 ## Navigating the Interactivity API docs
@@ -19,8 +19,14 @@ Use the following links to locate the topic you're interested in. If you have ne
 - **[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 Store works.
-- **[Docs and Examples](#docs--examples):** Additional resources to learn/read more about 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.
+
+To get a deeper understanding of what the Interactivity API is or find answers to questions you may have about this standard, check the following resources:
+
+- **[About the Interactivity API](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-about/):** To learn more about the API Goals and the reasoning behind the use of a standard to add interactivity to blocks.
+- **[Frequently Asked Questions](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-faq/):** To find responses to some frequently asked questions about the technology behind and alternatives.
+
 
 ## Requirements of the Interactivity API
 
@@ -28,11 +34,11 @@ 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)
+- [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 are running WordPress 6.5+ (or Gutenberg 17.5+).
+You can start creating interactions once you set up a block development environment and run WordPress 6.5+ (or Gutenberg 17.5+).
 
 ### Code requirements
 
@@ -40,15 +46,44 @@ You can start creating interactions once you set up a block development environm
 
 To indicate that the block [supports](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) the Interactivity API features, add `"interactivity": true` to the `supports` attribute of the block's `block.json` file.
 
-```
+```json
+// block.json
 "supports": {
     "interactivity": true
 },
 ```
 
+Refer to the [`interactivity` support property docs](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity) to get a more detailed description of this property.
+
+#### Load Interactivity API Javascript code with `viewScriptModule`
+
+The Interactivity API provides the `@wordpress/interactivity` Script Module. JavaScript using the Interactivity API should be implemented as Script Modules so they can depend on `@wordpress/interactivity`. [Script Modules have been available since WordPress 6.5](https://make.wordpress.org/core/2024/03/04/script-modules-in-6-5/). Blocks can use [`viewScriptModule` block metadata](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script-module) to enqueue their Script Modules easily:
+
+```json
+// block.json
+{
+   ...
+   "viewScriptModule": "file:./view.js"
+}
+```
+
+The use of `viewScriptModule` also requires the `--experimental-modules` flag for both the [`build`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#build) and [`start`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#start) scripts of `wp-scripts` to ensure a proper build of the Script Modules.
+
+
+```json
+// package.json
+{
+    "scripts": {
+        ...
+		"build": "wp-scripts build --experimental-modules",
+		"start": "wp-scripts start --experimental-modules"
+	}
+```
+
 #### Add `wp-interactive` directive to a DOM element
 
-To "activate" the Interactivity API in a DOM element (and its children), add the [`wp-interactive`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/packages-interactivity-api-reference/#wp-interactive) directive to the element in the block's `render.php` or `save.js` files.
+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
@@ -57,6 +92,8 @@ To "activate" the Interactivity API in a DOM element (and its children), add the
 </div>
 ```
 
+Refer to the [`wp-interactive` documentation](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/#wp-interactive) for a more detailed description of this directive.
+
 ## Docs & Examples
 
 Here you have some more resources to learn/read more about the Interactivity API:
diff --git a/docs/reference-guides/interactivity-api/iapi-about.md b/docs/reference-guides/interactivity-api/iapi-about.md
new file mode 100644
index 0000000000000..887a284be298f
--- /dev/null
+++ b/docs/reference-guides/interactivity-api/iapi-about.md
@@ -0,0 +1,195 @@
+# About the Interactivity API
+
+The Interactivity API is **a [standard](#why-a-standard) system of [directives](#why-directives), based on declarative code, for [adding frontend interactivity to blocks](#api-goals)**.
+
+**Directives extend HTML with special attributes** that tell the Interactivity API to attach a specified behavior to a DOM element or even to transform it. For those familiar with [Alpine.js](https://alpinejs.dev/), it’s a similar approach but explicitly designed to work seamlessly with WordPress.
+
+## API Goals 
+
+The main goal of the Interactivity API is to **provide a standard and simple way to handle the frontend interactivity of Gutenberg blocks**.
+
+A standard makes it **easier for developers to create rich, interactive user experiences**, from simple cases like counters or popups to more complex features like instant page navigation, instant search, or carts and checkouts.
+
+All these user experiences are technically possible right now without the Interactivity API. However, the more complex the user experience and the more blocks interact with each other, the harder it becomes for developers to build and maintain sites. There are a lot of challenges they have to figure out themselves. The API aims to provide out-of-the-box means for supporting these kinds of interactions.
+
+To address this challenge the following requirements/goals for the Interactivity API were defined:
+
+- **Block-first and PHP-first**: The API must work well with PHP and the current block system, including dynamic blocks, widely extended in WordPress. It must support server-side rendering. Server-rendered HTML and client-hydrated HTML must be exactly the same. This is important for SEO and the user experience.
+- **Backward compatible**: The API must be compatible with WordPress hooks, which could, for example, modify server-rendered HTML. It must also be compatible with internationalization and existing JS libraries on the site (such as jQuery).
+- **Optional and gradual adoption**: Related to the previous point, the API must remain optional. It should be possible to adopt it gradually, meaning that interactive blocks not using this API can coexist with those using it.
+- **Declarative and reactive**: The API must use declarative code, listen to changes in the data, and update only the parts of the DOM that depend on that data.
+- **Performant**: The runtime must be fast and lightweight to ensure the best user experience.
+- **Extensible**: In the same way WordPress focuses on extensibility, this new system must provide extensibility patterns to cover most use cases.
+- **Atomic and composable**: Having small reusable parts that can be combined to create more complex systems is required to create flexible and scalable solutions.
+- **Compatible with the existing block development tooling**: The API must be integrated with the existing block-building tools without requiring additional tooling or configuration by the developer.
+
+Apart from all these requirements, integrating **client-side navigation** on top of any solution should be easy and performant. Client-side navigation is the process of navigating between site pages without reloading the entire page, which is one of the most impressive user experiences demanded by web developers. For that reason, this functionality should be compatible with this new system.
+
+## Why directives?
+
+Directives are the result of deep [research into different possibilities and approaches](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-faq/#what-approaches-have-been-considered-instead-of-using-directives). We’ve found that this design covers the requirements most effectively.
+
+### Block-first and PHP-friendly
+
+The API is designed for the world of blocks and takes WordPress history of being closely attached to web standards to heart.
+
+As directives are HTML attributes, they are perfect for dynamic blocks and PHP.
+
+_Dynamic block example_
+```html
+<div
+  data-wp-interactive='wpmovies'
+  <?php echo wp_interactivity_data_wp_context( array( 'isOpen' => false ) ); ?>
+  data-wp-watch="callbacks.logIsOpen"
+>
+  <button
+    data-wp-on--click="actions.toggle"
+    data-wp-bind--aria-expanded="context.isOpen"
+    aria-controls="p-1"
+  >
+    Toggle
+  </button>
+ 
+  <p id="p-1" data-wp-bind--hidden="!context.isOpen">
+    This element is now visible!
+  </p>
+</div>
+```
+
+As you can see, directives like [`data-wp-on--click`](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/#wp-on) or [`data-wp-bind--hidden`](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/#wp-bind) are added as custom HTML attributes. WordPress can process this HTML on the server, handling the directives’ logic and creating the appropriate markup.
+
+### Backward compatible
+
+As the Interactivity API works perfectly with server-side rendering, you can use all the WordPress APIs, including:
+
+- **WordPress filters and actions**: You can keep using WordPress hooks to modify the HTML or even to modify directives. Additionally, existing hooks will keep working as expected.
+- **Core Translation API**: e.g. `__()` and `_e()`. You can use it to translate the text in the HTML (as you normally would) and even use those APIs on the server side of your directives. 
+
+### Optional and gradual adoption
+
+The Interactivity API pipeline promotes **progressive enhancement** by building on top of WordPress’s solid foundation and patterns.
+
+For example, blocks with directives can coexist with other (interactive or non-interactive) blocks. This means that if there are other blocks on the page using other frameworks like jQuery, everything will work as expected.
+
+<div class="callout callout-warning">
+  Full-page client-side navigation with the Interactivity API will be an exception to this compatibility with other libraries rule. See <a href="#client-side-navigation">Client-side navigation</a> for more details.
+</div>
+
+### Declarative and reactive
+
+The Interactivity API follows an approach similar to other popular JS frameworks by separating state, actions, and callbacks and defining them declaratively. Why declaratively?
+
+Declarative code describes **what** a program should do, while imperative code describes **how** the program should do it. Using a declarative approach, the UI automatically updates in response to changes in the underlying data. With an imperative approach, you must manually update the UI whenever the data changes. Compare the two code examples:
+
+_Imperative code_
+
+```html
+<button id="toggle-button">Toggle Element</button>
+<p>This element is now visible!</p>
+<script>
+  const button = document.getElementById("toggle-button");
+ 
+  button.addEventListener("click", () => {
+    const element = document.getElementById("element");
+    if(element) {
+      element.remove();
+    } else {
+      const newElement = document.createElement("p");
+      newElement.textContent = "This element is visible";
+      document.body.appendChild(newElement);
+    }
+});
+</script>
+```
+
+_Declarative code_
+
+This is the same use case shared above but serves as an example of declarative code using this new system. The JavaScript logic is defined in the `view.js` file of the block, and add the directives to the markup in the `render.php`.
+
+```js
+// view.js file
+ 
+import { store, getContext } from "@wordpress/interactivity";
+ 
+store( 'wpmovies', {
+  actions: {
+    toggle: () => {
+      const context = getContext();
+      context.isOpen = !context.isOpen;
+    },
+  },
+});
+```
+
+```php
+<!-- Render.php file -->
+ 
+<div
+  data-wp-interactive='wpmovies'
+  <?php echo wp_interactivity_data_wp_context( array( 'isOpen' => true ) ); ?>
+>
+  <button
+    data-wp-on--click="actions.toggle"
+    data-wp-bind--aria-expanded="context.ispen"
+    aria-controls="p-1"
+  >
+    Toggle
+  </button>
+ 
+  <p id="p-1" data-wp-bind--hidden="!context.isOpen">
+    This element is now visible!
+  </p>
+</div>
+```
+
+Using imperative code may be easier when creating simple user experiences, but it becomes much more difficult as applications become more complex. The Interactivity API must cover all use cases, from the simplest to the most challenging. That’s why a declarative approach using directives better fits the Interactivity API.
+
+### Performant
+
+The API has been designed to be as performant as possible:
+
+- **The runtime code needed for the directives is just ~10 KB**, and it only needs to be loaded once for all the blocks.
+- **The scripts will load without blocking the page rendering**.
+
+### Extensible
+
+Directives can be added, removed, or modified directly from the HTML. For example, users could use the [`render_block` filter](https://developer.wordpress.org/reference/hooks/render_block/) to modify the HTML and its behavior.
+
+### Atomic and composable
+
+Each directive controls a small part of the DOM, and you can combine multiple directives to create rich, interactive user experiences.
+
+### Compatible with the existing block development tooling
+
+The API works out of the box with standard block-building tools like [`wp-scripts`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/). The only requirement for `wp-scripts` to properly build the [Script Modules](https://make.wordpress.org/core/2024/03/04/script-modules-in-6-5/) using the Interactivity API is the use of the --experimental-modules flag for both [`build`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#build) and [`start`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#start) scripts.
+
+### Client-side navigation
+
+The Interactivity API comes with built-in primitives for adding client-side navigation to your site. This functionality is completely optional, but it opens the possibility to create these user experiences without having to opt out of the WordPress rendering system.
+
+<div class="callout callout-info">
+  Full-page client-side navigation with the Interactivity API is still a work in progress (see <a href="https://github.com/WordPress/gutenberg/issues/60951">#60951</a>). Still, it is expected that all the interactive blocks will have to use the Interactivity API to enable full-page client-side navigation with the Interactivity API. Only in this case, the Interactivity API won't be fully compatible with other libraries (such as jQuery). 
+</div>
+
+It also pairs very well with the [View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) allowing developers to animate page transitions easily.
+
+## Why a standard?
+
+Blocks using the Interactivity API and interactive blocks using other approaches like jQuery can coexist, and everything will work as expected. However, the Interactivity API comes with some benefits for your interactive blocks:
+
+- **Blocks can communicate with each other easily**. With a standard, this communication is handled by default. When different blocks use different approaches to frontend interactivity, inter-block communication becomes more complex and almost impossible when different developers create blocks.
+- **Composability and compatibility**: You can combine interactive blocks, and nest them in structures with defined behaviors. Thanks to following the same standard, they are fully cross-compatible. If each block used a different approach to interactivity, they would likely break.
+- **Fewer KBs will be sent to the browser**. If each plugin author uses a different JS framework, more code will be loaded in the front end. If all the blocks use the same one, the code is reused.
+- If all the blocks on a page use this standard, **site-wide features like client-side navigation can be enabled**.
+
+Additionally, with a standard, **WordPress can absorb the maximum amount of complexity from the developer** because it will handle most of what’s needed to create an interactive block.
+
+_Complexities absorbed by the standard_
+
+<img alt="Two columns table comparing some aspects with and without a standard. Without a standard, block developers have to take care of everything, while having a standard. Totally handled by the standard: Tooling, hydration, integrating it with WordPress, SSR of the interactive parts, inter-block communication, and frontend performance. Partially handled: Security, accessibility, and best practices. Developer responsibility: Block logic. In the without a standard column, everything is under the developer responsability." width=60% src="https://make.wordpress.org/core/files/2023/03/standard-graph.png">
+
+
+With this absorption, less knowledge is required to create interactive blocks, and developers have fewer decisions to worry about.
+
+By adopting a standard, learning from other interactive blocks is simpler, and fosters collaboration and code reusability. As a result, the development process is leanier and friendlier to less experienced developers.
+
diff --git a/docs/reference-guides/interactivity-api/iapi-faq.md b/docs/reference-guides/interactivity-api/iapi-faq.md
new file mode 100644
index 0000000000000..fba3603f39169
--- /dev/null
+++ b/docs/reference-guides/interactivity-api/iapi-faq.md
@@ -0,0 +1,127 @@
+# Frequently Asked Questions
+
+## How does the Interactivity API work under the hood?
+
+Its three main components are:
+
+- [Preact](https://preactjs.com/) combined with [Preact Signals](https://preactjs.com/guide/v10/signals/) for hydration, client logic, and client-side navigation.
+- HTML Directives that can be understood by both the client and server.
+- Server-side logic, handled by the [HTML_Tag_Processor](https://make.wordpress.org/core/2023/03/07/introducing-the-html-api-in-wordpress-6-2/).
+
+## Why Preact to build the directives system? Why not React or another JavaScript framework?
+
+Preact has a number of advantages over React and other JavaScript frameworks like Vue, Svelte, or Solid in the context of the frontend (which is the focus of the Interactivity API):
+
+- It’s small: 8kB, including [hooks](https://preactjs.com/guide/v10/hooks/) and [signals](https://preactjs.com/blog/introducing-signals/).
+- It gives us DOM diffing out of the box.
+- It’s extremely extensible through their Option Hooks. They use that extensibility for the hooks (preact/hooks), compatibility with React (preact/compat) and their signals (@preact/signals). Basically, everything but the DOM diffing algorithm.
+- Its core team has been great and very helpful. They are also interested in enhancing this “island-based” usage of Preact.
+
+## Is Gutenberg going to move from React to Preact since the Interactivity API uses it?
+
+No. At the moment, there are no plans to make that transition. The requirements and advantages of the editor, as a fully interactive application, are quite different. Preact does have a [`@preact/compat`](https://preactjs.com/guide/v10/switching-to-preact/) package that enables full compatibility with the React ecosystem, and many large web applications use it. However, using Preact in the block editor would not offer advantages like it does on the frontend in the Interactivity API.
+
+## What approaches have been considered instead of using directives?
+
+Many alternative approaches were considered. Here’s a brief summary of some of them:
+
+### React and other JavaScript frameworks
+
+React was considered first because Gutenberg developers are familiar with it. Other popular JS frameworks like Svelte, Vue.js, or Angular were also considered, but none of them (including React) are PHP-friendly or compatible with WordPress hooks or internationalization.
+
+### Alpine.js
+
+Alpine.js is a great framework, and it inspired a lot of functionality in the Interactivity API. However, it doesn’t support server-side rendering of its [directives](https://github.com/alpinejs/alpine/tree/d7f9d641f7a763c56c598d118bd189a406a22383/packages/docs/src/en/directives), and having a similar system tailored for WordPress blocks has many benefits.
+
+### Plain JavaScript
+
+See the answer below. 
+
+### Template DSL
+
+The possibility of creating a [DSL](https://en.wikipedia.org/wiki/Domain-specific_language) for writing interactive templates was also researched. The code written in that Template DSL would then be compiled into both JavaScript and PHP. However, creating a production-grade Template compiler is complex and would be a large and risky investment of effort. This approach is still being considered for the future, with the directives serving as a compilation target.
+
+## Why should I, as a block developer, use the Interactivity API rather than React?
+
+Using React on the frontend doesn’t work smoothly with server rendering in PHP. Every approach that uses React to render blocks has to load content using client-side JavaScript. If you only render your blocks on the client, it typically results in a poor user experience because the user stares at empty placeholders and spinners while waiting for content to load. 
+
+Using JS in PHP extensions (like v8js) is also possible, but unfortunately PHP extensions are not backward compatible and can only be used when there's a PHP fallback.
+
+Now, it’s possible to server-render a block in PHP **and** use React to render the same block on the frontend. However, this results in a poor developer experience because the logic has to be duplicated across the PHP and React parts. Not only that, but you have now exposed yourself to subtle bugs caused by WordPress hooks!
+
+Imagine installing a third-party plugin with a hook (filter) that modifies the server-rendered HTML. Let’s say this filter adds a single CSS class to your block’s HTML. That CSS class will be present in the server-rendered markup. On the frontend, your block will render again in React, but now the content will not include that CSS class because there is no way to apply WordPress hooks to React-rendered content!
+
+On the other hand, the Interactivity API is designed to work perfectly with WordPress hooks because directives enhance the server-rendered HTML with behaviors. This also means it works out of the box with WordPress backend APIs like i18n.
+
+To summarize, using the Interactivity API rather than just using React comes with these benefits:
+
+- If you use React, your interactive blocks must generate the same markup on the client as they do on the server in PHP. Using the Interactivity API, there is no such requirement as directives are added to server-rendered HTML.
+- The Interactivity API is PHP-friendlier. It works out of the box with WordPress hooks or other server functionalities such as internationalization. For example, with React, you can’t know which hooks are applied on the server, and their modifications would be overwritten after hydration.
+- All the benefits of [using a standard](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/what-is-interactivity-api#why-a-standard).
+
+
+## What are the benefits of Interactivity API over just using jQuery or vanilla JavaScript?
+
+The main difference is that the Interactivity API is **declarative and reactive**, so writing and maintaining complex interactive experiences should become way easier. Additionally, it has been **specially designed to work with blocks**, providing a standard that comes with the benefits mentioned above, like inter-block communication, compatibility, or site-wide features such as client-side navigation.
+
+Finally, comparing it with jQuery, **the Interactivity API runtime is ~10kb**, which is much more lightweight. Actually, there is an ongoing effort to remove heavy frameworks like jQuery across the WordPress ecosystem, and this would help in this regard.
+
+## Do I need to know React, PHP, and this Interactivity API?
+
+If you want to add frontend interactivity to your blocks using this API, the short answer is yes. If your block is not interactive, the block creation workflow will remain exactly the same.
+
+The Interactivity API introduces a new standard method to facilitate the integration of interactive behaviors into the frontend part of WordPress. This means that you still need to use React to handle the editor part of your blocks.
+
+On the other hand, if you want to create an interactive block, with the Interactivity API you don’t have to deal with complex topics like tooling, integration with WordPress, inter-block communication, or the server-side rendering of the interactive parts.
+
+## Can the Interactivity API be used beyond a block?
+
+Absolutely, yes, it is not limited to blocks. You'll see a lot of mentions of how the Interactivity API provides a standard for creating interactive blocks, but that's only because that's the most common use case. More generally speaking, the Interactivity API standard can be used to add "interactive behaviors" to the front end of any part of WordPress.
+
+See the [`wp_interactivity_process_directives` function](https://developer.wordpress.org/reference/functions/wp_interactivity_process_directives/) for details on using the Interactivity API outside of blocks with arbitrary HTML.
+
+## Does this mean I must migrate all my interactive blocks to use this API?
+
+No. Blocks outside the Interactivity API can coexist with blocks using it. However, as explained above, keep in mind that there are some benefits for blocks that use the API:
+
+- **Blocks can communicate with each other easily**. With a standard, this communication is handled by default. When different blocks use different approaches to frontend interactivity, inter-block communication becomes more complex and gets almost impossible when separate developers create blocks.
+- **Composability and compatibility**: You can combine interactive blocks, nest them in structures with defined behaviors, and, thanks to following the same standard, they are fully cross-compatible. If each block were to use a different approach to interactivity, they would likely break.
+- **Fewer KBs will be sent to the browser**. If each plugin author uses a different JS framework, more code will be loaded in the frontend. If all the blocks use the same one, the code is reused.
+- If all the blocks on a page use this standard, site-wide features like client-side navigation can be enabled.
+
+## What are the performance implications of using this API? Is it worth loading the Interactivity API for very simple use cases?
+
+The API has been designed with performance in mind, so it shouldn’t be a problem:
+
+- **The runtime code needed for the directives is just ~10 KB**, and it only needs to be loaded once for all the blocks.
+- **All the script modules that belong to the Interactivity API (including the `view.js` files) will load without blocking the page rendering.**
+- There are [ongoing explorations](https://github.com/WordPress/gutenberg/discussions/52723) about the possibility of **delaying the scripts loading once the block is in the viewport**. This way, the initial load would be optimized without affecting the user experience.
+
+## Does it work with the Core Translation API?
+
+As the Interactivity API works perfectly with server-side rendering, you can use all the WordPress APIs including [`__()`](https://developer.wordpress.org/reference/functions/__/) and [`_e()`](https://developer.wordpress.org/reference/functions/_e/). You can use it to translate the text in the HTML (as you normally would) and even use it inside the store when [using `wp_interactivity_state()` on the server side](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/#setting-the-store). It might look something like this:
+
+```php
+// render.php
+wp_interactivity_state( 'favoriteMovies', array(
+      "1" => array(
+        "id" => "123-abc",
+        "movieName" => __("someMovieName", "textdomain")
+      ),
+) );
+```
+
+A translation API compatible with script modules (needed for the Interactivity API) is currently being worked on. Check [#60234](https://core.trac.wordpress.org/ticket/60234) to follow the progress on this work.
+
+## I’m concerned about XSS; can JavaScript be injected into directives?
+
+No. The Interactivity API only allows for [References](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/#values-of-directives-are-references-to-store-properties) to be passed as values to the directives. This way, there is no need to eval() full JavaScript expressions, so it’s not possible to perform XSS attacks.
+
+## Does this work with Custom Security Policies?
+
+Yes. The Interactivity API does not use [`eval()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval) or the [`Function()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/Function) constructor, so it doesn’t violate the [`unsafe-eval`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#unsafe_keyword_values) content security policy. It is also designed to work with any [custom content security policy](https://developer.wordpress.org/apis/security/).
+
+## Can you use directives to make AJAX/REST-API requests?
+
+Sure. Actions and callbacks called by directives can do anything a JavaScript function can, including making API requests.
+
diff --git a/docs/reference-guides/slotfills/README.md b/docs/reference-guides/slotfills/README.md
index 043a50cb5186e..ea324f71b25e8 100644
--- a/docs/reference-guides/slotfills/README.md
+++ b/docs/reference-guides/slotfills/README.md
@@ -33,7 +33,7 @@ registerPlugin( 'post-status-info-test', { render: PluginPostStatusInfoTest } );
 
 SlotFills are created using `createSlotFill`. This creates two components, `Slot` and `Fill` which are then used to create a new component that is exported on the `wp.plugins` global.
 
-**Definition of the `PluginPostStatusInfo` SlotFill** ([see core code](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js#L54))
+**Definition of the `PluginPostStatusInfo` SlotFill** ([see core code](https://github.com/WordPress/gutenberg/blob/HEAD/packages/editor/src/components/plugin-post-status-info/index.js#L55))
 
 ```js
 /**
@@ -61,34 +61,70 @@ export default PluginPostStatusInfo;
 This new Slot is then exposed in the editor. The example below is from core and represents the Summary panel.
 
 As we can see, the `<PluginPostStatusInfo.Slot>` is wrapping all of the items that will appear in the panel.
-Any items that have been added via the SlotFill ( see the example above ), will be included in the `fills` parameter and be displayed between the `<PostAuthor/>` and `<PostTrash/>` components.
+Any items that have been added via the SlotFill ( see the example above ), will be included in the `fills` parameter and be displayed in the end of the component.
 
-See [core code](https://github.com/WordPress/gutenberg/tree/HEAD/packages/edit-post/src/components/sidebar/post-status/index.js#L26).
+See [core code](https://github.com/WordPress/gutenberg/tree/HEAD/packages/editor/src/components/sidebar/post-summary.js#L39).
 
 ```js
-const PostStatus = ( { isOpened, onTogglePanel } ) => (
-	<PanelBody
-		className="edit-post-post-status"
-		title={ __( 'Summary' ) }
-		opened={ isOpened }
-		onToggle={ onTogglePanel }
-	>
-		<PluginPostStatusInfo.Slot>
-			{ ( fills ) => (
-				<>
-					<PostVisibility />
-					<PostSchedule />
-					<PostFormat />
-					<PostSticky />
-					<PostPendingStatus />
-					<PostAuthor />
-					{ fills }
-					<PostTrash />
-				</>
-			) }
-		</PluginPostStatusInfo.Slot>
-	</PanelBody>
-);
+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(),
+		};
+	}, [] );
+
+	return (
+		<PostPanelSection className="editor-post-summary">
+			<PluginPostStatusInfo.Slot>
+				{ ( fills ) => (
+					<>
+						<VStack spacing={ 4 }>
+							<PostCardPanel
+								actions={
+									<PostActions
+										onActionPerformed={ onActionPerformed }
+									/>
+								}
+							/>
+							<PostFeaturedImagePanel withPanelBody={ false } />
+							<PostExcerptPanel />
+							<VStack spacing={ 1 }>
+								<PostContentInformation />
+								<PostLastEditedPanel />
+							</VStack>
+							{ ! isRemovedPostStatusPanel && (
+								<VStack spacing={ 2 }>
+									<VStack spacing={ 1 }>
+										<PostStatusPanel />
+										<PostSchedulePanel />
+										<PostURLPanel />
+										<PostAuthorPanel />
+										<PostTemplatePanel />
+										<PostDiscussionPanel />
+										<PageAttributesPanel />
+										<PostSyncStatus />
+										<BlogTitle />
+										<PostsPerPage />
+										<SiteDiscussion />
+										<PostFormatPanel />
+										<PostStickyPanel />
+									</VStack>
+									<TemplateAreas />
+									{ fills }
+								</VStack>
+							) }
+						</VStack>
+					</>
+				) }
+			</PluginPostStatusInfo.Slot>
+		</PostPanelSection>
+	);
+}
 ```
 
 ## Currently available SlotFills and examples
diff --git a/docs/reference-guides/slotfills/plugin-document-setting-panel.md b/docs/reference-guides/slotfills/plugin-document-setting-panel.md
index d278a9e96981d..aa3e55abe2f7e 100644
--- a/docs/reference-guides/slotfills/plugin-document-setting-panel.md
+++ b/docs/reference-guides/slotfills/plugin-document-setting-panel.md
@@ -33,7 +33,7 @@ registerPlugin( 'plugin-document-setting-panel-demo', {
 
 ## Accessing a panel programmatically
 
-Core and custom panels can be access programmatically using their panel name. The core panel names are:
+Core and custom panels can be accessed programmatically using their panel name. The core panel names are:
 
 -   Summary Panel: `post-status`
 -   Categories Panel: `taxonomy-panel-category`
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 ea11c0a389883..59a820a16697c 100644
--- a/docs/reference-guides/theme-json-reference/theme-json-living.md
+++ b/docs/reference-guides/theme-json-reference/theme-json-living.md
@@ -116,6 +116,8 @@ Settings related to dimensions.
 | Property  | Type   | Default | Props  |
 | ---    | ---    | ---    |---   |
 | aspectRatio | boolean | false |  |
+| defaultAspectRatios | boolean | true |  |
+| aspectRatios | array |  | name, ratio, slug |
 | minHeight | boolean | false |  |
 
 ---
@@ -165,6 +167,7 @@ Settings related to spacing.
 | padding | boolean | false |  |
 | units | array | px,em,rem,vh,vw,% |  |
 | customSpacingSize | boolean | true |  |
+| defaultSpacingSizes | boolean | true |  |
 | spacingSizes | array |  | name, size, slug |
 | spacingScale | object |  |  |
 
diff --git a/docs/reference-guides/theme-json-reference/theme-json-migrations.md b/docs/reference-guides/theme-json-reference/theme-json-migrations.md
index c304bfe39493e..8e9d56ed054e6 100644
--- a/docs/reference-guides/theme-json-reference/theme-json-migrations.md
+++ b/docs/reference-guides/theme-json-reference/theme-json-migrations.md
@@ -88,8 +88,27 @@ The new `defaultFontSizes` option gives control over showing default font sizes
 
 It is `true` by default when switching to v3. This is to be consistent with how other `default*` options work such as `settings.color.defaultPalette`, but differs from the behavior in v2.
 
-In theme.json v2, the default font sizes were only shown when theme sizes were not defined. A theme providing font sizes with the same slugs as the defaults would always override the default ones.
-
 To keep behavior similar to v2 with a v3 theme.json:
 * If you do not have any `fontSizes` defined, `defaultFontSizes` can be left out or set to `true`.
 * If you have some `fontSizes` defined, set `defaultFontSizes` to `false`.
+
+#### `settings.spacing.defaultSpacingSizes`
+
+In theme.json v2, there are two settings that could be used to set theme level spacing sizes: `settings.spacing.spacingSizes` and `settings.spacing.spacingScale`. Setting both `spacingSizes` _and_ `spacingScale` would only use the values from `spacingSizes`. And setting either of them would always replace the entire set of default spacing sizes provided by WordPress.
+
+The default `spacingSizes` slugs provided by WordPress are: `20`, `30`, `40`, `50`, `60`, `70`, and `80`.
+
+The new `defaultSpacingSizes` option gives control over showing default spacing sizes and preventing those defaults from being overridden.
+
+- When set to `true` it will show the default spacing sizes and prevent them from being overridden by the theme.
+- When set to `false` it will hide the default spacing sizes and allow the theme to use the default slugs.
+
+`defaultSpacingSizes` is `true` by default when switching to v3. This is to be consistent with how other `default*` options work such as `settings.color.defaultPalette`, but differs from the behavior in v2.
+
+Additionally, in v3 both `spacingSizes` and `spacingScale` can be set at the same time. Presets defined in `spacingSizes` with slugs matching the generated presets from `spacingSizes` will override the generated ones.
+
+To keep behavior similar to v2 with a v3 theme.json:
+* If you do not have any `spacingSizes` presets or `spacingScale` config defined, `defaultSpacingSizes` can be left out or set to `true`.
+* If you disabled default spacing sizes by setting `spacingScale` to `{ "steps": 0 }`, remove the `spacingScale` config and set `defaultSpacingSizes` to `false`.
+* If you defined only one of either `spacingScale` or `spacingSizes` for your presets, set `defaultSpacingSizes` to `false`.
+* If you defined both `spacingScale` and `spacingSizes`, remove the `spacingSizes` config _and_ set `defaultSpacingSizes` to `false`.
diff --git a/docs/toc.json b/docs/toc.json
index c0ec94fd049a0..fa80ee6c4f440 100644
--- a/docs/toc.json
+++ b/docs/toc.json
@@ -209,6 +209,12 @@
 					},
 					{
 						"docs/reference-guides/interactivity-api/api-reference.md": []
+					},
+					{
+						"docs/reference-guides/interactivity-api/iapi-about.md": []
+					},
+					{
+						"docs/reference-guides/interactivity-api/iapi-faq.md": []
 					}
 				]
 			},
diff --git a/docs/tool/manifest.js b/docs/tool/manifest.js
index e830012bc5770..3c1f0fee2090f 100644
--- a/docs/tool/manifest.js
+++ b/docs/tool/manifest.js
@@ -16,7 +16,6 @@ const componentPaths = glob( 'packages/components/src/*/**/README.md', {
 		'packages/components/src/theme/README.md',
 		'packages/components/src/view/README.md',
 		'packages/components/src/dropdown-menu-v2/README.md',
-		'packages/components/src/progress-bar/README.md',
 		'packages/components/src/tabs/README.md',
 		'packages/components/src/custom-select-control-v2/README.md',
 	],
diff --git a/gutenberg.php b/gutenberg.php
index dc7a76c1531ba..aadebe998d7ab 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality.
  * Requires at least: 6.4
  * Requires PHP: 7.2
- * Version: 18.3.0-rc.1
+ * Version: 18.5.0-rc.1
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
index 7095789722959..8e3c06159a120 100644
--- a/lib/block-supports/background.php
+++ b/lib/block-supports/background.php
@@ -53,10 +53,10 @@ function gutenberg_render_background_support( $block_content, $block ) {
 	}
 
 	$background_styles                    = array();
-	$background_styles['backgroundSize']  = isset( $block_attributes['style']['background']['backgroundSize'] ) ? $block_attributes['style']['background']['backgroundSize'] : 'cover';
 	$background_styles['backgroundImage'] = isset( $block_attributes['style']['background']['backgroundImage'] ) ? $block_attributes['style']['background']['backgroundImage'] : array();
 
-	if ( isset( $background_styles['backgroundImage']['source'] ) && 'file' === $background_styles['backgroundImage']['source'] && isset( $background_styles['backgroundImage']['url'] ) ) {
+	if ( ! empty( $background_styles['backgroundImage'] ) ) {
+		$background_styles['backgroundSize']     = isset( $block_attributes['style']['background']['backgroundSize'] ) ? $block_attributes['style']['background']['backgroundSize'] : 'cover';
 		$background_styles['backgroundPosition'] = isset( $block_attributes['style']['background']['backgroundPosition'] ) ? $block_attributes['style']['background']['backgroundPosition'] : null;
 		$background_styles['backgroundRepeat']   = isset( $block_attributes['style']['background']['backgroundRepeat'] ) ? $block_attributes['style']['background']['backgroundRepeat'] : null;
 
diff --git a/lib/block-supports/block-style-variations.php b/lib/block-supports/block-style-variations.php
new file mode 100644
index 0000000000000..e09bd4ce90bf0
--- /dev/null
+++ b/lib/block-supports/block-style-variations.php
@@ -0,0 +1,413 @@
+<?php
+/**
+ * Block support to enable per-section styling of block types via
+ * block style variations.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Generate block style variation instance name.
+ *
+ * @since 6.6.0
+ *
+ * @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 ) {
+	return $variation . '--' . md5( serialize( $block ) );
+}
+
+/**
+ * Determines the block style variation names within a CSS class string.
+ *
+ * @since 6.6.0
+ *
+ * @param string $class_string CSS class string to look for a variation in.
+ *
+ * @return array|null The block style variation name if found.
+ */
+function gutenberg_get_block_style_variation_name_from_class( $class_string ) {
+	if ( ! is_string( $class_string ) ) {
+		return null;
+	}
+
+	preg_match_all( '/\bis-style-(?!default)(\S+)\b/', $class_string, $matches );
+	return $matches[1] ?? null;
+}
+
+/**
+ * Render the block style variation's styles.
+ *
+ * In the case of nested blocks with variations applied, we want the parent
+ * variation's styles to be rendered before their descendants. This solves the
+ * issue of a block type being styled in both the parent and descendant: we want
+ * the descendant style to take priority, and this is done by loading it after,
+ * in the DOM order. This is why the variation stylesheet generation is in a
+ * different filter.
+ *
+ * @since 6.6.0
+ *
+ * @param array $parsed_block The parsed block.
+ *
+ * @return array The parsed block with block style variation classname added.
+ */
+function gutenberg_render_block_style_variation_support_styles( $parsed_block ) {
+	$classes    = $parsed_block['attrs']['className'] ?? null;
+	$variations = gutenberg_get_block_style_variation_name_from_class( $classes );
+
+	if ( ! $variations ) {
+		return $parsed_block;
+	}
+
+	$tree       = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
+	$theme_json = $tree->get_raw_data();
+
+	// Only the first block style variation with data is supported.
+	$variation_data = array();
+	foreach ( $variations as $variation ) {
+		$variation_data = $theme_json['styles']['blocks'][ $parsed_block['blockName'] ]['variations'][ $variation ] ?? array();
+
+		if ( ! empty( $variation_data ) ) {
+			break;
+		}
+	}
+
+	if ( empty( $variation_data ) ) {
+		return $parsed_block;
+	}
+
+	$variation_instance = gutenberg_create_block_style_variation_instance_name( $parsed_block, $variation );
+	$class_name         = "is-style-$variation_instance";
+	$updated_class_name = $parsed_block['attrs']['className'] . " $class_name";
+
+	/*
+	 * Even though block style variations are effectively theme.json partials,
+	 * they can't be processed completely as though they are.
+	 *
+	 * Block styles support custom selectors to direct specific types of styles
+	 * to inner elements. For example, borders on Image block's get applied to
+	 * the inner `img` element rather than the wrapping `figure`.
+	 *
+	 * The following relocates the "root" block style variation styles to
+	 * under an appropriate blocks property to leverage the preexisting style
+	 * generation for simple block style variations. This way they get the
+	 * custom selectors they need.
+	 *
+	 * The inner elements and block styles for the variation itself are
+	 * still included at the top level but scoped by the variation's selector
+	 * when the stylesheet is generated.
+	 */
+	$elements_data = $variation_data['elements'] ?? array();
+	$blocks_data   = $variation_data['blocks'] ?? array();
+	unset( $variation_data['elements'] );
+	unset( $variation_data['blocks'] );
+
+	_wp_array_set(
+		$blocks_data,
+		array( $parsed_block['blockName'], 'variations', $variation_instance ),
+		$variation_data
+	);
+
+	$config = array(
+		'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+		'styles'  => array(
+			'elements' => $elements_data,
+			'blocks'   => $blocks_data,
+		),
+	);
+
+	// Turn off filter that excludes block nodes. They are needed here for the variation's inner block types.
+	if ( ! is_admin() ) {
+		remove_filter( 'wp_theme_json_get_style_nodes', 'wp_filter_out_block_nodes' );
+	}
+
+	// Temporarily prevent variation instance from being sanitized while processing theme.json.
+	$styles_registry = WP_Block_Styles_Registry::get_instance();
+	$styles_registry->register( $parsed_block['blockName'], array( 'name' => $variation_instance ) );
+
+	$variation_theme_json = new WP_Theme_JSON_Gutenberg( $config, 'blocks' );
+	$variation_styles     = $variation_theme_json->get_stylesheet(
+		array( 'styles' ),
+		array( 'custom' ),
+		array(
+			'skip_root_layout_styles' => true,
+			'scope'                   => ".$class_name",
+		)
+	);
+
+	// Clean up temporary block style now instance styles have been processed.
+	$styles_registry->unregister( $parsed_block['blockName'], $variation_instance );
+
+	// Restore filter that excludes block nodes.
+	if ( ! is_admin() ) {
+		add_filter( 'wp_theme_json_get_style_nodes', 'wp_filter_out_block_nodes' );
+	}
+
+	if ( empty( $variation_styles ) ) {
+		return $parsed_block;
+	}
+
+	wp_register_style( 'block-style-variation-styles', false, array( 'global-styles', 'wp-block-library' ) );
+	wp_add_inline_style( 'block-style-variation-styles', $variation_styles );
+
+	/*
+	 * Add variation instance class name to block's className string so it can
+	 * be enforced in the block markup via render_block filter.
+	 */
+	_wp_array_set( $parsed_block, array( 'attrs', 'className' ), $updated_class_name );
+
+	return $parsed_block;
+}
+
+/**
+ * Ensure the variation block support class name generated and added to
+ * block attributes in the `render_block_data` filter gets applied to the
+ * block's markup.
+ *
+ * @see gutenberg_render_block_style_variation_support_styles
+ *
+ * @since 6.6.0
+ *
+ * @param  string $block_content Rendered block content.
+ * @param  array  $block         Block object.
+ *
+ * @return string                Filtered block content.
+ */
+function gutenberg_render_block_style_variation_class_name( $block_content, $block ) {
+	if ( ! $block_content || empty( $block['attrs']['className'] ) ) {
+		return $block_content;
+	}
+
+	/*
+	 * Matches a class prefixed by `is-style`, followed by the
+	 * variation slug, then `--`, and finally a hash.
+	 *
+	 * See `gutenberg_create_block_style_variation_instance_name` for class generation.
+	 */
+	preg_match( '/\bis-style-(\S+?--\w+)\b/', $block['attrs']['className'], $matches );
+
+	if ( empty( $matches ) ) {
+		return $block_content;
+	}
+
+	$tags = new WP_HTML_Tag_Processor( $block_content );
+
+	if ( $tags->next_tag() ) {
+		/*
+		 * Ensure the variation instance class name set in the
+		 * `render_block_data` filter is applied in markup.
+		 * See `gutenberg_render_block_style_variation_support_styles`.
+		 */
+		$tags->add_class( $matches[0] );
+	}
+
+	return $tags->get_updated_html();
+}
+
+/**
+ * Collects block style variation data for merging with theme.json data.
+ * As each block style variation is processed it is registered if it hasn't
+ * been already. This registration is required for later sanitization of
+ * theme.json data.
+ *
+ * @since 6.6.0
+ *
+ * @param array $variations Shared block style variations.
+ *
+ * @return array Block variations data to be merged under `styles.blocks`.
+ */
+function gutenberg_resolve_and_register_block_style_variations( $variations ) {
+	$variations_data = array();
+
+	if ( empty( $variations ) ) {
+		return $variations_data;
+	}
+
+	$registry              = WP_Block_Styles_Registry::get_instance();
+	$have_named_variations = ! wp_is_numeric_array( $variations );
+
+	foreach ( $variations as $key => $variation ) {
+		$supported_blocks = $variation['blockTypes'] ?? array();
+
+		/*
+		 * Standalone theme.json partial files for block style variations
+		 * will have their styles under a top-level property by the same name.
+		 * Variations defined within an existing theme.json or theme style
+		 * variation will themselves already be the required styles data.
+		 */
+		$variation_data = $variation['styles'] ?? $variation;
+
+		if ( empty( $variation_data ) ) {
+			continue;
+		}
+
+		/*
+		 * Block style variations read in via standalone theme.json partials
+		 * need to have their name set to the kebab case version of their title.
+		 */
+		$variation_name  = $have_named_variations ? $key : _wp_to_kebab_case( $variation['title'] );
+		$variation_label = $variation['title'] ?? $variation_name;
+
+		foreach ( $supported_blocks as $block_type ) {
+			$registered_styles = $registry->get_registered_styles_for_block( $block_type );
+
+			// Register block style variation if it hasn't already been registered.
+			if ( ! array_key_exists( $variation_name, $registered_styles ) ) {
+				gutenberg_register_block_style(
+					$block_type,
+					array(
+						'name'  => $variation_name,
+						'label' => $variation_label,
+					)
+				);
+			}
+
+			// Add block style variation data under current block type.
+			$path = array( $block_type, 'variations', $variation_name );
+			_wp_array_set( $variations_data, $path, $variation_data );
+		}
+	}
+
+	return $variations_data;
+}
+
+/**
+ * Merges variations data with existing theme.json data ensuring that the
+ * current theme.json data values take precedence.
+ *
+ * @since 6.6.0
+ *
+ * @param array                        $variations_data Block style variations data keyed by block type.
+ * @param WP_Theme_JSON_Data_Gutenberg $theme_json      Current theme.json data.
+ * @param string                       $origin          Origin for the theme.json data.
+ *
+ * @return WP_Theme_JSON_Gutenberg The merged theme.json data.
+ */
+function gutenberg_merge_block_style_variations_data( $variations_data, $theme_json, $origin = 'theme' ) {
+	if ( empty( $variations_data ) ) {
+		return $theme_json;
+	}
+
+	$variations_theme_json_data = array(
+		'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+		'styles'  => array( 'blocks' => $variations_data ),
+	);
+
+	$variations_theme_json = new WP_Theme_JSON_Data_Gutenberg( $variations_theme_json_data, $origin );
+
+	/*
+	 * Merge the current theme.json data over shared variation data so that
+	 * any explicit per block variation values take precedence.
+	 */
+	return $variations_theme_json->update_with( $theme_json->get_data() );
+}
+
+/**
+ * Merges any shared block style variation definitions from a theme style
+ * variation into their appropriate block type within theme json styles. Any
+ * custom user selections already made will take precedence over the shared
+ * style variation value.
+ *
+ * @since 6.6.0
+ *
+ * @param WP_Theme_JSON_Data_Gutenberg $theme_json Current theme.json data.
+ *
+ * @return WP_Theme_JSON_Data_Gutenberg
+ */
+function gutenberg_resolve_block_style_variations_from_theme_style_variation( $theme_json ) {
+	$theme_json_data   = $theme_json->get_data();
+	$shared_variations = $theme_json_data['styles']['blocks']['variations'] ?? array();
+	$variations_data   = gutenberg_resolve_and_register_block_style_variations( $shared_variations );
+
+	return gutenberg_merge_block_style_variations_data( $variations_data, $theme_json, 'user' );
+}
+
+/**
+ * Merges block style variation data sourced from standalone partial
+ * theme.json files.
+ *
+ * @since 6.6.0
+ *
+ * @param WP_Theme_JSON_Data_Gutenberg $theme_json Current theme.json data.
+ *
+ * @return WP_Theme_JSON_Data_Gutenberg
+ */
+function gutenberg_resolve_block_style_variations_from_theme_json_partials( $theme_json ) {
+	$block_style_variations = WP_Theme_JSON_Resolver_Gutenberg::get_style_variations( 'block' );
+	$variations_data        = gutenberg_resolve_and_register_block_style_variations( $block_style_variations );
+
+	return gutenberg_merge_block_style_variations_data( $variations_data, $theme_json );
+}
+
+/**
+ * Merges shared block style variations registered within the
+ * `styles.blocks.variations` property of the primary theme.json file.
+ *
+ * @since 6.6.0
+ *
+ * @param WP_Theme_JSON_Data_Gutenberg $theme_json Current theme.json data.
+ *
+ * @return WP_Theme_JSON_Data_Gutenberg
+ */
+function gutenberg_resolve_block_style_variations_from_primary_theme_json( $theme_json ) {
+	$theme_json_data        = $theme_json->get_data();
+	$block_style_variations = $theme_json_data['styles']['blocks']['variations'] ?? array();
+	$variations_data        = gutenberg_resolve_and_register_block_style_variations( $block_style_variations );
+
+	return gutenberg_merge_block_style_variations_data( $variations_data, $theme_json );
+}
+
+/**
+ * Merges block style variations registered via the block styles registry with a
+ * style object, under their appropriate block types within theme.json styles.
+ * Any variation values defined within the theme.json specific to a block type
+ * will take precedence over these shared definitions.
+ *
+ * @since 6.6.0
+ *
+ * @param WP_Theme_JSON_Data_Gutenberg $theme_json Current theme.json data.
+ *
+ * @return WP_Theme_JSON_Data_Gutenberg
+ */
+function gutenberg_resolve_block_style_variations_from_styles_registry( $theme_json ) {
+	$registry        = WP_Block_Styles_Registry::get_instance();
+	$styles          = $registry->get_all_registered();
+	$variations_data = array();
+
+	foreach ( $styles as $block_type => $variations ) {
+		foreach ( $variations as $variation_name => $variation ) {
+			if ( ! empty( $variation['style_data'] ) ) {
+				$path = array( $block_type, 'variations', $variation_name );
+				_wp_array_set( $variations_data, $path, $variation['style_data'] );
+			}
+		}
+	}
+
+	return gutenberg_merge_block_style_variations_data( $variations_data, $theme_json );
+}
+
+/**
+ * Enqueues styles for block style variations.
+ *
+ * @since 6.6.0
+ */
+function gutenberg_enqueue_block_style_variation_styles() {
+	wp_enqueue_style( 'block-style-variation-styles' );
+}
+
+// Register the block support.
+WP_Block_Supports::get_instance()->register( 'block-style-variation', array() );
+
+add_filter( 'render_block_data', 'gutenberg_render_block_style_variation_support_styles', 10, 2 );
+add_filter( 'render_block', 'gutenberg_render_block_style_variation_class_name', 10, 2 );
+add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_block_style_variation_styles', 1 );
+
+// Resolve block style variations from all their potential sources. The order here is deliberate.
+add_filter( 'wp_theme_json_data_theme', 'gutenberg_resolve_block_style_variations_from_primary_theme_json', 10, 1 );
+add_filter( 'wp_theme_json_data_theme', 'gutenberg_resolve_block_style_variations_from_theme_json_partials', 10, 1 );
+add_filter( 'wp_theme_json_data_theme', 'gutenberg_resolve_block_style_variations_from_styles_registry', 10, 1 );
+
+add_filter( 'wp_theme_json_data_user', 'gutenberg_resolve_block_style_variations_from_theme_style_variation', 10, 1 );
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index e18dcba462a5e..dc5fe2e6a87da 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -573,112 +573,116 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 		return $block_content;
 	}
 
-	$outer_class_names         = array();
-	$container_content_class   = wp_unique_id( 'wp-container-content-' );
-	$child_layout_declarations = array();
-	$child_layout_styles       = array();
-
-	$self_stretch = isset( $block['attrs']['style']['layout']['selfStretch'] ) ? $block['attrs']['style']['layout']['selfStretch'] : null;
-
-	if ( 'fixed' === $self_stretch && isset( $block['attrs']['style']['layout']['flexSize'] ) ) {
-		$child_layout_declarations['flex-basis'] = $block['attrs']['style']['layout']['flexSize'];
-		$child_layout_declarations['box-sizing'] = 'border-box';
-	} elseif ( 'fill' === $self_stretch ) {
-		$child_layout_declarations['flex-grow'] = '1';
-	}
+	$outer_class_names = array();
 
-	$column_start = isset( $block['attrs']['style']['layout']['columnStart'] ) ? $block['attrs']['style']['layout']['columnStart'] : null;
-	$column_span  = isset( $block['attrs']['style']['layout']['columnSpan'] ) ? $block['attrs']['style']['layout']['columnSpan'] : null;
-	if ( $column_start && $column_span ) {
-		$child_layout_declarations['grid-column'] = "$column_start / span $column_span";
-	} elseif ( $column_start ) {
-		$child_layout_declarations['grid-column'] = "$column_start";
-	} elseif ( $column_span ) {
-		$child_layout_declarations['grid-column'] = "span $column_span";
-	}
+	// Child layout specific logic.
+	if ( $child_layout ) {
+		$container_content_class   = wp_unique_prefixed_id( 'wp-container-content-' );
+		$child_layout_declarations = array();
+		$child_layout_styles       = array();
 
-	$row_start = isset( $block['attrs']['style']['layout']['rowStart'] ) ? $block['attrs']['style']['layout']['rowStart'] : null;
-	$row_span  = isset( $block['attrs']['style']['layout']['rowSpan'] ) ? $block['attrs']['style']['layout']['rowSpan'] : null;
-	if ( $row_start && $row_span ) {
-		$child_layout_declarations['grid-row'] = "$row_start / span $row_span";
-	} elseif ( $row_start ) {
-		$child_layout_declarations['grid-row'] = "$row_start";
-	} elseif ( $row_span ) {
-		$child_layout_declarations['grid-row'] = "span $row_span";
-	}
+		$self_stretch = isset( $block['attrs']['style']['layout']['selfStretch'] ) ? $block['attrs']['style']['layout']['selfStretch'] : null;
 
-	$child_layout_styles[] = array(
-		'selector'     => ".$container_content_class",
-		'declarations' => $child_layout_declarations,
-	);
+		if ( 'fixed' === $self_stretch && isset( $block['attrs']['style']['layout']['flexSize'] ) ) {
+			$child_layout_declarations['flex-basis'] = $block['attrs']['style']['layout']['flexSize'];
+			$child_layout_declarations['box-sizing'] = 'border-box';
+		} elseif ( 'fill' === $self_stretch ) {
+			$child_layout_declarations['flex-grow'] = '1';
+		}
 
-	$minimum_column_width = isset( $block['parentLayout']['minimumColumnWidth'] ) ? $block['parentLayout']['minimumColumnWidth'] : null;
-	$column_count         = isset( $block['parentLayout']['columnCount'] ) ? $block['parentLayout']['columnCount'] : null;
+		$column_start = isset( $block['attrs']['style']['layout']['columnStart'] ) ? $block['attrs']['style']['layout']['columnStart'] : null;
+		$column_span  = isset( $block['attrs']['style']['layout']['columnSpan'] ) ? $block['attrs']['style']['layout']['columnSpan'] : null;
+		if ( $column_start && $column_span ) {
+			$child_layout_declarations['grid-column'] = "$column_start / span $column_span";
+		} elseif ( $column_start ) {
+			$child_layout_declarations['grid-column'] = "$column_start";
+		} elseif ( $column_span ) {
+			$child_layout_declarations['grid-column'] = "span $column_span";
+		}
 
-	/*
-	 * If columnSpan or columnStart is set, and the parent grid is responsive, i.e. if it has a minimumColumnWidth set,
-	 * the columnSpan should be removed once the grid is smaller than the span, and columnStart should be removed
-	 * once the grid has less columns than the start.
-	 * If there's a minimumColumnWidth, the grid is responsive. But if the minimumColumnWidth value wasn't changed, it won't be set.
-	 * In that case, if columnCount doesn't exist, we can assume that the grid is responsive.
-	 */
-	if ( ( $column_span || $column_start ) && ( $minimum_column_width || ! $column_count ) ) {
-		$column_span_number  = floatval( $column_span );
-		$column_start_number = floatval( $column_start );
-		$highest_number      = max( $column_span_number, $column_start_number );
-		$parent_column_width = $minimum_column_width ? $minimum_column_width : '12rem';
-		$parent_column_value = floatval( $parent_column_width );
-		$parent_column_unit  = explode( $parent_column_value, $parent_column_width );
+		$row_start = isset( $block['attrs']['style']['layout']['rowStart'] ) ? $block['attrs']['style']['layout']['rowStart'] : null;
+		$row_span  = isset( $block['attrs']['style']['layout']['rowSpan'] ) ? $block['attrs']['style']['layout']['rowSpan'] : null;
+		if ( $row_start && $row_span ) {
+			$child_layout_declarations['grid-row'] = "$row_start / span $row_span";
+		} elseif ( $row_start ) {
+			$child_layout_declarations['grid-row'] = "$row_start";
+		} elseif ( $row_span ) {
+			$child_layout_declarations['grid-row'] = "span $row_span";
+		}
+
+		$child_layout_styles[] = array(
+			'selector'     => ".$container_content_class",
+			'declarations' => $child_layout_declarations,
+		);
+
+		$minimum_column_width = isset( $block['parentLayout']['minimumColumnWidth'] ) ? $block['parentLayout']['minimumColumnWidth'] : null;
+		$column_count         = isset( $block['parentLayout']['columnCount'] ) ? $block['parentLayout']['columnCount'] : null;
 
 		/*
-		 * If there is no unit, the width has somehow been mangled so we reset both unit and value
-		 * to defaults.
-		 * Additionally, the unit should be one of px, rem or em, so that also needs to be checked.
+		 * If columnSpan or columnStart is set, and the parent grid is responsive, i.e. if it has a minimumColumnWidth set,
+		 * the columnSpan should be removed once the grid is smaller than the span, and columnStart should be removed
+		 * once the grid has less columns than the start.
+		 * If there's a minimumColumnWidth, the grid is responsive. But if the minimumColumnWidth value wasn't changed, it won't be set.
+		 * In that case, if columnCount doesn't exist, we can assume that the grid is responsive.
 		 */
-		if ( count( $parent_column_unit ) <= 1 ) {
-			$parent_column_unit  = 'rem';
-			$parent_column_value = 12;
-		} else {
-			$parent_column_unit = $parent_column_unit[1];
+		if ( ( $column_span || $column_start ) && ( $minimum_column_width || ! $column_count ) ) {
+			$column_span_number  = floatval( $column_span );
+			$column_start_number = floatval( $column_start );
+			$highest_number      = max( $column_span_number, $column_start_number );
+			$parent_column_width = $minimum_column_width ? $minimum_column_width : '12rem';
+			$parent_column_value = floatval( $parent_column_width );
+			$parent_column_unit  = explode( $parent_column_value, $parent_column_width );
+
+			/*
+			 * If there is no unit, the width has somehow been mangled so we reset both unit and value
+			 * to defaults.
+			 * Additionally, the unit should be one of px, rem or em, so that also needs to be checked.
+			 */
+			if ( count( $parent_column_unit ) <= 1 ) {
+				$parent_column_unit  = 'rem';
+				$parent_column_value = 12;
+			} else {
+				$parent_column_unit = $parent_column_unit[1];
 
-			if ( ! in_array( $parent_column_unit, array( 'px', 'rem', 'em' ), true ) ) {
-				$parent_column_unit = 'rem';
+				if ( ! in_array( $parent_column_unit, array( 'px', 'rem', 'em' ), true ) ) {
+					$parent_column_unit = 'rem';
+				}
 			}
+
+			/*
+			 * A default gap value is used for this computation because custom gap values may not be
+			 * viable to use in the computation of the container query value.
+			 */
+			$default_gap_value     = 'px' === $parent_column_unit ? 24 : 1.5;
+			$container_query_value = $highest_number * $parent_column_value + ( $highest_number - 1 ) * $default_gap_value;
+			$container_query_value = $container_query_value . $parent_column_unit;
+			// If a span is set we want to preserve it as long as possible, otherwise we just reset the value.
+			$grid_column_value = $column_span ? '1/-1' : 'auto';
+
+			$child_layout_styles[] = array(
+				'rules_group'  => "@container (max-width: $container_query_value )",
+				'selector'     => ".$container_content_class",
+				'declarations' => array(
+					'grid-column' => $grid_column_value,
+				),
+			);
 		}
 
 		/*
-		 * A default gap value is used for this computation because custom gap values may not be
-		 * viable to use in the computation of the container query value.
+		 * Add to the style engine store to enqueue and render layout styles.
+		 * Return styles here just to check if any exist.
 		 */
-		$default_gap_value     = 'px' === $parent_column_unit ? 24 : 1.5;
-		$container_query_value = $highest_number * $parent_column_value + ( $highest_number - 1 ) * $default_gap_value;
-		$container_query_value = $container_query_value . $parent_column_unit;
-		// If a span is set we want to preserve it as long as possible, otherwise we just reset the value.
-		$grid_column_value = $column_span ? '1/-1' : 'auto';
-
-		$child_layout_styles[] = array(
-			'rules_group'  => "@container (max-width: $container_query_value )",
-			'selector'     => ".$container_content_class",
-			'declarations' => array(
-				'grid-column' => $grid_column_value,
-			),
+		$child_css = gutenberg_style_engine_get_stylesheet_from_css_rules(
+			$child_layout_styles,
+			array(
+				'context'  => 'block-supports',
+				'prettify' => false,
+			)
 		);
-	}
 
-	/*
-	 * Add to the style engine store to enqueue and render layout styles.
-	 * Return styles here just to check if any exist.
-	 */
-	$child_css = gutenberg_style_engine_get_stylesheet_from_css_rules(
-		$child_layout_styles,
-		array(
-			'context'  => 'block-supports',
-			'prettify' => false,
-		)
-	);
-
-	if ( $child_css ) {
-		$outer_class_names[] = $container_content_class;
+		if ( $child_css ) {
+			$outer_class_names[] = $container_content_class;
+		}
 	}
 
 	// Prep the processor for modifying the block output.
diff --git a/lib/block-template-utils.php b/lib/block-template-utils.php
new file mode 100644
index 0000000000000..a644047d3cfdc
--- /dev/null
+++ b/lib/block-template-utils.php
@@ -0,0 +1,114 @@
+<?php
+/**
+ * Utilities used to fetch and create templates and template parts.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Creates an export of the current templates and
+ * template parts from the site editor at the
+ * specified path in a ZIP file.
+ *
+ * @since 5.9.0
+ * @since 6.0.0 Adds the whole theme to the export archive.
+ *
+ * @global string $wp_version The WordPress version string.
+ *
+ * @return WP_Error|string Path of the ZIP file or error on failure.
+ */
+function gutenberg_generate_block_templates_export_file() {
+	global $wp_version;
+
+	if ( ! class_exists( 'ZipArchive' ) ) {
+		return new WP_Error( 'missing_zip_package', __( 'Zip Export not supported.', 'gutenberg' ) );
+	}
+
+	$obscura    = wp_generate_password( 12, false, false );
+	$theme_name = basename( get_stylesheet() );
+	$filename   = get_temp_dir() . $theme_name . $obscura . '.zip';
+
+	$zip = new ZipArchive();
+	if ( true !== $zip->open( $filename, ZipArchive::CREATE | ZipArchive::OVERWRITE ) ) {
+		return new WP_Error( 'unable_to_create_zip', __( 'Unable to open export file (archive) for writing.', 'gutenberg' ) );
+	}
+
+	$zip->addEmptyDir( 'templates' );
+	$zip->addEmptyDir( 'parts' );
+
+	// Get path of the theme.
+	$theme_path = wp_normalize_path( get_stylesheet_directory() );
+
+	// Create recursive directory iterator.
+	$theme_files = new RecursiveIteratorIterator(
+		new RecursiveDirectoryIterator( $theme_path ),
+		RecursiveIteratorIterator::LEAVES_ONLY
+	);
+
+	// Make a copy of the current theme.
+	foreach ( $theme_files as $file ) {
+		// Skip directories as they are added automatically.
+		if ( ! $file->isDir() ) {
+			// Get real and relative path for current file.
+			$file_path     = wp_normalize_path( $file );
+			$relative_path = substr( $file_path, strlen( $theme_path ) + 1 );
+
+			if ( ! wp_is_theme_directory_ignored( $relative_path ) ) {
+				$zip->addFile( $file_path, $relative_path );
+			}
+		}
+	}
+
+	// Load templates into the zip file.
+	$templates = gutenberg_get_block_templates();
+	foreach ( $templates as $template ) {
+		$template->content = traverse_and_serialize_blocks(
+			parse_blocks( $template->content ),
+			'_remove_theme_attribute_from_template_part_block'
+		);
+
+		$zip->addFromString(
+			'templates/' . $template->slug . '.html',
+			$template->content
+		);
+	}
+
+	// Load template parts into the zip file.
+	$template_parts = gutenberg_get_block_templates( array(), 'wp_template_part' );
+	foreach ( $template_parts as $template_part ) {
+		$zip->addFromString(
+			'parts/' . $template_part->slug . '.html',
+			$template_part->content
+		);
+	}
+
+	// Load theme.json into the zip file.
+	$tree = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data( array(), array( 'with_supports' => false ) );
+	// Merge with user data.
+	$tree->merge( WP_Theme_JSON_Resolver_Gutenberg::get_user_data() );
+
+	$theme_json_raw = $tree->get_data();
+	// If a version is defined, add a schema.
+	if ( $theme_json_raw['version'] ) {
+		$theme_json_version = 'wp/' . substr( $wp_version, 0, 3 );
+		$schema             = array( '$schema' => 'https://schemas.wp.org/' . $theme_json_version . '/theme.json' );
+		$theme_json_raw     = array_merge( $schema, $theme_json_raw );
+	}
+
+	// Convert to a string.
+	$theme_json_encoded = wp_json_encode( $theme_json_raw, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE );
+
+	// Replace 4 spaces with a tab.
+	$theme_json_tabbed = preg_replace( '~(?:^|\G)\h{4}~m', "\t", $theme_json_encoded );
+
+	// Add the theme.json file to the zip.
+	$zip->addFromString(
+		'theme.json',
+		$theme_json_tabbed
+	);
+
+	// Save changes to the zip file.
+	$zip->close();
+
+	return $filename;
+}
diff --git a/lib/blocks.php b/lib/blocks.php
index eed9142db436a..679219cc6ff77 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -26,7 +26,6 @@ function gutenberg_reregister_core_block_types() {
 				'form-submit-button',
 				'group',
 				'html',
-				'list',
 				'list-item',
 				'missing',
 				'more',
@@ -76,6 +75,7 @@ function gutenberg_reregister_core_block_types() {
 				'heading.php'                      => 'core/heading',
 				'latest-comments.php'              => 'core/latest-comments',
 				'latest-posts.php'                 => 'core/latest-posts',
+				'list.php'                         => 'core/list',
 				'loginout.php'                     => 'core/loginout',
 				'media-text.php'                   => 'core/media-text',
 				'navigation.php'                   => 'core/navigation',
diff --git a/lib/class-wp-rest-edit-site-export-controller-gutenberg.php b/lib/class-wp-rest-edit-site-export-controller-gutenberg.php
new file mode 100644
index 0000000000000..b05de230dd0cc
--- /dev/null
+++ b/lib/class-wp-rest-edit-site-export-controller-gutenberg.php
@@ -0,0 +1,46 @@
+<?php
+/**
+ * Controller which provides REST endpoint for exporting current templates
+ * and template parts.
+ *
+ * This class extension exists so that theme exporting takes into account any updates/changes to
+ * WP_Theme_JSON_Gutenberg, WP_Theme_JSON_Resolver_Gutenberg or related classes.
+ *
+ * @package    gutenberg
+ * @subpackage REST_API
+ * @since 5.9.0
+ */
+
+if ( class_exists( 'WP_REST_Edit_Site_Export_Controller_Gutenberg' ) ) {
+	return;
+}
+
+class WP_REST_Edit_Site_Export_Controller_Gutenberg extends WP_REST_Edit_Site_Export_Controller {
+	/**
+	 * Output a ZIP file with an export of the current templates
+	 * and template parts from the site editor, and close the connection.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @return WP_Error|void
+	 */
+	public function export() {
+		// Generate the export file.
+		$filename = gutenberg_generate_block_templates_export_file();
+
+		if ( is_wp_error( $filename ) ) {
+			$filename->add_data( array( 'status' => 500 ) );
+
+			return $filename;
+		}
+
+		$theme_name = basename( get_stylesheet() );
+		header( 'Content-Type: application/zip' );
+		header( 'Content-Disposition: attachment; filename=' . $theme_name . '.zip' );
+		header( 'Content-Length: ' . filesize( $filename ) );
+		flush();
+		readfile( $filename );
+		unlink( $filename );
+		exit;
+	}
+}
diff --git a/lib/class-wp-rest-global-styles-controller-gutenberg.php b/lib/class-wp-rest-global-styles-controller-gutenberg.php
index 79cb8af59df4f..9bbca1ffcab40 100644
--- a/lib/class-wp-rest-global-styles-controller-gutenberg.php
+++ b/lib/class-wp-rest-global-styles-controller-gutenberg.php
@@ -1,6 +1,6 @@
 <?php
 /**
- * REST API: Try: bundle WP_Theme_JSON class instead of inheriting per WordPress version class
+ * REST API: Bundle WP_Theme_JSON class instead of inheriting per WordPress version class
  *
  * Changes to this class should be synced to the corresponding class
  * in WordPress core: src/wp-includes/rest-api/endpoints/class-wp-rest-global-styles-controller.php.
@@ -357,6 +357,7 @@ protected function prepare_item_for_database( $request ) {
 	 *
 	 * @since 5.9.0
 	 * @since 6.2.0 Handling of style.css was added to WP_Theme_JSON.
+	 * @since 6.6.0 Added custom relative theme file URIs to `_links`.
 	 *
 	 * @param WP_Post         $post    Global Styles post object.
 	 * @param WP_REST_Request $request Request object.
@@ -366,8 +367,10 @@ public function prepare_item_for_response( $post, $request ) { // phpcs:ignore V
 		$raw_config                       = json_decode( $post->post_content, true );
 		$is_global_styles_user_theme_json = isset( $raw_config['isGlobalStylesUserThemeJSON'] ) && true === $raw_config['isGlobalStylesUserThemeJSON'];
 		$config                           = array();
+		$theme_json                       = null;
 		if ( $is_global_styles_user_theme_json ) {
-			$config = ( new WP_Theme_JSON_Gutenberg( $raw_config, 'custom' ) )->get_raw_data();
+			$theme_json = new WP_Theme_JSON_Gutenberg( $raw_config, 'custom' );
+			$config     = $theme_json->get_raw_data();
 		}
 
 		// Base fields for every post.
@@ -409,6 +412,13 @@ public function prepare_item_for_response( $post, $request ) { // phpcs:ignore V
 
 		if ( rest_is_field_included( '_links', $fields ) || rest_is_field_included( '_embedded', $fields ) ) {
 			$links = $this->prepare_links( $post->ID );
+			// Only return resolved URIs for get requests to user theme JSON.
+			if ( $theme_json ) {
+				$resolved_theme_uris = WP_Theme_JSON_Resolver_Gutenberg::get_resolved_theme_uris( $theme_json );
+				if ( ! empty( $resolved_theme_uris ) ) {
+					$links['https://api.w.org/theme-file'] = $resolved_theme_uris;
+				}
+			}
 			$response->add_links( $links );
 			if ( ! empty( $links['self']['href'] ) ) {
 				$actions = $this->get_available_actions();
@@ -620,18 +630,22 @@ public function get_theme_item( $request ) {
 			$data['styles'] = isset( $raw_data['styles'] ) ? $raw_data['styles'] : array();
 		}
 
-		$context = ! empty( $request['context'] ) ? $request['context'] : 'view';
-		$data    = $this->add_additional_fields_to_object( $data, $request );
-		$data    = $this->filter_response_by_context( $data, $context );
-
+		$context  = ! empty( $request['context'] ) ? $request['context'] : 'view';
+		$data     = $this->add_additional_fields_to_object( $data, $request );
+		$data     = $this->filter_response_by_context( $data, $context );
 		$response = rest_ensure_response( $data );
 
 		if ( rest_is_field_included( '_links', $fields ) || rest_is_field_included( '_embedded', $fields ) ) {
-			$links = array(
+			$links               = array(
 				'self' => array(
 					'href' => rest_url( sprintf( '%s/%s/themes/%s', $this->namespace, $this->rest_base, $request['stylesheet'] ) ),
 				),
 			);
+			$resolved_theme_uris = WP_Theme_JSON_Resolver_Gutenberg::get_resolved_theme_uris( $theme );
+			if ( ! empty( $resolved_theme_uris ) ) {
+				$links['https://api.w.org/theme-file'] = $resolved_theme_uris;
+			}
+
 			$response->add_links( $links );
 		}
 
@@ -671,6 +685,7 @@ public function get_theme_items_permissions_check( $request ) { // phpcs:ignore
 	 * @since 6.0.0
 	 * @since 6.2.0 Returns parent theme variations, if they exist.
 	 * @since 6.4.0 Removed unnecessary local variable.
+	 * @since 6.6.0 Added custom relative theme file URIs to `_links` for each item.
 	 *
 	 * @param WP_REST_Request $request The request instance.
 	 *
@@ -686,9 +701,25 @@ public function get_theme_items( $request ) {
 			);
 		}
 
+		$response   = array();
 		$variations = WP_Theme_JSON_Resolver_Gutenberg::get_style_variations();
 
-		return rest_ensure_response( $variations );
+		// Add resolved theme asset links.
+		foreach ( $variations as $variation ) {
+			$variation_theme_json = new WP_Theme_JSON_Gutenberg( $variation );
+			$resolved_theme_uris  = WP_Theme_JSON_Resolver_Gutenberg::get_resolved_theme_uris( $variation_theme_json );
+			$data                 = rest_ensure_response( $variation );
+			if ( ! empty( $resolved_theme_uris ) ) {
+				$data->add_links(
+					array(
+						'https://api.w.org/theme-file' => $resolved_theme_uris,
+					)
+				);
+			}
+			$response[] = $this->prepare_response_for_collection( $data );
+		}
+
+		return rest_ensure_response( $response );
 	}
 
 	/**
diff --git a/lib/class-wp-theme-json-data-gutenberg.php b/lib/class-wp-theme-json-data-gutenberg.php
index c564016b1a711..4ff7775f4b559 100644
--- a/lib/class-wp-theme-json-data-gutenberg.php
+++ b/lib/class-wp-theme-json-data-gutenberg.php
@@ -68,4 +68,15 @@ public function update_with( $new_data ) {
 	public function get_data() {
 		return $this->theme_json->get_raw_data();
 	}
+
+	/**
+	 * Return theme JSON object.
+	 *
+	 * @since 18.3.0
+	 *
+	 * @return WP_Theme_JSON
+	 */
+	public function get_theme_json() {
+		return $this->theme_json;
+	}
 }
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 77004253bea86..3f45b137d186d 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -123,9 +123,20 @@ class WP_Theme_JSON_Gutenberg {
 	 * @since 6.0.0 Replaced `override` with `prevent_override` and updated the
 	 *              `prevent_override` value for `color.duotone` to use `color.defaultDuotone`.
 	 * @since 6.2.0 Added 'shadow' presets.
+	 * @since 6.6.0 Updated the 'prevent_override' value for font size presets to use 'typography.defaultFontSizes' and spacing size presets to use `spacing.defaultSpacingSizes`.
+	 * @since 6.6.0 Added `aspectRatios`.
 	 * @var array
 	 */
 	const PRESETS_METADATA = array(
+		array(
+			'path'              => array( 'dimensions', 'aspectRatios' ),
+			'prevent_override'  => array( 'dimensions', 'defaultAspectRatios' ),
+			'use_default_names' => false,
+			'value_key'         => 'ratio',
+			'css_vars'          => '--wp--preset--aspect-ratio--$slug',
+			'classes'           => array(),
+			'properties'        => array( 'aspect-ratio' ),
+		),
 		array(
 			'path'              => array( 'color', 'palette' ),
 			'prevent_override'  => array( 'color', 'defaultPalette' ),
@@ -177,7 +188,7 @@ class WP_Theme_JSON_Gutenberg {
 		),
 		array(
 			'path'              => array( 'spacing', 'spacingSizes' ),
-			'prevent_override'  => false,
+			'prevent_override'  => array( 'spacing', 'defaultSpacingSizes' ),
 			'use_default_names' => true,
 			'value_key'         => 'size',
 			'css_vars'          => '--wp--preset--spacing--$slug',
@@ -310,7 +321,6 @@ class WP_Theme_JSON_Gutenberg {
 		),
 		'background-image' => array(
 			array( 'background', 'backgroundImage', 'url' ),
-			array( 'background', 'backgroundImage', 'source' ),
 		),
 	);
 
@@ -339,6 +349,7 @@ class WP_Theme_JSON_Gutenberg {
 	 * @var string[]
 	 */
 	const VALID_TOP_LEVEL_KEYS = array(
+		'blockTypes',
 		'customTemplates',
 		'description',
 		'patterns',
@@ -397,8 +408,10 @@ class WP_Theme_JSON_Gutenberg {
 		),
 		'custom'                        => null,
 		'dimensions'                    => array(
-			'aspectRatio' => null,
-			'minHeight'   => null,
+			'aspectRatio'         => null,
+			'aspectRatios'        => null,
+			'defaultAspectRatios' => null,
+			'minHeight'           => null,
 		),
 		'layout'                        => array(
 			'contentSize'                   => null,
@@ -415,13 +428,14 @@ class WP_Theme_JSON_Gutenberg {
 			'sticky' => null,
 		),
 		'spacing'                       => array(
-			'customSpacingSize' => null,
-			'spacingSizes'      => null,
-			'spacingScale'      => null,
-			'blockGap'          => null,
-			'margin'            => null,
-			'padding'           => null,
-			'units'             => null,
+			'customSpacingSize'   => null,
+			'defaultSpacingSizes' => null,
+			'spacingSizes'        => null,
+			'spacingScale'        => null,
+			'blockGap'            => null,
+			'margin'              => null,
+			'padding'             => null,
+			'units'               => null,
 		),
 		'shadow'                        => array(
 			'presets'        => null,
@@ -483,7 +497,7 @@ class WP_Theme_JSON_Gutenberg {
 	 *              updated `blockGap` to be allowed at any level.
 	 * @since 6.2.0 Added `outline`, and `minHeight` properties.
 	 * @since 6.6.0 Added `background` sub properties to top-level only.
-	 *
+	 * @since 6.6.0 Added `dimensions.aspectRatio`.
 	 * @var array
 	 */
 	const VALID_STYLES = array(
@@ -715,6 +729,8 @@ public static function get_element_class_name( $element ) {
 	 * Constructor.
 	 *
 	 * @since 5.8.0
+	 * @since 6.6.0 Key spacingScale by origin, and pre-generate the
+	 *              spacingSizes from spacingScale.
 	 *
 	 * @param array  $theme_json A structure that follows the theme.json schema.
 	 * @param string $origin     Optional. What source of data this object represents.
@@ -730,8 +746,8 @@ public function __construct( $theme_json = array( 'version' => WP_Theme_JSON_Gut
 		$valid_block_names   = array_keys( $registry->get_all_registered() );
 		$valid_element_names = array_keys( static::ELEMENTS );
 		$valid_variations    = static::get_valid_block_style_variations();
-		$theme_json          = static::sanitize( $this->theme_json, $valid_block_names, $valid_element_names, $valid_variations );
-		$this->theme_json    = static::maybe_opt_in_into_settings( $theme_json );
+		$this->theme_json    = static::sanitize( $this->theme_json, $valid_block_names, $valid_element_names, $valid_variations );
+		$this->theme_json    = static::maybe_opt_in_into_settings( $this->theme_json );
 
 		// Internally, presets are keyed by origin.
 		$nodes = static::get_setting_nodes( $this->theme_json );
@@ -750,6 +766,27 @@ public function __construct( $theme_json = array( 'version' => WP_Theme_JSON_Gut
 				}
 			}
 		}
+
+		// In addition to presets, spacingScale (which generates presets) is also keyed by origin.
+		$scale_path    = array( 'settings', 'spacing', 'spacingScale' );
+		$spacing_scale = _wp_array_get( $this->theme_json, $scale_path, null );
+		if ( null !== $spacing_scale ) {
+			// If the spacingScale is not already keyed by origin.
+			if ( empty( array_intersect( array_keys( $spacing_scale ), static::VALID_ORIGINS ) ) ) {
+				_wp_array_set( $this->theme_json, $scale_path, array( $origin => $spacing_scale ) );
+			}
+		}
+
+		// Pre-generate the spacingSizes from spacingScale.
+		$scale_path    = array( 'settings', 'spacing', 'spacingScale', $origin );
+		$spacing_scale = _wp_array_get( $this->theme_json, $scale_path, null );
+		if ( isset( $spacing_scale ) ) {
+			$sizes_path           = array( 'settings', 'spacing', 'spacingSizes', $origin );
+			$spacing_sizes        = _wp_array_get( $this->theme_json, $sizes_path, array() );
+			$spacing_scale_sizes  = static::compute_spacing_sizes( $spacing_scale );
+			$merged_spacing_sizes = static::merge_spacing_sizes( $spacing_scale_sizes, $spacing_sizes );
+			_wp_array_set( $this->theme_json, $sizes_path, $merged_spacing_sizes );
+		}
 	}
 
 	/**
@@ -805,6 +842,7 @@ protected static function do_opt_in_into_settings( &$context ) {
 	 *
 	 * @since 5.8.0
 	 * @since 5.9.0 Added the `$valid_block_names` and `$valid_element_name` parameters.
+	 * @since 6.6.0 Extended schema definition to allow enhanced block style variations.
 	 *
 	 * @param array $input               Structure to sanitize.
 	 * @param array $valid_block_names   List of valid block names.
@@ -863,6 +901,27 @@ protected static function sanitize( $input, $valid_block_names, $valid_element_n
 
 		$schema_styles_blocks   = array();
 		$schema_settings_blocks = array();
+
+		/*
+		 * Generate a schema for blocks.
+		 * - Block styles can contain `elements` & `variations` definitions.
+		 * - Variations definitions cannot be nested.
+		 * - Variations can contain styles for inner `blocks`.
+		 * - Variation inner `blocks` styles can contain `elements`.
+		 *
+		 * As each variation needs a `blocks` schema but further nested
+		 * inner `blocks`, the overall schema will be generated in multiple passes.
+		 */
+		foreach ( $valid_block_names as $block ) {
+			$schema_settings_blocks[ $block ]           = static::VALID_SETTINGS;
+			$schema_styles_blocks[ $block ]             = $styles_non_top_level;
+			$schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements;
+		}
+
+		$block_style_variation_styles             = static::VALID_STYLES;
+		$block_style_variation_styles['blocks']   = $schema_styles_blocks;
+		$block_style_variation_styles['elements'] = $schema_styles_elements;
+
 		foreach ( $valid_block_names as $block ) {
 			// Build the schema for each block style variation.
 			$style_variation_names = array();
@@ -879,12 +938,9 @@ protected static function sanitize( $input, $valid_block_names, $valid_element_n
 
 			$schema_styles_variations = array();
 			if ( ! empty( $style_variation_names ) ) {
-				$schema_styles_variations = array_fill_keys( $style_variation_names, $styles_non_top_level );
+				$schema_styles_variations = array_fill_keys( $style_variation_names, $block_style_variation_styles );
 			}
 
-			$schema_settings_blocks[ $block ]             = static::VALID_SETTINGS;
-			$schema_styles_blocks[ $block ]               = $styles_non_top_level;
-			$schema_styles_blocks[ $block ]['elements']   = $schema_styles_elements;
 			$schema_styles_blocks[ $block ]['variations'] = $schema_styles_variations;
 		}
 
@@ -895,6 +951,12 @@ protected static function sanitize( $input, $valid_block_names, $valid_element_n
 		$schema['settings']['blocks']                     = $schema_settings_blocks;
 		$schema['settings']['typography']['fontFamilies'] = static::schema_in_root_and_per_origin( static::FONT_FAMILY_SCHEMA );
 
+		/*
+		 * Shared block style variations can be registered from the theme.json data so we can't
+		 * validate them against pre-registered block style variations.
+		 */
+		$schema['styles']['blocks']['variations'] = null;
+
 		// Remove anything that's not present in the schema.
 		foreach ( array( 'styles', 'settings' ) as $subtree ) {
 			if ( ! isset( $input[ $subtree ] ) ) {
@@ -997,17 +1059,37 @@ protected static function prepend_to_selector( $selector, $to_prepend ) {
 	 * @since 5.8.0
 	 * @since 5.9.0 Added `duotone` key with CSS selector.
 	 * @since 6.1.0 Added `features` key with block support feature level selectors.
+	 * @since 6.6.0 Added non-core block style variations to generated metadata.
 	 *
 	 * @return array Block metadata.
 	 */
 	protected static function get_blocks_metadata() {
 		// NOTE: the compat/6.1 version of this method in Gutenberg did not have these changes.
-		$registry = WP_Block_Type_Registry::get_instance();
-		$blocks   = $registry->get_all_registered();
+		$registry       = WP_Block_Type_Registry::get_instance();
+		$blocks         = $registry->get_all_registered();
+		$style_registry = WP_Block_Styles_Registry::get_instance();
 
 		// Is there metadata for all currently registered blocks?
 		$blocks = array_diff_key( $blocks, static::$blocks_metadata );
 		if ( empty( $blocks ) ) {
+			/*
+			 * New block styles may have been registered within WP_Block_Styles_Registry.
+			 * Update block metadata for any new block style variations.
+			 */
+			$registered_styles = $style_registry->get_all_registered();
+			foreach ( static::$blocks_metadata as $block_name => $block_metadata ) {
+				if ( ! empty( $registered_styles[ $block_name ] ) ) {
+					$style_selectors = $block_metadata['styleVariations'] ?? array();
+
+					foreach ( $registered_styles[ $block_name ] as $block_style ) {
+						if ( ! isset( $style_selectors[ $block_style['name'] ] ) ) {
+							$style_selectors[ $block_style['name'] ] = static::get_block_style_variation_selector( $block_style['name'], $block_metadata['selector'] );
+						}
+					}
+
+					static::$blocks_metadata[ $block_name ]['styleVariations'] = $style_selectors;
+				}
+			}
 			return static::$blocks_metadata;
 		}
 
@@ -1040,11 +1122,20 @@ protected static function get_blocks_metadata() {
 			}
 
 			// If the block has style variations, append their selectors to the block metadata.
+			$style_selectors = array();
 			if ( ! empty( $block_type->styles ) ) {
-				$style_selectors = array();
 				foreach ( $block_type->styles as $style ) {
 					$style_selectors[ $style['name'] ] = static::get_block_style_variation_selector( $style['name'], static::$blocks_metadata[ $block_name ]['selector'] );
 				}
+			}
+
+			// Block style variations can be registered through the WP_Block_Styles_Registry as well as block.json.
+			$registered_styles = $style_registry->get_registered_styles_for_block( $block_name );
+			foreach ( $registered_styles as $style ) {
+				$style_selectors[ $style['name'] ] = static::get_block_style_variation_selector( $style['name'], static::$blocks_metadata[ $block_name ]['selector'] );
+			}
+
+			if ( ! empty( $style_selectors ) ) {
 				static::$blocks_metadata[ $block_name ]['styleVariations'] = $style_selectors;
 			}
 		}
@@ -1156,6 +1247,7 @@ public function get_settings() {
 	 *
 	 * @since 5.8.0
 	 * @since 5.9.0 Removed the `$type` parameter`, added the `$types` and `$origins` parameters.
+	 * @since 6.6.0 Added option to skip root layout styles.
 	 *
 	 * @param array $types   Types of styles to load. Will load all by default. It accepts:
 	 *                       - `variables`: only the CSS Custom Properties for presets & custom ones.
@@ -1163,8 +1255,10 @@ public function get_settings() {
 	 *                       - `presets`: only the classes for the presets.
 	 * @param array $origins A list of origins to include. By default it includes VALID_ORIGINS.
 	 * @param array $options An array of options for now used for internal purposes only (may change without notice).
-	 *                       The options currently supported are 'scope' that makes sure all style are scoped to a given selector,
-	 *                       and root_selector which overwrites and forces a given selector to be used on the root node.
+	 *                       The options currently supported are:
+	 *                       - 'scope' that makes sure all style are scoped to a given selector
+	 *                       - `root_selector` which overwrites and forces a given selector to be used on the root node
+	 *                       - `skip_root_layout_styles` which omits root layout styles from the generated stylesheet.
 	 * @return string The resulting stylesheet.
 	 */
 	public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = null, $options = array() ) {
@@ -1217,7 +1311,7 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets'
 		}
 
 		if ( in_array( 'styles', $types, true ) ) {
-			if ( false !== $root_style_key ) {
+			if ( false !== $root_style_key && empty( $options['skip_root_layout_styles'] ) ) {
 				$stylesheet .= $this->get_root_layout_rules( $style_nodes[ $root_style_key ]['selector'], $style_nodes[ $root_style_key ] );
 			}
 			$stylesheet .= $this->get_block_classes( $style_nodes );
@@ -1282,7 +1376,7 @@ protected function process_blocks_custom_css( $css, $selector ) {
 			$is_root_css = ( ! str_contains( $part, '{' ) );
 			if ( $is_root_css ) {
 				// If the part doesn't contain braces, it applies to the root level.
-				$processed_css .= trim( $selector ) . '{' . trim( $part ) . '}';
+				$processed_css .= ':root :where(' . trim( $selector ) . '){' . trim( $part ) . '}';
 			} else {
 				// If the part contains braces, it's a nested CSS rule.
 				$part = explode( '{', str_replace( '}', '', $part ) );
@@ -1294,7 +1388,8 @@ protected function process_blocks_custom_css( $css, $selector ) {
 				$part_selector   = str_starts_with( $nested_selector, ' ' )
 					? static::scope_selector( $selector, $nested_selector )
 					: static::append_to_selector( $selector, $nested_selector );
-				$processed_css  .= $part_selector . '{' . trim( $css_value ) . '}';
+				$final_selector  = ":root :where($part_selector)";
+				$processed_css  .= $final_selector . '{' . trim( $css_value ) . '}';
 			}
 		}
 		return $processed_css;
@@ -1311,6 +1406,7 @@ public function get_custom_css() {
 		$block_custom_css = '';
 		$block_nodes      = $this->get_block_custom_css_nodes();
 		foreach ( $block_nodes as $node ) {
+			// The node selector will have its specificity set to 0-1-0 within process_blocks_custom_css.
 			$block_custom_css .= $this->get_block_custom_css( $node['css'], $node['selector'] );
 		}
 
@@ -1553,7 +1649,7 @@ protected function get_layout_styles( $block_metadata, $types = array() ) {
 										$spacing_rule['selector']
 									);
 								} else {
-									$format          = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(.%2$s) %3$s' : ':where(%1$s-%2$s) %3$s';
+									$format          = static::ROOT_BLOCK_SELECTOR === $selector ? '.%2$s %3$s' : '%1$s-%2$s %3$s';
 									$layout_selector = sprintf(
 										$format,
 										$selector,
@@ -2734,7 +2830,7 @@ static function ( $pseudo_selector ) use ( $selector ) {
 		}
 
 		// 2. Generate and append the rules that use the general selector.
-		$block_rules .= static::to_ruleset( ":where($selector)", $declarations );
+		$block_rules .= static::to_ruleset( ":root :where($selector)", $declarations );
 
 		// 3. Generate and append the rules that use the duotone selector.
 		if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
@@ -2751,12 +2847,12 @@ static function ( $pseudo_selector ) use ( $selector ) {
 
 		// 5. Generate and append the feature level rulesets.
 		foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) {
-			$block_rules .= static::to_ruleset( ":where($feature_selector)", $individual_feature_declarations );
+			$block_rules .= static::to_ruleset( ":root :where($feature_selector)", $individual_feature_declarations );
 		}
 
 		// 6. Generate and append the style variation rulesets.
 		foreach ( $style_variation_declarations as $style_variation_selector => $individual_style_variation_declarations ) {
-			$block_rules .= static::to_ruleset( $style_variation_selector, $individual_style_variation_declarations );
+			$block_rules .= static::to_ruleset( ":root :where($style_variation_selector)", $individual_style_variation_declarations );
 		}
 
 		return $block_rules;
@@ -2805,16 +2901,12 @@ public function get_root_layout_rules( $selector, $block_metadata ) {
 			$css .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }';
 			// Right and left padding are applied to the first container with `.has-global-padding` class.
 			$css .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
-			// Nested containers with `.has-global-padding` class do not get padding.
-			$css .= '.has-global-padding :where(.has-global-padding:not(.wp-block-block)) { padding-right: 0; padding-left: 0; }';
 			// Alignfull children of the container with left and right padding have negative margins so they can still be full width.
 			$css .= '.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
-			// The above rule is negated for alignfull children of nested containers.
-			$css .= '.has-global-padding :where(.has-global-padding:not(.wp-block-block)) > .alignfull { margin-right: 0; margin-left: 0; }';
-			// Some of the children of alignfull blocks without content width should also get padding: text blocks and non-alignfull container blocks.
-			$css .= '.has-global-padding > .alignfull:where(:not(.has-global-padding):not(.is-layout-flex):not(.is-layout-grid)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
-			// The above rule also has to be negated for blocks inside nested `.has-global-padding` blocks.
-			$css .= '.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0; }';
+			// Nested children of the container with left and right padding that are not wide or full aligned do not get padding.
+			$css .= '.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }';
+			// Nested children of the container with left and right padding that are not wide or full aligned do not get negative margin applied.
+			$css .= '.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0; }';
 		}
 
 		$css .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
@@ -2880,6 +2972,8 @@ protected static function get_metadata_boolean( $data, $path, $default_value = f
 	 *
 	 * @since 5.8.0
 	 * @since 5.9.0 Duotone preset also has origins.
+	 * @since 6.6.0 Use the spacingScale keyed by origin, and re-generate the
+	 *              spacingSizes from spacingScale.
 	 *
 	 * @param WP_Theme_JSON_Gutenberg $incoming Data to merge.
 	 */
@@ -2887,6 +2981,40 @@ public function merge( $incoming ) {
 		$incoming_data    = $incoming->get_raw_data();
 		$this->theme_json = array_replace_recursive( $this->theme_json, $incoming_data );
 
+		/*
+		 * Recompute all the spacing sizes based on the new hierarchy of data. In the constructor
+		 * spacingScale and spacingSizes are both keyed by origin and VALID_ORIGINS is ordered, so
+		 * we can allow partial spacingScale data to inherit missing data from earlier layers when
+		 * computing the spacing sizes.
+		 *
+		 * This happens before the presets are merged to ensure that default spacing sizes can be
+		 * removed from the theme origin if $prevent_override is true.
+		 */
+		$flattened_spacing_scale = array();
+		foreach ( static::VALID_ORIGINS as $origin ) {
+			$scale_path = array( 'settings', 'spacing', 'spacingScale', $origin );
+
+			// Apply the base spacing scale to the current layer.
+			$base_spacing_scale      = _wp_array_get( $this->theme_json, $scale_path, array() );
+			$flattened_spacing_scale = array_replace( $flattened_spacing_scale, $base_spacing_scale );
+
+			$spacing_scale = _wp_array_get( $incoming_data, $scale_path, null );
+			if ( ! isset( $spacing_scale ) ) {
+				continue;
+			}
+
+			// Allow partial scale settings by merging with lower layers.
+			$flattened_spacing_scale = array_replace( $flattened_spacing_scale, $spacing_scale );
+
+			// Generate and merge the scales for this layer.
+			$sizes_path           = array( 'settings', 'spacing', 'spacingSizes', $origin );
+			$spacing_sizes        = _wp_array_get( $incoming_data, $sizes_path, array() );
+			$spacing_scale_sizes  = static::compute_spacing_sizes( $flattened_spacing_scale );
+			$merged_spacing_sizes = static::merge_spacing_sizes( $spacing_scale_sizes, $spacing_sizes );
+
+			_wp_array_set( $incoming_data, $sizes_path, $merged_spacing_sizes );
+		}
+
 		/*
 		 * The array_replace_recursive algorithm merges at the leaf level,
 		 * but we don't want leaf arrays to be merged, so we overwrite it.
@@ -3150,6 +3278,7 @@ protected static function filter_slugs( $node, $slugs ) {
 	 * Removes insecure data from theme.json.
 	 *
 	 * @since 5.9.0
+	 * @since 6.6.0 Added support for block style variation element styles.
 	 *
 	 * @param array $theme_json Structure to sanitize.
 	 * @return array Sanitized structure.
@@ -3211,6 +3340,29 @@ public static function remove_insecure_properties( $theme_json ) {
 					}
 
 					$variation_output = static::remove_insecure_styles( $variation_input );
+
+					// Process a variation's elements and element pseudo selector styles.
+					if ( isset( $variation_input['elements'] ) ) {
+						foreach ( $valid_element_names as $element_name ) {
+							$element_input = $variation_input['elements'][ $element_name ] ?? null;
+							if ( $element_input ) {
+								$element_output = static::remove_insecure_styles( $element_input );
+
+								if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element_name ] ) ) {
+									foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element_name ] as $pseudo_selector ) {
+										if ( isset( $element_input[ $pseudo_selector ] ) ) {
+											$element_output[ $pseudo_selector ] = static::remove_insecure_styles( $element_input[ $pseudo_selector ] );
+										}
+									}
+								}
+
+								if ( ! empty( $element_output ) ) {
+									_wp_array_set( $variation_output, array( 'elements', $element_name ), $element_output );
+								}
+							}
+						}
+					}
+
 					if ( ! empty( $variation_output ) ) {
 						_wp_array_set( $sanitized, $variation['path'], $variation_output );
 					}
@@ -3478,6 +3630,13 @@ public static function get_from_editor_settings( $settings ) {
 			$theme_settings['settings']['spacing']['padding'] = $settings['enableCustomSpacing'];
 		}
 
+		if ( isset( $settings['spacingSizes'] ) ) {
+			if ( ! isset( $theme_settings['settings']['spacing'] ) ) {
+				$theme_settings['settings']['spacing'] = array();
+			}
+			$theme_settings['settings']['spacing']['spacingSizes'] = $settings['spacingSizes'];
+		}
+
 		return $theme_settings;
 	}
 
@@ -3642,12 +3801,19 @@ public function get_data() {
 	/**
 	 * Sets the spacingSizes array based on the spacingScale values from theme.json.
 	 *
+	 * No longer used since theme.json version 3 as the spacingSizes are now
+	 * automatically generated during construction and merge instead of manually
+	 * set in the resolver.
+	 *
 	 * @since 6.1.0
+	 * @deprecated 6.6.0
 	 *
 	 * @return null|void
 	 */
 	public function set_spacing_sizes() {
-		$spacing_scale = $this->theme_json['settings']['spacing']['spacingScale'] ?? array();
+		_deprecated_function( __METHOD__, '6.6.0' );
+
+		$spacing_scale = $this->theme_json['settings']['spacing']['spacingScale']['default'] ?? array();
 
 		// Gutenberg didn't have the 1st isset check.
 		if ( ! isset( $spacing_scale['steps'] )
@@ -3671,6 +3837,99 @@ public function set_spacing_sizes() {
 			return null;
 		}
 
+		$spacing_sizes = static::compute_spacing_sizes( $spacing_scale );
+
+		// If there are 7 or less steps in the scale revert to numbers for labels instead of t-shirt sizes.
+		if ( $spacing_scale['steps'] <= 7 ) {
+			for ( $spacing_sizes_count = 0; $spacing_sizes_count < count( $spacing_sizes ); $spacing_sizes_count++ ) {
+				$spacing_sizes[ $spacing_sizes_count ]['name'] = (string) ( $spacing_sizes_count + 1 );
+			}
+		}
+
+		_wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes );
+	}
+
+	/**
+	 * Merges two sets of spacing size presets.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param array $base     The base set of spacing sizes.
+	 * @param array $incoming The set of spacing sizes to merge with the base. Duplicate slugs will override the base values.
+	 * @return array The merged set of spacing sizes.
+	 */
+	private static function merge_spacing_sizes( $base, $incoming ) {
+		// Preserve the order if there are no base (spacingScale) values.
+		if ( empty( $base ) ) {
+			return $incoming;
+		}
+		$merged = array();
+		foreach ( $base as $item ) {
+			$merged[ $item['slug'] ] = $item;
+		}
+		foreach ( $incoming as $item ) {
+			$merged[ $item['slug'] ] = $item;
+		}
+		ksort( $merged, SORT_NUMERIC );
+		return array_values( $merged );
+	}
+
+	/**
+	 * Generates a set of spacing sizes by starting with a medium size and
+	 * applying an operator with an increment value to generate the rest of the
+	 * sizes outward from the medium size. The medium slug is '50' with the rest
+	 * of the slugs being 10 apart. The generated names use t-shirt sizing.
+	 *
+	 * Example:
+	 *
+	 *     $spacing_scale = array(
+	 *         'steps'      => 4,
+	 *         'mediumStep' => 16,
+	 *         'unit'       => 'px',
+	 *         'operator'   => '+',
+	 *         'increment'  => 2,
+	 *     );
+	 *     $spacing_sizes = static::compute_spacing_sizes( $spacing_scale );
+	 *     // -> array(
+	 *     //        array( 'name' => 'Small',   'slug' => '40', 'size' => '14px' ),
+	 *     //        array( 'name' => 'Medium',  'slug' => '50', 'size' => '16px' ),
+	 *     //        array( 'name' => 'Large',   'slug' => '60', 'size' => '18px' ),
+	 *     //        array( 'name' => 'X-Large', 'slug' => '70', 'size' => '20px' ),
+	 *     //    )
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param array $spacing_scale {
+	 *      The spacing scale values. All are required.
+	 *
+	 *      @type int    $steps      The number of steps in the scale. (up to 10 steps are supported.)
+	 *      @type float  $mediumStep The middle value that gets the slug '50'. (For even number of steps, this becomes the first middle value.)
+	 *      @type string $unit       The CSS unit to use for the sizes.
+	 *      @type string $operator   The mathematical operator to apply to generate the other sizes. Either '+' or '*'.
+	 *      @type float  $increment  The value used with the operator to generate the other sizes.
+	 * }
+	 * @return array The spacing sizes presets or an empty array if some spacing scale values are missing or invalid.
+	 */
+	private static function compute_spacing_sizes( $spacing_scale ) {
+		/*
+		 * This condition is intentionally missing some checks on ranges for the values in order to
+		 * keep backwards compatibility with the previous implementation.
+		 */
+		if (
+			! isset( $spacing_scale['steps'] ) ||
+			! is_numeric( $spacing_scale['steps'] ) ||
+			0 === $spacing_scale['steps'] ||
+			! isset( $spacing_scale['mediumStep'] ) ||
+			! is_numeric( $spacing_scale['mediumStep'] ) ||
+			! isset( $spacing_scale['unit'] ) ||
+			! isset( $spacing_scale['operator'] ) ||
+			( '+' !== $spacing_scale['operator'] && '*' !== $spacing_scale['operator'] ) ||
+			! isset( $spacing_scale['increment'] ) ||
+			! is_numeric( $spacing_scale['increment'] )
+		) {
+			return array();
+		}
+
 		$unit            = '%' === $spacing_scale['unit'] ? '%' : sanitize_title( $spacing_scale['unit'] );
 		$current_step    = $spacing_scale['mediumStep'];
 		$steps_mid_point = round( $spacing_scale['steps'] / 2, 0 );
@@ -3753,14 +4012,7 @@ public function set_spacing_sizes() {
 			$spacing_sizes[] = $above_sizes_item;
 		}
 
-		// If there are 7 or less steps in the scale revert to numbers for labels instead of t-shirt sizes.
-		if ( $spacing_scale['steps'] <= 7 ) {
-			for ( $spacing_sizes_count = 0; $spacing_sizes_count < count( $spacing_sizes ); $spacing_sizes_count++ ) {
-				$spacing_sizes[ $spacing_sizes_count ]['name'] = (string) ( $spacing_sizes_count + 1 );
-			}
-		}
-
-		_wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes );
+		return $spacing_sizes;
 	}
 
 	/**
diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php
index dcc0bf8b099c3..28121cf1b8c8a 100644
--- a/lib/class-wp-theme-json-resolver-gutenberg.php
+++ b/lib/class-wp-theme-json-resolver-gutenberg.php
@@ -173,8 +173,7 @@ public static function get_core_data() {
 		 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
 		 */
 		$theme_json   = apply_filters( 'wp_theme_json_data_default', new WP_Theme_JSON_Data_Gutenberg( $config, 'default' ) );
-		$config       = $theme_json->get_data();
-		static::$core = new WP_Theme_JSON_Gutenberg( $config, 'default' );
+		static::$core = $theme_json->get_theme_json();
 
 		return static::$core;
 	}
@@ -221,6 +220,7 @@ protected static function has_same_registered_blocks( $origin ) {
 	 * @since 5.8.0
 	 * @since 5.9.0 Theme supports have been inlined and the `$theme_support_data` argument removed.
 	 * @since 6.0.0 Added an `$options` parameter to allow the theme data to be returned without theme supports.
+	 * @since 6.6.0 Add support for 'default-font-sizes' and 'default-spacing-sizes' theme supports.
 	 *
 	 * @param array $deprecated Deprecated. Not used.
 	 * @param array $options {
@@ -254,9 +254,8 @@ public static function get_theme_data( $deprecated = array(), $options = array()
 			 *
 			 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
 			 */
-			$theme_json      = apply_filters( 'wp_theme_json_data_theme', new WP_Theme_JSON_Data_Gutenberg( $theme_json_data, 'theme' ) );
-			$theme_json_data = $theme_json->get_data();
-			static::$theme   = new WP_Theme_JSON_Gutenberg( $theme_json_data );
+			$theme_json    = apply_filters( 'wp_theme_json_data_theme', new WP_Theme_JSON_Data_Gutenberg( $theme_json_data, 'theme' ) );
+			static::$theme = $theme_json->get_theme_json();
 
 			if ( $wp_theme->parent() ) {
 				// Get parent theme.json.
@@ -293,7 +292,7 @@ public static function get_theme_data( $deprecated = array(), $options = array()
 		 * So we take theme supports, transform it to theme.json shape
 		 * and merge the static::$theme upon that.
 		 */
-		$theme_support_data = WP_Theme_JSON_Gutenberg::get_from_editor_settings( get_classic_theme_supports_block_editor_settings() );
+		$theme_support_data = WP_Theme_JSON_Gutenberg::get_from_editor_settings( gutenberg_get_classic_theme_supports_block_editor_settings() );
 		if ( ! wp_theme_has_theme_json() ) {
 			if ( ! isset( $theme_support_data['settings']['color'] ) ) {
 				$theme_support_data['settings']['color'] = array();
@@ -319,6 +318,32 @@ public static function get_theme_data( $deprecated = array(), $options = array()
 			}
 			$theme_support_data['settings']['color']['defaultGradients'] = $default_gradients;
 
+			if ( ! isset( $theme_support_data['settings']['typography'] ) ) {
+				$theme_support_data['settings']['typography'] = array();
+			}
+			$default_font_sizes = false;
+			if ( current_theme_supports( 'default-font-sizes' ) ) {
+				$default_font_sizes = true;
+			}
+			if ( ! isset( $theme_support_data['settings']['typography']['fontSizes'] ) ) {
+				// If the theme does not have any font sizes, we still want to show the core one.
+				$default_font_sizes = true;
+			}
+			$theme_support_data['settings']['typography']['defaultFontSizes'] = $default_font_sizes;
+
+			if ( ! isset( $theme_support_data['settings']['spacing'] ) ) {
+				$theme_support_data['settings']['spacing'] = array();
+			}
+			$default_spacing_sizes = false;
+			if ( current_theme_supports( 'default-spacing-sizes' ) ) {
+				$default_spacing_sizes = true;
+			}
+			if ( ! isset( $theme_support_data['settings']['spacing']['spacingSizes'] ) ) {
+				// If the theme does not have any spacing sizes, we still want to show the core one.
+				$default_spacing_sizes = true;
+			}
+			$theme_support_data['settings']['spacing']['defaultSpacingSizes'] = $default_spacing_sizes;
+
 			if ( ! isset( $theme_support_data['settings']['shadow'] ) ) {
 				$theme_support_data['settings']['shadow'] = array();
 			}
@@ -398,10 +423,9 @@ public static function get_block_data() {
 		 *
 		 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
 		 */
-		$theme_json = apply_filters( 'wp_theme_json_data_blocks', new WP_Theme_JSON_Data_Gutenberg( $config, 'blocks' ) );
-		$config     = $theme_json->get_data();
+		$theme_json     = apply_filters( 'wp_theme_json_data_blocks', new WP_Theme_JSON_Data_Gutenberg( $config, 'blocks' ) );
+		static::$blocks = $theme_json->get_theme_json();
 
-		static::$blocks = new WP_Theme_JSON_Gutenberg( $config, 'blocks' );
 		return static::$blocks;
 	}
 
@@ -533,8 +557,8 @@ public static function get_user_data() {
 				 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
 				 */
 				$theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) );
-				$config     = $theme_json->get_data();
-				return new WP_Theme_JSON_Gutenberg( $config, 'custom' );
+
+				return $theme_json->get_theme_json();
 			}
 
 			// Very important to verify that the flag isGlobalStylesUserThemeJSON is true.
@@ -603,7 +627,6 @@ public static function get_merged_data( $origin = 'custom' ) {
 		$result = new WP_Theme_JSON_Gutenberg();
 		$result->merge( static::get_core_data() );
 		if ( 'default' === $origin ) {
-			$result->set_spacing_sizes();
 			return $result;
 		}
 
@@ -614,12 +637,10 @@ public static function get_merged_data( $origin = 'custom' ) {
 
 		$result->merge( static::get_theme_data() );
 		if ( 'theme' === $origin ) {
-			$result->set_spacing_sizes();
 			return $result;
 		}
 
 		$result->merge( static::get_user_data() );
-		$result->set_spacing_sizes();
 		return $result;
 	}
 
@@ -719,14 +740,44 @@ private static function recursively_iterate_json( $dir ) {
 		return $nested_json_files;
 	}
 
+	/**
+	 * Determines if a supplied style variation matches the provided scope.
+	 *
+	 * For backwards compatibility, if a variation does not define any scope
+	 * related property, e.g. `blockTypes`, it is assumed to be a theme style
+	 * variation.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param array  $variation Theme.json shaped style variation object.
+	 * @param string $scope     Scope to check e.g. theme, block etc.
+	 *
+	 * @return boolean
+	 */
+	private static function style_variation_has_scope( $variation, $scope ) {
+		if ( 'block' === $scope ) {
+			return isset( $variation['blockTypes'] );
+		}
+
+		if ( 'theme' === $scope ) {
+			return ! isset( $variation['blockTypes'] );
+		}
+
+		return false;
+	}
+
 	/**
 	 * Returns the style variations defined by the theme (parent and child).
 	 *
 	 * @since 6.2.0 Returns parent theme variations if theme is a child.
+	 * @since 6.6.0 Added configurable scope parameter to allow filtering
+	 *              theme.json partial files by the scope to which they
+	 *              can be applied e.g. theme vs block etc.
 	 *
+	 * @param string $scope The scope or type of style variation to retrieve e.g. theme, block etc.
 	 * @return array
 	 */
-	public static function get_style_variations() {
+	public static function get_style_variations( $scope = 'theme' ) {
 		$variation_files    = array();
 		$variations         = array();
 		$base_directory     = get_stylesheet_directory() . '/styles';
@@ -749,7 +800,7 @@ public static function get_style_variations() {
 		ksort( $variation_files );
 		foreach ( $variation_files as $path => $file ) {
 			$decoded_file = wp_json_file_decode( $path, array( 'associative' => true ) );
-			if ( is_array( $decoded_file ) ) {
+			if ( is_array( $decoded_file ) && static::style_variation_has_scope( $decoded_file, $scope ) ) {
 				$translated = static::translate( $decoded_file, wp_get_theme()->get( 'TextDomain' ) );
 				$variation  = ( new WP_Theme_JSON_Gutenberg( $translated ) )->get_raw_data();
 				if ( empty( $variation['title'] ) ) {
@@ -760,4 +811,78 @@ public static function get_style_variations() {
 		}
 		return $variations;
 	}
+
+
+	/**
+	 * Resolves relative paths in theme.json styles to theme absolute paths
+	 * and returns them in an array that can be embedded
+	 * as the value of `_link` object in REST API responses.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param WP_Theme_JSON_Gutenberg $theme_json A theme json instance.
+	 * @return array An array of resolved paths.
+	 */
+	public static function get_resolved_theme_uris( $theme_json ) {
+		$resolved_theme_uris = array();
+
+		if ( ! $theme_json instanceof WP_Theme_JSON_Gutenberg ) {
+			return $resolved_theme_uris;
+		}
+
+		$theme_json_data = $theme_json->get_raw_data();
+
+		// Top level styles.
+		$background_image_url = $theme_json_data['styles']['background']['backgroundImage']['url'] ?? null;
+		// Using the same file convention when registering web fonts. See: WP_Font_Face_Resolver:: to_theme_file_uri.
+		$placeholder = 'file:./';
+		if (
+			isset( $background_image_url ) &&
+			is_string( $background_image_url ) &&
+			// Skip if the src doesn't start with the placeholder, as there's nothing to replace.
+			str_starts_with( $background_image_url, $placeholder ) ) {
+				$file_type          = wp_check_filetype( $background_image_url );
+				$src_url            = str_replace( $placeholder, '', $background_image_url );
+				$resolved_theme_uri = array(
+					'name'   => $background_image_url,
+					'href'   => sanitize_url( get_theme_file_uri( $src_url ) ),
+					'target' => 'styles.background.backgroundImage.url',
+				);
+				if ( isset( $file_type['type'] ) ) {
+					$resolved_theme_uri['type'] = $file_type['type'];
+				}
+				$resolved_theme_uris[] = $resolved_theme_uri;
+		}
+
+		return $resolved_theme_uris;
+	}
+
+	/**
+	 * Resolves relative paths in theme.json styles to theme absolute paths
+	 * and merges them with incoming theme JSON.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param WP_Theme_JSON_Gutenberg $theme_json A theme json instance.
+	 * @return WP_Theme_JSON_Gutenberg Theme merged with resolved paths, if any found.
+	 */
+	public static function resolve_theme_file_uris( $theme_json ) {
+		$resolved_urls = static::get_resolved_theme_uris( $theme_json );
+		if ( empty( $resolved_urls ) ) {
+			return $theme_json;
+		}
+
+		$resolved_theme_json_data = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+		);
+
+		foreach ( $resolved_urls as $resolved_url ) {
+			$path = explode( '.', $resolved_url['target'] );
+			_wp_array_set( $resolved_theme_json_data, $path, $resolved_url['href'] );
+		}
+
+		$theme_json->merge( new WP_Theme_JSON_Gutenberg( $resolved_theme_json_data ) );
+
+		return $theme_json;
+	}
 }
diff --git a/lib/class-wp-theme-json-schema-gutenberg.php b/lib/class-wp-theme-json-schema-gutenberg.php
index 1eea7ddaa2736..0def88f86a23a 100644
--- a/lib/class-wp-theme-json-schema-gutenberg.php
+++ b/lib/class-wp-theme-json-schema-gutenberg.php
@@ -131,7 +131,7 @@ private static function migrate_v2_to_v3( $old ) {
 		 * affect the generated CSS. And in v2 we provided default font sizes
 		 * when the theme did not provide any.
 		 */
-		if ( isset( $new['settings']['typography']['fontSizes'] ) ) {
+		if ( isset( $old['settings']['typography']['fontSizes'] ) ) {
 			if ( ! isset( $new['settings'] ) ) {
 				$new['settings'] = array();
 			}
@@ -141,6 +141,38 @@ private static function migrate_v2_to_v3( $old ) {
 			$new['settings']['typography']['defaultFontSizes'] = false;
 		}
 
+		/*
+		 * Similarly to defaultFontSizes, we need to migrate defaultSpacingSizes
+		 * as it controls the PRESETS_METADATA prevent_override which was
+		 * previously hardcoded to false. This only needs to happen when the
+		 * theme provided spacing sizes via spacingSizes or spacingScale.
+		 */
+		if (
+			isset( $old['settings']['spacing']['spacingSizes'] ) ||
+			isset( $old['settings']['spacing']['spacingScale'] )
+		) {
+			if ( ! isset( $new['settings'] ) ) {
+				$new['settings'] = array();
+			}
+			if ( ! isset( $new['settings']['spacing'] ) ) {
+				$new['settings']['spacing'] = array();
+			}
+			$new['settings']['spacing']['defaultSpacingSizes'] = false;
+		}
+
+		/*
+		 * In v3 spacingSizes is merged with the generated spacingScale sizes
+		 * instead of completely replacing them. The v3 behavior is what was
+		 * documented for the v2 schema, but the code never actually did work
+		 * that way. Instead of surprising users with a behavior change two
+		 * years after the fact at the same time as a v3 update is introduced,
+		 * we'll continue using the "bugged" behavior for v2 themes. And treat
+		 * the "bug fix" as a breaking change for v3.
+		 */
+		if ( isset( $old['settings']['spacing']['spacingSizes'] ) ) {
+			unset( $new['settings']['spacing']['spacingScale'] );
+		}
+
 		return $new;
 	}
 
diff --git a/lib/client-assets.php b/lib/client-assets.php
index 13884f90fb3ea..a159bc53e6a59 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -590,6 +590,14 @@ function gutenberg_register_vendor_scripts( $scripts ) {
 		array( 'react' ),
 		'18'
 	);
+
+	gutenberg_override_script(
+		$scripts,
+		'react-jsx-runtime',
+		gutenberg_url( 'build/vendors/react-jsx-runtime' . $extension ),
+		array( 'react' ),
+		'18'
+	);
 }
 add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' );
 
diff --git a/lib/compat/wordpress-6.4/block-hooks.php b/lib/compat/wordpress-6.4/block-hooks.php
index 46115d5b6c629..f77582caf1345 100644
--- a/lib/compat/wordpress-6.4/block-hooks.php
+++ b/lib/compat/wordpress-6.4/block-hooks.php
@@ -290,7 +290,7 @@ function gutenberg_register_block_hooks_rest_field() {
 		'block_hooks',
 		array(
 			'schema' => array(
-				'description'       => __( 'This block is automatically inserted near any occurence of the block types used as keys of this map, into a relative position given by the corresponding value.', 'gutenberg' ),
+				'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(
diff --git a/lib/compat/wordpress-6.4/script-loader.php b/lib/compat/wordpress-6.4/script-loader.php
index 373bb9e90f858..60de7785aaeb2 100644
--- a/lib/compat/wordpress-6.4/script-loader.php
+++ b/lib/compat/wordpress-6.4/script-loader.php
@@ -11,6 +11,9 @@
  * @since 6.0.0
  * @access private
  *
+ * @global WP_Styles $wp_styles
+ * @global WP_Scripts $wp_scripts
+ *
  * @return array {
  *     The block editor assets.
  *
diff --git a/lib/compat/wordpress-6.5/block-bindings/block-bindings.php b/lib/compat/wordpress-6.5/block-bindings/block-bindings.php
index 1bcb23ccd6549..cc26fe50d02fd 100644
--- a/lib/compat/wordpress-6.5/block-bindings/block-bindings.php
+++ b/lib/compat/wordpress-6.5/block-bindings/block-bindings.php
@@ -53,7 +53,7 @@ function register_block_bindings_source( string $source_name, array $source_prop
  * @since 6.5.0
  *
  * @param string $source_name Block bindings source name including namespace.
- * @return WP_Block_Bindings_Source|false The unregistred block bindings source on success and `false` otherwise.
+ * @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 ) {
diff --git a/lib/compat/wordpress-6.5/blocks.php b/lib/compat/wordpress-6.5/blocks.php
index a695d075c0b52..d3a8b3f557181 100644
--- a/lib/compat/wordpress-6.5/blocks.php
+++ b/lib/compat/wordpress-6.5/blocks.php
@@ -65,68 +65,27 @@ function gutenberg_block_bindings_replace_html( $block_content, $block_name, str
 	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 );
-				}
+			// Hardcode the selectors and processing until the HTML API is able to read CSS selectors and replace inner HTML.
+			// TODO: Use the HTML API instead.
+			if ( 'core/paragraph' === $block_name && 'content' === $attribute_name ) {
+				$selector = 'p';
 			}
-
-			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();
-					}
+			if ( 'core/heading' === $block_name && 'content' === $attribute_name ) {
+				$selector = 'h[1-6]';
+			}
+			if ( 'core/button' === $block_name && 'text' === $attribute_name ) {
+				// Check if it is a <button> or <a> tag.
+				if ( preg_match( '/<button[^>]*>.*?<\/button>/', $block_content ) ) {
+					$selector = 'button';
 				} else {
-					$block_reader->seek( 'iterate-selectors' );
+					$selector = 'a';
 				}
 			}
-			$block_reader->release_bookmark( 'iterate-selectors' );
-			return $block_content;
+			if ( empty( $selector ) ) {
+				return $block_content;
+			}
+			$pattern = '/(<' . $selector . '[^>]*>).*?(<\/' . $selector . '>)/i';
+			return preg_replace( $pattern, '$1' . wp_kses_post( $source_value ) . '$2', $block_content );
 
 		case 'attribute':
 			$amended_content = new WP_HTML_Tag_Processor( $block_content );
@@ -140,13 +99,10 @@ function gutenberg_block_bindings_replace_html( $block_content, $block_name, str
 			}
 			$amended_content->set_attribute( $block_type->attributes[ $attribute_name ]['attribute'], $source_value );
 			return $amended_content->get_updated_html();
-		break;
 
 		default:
 			return $block_content;
-		break;
 	}
-	return;
 }
 
 /**
@@ -155,6 +111,7 @@ function gutenberg_block_bindings_replace_html( $block_content, $block_name, str
  * @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(
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
index 4a445cd8ae3f7..d794a2601f45d 100644
--- a/lib/compat/wordpress-6.5/fonts/class-wp-font-utils.php
+++ b/lib/compat/wordpress-6.5/fonts/class-wp-font-utils.php
@@ -162,7 +162,7 @@ function ( $elem ) {
 		 * 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 santized data. Nested arrays are traversed recursively.
+		 * schema, will be removed in the sanitized data. Nested arrays are traversed recursively.
 		 *
 		 * @since 6.5.0
 		 *
diff --git a/lib/compat/wordpress-6.5/rest-api.php b/lib/compat/wordpress-6.5/rest-api.php
index 12d789fb58b86..d18756844cc91 100644
--- a/lib/compat/wordpress-6.5/rest-api.php
+++ b/lib/compat/wordpress-6.5/rest-api.php
@@ -10,16 +10,6 @@
 	die( 'Silence is golden.' );
 }
 
-/**
- * Registers the Global Styles Revisions REST API routes.
- */
-function gutenberg_register_global_styles_revisions_endpoints() {
-	$global_styles_revisions_controller = new Gutenberg_REST_Global_Styles_Revisions_Controller_6_5();
-	$global_styles_revisions_controller->register_routes();
-}
-
-add_action( 'rest_api_init', 'gutenberg_register_global_styles_revisions_endpoints' );
-
 /**
  * Registers additional fields for wp_template and wp_template_part rest api.
  *
diff --git a/lib/compat/wordpress-6.6/admin-bar.php b/lib/compat/wordpress-6.6/admin-bar.php
new file mode 100644
index 0000000000000..8892559cd7f62
--- /dev/null
+++ b/lib/compat/wordpress-6.6/admin-bar.php
@@ -0,0 +1,48 @@
+<?php
+/**
+ * Changes to the WordPress admin bar.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Adds the "Site Editor" link to the Toolbar.
+ *
+ * @since 5.9.0
+ * @since 6.3.0 Added `$_wp_current_template_id` global for editing of current template directly from the admin bar.
+ * @since 6.6.0 Added the canvas argument to the url.
+ *
+ * @global string $_wp_current_template_id
+ *
+ * @param WP_Admin_Bar $wp_admin_bar The WP_Admin_Bar instance.
+ */
+function gutenberg_admin_bar_edit_site_menu( $wp_admin_bar ) {
+	global $_wp_current_template_id;
+
+	// Don't show if a block theme is not activated.
+	if ( ! wp_is_block_theme() ) {
+		return;
+	}
+
+	// Don't show for users who can't edit theme options or when in the admin.
+	if ( ! current_user_can( 'edit_theme_options' ) || is_admin() ) {
+		return;
+	}
+
+	$wp_admin_bar->add_node(
+		array(
+			'id'    => 'site-editor',
+			'title' => __( 'Site Editor' ),
+			'href'  => add_query_arg(
+				array(
+					'postType' => 'wp_template',
+					'postId'   => $_wp_current_template_id,
+					'canvas'   => 'edit',
+				),
+				admin_url( 'site-editor.php' )
+			),
+		)
+	);
+}
+remove_action( 'admin_bar_menu', 'wp_admin_bar_edit_site_menu', 40 );
+add_action( 'admin_bar_menu', 'gutenberg_admin_bar_edit_site_menu', 41 );
diff --git a/lib/compat/wordpress-6.6/block-editor.php b/lib/compat/wordpress-6.6/block-editor.php
new file mode 100644
index 0000000000000..6253f6a0adca4
--- /dev/null
+++ b/lib/compat/wordpress-6.6/block-editor.php
@@ -0,0 +1,50 @@
+<?php
+/**
+ * Block Editor API.
+ *
+ * @package Gutenberg
+ * @subpackage Editor
+ */
+
+/**
+ * Returns the classic theme supports settings for block editor.
+ *
+ * @since 6.2.0
+ * @since 6.6.0 Add support for custom spacing sizes.
+ *
+ * @return array The classic theme supports settings.
+ */
+function gutenberg_get_classic_theme_supports_block_editor_settings() {
+	$theme_settings = array(
+		'disableCustomColors'    => get_theme_support( 'disable-custom-colors' ),
+		'disableCustomFontSizes' => get_theme_support( 'disable-custom-font-sizes' ),
+		'disableCustomGradients' => get_theme_support( 'disable-custom-gradients' ),
+		'disableLayoutStyles'    => get_theme_support( 'disable-layout-styles' ),
+		'enableCustomLineHeight' => get_theme_support( 'custom-line-height' ),
+		'enableCustomSpacing'    => get_theme_support( 'custom-spacing' ),
+		'enableCustomUnits'      => get_theme_support( 'custom-units' ),
+	);
+
+	// Theme settings.
+	$color_palette = current( (array) get_theme_support( 'editor-color-palette' ) );
+	if ( false !== $color_palette ) {
+		$theme_settings['colors'] = $color_palette;
+	}
+
+	$font_sizes = current( (array) get_theme_support( 'editor-font-sizes' ) );
+	if ( false !== $font_sizes ) {
+		$theme_settings['fontSizes'] = $font_sizes;
+	}
+
+	$gradient_presets = current( (array) get_theme_support( 'editor-gradient-presets' ) );
+	if ( false !== $gradient_presets ) {
+		$theme_settings['gradients'] = $gradient_presets;
+	}
+
+	$spacing_sizes = current( (array) get_theme_support( 'editor-spacing-sizes' ) );
+	if ( false !== $spacing_sizes ) {
+		$theme_settings['spacingSizes'] = $spacing_sizes;
+	}
+
+	return $theme_settings;
+}
diff --git a/lib/compat/wordpress-6.6/blocks.php b/lib/compat/wordpress-6.6/blocks.php
new file mode 100644
index 0000000000000..0d8805a489d9c
--- /dev/null
+++ b/lib/compat/wordpress-6.6/blocks.php
@@ -0,0 +1,46 @@
+<?php
+/**
+ * Temporary compatibility shims for block APIs present in Gutenberg.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Replace the `__default` block bindings attribute with the full list of supported
+ * attribute names for pattern overrides.
+ *
+ * @param array $parsed_block The full block, including name and attributes.
+ *
+ * @return string The parsed block with default binding replace.
+ */
+function gutenberg_replace_pattern_override_default_binding( $parsed_block ) {
+	$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' ),
+	);
+
+	$bindings = $parsed_block['attrs']['metadata']['bindings'] ?? array();
+	if (
+		isset( $bindings['__default']['source'] ) &&
+		'core/pattern-overrides' === $bindings['__default']['source']
+	) {
+		$updated_bindings = array();
+
+		// Build an binding array of all supported attributes.
+		// Note that this also omits the `__default` attribute from the
+		// resulting array.
+		foreach ( $supported_block_attrs[ $parsed_block['blockName'] ] as $attribute_name ) {
+			// Retain any non-pattern override bindings that might be present.
+			$updated_bindings[ $attribute_name ] = isset( $bindings[ $attribute_name ] )
+				? $bindings[ $attribute_name ]
+				: array( 'source' => 'core/pattern-overrides' );
+		}
+		$parsed_block['attrs']['metadata']['bindings'] = $updated_bindings;
+	}
+
+	return $parsed_block;
+}
+
+add_filter( 'render_block_data', 'gutenberg_replace_pattern_override_default_binding', 10, 1 );
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
new file mode 100644
index 0000000000000..f725366c33cfb
--- /dev/null
+++ b/lib/compat/wordpress-6.6/class-gutenberg-rest-global-styles-revisions-controller-6-6.php
@@ -0,0 +1,97 @@
+<?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
+ * @since 6.6.0 Added custom relative theme file URIs to `_links`.
+ *
+ * @see WP_REST_Controller
+ */
+class Gutenberg_REST_Global_Styles_Revisions_Controller_6_6 extends Gutenberg_REST_Global_Styles_Revisions_Controller_6_5 {
+	/**
+	 * Prepares the revision for the REST response.
+	 *
+	 * @since 6.3.0
+	 * @since 6.6.0 Added resolved URI links to the response.
+	 *
+	 * @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();
+		$theme_json = array();
+
+		if ( ! empty( $global_styles_config['styles'] ) || ! empty( $global_styles_config['settings'] ) ) {
+			$theme_json           = new WP_Theme_JSON_Gutenberg( $global_styles_config, 'custom' );
+			$global_styles_config = ( $theme_json )->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 );
+
+		$response = rest_ensure_response( $data );
+
+		// Add resolved URIs to the response.
+		$links               = array();
+		$resolved_theme_uris = WP_Theme_JSON_Resolver_Gutenberg::get_resolved_theme_uris( $theme_json );
+		if ( ! empty( $resolved_theme_uris ) ) {
+			$links['https://api.w.org/theme-file'] = $resolved_theme_uris;
+		}
+		$response->add_links( $links );
+
+		return $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 656e38ffe933f..e670afacea5b3 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
@@ -113,8 +113,19 @@ public function get_template_fallback( $request ) {
 			array_shift( $hierarchy );
 		} while ( ! empty( $hierarchy ) && empty( $fallback_template->content ) );
 
-		$response = $this->prepare_item_for_response( $fallback_template, $request );
+		// To maintain original behavior, return an empty object rather than a 404 error when no template is found.
+		$response = $fallback_template ? $this->prepare_item_for_response( $fallback_template, $request ) : new stdClass();
 
 		return rest_ensure_response( $response );
 	}
+
+	/**
+	 * See WP_REST_Templates_Controller::prepare_item_for_response
+	 */
+	public function prepare_item_for_response( $item, $request ) {
+		$blocks        = parse_blocks( $item->content );
+		$blocks        = gutenberg_replace_pattern_blocks( $blocks );
+		$item->content = serialize_blocks( $blocks );
+		return parent::prepare_item_for_response( $item, $request );
+	}
 }
diff --git a/lib/compat/wordpress-6.6/resolve-patterns.php b/lib/compat/wordpress-6.6/resolve-patterns.php
index dafda83266768..5105619c42613 100644
--- a/lib/compat/wordpress-6.6/resolve-patterns.php
+++ b/lib/compat/wordpress-6.6/resolve-patterns.php
@@ -61,25 +61,6 @@ function gutenberg_replace_pattern_blocks( $blocks, &$inner_content = null ) {
 	return $blocks;
 }
 
-function gutenberg_replace_pattern_blocks_get_block_templates( $templates ) {
-	foreach ( $templates as $template ) {
-		$blocks            = parse_blocks( $template->content );
-		$blocks            = gutenberg_replace_pattern_blocks( $blocks );
-		$template->content = serialize_blocks( $blocks );
-	}
-	return $templates;
-}
-
-function gutenberg_replace_pattern_blocks_get_block_template( $template ) {
-	if ( null === $template ) {
-		return $template;
-	}
-	$blocks            = parse_blocks( $template->content );
-	$blocks            = gutenberg_replace_pattern_blocks( $blocks );
-	$template->content = serialize_blocks( $blocks );
-	return $template;
-}
-
 function gutenberg_replace_pattern_blocks_patterns_endpoint( $result, $server, $request ) {
 	if ( $request->get_route() !== '/wp/v2/block-patterns/patterns' ) {
 		return $result;
@@ -98,10 +79,6 @@ function gutenberg_replace_pattern_blocks_patterns_endpoint( $result, $server, $
 	return $result;
 }
 
-// For core merge, we should avoid the double parse and replace the patterns in templates here:
-// https://github.com/WordPress/wordpress-develop/blob/02fb53498f1ce7e63d807b9bafc47a7dba19d169/src/wp-includes/block-template-utils.php#L558
-add_filter( 'get_block_templates', 'gutenberg_replace_pattern_blocks_get_block_templates' );
-add_filter( 'get_block_template', 'gutenberg_replace_pattern_blocks_get_block_template' );
 // Similarly, for patterns, we can avoid the double parse here:
 // https://github.com/WordPress/wordpress-develop/blob/02fb53498f1ce7e63d807b9bafc47a7dba19d169/src/wp-includes/class-wp-block-patterns-registry.php#L175
 add_filter( 'rest_post_dispatch', 'gutenberg_replace_pattern_blocks_patterns_endpoint', 10, 3 );
diff --git a/lib/compat/wordpress-6.6/rest-api.php b/lib/compat/wordpress-6.6/rest-api.php
index 8526093dc99dd..2cf026cc817c1 100644
--- a/lib/compat/wordpress-6.6/rest-api.php
+++ b/lib/compat/wordpress-6.6/rest-api.php
@@ -76,3 +76,84 @@ function gutenberg_add_class_list_to_public_post_types() {
 	}
 }
 add_action( 'rest_api_init', 'gutenberg_add_class_list_to_public_post_types' );
+
+
+/**
+ * Registers the Global Styles Revisions REST API routes.
+ */
+function gutenberg_register_global_styles_revisions_endpoints() {
+	$global_styles_revisions_controller = new Gutenberg_REST_Global_Styles_Revisions_Controller_6_6();
+	$global_styles_revisions_controller->register_routes();
+}
+
+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();
+						}
+					}
+
+					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();
+						}
+					}
+
+					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' );
diff --git a/lib/experimental/blocks.php b/lib/experimental/blocks.php
index fc67f2c9d4377..bfe57c26b3eca 100644
--- a/lib/experimental/blocks.php
+++ b/lib/experimental/blocks.php
@@ -77,3 +77,46 @@ function wp_enqueue_block_view_script( $block_name, $args ) {
 		add_filter( 'render_block', $callback, 10, 2 );
 	}
 }
+
+/*
+ * 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.
+ */
+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'
+			);
+
+			return false;
+		}
+
+		$block_names = is_string( $block_name ) ? array( $block_name ) : $block_name;
+		$result      = true;
+
+		foreach ( $block_names as $name ) {
+			if ( ! WP_Block_Styles_Registry::get_instance()->register( $name, $style_properties ) ) {
+				$result = false;
+			}
+		}
+
+		return $result;
+	}
+}
diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
index 51fa9fe9c33af..2af7cafb4838c 100644
--- a/lib/experimental/editor-settings.php
+++ b/lib/experimental/editor-settings.php
@@ -13,9 +13,6 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-sync-collaboration', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableSync = true', 'before' );
 	}
-	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-zoomed-out-view', $gutenberg_experiments ) ) {
-		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableZoomedOutView = true', 'before' );
-	}
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-custom-dataviews', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalCustomViews = true', 'before' );
 	}
@@ -31,6 +28,9 @@ 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' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );
diff --git a/lib/experimental/full-page-client-side-navigation.php b/lib/experimental/full-page-client-side-navigation.php
index ebfddf4aaf436..621502912a668 100644
--- a/lib/experimental/full-page-client-side-navigation.php
+++ b/lib/experimental/full-page-client-side-navigation.php
@@ -33,25 +33,69 @@ function _gutenberg_add_enhanced_pagination_to_query_block( $parsed_block ) {
 add_filter( 'render_block_data', '_gutenberg_add_enhanced_pagination_to_query_block' );
 
 /**
- * Add directives to all links.
+ * Adds client-side navigation directives to BODY tag.
  *
  * Note: This should probably be done per site, not by default when this option is enabled.
  *
- * @param array $content The block content.
+ * @param string $response_body The response body.
  *
- * @return array The same block content with the directives needed.
+ * @return string The rendered template with modified BODY attributes.
  */
-function _gutenberg_add_client_side_navigation_directives( $content ) {
-	$p = new WP_HTML_Tag_Processor( $content );
-	// Hack to add the necessary directives to the body tag.
-	// TODO: Find a proper way to add directives to the body tag.
-	static $body_interactive_added;
-	if ( ! $body_interactive_added ) {
-		$body_interactive_added = true;
-		return (string) $p . '<body data-wp-interactive="core/experimental" data-wp-context="{}">';
+function _gutenberg_add_client_side_navigation_directives( $response_body ) {
+	$is_html_content_type = false;
+	foreach ( headers_list() as $header ) {
+		$header_parts = preg_split( '/\s*[:;]\s*/', strtolower( $header ) );
+		if ( count( $header_parts ) >= 2 && 'content-type' === $header_parts[0] ) {
+			$is_html_content_type = in_array( $header_parts[1], array( 'text/html', 'application/xhtml+xml' ), true );
+		}
 	}
-	return (string) $p;
+	if ( ! $is_html_content_type ) {
+		return $response_body;
+	}
+
+	$p = new WP_HTML_Tag_Processor( $response_body );
+	if ( $p->next_tag( array( 'tag_name' => 'BODY' ) ) ) {
+		$p->set_attribute( 'data-wp-interactive', 'core/experimental' );
+		$p->set_attribute( 'data-wp-context', '{}' );
+		$response_body = $p->get_updated_html();
+	}
+	return $response_body;
 }
 
 // TODO: Explore moving this to the server directive processing.
-add_filter( 'render_block', '_gutenberg_add_client_side_navigation_directives' );
+add_filter( 'gutenberg_template_output_buffer', '_gutenberg_add_client_side_navigation_directives' );
+
+/**
+ * Starts output buffering at the end of the 'template_include' filter.
+ *
+ * This is to implement #43258 in core.
+ *
+ * This is a hack which would eventually be replaced with something like this in wp-includes/template-loader.php:
+ *
+ *          $template = apply_filters( 'template_include', $template );
+ *     +    ob_start( 'wp_template_output_buffer_callback' );
+ *          if ( $template ) {
+ *              include $template;
+ *          } elseif ( current_user_can( 'switch_themes' ) ) {
+ *
+ * @link https://core.trac.wordpress.org/ticket/43258
+ *
+ * @param string $passthrough Value for the template_include filter which is passed through.
+ *
+ * @return string Unmodified value of $passthrough.
+ */
+function _gutenberg_buffer_template_output( string $passthrough ): string {
+	ob_start(
+		static function ( string $output ): string {
+			/**
+			 * Filters the template output buffer prior to sending to the client.
+			 *
+			 * @param string $output Output buffer.
+			 * @return string Filtered output buffer.
+			 */
+			return (string) apply_filters( 'gutenberg_template_output_buffer', $output );
+		}
+	);
+	return $passthrough;
+}
+add_filter( 'template_include', '_gutenberg_buffer_template_output', PHP_INT_MAX );
diff --git a/lib/experimental/script-modules.php b/lib/experimental/script-modules.php
index e22b757c11950..709ab322f63a3 100644
--- a/lib/experimental/script-modules.php
+++ b/lib/experimental/script-modules.php
@@ -197,3 +197,96 @@ 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 7dfe6fbe5bb90..5147edda0deec 100644
--- a/lib/experiments-page.php
+++ b/lib/experiments-page.php
@@ -55,18 +55,6 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
-	add_settings_field(
-		'gutenberg-zoomed-out-view',
-		__( 'Zoomed out view ', 'gutenberg' ),
-		'gutenberg_display_experiment_field',
-		'gutenberg-experiments',
-		'gutenberg_experiments_section',
-		array(
-			'label' => __( 'Test a new zoomed out view on the site editor (Warning: The new feature is not ready. You may experience UX issues that are being addressed)', 'gutenberg' ),
-			'id'    => 'gutenberg-zoomed-out-view',
-		)
-	);
-
 	add_settings_field(
 		'gutenberg-custom-dataviews',
 		__( 'Custom dataviews', 'gutenberg' ),
@@ -139,6 +127,18 @@ 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_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',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'
diff --git a/lib/global-styles-and-settings.php b/lib/global-styles-and-settings.php
index 70b3f7078e62a..4ceade6c7125b 100644
--- a/lib/global-styles-and-settings.php
+++ b/lib/global-styles-and-settings.php
@@ -28,6 +28,7 @@ function gutenberg_get_global_stylesheet( $types = array() ) {
 		}
 	}
 	$tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
+	$tree = WP_Theme_JSON_Resolver_Gutenberg::resolve_theme_file_uris( $tree );
 
 	$supports_theme_json = wp_theme_has_theme_json();
 	if ( empty( $types ) && ! $supports_theme_json ) {
diff --git a/lib/load.php b/lib/load.php
index d556dd7f21b43..45b8f1a1ceb3b 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -46,8 +46,14 @@ function gutenberg_is_experiment_enabled( $name ) {
 	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';
+
 	// 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.
@@ -125,13 +131,14 @@ function gutenberg_is_experiment_enabled( $name ) {
 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';
+require __DIR__ . '/compat/wordpress-6.6/block-editor.php';
 require __DIR__ . '/compat/wordpress-6.6/compat.php';
 require __DIR__ . '/compat/wordpress-6.6/resolve-patterns.php';
 require __DIR__ . '/compat/wordpress-6.6/block-bindings/pattern-overrides.php';
 require __DIR__ . '/compat/wordpress-6.6/block-template-utils.php';
 require __DIR__ . '/compat/wordpress-6.6/option.php';
-require __DIR__ . '/compat/wordpress-6.6/class-gutenberg-rest-templates-controller-6-6.php';
-require __DIR__ . '/compat/wordpress-6.6/rest-api.php';
 require __DIR__ . '/compat/wordpress-6.6/post.php';
 
 // Experimental features.
@@ -201,6 +208,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/demo.php';
 require __DIR__ . '/experiments-page.php';
 require __DIR__ . '/interactivity-api.php';
+require __DIR__ . '/block-template-utils.php';
 if ( gutenberg_is_experiment_enabled( 'gutenberg-full-page-client-side-navigation' ) ) {
 	require __DIR__ . '/experimental/full-page-client-side-navigation.php';
 }
@@ -228,6 +236,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/block-supports/duotone.php';
 require __DIR__ . '/block-supports/shadow.php';
 require __DIR__ . '/block-supports/background.php';
+require __DIR__ . '/block-supports/block-style-variations.php';
 
 // Data views.
 require_once __DIR__ . '/experimental/data-views.php';
diff --git a/lib/rest-api.php b/lib/rest-api.php
index 04f521d132c46..fedd75151584d 100644
--- a/lib/rest-api.php
+++ b/lib/rest-api.php
@@ -18,3 +18,15 @@ function gutenberg_register_global_styles_endpoints() {
 	$global_styles_controller->register_routes();
 }
 add_action( 'rest_api_init', 'gutenberg_register_global_styles_endpoints' );
+
+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();
+	}
+}
+
+add_action( 'rest_api_init', 'gutenberg_register_edit_site_export_controller_endpoints' );
diff --git a/lib/theme-i18n.json b/lib/theme-i18n.json
index ea6bf7fe6727e..e4d14502132cb 100644
--- a/lib/theme-i18n.json
+++ b/lib/theme-i18n.json
@@ -38,6 +38,13 @@
 				}
 			]
 		},
+		"dimensions": {
+			"aspectRatios": [
+				{
+					"name": "Aspect ratio name"
+				}
+			]
+		},
 		"blocks": {
 			"*": {
 				"typography": {
diff --git a/lib/theme.json b/lib/theme.json
index 90a5d975e68d6..f638d9722ef67 100644
--- a/lib/theme.json
+++ b/lib/theme.json
@@ -190,6 +190,46 @@
 			],
 			"text": true
 		},
+		"dimensions": {
+			"defaultAspectRatios": true,
+			"aspectRatios": [
+				{
+					"name": "Square - 1:1",
+					"slug": "square",
+					"ratio": "1"
+				},
+				{
+					"name": "Standard - 4:3",
+					"slug": "4-3",
+					"ratio": "4/3"
+				},
+				{
+					"name": "Portrait - 3:4",
+					"slug": "3-4",
+					"ratio": "3/4"
+				},
+				{
+					"name": "Classic - 3:2",
+					"slug": "3-2",
+					"ratio": "3/2"
+				},
+				{
+					"name": "Classic Portrait - 2:3",
+					"slug": "2-3",
+					"ratio": "2/3"
+				},
+				{
+					"name": "Wide - 16:9",
+					"slug": "16-9",
+					"ratio": "16/9"
+				},
+				{
+					"name": "Tall - 9:16",
+					"slug": "9-16",
+					"ratio": "9/16"
+				}
+			]
+		},
 		"shadow": {
 			"defaultPresets": true,
 			"presets": [
@@ -225,6 +265,7 @@
 			"margin": false,
 			"padding": false,
 			"customSpacingSize": true,
+			"defaultSpacingSizes": true,
 			"units": [ "px", "em", "rem", "vh", "vw", "%" ],
 			"spacingScale": {
 				"operator": "*",
@@ -264,7 +305,7 @@
 			"fontWeight": true,
 			"letterSpacing": true,
 			"lineHeight": false,
-			"textAlign": false,
+			"textAlign": true,
 			"textColumns": false,
 			"textDecoration": true,
 			"textTransform": true,
@@ -330,6 +371,40 @@
 				"bottom": "0px",
 				"left": "0px"
 			}
+		},
+		"blocks": {
+			"core/button": {
+				"variations": {
+					"outline": {
+						"border": {
+							"width": "2px",
+							"style": "solid",
+							"color": "currentColor"
+						},
+						"color": {
+							"text": "currentColor",
+							"gradient": "transparent none"
+						},
+						"spacing": {
+							"padding": {
+								"top": "0.667em",
+								"right": "1.33em",
+								"bottom": "0.667em",
+								"left": "1.33em"
+							}
+						}
+					}
+				}
+			},
+			"core/site-logo": {
+				"variations": {
+					"rounded": {
+						"border": {
+							"radius": "9999px"
+						}
+					}
+				}
+			}
 		}
 	}
 }
diff --git a/package-lock.json b/package-lock.json
index 2d67d54cf6f63..2bc800fe4d81a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "gutenberg",
-	"version": "18.3.0-rc.1",
+	"version": "18.5.0-rc.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "gutenberg",
-			"version": "18.3.0-rc.1",
+			"version": "18.5.0-rc.1",
 			"hasInstallScript": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -80,8 +80,7 @@
 				"@wordpress/warning": "file:packages/warning",
 				"@wordpress/widgets": "file:packages/widgets",
 				"@wordpress/wordcount": "file:packages/wordcount",
-				"es-module-shims": "^1.8.2",
-				"wicg-inert": "3.1.2"
+				"es-module-shims": "^1.8.2"
 			},
 			"devDependencies": {
 				"@actions/core": "1.9.1",
@@ -125,9 +124,9 @@
 				"@types/npm-package-arg": "6.1.1",
 				"@types/prettier": "2.4.4",
 				"@types/qs": "6.9.7",
-				"@types/react": "18.0.21",
+				"@types/react": "18.3.1",
 				"@types/react-dates": "21.8.3",
-				"@types/react-dom": "18.0.6",
+				"@types/react-dom": "18.3.0",
 				"@types/requestidlecallback": "0.3.4",
 				"@types/semver": "7.3.8",
 				"@types/sprintf-js": "1.1.2",
@@ -173,6 +172,7 @@
 				"caniuse-lite": "1.0.30001579",
 				"chalk": "4.1.1",
 				"change-case": "4.1.2",
+				"client-zip": "^2.4.5",
 				"commander": "9.2.0",
 				"concurrently": "3.5.0",
 				"copy-webpack-plugin": "10.2.0",
@@ -205,7 +205,7 @@
 				"jest-message-util": "29.6.2",
 				"jest-watch-typeahead": "2.2.2",
 				"lerna": "7.1.4",
-				"lint-staged": "10.0.1",
+				"lint-staged": "10.0.2",
 				"make-dir": "3.0.0",
 				"mkdirp": "3.0.1",
 				"mock-match-media": "0.4.2",
@@ -255,15 +255,6 @@
 				"npm": ">=10.2.3"
 			}
 		},
-		"node_modules/@aashutoshrathi/word-wrap": {
-			"version": "1.2.6",
-			"resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
-			"integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
 		"node_modules/@actions/core": {
 			"version": "1.9.1",
 			"resolved": "https://registry.npmjs.org/@actions/core/-/core-1.9.1.tgz",
@@ -1151,9 +1142,9 @@
 			}
 		},
 		"node_modules/@appium/support/node_modules/gauge": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/gauge/-/gauge-5.0.1.tgz",
-			"integrity": "sha512-CmykPMJGuNan/3S4kZOpvvPYSNqSHANiWnh9XcMU2pSjtBfF0XzZ2p1bFAxTbnFxyBuPxQYHhzwaoOmUdqzvxQ==",
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/gauge/-/gauge-5.0.2.tgz",
+			"integrity": "sha512-pMaFftXPtiGIHCJHdcUUx9Rby/rFT/Kkt3fIIGCs+9PMDIljSyRiqraTlxNtBReJRDfUefpa263RQ3vnp5G/LQ==",
 			"dev": true,
 			"dependencies": {
 				"aproba": "^1.0.3 || ^2.0.0",
@@ -1261,9 +1252,9 @@
 			}
 		},
 		"node_modules/@appium/support/node_modules/minipass": {
-			"version": "7.0.4",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-			"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+			"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 			"dev": true,
 			"engines": {
 				"node": ">=16 || 14 >=14.17"
@@ -3641,13 +3632,13 @@
 			}
 		},
 		"node_modules/@babel/preset-env/node_modules/babel-plugin-polyfill-corejs2": {
-			"version": "0.4.10",
-			"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.10.tgz",
-			"integrity": "sha512-rpIuu//y5OX6jVU+a5BCn1R5RSZYWAl2Nar76iwaOdycqb6JPxediskWFMMl7stfwNJR4b7eiQvh5fB5TEQJTQ==",
+			"version": "0.4.11",
+			"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz",
+			"integrity": "sha512-sMEJ27L0gRHShOh5G54uAAPaiCOygY/5ratXuiyb2G46FmlSpc9eFCzYVyDiPxfNbwzA7mYahmjQc5q+CZQ09Q==",
 			"dev": true,
 			"dependencies": {
 				"@babel/compat-data": "^7.22.6",
-				"@babel/helper-define-polyfill-provider": "^0.6.1",
+				"@babel/helper-define-polyfill-provider": "^0.6.2",
 				"semver": "^6.3.1"
 			},
 			"peerDependencies": {
@@ -3655,9 +3646,9 @@
 			}
 		},
 		"node_modules/@babel/preset-env/node_modules/babel-plugin-polyfill-corejs2/node_modules/@babel/helper-define-polyfill-provider": {
-			"version": "0.6.1",
-			"resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.1.tgz",
-			"integrity": "sha512-o7SDgTJuvx5vLKD6SFvkydkSMBvahDKGiNJzG22IZYXhiqoe9efY7zocICBgzHV4IRg5wdgl2nEL/tulKIEIbA==",
+			"version": "0.6.2",
+			"resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.2.tgz",
+			"integrity": "sha512-LV76g+C502biUK6AyZ3LK10vDpDyCzZnhZFXkH1L75zHPj68+qc8Zfpx2th+gzwA2MzyK+1g/3EPl62yFnVttQ==",
 			"dev": true,
 			"dependencies": {
 				"@babel/helper-compilation-targets": "^7.22.6",
@@ -3824,9 +3815,9 @@
 			"integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
 		},
 		"node_modules/@babel/runtime": {
-			"version": "7.24.4",
-			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz",
-			"integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==",
+			"version": "7.24.5",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz",
+			"integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==",
 			"dependencies": {
 				"regenerator-runtime": "^0.14.0"
 			},
@@ -4210,15 +4201,6 @@
 			"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
 			"integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
 		},
-		"node_modules/@emotion/is-prop-valid": {
-			"version": "0.8.8",
-			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
-			"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-			"optional": true,
-			"dependencies": {
-				"@emotion/memoize": "0.7.4"
-			}
-		},
 		"node_modules/@emotion/jest": {
 			"version": "11.7.1",
 			"resolved": "https://registry.npmjs.org/@emotion/jest/-/jest-11.7.1.tgz",
@@ -4245,9 +4227,9 @@
 			}
 		},
 		"node_modules/@emotion/memoize": {
-			"version": "0.7.4",
-			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-			"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+			"version": "0.7.5",
+			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+			"integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
 		},
 		"node_modules/@emotion/native": {
 			"version": "11.0.0",
@@ -4917,17 +4899,17 @@
 			}
 		},
 		"node_modules/@floating-ui/dom/node_modules/@floating-ui/utils": {
-			"version": "0.2.1",
-			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
-			"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
+			"version": "0.2.2",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
+			"integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
 		},
 		"node_modules/@floating-ui/react-dom": {
-			"version": "2.0.8",
-			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
-			"integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
+			"version": "2.0.9",
+			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz",
+			"integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==",
 			"dev": true,
 			"dependencies": {
-				"@floating-ui/dom": "^1.6.1"
+				"@floating-ui/dom": "^1.0.0"
 			},
 			"peerDependencies": {
 				"react": ">=16.8.0",
@@ -5931,9 +5913,9 @@
 			}
 		},
 		"node_modules/@lerna/create/node_modules/validate-npm-package-name/node_modules/builtins": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-			"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.1.0.tgz",
+			"integrity": "sha512-SW9lzGTLvWTP1AY8xeAMZimqDrIaSdLQUcVr9DMef51niJ022Ri87SwRRKYm4A6iHfkPaiVUu/Duw2Wc4J7kKg==",
 			"dev": true,
 			"dependencies": {
 				"semver": "^7.0.0"
@@ -6090,9 +6072,9 @@
 			}
 		},
 		"node_modules/@npmcli/installed-package-contents/node_modules/npm-bundled": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-3.0.0.tgz",
-			"integrity": "sha512-Vq0eyEQy+elFpzsKjMss9kxqb9tG3YHg4dsyWuUENuzvSUWe1TCnW/vV9FkhvBk/brEDoDiVd+M1Btosa6ImdQ==",
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-3.0.1.tgz",
+			"integrity": "sha512-+AvaheE/ww1JEwRHOrn4WHNzOxGtVp+adrg2AeZS/7KuxGUYFuBta98wYpfHBbJp6Tg6j1NKSEVHNcfZzJHQwQ==",
 			"dev": true,
 			"dependencies": {
 				"npm-normalize-package-bin": "^3.0.0"
@@ -9724,9 +9706,9 @@
 			}
 		},
 		"node_modules/@react-native-community/cli-doctor/node_modules/yaml": {
-			"version": "2.4.1",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz",
-			"integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==",
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.2.tgz",
+			"integrity": "sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==",
 			"bin": {
 				"yaml": "bin.mjs"
 			},
@@ -10732,9 +10714,9 @@
 			}
 		},
 		"node_modules/@react-native-community/slider": {
-			"version": "3.0.2-wp-4",
-			"resolved": "https://raw.githubusercontent.com/wordpress-mobile/react-native-slider/v3.0.2-wp-4/react-native-community-slider-3.0.2-wp-4.tgz",
-			"integrity": "sha512-BrfAehlhFSUN0kzIhpeF8X4BvCJp6Rtxqfr+1Kpfn2B4kCuRmJoaqIDc+igPCl8ya99vzV1Uifw30P16NTMhuQ==",
+			"version": "3.0.2-wp-5",
+			"resolved": "https://raw.githubusercontent.com/wordpress-mobile/react-native-slider/v3.0.2-wp-5/react-native-community-slider-3.0.2-wp-5.tgz",
+			"integrity": "sha512-19yl9Em1mFKFLB9o3IO3VpBFw+U7cswjRk6cZ7kkhDCpDD3u0cpzkaIZK6NuFIPCLqOwU0MPtP+gonanN1JQKw==",
 			"workspaces": [
 				"src",
 				"example"
@@ -12869,9 +12851,9 @@
 			}
 		},
 		"node_modules/@storybook/cli/node_modules/recast": {
-			"version": "0.23.6",
-			"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.6.tgz",
-			"integrity": "sha512-9FHoNjX1yjuesMwuthAmPKabxYQdOgihFYmT5ebXfYGBcnqXZf3WOVz+5foEZ8Y83P4ZY6yQD5GMmtV+pgCCAQ==",
+			"version": "0.23.7",
+			"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.7.tgz",
+			"integrity": "sha512-MpQlLZVpqbbxYcqEjwpRWo88sGvjOYoXptySz710RuddNMHx+wPkoNX6YyLZJlXAh5VZr1qmPrTwcTuFMh0Lag==",
 			"dev": true,
 			"dependencies": {
 				"ast-types": "^0.16.1",
@@ -13129,9 +13111,9 @@
 			}
 		},
 		"node_modules/@storybook/codemod/node_modules/recast": {
-			"version": "0.23.6",
-			"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.6.tgz",
-			"integrity": "sha512-9FHoNjX1yjuesMwuthAmPKabxYQdOgihFYmT5ebXfYGBcnqXZf3WOVz+5foEZ8Y83P4ZY6yQD5GMmtV+pgCCAQ==",
+			"version": "0.23.7",
+			"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.7.tgz",
+			"integrity": "sha512-MpQlLZVpqbbxYcqEjwpRWo88sGvjOYoXptySz710RuddNMHx+wPkoNX6YyLZJlXAh5VZr1qmPrTwcTuFMh0Lag==",
 			"dev": true,
 			"dependencies": {
 				"ast-types": "^0.16.1",
@@ -13388,22 +13370,22 @@
 			}
 		},
 		"node_modules/@storybook/core-common/node_modules/glob": {
-			"version": "10.3.12",
-			"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
-			"integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
+			"version": "10.3.15",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.15.tgz",
+			"integrity": "sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==",
 			"dev": true,
 			"dependencies": {
 				"foreground-child": "^3.1.0",
 				"jackspeak": "^2.3.6",
 				"minimatch": "^9.0.1",
 				"minipass": "^7.0.4",
-				"path-scurry": "^1.10.2"
+				"path-scurry": "^1.11.0"
 			},
 			"bin": {
 				"glob": "dist/esm/bin.mjs"
 			},
 			"engines": {
-				"node": ">=16 || 14 >=14.17"
+				"node": ">=16 || 14 >=14.18"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/isaacs"
@@ -13467,9 +13449,9 @@
 			}
 		},
 		"node_modules/@storybook/core-common/node_modules/minipass": {
-			"version": "7.0.4",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-			"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+			"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 			"dev": true,
 			"engines": {
 				"node": ">=16 || 14 >=14.17"
@@ -13710,9 +13692,9 @@
 			}
 		},
 		"node_modules/@storybook/core-server/node_modules/ws": {
-			"version": "8.16.0",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-			"integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+			"version": "8.17.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
+			"integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
 			"dev": true,
 			"engines": {
 				"node": ">=10.0.0"
@@ -13748,9 +13730,9 @@
 			}
 		},
 		"node_modules/@storybook/csf": {
-			"version": "0.1.3",
-			"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.3.tgz",
-			"integrity": "sha512-IPZvXXo4b3G+gpmgBSBqVM81jbp2ePOKsvhgJdhyZJtkYQCII7rg9KKLQhvBQM5sLaF1eU6r0iuwmyynC9d9SA==",
+			"version": "0.1.7",
+			"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.7.tgz",
+			"integrity": "sha512-53JeLZBibjQxi0Ep+/AJTfxlofJlxy1jXcSKENlnKxHjWEYyHQCumMP5yTFjf7vhNnMjEpV3zx6t23ssFiGRyw==",
 			"dev": true,
 			"dependencies": {
 				"type-fest": "^2.19.0"
@@ -13818,9 +13800,9 @@
 			}
 		},
 		"node_modules/@storybook/csf-tools/node_modules/recast": {
-			"version": "0.23.6",
-			"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.6.tgz",
-			"integrity": "sha512-9FHoNjX1yjuesMwuthAmPKabxYQdOgihFYmT5ebXfYGBcnqXZf3WOVz+5foEZ8Y83P4ZY6yQD5GMmtV+pgCCAQ==",
+			"version": "0.23.7",
+			"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.7.tgz",
+			"integrity": "sha512-MpQlLZVpqbbxYcqEjwpRWo88sGvjOYoXptySz710RuddNMHx+wPkoNX6YyLZJlXAh5VZr1qmPrTwcTuFMh0Lag==",
 			"dev": true,
 			"dependencies": {
 				"ast-types": "^0.16.1",
@@ -15885,9 +15867,9 @@
 			}
 		},
 		"node_modules/@types/node": {
-			"version": "18.19.29",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.29.tgz",
-			"integrity": "sha512-5pAX7ggTmWZdhUrhRWLPf+5oM7F80bcKVCBbr0zwEkTNzTJL2CWQjznpFgHYy6GrzkYi2Yjy7DHKoynFxqPV8g==",
+			"version": "18.19.33",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.33.tgz",
+			"integrity": "sha512-NR9+KrpSajr2qBVp/Yt5TU/rp+b5Mayi3+OlMlcg2cVCfRmcG5PWZ7S4+MG9PZ5gWBoc9Pd0BKSRViuBCRPu0A==",
 			"dependencies": {
 				"undici-types": "~5.26.4"
 			}
@@ -15966,12 +15948,11 @@
 			"dev": true
 		},
 		"node_modules/@types/react": {
-			"version": "18.0.21",
-			"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz",
-			"integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==",
+			"version": "18.3.1",
+			"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz",
+			"integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==",
 			"dependencies": {
 				"@types/prop-types": "*",
-				"@types/scheduler": "*",
 				"csstype": "^3.0.2"
 			}
 		},
@@ -15987,9 +15968,9 @@
 			}
 		},
 		"node_modules/@types/react-dom": {
-			"version": "18.0.6",
-			"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
-			"integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==",
+			"version": "18.3.0",
+			"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+			"integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
 			"dependencies": {
 				"@types/react": "*"
 			}
@@ -16830,16 +16811,16 @@
 			}
 		},
 		"node_modules/@use-gesture/core": {
-			"version": "10.2.24",
-			"resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.2.24.tgz",
-			"integrity": "sha512-ZL7F9mgOn3Qlnp6QLI9jaOfcvqrx6JPE/BkdVSd8imveaFTm/a3udoO6f5Us/1XtqnL4347PsIiK6AtCvMHk2Q=="
+			"version": "10.3.1",
+			"resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+			"integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw=="
 		},
 		"node_modules/@use-gesture/react": {
-			"version": "10.2.24",
-			"resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.2.24.tgz",
-			"integrity": "sha512-rAZ8Nnpu1g4eFzqCPlaq+TppJpMy0dTpYOQx5KpfoBF4P3aWnCqwj7eKxcmdIb1NJKpIJj50DPugUH4mq5cpBg==",
+			"version": "10.3.1",
+			"resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+			"integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
 			"dependencies": {
-				"@use-gesture/core": "10.2.24"
+				"@use-gesture/core": "10.3.1"
 			},
 			"peerDependencies": {
 				"react": ">= 16.8.0"
@@ -16902,31 +16883,31 @@
 			}
 		},
 		"node_modules/@wdio/config/node_modules/glob": {
-			"version": "10.3.12",
-			"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
-			"integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
+			"version": "10.3.15",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.15.tgz",
+			"integrity": "sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==",
 			"dev": true,
 			"dependencies": {
 				"foreground-child": "^3.1.0",
 				"jackspeak": "^2.3.6",
 				"minimatch": "^9.0.1",
 				"minipass": "^7.0.4",
-				"path-scurry": "^1.10.2"
+				"path-scurry": "^1.11.0"
 			},
 			"bin": {
 				"glob": "dist/esm/bin.mjs"
 			},
 			"engines": {
-				"node": ">=16 || 14 >=14.17"
+				"node": ">=16 || 14 >=14.18"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
 		"node_modules/@wdio/config/node_modules/hosted-git-info": {
-			"version": "7.0.1",
-			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-7.0.1.tgz",
-			"integrity": "sha512-+K84LB1DYwMHoHSgaOY/Jfhw3ucPmSET5v98Ke/HdNSw4a0UktWzyW1mjhjpuxxTqOOsfWT/7iVshHmVZ4IpOA==",
+			"version": "7.0.2",
+			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-7.0.2.tgz",
+			"integrity": "sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==",
 			"dev": true,
 			"dependencies": {
 				"lru-cache": "^10.0.1"
@@ -16936,9 +16917,9 @@
 			}
 		},
 		"node_modules/@wdio/config/node_modules/json-parse-even-better-errors": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.1.tgz",
-			"integrity": "sha512-aatBvbL26wVUCLmbWdCpeu9iF5wOyWpagiKkInA+kfws3sWdBrTnsvN2CKcyCYyUrc7rebNBlK6+kteg7ksecg==",
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.2.tgz",
+			"integrity": "sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==",
 			"dev": true,
 			"engines": {
 				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
@@ -16969,9 +16950,9 @@
 			}
 		},
 		"node_modules/@wdio/config/node_modules/lru-cache": {
-			"version": "10.2.0",
-			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
-			"integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
+			"version": "10.2.2",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
+			"integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
 			"dev": true,
 			"engines": {
 				"node": "14 || >=16.14"
@@ -16993,18 +16974,18 @@
 			}
 		},
 		"node_modules/@wdio/config/node_modules/minipass": {
-			"version": "7.0.4",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-			"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+			"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 			"dev": true,
 			"engines": {
 				"node": ">=16 || 14 >=14.17"
 			}
 		},
 		"node_modules/@wdio/config/node_modules/normalize-package-data": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-6.0.0.tgz",
-			"integrity": "sha512-UL7ELRVxYBHBgYEtZCXjxuD5vPxnmvMGq0jp/dGPKKrN7tfsBh2IY7TlJ15WWwdjRWD3RJbnsygUurTK3xkPkg==",
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-6.0.1.tgz",
+			"integrity": "sha512-6rvCfeRW+OEZagAB4lMLSNuTNYZWLVtKccK79VSTf//yTY5VOCgcpH80O+bZK8Neps7pUnd5G+QlMg1yV/2iZQ==",
 			"dev": true,
 			"dependencies": {
 				"hosted-git-info": "^7.0.0",
@@ -17122,9 +17103,9 @@
 			}
 		},
 		"node_modules/@wdio/config/node_modules/type-fest": {
-			"version": "4.15.0",
-			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.15.0.tgz",
-			"integrity": "sha512-tB9lu0pQpX5KJq54g+oHOLumOx+pMep4RaM6liXh2PKmVRFF+/vAtUP0ZaJ0kOySfVNjF6doBWPHhBhISKdlIA==",
+			"version": "4.18.2",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.18.2.tgz",
+			"integrity": "sha512-+suCYpfJLAe4OXS6+PPXjW3urOS4IoP9waSiLuXfLgqZODKw/aWwASvzqE886wA0kQgGy0mIWyhd87VpqIy6Xg==",
 			"dev": true,
 			"engines": {
 				"node": ">=16"
@@ -17218,9 +17199,9 @@
 			}
 		},
 		"node_modules/@wdio/repl/node_modules/@types/node": {
-			"version": "20.12.3",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.3.tgz",
-			"integrity": "sha512-sD+ia2ubTeWrOu+YMF+MTAB7E+O7qsMqAbMfW7DG3K1URwhZ5hN1pLlRVGbf4wDFzSfikL05M17EyorS86jShw==",
+			"version": "20.12.12",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
+			"integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
 			"dev": true,
 			"dependencies": {
 				"undici-types": "~5.26.4"
@@ -17239,9 +17220,9 @@
 			}
 		},
 		"node_modules/@wdio/types/node_modules/@types/node": {
-			"version": "20.12.3",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.3.tgz",
-			"integrity": "sha512-sD+ia2ubTeWrOu+YMF+MTAB7E+O7qsMqAbMfW7DG3K1URwhZ5hN1pLlRVGbf4wDFzSfikL05M17EyorS86jShw==",
+			"version": "20.12.12",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
+			"integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
 			"dev": true,
 			"dependencies": {
 				"undici-types": "~5.26.4"
@@ -19056,9 +19037,9 @@
 			}
 		},
 		"node_modules/appium/node_modules/gauge": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/gauge/-/gauge-5.0.1.tgz",
-			"integrity": "sha512-CmykPMJGuNan/3S4kZOpvvPYSNqSHANiWnh9XcMU2pSjtBfF0XzZ2p1bFAxTbnFxyBuPxQYHhzwaoOmUdqzvxQ==",
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/gauge/-/gauge-5.0.2.tgz",
+			"integrity": "sha512-pMaFftXPtiGIHCJHdcUUx9Rby/rFT/Kkt3fIIGCs+9PMDIljSyRiqraTlxNtBReJRDfUefpa263RQ3vnp5G/LQ==",
 			"dev": true,
 			"dependencies": {
 				"aproba": "^1.0.3 || ^2.0.0",
@@ -20061,15 +20042,15 @@
 			}
 		},
 		"node_modules/babel-loader/node_modules/ajv": {
-			"version": "8.12.0",
-			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-			"integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+			"version": "8.13.0",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.13.0.tgz",
+			"integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==",
 			"dev": true,
 			"dependencies": {
-				"fast-deep-equal": "^3.1.1",
+				"fast-deep-equal": "^3.1.3",
 				"json-schema-traverse": "^1.0.0",
 				"require-from-string": "^2.0.2",
-				"uri-js": "^4.2.2"
+				"uri-js": "^4.4.1"
 			},
 			"funding": {
 				"type": "github",
@@ -20442,6 +20423,30 @@
 				"@babel/core": "^7.0.0"
 			}
 		},
+		"node_modules/babel-runtime": {
+			"version": "6.25.0",
+			"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.25.0.tgz",
+			"integrity": "sha512-zeCYxDePWYAT/DfmQWIHsMSFW2vv45UIwIAMjGvQVsTd47RwsiRH0uK1yzyWZ7LDBKdhnGDPM6NYEO5CZyhPrg==",
+			"dev": true,
+			"dependencies": {
+				"core-js": "^2.4.0",
+				"regenerator-runtime": "^0.10.0"
+			}
+		},
+		"node_modules/babel-runtime/node_modules/core-js": {
+			"version": "2.6.12",
+			"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+			"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+			"deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+			"dev": true,
+			"hasInstallScript": true
+		},
+		"node_modules/babel-runtime/node_modules/regenerator-runtime": {
+			"version": "0.10.5",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+			"integrity": "sha512-02YopEIhAgiBHWeoTiA8aitHDt8z6w+rQqNuIftlM+ZtvSl/brTouaU7DW6GO/cHtvxJvS4Hwv2ibKdxIRi24w==",
+			"dev": true
+		},
 		"node_modules/bail": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/bail/-/bail-1.0.3.tgz",
@@ -21876,11 +21881,6 @@
 				"node": ">=0.10.0"
 			}
 		},
-		"node_modules/classnames": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
-			"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
-		},
 		"node_modules/clean-css": {
 			"version": "5.3.3",
 			"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
@@ -22052,9 +22052,9 @@
 			"dev": true
 		},
 		"node_modules/client-zip": {
-			"version": "2.4.4",
-			"resolved": "https://registry.npmjs.org/client-zip/-/client-zip-2.4.4.tgz",
-			"integrity": "sha512-Ixk40BUI7VvNDxW7SCze20GbCuC+gjP4tGkXUpo6/W96bOf96HSed6cOQVeUOIe74SJAG/dIrBr7AtR4xBVnsA=="
+			"version": "2.4.5",
+			"resolved": "https://registry.npmjs.org/client-zip/-/client-zip-2.4.5.tgz",
+			"integrity": "sha512-4y4d5ZeTH/szIAMQeC8ju67pxtvj+3u20wMGwOFrZk+pegy3aSEA2JkwgC8XVDTXP/Iqn1gyqNQXmkyBp4KLEQ=="
 		},
 		"node_modules/cliui": {
 			"version": "6.0.0",
@@ -22157,6 +22157,14 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/clsx": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/cmd-shim": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-6.0.1.tgz",
@@ -23148,15 +23156,15 @@
 			}
 		},
 		"node_modules/copy-webpack-plugin/node_modules/ajv": {
-			"version": "8.12.0",
-			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-			"integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+			"version": "8.13.0",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.13.0.tgz",
+			"integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==",
 			"dev": true,
 			"dependencies": {
-				"fast-deep-equal": "^3.1.1",
+				"fast-deep-equal": "^3.1.3",
 				"json-schema-traverse": "^1.0.0",
 				"require-from-string": "^2.0.2",
-				"uri-js": "^4.2.2"
+				"uri-js": "^4.4.1"
 			},
 			"funding": {
 				"type": "github",
@@ -25844,9 +25852,9 @@
 			}
 		},
 		"node_modules/envinfo": {
-			"version": "7.11.1",
-			"resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.11.1.tgz",
-			"integrity": "sha512-8PiZgZNIB4q/Lw4AhOvAfB/ityHAd2bli3lESSWmWSzSsl5dKpy5N1d1Rfkd2teq/g9xN90lc6o98DOjMeYHpg==",
+			"version": "7.13.0",
+			"resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.13.0.tgz",
+			"integrity": "sha512-cvcaMr7KqXVh4nyzGTVqTum+gAiL265x5jUWQIDLq//zOGbW+gSW/C+OWLleY/rs9Qole6AZLMXPbtIFQbqu+Q==",
 			"bin": {
 				"envinfo": "dist/cli.js"
 			},
@@ -26836,17 +26844,17 @@
 			}
 		},
 		"node_modules/eslint/node_modules/optionator": {
-			"version": "0.9.3",
-			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
-			"integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
+			"version": "0.9.4",
+			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+			"integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
 			"dev": true,
 			"dependencies": {
-				"@aashutoshrathi/word-wrap": "^1.2.3",
 				"deep-is": "^0.1.3",
 				"fast-levenshtein": "^2.0.6",
 				"levn": "^0.4.1",
 				"prelude-ls": "^1.2.1",
-				"type-check": "^0.4.0"
+				"type-check": "^0.4.0",
+				"word-wrap": "^1.2.5"
 			},
 			"engines": {
 				"node": ">= 0.8.0"
@@ -28599,6 +28607,30 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/framer-motion": {
+			"version": "11.1.9",
+			"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.9.tgz",
+			"integrity": "sha512-flECDIPV4QDNcOrDafVFiIazp8X01HFpzc01eDKJsdNH/wrATcYydJSH9JbPWMS8UD5lZlw+J1sK8LG2kICgqw==",
+			"dependencies": {
+				"tslib": "^2.4.0"
+			},
+			"peerDependencies": {
+				"@emotion/is-prop-valid": "*",
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@emotion/is-prop-valid": {
+					"optional": true
+				},
+				"react": {
+					"optional": true
+				},
+				"react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/fresh": {
 			"version": "0.5.2",
 			"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -28997,9 +29029,9 @@
 			}
 		},
 		"node_modules/geckodriver/node_modules/tar-fs": {
-			"version": "3.0.5",
-			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.5.tgz",
-			"integrity": "sha512-JOgGAmZyMgbqpLwct7ZV8VzkEB6pxXFBVErLtb+XCOqzc6w1xiWKI9GVd6bwk68EX7eJ4DWmfXVmq8K2ziZTGg==",
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.6.tgz",
+			"integrity": "sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==",
 			"dev": true,
 			"dependencies": {
 				"pump": "^3.0.0",
@@ -30776,15 +30808,6 @@
 				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"node_modules/init-package-json/node_modules/builtins": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-			"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-			"dev": true,
-			"dependencies": {
-				"semver": "^7.0.0"
-			}
-		},
 		"node_modules/init-package-json/node_modules/hosted-git-info": {
 			"version": "6.1.1",
 			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
@@ -30822,13 +30845,10 @@
 			}
 		},
 		"node_modules/init-package-json/node_modules/validate-npm-package-name": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz",
-			"integrity": "sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==",
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+			"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
 			"dev": true,
-			"dependencies": {
-				"builtins": "^5.0.0"
-			},
 			"engines": {
 				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
@@ -32201,9 +32221,9 @@
 			}
 		},
 		"node_modules/jest-circus/node_modules/dedent": {
-			"version": "1.5.1",
-			"resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.1.tgz",
-			"integrity": "sha512-+LxW+KLWxu3HW3M2w2ympwtqPrqYRzU8fqi6Fhd18fBALe15blJPI/I4+UHveMVG6lJqB4JNd4UG0S5cnVHwIg==",
+			"version": "1.5.3",
+			"resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.3.tgz",
+			"integrity": "sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==",
 			"dev": true,
 			"peerDependencies": {
 				"babel-plugin-macros": "^3.1.0"
@@ -33058,9 +33078,9 @@
 			}
 		},
 		"node_modules/joi": {
-			"version": "17.12.3",
-			"resolved": "https://registry.npmjs.org/joi/-/joi-17.12.3.tgz",
-			"integrity": "sha512-2RRziagf555owrm9IRVtdKynOBeITiDpuZqIpgwqXShPncPKNiRQoiGsl/T8SQdq+8ugRzH2LqY67irr2y/d+g==",
+			"version": "17.13.1",
+			"resolved": "https://registry.npmjs.org/joi/-/joi-17.13.1.tgz",
+			"integrity": "sha512-vaBlIKCyo4FCUtCm7Eu4QZd/q02bWcxfUO6YSXAZOWF6gzcLBeba8kwotUdYJjDLW8Cz8RywsSOqiNJZW0mNvg==",
 			"dependencies": {
 				"@hapi/hoek": "^9.3.0",
 				"@hapi/topo": "^5.1.0",
@@ -33296,9 +33316,9 @@
 			}
 		},
 		"node_modules/jsdom/node_modules/ws": {
-			"version": "8.16.0",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-			"integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+			"version": "8.17.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
+			"integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
 			"dev": true,
 			"engines": {
 				"node": ">=10.0.0"
@@ -34661,9 +34681,9 @@
 			}
 		},
 		"node_modules/lerna/node_modules/validate-npm-package-name/node_modules/builtins": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-			"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.1.0.tgz",
+			"integrity": "sha512-SW9lzGTLvWTP1AY8xeAMZimqDrIaSdLQUcVr9DMef51niJ022Ri87SwRRKYm4A6iHfkPaiVUu/Duw2Wc4J7kKg==",
 			"dev": true,
 			"dependencies": {
 				"semver": "^7.0.0"
@@ -34768,15 +34788,6 @@
 				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"node_modules/libnpmaccess/node_modules/builtins": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-			"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-			"dev": true,
-			"dependencies": {
-				"semver": "^7.0.0"
-			}
-		},
 		"node_modules/libnpmaccess/node_modules/hosted-git-info": {
 			"version": "6.1.1",
 			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
@@ -34814,13 +34825,10 @@
 			}
 		},
 		"node_modules/libnpmaccess/node_modules/validate-npm-package-name": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz",
-			"integrity": "sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==",
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+			"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
 			"dev": true,
-			"dependencies": {
-				"builtins": "^5.0.0"
-			},
 			"engines": {
 				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
@@ -34844,15 +34852,6 @@
 				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"node_modules/libnpmpublish/node_modules/builtins": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-			"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-			"dev": true,
-			"dependencies": {
-				"semver": "^7.0.0"
-			}
-		},
 		"node_modules/libnpmpublish/node_modules/hosted-git-info": {
 			"version": "6.1.1",
 			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
@@ -34875,9 +34874,9 @@
 			}
 		},
 		"node_modules/libnpmpublish/node_modules/minipass": {
-			"version": "7.0.4",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-			"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+			"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 			"dev": true,
 			"engines": {
 				"node": ">=16 || 14 >=14.17"
@@ -34914,9 +34913,9 @@
 			}
 		},
 		"node_modules/libnpmpublish/node_modules/ssri": {
-			"version": "10.0.5",
-			"resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.5.tgz",
-			"integrity": "sha512-bSf16tAFkGeRlUNDjXu8FzaMQt6g2HZJrun7mtMbIPOddxt3GLMSz5VWUWcqTJUPfLEaDIepGxv+bYQW49596A==",
+			"version": "10.0.6",
+			"resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.6.tgz",
+			"integrity": "sha512-MGrFH9Z4NP9Iyhqn16sDtBpRRNJ0Y2hNa6D65h736fVSaPCHr4DM4sWUNvVaSuC+0OBGhwsrydQwmgfg5LncqQ==",
 			"dev": true,
 			"dependencies": {
 				"minipass": "^7.0.3"
@@ -34926,13 +34925,10 @@
 			}
 		},
 		"node_modules/libnpmpublish/node_modules/validate-npm-package-name": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz",
-			"integrity": "sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==",
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+			"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
 			"dev": true,
-			"dependencies": {
-				"builtins": "^5.0.0"
-			},
 			"engines": {
 				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
@@ -35259,9 +35255,9 @@
 			}
 		},
 		"node_modules/lint-staged": {
-			"version": "10.0.1",
-			"resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.0.1.tgz",
-			"integrity": "sha512-Qk48GmcMX8zFzhuJsf0ZquILxnnDkY56Y+/y1TGxEe4S5P+RetnisiF0Z15t+Gwa5PMNAG4dPxqGHabW7L4zwg==",
+			"version": "10.0.2",
+			"resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.0.2.tgz",
+			"integrity": "sha512-ZldhtIfT7bynVa7nmU/1jbK05r9hYQXbIQqZSotqdBCAcGJDEUqaUB7kG3ZCdoe9Qkj6HUM3x2yjCGJRxPUQLA==",
 			"dev": true,
 			"dependencies": {
 				"chalk": "^3.0.0",
@@ -35275,6 +35271,7 @@
 				"micromatch": "^4.0.2",
 				"normalize-path": "^3.0.0",
 				"please-upgrade-node": "^3.2.0",
+				"string-argv": "0.3.1",
 				"stringify-object": "^3.3.0"
 			},
 			"bin": {
@@ -36354,9 +36351,9 @@
 			}
 		},
 		"node_modules/make-fetch-happen/node_modules/cacache/node_modules/minipass": {
-			"version": "7.0.4",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-			"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+			"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 			"dev": true,
 			"engines": {
 				"node": ">=16 || 14 >=14.17"
@@ -36375,40 +36372,40 @@
 			}
 		},
 		"node_modules/make-fetch-happen/node_modules/fs-minipass/node_modules/minipass": {
-			"version": "7.0.4",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-			"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+			"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 			"dev": true,
 			"engines": {
 				"node": ">=16 || 14 >=14.17"
 			}
 		},
 		"node_modules/make-fetch-happen/node_modules/glob": {
-			"version": "10.3.12",
-			"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
-			"integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
+			"version": "10.3.15",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.15.tgz",
+			"integrity": "sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==",
 			"dev": true,
 			"dependencies": {
 				"foreground-child": "^3.1.0",
 				"jackspeak": "^2.3.6",
 				"minimatch": "^9.0.1",
 				"minipass": "^7.0.4",
-				"path-scurry": "^1.10.2"
+				"path-scurry": "^1.11.0"
 			},
 			"bin": {
 				"glob": "dist/esm/bin.mjs"
 			},
 			"engines": {
-				"node": ">=16 || 14 >=14.17"
+				"node": ">=16 || 14 >=14.18"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
 		"node_modules/make-fetch-happen/node_modules/glob/node_modules/minipass": {
-			"version": "7.0.4",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-			"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+			"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 			"dev": true,
 			"engines": {
 				"node": ">=16 || 14 >=14.17"
@@ -36448,9 +36445,9 @@
 			}
 		},
 		"node_modules/make-fetch-happen/node_modules/ssri": {
-			"version": "10.0.5",
-			"resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.5.tgz",
-			"integrity": "sha512-bSf16tAFkGeRlUNDjXu8FzaMQt6g2HZJrun7mtMbIPOddxt3GLMSz5VWUWcqTJUPfLEaDIepGxv+bYQW49596A==",
+			"version": "10.0.6",
+			"resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.6.tgz",
+			"integrity": "sha512-MGrFH9Z4NP9Iyhqn16sDtBpRRNJ0Y2hNa6D65h736fVSaPCHr4DM4sWUNvVaSuC+0OBGhwsrydQwmgfg5LncqQ==",
 			"dev": true,
 			"dependencies": {
 				"minipass": "^7.0.3"
@@ -36460,9 +36457,9 @@
 			}
 		},
 		"node_modules/make-fetch-happen/node_modules/ssri/node_modules/minipass": {
-			"version": "7.0.4",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-			"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+			"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 			"dev": true,
 			"engines": {
 				"node": ">=16 || 14 >=14.17"
@@ -37924,15 +37921,15 @@
 			}
 		},
 		"node_modules/mini-css-extract-plugin/node_modules/ajv": {
-			"version": "8.12.0",
-			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-			"integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+			"version": "8.13.0",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.13.0.tgz",
+			"integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==",
 			"dev": true,
 			"dependencies": {
-				"fast-deep-equal": "^3.1.1",
+				"fast-deep-equal": "^3.1.3",
 				"json-schema-traverse": "^1.0.0",
 				"require-from-string": "^2.0.2",
-				"uri-js": "^4.2.2"
+				"uri-js": "^4.4.1"
 			},
 			"funding": {
 				"type": "github",
@@ -39208,15 +39205,6 @@
 			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
 			"dev": true
 		},
-		"node_modules/npm-package-json-lint/node_modules/builtins": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-			"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-			"dev": true,
-			"dependencies": {
-				"semver": "^7.0.0"
-			}
-		},
 		"node_modules/npm-package-json-lint/node_modules/chalk": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -39385,13 +39373,10 @@
 			}
 		},
 		"node_modules/npm-package-json-lint/node_modules/validate-npm-package-name": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz",
-			"integrity": "sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==",
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+			"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
 			"dev": true,
-			"dependencies": {
-				"builtins": "^5.0.0"
-			},
 			"engines": {
 				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
@@ -39449,15 +39434,6 @@
 				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"node_modules/npm-pick-manifest/node_modules/builtins": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-			"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-			"dev": true,
-			"dependencies": {
-				"semver": "^7.0.0"
-			}
-		},
 		"node_modules/npm-pick-manifest/node_modules/hosted-git-info": {
 			"version": "6.1.1",
 			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
@@ -39504,13 +39480,10 @@
 			}
 		},
 		"node_modules/npm-pick-manifest/node_modules/validate-npm-package-name": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz",
-			"integrity": "sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==",
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+			"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
 			"dev": true,
-			"dependencies": {
-				"builtins": "^5.0.0"
-			},
 			"engines": {
 				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
@@ -39533,15 +39506,6 @@
 				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"node_modules/npm-registry-fetch/node_modules/builtins": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-			"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-			"dev": true,
-			"dependencies": {
-				"semver": "^7.0.0"
-			}
-		},
 		"node_modules/npm-registry-fetch/node_modules/hosted-git-info": {
 			"version": "6.1.1",
 			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
@@ -39588,13 +39552,10 @@
 			}
 		},
 		"node_modules/npm-registry-fetch/node_modules/validate-npm-package-name": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz",
-			"integrity": "sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==",
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+			"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
 			"dev": true,
-			"dependencies": {
-				"builtins": "^5.0.0"
-			},
 			"engines": {
 				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
@@ -41302,15 +41263,6 @@
 				"balanced-match": "^1.0.0"
 			}
 		},
-		"node_modules/pacote/node_modules/builtins": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-			"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-			"dev": true,
-			"dependencies": {
-				"semver": "^7.0.0"
-			}
-		},
 		"node_modules/pacote/node_modules/cacache": {
 			"version": "17.1.4",
 			"resolved": "https://registry.npmjs.org/cacache/-/cacache-17.1.4.tgz",
@@ -41335,9 +41287,9 @@
 			}
 		},
 		"node_modules/pacote/node_modules/cacache/node_modules/minipass": {
-			"version": "7.0.4",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-			"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+			"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 			"dev": true,
 			"engines": {
 				"node": ">=16 || 14 >=14.17"
@@ -41356,40 +41308,40 @@
 			}
 		},
 		"node_modules/pacote/node_modules/fs-minipass/node_modules/minipass": {
-			"version": "7.0.4",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-			"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+			"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 			"dev": true,
 			"engines": {
 				"node": ">=16 || 14 >=14.17"
 			}
 		},
 		"node_modules/pacote/node_modules/glob": {
-			"version": "10.3.12",
-			"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
-			"integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
+			"version": "10.3.15",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.15.tgz",
+			"integrity": "sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==",
 			"dev": true,
 			"dependencies": {
 				"foreground-child": "^3.1.0",
 				"jackspeak": "^2.3.6",
 				"minimatch": "^9.0.1",
 				"minipass": "^7.0.4",
-				"path-scurry": "^1.10.2"
+				"path-scurry": "^1.11.0"
 			},
 			"bin": {
 				"glob": "dist/esm/bin.mjs"
 			},
 			"engines": {
-				"node": ">=16 || 14 >=14.17"
+				"node": ">=16 || 14 >=14.18"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
 		"node_modules/pacote/node_modules/glob/node_modules/minipass": {
-			"version": "7.0.4",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-			"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+			"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 			"dev": true,
 			"engines": {
 				"node": ">=16 || 14 >=14.17"
@@ -41408,9 +41360,9 @@
 			}
 		},
 		"node_modules/pacote/node_modules/ignore-walk": {
-			"version": "6.0.4",
-			"resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-6.0.4.tgz",
-			"integrity": "sha512-t7sv42WkwFkyKbivUCglsQW5YWMskWtbEf4MNKX5u/CCWHKSPzN4FtBQGsQZgCLbxOzpVlcbWVK5KB3auIOjSw==",
+			"version": "6.0.5",
+			"resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-6.0.5.tgz",
+			"integrity": "sha512-VuuG0wCnjhnylG1ABXT3dAuIpTNDs/G8jlpmwXY03fXoXy/8ZK8/T+hMzt8L4WnrLCJgdybqgPagnF/f97cg3A==",
 			"dev": true,
 			"dependencies": {
 				"minimatch": "^9.0.0"
@@ -41480,9 +41432,9 @@
 			}
 		},
 		"node_modules/pacote/node_modules/ssri": {
-			"version": "10.0.5",
-			"resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.5.tgz",
-			"integrity": "sha512-bSf16tAFkGeRlUNDjXu8FzaMQt6g2HZJrun7mtMbIPOddxt3GLMSz5VWUWcqTJUPfLEaDIepGxv+bYQW49596A==",
+			"version": "10.0.6",
+			"resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.6.tgz",
+			"integrity": "sha512-MGrFH9Z4NP9Iyhqn16sDtBpRRNJ0Y2hNa6D65h736fVSaPCHr4DM4sWUNvVaSuC+0OBGhwsrydQwmgfg5LncqQ==",
 			"dev": true,
 			"dependencies": {
 				"minipass": "^7.0.3"
@@ -41492,9 +41444,9 @@
 			}
 		},
 		"node_modules/pacote/node_modules/ssri/node_modules/minipass": {
-			"version": "7.0.4",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-			"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+			"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 			"dev": true,
 			"engines": {
 				"node": ">=16 || 14 >=14.17"
@@ -41525,13 +41477,10 @@
 			}
 		},
 		"node_modules/pacote/node_modules/validate-npm-package-name": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz",
-			"integrity": "sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==",
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+			"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
 			"dev": true,
-			"dependencies": {
-				"builtins": "^5.0.0"
-			},
 			"engines": {
 				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
@@ -41941,9 +41890,9 @@
 			}
 		},
 		"node_modules/patch-package/node_modules/yaml": {
-			"version": "2.4.1",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz",
-			"integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==",
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.2.tgz",
+			"integrity": "sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==",
 			"dev": true,
 			"bin": {
 				"yaml": "bin.mjs"
@@ -42011,9 +41960,9 @@
 			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
 		},
 		"node_modules/path-scurry": {
-			"version": "1.10.2",
-			"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.2.tgz",
-			"integrity": "sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==",
+			"version": "1.11.0",
+			"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.0.tgz",
+			"integrity": "sha512-LNHTaVkzaYaLGlO+0u3rQTz7QrHTFOuKyba9JMTQutkmtNew8dw8wOD7mTU/5fCPZzCWpfW0XnQKzY61P0aTaw==",
 			"dev": true,
 			"dependencies": {
 				"lru-cache": "^10.2.0",
@@ -42027,18 +41976,18 @@
 			}
 		},
 		"node_modules/path-scurry/node_modules/lru-cache": {
-			"version": "10.2.0",
-			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
-			"integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
+			"version": "10.2.2",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
+			"integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
 			"dev": true,
 			"engines": {
 				"node": "14 || >=16.14"
 			}
 		},
 		"node_modules/path-scurry/node_modules/minipass": {
-			"version": "7.0.4",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-			"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+			"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 			"dev": true,
 			"engines": {
 				"node": ">=16 || 14 >=14.17"
@@ -43126,9 +43075,9 @@
 			}
 		},
 		"node_modules/pretty-format/node_modules/react-is": {
-			"version": "18.2.0",
-			"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-			"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+			"version": "18.3.1",
+			"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+			"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
 		},
 		"node_modules/pretty-hrtime": {
 			"version": "1.0.3",
@@ -44215,9 +44164,9 @@
 			}
 		},
 		"node_modules/react-native-video": {
-			"version": "5.2.0-wp-6",
-			"resolved": "https://raw.githubusercontent.com/wordpress-mobile/react-native-video/5.2.0-wp-6/react-native-video-5.2.0-wp-6.tgz",
-			"integrity": "sha512-3MZ9UsoagCWc5qiQzd2tG5qQbLT+PF8BXjoahEIptQ5mNPX9P4OkJOE3cyoGEDhby6ZYwWvUQNnwhhObhlP0DQ==",
+			"version": "5.2.0-wp-7",
+			"resolved": "https://raw.githubusercontent.com/wordpress-mobile/react-native-video/5.2.0-wp-7/react-native-video-5.2.0-wp-7.tgz",
+			"integrity": "sha512-DTwhGwqkc3IyDWsyJe8d+cEwaw7aHBgT7Q9+X+N3zDIC7qP3bZnXuTUeag8oz9XhfxRDRQJmF+t5is3qVNIuUA==",
 			"dependencies": {
 				"deprecated-react-native-prop-types": "^2.2.0",
 				"prop-types": "^15.7.2"
@@ -44571,9 +44520,9 @@
 			}
 		},
 		"node_modules/read-package-json-fast/node_modules/json-parse-even-better-errors": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.1.tgz",
-			"integrity": "sha512-aatBvbL26wVUCLmbWdCpeu9iF5wOyWpagiKkInA+kfws3sWdBrTnsvN2CKcyCYyUrc7rebNBlK6+kteg7ksecg==",
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.2.tgz",
+			"integrity": "sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==",
 			"dev": true,
 			"engines": {
 				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
@@ -44598,22 +44547,22 @@
 			}
 		},
 		"node_modules/read-package-json/node_modules/glob": {
-			"version": "10.3.12",
-			"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
-			"integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
+			"version": "10.3.15",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.15.tgz",
+			"integrity": "sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==",
 			"dev": true,
 			"dependencies": {
 				"foreground-child": "^3.1.0",
 				"jackspeak": "^2.3.6",
 				"minimatch": "^9.0.1",
 				"minipass": "^7.0.4",
-				"path-scurry": "^1.10.2"
+				"path-scurry": "^1.11.0"
 			},
 			"bin": {
 				"glob": "dist/esm/bin.mjs"
 			},
 			"engines": {
-				"node": ">=16 || 14 >=14.17"
+				"node": ">=16 || 14 >=14.18"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/isaacs"
@@ -44632,9 +44581,9 @@
 			}
 		},
 		"node_modules/read-package-json/node_modules/json-parse-even-better-errors": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.1.tgz",
-			"integrity": "sha512-aatBvbL26wVUCLmbWdCpeu9iF5wOyWpagiKkInA+kfws3sWdBrTnsvN2CKcyCYyUrc7rebNBlK6+kteg7ksecg==",
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.2.tgz",
+			"integrity": "sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==",
 			"dev": true,
 			"engines": {
 				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
@@ -44665,9 +44614,9 @@
 			}
 		},
 		"node_modules/read-package-json/node_modules/minipass": {
-			"version": "7.0.4",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-			"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+			"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 			"dev": true,
 			"engines": {
 				"node": ">=16 || 14 >=14.17"
@@ -45698,6 +45647,98 @@
 				"node": ">=12.0.0"
 			}
 		},
+		"node_modules/rtlcss-webpack-plugin": {
+			"version": "4.0.7",
+			"resolved": "https://registry.npmjs.org/rtlcss-webpack-plugin/-/rtlcss-webpack-plugin-4.0.7.tgz",
+			"integrity": "sha512-ouSbJtgcLBBQIsMgarxsDnfgRqm/AS4BKls/mz/Xb6HSl+PdEzefTR+Wz5uWQx4odoX0g261Z7yb3QBz0MTm0g==",
+			"dev": true,
+			"dependencies": {
+				"babel-runtime": "~6.25.0",
+				"rtlcss": "^3.5.0"
+			}
+		},
+		"node_modules/rtlcss-webpack-plugin/node_modules/find-up": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+			"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+			"dev": true,
+			"dependencies": {
+				"locate-path": "^6.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/rtlcss-webpack-plugin/node_modules/locate-path": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+			"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+			"dev": true,
+			"dependencies": {
+				"p-locate": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/rtlcss-webpack-plugin/node_modules/p-locate": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+			"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+			"dev": true,
+			"dependencies": {
+				"p-limit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/rtlcss-webpack-plugin/node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/rtlcss-webpack-plugin/node_modules/rtlcss": {
+			"version": "3.5.0",
+			"resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-3.5.0.tgz",
+			"integrity": "sha512-wzgMaMFHQTnyi9YOwsx9LjOxYXJPzS8sYnFaKm6R5ysvTkwzHiB0vxnbHwchHQT65PTdBjDG21/kQBWI7q9O7A==",
+			"dev": true,
+			"dependencies": {
+				"find-up": "^5.0.0",
+				"picocolors": "^1.0.0",
+				"postcss": "^8.3.11",
+				"strip-json-comments": "^3.1.1"
+			},
+			"bin": {
+				"rtlcss": "bin/rtlcss.js"
+			}
+		},
+		"node_modules/rtlcss-webpack-plugin/node_modules/strip-json-comments": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/rtlcss/node_modules/strip-json-comments": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -46557,9 +46598,9 @@
 			}
 		},
 		"node_modules/sharp/node_modules/tar-fs": {
-			"version": "3.0.5",
-			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.5.tgz",
-			"integrity": "sha512-JOgGAmZyMgbqpLwct7ZV8VzkEB6pxXFBVErLtb+XCOqzc6w1xiWKI9GVd6bwk68EX7eJ4DWmfXVmq8K2ziZTGg==",
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.6.tgz",
+			"integrity": "sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==",
 			"dev": true,
 			"optional": true,
 			"dependencies": {
@@ -47740,6 +47781,15 @@
 				"safe-buffer": "~5.1.0"
 			}
 		},
+		"node_modules/string-argv": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz",
+			"integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.6.19"
+			}
+		},
 		"node_modules/string-length": {
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -48895,9 +48945,9 @@
 			}
 		},
 		"node_modules/terser": {
-			"version": "5.30.3",
-			"resolved": "https://registry.npmjs.org/terser/-/terser-5.30.3.tgz",
-			"integrity": "sha512-STdUgOUx8rLbMGO9IOwHLpCqolkDITFFQSMYYwKE1N2lY6MVSaeoi10z/EhWxRc6ybqoVmKSkhKYH/XUpl7vSA==",
+			"version": "5.31.0",
+			"resolved": "https://registry.npmjs.org/terser/-/terser-5.31.0.tgz",
+			"integrity": "sha512-Q1JFAoUKE5IMfI4Z/lkE/E6+SwgzO+x4tq4v1AyBLRj8VSYvRO6A/rQrPg1yud4g0En9EKI1TvFRF2tQFcoUkg==",
 			"dependencies": {
 				"@jridgewell/source-map": "^0.3.3",
 				"acorn": "^8.8.2",
@@ -50273,9 +50323,9 @@
 			"dev": true
 		},
 		"node_modules/url/node_modules/qs": {
-			"version": "6.12.0",
-			"resolved": "https://registry.npmjs.org/qs/-/qs-6.12.0.tgz",
-			"integrity": "sha512-trVZiI6RMOkO476zLGaBIzszOdFPnCCXHPG9kn0yuS1uz6xdVxPfZdB3vUig9pxPFDM9BRAgz/YUIVQ1/vuiUg==",
+			"version": "6.12.1",
+			"resolved": "https://registry.npmjs.org/qs/-/qs-6.12.1.tgz",
+			"integrity": "sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ==",
 			"dev": true,
 			"dependencies": {
 				"side-channel": "^1.0.6"
@@ -50976,9 +51026,9 @@
 			}
 		},
 		"node_modules/webdriver/node_modules/@types/node": {
-			"version": "20.12.3",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.3.tgz",
-			"integrity": "sha512-sD+ia2ubTeWrOu+YMF+MTAB7E+O7qsMqAbMfW7DG3K1URwhZ5hN1pLlRVGbf4wDFzSfikL05M17EyorS86jShw==",
+			"version": "20.12.12",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
+			"integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
 			"dev": true,
 			"dependencies": {
 				"undici-types": "~5.26.4"
@@ -51134,9 +51184,9 @@
 			}
 		},
 		"node_modules/webdriver/node_modules/ws": {
-			"version": "8.16.0",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-			"integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+			"version": "8.17.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
+			"integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
 			"dev": true,
 			"engines": {
 				"node": ">=10.0.0"
@@ -51198,9 +51248,9 @@
 			}
 		},
 		"node_modules/webdriverio/node_modules/@types/node": {
-			"version": "20.12.3",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.3.tgz",
-			"integrity": "sha512-sD+ia2ubTeWrOu+YMF+MTAB7E+O7qsMqAbMfW7DG3K1URwhZ5hN1pLlRVGbf4wDFzSfikL05M17EyorS86jShw==",
+			"version": "20.12.12",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
+			"integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
 			"dev": true,
 			"dependencies": {
 				"undici-types": "~5.26.4"
@@ -51654,15 +51704,15 @@
 			}
 		},
 		"node_modules/webpack-dev-middleware/node_modules/ajv": {
-			"version": "8.12.0",
-			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-			"integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+			"version": "8.13.0",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.13.0.tgz",
+			"integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==",
 			"dev": true,
 			"dependencies": {
-				"fast-deep-equal": "^3.1.1",
+				"fast-deep-equal": "^3.1.3",
 				"json-schema-traverse": "^1.0.0",
 				"require-from-string": "^2.0.2",
-				"uri-js": "^4.2.2"
+				"uri-js": "^4.4.1"
 			},
 			"funding": {
 				"type": "github",
@@ -51772,15 +51822,15 @@
 			}
 		},
 		"node_modules/webpack-dev-server/node_modules/ajv": {
-			"version": "8.12.0",
-			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-			"integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+			"version": "8.13.0",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.13.0.tgz",
+			"integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==",
 			"dev": true,
 			"dependencies": {
-				"fast-deep-equal": "^3.1.1",
+				"fast-deep-equal": "^3.1.3",
 				"json-schema-traverse": "^1.0.0",
 				"require-from-string": "^2.0.2",
-				"uri-js": "^4.2.2"
+				"uri-js": "^4.4.1"
 			},
 			"funding": {
 				"type": "github",
@@ -51806,9 +51856,9 @@
 			"dev": true
 		},
 		"node_modules/webpack-dev-server/node_modules/ipaddr.js": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
-			"integrity": "sha512-LlbxQ7xKzfBusov6UMi4MFpEg0m+mAm9xyNGEduwXMEDuf4WfzB/RZwMVYEd7IKGvh4IUkEXYxtAVu9T3OelJQ==",
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
+			"integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==",
 			"dev": true,
 			"engines": {
 				"node": ">= 10"
@@ -51892,9 +51942,9 @@
 			}
 		},
 		"node_modules/webpack-dev-server/node_modules/ws": {
-			"version": "8.16.0",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-			"integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+			"version": "8.17.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
+			"integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
 			"dev": true,
 			"engines": {
 				"node": ">=10.0.0"
@@ -52109,9 +52159,9 @@
 			}
 		},
 		"node_modules/webpack/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.16.1",
+			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.1.tgz",
+			"integrity": "sha512-4U5pNsuDl0EhuZpq46M5xPslstkviJuhrdobaRDBk2Jy2KO37FDAJl4lb2KlNabxT0m4MTK2UHNrsAcphE8nyw==",
 			"dev": true,
 			"dependencies": {
 				"graceful-fs": "^4.2.4",
@@ -52330,11 +52380,6 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"node_modules/wicg-inert": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/wicg-inert/-/wicg-inert-3.1.2.tgz",
-			"integrity": "sha512-Ba9tGNYxXwaqKEi9sJJvPMKuo063umUPsHN0JJsjrs2j8KDSzkWLMZGZ+MH1Jf1Fq4OWZ5HsESJID6nRza2ang=="
-		},
 		"node_modules/wide-align": {
 			"version": "1.1.5",
 			"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
@@ -52503,6 +52548,15 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/word-wrap": {
+			"version": "1.2.5",
+			"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+			"integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/wordwrap": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
@@ -53010,7 +53064,7 @@
 		},
 		"packages/a11y": {
 			"name": "@wordpress/a11y",
-			"version": "3.57.0",
+			"version": "4.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53018,12 +53072,13 @@
 				"@wordpress/i18n": "file:../i18n"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/annotations": {
 			"name": "@wordpress/annotations",
-			"version": "2.57.0",
+			"version": "3.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53034,7 +53089,8 @@
 				"uuid": "^9.0.1"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0"
@@ -53050,7 +53106,7 @@
 		},
 		"packages/api-fetch": {
 			"name": "@wordpress/api-fetch",
-			"version": "6.54.0",
+			"version": "7.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53058,27 +53114,30 @@
 				"@wordpress/url": "file:../url"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/autop": {
 			"name": "@wordpress/autop",
-			"version": "3.57.0",
+			"version": "4.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/babel-plugin-import-jsx-pragma": {
 			"name": "@wordpress/babel-plugin-import-jsx-pragma",
-			"version": "4.40.0",
+			"version": "5.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
-				"node": ">=14"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"@babel/core": "^7.12.9"
@@ -53086,7 +53145,7 @@
 		},
 		"packages/babel-plugin-makepot": {
 			"name": "@wordpress/babel-plugin-makepot",
-			"version": "5.41.0",
+			"version": "6.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53095,7 +53154,8 @@
 				"is-plain-object": "^5.0.0"
 			},
 			"engines": {
-				"node": ">=14"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"@babel/core": "^7.12.9"
@@ -53103,7 +53163,7 @@
 		},
 		"packages/babel-preset-default": {
 			"name": "@wordpress/babel-preset-default",
-			"version": "7.41.0",
+			"version": "8.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53113,7 +53173,6 @@
 				"@babel/preset-env": "^7.16.0",
 				"@babel/preset-typescript": "^7.16.0",
 				"@babel/runtime": "^7.16.0",
-				"@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma",
 				"@wordpress/browserslist-config": "file:../browserslist-config",
 				"@wordpress/warning": "file:../warning",
 				"browserslist": "^4.21.10",
@@ -53121,29 +53180,35 @@
 				"react": "^18.3.0"
 			},
 			"engines": {
-				"node": ">=14"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/base-styles": {
 			"name": "@wordpress/base-styles",
-			"version": "4.48.0",
+			"version": "5.0.0",
 			"dev": true,
-			"license": "GPL-2.0-or-later"
+			"license": "GPL-2.0-or-later",
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
 		},
 		"packages/blob": {
 			"name": "@wordpress/blob",
-			"version": "3.57.0",
+			"version": "4.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/block-directory": {
 			"name": "@wordpress/block-directory",
-			"version": "4.34.0",
+			"version": "5.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53169,7 +53234,8 @@
 				"change-case": "^4.1.2"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -53178,7 +53244,7 @@
 		},
 		"packages/block-editor": {
 			"name": "@wordpress/block-editor",
-			"version": "12.25.0",
+			"version": "13.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53215,7 +53281,7 @@
 				"@wordpress/warning": "file:../warning",
 				"@wordpress/wordcount": "file:../wordcount",
 				"change-case": "^4.1.2",
-				"classnames": "^2.3.1",
+				"clsx": "^2.1.1",
 				"colord": "^2.7.0",
 				"deepmerge": "^4.3.0",
 				"diff": "^4.0.2",
@@ -53229,7 +53295,8 @@
 				"remove-accents": "^0.5.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -53291,7 +53358,7 @@
 		},
 		"packages/block-library": {
 			"name": "@wordpress/block-library",
-			"version": "8.34.0",
+			"version": "9.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53329,7 +53396,7 @@
 				"@wordpress/viewport": "file:../viewport",
 				"@wordpress/wordcount": "file:../wordcount",
 				"change-case": "^4.1.2",
-				"classnames": "^2.3.1",
+				"clsx": "^2.1.1",
 				"colord": "^2.7.0",
 				"escape-html": "^1.0.3",
 				"fast-average-color": "^9.1.1",
@@ -53339,7 +53406,8 @@
 				"uuid": "^9.0.1"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -53356,37 +53424,38 @@
 		},
 		"packages/block-serialization-default-parser": {
 			"name": "@wordpress/block-serialization-default-parser",
-			"version": "4.57.0",
+			"version": "5.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/block-serialization-spec-parser": {
 			"name": "@wordpress/block-serialization-spec-parser",
-			"version": "4.57.0",
+			"version": "5.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"pegjs": "^0.10.0",
 				"phpegjs": "^1.0.0-beta7"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/blocks": {
 			"name": "@wordpress/blocks",
-			"version": "12.34.0",
+			"version": "13.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
 				"@wordpress/autop": "file:../autop",
 				"@wordpress/blob": "file:../blob",
 				"@wordpress/block-serialization-default-parser": "file:../block-serialization-default-parser",
-				"@wordpress/compose": "file:../compose",
 				"@wordpress/data": "file:../data",
 				"@wordpress/deprecated": "file:../deprecated",
 				"@wordpress/dom": "file:../dom",
@@ -53411,7 +53480,8 @@
 				"uuid": "^9.0.1"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0"
@@ -53432,16 +53502,17 @@
 		},
 		"packages/browserslist-config": {
 			"name": "@wordpress/browserslist-config",
-			"version": "5.40.0",
+			"version": "6.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
-				"node": ">=14"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/commands": {
 			"name": "@wordpress/commands",
-			"version": "0.28.0",
+			"version": "1.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53452,11 +53523,12 @@
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 				"@wordpress/private-apis": "file:../private-apis",
-				"classnames": "^2.3.1",
+				"clsx": "^2.1.1",
 				"cmdk": "^0.2.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -53465,7 +53537,7 @@
 		},
 		"packages/components": {
 			"name": "@wordpress/components",
-			"version": "27.5.0",
+			"version": "28.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@ariakit/react": "^0.3.12",
@@ -53479,7 +53551,7 @@
 				"@floating-ui/react-dom": "^2.0.8",
 				"@types/gradient-parser": "0.1.3",
 				"@types/highlight-words-core": "1.2.1",
-				"@use-gesture/react": "^10.2.24",
+				"@use-gesture/react": "^10.3.1",
 				"@wordpress/a11y": "file:../a11y",
 				"@wordpress/compose": "file:../compose",
 				"@wordpress/date": "file:../date",
@@ -53498,13 +53570,13 @@
 				"@wordpress/rich-text": "file:../rich-text",
 				"@wordpress/warning": "file:../warning",
 				"change-case": "^4.1.2",
-				"classnames": "^2.3.1",
+				"clsx": "^2.1.1",
 				"colord": "^2.7.0",
 				"date-fns": "^3.6.0",
 				"deepmerge": "^4.3.0",
 				"downshift": "^6.0.15",
 				"fast-deep-equal": "^3.1.3",
-				"framer-motion": "^10.13.0",
+				"framer-motion": "^11.1.9",
 				"gradient-parser": "^0.1.5",
 				"highlight-words-core": "^1.2.2",
 				"is-plain-object": "^5.0.0",
@@ -53517,7 +53589,8 @@
 				"uuid": "^9.0.1"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -53541,21 +53614,10 @@
 			"resolved": "https://registry.npmjs.org/@types/gradient-parser/-/gradient-parser-0.1.3.tgz",
 			"integrity": "sha512-XDbrTSBlQV9nxE1GiDL3FaOPy4G/KaJkhDutBX48Kg8CYZMBARyyDFGCWfWJn4pobmInmwud1xxH7VJMAr0CKQ=="
 		},
-		"packages/components/node_modules/framer-motion": {
-			"version": "10.13.0",
-			"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.13.0.tgz",
-			"integrity": "sha512-xKhw9VCizmwEHbopOfluaoVunGHSZyMztGbTvsgOYqCjaKu6qtlwWY1J+6GhL41NY1P157JgEikjDm67XCFnvQ==",
-			"dependencies": {
-				"tslib": "^2.4.0"
-			},
-			"optionalDependencies": {
-				"@emotion/is-prop-valid": "^0.8.2"
-			}
-		},
 		"packages/components/node_modules/path-to-regexp": {
-			"version": "6.2.1",
-			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
-			"integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
+			"version": "6.2.2",
+			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.2.tgz",
+			"integrity": "sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw=="
 		},
 		"packages/components/node_modules/uuid": {
 			"version": "8.3.2",
@@ -53567,7 +53629,7 @@
 		},
 		"packages/compose": {
 			"name": "@wordpress/compose",
-			"version": "6.34.0",
+			"version": "7.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53585,7 +53647,8 @@
 				"use-memo-one": "^1.1.1"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0"
@@ -53603,7 +53666,7 @@
 		},
 		"packages/core-commands": {
 			"name": "@wordpress/core-commands",
-			"version": "0.26.0",
+			"version": "1.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53620,7 +53683,8 @@
 				"@wordpress/url": "file:../url"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -53629,7 +53693,7 @@
 		},
 		"packages/core-data": {
 			"name": "@wordpress/core-data",
-			"version": "6.34.0",
+			"version": "7.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53655,7 +53719,8 @@
 				"uuid": "^9.0.1"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -53672,7 +53737,7 @@
 		},
 		"packages/create-block": {
 			"name": "@wordpress/create-block",
-			"version": "4.41.0",
+			"version": "4.43.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53694,19 +53759,23 @@
 				"wp-create-block": "index.js"
 			},
 			"engines": {
-				"node": ">=14",
-				"npm": ">=6.14.4"
+				"node": ">=20.10.0",
+				"npm": ">=10.2.3"
 			}
 		},
 		"packages/create-block-tutorial-template": {
 			"name": "@wordpress/create-block-tutorial-template",
-			"version": "3.11.0",
+			"version": "4.0.0",
 			"dev": true,
-			"license": "GPL-2.0-or-later"
+			"license": "GPL-2.0-or-later",
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
 		},
 		"packages/customize-widgets": {
 			"name": "@wordpress/customize-widgets",
-			"version": "4.34.0",
+			"version": "5.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53730,11 +53799,12 @@
 				"@wordpress/preferences": "file:../preferences",
 				"@wordpress/private-apis": "file:../private-apis",
 				"@wordpress/widgets": "file:../widgets",
-				"classnames": "^2.3.1",
+				"clsx": "^2.1.1",
 				"fast-deep-equal": "^3.1.3"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -53743,7 +53813,7 @@
 		},
 		"packages/data": {
 			"name": "@wordpress/data",
-			"version": "9.27.0",
+			"version": "10.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53763,7 +53833,8 @@
 				"use-memo-one": "^1.1.1"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0"
@@ -53771,7 +53842,7 @@
 		},
 		"packages/data-controls": {
 			"name": "@wordpress/data-controls",
-			"version": "3.26.0",
+			"version": "4.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53780,7 +53851,8 @@
 				"@wordpress/deprecated": "file:../deprecated"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0"
@@ -53788,25 +53860,24 @@
 		},
 		"packages/dataviews": {
 			"name": "@wordpress/dataviews",
-			"version": "1.1.0",
+			"version": "2.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@ariakit/react": "^0.3.12",
 				"@babel/runtime": "^7.16.0",
-				"@wordpress/a11y": "file:../a11y",
 				"@wordpress/components": "file:../components",
 				"@wordpress/compose": "file:../compose",
 				"@wordpress/element": "file:../element",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
-				"@wordpress/keycodes": "file:../keycodes",
 				"@wordpress/primitives": "file:../primitives",
 				"@wordpress/private-apis": "file:../private-apis",
-				"classnames": "^2.3.1",
+				"clsx": "^2.1.1",
 				"remove-accents": "^0.5.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0"
@@ -53849,7 +53920,7 @@
 		},
 		"packages/date": {
 			"name": "@wordpress/date",
-			"version": "4.57.0",
+			"version": "5.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53858,19 +53929,21 @@
 				"moment-timezone": "^0.5.40"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/dependency-extraction-webpack-plugin": {
 			"name": "@wordpress/dependency-extraction-webpack-plugin",
-			"version": "5.8.0",
+			"version": "6.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"json2php": "^0.0.7"
 			},
 			"engines": {
-				"node": ">=18"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"webpack": "^5.0.0"
@@ -53878,19 +53951,20 @@
 		},
 		"packages/deprecated": {
 			"name": "@wordpress/deprecated",
-			"version": "3.57.0",
+			"version": "4.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
 				"@wordpress/hooks": "file:../hooks"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/docgen": {
 			"name": "@wordpress/docgen",
-			"version": "1.66.0",
+			"version": "2.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53904,34 +53978,40 @@
 			},
 			"bin": {
 				"docgen": "bin/cli.js"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/dom": {
 			"name": "@wordpress/dom",
-			"version": "3.57.0",
+			"version": "4.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
 				"@wordpress/deprecated": "file:../deprecated"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/dom-ready": {
 			"name": "@wordpress/dom-ready",
-			"version": "3.57.0",
+			"version": "4.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/e2e-test-utils": {
 			"name": "@wordpress/e2e-test-utils",
-			"version": "10.28.0",
+			"version": "11.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53944,7 +54024,8 @@
 				"node-fetch": "^2.6.0"
 			},
 			"engines": {
-				"node": ">=14"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"jest": ">=29",
@@ -53953,7 +54034,7 @@
 		},
 		"packages/e2e-test-utils-playwright": {
 			"name": "@wordpress/e2e-test-utils-playwright",
-			"version": "0.25.0",
+			"version": "1.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53968,7 +54049,8 @@
 				"web-vitals": "^3.5.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"@playwright/test": ">=1"
@@ -53976,7 +54058,7 @@
 		},
 		"packages/e2e-tests": {
 			"name": "@wordpress/e2e-tests",
-			"version": "7.28.0",
+			"version": "8.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53995,7 +54077,8 @@
 				"uuid": "^9.0.1"
 			},
 			"engines": {
-				"node": ">=14"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"jest": ">=29",
@@ -54015,7 +54098,7 @@
 		},
 		"packages/edit-post": {
 			"name": "@wordpress/edit-post",
-			"version": "7.34.0",
+			"version": "8.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54039,7 +54122,6 @@
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 				"@wordpress/keycodes": "file:../keycodes",
-				"@wordpress/media-utils": "file:../media-utils",
 				"@wordpress/notices": "file:../notices",
 				"@wordpress/plugins": "file:../plugins",
 				"@wordpress/preferences": "file:../preferences",
@@ -54048,11 +54130,12 @@
 				"@wordpress/viewport": "file:../viewport",
 				"@wordpress/warning": "file:../warning",
 				"@wordpress/widgets": "file:../widgets",
-				"classnames": "^2.3.1",
+				"clsx": "^2.1.1",
 				"memize": "^2.1.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -54061,7 +54144,7 @@
 		},
 		"packages/edit-site": {
 			"name": "@wordpress/edit-site",
-			"version": "5.34.0",
+			"version": "6.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54091,7 +54174,6 @@
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 				"@wordpress/keycodes": "file:../keycodes",
-				"@wordpress/media-utils": "file:../media-utils",
 				"@wordpress/notices": "file:../notices",
 				"@wordpress/patterns": "file:../patterns",
 				"@wordpress/plugins": "file:../plugins",
@@ -54107,17 +54189,15 @@
 				"@wordpress/widgets": "file:../widgets",
 				"@wordpress/wordcount": "file:../wordcount",
 				"change-case": "^4.1.2",
-				"classnames": "^2.3.1",
-				"client-zip": "^2.4.4",
+				"clsx": "^2.1.1",
 				"colord": "^2.9.2",
-				"deepmerge": "^4.3.0",
 				"fast-deep-equal": "^3.1.3",
-				"is-plain-object": "^5.0.0",
 				"memize": "^2.1.0",
 				"react-autosize-textarea": "^7.1.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -54126,7 +54206,7 @@
 		},
 		"packages/edit-widgets": {
 			"name": "@wordpress/edit-widgets",
-			"version": "5.34.0",
+			"version": "6.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54156,10 +54236,11 @@
 				"@wordpress/reusable-blocks": "file:../reusable-blocks",
 				"@wordpress/url": "file:../url",
 				"@wordpress/widgets": "file:../widgets",
-				"classnames": "^2.3.1"
+				"clsx": "^2.1.1"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -54168,7 +54249,7 @@
 		},
 		"packages/editor": {
 			"name": "@wordpress/editor",
-			"version": "13.34.0",
+			"version": "14.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54205,14 +54286,20 @@
 				"@wordpress/url": "file:../url",
 				"@wordpress/warning": "file:../warning",
 				"@wordpress/wordcount": "file:../wordcount",
-				"classnames": "^2.3.1",
+				"change-case": "^4.1.2",
+				"client-zip": "^2.4.5",
+				"clsx": "^2.1.1",
 				"date-fns": "^3.6.0",
+				"deepmerge": "^4.3.0",
+				"fast-deep-equal": "^3.1.3",
+				"is-plain-object": "^5.0.0",
 				"memize": "^2.1.0",
 				"react-autosize-textarea": "^7.1.0",
 				"remove-accents": "^0.5.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -54221,12 +54308,12 @@
 		},
 		"packages/element": {
 			"name": "@wordpress/element",
-			"version": "5.34.0",
+			"version": "6.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
-				"@types/react": "^18.0.21",
-				"@types/react-dom": "^18.0.6",
+				"@types/react": "^18.2.79",
+				"@types/react-dom": "^18.2.25",
 				"@wordpress/escape-html": "file:../escape-html",
 				"change-case": "^4.1.2",
 				"is-plain-object": "^5.0.0",
@@ -54234,12 +54321,13 @@
 				"react-dom": "^18.3.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/env": {
 			"name": "@wordpress/env",
-			"version": "9.9.0",
+			"version": "10.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54258,6 +54346,10 @@
 			},
 			"bin": {
 				"wp-env": "bin/wp-env"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/env/node_modules/cliui": {
@@ -54339,9 +54431,9 @@
 			"dev": true
 		},
 		"packages/env/node_modules/yaml": {
-			"version": "2.4.1",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz",
-			"integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==",
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.2.tgz",
+			"integrity": "sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==",
 			"dev": true,
 			"bin": {
 				"yaml": "bin.mjs"
@@ -54376,18 +54468,19 @@
 		},
 		"packages/escape-html": {
 			"name": "@wordpress/escape-html",
-			"version": "2.57.0",
+			"version": "3.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/eslint-plugin": {
 			"name": "@wordpress/eslint-plugin",
-			"version": "18.0.0",
+			"version": "19.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54410,8 +54503,8 @@
 				"requireindex": "^1.2.0"
 			},
 			"engines": {
-				"node": ">=14",
-				"npm": ">=6.14.4"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"@babel/core": ">=7",
@@ -54430,7 +54523,7 @@
 		},
 		"packages/format-library": {
 			"name": "@wordpress/format-library",
-			"version": "4.34.0",
+			"version": "5.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54448,7 +54541,8 @@
 				"@wordpress/url": "file:../url"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -54457,29 +54551,31 @@
 		},
 		"packages/hooks": {
 			"name": "@wordpress/hooks",
-			"version": "3.57.0",
+			"version": "4.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/html-entities": {
 			"name": "@wordpress/html-entities",
-			"version": "3.57.0",
+			"version": "4.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/i18n": {
 			"name": "@wordpress/i18n",
-			"version": "4.57.0",
+			"version": "5.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54493,12 +54589,13 @@
 				"pot-to-php": "tools/pot-to-php.js"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/icons": {
 			"name": "@wordpress/icons",
-			"version": "9.48.0",
+			"version": "10.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54506,12 +54603,13 @@
 				"@wordpress/primitives": "file:../primitives"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/interactivity": {
 			"name": "@wordpress/interactivity",
-			"version": "5.6.0",
+			"version": "6.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@preact/signals": "^1.2.2",
@@ -54519,18 +54617,20 @@
 				"preact": "^10.19.3"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/interactivity-router": {
 			"name": "@wordpress/interactivity-router",
-			"version": "1.7.0",
+			"version": "2.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@wordpress/interactivity": "file:../interactivity"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/interactivity/node_modules/@preact/signals": {
@@ -54584,7 +54684,7 @@
 		},
 		"packages/interface": {
 			"name": "@wordpress/interface",
-			"version": "5.34.0",
+			"version": "6.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54600,10 +54700,11 @@
 				"@wordpress/preferences": "file:../preferences",
 				"@wordpress/private-apis": "file:../private-apis",
 				"@wordpress/viewport": "file:../viewport",
-				"classnames": "^2.3.1"
+				"clsx": "^2.1.1"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -54612,18 +54713,19 @@
 		},
 		"packages/is-shallow-equal": {
 			"name": "@wordpress/is-shallow-equal",
-			"version": "4.57.0",
+			"version": "5.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/jest-console": {
 			"name": "@wordpress/jest-console",
-			"version": "7.28.0",
+			"version": "8.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54631,7 +54733,8 @@
 				"jest-matcher-utils": "^29.6.2"
 			},
 			"engines": {
-				"node": ">=14"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"jest": ">=29"
@@ -54639,7 +54742,7 @@
 		},
 		"packages/jest-preset-default": {
 			"name": "@wordpress/jest-preset-default",
-			"version": "11.28.0",
+			"version": "12.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54647,7 +54750,8 @@
 				"babel-jest": "^29.6.2"
 			},
 			"engines": {
-				"node": ">=14"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"@babel/core": ">=7",
@@ -54656,7 +54760,7 @@
 		},
 		"packages/jest-puppeteer-axe": {
 			"name": "@wordpress/jest-puppeteer-axe",
-			"version": "6.28.0",
+			"version": "7.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54664,7 +54768,8 @@
 				"@babel/runtime": "^7.16.0"
 			},
 			"engines": {
-				"node": ">=14"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"jest": ">=29",
@@ -54678,7 +54783,7 @@
 		},
 		"packages/keyboard-shortcuts": {
 			"name": "@wordpress/keyboard-shortcuts",
-			"version": "4.34.0",
+			"version": "5.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54687,7 +54792,8 @@
 				"@wordpress/keycodes": "file:../keycodes"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0"
@@ -54695,19 +54801,20 @@
 		},
 		"packages/keycodes": {
 			"name": "@wordpress/keycodes",
-			"version": "3.57.0",
+			"version": "4.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
 				"@wordpress/i18n": "file:../i18n"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/lazy-import": {
 			"name": "@wordpress/lazy-import",
-			"version": "1.44.0",
+			"version": "2.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54716,12 +54823,13 @@
 				"semver": "^7.3.5"
 			},
 			"engines": {
-				"npm": ">=6.9.0"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/list-reusable-blocks": {
 			"name": "@wordpress/list-reusable-blocks",
-			"version": "4.34.0",
+			"version": "5.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54734,7 +54842,8 @@
 				"change-case": "^4.1.2"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -54743,7 +54852,7 @@
 		},
 		"packages/media-utils": {
 			"name": "@wordpress/media-utils",
-			"version": "4.48.0",
+			"version": "5.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54753,12 +54862,13 @@
 				"@wordpress/i18n": "file:../i18n"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/notices": {
 			"name": "@wordpress/notices",
-			"version": "4.25.0",
+			"version": "5.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54766,7 +54876,8 @@
 				"@wordpress/data": "file:../data"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0"
@@ -54774,11 +54885,12 @@
 		},
 		"packages/npm-package-json-lint-config": {
 			"name": "@wordpress/npm-package-json-lint-config",
-			"version": "4.42.0",
+			"version": "5.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
-				"node": ">=14"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"npm-package-json-lint": ">=6.0.0"
@@ -54786,7 +54898,7 @@
 		},
 		"packages/nux": {
 			"name": "@wordpress/nux",
-			"version": "8.19.0",
+			"version": "9.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54799,7 +54911,8 @@
 				"@wordpress/icons": "file:../icons"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -54808,7 +54921,7 @@
 		},
 		"packages/patterns": {
 			"name": "@wordpress/patterns",
-			"version": "1.18.0",
+			"version": "2.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54828,7 +54941,8 @@
 				"@wordpress/url": "file:../url"
 			},
 			"engines": {
-				"node": ">=16.0.0"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -54837,7 +54951,7 @@
 		},
 		"packages/plugins": {
 			"name": "@wordpress/plugins",
-			"version": "6.25.0",
+			"version": "7.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54850,7 +54964,8 @@
 				"memize": "^2.0.1"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -54859,7 +54974,7 @@
 		},
 		"packages/postcss-plugins-preset": {
 			"name": "@wordpress/postcss-plugins-preset",
-			"version": "4.41.0",
+			"version": "5.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54867,7 +54982,8 @@
 				"autoprefixer": "^10.2.5"
 			},
 			"engines": {
-				"node": ">=14"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"postcss": "^8.0.0"
@@ -54875,11 +54991,12 @@
 		},
 		"packages/postcss-themes": {
 			"name": "@wordpress/postcss-themes",
-			"version": "5.40.0",
+			"version": "6.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
-				"node": ">=14"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"postcss": "^8.0.0"
@@ -54887,7 +55004,7 @@
 		},
 		"packages/preferences": {
 			"name": "@wordpress/preferences",
-			"version": "3.34.0",
+			"version": "4.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54900,10 +55017,11 @@
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/private-apis": "file:../private-apis",
-				"classnames": "^2.3.1"
+				"clsx": "^2.1.1"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -54912,23 +55030,25 @@
 		},
 		"packages/preferences-persistence": {
 			"name": "@wordpress/preferences-persistence",
-			"version": "1.49.0",
+			"version": "2.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
 				"@wordpress/api-fetch": "file:../api-fetch"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/prettier-config": {
 			"name": "@wordpress/prettier-config",
-			"version": "3.14.0",
+			"version": "4.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
-				"node": ">=14"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"prettier": ">=3"
@@ -54936,43 +55056,46 @@
 		},
 		"packages/primitives": {
 			"name": "@wordpress/primitives",
-			"version": "3.55.0",
+			"version": "4.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
 				"@wordpress/element": "file:../element",
-				"classnames": "^2.3.1"
+				"clsx": "^2.1.1"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/priority-queue": {
 			"name": "@wordpress/priority-queue",
-			"version": "2.57.0",
+			"version": "3.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
 				"requestidlecallback": "^0.3.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/private-apis": {
 			"name": "@wordpress/private-apis",
-			"version": "0.39.0",
+			"version": "1.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/project-management-automation": {
 			"name": "@wordpress/project-management-automation",
-			"version": "1.56.0",
+			"version": "2.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54981,11 +55104,15 @@
 				"@babel/runtime": "^7.16.0",
 				"@octokit/request-error": "^2.1.0",
 				"@octokit/webhooks": "7.1.0"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/react-i18n": {
 			"name": "@wordpress/react-i18n",
-			"version": "3.55.0",
+			"version": "4.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54994,17 +55121,22 @@
 				"utility-types": "^3.10.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/react-native-aztec": {
 			"name": "@wordpress/react-native-aztec",
-			"version": "1.118.0",
+			"version": "1.119.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@wordpress/element": "file:../element",
 				"@wordpress/keycodes": "file:../keycodes"
 			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
 			"peerDependencies": {
 				"react": "*",
 				"react-native": "*"
@@ -55012,25 +55144,29 @@
 		},
 		"packages/react-native-bridge": {
 			"name": "@wordpress/react-native-bridge",
-			"version": "1.118.0",
+			"version": "1.119.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@wordpress/react-native-aztec": "file:../react-native-aztec"
 			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
 			"peerDependencies": {
 				"react-native": "*"
 			}
 		},
 		"packages/react-native-editor": {
 			"name": "@wordpress/react-native-editor",
-			"version": "1.118.0",
+			"version": "1.119.0",
 			"hasInstallScript": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.20.0",
 				"@react-native-clipboard/clipboard": "1.11.2",
 				"@react-native-community/blur": "4.2.0",
-				"@react-native-community/slider": "https://raw.githubusercontent.com/wordpress-mobile/react-native-slider/v3.0.2-wp-4/react-native-community-slider-3.0.2-wp-4.tgz",
+				"@react-native-community/slider": "https://raw.githubusercontent.com/wordpress-mobile/react-native-slider/v3.0.2-wp-5/react-native-community-slider-3.0.2-wp-5.tgz",
 				"@react-native-masked-view/masked-view": "0.3.0",
 				"@react-navigation/core": "5.12.0",
 				"@react-navigation/native": "6.0.14",
@@ -55067,12 +55203,12 @@
 				"react-native-screens": "3.29.0",
 				"react-native-svg": "14.0.0",
 				"react-native-url-polyfill": "1.3.0",
-				"react-native-video": "https://raw.githubusercontent.com/wordpress-mobile/react-native-video/5.2.0-wp-6/react-native-video-5.2.0-wp-6.tgz",
+				"react-native-video": "https://raw.githubusercontent.com/wordpress-mobile/react-native-video/5.2.0-wp-7/react-native-video-5.2.0-wp-7.tgz",
 				"react-native-webview": "13.6.1"
 			},
 			"engines": {
-				"node": ">=12",
-				"npm": ">=6.9"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/react-native-editor/node_modules/buffer": {
@@ -55132,11 +55268,12 @@
 		},
 		"packages/readable-js-assets-webpack-plugin": {
 			"name": "@wordpress/readable-js-assets-webpack-plugin",
-			"version": "2.40.0",
+			"version": "3.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
-				"node": ">=14.0"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"webpack": "^4.8.3 || ^5.0.0"
@@ -55144,7 +55281,7 @@
 		},
 		"packages/redux-routine": {
 			"name": "@wordpress/redux-routine",
-			"version": "4.57.0",
+			"version": "5.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55153,7 +55290,8 @@
 				"rungen": "^0.3.2"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"redux": ">=4"
@@ -55170,8 +55308,8 @@
 				"jest-message-util": "^29.6.2"
 			},
 			"engines": {
-				"node": ">=14",
-				"npm": ">=6.9"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/report-flaky-tests/node_modules/@actions/github": {
@@ -55188,7 +55326,7 @@
 		},
 		"packages/reusable-blocks": {
 			"name": "@wordpress/reusable-blocks",
-			"version": "4.34.0",
+			"version": "5.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55205,7 +55343,8 @@
 				"@wordpress/url": "file:../url"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -55214,7 +55353,7 @@
 		},
 		"packages/rich-text": {
 			"name": "@wordpress/rich-text",
-			"version": "6.34.0",
+			"version": "7.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55229,7 +55368,8 @@
 				"memize": "^2.1.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0"
@@ -55237,7 +55377,7 @@
 		},
 		"packages/router": {
 			"name": "@wordpress/router",
-			"version": "0.26.0",
+			"version": "1.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55247,7 +55387,8 @@
 				"history": "^5.3.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0"
@@ -55255,7 +55396,7 @@
 		},
 		"packages/scripts": {
 			"name": "@wordpress/scripts",
-			"version": "27.8.0",
+			"version": "28.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -55306,6 +55447,7 @@
 				"react-refresh": "^0.14.0",
 				"read-pkg-up": "^7.0.1",
 				"resolve-bin": "^0.4.0",
+				"rtlcss-webpack-plugin": "^4.0.7",
 				"sass": "^1.35.2",
 				"sass-loader": "^12.1.0",
 				"source-map-loader": "^3.0.0",
@@ -55321,8 +55463,8 @@
 				"wp-scripts": "bin/wp-scripts.js"
 			},
 			"engines": {
-				"node": ">=18",
-				"npm": ">=6.14.4"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"@playwright/test": "^1.43.0",
@@ -55640,7 +55782,7 @@
 		},
 		"packages/server-side-render": {
 			"name": "@wordpress/server-side-render",
-			"version": "4.34.0",
+			"version": "5.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55656,7 +55798,8 @@
 				"fast-deep-equal": "^3.1.3"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -55665,31 +55808,33 @@
 		},
 		"packages/shortcode": {
 			"name": "@wordpress/shortcode",
-			"version": "3.57.0",
+			"version": "4.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
 				"memize": "^2.0.1"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/style-engine": {
 			"name": "@wordpress/style-engine",
-			"version": "1.40.0",
+			"version": "2.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
 				"change-case": "^4.1.2"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/stylelint-config": {
 			"name": "@wordpress/stylelint-config",
-			"version": "21.40.0",
+			"version": "22.0.0",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -55697,7 +55842,8 @@
 				"stylelint-config-recommended-scss": "^5.0.2"
 			},
 			"engines": {
-				"node": ">=14"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"stylelint": "^14.2"
@@ -55705,7 +55851,7 @@
 		},
 		"packages/sync": {
 			"name": "@wordpress/sync",
-			"version": "0.19.0",
+			"version": "1.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55720,47 +55866,51 @@
 				"yjs": "~13.6.6"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/token-list": {
 			"name": "@wordpress/token-list",
-			"version": "2.57.0",
+			"version": "3.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/undo-manager": {
 			"name": "@wordpress/undo-manager",
-			"version": "0.17.0",
+			"version": "1.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
 				"@wordpress/is-shallow-equal": "file:../is-shallow-equal"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/url": {
 			"name": "@wordpress/url",
-			"version": "3.58.0",
+			"version": "4.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
 				"remove-accents": "^0.5.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/viewport": {
 			"name": "@wordpress/viewport",
-			"version": "5.34.0",
+			"version": "6.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55769,7 +55919,8 @@
 				"@wordpress/element": "file:../element"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0"
@@ -55777,15 +55928,16 @@
 		},
 		"packages/warning": {
 			"name": "@wordpress/warning",
-			"version": "2.57.0",
+			"version": "3.0.0",
 			"license": "GPL-2.0-or-later",
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
 		"packages/widgets": {
 			"name": "@wordpress/widgets",
-			"version": "3.34.0",
+			"version": "4.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55800,7 +55952,11 @@
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/notices": "file:../notices",
-				"classnames": "^2.3.1"
+				"clsx": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
 				"react": "^18.0.0",
@@ -55809,23 +55965,18 @@
 		},
 		"packages/wordcount": {
 			"name": "@wordpress/wordcount",
-			"version": "3.57.0",
+			"version": "4.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		}
 	},
 	"dependencies": {
-		"@aashutoshrathi/word-wrap": {
-			"version": "1.2.6",
-			"resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
-			"integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
-			"dev": true
-		},
 		"@actions/core": {
 			"version": "1.9.1",
 			"resolved": "https://registry.npmjs.org/@actions/core/-/core-1.9.1.tgz",
@@ -56541,9 +56692,9 @@
 					}
 				},
 				"gauge": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/gauge/-/gauge-5.0.1.tgz",
-					"integrity": "sha512-CmykPMJGuNan/3S4kZOpvvPYSNqSHANiWnh9XcMU2pSjtBfF0XzZ2p1bFAxTbnFxyBuPxQYHhzwaoOmUdqzvxQ==",
+					"version": "5.0.2",
+					"resolved": "https://registry.npmjs.org/gauge/-/gauge-5.0.2.tgz",
+					"integrity": "sha512-pMaFftXPtiGIHCJHdcUUx9Rby/rFT/Kkt3fIIGCs+9PMDIljSyRiqraTlxNtBReJRDfUefpa263RQ3vnp5G/LQ==",
 					"dev": true,
 					"requires": {
 						"aproba": "^1.0.3 || ^2.0.0",
@@ -56612,9 +56763,9 @@
 					}
 				},
 				"minipass": {
-					"version": "7.0.4",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-					"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+					"version": "7.1.1",
+					"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+					"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 					"dev": true
 				},
 				"npmlog": {
@@ -58201,20 +58352,20 @@
 					"dev": true
 				},
 				"babel-plugin-polyfill-corejs2": {
-					"version": "0.4.10",
-					"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.10.tgz",
-					"integrity": "sha512-rpIuu//y5OX6jVU+a5BCn1R5RSZYWAl2Nar76iwaOdycqb6JPxediskWFMMl7stfwNJR4b7eiQvh5fB5TEQJTQ==",
+					"version": "0.4.11",
+					"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz",
+					"integrity": "sha512-sMEJ27L0gRHShOh5G54uAAPaiCOygY/5ratXuiyb2G46FmlSpc9eFCzYVyDiPxfNbwzA7mYahmjQc5q+CZQ09Q==",
 					"dev": true,
 					"requires": {
 						"@babel/compat-data": "^7.22.6",
-						"@babel/helper-define-polyfill-provider": "^0.6.1",
+						"@babel/helper-define-polyfill-provider": "^0.6.2",
 						"semver": "^6.3.1"
 					},
 					"dependencies": {
 						"@babel/helper-define-polyfill-provider": {
-							"version": "0.6.1",
-							"resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.1.tgz",
-							"integrity": "sha512-o7SDgTJuvx5vLKD6SFvkydkSMBvahDKGiNJzG22IZYXhiqoe9efY7zocICBgzHV4IRg5wdgl2nEL/tulKIEIbA==",
+							"version": "0.6.2",
+							"resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.2.tgz",
+							"integrity": "sha512-LV76g+C502biUK6AyZ3LK10vDpDyCzZnhZFXkH1L75zHPj68+qc8Zfpx2th+gzwA2MzyK+1g/3EPl62yFnVttQ==",
 							"dev": true,
 							"requires": {
 								"@babel/helper-compilation-targets": "^7.22.6",
@@ -58339,9 +58490,9 @@
 			"integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
 		},
 		"@babel/runtime": {
-			"version": "7.24.4",
-			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz",
-			"integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==",
+			"version": "7.24.5",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz",
+			"integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==",
 			"requires": {
 				"regenerator-runtime": "^0.14.0"
 			},
@@ -58659,15 +58810,6 @@
 			"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
 			"integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
 		},
-		"@emotion/is-prop-valid": {
-			"version": "0.8.8",
-			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
-			"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-			"optional": true,
-			"requires": {
-				"@emotion/memoize": "0.7.4"
-			}
-		},
 		"@emotion/jest": {
 			"version": "11.7.1",
 			"resolved": "https://registry.npmjs.org/@emotion/jest/-/jest-11.7.1.tgz",
@@ -58682,9 +58824,9 @@
 			}
 		},
 		"@emotion/memoize": {
-			"version": "0.7.4",
-			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-			"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+			"version": "0.7.5",
+			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+			"integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
 		},
 		"@emotion/native": {
 			"version": "11.0.0",
@@ -59085,19 +59227,19 @@
 			},
 			"dependencies": {
 				"@floating-ui/utils": {
-					"version": "0.2.1",
-					"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
-					"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
+					"version": "0.2.2",
+					"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
+					"integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
 				}
 			}
 		},
 		"@floating-ui/react-dom": {
-			"version": "2.0.8",
-			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
-			"integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
+			"version": "2.0.9",
+			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz",
+			"integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==",
 			"dev": true,
 			"requires": {
-				"@floating-ui/dom": "^1.6.1"
+				"@floating-ui/dom": "^1.0.0"
 			}
 		},
 		"@floating-ui/utils": {
@@ -59855,9 +59997,9 @@
 					},
 					"dependencies": {
 						"builtins": {
-							"version": "5.0.1",
-							"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-							"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
+							"version": "5.1.0",
+							"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.1.0.tgz",
+							"integrity": "sha512-SW9lzGTLvWTP1AY8xeAMZimqDrIaSdLQUcVr9DMef51niJ022Ri87SwRRKYm4A6iHfkPaiVUu/Duw2Wc4J7kKg==",
 							"dev": true,
 							"requires": {
 								"semver": "^7.0.0"
@@ -59985,9 +60127,9 @@
 			},
 			"dependencies": {
 				"npm-bundled": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-3.0.0.tgz",
-					"integrity": "sha512-Vq0eyEQy+elFpzsKjMss9kxqb9tG3YHg4dsyWuUENuzvSUWe1TCnW/vV9FkhvBk/brEDoDiVd+M1Btosa6ImdQ==",
+					"version": "3.0.1",
+					"resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-3.0.1.tgz",
+					"integrity": "sha512-+AvaheE/ww1JEwRHOrn4WHNzOxGtVp+adrg2AeZS/7KuxGUYFuBta98wYpfHBbJp6Tg6j1NKSEVHNcfZzJHQwQ==",
 					"dev": true,
 					"requires": {
 						"npm-normalize-package-bin": "^3.0.0"
@@ -62489,9 +62631,9 @@
 					}
 				},
 				"yaml": {
-					"version": "2.4.1",
-					"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz",
-					"integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg=="
+					"version": "2.4.2",
+					"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.2.tgz",
+					"integrity": "sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA=="
 				}
 			}
 		},
@@ -63030,8 +63172,8 @@
 			}
 		},
 		"@react-native-community/slider": {
-			"version": "https://raw.githubusercontent.com/wordpress-mobile/react-native-slider/v3.0.2-wp-4/react-native-community-slider-3.0.2-wp-4.tgz",
-			"integrity": "sha512-BrfAehlhFSUN0kzIhpeF8X4BvCJp6Rtxqfr+1Kpfn2B4kCuRmJoaqIDc+igPCl8ya99vzV1Uifw30P16NTMhuQ=="
+			"version": "https://raw.githubusercontent.com/wordpress-mobile/react-native-slider/v3.0.2-wp-5/react-native-community-slider-3.0.2-wp-5.tgz",
+			"integrity": "sha512-19yl9Em1mFKFLB9o3IO3VpBFw+U7cswjRk6cZ7kkhDCpDD3u0cpzkaIZK6NuFIPCLqOwU0MPtP+gonanN1JQKw=="
 		},
 		"@react-native-masked-view/masked-view": {
 			"version": "0.3.0",
@@ -64623,9 +64765,9 @@
 					}
 				},
 				"recast": {
-					"version": "0.23.6",
-					"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.6.tgz",
-					"integrity": "sha512-9FHoNjX1yjuesMwuthAmPKabxYQdOgihFYmT5ebXfYGBcnqXZf3WOVz+5foEZ8Y83P4ZY6yQD5GMmtV+pgCCAQ==",
+					"version": "0.23.7",
+					"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.7.tgz",
+					"integrity": "sha512-MpQlLZVpqbbxYcqEjwpRWo88sGvjOYoXptySz710RuddNMHx+wPkoNX6YyLZJlXAh5VZr1qmPrTwcTuFMh0Lag==",
 					"dev": true,
 					"requires": {
 						"ast-types": "^0.16.1",
@@ -64809,9 +64951,9 @@
 					"dev": true
 				},
 				"recast": {
-					"version": "0.23.6",
-					"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.6.tgz",
-					"integrity": "sha512-9FHoNjX1yjuesMwuthAmPKabxYQdOgihFYmT5ebXfYGBcnqXZf3WOVz+5foEZ8Y83P4ZY6yQD5GMmtV+pgCCAQ==",
+					"version": "0.23.7",
+					"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.7.tgz",
+					"integrity": "sha512-MpQlLZVpqbbxYcqEjwpRWo88sGvjOYoXptySz710RuddNMHx+wPkoNX6YyLZJlXAh5VZr1qmPrTwcTuFMh0Lag==",
 					"dev": true,
 					"requires": {
 						"ast-types": "^0.16.1",
@@ -65005,16 +65147,16 @@
 					}
 				},
 				"glob": {
-					"version": "10.3.12",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
-					"integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
+					"version": "10.3.15",
+					"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.15.tgz",
+					"integrity": "sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==",
 					"dev": true,
 					"requires": {
 						"foreground-child": "^3.1.0",
 						"jackspeak": "^2.3.6",
 						"minimatch": "^9.0.1",
 						"minipass": "^7.0.4",
-						"path-scurry": "^1.10.2"
+						"path-scurry": "^1.11.0"
 					}
 				},
 				"jsonfile": {
@@ -65055,9 +65197,9 @@
 					}
 				},
 				"minipass": {
-					"version": "7.0.4",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-					"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+					"version": "7.1.1",
+					"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+					"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 					"dev": true
 				},
 				"p-locate": {
@@ -65245,9 +65387,9 @@
 					}
 				},
 				"ws": {
-					"version": "8.16.0",
-					"resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-					"integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+					"version": "8.17.0",
+					"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
+					"integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
 					"dev": true
 				}
 			}
@@ -65266,9 +65408,9 @@
 			}
 		},
 		"@storybook/csf": {
-			"version": "0.1.3",
-			"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.3.tgz",
-			"integrity": "sha512-IPZvXXo4b3G+gpmgBSBqVM81jbp2ePOKsvhgJdhyZJtkYQCII7rg9KKLQhvBQM5sLaF1eU6r0iuwmyynC9d9SA==",
+			"version": "0.1.7",
+			"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.7.tgz",
+			"integrity": "sha512-53JeLZBibjQxi0Ep+/AJTfxlofJlxy1jXcSKENlnKxHjWEYyHQCumMP5yTFjf7vhNnMjEpV3zx6t23ssFiGRyw==",
 			"dev": true,
 			"requires": {
 				"type-fest": "^2.19.0"
@@ -65331,9 +65473,9 @@
 					}
 				},
 				"recast": {
-					"version": "0.23.6",
-					"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.6.tgz",
-					"integrity": "sha512-9FHoNjX1yjuesMwuthAmPKabxYQdOgihFYmT5ebXfYGBcnqXZf3WOVz+5foEZ8Y83P4ZY6yQD5GMmtV+pgCCAQ==",
+					"version": "0.23.7",
+					"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.7.tgz",
+					"integrity": "sha512-MpQlLZVpqbbxYcqEjwpRWo88sGvjOYoXptySz710RuddNMHx+wPkoNX6YyLZJlXAh5VZr1qmPrTwcTuFMh0Lag==",
 					"dev": true,
 					"requires": {
 						"ast-types": "^0.16.1",
@@ -66839,9 +66981,9 @@
 			}
 		},
 		"@types/node": {
-			"version": "18.19.29",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.29.tgz",
-			"integrity": "sha512-5pAX7ggTmWZdhUrhRWLPf+5oM7F80bcKVCBbr0zwEkTNzTJL2CWQjznpFgHYy6GrzkYi2Yjy7DHKoynFxqPV8g==",
+			"version": "18.19.33",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.33.tgz",
+			"integrity": "sha512-NR9+KrpSajr2qBVp/Yt5TU/rp+b5Mayi3+OlMlcg2cVCfRmcG5PWZ7S4+MG9PZ5gWBoc9Pd0BKSRViuBCRPu0A==",
 			"requires": {
 				"undici-types": "~5.26.4"
 			}
@@ -66920,12 +67062,11 @@
 			"dev": true
 		},
 		"@types/react": {
-			"version": "18.0.21",
-			"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz",
-			"integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==",
+			"version": "18.3.1",
+			"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz",
+			"integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==",
 			"requires": {
 				"@types/prop-types": "*",
-				"@types/scheduler": "*",
 				"csstype": "^3.0.2"
 			}
 		},
@@ -66941,9 +67082,9 @@
 			}
 		},
 		"@types/react-dom": {
-			"version": "18.0.6",
-			"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
-			"integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==",
+			"version": "18.3.0",
+			"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+			"integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
 			"requires": {
 				"@types/react": "*"
 			}
@@ -67561,16 +67702,16 @@
 			}
 		},
 		"@use-gesture/core": {
-			"version": "10.2.24",
-			"resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.2.24.tgz",
-			"integrity": "sha512-ZL7F9mgOn3Qlnp6QLI9jaOfcvqrx6JPE/BkdVSd8imveaFTm/a3udoO6f5Us/1XtqnL4347PsIiK6AtCvMHk2Q=="
+			"version": "10.3.1",
+			"resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+			"integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw=="
 		},
 		"@use-gesture/react": {
-			"version": "10.2.24",
-			"resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.2.24.tgz",
-			"integrity": "sha512-rAZ8Nnpu1g4eFzqCPlaq+TppJpMy0dTpYOQx5KpfoBF4P3aWnCqwj7eKxcmdIb1NJKpIJj50DPugUH4mq5cpBg==",
+			"version": "10.3.1",
+			"resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+			"integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
 			"requires": {
-				"@use-gesture/core": "10.2.24"
+				"@use-gesture/core": "10.3.1"
 			}
 		},
 		"@wdio/config": {
@@ -67615,31 +67756,31 @@
 					}
 				},
 				"glob": {
-					"version": "10.3.12",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
-					"integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
+					"version": "10.3.15",
+					"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.15.tgz",
+					"integrity": "sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==",
 					"dev": true,
 					"requires": {
 						"foreground-child": "^3.1.0",
 						"jackspeak": "^2.3.6",
 						"minimatch": "^9.0.1",
 						"minipass": "^7.0.4",
-						"path-scurry": "^1.10.2"
+						"path-scurry": "^1.11.0"
 					}
 				},
 				"hosted-git-info": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-7.0.1.tgz",
-					"integrity": "sha512-+K84LB1DYwMHoHSgaOY/Jfhw3ucPmSET5v98Ke/HdNSw4a0UktWzyW1mjhjpuxxTqOOsfWT/7iVshHmVZ4IpOA==",
+					"version": "7.0.2",
+					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-7.0.2.tgz",
+					"integrity": "sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==",
 					"dev": true,
 					"requires": {
 						"lru-cache": "^10.0.1"
 					}
 				},
 				"json-parse-even-better-errors": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.1.tgz",
-					"integrity": "sha512-aatBvbL26wVUCLmbWdCpeu9iF5wOyWpagiKkInA+kfws3sWdBrTnsvN2CKcyCYyUrc7rebNBlK6+kteg7ksecg==",
+					"version": "3.0.2",
+					"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.2.tgz",
+					"integrity": "sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==",
 					"dev": true
 				},
 				"lines-and-columns": {
@@ -67658,9 +67799,9 @@
 					}
 				},
 				"lru-cache": {
-					"version": "10.2.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
-					"integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
+					"version": "10.2.2",
+					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
+					"integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
 					"dev": true
 				},
 				"minimatch": {
@@ -67673,15 +67814,15 @@
 					}
 				},
 				"minipass": {
-					"version": "7.0.4",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-					"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+					"version": "7.1.1",
+					"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+					"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 					"dev": true
 				},
 				"normalize-package-data": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-6.0.0.tgz",
-					"integrity": "sha512-UL7ELRVxYBHBgYEtZCXjxuD5vPxnmvMGq0jp/dGPKKrN7tfsBh2IY7TlJ15WWwdjRWD3RJbnsygUurTK3xkPkg==",
+					"version": "6.0.1",
+					"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-6.0.1.tgz",
+					"integrity": "sha512-6rvCfeRW+OEZagAB4lMLSNuTNYZWLVtKccK79VSTf//yTY5VOCgcpH80O+bZK8Neps7pUnd5G+QlMg1yV/2iZQ==",
 					"dev": true,
 					"requires": {
 						"hosted-git-info": "^7.0.0",
@@ -67759,9 +67900,9 @@
 					}
 				},
 				"type-fest": {
-					"version": "4.15.0",
-					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.15.0.tgz",
-					"integrity": "sha512-tB9lu0pQpX5KJq54g+oHOLumOx+pMep4RaM6liXh2PKmVRFF+/vAtUP0ZaJ0kOySfVNjF6doBWPHhBhISKdlIA==",
+					"version": "4.18.2",
+					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.18.2.tgz",
+					"integrity": "sha512-+suCYpfJLAe4OXS6+PPXjW3urOS4IoP9waSiLuXfLgqZODKw/aWwASvzqE886wA0kQgGy0mIWyhd87VpqIy6Xg==",
 					"dev": true
 				},
 				"yocto-queue": {
@@ -67823,9 +67964,9 @@
 			},
 			"dependencies": {
 				"@types/node": {
-					"version": "20.12.3",
-					"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.3.tgz",
-					"integrity": "sha512-sD+ia2ubTeWrOu+YMF+MTAB7E+O7qsMqAbMfW7DG3K1URwhZ5hN1pLlRVGbf4wDFzSfikL05M17EyorS86jShw==",
+					"version": "20.12.12",
+					"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
+					"integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
 					"dev": true,
 					"requires": {
 						"undici-types": "~5.26.4"
@@ -67843,9 +67984,9 @@
 			},
 			"dependencies": {
 				"@types/node": {
-					"version": "20.12.3",
-					"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.3.tgz",
-					"integrity": "sha512-sD+ia2ubTeWrOu+YMF+MTAB7E+O7qsMqAbMfW7DG3K1URwhZ5hN1pLlRVGbf4wDFzSfikL05M17EyorS86jShw==",
+					"version": "20.12.12",
+					"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
+					"integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
 					"dev": true,
 					"requires": {
 						"undici-types": "~5.26.4"
@@ -68485,7 +68626,6 @@
 				"@babel/preset-env": "^7.16.0",
 				"@babel/preset-typescript": "^7.16.0",
 				"@babel/runtime": "^7.16.0",
-				"@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma",
 				"@wordpress/browserslist-config": "file:../browserslist-config",
 				"@wordpress/warning": "file:../warning",
 				"browserslist": "^4.21.10",
@@ -68565,7 +68705,7 @@
 				"@wordpress/warning": "file:../warning",
 				"@wordpress/wordcount": "file:../wordcount",
 				"change-case": "^4.1.2",
-				"classnames": "^2.3.1",
+				"clsx": "^2.1.1",
 				"colord": "^2.7.0",
 				"deepmerge": "^4.3.0",
 				"diff": "^4.0.2",
@@ -68648,7 +68788,7 @@
 				"@wordpress/viewport": "file:../viewport",
 				"@wordpress/wordcount": "file:../wordcount",
 				"change-case": "^4.1.2",
-				"classnames": "^2.3.1",
+				"clsx": "^2.1.1",
 				"colord": "^2.7.0",
 				"escape-html": "^1.0.3",
 				"fast-average-color": "^9.1.1",
@@ -68684,7 +68824,6 @@
 				"@wordpress/autop": "file:../autop",
 				"@wordpress/blob": "file:../blob",
 				"@wordpress/block-serialization-default-parser": "file:../block-serialization-default-parser",
-				"@wordpress/compose": "file:../compose",
 				"@wordpress/data": "file:../data",
 				"@wordpress/deprecated": "file:../deprecated",
 				"@wordpress/dom": "file:../dom",
@@ -68734,7 +68873,7 @@
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 				"@wordpress/private-apis": "file:../private-apis",
-				"classnames": "^2.3.1",
+				"clsx": "^2.1.1",
 				"cmdk": "^0.2.0"
 			}
 		},
@@ -68752,7 +68891,7 @@
 				"@floating-ui/react-dom": "^2.0.8",
 				"@types/gradient-parser": "0.1.3",
 				"@types/highlight-words-core": "1.2.1",
-				"@use-gesture/react": "^10.2.24",
+				"@use-gesture/react": "^10.3.1",
 				"@wordpress/a11y": "file:../a11y",
 				"@wordpress/compose": "file:../compose",
 				"@wordpress/date": "file:../date",
@@ -68771,13 +68910,13 @@
 				"@wordpress/rich-text": "file:../rich-text",
 				"@wordpress/warning": "file:../warning",
 				"change-case": "^4.1.2",
-				"classnames": "^2.3.1",
+				"clsx": "^2.1.1",
 				"colord": "^2.7.0",
 				"date-fns": "^3.6.0",
 				"deepmerge": "^4.3.0",
 				"downshift": "^6.0.15",
 				"fast-deep-equal": "^3.1.3",
-				"framer-motion": "^10.13.0",
+				"framer-motion": "^11.1.9",
 				"gradient-parser": "^0.1.5",
 				"highlight-words-core": "^1.2.2",
 				"is-plain-object": "^5.0.0",
@@ -68802,19 +68941,10 @@
 					"resolved": "https://registry.npmjs.org/@types/gradient-parser/-/gradient-parser-0.1.3.tgz",
 					"integrity": "sha512-XDbrTSBlQV9nxE1GiDL3FaOPy4G/KaJkhDutBX48Kg8CYZMBARyyDFGCWfWJn4pobmInmwud1xxH7VJMAr0CKQ=="
 				},
-				"framer-motion": {
-					"version": "10.13.0",
-					"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.13.0.tgz",
-					"integrity": "sha512-xKhw9VCizmwEHbopOfluaoVunGHSZyMztGbTvsgOYqCjaKu6qtlwWY1J+6GhL41NY1P157JgEikjDm67XCFnvQ==",
-					"requires": {
-						"@emotion/is-prop-valid": "^0.8.2",
-						"tslib": "^2.4.0"
-					}
-				},
 				"path-to-regexp": {
-					"version": "6.2.1",
-					"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
-					"integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
+					"version": "6.2.2",
+					"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.2.tgz",
+					"integrity": "sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw=="
 				},
 				"uuid": {
 					"version": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
@@ -68946,7 +69076,7 @@
 				"@wordpress/preferences": "file:../preferences",
 				"@wordpress/private-apis": "file:../private-apis",
 				"@wordpress/widgets": "file:../widgets",
-				"classnames": "^2.3.1",
+				"clsx": "^2.1.1",
 				"fast-deep-equal": "^3.1.3"
 			}
 		},
@@ -68984,16 +69114,14 @@
 			"requires": {
 				"@ariakit/react": "^0.3.12",
 				"@babel/runtime": "^7.16.0",
-				"@wordpress/a11y": "file:../a11y",
 				"@wordpress/components": "file:../components",
 				"@wordpress/compose": "file:../compose",
 				"@wordpress/element": "file:../element",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
-				"@wordpress/keycodes": "file:../keycodes",
 				"@wordpress/primitives": "file:../primitives",
 				"@wordpress/private-apis": "file:../private-apis",
-				"classnames": "^2.3.1",
+				"clsx": "^2.1.1",
 				"remove-accents": "^0.5.0"
 			},
 			"dependencies": {
@@ -69143,7 +69271,6 @@
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 				"@wordpress/keycodes": "file:../keycodes",
-				"@wordpress/media-utils": "file:../media-utils",
 				"@wordpress/notices": "file:../notices",
 				"@wordpress/plugins": "file:../plugins",
 				"@wordpress/preferences": "file:../preferences",
@@ -69152,7 +69279,7 @@
 				"@wordpress/viewport": "file:../viewport",
 				"@wordpress/warning": "file:../warning",
 				"@wordpress/widgets": "file:../widgets",
-				"classnames": "^2.3.1",
+				"clsx": "^2.1.1",
 				"memize": "^2.1.0"
 			}
 		},
@@ -69186,7 +69313,6 @@
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 				"@wordpress/keycodes": "file:../keycodes",
-				"@wordpress/media-utils": "file:../media-utils",
 				"@wordpress/notices": "file:../notices",
 				"@wordpress/patterns": "file:../patterns",
 				"@wordpress/plugins": "file:../plugins",
@@ -69202,12 +69328,9 @@
 				"@wordpress/widgets": "file:../widgets",
 				"@wordpress/wordcount": "file:../wordcount",
 				"change-case": "^4.1.2",
-				"classnames": "^2.3.1",
-				"client-zip": "^2.4.4",
+				"clsx": "^2.1.1",
 				"colord": "^2.9.2",
-				"deepmerge": "^4.3.0",
 				"fast-deep-equal": "^3.1.3",
-				"is-plain-object": "^5.0.0",
 				"memize": "^2.1.0",
 				"react-autosize-textarea": "^7.1.0"
 			}
@@ -69242,7 +69365,7 @@
 				"@wordpress/reusable-blocks": "file:../reusable-blocks",
 				"@wordpress/url": "file:../url",
 				"@wordpress/widgets": "file:../widgets",
-				"classnames": "^2.3.1"
+				"clsx": "^2.1.1"
 			}
 		},
 		"@wordpress/editor": {
@@ -69282,8 +69405,13 @@
 				"@wordpress/url": "file:../url",
 				"@wordpress/warning": "file:../warning",
 				"@wordpress/wordcount": "file:../wordcount",
-				"classnames": "^2.3.1",
+				"change-case": "^4.1.2",
+				"client-zip": "^2.4.5",
+				"clsx": "^2.1.1",
 				"date-fns": "^3.6.0",
+				"deepmerge": "^4.3.0",
+				"fast-deep-equal": "^3.1.3",
+				"is-plain-object": "^5.0.0",
 				"memize": "^2.1.0",
 				"react-autosize-textarea": "^7.1.0",
 				"remove-accents": "^0.5.0"
@@ -69293,8 +69421,8 @@
 			"version": "file:packages/element",
 			"requires": {
 				"@babel/runtime": "^7.16.0",
-				"@types/react": "^18.0.21",
-				"@types/react-dom": "^18.0.6",
+				"@types/react": "^18.2.79",
+				"@types/react-dom": "^18.2.25",
 				"@wordpress/escape-html": "file:../escape-html",
 				"change-case": "^4.1.2",
 				"is-plain-object": "^5.0.0",
@@ -69379,9 +69507,9 @@
 					"dev": true
 				},
 				"yaml": {
-					"version": "2.4.1",
-					"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz",
-					"integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==",
+					"version": "2.4.2",
+					"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.2.tgz",
+					"integrity": "sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==",
 					"dev": true
 				},
 				"yargs": {
@@ -69534,7 +69662,7 @@
 				"@wordpress/preferences": "file:../preferences",
 				"@wordpress/private-apis": "file:../private-apis",
 				"@wordpress/viewport": "file:../viewport",
-				"classnames": "^2.3.1"
+				"clsx": "^2.1.1"
 			}
 		},
 		"@wordpress/is-shallow-equal": {
@@ -69691,7 +69819,7 @@
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/private-apis": "file:../private-apis",
-				"classnames": "^2.3.1"
+				"clsx": "^2.1.1"
 			}
 		},
 		"@wordpress/preferences-persistence": {
@@ -69709,7 +69837,7 @@
 			"requires": {
 				"@babel/runtime": "^7.16.0",
 				"@wordpress/element": "file:../element",
-				"classnames": "^2.3.1"
+				"clsx": "^2.1.1"
 			}
 		},
 		"@wordpress/priority-queue": {
@@ -69763,7 +69891,7 @@
 				"@babel/runtime": "^7.20.0",
 				"@react-native-clipboard/clipboard": "1.11.2",
 				"@react-native-community/blur": "4.2.0",
-				"@react-native-community/slider": "https://raw.githubusercontent.com/wordpress-mobile/react-native-slider/v3.0.2-wp-4/react-native-community-slider-3.0.2-wp-4.tgz",
+				"@react-native-community/slider": "https://raw.githubusercontent.com/wordpress-mobile/react-native-slider/v3.0.2-wp-5/react-native-community-slider-3.0.2-wp-5.tgz",
 				"@react-native-masked-view/masked-view": "0.3.0",
 				"@react-navigation/core": "5.12.0",
 				"@react-navigation/native": "6.0.14",
@@ -69800,7 +69928,7 @@
 				"react-native-screens": "3.29.0",
 				"react-native-svg": "14.0.0",
 				"react-native-url-polyfill": "1.3.0",
-				"react-native-video": "https://raw.githubusercontent.com/wordpress-mobile/react-native-video/5.2.0-wp-6/react-native-video-5.2.0-wp-6.tgz",
+				"react-native-video": "https://raw.githubusercontent.com/wordpress-mobile/react-native-video/5.2.0-wp-7/react-native-video-5.2.0-wp-7.tgz",
 				"react-native-webview": "13.6.1"
 			},
 			"dependencies": {
@@ -69964,6 +70092,7 @@
 				"react-refresh": "^0.14.0",
 				"read-pkg-up": "^7.0.1",
 				"resolve-bin": "^0.4.0",
+				"rtlcss-webpack-plugin": "^4.0.7",
 				"sass": "^1.35.2",
 				"sass-loader": "^12.1.0",
 				"source-map-loader": "^3.0.0",
@@ -70298,7 +70427,7 @@
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/notices": "file:../notices",
-				"classnames": "^2.3.1"
+				"clsx": "^2.1.1"
 			}
 		},
 		"@wordpress/wordcount": {
@@ -70831,9 +70960,9 @@
 					}
 				},
 				"gauge": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/gauge/-/gauge-5.0.1.tgz",
-					"integrity": "sha512-CmykPMJGuNan/3S4kZOpvvPYSNqSHANiWnh9XcMU2pSjtBfF0XzZ2p1bFAxTbnFxyBuPxQYHhzwaoOmUdqzvxQ==",
+					"version": "5.0.2",
+					"resolved": "https://registry.npmjs.org/gauge/-/gauge-5.0.2.tgz",
+					"integrity": "sha512-pMaFftXPtiGIHCJHdcUUx9Rby/rFT/Kkt3fIIGCs+9PMDIljSyRiqraTlxNtBReJRDfUefpa263RQ3vnp5G/LQ==",
 					"dev": true,
 					"requires": {
 						"aproba": "^1.0.3 || ^2.0.0",
@@ -71594,15 +71723,15 @@
 			},
 			"dependencies": {
 				"ajv": {
-					"version": "8.12.0",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-					"integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+					"version": "8.13.0",
+					"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.13.0.tgz",
+					"integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==",
 					"dev": true,
 					"requires": {
-						"fast-deep-equal": "^3.1.1",
+						"fast-deep-equal": "^3.1.3",
 						"json-schema-traverse": "^1.0.0",
 						"require-from-string": "^2.0.2",
-						"uri-js": "^4.2.2"
+						"uri-js": "^4.4.1"
 					}
 				},
 				"ajv-keywords": {
@@ -71886,6 +72015,30 @@
 				"babel-preset-current-node-syntax": "^1.0.0"
 			}
 		},
+		"babel-runtime": {
+			"version": "6.25.0",
+			"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.25.0.tgz",
+			"integrity": "sha512-zeCYxDePWYAT/DfmQWIHsMSFW2vv45UIwIAMjGvQVsTd47RwsiRH0uK1yzyWZ7LDBKdhnGDPM6NYEO5CZyhPrg==",
+			"dev": true,
+			"requires": {
+				"core-js": "^2.4.0",
+				"regenerator-runtime": "^0.10.0"
+			},
+			"dependencies": {
+				"core-js": {
+					"version": "2.6.12",
+					"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+					"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+					"dev": true
+				},
+				"regenerator-runtime": {
+					"version": "0.10.5",
+					"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+					"integrity": "sha512-02YopEIhAgiBHWeoTiA8aitHDt8z6w+rQqNuIftlM+ZtvSl/brTouaU7DW6GO/cHtvxJvS4Hwv2ibKdxIRi24w==",
+					"dev": true
+				}
+			}
+		},
 		"bail": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/bail/-/bail-1.0.3.tgz",
@@ -73014,11 +73167,6 @@
 				}
 			}
 		},
-		"classnames": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
-			"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
-		},
 		"clean-css": {
 			"version": "5.3.3",
 			"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
@@ -73147,9 +73295,9 @@
 			"dev": true
 		},
 		"client-zip": {
-			"version": "2.4.4",
-			"resolved": "https://registry.npmjs.org/client-zip/-/client-zip-2.4.4.tgz",
-			"integrity": "sha512-Ixk40BUI7VvNDxW7SCze20GbCuC+gjP4tGkXUpo6/W96bOf96HSed6cOQVeUOIe74SJAG/dIrBr7AtR4xBVnsA=="
+			"version": "2.4.5",
+			"resolved": "https://registry.npmjs.org/client-zip/-/client-zip-2.4.5.tgz",
+			"integrity": "sha512-4y4d5ZeTH/szIAMQeC8ju67pxtvj+3u20wMGwOFrZk+pegy3aSEA2JkwgC8XVDTXP/Iqn1gyqNQXmkyBp4KLEQ=="
 		},
 		"cliui": {
 			"version": "6.0.0",
@@ -73234,6 +73382,11 @@
 				"mimic-response": "^1.0.0"
 			}
 		},
+		"clsx": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
+		},
 		"cmd-shim": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-6.0.1.tgz",
@@ -74031,15 +74184,15 @@
 			},
 			"dependencies": {
 				"ajv": {
-					"version": "8.12.0",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-					"integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+					"version": "8.13.0",
+					"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.13.0.tgz",
+					"integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==",
 					"dev": true,
 					"requires": {
-						"fast-deep-equal": "^3.1.1",
+						"fast-deep-equal": "^3.1.3",
 						"json-schema-traverse": "^1.0.0",
 						"require-from-string": "^2.0.2",
-						"uri-js": "^4.2.2"
+						"uri-js": "^4.4.1"
 					}
 				},
 				"ajv-keywords": {
@@ -76075,9 +76228,9 @@
 			"dev": true
 		},
 		"envinfo": {
-			"version": "7.11.1",
-			"resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.11.1.tgz",
-			"integrity": "sha512-8PiZgZNIB4q/Lw4AhOvAfB/ityHAd2bli3lESSWmWSzSsl5dKpy5N1d1Rfkd2teq/g9xN90lc6o98DOjMeYHpg=="
+			"version": "7.13.0",
+			"resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.13.0.tgz",
+			"integrity": "sha512-cvcaMr7KqXVh4nyzGTVqTum+gAiL265x5jUWQIDLq//zOGbW+gSW/C+OWLleY/rs9Qole6AZLMXPbtIFQbqu+Q=="
 		},
 		"equivalent-key-map": {
 			"version": "0.2.2",
@@ -76492,17 +76645,17 @@
 					}
 				},
 				"optionator": {
-					"version": "0.9.3",
-					"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
-					"integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
+					"version": "0.9.4",
+					"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+					"integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
 					"dev": true,
 					"requires": {
-						"@aashutoshrathi/word-wrap": "^1.2.3",
 						"deep-is": "^0.1.3",
 						"fast-levenshtein": "^2.0.6",
 						"levn": "^0.4.1",
 						"prelude-ls": "^1.2.1",
-						"type-check": "^0.4.0"
+						"type-check": "^0.4.0",
+						"word-wrap": "^1.2.5"
 					}
 				},
 				"path-key": {
@@ -78169,6 +78322,14 @@
 				"map-cache": "^0.2.2"
 			}
 		},
+		"framer-motion": {
+			"version": "11.1.9",
+			"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.9.tgz",
+			"integrity": "sha512-flECDIPV4QDNcOrDafVFiIazp8X01HFpzc01eDKJsdNH/wrATcYydJSH9JbPWMS8UD5lZlw+J1sK8LG2kICgqw==",
+			"requires": {
+				"tslib": "^2.4.0"
+			}
+		},
 		"fresh": {
 			"version": "0.5.2",
 			"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -78480,9 +78641,9 @@
 					}
 				},
 				"tar-fs": {
-					"version": "3.0.5",
-					"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.5.tgz",
-					"integrity": "sha512-JOgGAmZyMgbqpLwct7ZV8VzkEB6pxXFBVErLtb+XCOqzc6w1xiWKI9GVd6bwk68EX7eJ4DWmfXVmq8K2ziZTGg==",
+					"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",
@@ -79820,15 +79981,6 @@
 				"validate-npm-package-name": "^5.0.0"
 			},
 			"dependencies": {
-				"builtins": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-					"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-					"dev": true,
-					"requires": {
-						"semver": "^7.0.0"
-					}
-				},
 				"hosted-git-info": {
 					"version": "6.1.1",
 					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
@@ -79857,13 +80009,10 @@
 					}
 				},
 				"validate-npm-package-name": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz",
-					"integrity": "sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==",
-					"dev": true,
-					"requires": {
-						"builtins": "^5.0.0"
-					}
+					"version": "5.0.1",
+					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+					"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
+					"dev": true
 				}
 			}
 		},
@@ -80841,9 +80990,9 @@
 			},
 			"dependencies": {
 				"dedent": {
-					"version": "1.5.1",
-					"resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.1.tgz",
-					"integrity": "sha512-+LxW+KLWxu3HW3M2w2ympwtqPrqYRzU8fqi6Fhd18fBALe15blJPI/I4+UHveMVG6lJqB4JNd4UG0S5cnVHwIg==",
+					"version": "1.5.3",
+					"resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.3.tgz",
+					"integrity": "sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==",
 					"dev": true
 				}
 			}
@@ -81478,9 +81627,9 @@
 			}
 		},
 		"joi": {
-			"version": "17.12.3",
-			"resolved": "https://registry.npmjs.org/joi/-/joi-17.12.3.tgz",
-			"integrity": "sha512-2RRziagf555owrm9IRVtdKynOBeITiDpuZqIpgwqXShPncPKNiRQoiGsl/T8SQdq+8ugRzH2LqY67irr2y/d+g==",
+			"version": "17.13.1",
+			"resolved": "https://registry.npmjs.org/joi/-/joi-17.13.1.tgz",
+			"integrity": "sha512-vaBlIKCyo4FCUtCm7Eu4QZd/q02bWcxfUO6YSXAZOWF6gzcLBeba8kwotUdYJjDLW8Cz8RywsSOqiNJZW0mNvg==",
 			"requires": {
 				"@hapi/hoek": "^9.3.0",
 				"@hapi/topo": "^5.1.0",
@@ -81656,9 +81805,9 @@
 					}
 				},
 				"ws": {
-					"version": "8.16.0",
-					"resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-					"integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+					"version": "8.17.0",
+					"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
+					"integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
 					"dev": true
 				}
 			}
@@ -82707,9 +82856,9 @@
 					},
 					"dependencies": {
 						"builtins": {
-							"version": "5.0.1",
-							"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-							"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
+							"version": "5.1.0",
+							"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.1.0.tgz",
+							"integrity": "sha512-SW9lzGTLvWTP1AY8xeAMZimqDrIaSdLQUcVr9DMef51niJ022Ri87SwRRKYm4A6iHfkPaiVUu/Duw2Wc4J7kKg==",
 							"dev": true,
 							"requires": {
 								"semver": "^7.0.0"
@@ -82785,15 +82934,6 @@
 				"npm-registry-fetch": "^14.0.3"
 			},
 			"dependencies": {
-				"builtins": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-					"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-					"dev": true,
-					"requires": {
-						"semver": "^7.0.0"
-					}
-				},
 				"hosted-git-info": {
 					"version": "6.1.1",
 					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
@@ -82822,13 +82962,10 @@
 					}
 				},
 				"validate-npm-package-name": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz",
-					"integrity": "sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==",
-					"dev": true,
-					"requires": {
-						"builtins": "^5.0.0"
-					}
+					"version": "5.0.1",
+					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+					"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
+					"dev": true
 				}
 			}
 		},
@@ -82848,15 +82985,6 @@
 				"ssri": "^10.0.1"
 			},
 			"dependencies": {
-				"builtins": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-					"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-					"dev": true,
-					"requires": {
-						"semver": "^7.0.0"
-					}
-				},
 				"hosted-git-info": {
 					"version": "6.1.1",
 					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
@@ -82873,9 +83001,9 @@
 					"dev": true
 				},
 				"minipass": {
-					"version": "7.0.4",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-					"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+					"version": "7.1.1",
+					"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+					"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 					"dev": true
 				},
 				"normalize-package-data": {
@@ -82903,22 +83031,19 @@
 					}
 				},
 				"ssri": {
-					"version": "10.0.5",
-					"resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.5.tgz",
-					"integrity": "sha512-bSf16tAFkGeRlUNDjXu8FzaMQt6g2HZJrun7mtMbIPOddxt3GLMSz5VWUWcqTJUPfLEaDIepGxv+bYQW49596A==",
+					"version": "10.0.6",
+					"resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.6.tgz",
+					"integrity": "sha512-MGrFH9Z4NP9Iyhqn16sDtBpRRNJ0Y2hNa6D65h736fVSaPCHr4DM4sWUNvVaSuC+0OBGhwsrydQwmgfg5LncqQ==",
 					"dev": true,
 					"requires": {
 						"minipass": "^7.0.3"
 					}
 				},
 				"validate-npm-package-name": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz",
-					"integrity": "sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==",
-					"dev": true,
-					"requires": {
-						"builtins": "^5.0.0"
-					}
+					"version": "5.0.1",
+					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+					"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
+					"dev": true
 				}
 			}
 		},
@@ -83163,9 +83288,9 @@
 			}
 		},
 		"lint-staged": {
-			"version": "10.0.1",
-			"resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.0.1.tgz",
-			"integrity": "sha512-Qk48GmcMX8zFzhuJsf0ZquILxnnDkY56Y+/y1TGxEe4S5P+RetnisiF0Z15t+Gwa5PMNAG4dPxqGHabW7L4zwg==",
+			"version": "10.0.2",
+			"resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.0.2.tgz",
+			"integrity": "sha512-ZldhtIfT7bynVa7nmU/1jbK05r9hYQXbIQqZSotqdBCAcGJDEUqaUB7kG3ZCdoe9Qkj6HUM3x2yjCGJRxPUQLA==",
 			"dev": true,
 			"requires": {
 				"chalk": "^3.0.0",
@@ -83179,6 +83304,7 @@
 				"micromatch": "^4.0.2",
 				"normalize-path": "^3.0.0",
 				"please-upgrade-node": "^3.2.0",
+				"string-argv": "0.3.1",
 				"stringify-object": "^3.3.0"
 			},
 			"dependencies": {
@@ -84043,9 +84169,9 @@
 					},
 					"dependencies": {
 						"minipass": {
-							"version": "7.0.4",
-							"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-							"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+							"version": "7.1.1",
+							"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+							"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 							"dev": true
 						}
 					}
@@ -84060,30 +84186,30 @@
 					},
 					"dependencies": {
 						"minipass": {
-							"version": "7.0.4",
-							"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-							"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+							"version": "7.1.1",
+							"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+							"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 							"dev": true
 						}
 					}
 				},
 				"glob": {
-					"version": "10.3.12",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
-					"integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
+					"version": "10.3.15",
+					"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.15.tgz",
+					"integrity": "sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==",
 					"dev": true,
 					"requires": {
 						"foreground-child": "^3.1.0",
 						"jackspeak": "^2.3.6",
 						"minimatch": "^9.0.1",
 						"minipass": "^7.0.4",
-						"path-scurry": "^1.10.2"
+						"path-scurry": "^1.11.0"
 					},
 					"dependencies": {
 						"minipass": {
-							"version": "7.0.4",
-							"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-							"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+							"version": "7.1.1",
+							"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+							"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 							"dev": true
 						}
 					}
@@ -84110,18 +84236,18 @@
 					"dev": true
 				},
 				"ssri": {
-					"version": "10.0.5",
-					"resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.5.tgz",
-					"integrity": "sha512-bSf16tAFkGeRlUNDjXu8FzaMQt6g2HZJrun7mtMbIPOddxt3GLMSz5VWUWcqTJUPfLEaDIepGxv+bYQW49596A==",
+					"version": "10.0.6",
+					"resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.6.tgz",
+					"integrity": "sha512-MGrFH9Z4NP9Iyhqn16sDtBpRRNJ0Y2hNa6D65h736fVSaPCHr4DM4sWUNvVaSuC+0OBGhwsrydQwmgfg5LncqQ==",
 					"dev": true,
 					"requires": {
 						"minipass": "^7.0.3"
 					},
 					"dependencies": {
 						"minipass": {
-							"version": "7.0.4",
-							"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-							"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+							"version": "7.1.1",
+							"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+							"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 							"dev": true
 						}
 					}
@@ -85286,15 +85412,15 @@
 			},
 			"dependencies": {
 				"ajv": {
-					"version": "8.12.0",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-					"integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+					"version": "8.13.0",
+					"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.13.0.tgz",
+					"integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==",
 					"dev": true,
 					"requires": {
-						"fast-deep-equal": "^3.1.1",
+						"fast-deep-equal": "^3.1.3",
 						"json-schema-traverse": "^1.0.0",
 						"require-from-string": "^2.0.2",
-						"uri-js": "^4.2.2"
+						"uri-js": "^4.4.1"
 					}
 				},
 				"ajv-keywords": {
@@ -86291,15 +86417,6 @@
 					"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
 					"dev": true
 				},
-				"builtins": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-					"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-					"dev": true,
-					"requires": {
-						"semver": "^7.0.0"
-					}
-				},
 				"chalk": {
 					"version": "4.1.2",
 					"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -86411,13 +86528,10 @@
 					"dev": true
 				},
 				"validate-npm-package-name": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz",
-					"integrity": "sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==",
-					"dev": true,
-					"requires": {
-						"builtins": "^5.0.0"
-					}
+					"version": "5.0.1",
+					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+					"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
+					"dev": true
 				}
 			}
 		},
@@ -86461,15 +86575,6 @@
 				"semver": "^7.3.5"
 			},
 			"dependencies": {
-				"builtins": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-					"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-					"dev": true,
-					"requires": {
-						"semver": "^7.0.0"
-					}
-				},
 				"hosted-git-info": {
 					"version": "6.1.1",
 					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
@@ -86504,13 +86609,10 @@
 					}
 				},
 				"validate-npm-package-name": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz",
-					"integrity": "sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==",
-					"dev": true,
-					"requires": {
-						"builtins": "^5.0.0"
-					}
+					"version": "5.0.1",
+					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+					"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
+					"dev": true
 				}
 			}
 		},
@@ -86529,15 +86631,6 @@
 				"proc-log": "^3.0.0"
 			},
 			"dependencies": {
-				"builtins": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-					"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-					"dev": true,
-					"requires": {
-						"semver": "^7.0.0"
-					}
-				},
 				"hosted-git-info": {
 					"version": "6.1.1",
 					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
@@ -86572,13 +86665,10 @@
 					}
 				},
 				"validate-npm-package-name": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz",
-					"integrity": "sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==",
-					"dev": true,
-					"requires": {
-						"builtins": "^5.0.0"
-					}
+					"version": "5.0.1",
+					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+					"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
+					"dev": true
 				}
 			}
 		},
@@ -87843,15 +87933,6 @@
 						"balanced-match": "^1.0.0"
 					}
 				},
-				"builtins": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-					"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-					"dev": true,
-					"requires": {
-						"semver": "^7.0.0"
-					}
-				},
 				"cacache": {
 					"version": "17.1.4",
 					"resolved": "https://registry.npmjs.org/cacache/-/cacache-17.1.4.tgz",
@@ -87873,9 +87954,9 @@
 					},
 					"dependencies": {
 						"minipass": {
-							"version": "7.0.4",
-							"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-							"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+							"version": "7.1.1",
+							"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+							"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 							"dev": true
 						}
 					}
@@ -87890,30 +87971,30 @@
 					},
 					"dependencies": {
 						"minipass": {
-							"version": "7.0.4",
-							"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-							"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+							"version": "7.1.1",
+							"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+							"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 							"dev": true
 						}
 					}
 				},
 				"glob": {
-					"version": "10.3.12",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
-					"integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
+					"version": "10.3.15",
+					"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.15.tgz",
+					"integrity": "sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==",
 					"dev": true,
 					"requires": {
 						"foreground-child": "^3.1.0",
 						"jackspeak": "^2.3.6",
 						"minimatch": "^9.0.1",
 						"minipass": "^7.0.4",
-						"path-scurry": "^1.10.2"
+						"path-scurry": "^1.11.0"
 					},
 					"dependencies": {
 						"minipass": {
-							"version": "7.0.4",
-							"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-							"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+							"version": "7.1.1",
+							"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+							"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 							"dev": true
 						}
 					}
@@ -87928,9 +88009,9 @@
 					}
 				},
 				"ignore-walk": {
-					"version": "6.0.4",
-					"resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-6.0.4.tgz",
-					"integrity": "sha512-t7sv42WkwFkyKbivUCglsQW5YWMskWtbEf4MNKX5u/CCWHKSPzN4FtBQGsQZgCLbxOzpVlcbWVK5KB3auIOjSw==",
+					"version": "6.0.5",
+					"resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-6.0.5.tgz",
+					"integrity": "sha512-VuuG0wCnjhnylG1ABXT3dAuIpTNDs/G8jlpmwXY03fXoXy/8ZK8/T+hMzt8L4WnrLCJgdybqgPagnF/f97cg3A==",
 					"dev": true,
 					"requires": {
 						"minimatch": "^9.0.0"
@@ -87979,18 +88060,18 @@
 					}
 				},
 				"ssri": {
-					"version": "10.0.5",
-					"resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.5.tgz",
-					"integrity": "sha512-bSf16tAFkGeRlUNDjXu8FzaMQt6g2HZJrun7mtMbIPOddxt3GLMSz5VWUWcqTJUPfLEaDIepGxv+bYQW49596A==",
+					"version": "10.0.6",
+					"resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.6.tgz",
+					"integrity": "sha512-MGrFH9Z4NP9Iyhqn16sDtBpRRNJ0Y2hNa6D65h736fVSaPCHr4DM4sWUNvVaSuC+0OBGhwsrydQwmgfg5LncqQ==",
 					"dev": true,
 					"requires": {
 						"minipass": "^7.0.3"
 					},
 					"dependencies": {
 						"minipass": {
-							"version": "7.0.4",
-							"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-							"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+							"version": "7.1.1",
+							"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+							"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 							"dev": true
 						}
 					}
@@ -88014,13 +88095,10 @@
 					}
 				},
 				"validate-npm-package-name": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz",
-					"integrity": "sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==",
-					"dev": true,
-					"requires": {
-						"builtins": "^5.0.0"
-					}
+					"version": "5.0.1",
+					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+					"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
+					"dev": true
 				}
 			}
 		},
@@ -88335,9 +88413,9 @@
 					}
 				},
 				"yaml": {
-					"version": "2.4.1",
-					"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz",
-					"integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==",
+					"version": "2.4.2",
+					"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.2.tgz",
+					"integrity": "sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==",
 					"dev": true
 				}
 			}
@@ -88392,9 +88470,9 @@
 			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
 		},
 		"path-scurry": {
-			"version": "1.10.2",
-			"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.2.tgz",
-			"integrity": "sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==",
+			"version": "1.11.0",
+			"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.0.tgz",
+			"integrity": "sha512-LNHTaVkzaYaLGlO+0u3rQTz7QrHTFOuKyba9JMTQutkmtNew8dw8wOD7mTU/5fCPZzCWpfW0XnQKzY61P0aTaw==",
 			"dev": true,
 			"requires": {
 				"lru-cache": "^10.2.0",
@@ -88402,15 +88480,15 @@
 			},
 			"dependencies": {
 				"lru-cache": {
-					"version": "10.2.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
-					"integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
+					"version": "10.2.2",
+					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
+					"integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
 					"dev": true
 				},
 				"minipass": {
-					"version": "7.0.4",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-					"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+					"version": "7.1.1",
+					"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+					"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 					"dev": true
 				}
 			}
@@ -89203,9 +89281,9 @@
 					"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="
 				},
 				"react-is": {
-					"version": "18.2.0",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-					"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+					"version": "18.3.1",
+					"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+					"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
 				}
 			}
 		},
@@ -90163,8 +90241,8 @@
 			}
 		},
 		"react-native-video": {
-			"version": "https://raw.githubusercontent.com/wordpress-mobile/react-native-video/5.2.0-wp-6/react-native-video-5.2.0-wp-6.tgz",
-			"integrity": "sha512-3MZ9UsoagCWc5qiQzd2tG5qQbLT+PF8BXjoahEIptQ5mNPX9P4OkJOE3cyoGEDhby6ZYwWvUQNnwhhObhlP0DQ==",
+			"version": "https://raw.githubusercontent.com/wordpress-mobile/react-native-video/5.2.0-wp-7/react-native-video-5.2.0-wp-7.tgz",
+			"integrity": "sha512-DTwhGwqkc3IyDWsyJe8d+cEwaw7aHBgT7Q9+X+N3zDIC7qP3bZnXuTUeag8oz9XhfxRDRQJmF+t5is3qVNIuUA==",
 			"requires": {
 				"deprecated-react-native-prop-types": "^2.2.0",
 				"prop-types": "^15.7.2"
@@ -90295,16 +90373,16 @@
 					}
 				},
 				"glob": {
-					"version": "10.3.12",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
-					"integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
+					"version": "10.3.15",
+					"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.15.tgz",
+					"integrity": "sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==",
 					"dev": true,
 					"requires": {
 						"foreground-child": "^3.1.0",
 						"jackspeak": "^2.3.6",
 						"minimatch": "^9.0.1",
 						"minipass": "^7.0.4",
-						"path-scurry": "^1.10.2"
+						"path-scurry": "^1.11.0"
 					}
 				},
 				"hosted-git-info": {
@@ -90317,9 +90395,9 @@
 					}
 				},
 				"json-parse-even-better-errors": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.1.tgz",
-					"integrity": "sha512-aatBvbL26wVUCLmbWdCpeu9iF5wOyWpagiKkInA+kfws3sWdBrTnsvN2CKcyCYyUrc7rebNBlK6+kteg7ksecg==",
+					"version": "3.0.2",
+					"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.2.tgz",
+					"integrity": "sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==",
 					"dev": true
 				},
 				"lru-cache": {
@@ -90338,9 +90416,9 @@
 					}
 				},
 				"minipass": {
-					"version": "7.0.4",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-					"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+					"version": "7.1.1",
+					"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+					"integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
 					"dev": true
 				},
 				"normalize-package-data": {
@@ -90374,9 +90452,9 @@
 			},
 			"dependencies": {
 				"json-parse-even-better-errors": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.1.tgz",
-					"integrity": "sha512-aatBvbL26wVUCLmbWdCpeu9iF5wOyWpagiKkInA+kfws3sWdBrTnsvN2CKcyCYyUrc7rebNBlK6+kteg7ksecg==",
+					"version": "3.0.2",
+					"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.2.tgz",
+					"integrity": "sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==",
 					"dev": true
 				},
 				"npm-normalize-package-bin": {
@@ -91185,6 +91263,70 @@
 				}
 			}
 		},
+		"rtlcss-webpack-plugin": {
+			"version": "4.0.7",
+			"resolved": "https://registry.npmjs.org/rtlcss-webpack-plugin/-/rtlcss-webpack-plugin-4.0.7.tgz",
+			"integrity": "sha512-ouSbJtgcLBBQIsMgarxsDnfgRqm/AS4BKls/mz/Xb6HSl+PdEzefTR+Wz5uWQx4odoX0g261Z7yb3QBz0MTm0g==",
+			"dev": true,
+			"requires": {
+				"babel-runtime": "~6.25.0",
+				"rtlcss": "^3.5.0"
+			},
+			"dependencies": {
+				"find-up": {
+					"version": "5.0.0",
+					"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+					"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+					"dev": true,
+					"requires": {
+						"locate-path": "^6.0.0",
+						"path-exists": "^4.0.0"
+					}
+				},
+				"locate-path": {
+					"version": "6.0.0",
+					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+					"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+					"dev": true,
+					"requires": {
+						"p-locate": "^5.0.0"
+					}
+				},
+				"p-locate": {
+					"version": "5.0.0",
+					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+					"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+					"dev": true,
+					"requires": {
+						"p-limit": "^3.0.2"
+					}
+				},
+				"path-exists": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+					"dev": true
+				},
+				"rtlcss": {
+					"version": "3.5.0",
+					"resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-3.5.0.tgz",
+					"integrity": "sha512-wzgMaMFHQTnyi9YOwsx9LjOxYXJPzS8sYnFaKm6R5ysvTkwzHiB0vxnbHwchHQT65PTdBjDG21/kQBWI7q9O7A==",
+					"dev": true,
+					"requires": {
+						"find-up": "^5.0.0",
+						"picocolors": "^1.0.0",
+						"postcss": "^8.3.11",
+						"strip-json-comments": "^3.1.1"
+					}
+				},
+				"strip-json-comments": {
+					"version": "3.1.1",
+					"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+					"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+					"dev": true
+				}
+			}
+		},
 		"run-applescript": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-5.0.0.tgz",
@@ -91851,9 +91993,9 @@
 					}
 				},
 				"tar-fs": {
-					"version": "3.0.5",
-					"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.5.tgz",
-					"integrity": "sha512-JOgGAmZyMgbqpLwct7ZV8VzkEB6pxXFBVErLtb+XCOqzc6w1xiWKI9GVd6bwk68EX7eJ4DWmfXVmq8K2ziZTGg==",
+					"version": "3.0.6",
+					"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.6.tgz",
+					"integrity": "sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==",
 					"dev": true,
 					"optional": true,
 					"requires": {
@@ -92778,6 +92920,12 @@
 				"safe-buffer": "~5.1.0"
 			}
 		},
+		"string-argv": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz",
+			"integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==",
+			"dev": true
+		},
 		"string-length": {
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -93659,9 +93807,9 @@
 			}
 		},
 		"terser": {
-			"version": "5.30.3",
-			"resolved": "https://registry.npmjs.org/terser/-/terser-5.30.3.tgz",
-			"integrity": "sha512-STdUgOUx8rLbMGO9IOwHLpCqolkDITFFQSMYYwKE1N2lY6MVSaeoi10z/EhWxRc6ybqoVmKSkhKYH/XUpl7vSA==",
+			"version": "5.31.0",
+			"resolved": "https://registry.npmjs.org/terser/-/terser-5.31.0.tgz",
+			"integrity": "sha512-Q1JFAoUKE5IMfI4Z/lkE/E6+SwgzO+x4tq4v1AyBLRj8VSYvRO6A/rQrPg1yud4g0En9EKI1TvFRF2tQFcoUkg==",
 			"requires": {
 				"@jridgewell/source-map": "^0.3.3",
 				"acorn": "^8.8.2",
@@ -94659,9 +94807,9 @@
 					"dev": true
 				},
 				"qs": {
-					"version": "6.12.0",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.12.0.tgz",
-					"integrity": "sha512-trVZiI6RMOkO476zLGaBIzszOdFPnCCXHPG9kn0yuS1uz6xdVxPfZdB3vUig9pxPFDM9BRAgz/YUIVQ1/vuiUg==",
+					"version": "6.12.1",
+					"resolved": "https://registry.npmjs.org/qs/-/qs-6.12.1.tgz",
+					"integrity": "sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ==",
 					"dev": true,
 					"requires": {
 						"side-channel": "^1.0.6"
@@ -95253,9 +95401,9 @@
 					}
 				},
 				"@types/node": {
-					"version": "20.12.3",
-					"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.3.tgz",
-					"integrity": "sha512-sD+ia2ubTeWrOu+YMF+MTAB7E+O7qsMqAbMfW7DG3K1URwhZ5hN1pLlRVGbf4wDFzSfikL05M17EyorS86jShw==",
+					"version": "20.12.12",
+					"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
+					"integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
 					"dev": true,
 					"requires": {
 						"undici-types": "~5.26.4"
@@ -95357,9 +95505,9 @@
 					}
 				},
 				"ws": {
-					"version": "8.16.0",
-					"resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-					"integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+					"version": "8.17.0",
+					"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
+					"integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
 					"dev": true
 				}
 			}
@@ -95397,9 +95545,9 @@
 			},
 			"dependencies": {
 				"@types/node": {
-					"version": "20.12.3",
-					"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.3.tgz",
-					"integrity": "sha512-sD+ia2ubTeWrOu+YMF+MTAB7E+O7qsMqAbMfW7DG3K1URwhZ5hN1pLlRVGbf4wDFzSfikL05M17EyorS86jShw==",
+					"version": "20.12.12",
+					"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
+					"integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
 					"dev": true,
 					"requires": {
 						"undici-types": "~5.26.4"
@@ -95693,9 +95841,9 @@
 					}
 				},
 				"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.16.1",
+					"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.1.tgz",
+					"integrity": "sha512-4U5pNsuDl0EhuZpq46M5xPslstkviJuhrdobaRDBk2Jy2KO37FDAJl4lb2KlNabxT0m4MTK2UHNrsAcphE8nyw==",
 					"dev": true,
 					"requires": {
 						"graceful-fs": "^4.2.4",
@@ -95897,15 +96045,15 @@
 			},
 			"dependencies": {
 				"ajv": {
-					"version": "8.12.0",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-					"integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+					"version": "8.13.0",
+					"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.13.0.tgz",
+					"integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==",
 					"dev": true,
 					"requires": {
-						"fast-deep-equal": "^3.1.1",
+						"fast-deep-equal": "^3.1.3",
 						"json-schema-traverse": "^1.0.0",
 						"require-from-string": "^2.0.2",
-						"uri-js": "^4.2.2"
+						"uri-js": "^4.4.1"
 					}
 				},
 				"ajv-keywords": {
@@ -95982,15 +96130,15 @@
 			},
 			"dependencies": {
 				"ajv": {
-					"version": "8.12.0",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-					"integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+					"version": "8.13.0",
+					"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.13.0.tgz",
+					"integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==",
 					"dev": true,
 					"requires": {
-						"fast-deep-equal": "^3.1.1",
+						"fast-deep-equal": "^3.1.3",
 						"json-schema-traverse": "^1.0.0",
 						"require-from-string": "^2.0.2",
-						"uri-js": "^4.2.2"
+						"uri-js": "^4.4.1"
 					}
 				},
 				"ajv-keywords": {
@@ -96009,9 +96157,9 @@
 					"dev": true
 				},
 				"ipaddr.js": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
-					"integrity": "sha512-LlbxQ7xKzfBusov6UMi4MFpEg0m+mAm9xyNGEduwXMEDuf4WfzB/RZwMVYEd7IKGvh4IUkEXYxtAVu9T3OelJQ==",
+					"version": "2.2.0",
+					"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
+					"integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==",
 					"dev": true
 				},
 				"is-wsl": {
@@ -96066,9 +96214,9 @@
 					}
 				},
 				"ws": {
-					"version": "8.16.0",
-					"resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-					"integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+					"version": "8.17.0",
+					"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
+					"integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
 					"dev": true
 				}
 			}
@@ -96222,11 +96370,6 @@
 				"has-tostringtag": "^1.0.0"
 			}
 		},
-		"wicg-inert": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/wicg-inert/-/wicg-inert-3.1.2.tgz",
-			"integrity": "sha512-Ba9tGNYxXwaqKEi9sJJvPMKuo063umUPsHN0JJsjrs2j8KDSzkWLMZGZ+MH1Jf1Fq4OWZ5HsESJID6nRza2ang=="
-		},
 		"wide-align": {
 			"version": "1.1.5",
 			"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
@@ -96368,6 +96511,12 @@
 				}
 			}
 		},
+		"word-wrap": {
+			"version": "1.2.5",
+			"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+			"integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+			"dev": true
+		},
 		"wordwrap": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
diff --git a/package.json b/package.json
index ff76bff3cf07d..dc479f86b8f51 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "18.3.0-rc.1",
+	"version": "18.5.0-rc.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",
@@ -92,8 +92,7 @@
 		"@wordpress/warning": "file:packages/warning",
 		"@wordpress/widgets": "file:packages/widgets",
 		"@wordpress/wordcount": "file:packages/wordcount",
-		"es-module-shims": "^1.8.2",
-		"wicg-inert": "3.1.2"
+		"es-module-shims": "^1.8.2"
 	},
 	"devDependencies": {
 		"@actions/core": "1.9.1",
@@ -137,9 +136,9 @@
 		"@types/npm-package-arg": "6.1.1",
 		"@types/prettier": "2.4.4",
 		"@types/qs": "6.9.7",
-		"@types/react": "18.0.21",
+		"@types/react": "18.3.1",
 		"@types/react-dates": "21.8.3",
-		"@types/react-dom": "18.0.6",
+		"@types/react-dom": "18.3.0",
 		"@types/requestidlecallback": "0.3.4",
 		"@types/semver": "7.3.8",
 		"@types/sprintf-js": "1.1.2",
@@ -185,6 +184,7 @@
 		"caniuse-lite": "1.0.30001579",
 		"chalk": "4.1.1",
 		"change-case": "4.1.2",
+		"client-zip": "^2.4.5",
 		"commander": "9.2.0",
 		"concurrently": "3.5.0",
 		"copy-webpack-plugin": "10.2.0",
@@ -217,7 +217,7 @@
 		"jest-message-util": "29.6.2",
 		"jest-watch-typeahead": "2.2.2",
 		"lerna": "7.1.4",
-		"lint-staged": "10.0.1",
+		"lint-staged": "10.0.2",
 		"make-dir": "3.0.0",
 		"mkdirp": "3.0.1",
 		"mock-match-media": "0.4.2",
@@ -268,15 +268,15 @@
 	"scripts": {
 		"build": "npm run build:packages && wp-scripts build",
 		"build:analyze-bundles": "npm run build -- --webpack-bundle-analyzer",
-		"build:package-types": "node ./bin/packages/validate-typescript-version.js && tsc --build && node ./bin/packages/check-build-type-declaration-files.js",
+		"build:package-types": "node ./bin/packages/validate-typescript-version.js && ( tsc --build || ( echo 'tsc failed. Try cleaning up first: `npm run clean:package-types`'; exit 1 ) ) && node ./bin/packages/check-build-type-declaration-files.js",
 		"prebuild:packages": "npm run clean:packages && lerna run build",
-		"build:packages": "npm run build:package-types && node ./bin/packages/build.js",
+		"build:packages": "npm run --silent build:package-types && node ./bin/packages/build.js",
 		"build:plugin-zip": "bash ./bin/build-plugin-zip.sh",
-		"clean:package-types": "tsc --build --clean",
+		"clean:package-types": "tsc --build --clean && rimraf \"./packages/*/build-types\"",
 		"clean:packages": "rimraf \"./packages/*/@(build|build-module|build-style)\"",
 		"dev": "npm run build:packages && concurrently \"wp-scripts start\" \"npm run dev:packages\"",
 		"dev:packages": "concurrently \"node ./bin/packages/watch.js\" \"tsc --build --watch\"",
-		"distclean": "rimraf node_modules packages/*/node_modules",
+		"distclean": "git clean --force -d -X",
 		"docs:api-ref": "node ./bin/api-docs/update-api-docs.js",
 		"docs:blocks": "node ./bin/api-docs/gen-block-lib-list.js",
 		"docs:build": "npm-run-all docs:gen docs:blocks docs:api-ref docs:theme-ref",
diff --git a/packages/a11y/CHANGELOG.md b/packages/a11y/CHANGELOG.md
index d660609b46f54..6505d2b35579a 100644
--- a/packages/a11y/CHANGELOG.md
+++ b/packages/a11y/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
 ## 3.57.0 (2024-05-02)
 
 ## 3.56.0 (2024-04-19)
diff --git a/packages/a11y/README.md b/packages/a11y/README.md
index 202bbdf0735bc..0f40d9edd010e 100644
--- a/packages/a11y/README.md
+++ b/packages/a11y/README.md
@@ -67,7 +67,7 @@ For context I’ll quote [this article on WordPress.org](https://make.wordpress.
 
 ## Browser support
 
-See <https://make.wordpress.org/design/handbook/design-guide/browser-support/>
+See <https://make.wordpress.org/core/handbook/best-practices/browser-support/>
 
 ## Contributing to this package
 
diff --git a/packages/a11y/package.json b/packages/a11y/package.json
index 2ac495eea2499..7ab67fe4c1623 100644
--- a/packages/a11y/package.json
+++ b/packages/a11y/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/a11y",
-	"version": "3.57.0",
+	"version": "4.0.0",
 	"description": "Accessibility (a11y) utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/annotations/CHANGELOG.md b/packages/annotations/CHANGELOG.md
index cb74ffb7ed766..eb85e84d604f5 100644
--- a/packages/annotations/CHANGELOG.md
+++ b/packages/annotations/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 3.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 2.58.0 (2024-05-16)
+
 ## 2.57.0 (2024-05-02)
 
 ## 2.56.0 (2024-04-19)
diff --git a/packages/annotations/package.json b/packages/annotations/package.json
index 4092aeeecd944..cba00c1591e13 100644
--- a/packages/annotations/package.json
+++ b/packages/annotations/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/annotations",
-	"version": "2.57.0",
+	"version": "3.0.0",
 	"description": "Annotate content in the Gutenberg editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/api-fetch/CHANGELOG.md b/packages/api-fetch/CHANGELOG.md
index af273c9cd9099..6b2495368ee24 100644
--- a/packages/api-fetch/CHANGELOG.md
+++ b/packages/api-fetch/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 7.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 6.55.0 (2024-05-16)
+
 ## 6.54.0 (2024-05-02)
 
 ## 6.53.0 (2024-04-19)
@@ -114,7 +122,7 @@
 
 ### Breaking changes
 
-   `OPTIONS` requests handled by the preloading middleware are now resolved as `window.Response` objects if you explicitly set `parse: false` (for consistency with how GET requests are resolved). They used to be resolved as `Plain Old JavaScript Objects`.
+`OPTIONS` requests handled by the preloading middleware are now resolved as `window.Response` objects if you explicitly set `parse: false` (for consistency with how GET requests are resolved). They used to be resolved as `Plain Old JavaScript Objects`.
 
 ## 5.2.5 (2021-11-07)
 
diff --git a/packages/api-fetch/package.json b/packages/api-fetch/package.json
index 4addcbff90d56..d200edd4d81e4 100644
--- a/packages/api-fetch/package.json
+++ b/packages/api-fetch/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/api-fetch",
-	"version": "6.54.0",
+	"version": "7.0.0",
 	"description": "Utility to make WordPress REST API requests.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/autop/CHANGELOG.md b/packages/autop/CHANGELOG.md
index b209316d90031..a1af20c63ba0b 100644
--- a/packages/autop/CHANGELOG.md
+++ b/packages/autop/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
 ## 3.57.0 (2024-05-02)
 
 ## 3.56.0 (2024-04-19)
diff --git a/packages/autop/package.json b/packages/autop/package.json
index 470c6177f2ee3..7946a728ea22d 100644
--- a/packages/autop/package.json
+++ b/packages/autop/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/autop",
-	"version": "3.57.0",
+	"version": "4.0.0",
 	"description": "WordPress's automatic paragraph functions `autop` and `removep`.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
index 877d75ab6cd8e..53ced4dd01d2b 100644
--- a/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
+++ b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.41.0 (2024-05-16)
+
 ## 4.40.0 (2024-05-02)
 
 ## 4.39.0 (2024-04-19)
diff --git a/packages/babel-plugin-import-jsx-pragma/README.md b/packages/babel-plugin-import-jsx-pragma/README.md
index eb252d501290b..ebc260277b21a 100644
--- a/packages/babel-plugin-import-jsx-pragma/README.md
+++ b/packages/babel-plugin-import-jsx-pragma/README.md
@@ -14,7 +14,7 @@ Install the module to your project using [npm](https://www.npmjs.com/).
 npm install @wordpress/babel-plugin-import-jsx-pragma
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Usage
 
diff --git a/packages/babel-plugin-import-jsx-pragma/package.json b/packages/babel-plugin-import-jsx-pragma/package.json
index d60ef469091a7..fc7c129433908 100644
--- a/packages/babel-plugin-import-jsx-pragma/package.json
+++ b/packages/babel-plugin-import-jsx-pragma/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-plugin-import-jsx-pragma",
-	"version": "4.40.0",
+	"version": "5.0.0",
 	"description": "Babel transform plugin for automatically injecting an import to be used as the pragma for the React JSX Transform plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -24,7 +24,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"index.js"
diff --git a/packages/babel-plugin-makepot/CHANGELOG.md b/packages/babel-plugin-makepot/CHANGELOG.md
index 528d6258b7a43..62a625ec2beeb 100644
--- a/packages/babel-plugin-makepot/CHANGELOG.md
+++ b/packages/babel-plugin-makepot/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 6.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 5.42.0 (2024-05-16)
+
 ## 5.41.0 (2024-05-02)
 
 ## 5.40.0 (2024-04-19)
diff --git a/packages/babel-plugin-makepot/README.md b/packages/babel-plugin-makepot/README.md
index 95f52e55d28f5..3824731e72d84 100644
--- a/packages/babel-plugin-makepot/README.md
+++ b/packages/babel-plugin-makepot/README.md
@@ -21,7 +21,7 @@ Install the module:
 npm install @wordpress/babel-plugin-makepot --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Contributing to this package
 
diff --git a/packages/babel-plugin-makepot/package.json b/packages/babel-plugin-makepot/package.json
index dd914083cbc02..c6f74686e56af 100644
--- a/packages/babel-plugin-makepot/package.json
+++ b/packages/babel-plugin-makepot/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-plugin-makepot",
-	"version": "5.41.0",
+	"version": "6.0.0",
 	"description": "WordPress Babel internationalization (i18n) plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"index.js"
diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md
index b3f84606c6fcf..a59bd0bd795e1 100644
--- a/packages/babel-preset-default/CHANGELOG.md
+++ b/packages/babel-preset-default/CHANGELOG.md
@@ -2,6 +2,17 @@
 
 ## Unreleased
 
+## 8.0.0 (2024-05-31)
+
+### Breaking Changes
+
+**Note** If you're using @wordpress/scripts for building JS scripts to target WordPress 6.5 or earlier, you should not upgrade to this version and continue using @wordpress/babel-preset-default@7.
+
+-   Use React's automatic runtime to transform JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 7.42.0 (2024-05-16)
+
 ## 7.41.0 (2024-05-02)
 
 ## 7.40.0 (2024-04-19)
diff --git a/packages/babel-preset-default/README.md b/packages/babel-preset-default/README.md
index ff98eb4e526e7..945e1137a328f 100644
--- a/packages/babel-preset-default/README.md
+++ b/packages/babel-preset-default/README.md
@@ -12,7 +12,7 @@ Install the module
 npm install @wordpress/babel-preset-default --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ### Usage
 
diff --git a/packages/babel-preset-default/index.js b/packages/babel-preset-default/index.js
index 40f7c31bb3c25..45ec6473be3cb 100644
--- a/packages/babel-preset-default/index.js
+++ b/packages/babel-preset-default/index.js
@@ -75,21 +75,10 @@ module.exports = ( api ) => {
 		],
 		plugins: [
 			require.resolve( '@wordpress/warning/babel-plugin' ),
-			[
-				require.resolve( '@wordpress/babel-plugin-import-jsx-pragma' ),
-				{
-					scopeVariable: 'createElement',
-					scopeVariableFrag: 'Fragment',
-					source: 'react',
-					isDefault: false,
-				},
-			],
 			[
 				require.resolve( '@babel/plugin-transform-react-jsx' ),
 				{
-					pragma: 'createElement',
-					pragmaFrag: 'Fragment',
-					useSpread: true,
+					runtime: 'automatic',
 				},
 			],
 			maybeGetPluginTransformRuntime(),
diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json
index d8ceef3011dce..e6d8f163b253f 100644
--- a/packages/babel-preset-default/package.json
+++ b/packages/babel-preset-default/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-preset-default",
-	"version": "7.41.0",
+	"version": "8.0.0",
 	"description": "Default Babel preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"build",
@@ -35,7 +36,6 @@
 		"@babel/preset-env": "^7.16.0",
 		"@babel/preset-typescript": "^7.16.0",
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma",
 		"@wordpress/browserslist-config": "file:../browserslist-config",
 		"@wordpress/warning": "file:../warning",
 		"browserslist": "^4.21.10",
diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md
index c4db95ca03eed..51e71a7555b8b 100644
--- a/packages/base-styles/CHANGELOG.md
+++ b/packages/base-styles/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.49.0 (2024-05-16)
+
 ## 4.48.0 (2024-05-02)
 
 ## 4.47.0 (2024-04-19)
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index a1de82c2081cc..8c056905e64d8 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -284,9 +284,8 @@
 			display: inline-block;
 			vertical-align: middle;
 			width: 16px;
-			/* stylelint-disable */
+			/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
 			font: normal 30px/1 dashicons;
-			/* stylelint-enable */
 			speak: none;
 			-webkit-font-smoothing: antialiased;
 			-moz-osx-font-smoothing: grayscale;
@@ -317,10 +316,14 @@
 	border-radius: $radius-round;
 	width: $radio-input-size-sm;
 	height: $radio-input-size-sm;
+	min-width: $radio-input-size-sm;
+	max-width: $radio-input-size-sm;
 
 	@include break-small() {
 		height: $radio-input-size;
 		width: $radio-input-size;
+		min-width: $radio-input-size;
+		max-width: $radio-input-size;
 	}
 
 	&:checked::before {
@@ -518,12 +521,9 @@
 
 // Deprecated from UI, kept for back-compat.
 @mixin gradient-colors-deprecated() {
-	/*
-	 * Our classes uses the same values we set for gradient value attributes,
-	 * and we can not use spacing because of WP multi site kses rule.
-	 */
+	// Our classes uses the same values we set for gradient value attributes.
 
-	/* stylelint-disable function-comma-space-after */
+	/* stylelint-disable 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%);
 	}
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 1191c16670ba1..0ce90bec9c097 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -10,8 +10,7 @@ $z-layers: (
 	".block-library-classic__toolbar": 31, // When scrolled to top this toolbar needs to sit over block-editor-block-toolbar
 	".block-editor-block-list__block-selection-button": 22,
 	".components-form-toggle__input": 1,
-	".edit-post-text-editor__toolbar": 1,
-	".edit-site-code-editor__toolbar": 1,
+	".editor-text-editor__toolbar": 1,
 
 	// These next three share a stacking context
 	".block-library-template-part__selection-search": 2, // higher sticky element
@@ -29,7 +28,6 @@ $z-layers: (
 	".block-editor-warning": 5,
 	".block-library-gallery-item__inline-menu": 20,
 	".block-editor-url-input__suggestions": 30,
-	".edit-post-layout__footer": 30,
 	".interface-interface-skeleton__header": 30,
 	".interface-interface-skeleton__content": 20,
 	".edit-widgets-header": 30,
@@ -87,13 +85,12 @@ $z-layers: (
 	// Show sidebar above wp-admin navigation bar for mobile viewports:
 	// #wpadminbar { z-index: 99999 }
 	".interface-interface-skeleton__sidebar": 100000,
-	".edit-post-layout__toggle-sidebar-panel": 100000,
 	".editor-layout__toggle-sidebar-panel": 100000,
 	".edit-widgets-sidebar": 100000,
-	".edit-post-layout .edit-post-post-publish-panel": 100001,
+	".editor-post-publish-panel": 100001,
 	// For larger views, the wp-admin navbar dropdown should be at top of
 	// the Publish Post sidebar.
-	".edit-post-layout .edit-post-post-publish-panel {greater than small}": 99998,
+	".editor-post-publish-panel {greater than small}": 99998,
 
 	// For larger views, the wp-admin navbar dropdown should be on top of
 	// the multi-entity saving sidebar.
@@ -126,7 +123,7 @@ $z-layers: (
 	// Should be above the popover (dropdown)
 	".reusable-blocks-menu-items__convert-modal": 1000001,
 	".patterns-menu-items__convert-modal": 1000001,
-	".edit-site-create-template-part-modal": 1000001,
+	".editor-create-template-part-modal": 1000001,
 	".block-editor-block-lock-modal": 1000001,
 	".block-editor-template-part__selection-modal": 1000001,
 	".block-editor-block-rename-modal": 1000001,
@@ -195,7 +192,6 @@ $z-layers: (
 	".edit-site-layout__hub": 3,
 	".edit-site-page-header": 2,
 	".edit-site-page-content": 1,
-	".edit-site-patterns__header": 2,
 	".edit-site-patterns__dataviews-list-pagination": 2,
 	".edit-site-templates__dataviews-list-pagination": 2,
 	".edit-site-layout__canvas-container": 2,
@@ -205,10 +201,13 @@ $z-layers: (
 	".edit-site-sidebar-navigation-screen__title-icon": 1,
 
 	// Ensure modal footer actions appear above modal contents
-	".edit-site-start-template-options__modal__actions": 1,
+	".editor-start-template-options__modal__actions": 1,
 
 	// Ensure checkbox + actions don't overlap table header
 	".dataviews-view-table thead": 1,
+
+	// Ensure quick actions toolbar appear above pagination
+	".dataviews-bulk-actions": 2,
 );
 
 @function z-index( $key ) {
diff --git a/packages/base-styles/package.json b/packages/base-styles/package.json
index 17817fd9aea24..690cd2ea76551 100644
--- a/packages/base-styles/package.json
+++ b/packages/base-styles/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/base-styles",
-	"version": "4.48.0",
+	"version": "5.0.0",
 	"description": "Base SCSS utilities and variables for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,6 +20,10 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
 	"publishConfig": {
 		"access": "public"
 	}
diff --git a/packages/blob/CHANGELOG.md b/packages/blob/CHANGELOG.md
index 5cafe71e013c9..50b6143dfb3e6 100644
--- a/packages/blob/CHANGELOG.md
+++ b/packages/blob/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
 ## 3.57.0 (2024-05-02)
 
 ## 3.56.0 (2024-04-19)
diff --git a/packages/blob/package.json b/packages/blob/package.json
index 4295232c2731f..a6ea4525b3d37 100644
--- a/packages/blob/package.json
+++ b/packages/blob/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/blob",
-	"version": "3.57.0",
+	"version": "4.0.0",
 	"description": "Blob utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/block-directory/CHANGELOG.md b/packages/block-directory/CHANGELOG.md
index 2a0743bac6a3f..eca5759aba1f1 100644
--- a/packages/block-directory/CHANGELOG.md
+++ b/packages/block-directory/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.35.0 (2024-05-16)
+
 ## 4.34.0 (2024-05-02)
 
 ## 4.33.0 (2024-04-19)
diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json
index 7cd64958fca41..adefc0e827eda 100644
--- a/packages/block-directory/package.json
+++ b/packages/block-directory/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-directory",
-	"version": "4.34.0",
+	"version": "5.0.0",
 	"description": "Extend editor with block directory features to search, download and install blocks.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
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 2dc01184bdeb4..075fed360c14c 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
@@ -42,6 +42,7 @@ export default function InstallButton( { attributes, block, clientId } ) {
 					}
 				} )
 			}
+			__experimentalIsFocusable
 			disabled={ isInstallingBlock }
 			isBusy={ isInstallingBlock }
 			variant="primary"
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 3db126ca2de34..7127bddacb828 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 13.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 12.26.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
 ## 12.25.0 (2024-05-02)
 
 ## 12.24.0 (2024-04-19)
@@ -20,7 +32,7 @@
 
 ## 12.18.0 (2024-01-24)
 
-- Deprecated `__experimentalRecursionProvider` and `__experimentalUseHasRecursion` in favor of their new stable counterparts `RecursionProvider` and `useHasRecursion`.
+-   Deprecated `__experimentalRecursionProvider` and `__experimentalUseHasRecursion` in favor of their new stable counterparts `RecursionProvider` and `useHasRecursion`.
 
 ## 12.17.0 (2024-01-10)
 
@@ -251,8 +263,8 @@
 
 ### Breaking Changes
 
--   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/.
--   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/.
+-   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at <https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/>.
+-   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at <https://nodejs.org/en/about/releases/>.
 
 ## 5.3.0 (2021-03-17)
 
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 6ac825da4925e..7c70473430b31 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -66,7 +66,7 @@ registerCoreBlocks();
 
 Any components in this package that have a counterpart in [@wordpress/components](/packages/components/README.md) are an extension of those components.
 
-Unless you're [creating an editor](docs/how-to-guides/platform/custom-block-editor/README.md), it is recommended that the components in @wordpress/components should be used rather than the ones in this package as these components have been customized for use in an editor and may result in unexpected behaviour if used outside of this context.
+Unless you're [creating an editor](/docs/how-to-guides/platform/custom-block-editor.md), it is recommended that the components in @wordpress/components should be used rather than the ones in this package as these components have been customized for use in an editor and may result in unexpected behaviour if used outside of this context.
 
 <!-- START TOKEN(Autogenerated API docs) -->
 
@@ -207,6 +207,12 @@ _Related_
 
 Undocumented declaration.
 
+### BlockPopover
+
+_Related_
+
+-   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-popover/README.md>
+
 ### BlockPreview
 
 BlockPreview renders a preview of a block or array of blocks.
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 3bfdd48fd9137..bcbe777cedaa9 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.25.0",
+	"version": "13.0.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -65,7 +66,7 @@
 		"@wordpress/warning": "file:../warning",
 		"@wordpress/wordcount": "file:../wordcount",
 		"change-case": "^4.1.2",
-		"classnames": "^2.3.1",
+		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"deepmerge": "^4.3.0",
 		"diff": "^4.0.2",
diff --git a/packages/block-editor/src/components/alignment-control/test/index.js b/packages/block-editor/src/components/alignment-control/test/index.js
index de72e92489be3..178ba294127c3 100644
--- a/packages/block-editor/src/components/alignment-control/test/index.js
+++ b/packages/block-editor/src/components/alignment-control/test/index.js
@@ -133,7 +133,7 @@ describe( 'AlignmentUI', () => {
 		const { container } = render(
 			<AlignmentUI
 				isToolbar
-				value={ 'custom-right' }
+				value="custom-right"
 				onChange={ onChangeSpy }
 				isCollapsed={ false }
 				alignmentControls={ [
diff --git a/packages/components/src/mobile/audio-player/audio-url-parser.native.js b/packages/block-editor/src/components/audio-player/audio-url-parser.native.js
similarity index 100%
rename from packages/components/src/mobile/audio-player/audio-url-parser.native.js
rename to packages/block-editor/src/components/audio-player/audio-url-parser.native.js
diff --git a/packages/components/src/mobile/audio-player/index.native.js b/packages/block-editor/src/components/audio-player/index.native.js
similarity index 96%
rename from packages/components/src/mobile/audio-player/index.native.js
rename to packages/block-editor/src/components/audio-player/index.native.js
index c5d7c0e8132c1..bee31ea5872ef 100644
--- a/packages/components/src/mobile/audio-player/index.native.js
+++ b/packages/block-editor/src/components/audio-player/index.native.js
@@ -14,7 +14,7 @@ import { default as VideoPlayer } from 'react-native-video';
  * WordPress dependencies
  */
 import { View } from '@wordpress/primitives';
-import { Icon, useEditorColorScheme } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { audio, warning } from '@wordpress/icons';
@@ -30,6 +30,7 @@ import { useState } from '@wordpress/element';
  */
 import styles from './styles.scss';
 import { parseAudioUrl } from './audio-url-parser.native';
+import { useEditorColorScheme } from '../global-styles/use-global-styles-context';
 
 const isIOS = Platform.OS === 'ios';
 
@@ -182,7 +183,7 @@ function Player( {
 				{ ! isDisabled && (
 					<TouchableWithoutFeedback
 						accessibilityLabel={ __( 'Audio Player' ) }
-						accessibilityRole={ 'button' }
+						accessibilityRole="button"
 						accessibilityHint={ __(
 							'Double tap to listen the audio file'
 						) }
@@ -203,7 +204,7 @@ function Player( {
 							this.player = ref;
 						} }
 						controls={ false }
-						ignoreSilentSwitch={ 'ignore' }
+						ignoreSilentSwitch="ignore"
 						onFullscreenPlayerWillPresent={ () => {
 							setPaused( false );
 						} }
diff --git a/packages/components/src/mobile/audio-player/styles.scss b/packages/block-editor/src/components/audio-player/styles.native.scss
similarity index 100%
rename from packages/components/src/mobile/audio-player/styles.scss
rename to packages/block-editor/src/components/audio-player/styles.native.scss
diff --git a/packages/components/src/mobile/audio-player/test/audio-url-parser.native.js b/packages/block-editor/src/components/audio-player/test/audio-url-parser.native.js
similarity index 100%
rename from packages/components/src/mobile/audio-player/test/audio-url-parser.native.js
rename to packages/block-editor/src/components/audio-player/test/audio-url-parser.native.js
diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js
index 2b3c883dfc367..b34f8eea93615 100644
--- a/packages/block-editor/src/components/block-actions/index.js
+++ b/packages/block-editor/src/components/block-actions/index.js
@@ -31,10 +31,12 @@ export default function BlockActions( {
 				getDirectInsertBlock,
 				canMoveBlocks,
 				canRemoveBlocks,
+				getBlockEditingMode,
 			} = select( blockEditorStore );
 
 			const blocks = getBlocksByClientId( clientIds );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+			const rootBlockEditingMode = getBlockEditingMode( rootClientId );
 			const canInsertDefaultBlock = canInsertBlockType(
 				getDefaultBlockName(),
 				rootClientId
@@ -46,7 +48,9 @@ export default function BlockActions( {
 			return {
 				canMove: canMoveBlocks( clientIds, rootClientId ),
 				canRemove: canRemoveBlocks( clientIds, rootClientId ),
-				canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
+				canInsertBlock:
+					( canInsertDefaultBlock || !! directInsertBlock ) &&
+					rootBlockEditingMode === 'default',
 				canCopyStyles: blocks.every( ( block ) => {
 					return (
 						!! block &&
diff --git a/packages/block-editor/src/components/block-alignment-control/ui.js b/packages/block-editor/src/components/block-alignment-control/ui.js
index 9356e59ef465a..b1762547bb815 100644
--- a/packages/block-editor/src/components/block-alignment-control/ui.js
+++ b/packages/block-editor/src/components/block-alignment-control/ui.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -85,7 +85,7 @@ function BlockAlignmentUI( {
 												key={ controlName }
 												icon={ icon }
 												iconPosition="left"
-												className={ classNames(
+												className={ clsx(
 													'components-dropdown-menu__menu-item',
 													{
 														'is-active': isSelected,
diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
index 4b2d3df725a66..bc04593f7ed2a 100644
--- a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
+++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js
@@ -1,19 +1,134 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarItem, ToolbarGroup, Icon } from '@wordpress/components';
-import { connection } from '@wordpress/icons';
-import { _x } from '@wordpress/i18n';
+import { useId } from '@wordpress/element';
+import { __, sprintf, _x } from '@wordpress/i18n';
+import {
+	DropdownMenu,
+	ToolbarGroup,
+	ToolbarItem,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { copy } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import BlockIcon from '../block-icon';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
+
+export default function BlockBindingsToolbarIndicator( { clientIds } ) {
+	const isSingleBlockSelected = clientIds.length === 1;
+	const { icon, firstBlockName, isConnectedToPatternOverrides } = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getBlockNamesByClientId,
+				getBlocksByClientId,
+			} = select( blockEditorStore );
+			const { getBlockType, getActiveBlockVariation } =
+				select( blocksStore );
+			const blockTypeNames = getBlockNamesByClientId( clientIds );
+			const _firstBlockTypeName = blockTypeNames[ 0 ];
+			const firstBlockType = getBlockType( _firstBlockTypeName );
+			let _icon;
+			if ( isSingleBlockSelected ) {
+				const match = getActiveBlockVariation(
+					_firstBlockTypeName,
+					getBlockAttributes( clientIds[ 0 ] )
+				);
+				// Take into account active block variations.
+				_icon = match?.icon || firstBlockType.icon;
+			} else {
+				const isSelectionOfSameType =
+					new Set( blockTypeNames ).size === 1;
+				// When selection consists of blocks of multiple types, display an
+				// appropriate icon to communicate the non-uniformity.
+				_icon = isSelectionOfSameType ? firstBlockType.icon : copy;
+			}
+
+			return {
+				icon: _icon,
+				firstBlockName: getBlockAttributes( clientIds[ 0 ] ).metadata
+					.name,
+				isConnectedToPatternOverrides: getBlocksByClientId(
+					clientIds
+				).some( ( block ) =>
+					Object.values( block?.attributes.metadata?.bindings ).some(
+						( binding ) =>
+							binding.source === 'core/pattern-overrides'
+					)
+				),
+			};
+		},
+		[ clientIds, isSingleBlockSelected ]
+	);
+	const firstBlockTitle = useBlockDisplayTitle( {
+		clientId: clientIds[ 0 ],
+		maximumLength: 35,
+	} );
+
+	let blockDescription = isSingleBlockSelected
+		? _x(
+				'This block is connected.',
+				'block toolbar button label and description'
+		  )
+		: _x(
+				'These blocks are connected.',
+				'block toolbar button label and description'
+		  );
+	if ( isConnectedToPatternOverrides && firstBlockName ) {
+		blockDescription = isSingleBlockSelected
+			? sprintf(
+					/* translators: %1s: The block type's name; %2s: The block's user-provided name (the same as the override name). */
+					__( 'This %1$s is editable using the "%2$s" override.' ),
+					firstBlockTitle.toLowerCase(),
+					firstBlockName
+			  )
+			: __( 'These blocks are editable using overrides.' );
+	}
+	const descriptionId = useId();
 
-export default function BlockBindingsToolbarIndicator() {
 	return (
 		<ToolbarGroup>
-			<ToolbarItem
-				as={ 'div' }
-				aria-label={ _x( 'Connected', 'block toolbar button label' ) }
-				className="block-editor-block-bindings-toolbar-indicator"
-			>
-				<Icon icon={ connection } size={ 24 } />
+			<ToolbarItem>
+				{ ( toggleProps ) => (
+					<DropdownMenu
+						className="block-editor-block-bindings-toolbar-indicator"
+						label={ firstBlockTitle }
+						popoverProps={ {
+							placement: 'bottom-start',
+							className:
+								'block-editor-block-bindings-toolbar-indicator__popover',
+						} }
+						icon={
+							<>
+								<BlockIcon
+									icon={ icon }
+									className="block-editor-block-bindings-toolbar-indicator-icon"
+									showColors
+								/>
+							</>
+						}
+						toggleProps={ {
+							describedBy: blockDescription,
+							...toggleProps,
+						} }
+						menuProps={ {
+							orientation: 'both',
+							'aria-describedby': descriptionId,
+						} }
+					>
+						{ () => (
+							<Text id={ descriptionId }>
+								{ blockDescription }
+							</Text>
+						) }
+					</DropdownMenu>
+				) }
 			</ToolbarItem>
 		</ToolbarGroup>
 	);
diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
index 4565473ec95eb..f37276290ca71 100644
--- a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
+++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss
@@ -1,11 +1,10 @@
-.block-editor-block-bindings-toolbar-indicator {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding: 6px;
-	svg {
-		fill: var(--wp-block-synced-color);
-	}
+.block-editor-block-bindings-toolbar-indicator__popover .components-popover__content {
+	min-width: 260px;
+	padding: $grid-unit-20;
+}
+
+.block-editor-block-bindings-toolbar-indicator .block-editor-block-bindings-toolbar-indicator-icon.has-colors svg {
+	fill: var(--wp-block-synced-color);
 }
 
 .editor-collapsible-block-toolbar .block-editor-block-bindings-toolbar-indicator {
diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
index 6ec97bfb38853..4317672319544 100644
--- a/packages/block-editor/src/components/block-canvas/style.scss
+++ b/packages/block-editor/src/components/block-canvas/style.scss
@@ -3,9 +3,5 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	background-color: $gray-300;
-}
-
-
-iframe[name="editor-canvas"].has-editor-padding {
-	padding: $grid-unit-30 $grid-unit-30 0;
+	box-sizing: border-box;
 }
diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
index 4b5478485d87a..8196f7688d4b5 100644
--- a/packages/block-editor/src/components/block-card/index.js
+++ b/packages/block-editor/src/components/block-card/index.js
@@ -1,13 +1,17 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import deprecated from '@wordpress/deprecated';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { __, isRTL } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -45,7 +49,7 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 	const { selectBlock } = useDispatch( blockEditorStore );
 
 	return (
-		<div className={ classnames( 'block-editor-block-card', className ) }>
+		<div className={ clsx( 'block-editor-block-card', className ) }>
 			{ parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
 				<Button
 					onClick={ () => selectBlock( parentNavBlockClientId ) }
@@ -60,14 +64,14 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 				/>
 			) }
 			<BlockIcon icon={ icon } showColors />
-			<div className="block-editor-block-card__content">
+			<VStack spacing={ 1 }>
 				<h2 className="block-editor-block-card__title">{ title }</h2>
 				{ description && (
-					<span className="block-editor-block-card__description">
+					<Text className="block-editor-block-card__description">
 						{ description }
-					</span>
+					</Text>
 				) }
-			</div>
+			</VStack>
 		</div>
 	);
 }
diff --git a/packages/block-editor/src/components/block-card/style.scss b/packages/block-editor/src/components/block-card/style.scss
index 9cd45c7e98296..42cf77aa4b0a8 100644
--- a/packages/block-editor/src/components/block-card/style.scss
+++ b/packages/block-editor/src/components/block-card/style.scss
@@ -5,10 +5,6 @@
 	padding: $grid-unit-20;
 }
 
-.block-editor-block-card__content {
-	flex-grow: 1;
-}
-
 .block-editor-block-card__title {
 	font-weight: 500;
 
@@ -20,13 +16,6 @@
 	}
 }
 
-.block-editor-block-card__description {
-	display: block;
-	font-size: $default-font-size;
-	line-height: $default-line-height;
-	margin-top: $grid-unit-05;
-}
-
 .block-editor-block-card .block-editor-block-icon {
 	flex: 0 0 $button-size-small;
 	margin-left: 0;
diff --git a/packages/block-editor/src/components/block-compare/index.js b/packages/block-editor/src/components/block-compare/index.js
index 46454f82a070d..4b9b6db596864 100644
--- a/packages/block-editor/src/components/block-compare/index.js
+++ b/packages/block-editor/src/components/block-compare/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 // diff doesn't tree-shake correctly, so we import from the individual
 // module here, to avoid including too much of the library
 import { diffChars } from 'diff/lib/diff/character';
@@ -28,7 +28,7 @@ function BlockCompare( {
 		const difference = diffChars( originalContent, newContent );
 
 		return difference.map( ( item, pos ) => {
-			const classes = classnames( {
+			const classes = clsx( {
 				'block-editor-block-compare__added': item.added,
 				'block-editor-block-compare__removed': item.removed,
 			} );
diff --git a/packages/block-editor/src/components/block-content-overlay/content.scss b/packages/block-editor/src/components/block-content-overlay/content.scss
index 41ed71e0b4c27..088ae40940d40 100644
--- a/packages/block-editor/src/components/block-content-overlay/content.scss
+++ b/packages/block-editor/src/components/block-content-overlay/content.scss
@@ -1,46 +1,13 @@
 .block-editor-block-list__block.has-block-overlay {
 	cursor: default;
 
-	&::before {
-		content: "";
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: transparent;
-		border: none;
-		border-radius: $radius-block-ui;
-		z-index: z-index(".block-editor-block-list__block.has-block-overlay");
-	}
-
-	&:not(.is-multi-selected)::after {
-		content: none !important;
-	}
-
-	&:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before {
-		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
-	}
-
-	&.is-reusable:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before,
-	&.wp-block-template-part:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before {
-		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
-		box-shadow: 0 0 0 $border-width var(--wp-block-synced-color) inset;
-	}
-
-	&.is-selected:not(.is-dragging-blocks)::before {
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
-	}
-
 	.block-editor-block-list__block {
 		pointer-events: none;
 	}
 
-	.block-editor-iframe__body.is-zoomed-out &::before {
-		// Unfortunately because of the vw unit, this is not always going to be exact
-		// When the scrollbar is visible, the frame exceeds the canvas by a few pixels.
-		width: calc(100vw);
-		left: calc(( 100% - 100vw ) / 2);
+	.block-editor-block-list__block.has-block-overlay::before {
+		left: 0;
+		right: 0;
+		width: auto;
 	}
 }
diff --git a/packages/block-editor/src/components/block-draggable/test/helpers.native.js b/packages/block-editor/src/components/block-draggable/test/helpers.native.js
index fa87543dba439..eb0689c13cfa1 100644
--- a/packages/block-editor/src/components/block-draggable/test/helpers.native.js
+++ b/packages/block-editor/src/components/block-draggable/test/helpers.native.js
@@ -108,11 +108,11 @@ export const initializeWithBlocksLayouts = async ( blocks ) => {
 /**
  * Fires long-press gesture event on a block.
  *
- * @param {HTMLElement} block                  Block test instance.
- * @param {string}      testID                 Id for querying the draggable trigger element.
- * @param {Object}      [options]              Configuration options for the gesture event.
- * @param {boolean}     [options.failed]       Determines if the gesture should fail.
- * @param {number}      [options.triggerIndex] In case there are multiple draggable triggers, this specifies the index to use.
+ * @param {import('react-test-renderer').ReactTestInstance} block                  Block test instance.
+ * @param {string}                                          testID                 Id for querying the draggable trigger element.
+ * @param {Object}                                          [options]              Configuration options for the gesture event.
+ * @param {boolean}                                         [options.failed]       Determines if the gesture should fail.
+ * @param {number}                                          [options.triggerIndex] In case there are multiple draggable triggers, this specifies the index to use.
  */
 export const fireLongPress = (
 	block,
@@ -140,8 +140,8 @@ export const fireLongPress = (
 /**
  * Fires pan gesture event on a BlockDraggable component.
  *
- * @param {HTMLElement} blockDraggable BlockDraggable test instance.
- * @param {Object}      [touchEvents]  Array of touch events to dispatch on the pan gesture.
+ * @param {import('react-test-renderer').ReactTestInstance} blockDraggable BlockDraggable test instance.
+ * @param {Object}                                          [touchEvents]  Array of touch events to dispatch on the pan gesture.
  */
 export const firePanGesture = (
 	blockDraggable,
@@ -169,7 +169,7 @@ export const firePanGesture = (
  *
  * @param {import('@testing-library/react-native').RenderAPI} screen The Testing Library screen.
  *
- * @return {HTMLElement} Draggable chip test instance.
+ * @return {import('react-test-renderer').ReactTestInstance} Draggable chip test instance.
  */
 export const getDraggableChip = ( { getByTestId } ) => {
 	let draggableChip;
diff --git a/packages/block-editor/src/components/block-edit/edit.js b/packages/block-editor/src/components/block-edit/edit.js
index 31344b5433793..83d0e3f406f82 100644
--- a/packages/block-editor/src/components/block-edit/edit.js
+++ b/packages/block-editor/src/components/block-edit/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -75,7 +75,7 @@ const EditWithGeneratedProps = ( props ) => {
 	const generatedClassName = hasBlockSupport( blockType, 'className', true )
 		? getBlockDefaultClassName( name )
 		: null;
-	const className = classnames(
+	const className = clsx(
 		generatedClassName,
 		attributes.className,
 		props.className
diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js
index 57df36c7c74a0..0c29c0e98b1bf 100644
--- a/packages/block-editor/src/components/block-edit/index.js
+++ b/packages/block-editor/src/components/block-edit/index.js
@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
-
+import { useMemo, useContext } from '@wordpress/element';
 import { hasBlockSupport } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
@@ -17,6 +17,8 @@ import {
 	blockBindingsKey,
 	isPreviewModeKey,
 } from './context';
+import { MultipleUsageWarning } from './multiple-usage-warning';
+import { PrivateBlockContext } from '../block-list/private-block-context';
 
 /**
  * The `useBlockEditContext` hook provides information about the block this hook is being used in.
@@ -49,6 +51,8 @@ export default function BlockEdit( {
 	const layoutSupport =
 		hasBlockSupport( name, 'layout', false ) ||
 		hasBlockSupport( name, '__experimentalLayout', false );
+	const { originalBlockClientId } = useContext( PrivateBlockContext );
+
 	return (
 		<BlockEditContextProvider
 			// It is important to return the same object if props haven't
@@ -85,6 +89,13 @@ export default function BlockEdit( {
 			) }
 		>
 			<Edit { ...props } />
+			{ originalBlockClientId && (
+				<MultipleUsageWarning
+					originalBlockClientId={ originalBlockClientId }
+					name={ name }
+					onReplace={ props.onReplace }
+				/>
+			) }
 		</BlockEditContextProvider>
 	);
 }
diff --git a/packages/block-editor/src/components/block-edit/multiple-usage-warning.js b/packages/block-editor/src/components/block-edit/multiple-usage-warning.js
new file mode 100644
index 0000000000000..4acd4d1f349dd
--- /dev/null
+++ b/packages/block-editor/src/components/block-edit/multiple-usage-warning.js
@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockType } from '@wordpress/blocks';
+import { Button } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import Warning from '../warning';
+
+export function MultipleUsageWarning( {
+	originalBlockClientId,
+	name,
+	onReplace,
+} ) {
+	const { selectBlock } = useDispatch( blockEditorStore );
+	const blockType = getBlockType( name );
+
+	return (
+		<Warning
+			actions={ [
+				<Button
+					key="find-original"
+					variant="secondary"
+					onClick={ () => selectBlock( originalBlockClientId ) }
+				>
+					{ __( 'Find original' ) }
+				</Button>,
+				<Button
+					key="remove"
+					variant="secondary"
+					onClick={ () => onReplace( [] ) }
+				>
+					{ __( 'Remove' ) }
+				</Button>,
+			] }
+		>
+			<strong>{ blockType?.title }: </strong>
+			{ __( 'This block can only be used once.' ) }
+		</Warning>
+	);
+}
diff --git a/packages/block-editor/src/components/block-icon/index.js b/packages/block-editor/src/components/block-icon/index.js
index 58d7b3a04adb9..023a903d39cb6 100644
--- a/packages/block-editor/src/components/block-icon/index.js
+++ b/packages/block-editor/src/components/block-icon/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -30,7 +30,7 @@ function BlockIcon( { icon, showColors = false, className, context } ) {
 	return (
 		<span
 			style={ style }
-			className={ classnames( 'block-editor-block-icon', className, {
+			className={ clsx( 'block-editor-block-icon', className, {
 				'has-colors': showColors,
 			} ) }
 		>
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 1fa6c3ea507d9..e01cd09575269 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -95,7 +95,8 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			blockType: _blockType,
 			topLevelLockedBlock:
 				getContentLockingParent( _selectedBlockClientId ) ||
-				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly'
+				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly' ||
+				_selectedBlockName === 'core/block'
 					? _selectedBlockClientId
 					: undefined ),
 		};
@@ -110,10 +111,8 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 	// displays based on the relationship between the selected block
 	// and its parent, and only enable it if the parent is controlling
 	// its children blocks.
-	const blockInspectorAnimationSettings = useBlockInspectorAnimationSettings(
-		blockType,
-		selectedBlockClientId
-	);
+	const blockInspectorAnimationSettings =
+		useBlockInspectorAnimationSettings( blockType );
 
 	const borderPanelLabel = useBorderPanelLabel( {
 		blockName: selectedBlockName,
diff --git a/packages/block-editor/src/components/block-inspector/useBlockInspectorAnimationSettings.js b/packages/block-editor/src/components/block-inspector/useBlockInspectorAnimationSettings.js
index 6be7d3fe18667..d89639c4b9ac8 100644
--- a/packages/block-editor/src/components/block-inspector/useBlockInspectorAnimationSettings.js
+++ b/packages/block-editor/src/components/block-inspector/useBlockInspectorAnimationSettings.js
@@ -8,10 +8,7 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../../store';
 
-export default function useBlockInspectorAnimationSettings(
-	blockType,
-	selectedBlockClientId
-) {
+export default function useBlockInspectorAnimationSettings( blockType ) {
 	return useSelect(
 		( select ) => {
 			if ( blockType ) {
@@ -48,6 +45,6 @@ export default function useBlockInspectorAnimationSettings(
 			}
 			return null;
 		},
-		[ selectedBlockClientId, blockType ]
+		[ blockType ]
 	);
 }
diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index 928f9fc29d170..4c65ead6b4e62 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -76,7 +76,7 @@ export default function BlockListAppender( {
 			//
 			// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
 			tabIndex={ -1 }
-			className={ classnames( 'block-list-appender wp-block', className, {
+			className={ clsx( 'block-list-appender wp-block', className, {
 				'is-drag-over': isDragOver,
 			} ) }
 			// Needed in case the whole editor is content editable (for multi
diff --git a/packages/block-editor/src/components/block-list/block-invalid-warning.native.js b/packages/block-editor/src/components/block-list/block-invalid-warning.native.js
index d27b2e436f296..8734f6f8804f0 100644
--- a/packages/block-editor/src/components/block-list/block-invalid-warning.native.js
+++ b/packages/block-editor/src/components/block-list/block-invalid-warning.native.js
@@ -54,7 +54,7 @@ export default function BlockInvalidWarning( { clientId } ) {
 		<TouchableWithoutFeedback
 			onPress={ attemptBlockRecovery }
 			accessible
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 		>
 			<Warning
 				title={ blockTitle }
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 1a1b77f7cd514..030d08b42ce4d 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -23,6 +23,7 @@ import {
 	isUnmodifiedBlock,
 	isReusableBlock,
 	getBlockDefaultClassName,
+	hasBlockSupport,
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
@@ -64,7 +65,7 @@ function mergeWrapperProps( propsA, propsB ) {
 		propsA?.hasOwnProperty( 'className' ) &&
 		propsB?.hasOwnProperty( 'className' )
 	) {
-		newProps.className = classnames( propsA.className, propsB.className );
+		newProps.className = clsx( propsA.className, propsB.className );
 	}
 
 	if (
@@ -177,7 +178,7 @@ function BlockListBlock( {
 	if ( isAligned ) {
 		blockEdit = (
 			<div
-				className={ classnames( 'wp-block', isSticky && className ) }
+				className={ clsx( 'wp-block', isSticky && className ) }
 				data-align={ wrapperProps[ 'data-align' ] }
 			>
 				{ blockEdit }
@@ -216,12 +217,14 @@ function BlockListBlock( {
 	}
 
 	const { 'data-align': dataAlign, ...restWrapperProps } = wrapperProps ?? {};
-
-	restWrapperProps.className = classnames(
-		restWrapperProps.className,
-		dataAlign && themeSupportsLayout && `align${ dataAlign }`,
-		! ( dataAlign && isSticky ) && className
-	);
+	const updatedWrapperProps = {
+		...restWrapperProps,
+		className: clsx(
+			restWrapperProps.className,
+			dataAlign && themeSupportsLayout && `align${ dataAlign }`,
+			! ( dataAlign && isSticky ) && className
+		),
+	};
 
 	// We set a new context with the adjusted and filtered wrapperProps (through
 	// `editor.BlockListBlock`), which the `BlockListBlockProvider` did not have
@@ -234,7 +237,7 @@ function BlockListBlock( {
 	return (
 		<PrivateBlockContext.Provider
 			value={ {
-				wrapperProps: restWrapperProps,
+				wrapperProps: updatedWrapperProps,
 				isAligned,
 				...context,
 			} }
@@ -262,6 +265,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 		__unstableMarkLastChangeAsPersistent,
 		moveBlocksToPosition,
 		removeBlock,
+		selectBlock,
 	} = dispatch( blockEditorStore );
 
 	// Do not add new properties here, use `useDispatch` instead to avoid
@@ -303,6 +307,28 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 				canInsertBlockType,
 			} = registry.select( blockEditorStore );
 
+			function switchToDefaultOrRemove() {
+				const block = getBlock( clientId );
+				const defaultBlockName = getDefaultBlockName();
+				if ( getBlockName( clientId ) !== defaultBlockName ) {
+					const replacement = switchToBlockType(
+						block,
+						defaultBlockName
+					);
+					if ( replacement && replacement.length ) {
+						replaceBlocks( clientId, replacement );
+					}
+				} else if ( isUnmodifiedDefaultBlock( block ) ) {
+					const nextBlockClientId = getNextBlockClientId( clientId );
+					if ( nextBlockClientId ) {
+						registry.batch( () => {
+							removeBlock( clientId );
+							selectBlock( nextBlockClientId );
+						} );
+					}
+				}
+			}
+
 			/**
 			 * Moves the block with clientId up one level. If the block type
 			 * cannot be inserted at the new location, it will be attempted to
@@ -342,7 +368,16 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 								getDefaultBlockName()
 							);
 
-							if ( replacement && replacement.length ) {
+							if (
+								replacement &&
+								replacement.length &&
+								replacement.every( ( block ) =>
+									canInsertBlockType(
+										block.name,
+										targetRootClientId
+									)
+								)
+							) {
 								insertBlocks(
 									replacement,
 									getBlockIndex( _clientId ),
@@ -350,6 +385,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 									changeSelection
 								);
 								removeBlock( firstClientId, false );
+							} else {
+								switchToDefaultOrRemove();
 							}
 						}
 
@@ -460,16 +497,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					}
 
 					moveFirstItemUp( rootClientId );
-				} else if (
-					getBlockName( clientId ) !== getDefaultBlockName()
-				) {
-					const replacement = switchToBlockType(
-						getBlock( clientId ),
-						getDefaultBlockName()
-					);
-					if ( replacement && replacement.length ) {
-						replaceBlocks( clientId, replacement );
-					}
+				} else {
+					switchToDefaultOrRemove();
 				}
 			}
 		},
@@ -532,6 +561,7 @@ function BlockListBlockProvider( props ) {
 				isFirstMultiSelectedBlock,
 				getMultiSelectedBlockClientIds,
 				hasSelectedInnerBlock,
+				getBlocksByName,
 
 				getBlockIndex,
 				isBlockMultiSelected,
@@ -605,6 +635,17 @@ function BlockListBlockProvider( props ) {
 			const movingClientId = hasBlockMovingClientId();
 			const blockEditingMode = getBlockEditingMode( clientId );
 
+			const multiple = hasBlockSupport( blockName, 'multiple', true );
+
+			// For block types with `multiple` support, there is no "original
+			// block" to be found in the content, as the block itself is valid.
+			const blocksWithSameName = multiple
+				? []
+				: getBlocksByName( blockName );
+			const isInvalid =
+				blocksWithSameName.length &&
+				blocksWithSameName[ 0 ] !== clientId;
+
 			return {
 				...previewContext,
 				mode: getBlockMode( clientId ),
@@ -662,6 +703,9 @@ function BlockListBlockProvider( props ) {
 				hasEditableOutline:
 					blockEditingMode !== 'disabled' &&
 					getBlockEditingMode( rootClientId ) === 'disabled',
+				originalBlockClientId: isInvalid
+					? blocksWithSameName[ 0 ]
+					: false,
 			};
 		},
 		[ clientId, rootClientId ]
@@ -705,6 +749,7 @@ function BlockListBlockProvider( props ) {
 		hasEditableOutline,
 		className,
 		defaultClassName,
+		originalBlockClientId,
 	} = selectedProps;
 
 	// Users of the editor.BlockListBlock filter used to be able to
@@ -752,6 +797,7 @@ function BlockListBlockProvider( props ) {
 		defaultClassName,
 		mayDisplayControls,
 		mayDisplayParentControls,
+		originalBlockClientId,
 		themeSupportsLayout,
 	};
 
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
index 10c550913ca31..f76021b50fc4b 100644
--- a/packages/block-editor/src/components/block-list/block.native.js
+++ b/packages/block-editor/src/components/block-list/block.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Pressable, View } from 'react-native';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -14,13 +14,7 @@ import {
 	useRef,
 	memo,
 } from '@wordpress/element';
-import {
-	GlobalStylesContext,
-	getMergedGlobalStyles,
-	useMobileGlobalStylesColors,
-	useGlobalStyles,
-	withFilters,
-} from '@wordpress/components';
+import { withFilters } from '@wordpress/components';
 import {
 	__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,
 	getBlockType,
@@ -51,6 +45,12 @@ import { useSettings } from '../use-settings';
 import { unlock } from '../../lock-unlock';
 import BlockCrashBoundary from './block-crash-boundary';
 import BlockCrashWarning from './block-crash-warning';
+import {
+	getMergedGlobalStyles,
+	GlobalStylesContext,
+	useGlobalStyles,
+	useMobileGlobalStylesColors,
+} from '../global-styles/use-global-styles-context';
 
 const EMPTY_ARRAY = [];
 
@@ -73,7 +73,7 @@ function mergeWrapperProps( propsA, propsB ) {
 		propsA?.hasOwnProperty( 'className' ) &&
 		propsB?.hasOwnProperty( 'className' )
 	) {
-		newProps.className = classnames( propsA.className, propsB.className );
+		newProps.className = clsx( propsA.className, propsB.className );
 	}
 
 	if (
@@ -669,8 +669,16 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					}
 
 					moveFirstItemUp( rootClientId );
-				} else {
-					removeBlock( clientId );
+				} else if (
+					getBlockName( clientId ) !== getDefaultBlockName()
+				) {
+					const replacement = switchToBlockType(
+						getBlock( clientId ),
+						getDefaultBlockName()
+					);
+					if ( replacement && replacement.length ) {
+						replaceBlocks( clientId, replacement );
+					}
 				}
 			}
 		},
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index 6e65b38310b67..8d55617bea2f9 100644
--- a/packages/block-editor/src/components/block-list/content.scss
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -17,13 +17,26 @@
 	}
 }
 
+@mixin selectedOutline() {
+	content: "";
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	outline-color: var(--wp-admin-theme-color);
+	outline-style: solid;
+	outline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+	outline-offset: calc((-1 * var(--wp-admin-border-width-focus)) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+}
 
 // Hide selections on this element, otherwise Safari will include it stacked
 // under your actual selection.
 // This uses a CSS hack to show the rules to Safari only. Failing here is okay,
 // it just makes the selection indication slightly less precise. That makes this
-// hack a progressive enhancement. Stylelint is disabled to allow the hack to work.
-/* stylelint-disable */
+// hack a progressive enhancement.
+/* stylelint-disable -- Stylelint is disabled to allow the hack to work. */
 _::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection,
 _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-block-list__layout::selection {
 	background-color: transparent;
@@ -39,12 +52,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	position: relative;
 
 	// Block multi selection
-	// Apply a rounded radius to the entire block when multi selected, but with low specificity
-	// so explicit radii set by tools are preserved.
-	&:where(.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)) {
-		border-radius: $radius-block-ui;
-	}
-
 	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
 		// Hide the native selection indicator, for the selection, and children.
 		&::selection,
@@ -64,7 +71,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 			left: 0;
 			background: var(--wp-admin-theme-color);
 			opacity: 0.4;
-			border-radius: $radius-block-ui;
 
 			// Animate.
 			animation: selection-overlay__fade-in-animation 0.1s ease-out;
@@ -77,7 +83,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 
 		// Don't show the highlight focus style when multi selected.
 		&.is-highlighted::after {
-			box-shadow: none;
+			outline-color: transparent;
 		}
 	}
 
@@ -95,21 +101,12 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		// We're using a pseudo element to overflow placeholder borders
 		// and any border inside the block itself.
 		&::after {
-			content: "";
-			position: absolute;
+			@include selectedOutline();
 			z-index: 1;
-			pointer-events: none;
-			top: $border-width;
-			right: $border-width;
-			bottom: $border-width;
-			left: $border-width;
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
-			outline: 2px solid transparent; // This shows up in Windows High Contrast Mode.
 
 			// Show a light color for dark themes.
 			.is-dark-theme & {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
+				outline-color: $dark-theme-focus;
 			}
 		}
 	}
@@ -270,22 +267,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	}
 }
 
-.is-outline-mode .block-editor-block-list__block {
-	&.is-hovered {
-		cursor: default;
-
-		&::after {
-			content: "";
-			position: absolute;
-			pointer-events: none;
-			top: $border-width;
-			left: $border-width;
-			right: $border-width;
-			bottom: $border-width;
-			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui - $border-width;
-		}
-	}
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
 
 	&.is-selected {
 		cursor: default;
@@ -293,17 +275,35 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		&.rich-text {
 			cursor: unset;
 		}
+	}
+
+	&.is-hovered:not(.is-selected),
+	&:not(.rich-text):not([contenteditable="true"]).is-selected {
 
 		&::after {
-			content: "";
-			position: absolute;
-			pointer-events: none;
-			top: $border-width;
-			left: $border-width;
-			right: $border-width;
-			bottom: $border-width;
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui;
+			@include selectedOutline();
+		}
+	}
+}
+
+// Colorize outlines for template parts and synced patterns (.is-reusable).
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable {
+
+	&.is-hovered::after,
+	&.is-selected::after,
+	&.is-highlighted::after {
+		outline-color: var(--wp-block-synced-color);
+	}
+
+	&.block-editor-block-list__block:not([contenteditable]):focus {
+		&::after {
+			outline-color: var(--wp-block-synced-color);
+
+			// Show a light color for dark themes.
+			.is-dark-theme & {
+				outline-color: $dark-theme-focus;
+			}
 		}
 	}
 }
@@ -336,7 +336,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	animation-timing-function: ease-out;
 	animation-delay: 0.1s;
 	animation-fill-mode: backwards;
-	border-radius: $radius-block-ui;
 	bottom: 0;
 	content: "";
 	left: 0;
@@ -385,22 +384,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	z-index: z-index("{core/image aligned left or right} .wp-block");
 }
 
-body.is-zoomed-out {
-	display: flex;
-	flex-direction: column;
-
-	> .is-root-container {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-
-		> main {
-			flex: 1;
-		}
-	}
-}
-
 .wp-site-blocks > [data-align="left"] {
 	float: left;
 	margin-right: 2em;
@@ -493,13 +476,3 @@ body.is-zoomed-out {
 		margin-bottom: auto;
 	}
 }
-
-.block-editor-iframe__html {
-	transform-origin: top center;
-	transition: all 0.3s;
-	@include reduce-motion("transition");
-}
-
-.block-editor-iframe__html[style*="scale"] {
-	background-color: $gray-300;
-}
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index ea9208b562c3a..37dba80511d92 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -111,7 +111,7 @@ function Root( { className, ...settings } ) {
 				useInBetweenInserter(),
 				useTypingObserver(),
 			] ),
-			className: classnames( 'is-root-container', className, {
+			className: clsx( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,
 				'is-focus-mode': isFocusMode && isLargeViewport,
 				'is-navigate-mode': editorMode === 'navigation',
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 ebd36bbc2e970..64e40559bb473 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/index.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -28,6 +28,7 @@ import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
+import { useScrollIntoView } from './use-scroll-into-view';
 import { useFlashEditableBlocks } from '../../use-flash-editable-blocks';
 import { canBindBlock } from '../../../hooks/use-bindings-attributes';
 
@@ -122,6 +123,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			clientId,
 			isEnabled: name === 'core/block' || templateLock === 'contentOnly',
 		} ),
+		useScrollIntoView( { isSelected } ),
 	] );
 
 	const blockEditContext = useBlockEditContext();
@@ -164,7 +166,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		'data-type': name,
 		'data-title': blockTitle,
 		inert: isSubtreeDisabled ? 'true' : undefined,
-		className: classnames(
+		className: clsx(
 			'block-editor-block-list__block',
 			{
 				// The wp-block className is important for editor styles.
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js b/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js
new file mode 100644
index 0000000000000..6301dac2c2108
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useReducedMotion, useRefEffect } from '@wordpress/compose';
+
+export function useScrollIntoView( { isSelected } ) {
+	const prefersReducedMotion = useReducedMotion();
+	return useRefEffect(
+		( node ) => {
+			if ( isSelected ) {
+				const { ownerDocument } = node;
+				const { defaultView } = ownerDocument;
+				if ( ! defaultView.IntersectionObserver ) {
+					return;
+				}
+				const observer = new defaultView.IntersectionObserver(
+					( entries ) => {
+						// Once observing starts, we always get an initial
+						// entry with the intersecting state.
+						if ( ! entries[ 0 ].isIntersecting ) {
+							node.scrollIntoView( {
+								behavior: prefersReducedMotion
+									? 'instant'
+									: 'smooth',
+							} );
+						}
+						observer.disconnect();
+					}
+				);
+				observer.observe( node );
+				return () => {
+					observer.disconnect();
+				};
+			}
+		},
+		[ isSelected ]
+	);
+}
diff --git a/packages/block-editor/src/components/block-mover/button.js b/packages/block-editor/src/components/block-mover/button.js
index f6e8a8f11abea..f8ffc128394df 100644
--- a/packages/block-editor/src/components/block-mover/button.js
+++ b/packages/block-editor/src/components/block-mover/button.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -130,7 +130,7 @@ const BlockMoverButton = forwardRef(
 			<>
 				<Button
 					ref={ ref }
-					className={ classnames(
+					className={ clsx(
 						'block-editor-block-mover-button',
 						`is-${ direction }-button`
 					) }
diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
index 57336d56d4ed9..a143ab391a43f 100644
--- a/packages/block-editor/src/components/block-mover/index.js
+++ b/packages/block-editor/src/components/block-mover/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -64,7 +64,7 @@ function BlockMover( {
 
 	return (
 		<ToolbarGroup
-			className={ classnames( 'block-editor-block-mover', {
+			className={ clsx( 'block-editor-block-mover', {
 				'is-horizontal': orientation === 'horizontal',
 			} ) }
 		>
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 4d2c565f4bfed..b2af3456be7b0 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { useEffect, useState, forwardRef } from '@wordpress/element';
+import { cloneBlock } from '@wordpress/blocks';
+import { useEffect, useState, forwardRef, useMemo } from '@wordpress/element';
 import {
 	VisuallyHidden,
 	Tooltip,
@@ -47,16 +48,38 @@ function BlockPattern( {
 	onHover,
 	showTitle = true,
 	showTooltip,
+	category,
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
 	const { blocks, viewportWidth } = pattern;
 	const instanceId = useInstanceId( BlockPattern );
 	const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;
 
+	// When we have a selected category and the pattern is draggable, we need to update the
+	// pattern's categories in metadata to only contain the selected category, and pass this to
+	// InserterDraggableBlocks component. We do that because we use this information for pattern
+	// shuffling and it makes more sense to show only the ones from the initially selected category during insertion.
+	const patternBlocks = useMemo( () => {
+		if ( ! category || ! isDraggable ) {
+			return blocks;
+		}
+		return ( blocks ?? [] ).map( ( block ) => {
+			const clonedBlock = cloneBlock( block );
+			if (
+				clonedBlock.attributes.metadata?.categories?.includes(
+					category
+				)
+			) {
+				clonedBlock.attributes.metadata.categories = [ category ];
+			}
+			return clonedBlock;
+		} );
+	}, [ blocks, isDraggable, category ] );
+
 	return (
 		<InserterDraggableBlocks
 			isEnabled={ isDraggable }
-			blocks={ blocks }
+			blocks={ patternBlocks }
 			pattern={ pattern }
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
@@ -94,7 +117,7 @@ function BlockPattern( {
 											? descriptionId
 											: undefined
 									}
-									className={ classnames(
+									className={ clsx(
 										'block-editor-block-patterns-list__item',
 										{
 											'block-editor-block-patterns-list__list-item-synced':
@@ -124,7 +147,10 @@ function BlockPattern( {
 							/>
 
 							{ showTitle && (
-								<HStack className="block-editor-patterns__pattern-details">
+								<HStack
+									className="block-editor-patterns__pattern-details"
+									spacing={ 2 }
+								>
 									{ pattern.type ===
 										INSERTER_PATTERN_TYPES.user &&
 										! pattern.syncStatus && (
@@ -173,6 +199,7 @@ function BlockPatternsList(
 		onClickPattern,
 		orientation,
 		label = __( 'Block patterns' ),
+		category,
 		showTitle = true,
 		showTitlesAsTooltip,
 		pagingProps,
@@ -209,6 +236,7 @@ function BlockPatternsList(
 						isDraggable={ isDraggable }
 						showTitle={ showTitle }
 						showTooltip={ showTitlesAsTooltip }
+						category={ category }
 					/>
 				) : (
 					<BlockPatternPlaceholder key={ pattern.name } />
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 d3c54a20956f3..6b23c1e844dad 100644
--- a/packages/block-editor/src/components/block-patterns-list/style.scss
+++ b/packages/block-editor/src/components/block-patterns-list/style.scss
@@ -1,6 +1,6 @@
 .block-editor-block-patterns-list__list-item {
 	cursor: pointer;
-	margin-bottom: $grid-unit-30;
+	margin-bottom: $grid-unit-20;
 
 	// The list item contains absolutely positioned visually hidden text,
 	// so make this container relative. This prevents the bug experienced in
@@ -26,38 +26,41 @@
 	// the bottom margin set on `...__list-item` above
 	scroll-margin-bottom: ($grid-unit-40 + $grid-unit-30);
 
+	.block-editor-block-patterns-list__item-title {
+		flex-grow: 1;
+		font-size: $helptext-font-size;
+		text-align: left;
+	}
+
 	.block-editor-block-preview__container {
 		display: flex;
 		align-items: center;
 		overflow: hidden;
-		border-radius: 4px;
-	}
+		border-radius: $radius-block-ui;
 
-	.block-editor-block-patterns-list__item-title {
-		text-align: left;
-		flex-grow: 1;
-	}
-
-	&:hover .block-editor-block-preview__container {
-		box-shadow: 0 0 0 2px $gray-900;
+		&::after {
+			outline: $border-width solid rgba($black, 0.1);
+			outline-offset: -$border-width;
+			border-radius: $radius-block-ui;
+		}
 	}
 
-	&:focus .block-editor-block-preview__container {
-		@include button-style-outset__focus($gray-900);
+	&:hover:not(:focus) .block-editor-block-preview__container::after {
+		outline-color: rgba($black, 0.3);
 	}
 
-	&.block-editor-block-patterns-list__list-item-synced {
-		&:hover,
-		&:focus {
-			.block-editor-block-preview__container {
-				box-shadow: 0 0 0 2px var(--wp-block-synced-color);
-			}
-		}
+	&:focus .block-editor-block-preview__container::after {
+		outline-color: var(--wp-admin-theme-color);
+		outline-width: var(--wp-admin-border-width-focus);
+		outline-offset: calc((-1 * var(--wp-admin-border-width-focus)));
+		transition: outline 0.1s linear;
+		@include reduce-motion("transition");
 	}
 
-	.block-editor-patterns__pattern-details {
+	.block-editor-patterns__pattern-details:not(:empty) {
 		align-items: center;
 		margin-top: $grid-unit-10;
+		padding-bottom: $grid-unit-05; // Add more space for labels on user-created patterns.
 	}
 
 	.block-editor-patterns__pattern-icon-wrapper {
diff --git a/packages/block-editor/src/components/block-popover/README.md b/packages/block-editor/src/components/block-popover/README.md
index c60da7a982ae8..c50e8c90647f6 100644
--- a/packages/block-editor/src/components/block-popover/README.md
+++ b/packages/block-editor/src/components/block-popover/README.md
@@ -30,7 +30,7 @@ This determines whether the block popover always shifts into the viewport or rem
 -	Required: No
 -	Default: `true`
 
-## BlockPopoverInbetween
+## BlockPopoverInbetween - Private Component
 
 ### Props
 
diff --git a/packages/block-editor/src/components/block-popover/cover.js b/packages/block-editor/src/components/block-popover/cover.js
index 6d2d5b8ce1ac0..caad2ddbb7ec5 100644
--- a/packages/block-editor/src/components/block-popover/cover.js
+++ b/packages/block-editor/src/components/block-popover/cover.js
@@ -7,10 +7,17 @@ import { useEffect, useState, useMemo, forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
-import BlockPopover from '.';
+import { PrivateBlockPopover } from '.';
 
 function BlockPopoverCover(
-	{ clientId, bottomClientId, children, shift = false, ...props },
+	{
+		clientId,
+		bottomClientId,
+		children,
+		shift = false,
+		additionalStyles,
+		...props
+	},
 	ref
 ) {
 	bottomClientId ??= clientId;
@@ -18,7 +25,7 @@ function BlockPopoverCover(
 	const selectedElement = useBlockElement( clientId );
 
 	return (
-		<BlockPopover
+		<PrivateBlockPopover
 			ref={ ref }
 			clientId={ clientId }
 			bottomClientId={ bottomClientId }
@@ -26,17 +33,24 @@ function BlockPopoverCover(
 			{ ...props }
 		>
 			{ selectedElement && clientId === bottomClientId ? (
-				<CoverContainer selectedElement={ selectedElement }>
+				<CoverContainer
+					selectedElement={ selectedElement }
+					additionalStyles={ additionalStyles }
+				>
 					{ children }
 				</CoverContainer>
 			) : (
 				children
 			) }
-		</BlockPopover>
+		</PrivateBlockPopover>
 	);
 }
 
-function CoverContainer( { selectedElement, children } ) {
+function CoverContainer( {
+	selectedElement,
+	additionalStyles = {},
+	children,
+} ) {
 	const [ width, setWidth ] = useState( selectedElement.offsetWidth );
 	const [ height, setHeight ] = useState( selectedElement.offsetHeight );
 
@@ -54,8 +68,9 @@ function CoverContainer( { selectedElement, children } ) {
 			position: 'absolute',
 			width,
 			height,
+			...additionalStyles,
 		};
-	}, [ width, height ] );
+	}, [ width, height, additionalStyles ] );
 
 	return <div style={ style }>{ children }</div>;
 }
diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js
index afc983b1a4196..bc2eaeae0be60 100644
--- a/packages/block-editor/src/components/block-popover/inbetween.js
+++ b/packages/block-editor/src/components/block-popover/inbetween.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -241,7 +241,7 @@ function BlockPopoverInbetween( {
 			// This makes sure the popover doesn't animate from its previous position.
 			key={ nextClientId + '--' + rootClientId }
 			{ ...props }
-			className={ classnames(
+			className={ clsx(
 				'block-editor-block-popover',
 				'block-editor-block-popover__inbetween',
 				props.className
diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js
index d5ac90c68745e..cc8d832c31bc7 100644
--- a/packages/block-editor/src/components/block-popover/index.js
+++ b/packages/block-editor/src/components/block-popover/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -144,10 +144,7 @@ function BlockPopover(
 			flip={ false }
 			shift={ shift }
 			{ ...props }
-			className={ classnames(
-				'block-editor-block-popover',
-				props.className
-			) }
+			className={ clsx( 'block-editor-block-popover', props.className ) }
 			variant="unstyled"
 		>
 			{ children }
@@ -155,4 +152,25 @@ function BlockPopover(
 	);
 }
 
-export default forwardRef( BlockPopover );
+export const PrivateBlockPopover = forwardRef( BlockPopover );
+
+const PublicBlockPopover = (
+	{ clientId, bottomClientId, children, ...props },
+	ref
+) => (
+	<PrivateBlockPopover
+		{ ...props }
+		bottomClientId={ bottomClientId }
+		clientId={ clientId }
+		__unstableContentRef={ undefined }
+		__unstablePopoverSlot={ undefined }
+		ref={ ref }
+	>
+		{ children }
+	</PrivateBlockPopover>
+);
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-popover/README.md
+ */
+export default forwardRef( PublicBlockPopover );
diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 5968fa6f7aa7d..1c9bbe571db32 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -148,7 +148,7 @@ export function useBlockPreview( { blocks, props = {}, layout } ) {
 	return {
 		...props,
 		ref,
-		className: classnames(
+		className: clsx(
 			props.className,
 			'block-editor-block-preview__live-content',
 			'components-disabled'
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index bfc3d5c8783be..9bdd85f66445f 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -48,29 +48,3 @@
 	bottom: 0;
 	z-index: 1;
 }
-
-// Restrict these shadows to the context of the inserter.
-.editor-inserter-sidebar {
-	.block-editor-block-patterns-list__item {
-		.block-editor-block-preview__container {
-			box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
-		}
-		&:focus,
-		&:hover {
-			.block-editor-block-preview__container {
-				box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
-			}
-		}
-
-		&.block-editor-block-patterns-list__list-item-synced {
-			&:hover,
-			&:focus {
-				.block-editor-block-preview__container {
-					box-shadow:
-						0 0 0 2px var(--wp-block-synced-color),
-						0 15px 25px rgb(0 0 0 / 7%);
-				}
-			}
-		}
-	}
-}
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 8b43827605c53..1edf02eb36894 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
@@ -27,15 +27,20 @@ import { BlockRenameControl, useBlockRename } from '../block-rename';
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
 const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
-	const { selectedBlocks, selectedClientIds } = useSelect(
+	const { selectedBlocks, selectedClientIds, isContentOnly } = useSelect(
 		( select ) => {
-			const { getBlockNamesByClientId, getSelectedBlockClientIds } =
-				select( blockEditorStore );
+			const {
+				getBlockNamesByClientId,
+				getSelectedBlockClientIds,
+				getBlockEditingMode,
+			} = select( blockEditorStore );
 			const ids =
 				clientIds !== null ? clientIds : getSelectedBlockClientIds();
 			return {
 				selectedBlocks: getBlockNamesByClientId( ids ),
 				selectedClientIds: ids,
+				isContentOnly:
+					getBlockEditingMode( ids[ 0 ] ) === 'contentOnly',
 			};
 		},
 		[ clientIds ]
@@ -43,8 +48,10 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 
 	const { canLock } = useBlockLock( selectedClientIds[ 0 ] );
 	const { canRename } = useBlockRename( selectedBlocks[ 0 ] );
-	const showLockButton = selectedClientIds.length === 1 && canLock;
-	const showRenameButton = selectedClientIds.length === 1 && canRename;
+	const showLockButton =
+		selectedClientIds.length === 1 && canLock && ! isContentOnly;
+	const showRenameButton =
+		selectedClientIds.length === 1 && canRename && ! isContentOnly;
 
 	// Check if current selection of blocks is Groupable or Ungroupable
 	// and pass this props down to ConvertToGroupButton.
@@ -89,17 +96,19 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 							/>
 						) }
 						{ fills }
-						{ fillProps?.canMove && ! fillProps?.onlyBlock && (
-							<MenuItem
-								onClick={ pipe(
-									fillProps?.onClose,
-									fillProps?.onMoveTo
-								) }
-							>
-								{ __( 'Move to' ) }
-							</MenuItem>
-						) }
-						{ fillProps?.count === 1 && (
+						{ fillProps?.canMove &&
+							! fillProps?.onlyBlock &&
+							! isContentOnly && (
+								<MenuItem
+									onClick={ pipe(
+										fillProps?.onClose,
+										fillProps?.onMoveTo
+									) }
+								>
+									{ __( 'Move to' ) }
+								</MenuItem>
+							) }
+						{ fillProps?.count === 1 && ! isContentOnly && (
 							<BlockModeToggle
 								clientId={ fillProps?.firstBlockClientId }
 								onToggle={ fillProps?.onClose }
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 5834f150136a8..62c5ff4a5f158 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
@@ -63,6 +63,7 @@ export function BlockSettingsDropdown( {
 		previousBlockClientId,
 		selectedBlockClientIds,
 		openedBlockSettingsMenu,
+		isContentOnly,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -73,6 +74,7 @@ export function BlockSettingsDropdown( {
 				getSelectedBlockClientIds,
 				getBlockAttributes,
 				getOpenedBlockSettingsMenu,
+				getBlockEditingMode,
 			} = unlock( select( blockEditorStore ) );
 
 			const { getActiveBlockVariation } = select( blocksStore );
@@ -96,6 +98,8 @@ export function BlockSettingsDropdown( {
 					getPreviousBlockClientId( firstBlockClientId ),
 				selectedBlockClientIds: getSelectedBlockClientIds(),
 				openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
+				isContentOnly:
+					getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
 			};
 		},
 		[ firstBlockClientId ]
@@ -231,11 +235,15 @@ export function BlockSettingsDropdown( {
 										clientId={ firstBlockClientId }
 									/>
 								) }
-								<CopyMenuItem
-									clientIds={ clientIds }
-									onCopy={ onCopy }
-									shortcut={ displayShortcut.primary( 'c' ) }
-								/>
+								{ ! isContentOnly && (
+									<CopyMenuItem
+										clientIds={ clientIds }
+										onCopy={ onCopy }
+										shortcut={ displayShortcut.primary(
+											'c'
+										) }
+									/>
+								) }
 								{ canDuplicate && (
 									<MenuItem
 										onClick={ pipe(
@@ -271,7 +279,7 @@ export function BlockSettingsDropdown( {
 									</>
 								) }
 							</MenuGroup>
-							{ canCopyStyles && (
+							{ canCopyStyles && ! isContentOnly && (
 								<MenuGroup>
 									<CopyMenuItem
 										clientIds={ clientIds }
diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js
index bb31bf0bc2bb8..aa2583c960559 100644
--- a/packages/block-editor/src/components/block-settings/container.native.js
+++ b/packages/block-editor/src/components/block-settings/container.native.js
@@ -16,6 +16,7 @@ import styles from './container.native.scss';
 import InspectorControls from '../inspector-controls';
 import ImageLinkDestinationsScreen from '../image-link-destinations';
 import useMultipleOriginColorsAndGradients from '../colors-gradients/use-multiple-origin-colors-and-gradients';
+import { useMobileGlobalStylesColors } from '../global-styles/use-global-styles-context';
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 
 export const blockSettingsScreens = {
@@ -28,6 +29,7 @@ export const blockSettingsScreens = {
 
 export default function BottomSheetSettings( props ) {
 	const colorSettings = useMultipleOriginColorsAndGradients();
+	colorSettings.allAvailableColors = useMobileGlobalStylesColors();
 	const { closeGeneralSidebar } = useDispatch( 'core/edit-post' );
 	const editorSidebarOpened = useSelect( ( select ) =>
 		select( 'core/edit-post' ).isEditorSidebarOpened()
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index a9fdbe94356ef..951c6d13c52f4 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -68,7 +68,7 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 					return (
 						<Button
 							__next40pxDefaultSize
-							className={ classnames(
+							className={ clsx(
 								'block-editor-block-styles__item',
 								{
 									'is-active':
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index fa260292ce43d..0e341d3216395 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -140,11 +140,11 @@ export function PrivateBlockToolbar( {
 		isReusableBlock( blockType ) || isTemplatePart( blockType );
 
 	// Shifts the toolbar to make room for the parent block selector.
-	const classes = classnames( 'block-editor-block-contextual-toolbar', {
+	const classes = clsx( 'block-editor-block-contextual-toolbar', {
 		'has-parent': showParentSelector,
 	} );
 
-	const innerClasses = classnames( 'block-editor-block-toolbar', {
+	const innerClasses = clsx( 'block-editor-block-toolbar', {
 		'is-synced': isSynced,
 	} );
 
@@ -168,7 +168,7 @@ export function PrivateBlockToolbar( {
 					isLargeViewport &&
 					isDefaultEditingMode && <BlockParentSelector /> }
 				{ isUsingBindings && canBindBlock( blockName ) && (
-					<BlockBindingsIndicator />
+					<BlockBindingsIndicator clientIds={ blockClientIds } />
 				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					( isDefaultEditingMode || isSynced ) && (
diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js
index 150bcfcb7b1ea..bed74376b64b1 100644
--- a/packages/block-editor/src/components/block-tools/block-selection-button.js
+++ b/packages/block-editor/src/components/block-tools/block-selection-button.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -273,7 +273,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 		}
 	}
 
-	const classNames = classnames(
+	const classNames = clsx(
 		'block-editor-block-list__block-selection-button',
 		{
 			'is-block-moving-mode': !! blockMovingMode,
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
index 77afb824101d4..0ae67e1be0001 100644
--- a/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js
+++ b/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js
@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
  */
 import BlockSelectionButton from './block-selection-button';
-import BlockPopover from '../block-popover';
+import { PrivateBlockPopover } from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 import useSelectedBlockToolProps from './use-selected-block-tool-props';
 
@@ -28,10 +28,10 @@ export default function BlockToolbarBreadcrumb( {
 	} );
 
 	return (
-		<BlockPopover
+		<PrivateBlockPopover
 			clientId={ capturingClientId || clientId }
 			bottomClientId={ lastClientId }
-			className={ classnames( 'block-editor-block-list__block-popover', {
+			className={ clsx( 'block-editor-block-list__block-popover', {
 				'is-insertion-point-visible': isInsertionPointVisible,
 			} ) }
 			resize={ false }
@@ -41,6 +41,6 @@ export default function BlockToolbarBreadcrumb( {
 				clientId={ clientId }
 				rootClientId={ rootClientId }
 			/>
-		</BlockPopover>
+		</PrivateBlockPopover>
 	);
 }
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 5af9359d7aade..eef5b5afca304 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
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -57,12 +57,9 @@ export default function BlockToolbarPopover( {
 			<BlockPopover
 				clientId={ capturingClientId || clientId }
 				bottomClientId={ lastClientId }
-				className={ classnames(
-					'block-editor-block-list__block-popover',
-					{
-						'is-insertion-point-visible': isInsertionPointVisible,
-					}
-				) }
+				className={ clsx( 'block-editor-block-list__block-popover', {
+					'is-insertion-point-visible': isInsertionPointVisible,
+				} ) }
 				resize={ false }
 				{ ...popoverProps }
 			>
diff --git a/packages/block-editor/src/components/block-tools/empty-block-inserter.js b/packages/block-editor/src/components/block-tools/empty-block-inserter.js
index bf708c686363f..7faeda933f4c4 100644
--- a/packages/block-editor/src/components/block-tools/empty-block-inserter.js
+++ b/packages/block-editor/src/components/block-tools/empty-block-inserter.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -31,7 +31,7 @@ export default function EmptyBlockInserter( {
 		<BlockPopoverCover
 			clientId={ capturingClientId || clientId }
 			bottomClientId={ lastClientId }
-			className={ classnames(
+			className={ clsx(
 				'block-editor-block-list__block-side-inserter-popover',
 				{
 					'is-insertion-point-visible': isInsertionPointVisible,
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
index 3606a8f757cfd..ad744a81cca62 100644
--- a/packages/block-editor/src/components/block-tools/index.js
+++ b/packages/block-editor/src/components/block-tools/index.js
@@ -6,6 +6,9 @@ import { isTextField } from '@wordpress/dom';
 import { Popover } from '@wordpress/components';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { useRef } from '@wordpress/element';
+import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
+import { speak } from '@wordpress/a11y';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -64,9 +67,13 @@ export default function BlockTools( {
 		[]
 	);
 	const isMatch = useShortcutEventMatch();
-	const { getSelectedBlockClientIds, getBlockRootClientId } =
-		useSelect( blockEditorStore );
-
+	const {
+		getBlocksByClientId,
+		getSelectedBlockClientIds,
+		getBlockRootClientId,
+		isGroupable,
+	} = useSelect( blockEditorStore );
+	const { getGroupingBlockName } = useSelect( blocksStore );
 	const {
 		showEmptyBlockSideInserter,
 		showBreadcrumb,
@@ -76,6 +83,7 @@ export default function BlockTools( {
 	const {
 		duplicateBlocks,
 		removeBlocks,
+		replaceBlocks,
 		insertAfterBlock,
 		insertBeforeBlock,
 		selectBlock,
@@ -159,6 +167,19 @@ export default function BlockTools( {
 			}
 			event.preventDefault();
 			expandBlock( clientId );
+		} else if ( isMatch( 'core/block-editor/group', event ) ) {
+			const clientIds = getSelectedBlockClientIds();
+			if ( clientIds.length > 1 && isGroupable( clientIds ) ) {
+				event.preventDefault();
+				const blocks = getBlocksByClientId( clientIds );
+				const groupingBlockName = getGroupingBlockName();
+				const newBlocks = switchToBlockType(
+					blocks,
+					groupingBlockName
+				);
+				replaceBlocks( clientIds, newBlocks );
+				speak( __( 'Selected blocks are grouped.' ) );
+			}
 		}
 	}
 
@@ -210,11 +231,12 @@ export default function BlockTools( {
 					name="__unstable-block-tools-after"
 					ref={ blockToolbarAfterRef }
 				/>
-				{ isZoomOutMode && (
-					<ZoomOutModeInserters
-						__unstableContentRef={ __unstableContentRef }
-					/>
-				) }
+				{ window.__experimentalEnableZoomedOutPatternsTab &&
+					isZoomOutMode && (
+						<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 bd4c8ea5fb371..9dac99e5e9312 100644
--- a/packages/block-editor/src/components/block-tools/insertion-point.js
+++ b/packages/block-editor/src/components/block-tools/insertion-point.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -150,7 +150,7 @@ function InbetweenInsertionPointPopover( {
 			? 'is-horizontal'
 			: 'is-vertical';
 
-	const className = classnames(
+	const className = clsx(
 		'block-editor-block-list__insertion-point',
 		orientationClassname
 	);
@@ -175,7 +175,7 @@ function InbetweenInsertionPointPopover( {
 				tabIndex={ -1 }
 				onClick={ onClick }
 				onFocus={ onFocus }
-				className={ classnames( className, {
+				className={ clsx( className, {
 					'is-with-inserter': isInserterShown,
 				} ) }
 				onHoverEnd={ maybeHideInserterPoint }
@@ -188,7 +188,7 @@ function InbetweenInsertionPointPopover( {
 				{ isInserterShown && (
 					<motion.div
 						variants={ inserterVariants }
-						className={ classnames(
+						className={ clsx(
 							'block-editor-block-list__insertion-point-inserter'
 						) }
 					>
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index c5920bdf2f7d3..84087b262786c 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -182,8 +182,8 @@
 	.block-editor-block-list__block-selection-button,
 	.block-editor-block-contextual-toolbar {
 		pointer-events: all;
-		margin-top: $grid-unit-15;
-		margin-bottom: $grid-unit-15;
+		margin-top: $grid-unit-10;
+		margin-bottom: $grid-unit-10;
 	}
 
 	.block-editor-block-contextual-toolbar {
@@ -262,3 +262,11 @@
 .is-dragging-components-draggable .components-tooltip {
 	display: none;
 }
+
+.components-popover.block-editor-block-popover__inbetween .block-editor-button-pattern-inserter__button {
+	pointer-events: all;
+	position: absolute;
+	transform: translateX(-50%) translateY(-50%);
+	top: 50%;
+	left: 50%;
+}
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index e3d411d07f726..4f718a552c554 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
@@ -2,25 +2,57 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { plus } from '@wordpress/icons';
+import { _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import BlockPopoverInbetween from '../block-popover/inbetween';
 import { store as blockEditorStore } from '../../store';
-import Inserter from '../inserter';
 import { unlock } from '../../lock-unlock';
 
-function ZoomOutModeInserters( { __unstableContentRef } ) {
+function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
-	const blockOrder = useSelect( ( select ) => {
-		const { sectionRootClientId } = unlock(
-			select( blockEditorStore ).getSettings()
-		);
-		return select( blockEditorStore ).getBlockOrder( sectionRootClientId );
+	const {
+		blockOrder,
+		sectionRootClientId,
+		insertionPoint,
+		setInserterIsOpened,
+		selectedSection,
+	} = useSelect( ( select ) => {
+		const { getSettings, getBlockOrder } = 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' );
+		return {
+			selectedSection: editor.getSelectedBlock(),
+			blockOrder: getBlockOrder( root ),
+			insertionPoint: unlock( editor ).getInsertionPoint(),
+			sectionRootClientId: root,
+			setInserterIsOpened:
+				getSettings().__experimentalSetIsInserterOpened,
+		};
 	}, [] );
 
+	const isMounted = useRef( false );
+
+	useEffect( () => {
+		if ( ! isMounted.current ) {
+			isMounted.current = true;
+			return;
+		}
+		// reset insertion point when the block order changes
+		setInserterIsOpened( true );
+	}, [ blockOrder, setInserterIsOpened ] );
+
 	// Defer the initial rendering to avoid the jumps due to the animation.
 	useEffect( () => {
 		const timeout = setTimeout( () => {
@@ -31,28 +63,49 @@ function ZoomOutModeInserters( { __unstableContentRef } ) {
 		};
 	}, [] );
 
-	if ( ! isReady ) {
+	if ( ! isReady || ! selectedSection ) {
 		return null;
 	}
 
-	return blockOrder.map( ( clientId, index ) => {
-		if ( index === blockOrder.length - 1 ) {
-			return null;
-		}
+	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
 		return (
 			<BlockPopoverInbetween
-				key={ clientId }
+				key={ index }
 				previousClientId={ clientId }
-				nextClientId={ blockOrder[ index + 1 ] }
-				__unstableContentRef={ __unstableContentRef }
+				nextClientId={ blockOrder[ index ] }
 			>
-				<div className="block-editor-block-list__insertion-point-inserter is-with-inserter">
-					<Inserter
-						position="bottom center"
-						clientId={ blockOrder[ index + 1 ] }
-						__experimentalIsQuick
+				{ insertionPoint.insertionIndex === index && (
+					<div
+						style={ {
+							borderRadius: '0',
+							height: '12px',
+							opacity: 1,
+							transform: 'translateY(-50%)',
+							width: '100%',
+						} }
+						className="block-editor-block-list__insertion-point-indicator"
+					/>
+				) }
+				{ insertionPoint.insertionIndex !== index && (
+					<Button
+						variant="primary"
+						icon={ plus }
+						size="compact"
+						className="block-editor-button-pattern-inserter__button"
+						onClick={ () => {
+							setInserterIsOpened( {
+								rootClientId: sectionRootClientId,
+								insertionIndex: index,
+								tab: 'patterns',
+								category: 'all',
+							} );
+						} }
+						label={ _x(
+							'Add pattern',
+							'Generic label for pattern inserter button'
+						) }
 					/>
-				</div>
+				) }
 			</BlockPopoverInbetween>
 		);
 	} );
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 85cf2b37f8a4a..2bba44d4bedfe 100644
--- a/packages/block-editor/src/components/block-variation-picker/index.js
+++ b/packages/block-editor/src/components/block-variation-picker/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ function BlockVariationPicker( {
 	onSelect,
 	allowSkip,
 } ) {
-	const classes = classnames( 'block-editor-block-variation-picker', {
+	const classes = clsx( 'block-editor-block-variation-picker', {
 		'has-many-variations': variations.length > 4,
 	} );
 
diff --git a/packages/block-editor/src/components/border-radius-control/all-input-control.js b/packages/block-editor/src/components/border-radius-control/all-input-control.js
index 27256f03547f0..14abf3c6c2bc9 100644
--- a/packages/block-editor/src/components/border-radius-control/all-input-control.js
+++ b/packages/block-editor/src/components/border-radius-control/all-input-control.js
@@ -61,7 +61,7 @@ export default function AllInputControl( {
 			onChange={ handleOnChange }
 			onUnitChange={ handleOnUnitChange }
 			placeholder={ allPlaceholder }
-			size={ '__unstable-large' }
+			size="__unstable-large"
 		/>
 	);
 }
diff --git a/packages/block-editor/src/components/border-radius-control/input-controls.js b/packages/block-editor/src/components/border-radius-control/input-controls.js
index c0c5c672d6364..4529c00b997ac 100644
--- a/packages/block-editor/src/components/border-radius-control/input-controls.js
+++ b/packages/block-editor/src/components/border-radius-control/input-controls.js
@@ -80,7 +80,7 @@ export default function BoxInputControls( {
 								onUnitChange={ createHandleOnUnitChange(
 									corner
 								) }
-								size={ '__unstable-large' }
+								size="__unstable-large"
 							/>
 						</div>
 					</Tooltip>
diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js
index a1b568c99474a..cd1289c897824 100644
--- a/packages/block-editor/src/components/button-block-appender/index.js
+++ b/packages/block-editor/src/components/button-block-appender/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -53,13 +53,15 @@ function ButtonBlockAppender(
 						ref={ ref }
 						onFocus={ onFocus }
 						tabIndex={ tabIndex }
-						className={ classnames(
+						className={ clsx(
 							className,
 							'block-editor-button-block-appender'
 						) }
 						onClick={ onToggle }
 						aria-haspopup={ isToggleButton ? 'true' : undefined }
 						aria-expanded={ isToggleButton ? isOpen : undefined }
+						// Disable reason: There shouldn't be a case where this button is disabled but not visually hidden.
+						// eslint-disable-next-line no-restricted-syntax
 						disabled={ disabled }
 						label={ label }
 					>
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 e0af72c238ad5..dfc4ee69437f6 100644
--- a/packages/block-editor/src/components/child-layout-control/index.js
+++ b/packages/block-editor/src/components/child-layout-control/index.js
@@ -111,7 +111,7 @@ export default function ChildLayoutControl( {
 				>
 					<ToggleGroupControl
 						__nextHasNoMarginBottom
-						size={ '__unstable-large' }
+						size="__unstable-large"
 						label={ childLayoutOrientation( parentLayout ) }
 						value={ selfStretch || 'fit' }
 						help={ helpText( selfStretch, parentLayout ) }
@@ -126,24 +126,24 @@ export default function ChildLayoutControl( {
 						isBlock
 					>
 						<ToggleGroupControlOption
-							key={ 'fit' }
-							value={ 'fit' }
+							key="fit"
+							value="fit"
 							label={ __( 'Fit' ) }
 						/>
 						<ToggleGroupControlOption
-							key={ 'fill' }
-							value={ 'fill' }
+							key="fill"
+							value="fill"
 							label={ __( 'Fill' ) }
 						/>
 						<ToggleGroupControlOption
-							key={ 'fixed' }
-							value={ 'fixed' }
+							key="fixed"
+							value="fixed"
 							label={ __( 'Fixed' ) }
 						/>
 					</ToggleGroupControl>
 					{ selfStretch === 'fixed' && (
 						<UnitControl
-							size={ '__unstable-large' }
+							size="__unstable-large"
 							onChange={ ( value ) => {
 								onChange( {
 									selfStretch,
@@ -166,7 +166,7 @@ export default function ChildLayoutControl( {
 						panelId={ panelId }
 					>
 						<InputControl
-							size={ '__unstable-large' }
+							size="__unstable-large"
 							label={ __( 'Column span' ) }
 							type="number"
 							onChange={ ( value ) => {
@@ -181,7 +181,7 @@ export default function ChildLayoutControl( {
 							min={ 1 }
 						/>
 						<InputControl
-							size={ '__unstable-large' }
+							size="__unstable-large"
 							label={ __( 'Row span' ) }
 							type="number"
 							onChange={ ( value ) => {
@@ -210,7 +210,7 @@ export default function ChildLayoutControl( {
 						>
 							<FlexItem style={ { width: '50%' } }>
 								<InputControl
-									size={ '__unstable-large' }
+									size="__unstable-large"
 									label={ __( 'Column' ) }
 									type="number"
 									onChange={ ( value ) => {
@@ -223,12 +223,18 @@ export default function ChildLayoutControl( {
 									} }
 									value={ columnStart }
 									min={ 1 }
-									max={ parentLayout?.columnCount }
+									max={
+										parentLayout?.columnCount
+											? parentLayout.columnCount -
+											  ( columnSpan ?? 1 ) +
+											  1
+											: undefined
+									}
 								/>
 							</FlexItem>
 							<FlexItem style={ { width: '50%' } }>
 								<InputControl
-									size={ '__unstable-large' }
+									size="__unstable-large"
 									label={ __( 'Row' ) }
 									type="number"
 									onChange={ ( value ) => {
@@ -241,7 +247,13 @@ export default function ChildLayoutControl( {
 									} }
 									value={ rowStart }
 									min={ 1 }
-									max={ parentLayout?.columnCount }
+									max={
+										parentLayout?.rowCount
+											? parentLayout.rowCount -
+											  ( rowSpan ?? 1 ) +
+											  1
+											: undefined
+									}
 								/>
 							</FlexItem>
 						</Flex>
diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index 946b5dd486b04..d6b34876c8eaa 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -21,6 +21,7 @@ import {
 import { useSettings } from '../use-settings';
 import { unlock } from '../../lock-unlock';
 
+const { Tabs } = unlock( componentsPrivateApis );
 const colorsAndGradientKeys = [
 	'colors',
 	'disableCustomColors',
@@ -106,15 +107,10 @@ function ColorGradientControlInner( {
 		</div>
 	);
 
-	// Unlocking `Tabs` too early causes the `unlock` method to receive an empty
-	// object, due to circular dependencies.
-	// See https://github.com/WordPress/gutenberg/issues/52692
-	const { Tabs } = unlock( componentsPrivateApis );
-
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom
-			className={ classnames(
+			className={ clsx(
 				'block-editor-color-gradient-control',
 				className
 			) }
@@ -141,7 +137,7 @@ function ColorGradientControlInner( {
 							>
 								<Tabs.TabList>
 									<Tabs.Tab tabId={ TAB_IDS.color }>
-										{ __( 'Solid' ) }
+										{ __( 'Color' ) }
 									</Tabs.Tab>
 									<Tabs.Tab tabId={ TAB_IDS.gradient }>
 										{ __( 'Gradient' ) }
@@ -149,18 +145,14 @@ function ColorGradientControlInner( {
 								</Tabs.TabList>
 								<Tabs.TabPanel
 									tabId={ TAB_IDS.color }
-									className={
-										'block-editor-color-gradient-control__panel'
-									}
+									className="block-editor-color-gradient-control__panel"
 									focusable={ false }
 								>
 									{ tabPanels.color }
 								</Tabs.TabPanel>
 								<Tabs.TabPanel
 									tabId={ TAB_IDS.gradient }
-									className={
-										'block-editor-color-gradient-control__panel'
-									}
+									className="block-editor-color-gradient-control__panel"
 									focusable={ false }
 								>
 									{ tabPanels.gradient }
diff --git a/packages/block-editor/src/components/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js
index eb78b8b29a41b..7033c2ebde48f 100644
--- a/packages/block-editor/src/components/colors-gradients/dropdown.js
+++ b/packages/block-editor/src/components/colors-gradients/dropdown.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -80,7 +80,7 @@ const renderToggle =
 
 		const toggleProps = {
 			onClick: onToggle,
-			className: classnames(
+			className: clsx(
 				'block-editor-panel-color-gradient-settings__dropdown',
 				{ 'is-open': isOpen }
 			),
diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
index 1ee60a5ccc604..4e58104658566 100644
--- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
+++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -61,7 +61,7 @@ export const PanelColorGradientSettingsInner = ( {
 
 	return (
 		<ToolsPanel
-			className={ classnames(
+			className={ clsx(
 				'block-editor-panel-color-gradient-settings',
 				className
 			) }
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 9f440fee3d0e3..0bda16071ef99 100644
--- a/packages/block-editor/src/components/colors-gradients/test/control.js
+++ b/packages/block-editor/src/components/colors-gradients/test/control.js
@@ -43,7 +43,7 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is showing the two tab buttons.
 		expect(
-			screen.getByRole( 'tab', { name: 'Solid' } )
+			screen.getByRole( 'tab', { name: 'Color' } )
 		).toBeInTheDocument();
 		expect(
 			screen.getByRole( 'tab', { name: 'Gradient' } )
@@ -72,7 +72,7 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is not showing the two tab buttons.
 		expect(
-			screen.queryByRole( 'tab', { name: 'Solid' } )
+			screen.queryByRole( 'tab', { name: 'Color' } )
 		).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole( 'tab', { name: 'Gradient' } )
@@ -111,7 +111,7 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is not showing the two tab buttons.
 		expect(
-			screen.queryByRole( 'tab', { name: 'Solid' } )
+			screen.queryByRole( 'tab', { name: 'Color' } )
 		).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole( 'tab', { name: 'Gradient' } )
diff --git a/packages/block-editor/src/components/colors/utils.js b/packages/block-editor/src/components/colors/utils.js
index d6d51ad001363..5ec42a6bae700 100644
--- a/packages/block-editor/src/components/colors/utils.js
+++ b/packages/block-editor/src/components/colors/utils.js
@@ -17,6 +17,8 @@ import { unlock } from '../../lock-unlock';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
+const { kebabCase } = unlock( componentsPrivateApis );
+
 /**
  * Provided an array of color objects as set by the theme or by the editor defaults,
  * and the values of the defined color or custom color returns a color object describing the color.
@@ -75,8 +77,6 @@ export function getColorClassName( colorContextName, colorSlug ) {
 		return undefined;
 	}
 
-	const { kebabCase } = unlock( componentsPrivateApis );
-
 	return `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;
 }
 
diff --git a/packages/block-editor/src/components/colors/with-colors.js b/packages/block-editor/src/components/colors/with-colors.js
index 33079f8b409d6..680521fb6519c 100644
--- a/packages/block-editor/src/components/colors/with-colors.js
+++ b/packages/block-editor/src/components/colors/with-colors.js
@@ -17,6 +17,8 @@ import {
 import { useSettings } from '../use-settings';
 import { unlock } from '../../lock-unlock';
 
+const { kebabCase } = unlock( componentsPrivateApis );
+
 /**
  * Capitalizes the first letter in a string.
  *
@@ -80,7 +82,6 @@ const withEditorColorPalette = () =>
  * @return {Component} The component that can be used as a HOC.
  */
 function createColorHOC( colorTypes, withColorPalette ) {
-	const { kebabCase } = unlock( componentsPrivateApis );
 	const colorMap = colorTypes.reduce( ( colorObject, colorType ) => {
 		return {
 			...colorObject,
diff --git a/packages/block-editor/src/components/contrast-checker/test/index.js b/packages/block-editor/src/components/contrast-checker/test/index.js
index 26da2ac0ae8c1..9abd7d7f7e2e6 100644
--- a/packages/block-editor/src/components/contrast-checker/test/index.js
+++ b/packages/block-editor/src/components/contrast-checker/test/index.js
@@ -375,7 +375,7 @@ describe( 'ContrastChecker', () => {
 		render(
 			<ContrastChecker
 				backgroundColor={ backgroundColor }
-				textColor={ 'rgba(0,0,0,0.9)' }
+				textColor="rgba(0,0,0,0.9)"
 				linkColor={ linkColor }
 				isLargeText={ isLargeText }
 				enableAlphaChecker
@@ -396,7 +396,7 @@ describe( 'ContrastChecker', () => {
 		render(
 			<ContrastChecker
 				backgroundColor={ backgroundColor }
-				linkColor={ 'rgba(0,0,0,0.9)' }
+				linkColor="rgba(0,0,0,0.9)"
 				textColor={ textColor }
 				isLargeText={ isLargeText }
 				enableAlphaChecker
@@ -416,7 +416,7 @@ describe( 'ContrastChecker', () => {
 	test( 'should render nothing when the colors meet AA WCAG guidelines but the background color only has alpha transparency with alpha checker enabled.', () => {
 		const { container } = render(
 			<ContrastChecker
-				backgroundColor={ 'rgba(255,255,255,0.7)' }
+				backgroundColor="rgba(255,255,255,0.7)"
 				textColor={ textColor }
 				linkColor={ linkColor }
 				isLargeText={ isLargeText }
@@ -450,7 +450,7 @@ describe( 'ContrastChecker', () => {
 			<ContrastChecker
 				backgroundColor={ colorWithTransparency }
 				textColor={ sameShade }
-				linkColor={ 'rgba(0,0,0,0.9)' }
+				linkColor="rgba(0,0,0,0.9)"
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
 				fallbackTextColor={ fallbackTextColor }
@@ -472,7 +472,7 @@ describe( 'ContrastChecker', () => {
 		render(
 			<ContrastChecker
 				backgroundColor={ sameShade }
-				textColor={ 'rgba(0,0,0,0.9)' }
+				textColor="rgba(0,0,0,0.9)"
 				linkColor={ sameShade }
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
@@ -494,9 +494,9 @@ describe( 'ContrastChecker', () => {
 	test( 'should render component when the colors meet AA WCAG guidelines but all colors have alpha transparency with alpha checker enabled.', () => {
 		render(
 			<ContrastChecker
-				backgroundColor={ 'rgba(255,255,255,0.7)' }
-				linkColor={ 'rgba(0,0,0,0.7)' }
-				textColor={ 'rgba(0,0,0,0.7)' }
+				backgroundColor="rgba(255,255,255,0.7)"
+				linkColor="rgba(0,0,0,0.7)"
+				textColor="rgba(0,0,0,0.7)"
 				isLargeText={ isLargeText }
 				enableAlphaChecker
 			/>
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 c2bb3fb25b845..2a015d569e85b 100644
--- a/packages/block-editor/src/components/convert-to-group-buttons/index.js
+++ b/packages/block-editor/src/components/convert-to-group-buttons/index.js
@@ -4,7 +4,8 @@
 import { MenuItem } from '@wordpress/components';
 import { _x } from '@wordpress/i18n';
 import { switchToBlockType } from '@wordpress/blocks';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { displayShortcut } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -22,6 +23,7 @@ function ConvertToGroupButton( {
 	groupingBlockName,
 	onClose = () => {},
 } ) {
+	const { getSelectedBlockClientIds } = useSelect( blockEditorStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const onConvertToGroup = () => {
 		// Activate the `transform` on the Grouping Block which does the conversion.
@@ -52,10 +54,17 @@ function ConvertToGroupButton( {
 		return null;
 	}
 
+	const selectedBlockClientIds = getSelectedBlockClientIds();
+
 	return (
 		<>
 			{ isGroupable && (
 				<MenuItem
+					shortcut={
+						selectedBlockClientIds.length > 1
+							? displayShortcut.primary( 'g' )
+							: undefined
+					}
 					onClick={ () => {
 						onConvertToGroup();
 						onClose();
diff --git a/packages/block-editor/src/components/default-block-appender/index.js b/packages/block-editor/src/components/default-block-appender/index.js
index 3b93fd0cc2325..411455c13df43 100644
--- a/packages/block-editor/src/components/default-block-appender/index.js
+++ b/packages/block-editor/src/components/default-block-appender/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -58,7 +58,7 @@ export default function DefaultBlockAppender( { rootClientId } ) {
 	return (
 		<div
 			data-root-client-id={ rootClientId || '' }
-			className={ classnames( 'block-editor-default-block-appender', {
+			className={ clsx( 'block-editor-default-block-appender', {
 				'has-visible-prompt': showPrompt,
 			} ) }
 		>
diff --git a/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js b/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js
index 5ff35ae0e0c88..d963e71289cb0 100644
--- a/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js
+++ b/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js
@@ -6,75 +6,14 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-
 /**
- * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
+ * Internal dependencies
  */
+import { useSettings } from '../use-settings';
 
 /**
- * @type {SelectControlProps[]}
+ * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
  */
-export const DEFAULT_ASPECT_RATIO_OPTIONS = [
-	{
-		label: _x( 'Original', 'Aspect ratio option for dimensions control' ),
-		value: 'auto',
-	},
-	{
-		label: _x(
-			'Square - 1:1',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '1',
-	},
-	{
-		label: _x(
-			'Standard - 4:3',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '4/3',
-	},
-	{
-		label: _x(
-			'Portrait - 3:4',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '3/4',
-	},
-	{
-		label: _x(
-			'Classic - 3:2',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '3/2',
-	},
-	{
-		label: _x(
-			'Classic Portrait - 2:3',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '2/3',
-	},
-	{
-		label: _x(
-			'Wide - 16:9',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '16/9',
-	},
-	{
-		label: _x(
-			'Tall - 9:16',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '9/16',
-	},
-	{
-		label: _x( 'Custom', 'Aspect ratio option for dimensions control' ),
-		value: 'custom',
-		disabled: true,
-		hidden: true,
-	},
-];
 
 /**
  * @callback AspectRatioToolPropsOnChange
@@ -96,14 +35,48 @@ export default function AspectRatioTool( {
 	panelId,
 	value,
 	onChange = () => {},
-	options = DEFAULT_ASPECT_RATIO_OPTIONS,
-	defaultValue = DEFAULT_ASPECT_RATIO_OPTIONS[ 0 ].value,
+	options,
+	defaultValue = 'auto',
 	hasValue,
 	isShownByDefault = true,
 } ) {
 	// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
 	const displayValue = value ?? 'auto';
 
+	const [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings(
+		'dimensions.aspectRatios.default',
+		'dimensions.aspectRatios.theme',
+		'dimensions.defaultAspectRatios'
+	);
+
+	const themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {
+		label: name,
+		value: ratio,
+	} ) );
+
+	const defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( {
+		label: name,
+		value: ratio,
+	} ) );
+
+	const aspectRatioOptions = [
+		{
+			label: _x(
+				'Original',
+				'Aspect ratio option for dimensions control'
+			),
+			value: 'auto',
+		},
+		...( showDefaultRatios ? defaultOptions : [] ),
+		...( themeOptions ? themeOptions : [] ),
+		{
+			label: _x( 'Custom', 'Aspect ratio option for dimensions control' ),
+			value: 'custom',
+			disabled: true,
+			hidden: true,
+		},
+	];
+
 	return (
 		<ToolsPanelItem
 			hasValue={
@@ -117,9 +90,9 @@ export default function AspectRatioTool( {
 			<SelectControl
 				label={ __( 'Aspect ratio' ) }
 				value={ displayValue }
-				options={ options }
+				options={ options ?? aspectRatioOptions }
 				onChange={ onChange }
-				size={ '__unstable-large' }
+				size="__unstable-large"
 				__nextHasNoMarginBottom
 			/>
 		</ToolsPanelItem>
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 e3ef91745aa53..05a7d2f4d251a 100644
--- a/packages/block-editor/src/components/dimensions-tool/scale-tool.js
+++ b/packages/block-editor/src/components/dimensions-tool/scale-tool.js
@@ -110,7 +110,7 @@ export default function ScaleTool( {
 				help={ scaleHelp[ displayValue ] }
 				value={ displayValue }
 				onChange={ onChange }
-				size={ '__unstable-large' }
+				size="__unstable-large"
 			>
 				{ options.map( ( option ) => (
 					<ToggleGroupControlOption
diff --git a/packages/block-editor/src/components/dimensions-tool/test/index.js b/packages/block-editor/src/components/dimensions-tool/test/index.js
index 6bfa2af057f7c..f6f7d71eb2dcb 100644
--- a/packages/block-editor/src/components/dimensions-tool/test/index.js
+++ b/packages/block-editor/src/components/dimensions-tool/test/index.js
@@ -33,6 +33,16 @@ function Example( { initialValue, onChange, ...props } ) {
 				} }
 				defaultScale="cover"
 				defaultAspectRatio="auto"
+				aspectRatioOptions={ [
+					{ label: 'Original', value: 'auto' },
+					{ label: '16/9', value: '16/9' },
+					{
+						label: 'Custom',
+						value: 'custom',
+						disabled: true,
+						hidden: true,
+					},
+				] }
 				value={ value }
 				{ ...props }
 			/>
diff --git a/packages/block-editor/src/components/dimensions-tool/width-height-tool.js b/packages/block-editor/src/components/dimensions-tool/width-height-tool.js
index 6a4609f9a0bf2..4c45dd6feca8c 100644
--- a/packages/block-editor/src/components/dimensions-tool/width-height-tool.js
+++ b/packages/block-editor/src/components/dimensions-tool/width-height-tool.js
@@ -87,7 +87,7 @@ export default function WidthHeightTool( {
 					min={ 0 }
 					value={ width }
 					onChange={ onDimensionChange( 'width' ) }
-					size={ '__unstable-large' }
+					size="__unstable-large"
 				/>
 			</SingleColumnToolsPanelItem>
 			<SingleColumnToolsPanelItem
@@ -105,7 +105,7 @@ export default function WidthHeightTool( {
 					min={ 0 }
 					value={ height }
 					onChange={ onDimensionChange( 'height' ) }
-					size={ '__unstable-large' }
+					size="__unstable-large"
 				/>
 			</SingleColumnToolsPanelItem>
 		</>
diff --git a/packages/block-editor/src/components/font-sizes/utils.js b/packages/block-editor/src/components/font-sizes/utils.js
index dff28c7a770d4..b43ed049507aa 100644
--- a/packages/block-editor/src/components/font-sizes/utils.js
+++ b/packages/block-editor/src/components/font-sizes/utils.js
@@ -8,6 +8,8 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components';
  */
 import { unlock } from '../../lock-unlock';
 
+const { kebabCase } = unlock( componentsPrivateApis );
+
 /**
  *  Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.
  * 	If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned.
@@ -69,6 +71,5 @@ export function getFontSizeClass( fontSizeSlug ) {
 		return;
 	}
 
-	const { kebabCase } = unlock( componentsPrivateApis );
 	return `has-${ kebabCase( fontSizeSlug ) }-font-size`;
 }
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 145787bc59436..7f3c3ed27e667 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -38,6 +38,7 @@ import { TOOLSPANEL_DROPDOWNMENU_PROPS } 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';
 
 const IMAGE_BACKGROUND_TYPE = 'image';
 const DEFAULT_CONTROLS = {
@@ -82,6 +83,8 @@ export function hasBackgroundSizeValue( style ) {
 export function hasBackgroundImageValue( style ) {
 	return (
 		!! style?.background?.backgroundImage?.id ||
+		// Supports url() string values in theme.json.
+		'string' === typeof style?.background?.backgroundImage ||
 		!! style?.background?.backgroundImage?.url
 	);
 }
@@ -99,7 +102,7 @@ function backgroundSizeHelpText( value ) {
 	if ( value === 'contain' ) {
 		return __( 'Image is contained without distortion.' );
 	}
-	return __( 'Specify a fixed width.' );
+	return __( 'Image has a fixed width.' );
 }
 
 /**
@@ -147,7 +150,7 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
 			<HStack justify={ imgUrl ? 'flex-start' : 'center' } as="span">
 				{ imgUrl && (
 					<span
-						className={ classnames(
+						className={ clsx(
 							'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
 							{
 								'has-image': imgUrl,
@@ -171,13 +174,13 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
 						{ imgLabel }
 					</Truncate>
 					<VisuallyHidden as="span">
-						{ filename
+						{ imgUrl
 							? sprintf(
 									/* translators: %s: file name */
-									__( 'Selected image: %s' ),
-									filename
+									__( 'Background image: %s' ),
+									filename || imgLabel
 							  )
-							: __( 'No image selected' ) }
+							: __( 'No background image selected' ) }
 					</VisuallyHidden>
 				</FlexItem>
 			</HStack>
@@ -191,6 +194,7 @@ function BackgroundImageToolsPanelItem( {
 	onChange,
 	style,
 	inheritedValue,
+	themeFileURIs,
 } ) {
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
@@ -241,12 +245,22 @@ function BackgroundImageToolsPanelItem( {
 			return;
 		}
 
+		const sizeValue = style?.background?.backgroundSize;
+		const positionValue = style?.background?.backgroundPosition;
+
 		onChange(
-			setImmutably( style, [ 'background', 'backgroundImage' ], {
-				url: media.url,
-				id: media.id,
-				source: 'file',
-				title: media.title || undefined,
+			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,
 			} )
 		);
 	};
@@ -277,6 +291,23 @@ function BackgroundImageToolsPanelItem( {
 
 	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 );
+
 	return (
 		<ToolsPanelItem
 			className="single-column"
@@ -300,23 +331,29 @@ function BackgroundImageToolsPanelItem( {
 					name={
 						<InspectorImagePreview
 							label={ title }
-							filename={ title || __( 'Untitled' ) }
-							url={ url }
+							filename={ title }
+							url={ getResolvedThemeFilePath(
+								url,
+								themeFileURIs
+							) }
 						/>
 					}
 					variant="secondary"
 				>
+					{ canRemove && (
+						<MenuItem
+							onClick={ () => {
+								closeAndFocus();
+								onRemove();
+							} }
+						>
+							{ __( 'Remove' ) }
+						</MenuItem>
+					) }
 					{ hasValue && (
 						<MenuItem
 							onClick={ () => {
-								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();
+								closeAndFocus();
 								resetBackgroundImage();
 							} }
 						>
@@ -340,6 +377,7 @@ function BackgroundSizeToolsPanelItem( {
 	style,
 	inheritedValue,
 	defaultValues,
+	themeFileURIs,
 } ) {
 	const sizeValue =
 		style?.background?.backgroundSize ||
@@ -398,13 +436,16 @@ function BackgroundSizeToolsPanelItem( {
 	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 (
@@ -413,11 +454,29 @@ function BackgroundSizeToolsPanelItem( {
 			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,
 			} )
@@ -439,7 +498,7 @@ function BackgroundSizeToolsPanelItem( {
 			setImmutably(
 				style,
 				[ 'background', 'backgroundRepeat' ],
-				repeatCheckedValue === true ? 'no-repeat' : undefined
+				repeatCheckedValue === true ? 'no-repeat' : 'repeat'
 			)
 		);
 
@@ -468,50 +527,58 @@ function BackgroundSizeToolsPanelItem( {
 			<FocalPointPicker
 				__next40pxDefaultSize
 				label={ __( 'Position' ) }
-				url={ imageValue }
+				url={ getResolvedThemeFilePath( imageValue, themeFileURIs ) }
 				value={ backgroundPositionToCoords( positionValue ) }
 				onChange={ updateBackgroundPosition }
 			/>
 			<ToggleGroupControl
-				size={ '__unstable-large' }
+				size="__unstable-large"
 				label={ __( 'Size' ) }
 				value={ currentValueForToggle }
 				onChange={ updateBackgroundSize }
 				isBlock
-				help={ backgroundSizeHelpText( sizeValue ) }
+				help={ backgroundSizeHelpText(
+					sizeValue || defaultValues?.backgroundSize
+				) }
 			>
 				<ToggleGroupControlOption
-					key={ 'cover' }
-					value={ 'cover' }
+					key="cover"
+					value="cover"
 					label={ __( 'Cover' ) }
 				/>
 				<ToggleGroupControlOption
-					key={ 'contain' }
-					value={ 'contain' }
+					key="contain"
+					value="contain"
 					label={ __( 'Contain' ) }
 				/>
 				<ToggleGroupControlOption
-					key={ 'fixed' }
-					value={ 'auto' }
-					label={ __( 'Fixed' ) }
+					key="tile"
+					value="auto"
+					label={ __( 'Tile' ) }
 				/>
 			</ToggleGroupControl>
-			{ currentValueForToggle !== undefined &&
-			currentValueForToggle !== 'cover' &&
-			currentValueForToggle !== 'contain' ? (
-				<UnitControl
-					size={ '__unstable-large' }
-					onChange={ updateBackgroundSize }
-					value={ sizeValue }
-				/>
-			) : null }
-			{ currentValueForToggle !== 'cover' && (
-				<ToggleControl
-					label={ __( 'Repeat' ) }
-					checked={ repeatCheckedValue }
-					onChange={ toggleIsRepeated }
-				/>
-			) }
+			<HStack justify="flex-start" spacing={ 2 } as="span">
+				{ currentValueForToggle !== undefined &&
+				currentValueForToggle !== 'cover' &&
+				currentValueForToggle !== 'contain' ? (
+					<UnitControl
+						aria-label={ __( 'Background image width' ) }
+						onChange={ updateBackgroundSize }
+						value={ sizeValue }
+						size="__unstable-large"
+						__unstableInputWidth="100px"
+						min={ 0 }
+						placeholder={ __( 'Auto' ) }
+					/>
+				) : null }
+				{ currentValueForToggle !== 'cover' && (
+					<ToggleControl
+						label={ __( 'Repeat' ) }
+						checked={ repeatCheckedValue }
+						onChange={ toggleIsRepeated }
+					/>
+				) }
+			</HStack>
 		</VStack>
 	);
 }
@@ -553,6 +620,7 @@ export default function BackgroundPanel( {
 	defaultControls = DEFAULT_CONTROLS,
 	defaultValues = {},
 	headerLabel = __( 'Background image' ),
+	themeFileURIs,
 } ) {
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
@@ -577,6 +645,7 @@ export default function BackgroundPanel( {
 				isShownByDefault={ defaultControls.backgroundImage }
 				style={ value }
 				inheritedValue={ inheritedValue }
+				themeFileURIs={ themeFileURIs }
 			/>
 			{ shouldShowBackgroundSizeControls && (
 				<BackgroundSizeToolsPanelItem
@@ -586,6 +655,7 @@ export default function BackgroundPanel( {
 					style={ value }
 					inheritedValue={ inheritedValue }
 					defaultValues={ defaultValues }
+					themeFileURIs={ themeFileURIs }
 				/>
 			) }
 		</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 e02616082cf6a..a20bb15c044c5 100644
--- a/packages/block-editor/src/components/global-styles/border-panel.js
+++ b/packages/block-editor/src/components/global-styles/border-panel.js
@@ -19,7 +19,6 @@ import { __ } from '@wordpress/i18n';
 import BorderRadiusControl from '../border-radius-control';
 import { useColorsPerOrigin } from './hooks';
 import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
-import { overrideOrigins } from '../../store/get-block-settings';
 import { setImmutably } from '../../utils/object';
 import { useBorderPanelLabel } from '../../hooks/border';
 import { ShadowPopover, useShadowPresets } from './shadow-panel-components';
@@ -91,7 +90,7 @@ const DEFAULT_CONTROLS = {
 	radius: true,
 	color: true,
 	width: true,
-	shadow: false,
+	shadow: true,
 };
 
 export default function BorderPanel( {
@@ -161,9 +160,13 @@ export default function BorderPanel( {
 	// Shadow
 	const shadow = decodeValue( inheritedValue?.shadow );
 	const shadowPresets = settings?.shadow?.presets ?? {};
-	const overriddenShadowPresets = overrideOrigins( shadowPresets ) ?? [];
+	const mergedShadowPresets =
+		shadowPresets.custom ??
+		shadowPresets.theme ??
+		shadowPresets.default ??
+		[];
 	const setShadow = ( newValue ) => {
-		const slug = overriddenShadowPresets?.find(
+		const slug = mergedShadowPresets?.find(
 			( { shadow: shadowName } ) => shadowName === newValue
 		)?.slug;
 
@@ -258,7 +261,7 @@ export default function BorderPanel( {
 						popoverPlacement="left-start"
 						value={ border }
 						__experimentalIsRenderedInSidebar
-						size={ '__unstable-large' }
+						size="__unstable-large"
 						hideLabelFromVision={ ! hasShadowControl }
 						label={ __( 'Border' ) }
 					/>
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 a0e469c502d15..7b49ab453bb45 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -155,6 +155,8 @@ const popoverProps = {
 	shift: true,
 };
 
+const { Tabs } = unlock( componentsPrivateApis );
+
 const LabeledColorIndicators = ( { indicators, label } ) => (
 	<HStack justify="flex-start">
 		<ZStack isLayered={ false } offset={ -8 }>
@@ -207,11 +209,7 @@ function ColorPanelDropdown( {
 	panelId,
 } ) {
 	const currentTab = tabs.find( ( tab ) => tab.userValue !== undefined );
-	// Unlocking `Tabs` too early causes the `unlock` method to receive an empty
-	// object, due to circular dependencies.
-	// See https://github.com/WordPress/gutenberg/issues/52692
-	const { Tabs } = unlock( componentsPrivateApis );
-
+	const { key: firstTabKey, ...firstTab } = tabs[ 0 ] ?? {};
 	return (
 		<ToolsPanelItem
 			className="block-editor-tools-panel-color-gradient-settings__item"
@@ -227,7 +225,7 @@ function ColorPanelDropdown( {
 				renderToggle={ ( { onToggle, isOpen } ) => {
 					const toggleProps = {
 						onClick: onToggle,
-						className: classnames(
+						className: clsx(
 							'block-editor-panel-color-gradient-settings__dropdown',
 							{ 'is-open': isOpen }
 						),
@@ -253,7 +251,8 @@ function ColorPanelDropdown( {
 						<div className="block-editor-panel-color-gradient-settings__dropdown-content">
 							{ tabs.length === 1 && (
 								<ColorPanelTab
-									{ ...tabs[ 0 ] }
+									key={ firstTabKey }
+									{ ...firstTab }
 									colorGradientControlSettings={
 										colorGradientControlSettings
 									}
@@ -273,14 +272,17 @@ function ColorPanelDropdown( {
 									</Tabs.TabList>
 
 									{ tabs.map( ( tab ) => {
+										const { key: tabKey, ...restTabProps } =
+											tab;
 										return (
 											<Tabs.TabPanel
-												key={ tab.key }
-												tabId={ tab.key }
+												key={ tabKey }
+												tabId={ tabKey }
 												focusable={ false }
 											>
 												<ColorPanelTab
-													{ ...tab }
+													key={ tabKey }
+													{ ...restTabProps }
 													colorGradientControlSettings={
 														colorGradientControlSettings
 													}
@@ -545,7 +547,7 @@ export default function ColorPanel( {
 			tabs: [
 				hasSolidColors && {
 					key: 'background',
-					label: __( 'Solid' ),
+					label: __( 'Color' ),
 					inheritedValue: backgroundColor,
 					setValue: setBackgroundColor,
 					userValue: userBackgroundColor,
@@ -712,19 +714,22 @@ export default function ColorPanel( {
 			onChange={ onChange }
 			panelId={ panelId }
 		>
-			{ items.map( ( item ) => (
-				<ColorPanelDropdown
-					key={ item.key }
-					{ ...item }
-					colorGradientControlSettings={ {
-						colors,
-						disableCustomColors: ! areCustomSolidsEnabled,
-						gradients,
-						disableCustomGradients: ! areCustomGradientsEnabled,
-					} }
-					panelId={ panelId }
-				/>
-			) ) }
+			{ items.map( ( item ) => {
+				const { key, ...restItem } = item;
+				return (
+					<ColorPanelDropdown
+						key={ key }
+						{ ...restItem }
+						colorGradientControlSettings={ {
+							colors,
+							disableCustomColors: ! areCustomSolidsEnabled,
+							gradients,
+							disableCustomGradients: ! areCustomGradientsEnabled,
+						} }
+						panelId={ panelId }
+					/>
+				);
+			} ) }
 			{ children }
 		</Wrapper>
 	);
diff --git a/packages/block-editor/src/components/global-styles/color-panel.native.js b/packages/block-editor/src/components/global-styles/color-panel.native.js
index c69c9e26f902c..fcbff4e5a07d7 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
@@ -4,7 +4,6 @@
 import { useSelect } from '@wordpress/data';
 import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { useGlobalStyles } from '@wordpress/components';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
@@ -21,6 +20,7 @@ import {
 	useHasTextPanel,
 	useHasBackgroundPanel,
 } from './color-panel.js';
+import { useGlobalStyles } from './use-global-styles-context';
 
 const ColorPanel = ( {
 	value,
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 6e5c46d85b900..9718545795f7c 100644
--- a/packages/block-editor/src/components/global-styles/dimensions-panel.js
+++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -100,14 +100,13 @@ function useHasChildLayout( settings ) {
 }
 
 function useHasSpacingPresets( settings ) {
-	const {
-		custom,
-		theme,
-		default: defaultPresets,
-	} = settings?.spacing?.spacingSizes || {};
-	const presets = custom ?? theme ?? defaultPresets ?? [];
-
-	return presets.length > 0;
+	const { defaultSpacingSizes, spacingSizes } = settings?.spacing || {};
+	return (
+		( defaultSpacingSizes !== false &&
+			spacingSizes?.default?.length > 0 ) ||
+		spacingSizes?.theme?.length > 0 ||
+		spacingSizes?.custom?.length > 0
+	);
 }
 
 function filterValuesBySides( values, sides ) {
@@ -527,7 +526,7 @@ export default function DimensionsPanel( {
 					isShownByDefault={
 						defaultControls.padding ?? DEFAULT_CONTROLS.padding
 					}
-					className={ classnames( {
+					className={ clsx( {
 						'tools-panel-item-spacing': showSpacingPresetsControl,
 					} ) }
 					panelId={ panelId }
@@ -567,7 +566,7 @@ export default function DimensionsPanel( {
 					isShownByDefault={
 						defaultControls.margin ?? DEFAULT_CONTROLS.margin
 					}
-					className={ classnames( {
+					className={ clsx( {
 						'tools-panel-item-spacing': showSpacingPresetsControl,
 					} ) }
 					panelId={ panelId }
@@ -609,7 +608,7 @@ export default function DimensionsPanel( {
 					isShownByDefault={
 						defaultControls.blockGap ?? DEFAULT_CONTROLS.blockGap
 					}
-					className={ classnames( {
+					className={ clsx( {
 						'tools-panel-item-spacing': showSpacingPresetsControl,
 					} ) }
 					panelId={ panelId }
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 79b2c00cf10b0..c22891684278b 100644
--- a/packages/block-editor/src/components/global-styles/filters-panel.js
+++ b/packages/block-editor/src/components/global-styles/filters-panel.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -182,7 +182,7 @@ export default function FiltersPanel( {
 						renderToggle={ ( { onToggle, isOpen } ) => {
 							const toggleProps = {
 								onClick: onToggle,
-								className: classnames( { 'is-open': isOpen } ),
+								className: clsx( { 'is-open': isOpen } ),
 								'aria-expanded': isOpen,
 							};
 
diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js
index e0de34cf2280e..933d97b0c839e 100644
--- a/packages/block-editor/src/components/global-styles/hooks.js
+++ b/packages/block-editor/src/components/global-styles/hooks.js
@@ -60,6 +60,7 @@ const VALID_SETTINGS = [
 	'position.fixed',
 	'position.sticky',
 	'spacing.customSpacingSize',
+	'spacing.defaultSpacingSizes',
 	'spacing.spacingSizes',
 	'spacing.spacingScale',
 	'spacing.blockGap',
@@ -76,6 +77,7 @@ const VALID_SETTINGS = [
 	'typography.fontWeight',
 	'typography.letterSpacing',
 	'typography.lineHeight',
+	'typography.textAlign',
 	'typography.textColumns',
 	'typography.textDecoration',
 	'typography.textTransform',
@@ -206,6 +208,11 @@ 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.
  *
@@ -372,8 +379,13 @@ export function useSettingsForBlockElement(
 			? updatedSettings.shadow
 			: false;
 
+		// Text alignment is only available for blocks.
+		if ( element ) {
+			updatedSettings.typography.textAlign = false;
+		}
+
 		return updatedSettings;
-	}, [ parentSettings, supportedStyles, supports ] );
+	}, [ parentSettings, supportedStyles, supports, element ] );
 }
 
 export function useColorsPerOrigin( settings ) {
diff --git a/packages/block-editor/src/components/global-styles/index.js b/packages/block-editor/src/components/global-styles/index.js
index 7ad192fac9b4f..062df0a5606e9 100644
--- a/packages/block-editor/src/components/global-styles/index.js
+++ b/packages/block-editor/src/components/global-styles/index.js
@@ -3,10 +3,13 @@ export {
 	useGlobalSetting,
 	useGlobalStyle,
 	useSettingsForBlockElement,
+	useGlobalStyleLinks,
 } from './hooks';
 export { getBlockCSSSelector } from './get-block-css-selector';
 export {
 	getLayoutStyles,
+	getBlockSelectors,
+	toStyles,
 	useGlobalStylesOutput,
 	useGlobalStylesOutputWithConfig,
 } from './use-global-styles-output';
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 0a8028488993f..a30e209027a2b 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
@@ -18,7 +18,7 @@ import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -32,6 +32,11 @@ 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 );
@@ -59,8 +64,6 @@ export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 }
 
 export function ShadowPresets( { presets, activeShadow, onSelect } ) {
-	const { CompositeV2: Composite, useCompositeStoreV2: useCompositeStore } =
-		unlock( componentsPrivateApis );
 	const compositeStore = useCompositeStore();
 	return ! presets ? null : (
 		<Composite
@@ -86,21 +89,17 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) {
 }
 
 export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) {
-	const { CompositeItemV2: CompositeItem } = unlock( componentsPrivateApis );
 	return (
 		<CompositeItem
 			role="option"
 			aria-label={ label }
 			aria-selected={ isActive }
-			className={ classNames(
-				'block-editor-global-styles__shadow__item',
-				{
-					'is-active': isActive,
-				}
-			) }
+			className={ clsx( 'block-editor-global-styles__shadow__item', {
+				'is-active': isActive,
+			} ) }
 			render={
 				<Button
-					className={ classNames(
+					className={ clsx(
 						'block-editor-global-styles__shadow-indicator',
 						{
 							unset: type === 'unset',
@@ -147,7 +146,7 @@ function renderShadowToggle() {
 	return ( { onToggle, isOpen } ) => {
 		const toggleProps = {
 			onClick: onToggle,
-			className: classNames( { 'is-open': isOpen } ),
+			className: clsx( { 'is-open': isOpen } ),
 			'aria-expanded': isOpen,
 		};
 
@@ -173,8 +172,11 @@ export function useShadowPresets( settings ) {
 		}
 
 		const defaultPresetsEnabled = settings?.shadow?.defaultPresets;
-		const { default: defaultShadows, theme: themeShadows } =
-			settings?.shadow?.presets ?? {};
+		const {
+			default: defaultShadows,
+			theme: themeShadows,
+			custom: customShadows,
+		} = settings?.shadow?.presets ?? {};
 		const unsetShadow = {
 			name: __( 'Unset' ),
 			slug: 'unset',
@@ -184,6 +186,7 @@ export function useShadowPresets( settings ) {
 		const shadowPresets = [
 			...( ( defaultPresetsEnabled && defaultShadows ) || EMPTY_ARRAY ),
 			...( themeShadows || EMPTY_ARRAY ),
+			...( customShadows || EMPTY_ARRAY ),
 		];
 		if ( shadowPresets.length ) {
 			shadowPresets.unshift( unsetShadow );
diff --git a/packages/block-editor/src/components/global-styles/test/get-global-styles-changes.js b/packages/block-editor/src/components/global-styles/test/get-global-styles-changes.js
index 6eb4974ec041a..9c220da7ead12 100644
--- a/packages/block-editor/src/components/global-styles/test/get-global-styles-changes.js
+++ b/packages/block-editor/src/components/global-styles/test/get-global-styles-changes.js
@@ -20,7 +20,6 @@ describe( 'getGlobalStylesChanges and utils', () => {
 			background: {
 				backgroundImage: {
 					url: 'https://example.com/image.jpg',
-					source: 'file',
 				},
 				backgroundSize: 'contain',
 				backgroundPosition: '30% 30%',
@@ -96,7 +95,6 @@ describe( 'getGlobalStylesChanges and utils', () => {
 			background: {
 				backgroundImage: {
 					url: 'https://example.com/image_new.jpg',
-					source: 'file',
 				},
 				backgroundSize: 'contain',
 				backgroundPosition: '40% 77%',
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
new file mode 100644
index 0000000000000..06c482b67826b
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/test/theme-file-uri-utils.js
@@ -0,0 +1,66 @@
+/**
+ * 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/components/src/mobile/global-styles-context/test/fixtures/theme.native.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-context.native.js
similarity index 53%
rename from packages/components/src/mobile/global-styles-context/test/fixtures/theme.native.js
rename to packages/block-editor/src/components/global-styles/test/use-global-styles-context.native.js
index c9732f7825c35..a247b4132b1ff 100644
--- a/packages/components/src/mobile/global-styles-context/test/fixtures/theme.native.js
+++ b/packages/block-editor/src/components/global-styles/test/use-global-styles-context.native.js
@@ -1,10 +1,20 @@
-export const DEFAULT_COLORS = [
+/**
+ * Internal dependencies
+ */
+import {
+	getBlockPaddings,
+	getBlockColors,
+	parseStylesVariables,
+	getGlobalStyles,
+} from '../use-global-styles-context';
+
+const DEFAULT_COLORS = [
 	{ color: '#cd2653', name: 'Accent Color', slug: 'accent' },
 	{ color: '#000000', name: 'Primary', slug: 'primary' },
 	{ color: '#6d6d6d', name: 'Secondary', slug: 'secondary' },
 ];
 
-export const GLOBAL_STYLES_PALETTE = [
+const GLOBAL_STYLES_PALETTE = [
 	{
 		slug: 'green',
 		color: '#D1E4DD',
@@ -27,7 +37,7 @@ export const GLOBAL_STYLES_PALETTE = [
 	},
 ];
 
-export const GLOBAL_STYLES_GRADIENTS = {
+const GLOBAL_STYLES_GRADIENTS = {
 	default: [
 		{
 			name: 'Vivid cyan blue to vivid purple',
@@ -58,7 +68,7 @@ export const GLOBAL_STYLES_GRADIENTS = {
 	],
 };
 
-export const DEFAULT_GLOBAL_STYLES = {
+const DEFAULT_GLOBAL_STYLES = {
 	color: {
 		background: 'var(--wp--preset--color--green)',
 		text: 'var(--wp--preset--color--blue)',
@@ -104,7 +114,7 @@ export const DEFAULT_GLOBAL_STYLES = {
 	},
 };
 
-export const PARSED_GLOBAL_STYLES = {
+const PARSED_GLOBAL_STYLES = {
 	color: {
 		background: '#D1E4DD',
 		text: '#D1DFE4',
@@ -150,7 +160,7 @@ export const PARSED_GLOBAL_STYLES = {
 	},
 };
 
-export const RAW_FEATURES = {
+const RAW_FEATURES = {
 	color: {
 		palette: {
 			default: [
@@ -262,7 +272,7 @@ export const RAW_FEATURES = {
 	},
 };
 
-export const MAPPED_VALUES = {
+const MAPPED_VALUES = {
 	color: {
 		values: GLOBAL_STYLES_PALETTE,
 		slug: 'color',
@@ -272,3 +282,153 @@ export const MAPPED_VALUES = {
 		slug: 'size',
 	},
 };
+
+describe( 'getBlockPaddings', () => {
+	const PADDING = 12;
+
+	it( 'returns no paddings for a block without background color', () => {
+		const paddings = getBlockPaddings(
+			{ color: 'red' },
+			{ backgroundColor: 'red' },
+			{ textColor: 'primary' }
+		);
+		expect( paddings ).toEqual( expect.objectContaining( {} ) );
+	} );
+
+	it( 'returns paddings for a block with background color', () => {
+		const paddings = getBlockPaddings(
+			{ color: 'red' },
+			{},
+			{ backgroundColor: 'red', textColor: 'primary' }
+		);
+		expect( paddings ).toEqual(
+			expect.objectContaining( { padding: PADDING } )
+		);
+	} );
+
+	it( 'returns no paddings for an inner block without background color within a parent block with background color', () => {
+		const paddings = getBlockPaddings(
+			{ backgroundColor: 'blue', color: 'yellow', padding: PADDING },
+			{},
+			{ textColor: 'primary' }
+		);
+
+		expect( paddings ).toEqual(
+			expect.not.objectContaining( { padding: PADDING } )
+		);
+	} );
+} );
+
+describe( 'getBlockColors', () => {
+	it( 'returns the theme colors correctly', () => {
+		const blockColors = getBlockColors(
+			{ backgroundColor: 'accent', textColor: 'secondary' },
+			DEFAULT_COLORS
+		);
+		expect( blockColors ).toEqual(
+			expect.objectContaining( {
+				backgroundColor: '#cd2653',
+				color: '#6d6d6d',
+			} )
+		);
+	} );
+
+	it( 'returns custom background color correctly', () => {
+		const blockColors = getBlockColors(
+			{ backgroundColor: '#222222', textColor: 'accent' },
+			DEFAULT_COLORS
+		);
+		expect( blockColors ).toEqual(
+			expect.objectContaining( {
+				backgroundColor: '#222222',
+				color: '#cd2653',
+			} )
+		);
+	} );
+
+	it( 'returns custom text color correctly', () => {
+		const blockColors = getBlockColors(
+			{ textColor: '#4ddddd' },
+			DEFAULT_COLORS
+		);
+		expect( blockColors ).toEqual(
+			expect.objectContaining( {
+				color: '#4ddddd',
+			} )
+		);
+	} );
+} );
+
+describe( 'parseStylesVariables', () => {
+	it( 'returns the parsed preset values correctly', () => {
+		const customValues = parseStylesVariables(
+			JSON.stringify( RAW_FEATURES.custom ),
+			MAPPED_VALUES
+		);
+		const blockColors = parseStylesVariables(
+			JSON.stringify( DEFAULT_GLOBAL_STYLES ),
+			MAPPED_VALUES,
+			customValues
+		);
+		expect( blockColors ).toEqual(
+			expect.objectContaining( PARSED_GLOBAL_STYLES )
+		);
+	} );
+
+	it( 'returns the parsed custom color values correctly', () => {
+		const defaultStyles = {
+			...DEFAULT_GLOBAL_STYLES,
+			color: {
+				text: 'var(--wp--custom--color--blue)',
+				background: 'var(--wp--custom--color--green)',
+			},
+		};
+		const customValues = parseStylesVariables(
+			JSON.stringify( RAW_FEATURES.custom ),
+			MAPPED_VALUES
+		);
+		const styles = parseStylesVariables(
+			JSON.stringify( defaultStyles ),
+			MAPPED_VALUES,
+			customValues
+		);
+		expect( styles ).toEqual(
+			expect.objectContaining( PARSED_GLOBAL_STYLES )
+		);
+	} );
+} );
+
+describe( 'getGlobalStyles', () => {
+	it( 'returns the global styles data correctly', () => {
+		const rawFeatures = JSON.stringify( RAW_FEATURES );
+		const gradients = parseStylesVariables(
+			JSON.stringify( GLOBAL_STYLES_GRADIENTS ),
+			MAPPED_VALUES
+		);
+
+		const globalStyles = getGlobalStyles(
+			JSON.stringify( DEFAULT_GLOBAL_STYLES ),
+			rawFeatures
+		);
+
+		expect( globalStyles ).toEqual(
+			expect.objectContaining( {
+				__experimentalFeatures: {
+					color: {
+						palette: RAW_FEATURES.color.palette,
+						gradients,
+						text: true,
+						background: true,
+						defaultPalette: true,
+						defaultGradients: true,
+					},
+					typography: {
+						fontSizes: RAW_FEATURES.typography.fontSizes,
+						customLineHeight: RAW_FEATURES.custom[ 'line-height' ],
+					},
+				},
+				__experimentalGlobalStylesBaseStyles: PARSED_GLOBAL_STYLES,
+			} )
+		);
+	} );
+} );
diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
index 95de3d4007079..b858a2e4140ea 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
@@ -480,7 +480,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
-				':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }:where(body){background-color: red;margin: 10px;padding: 10px;}:where(a:where(:not(.wp-element-button))){color: blue;}a:where(:not(.wp-element-button)):hover{color: orange;}a:where(:not(.wp-element-button)):focus{color: orange;}:where(h1){font-size: 42px;}:where(.wp-block-group){margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}:where(h1,h2,h3,h4,h5,h6){color: orange;}:where(h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button))){color: hotpink;}h1 a:where(:not(.wp-element-button)):hover,h2 a:where(:not(.wp-element-button)):hover,h3 a:where(:not(.wp-element-button)):hover,h4 a:where(:not(.wp-element-button)):hover,h5 a:where(:not(.wp-element-button)):hover,h6 a:where(:not(.wp-element-button)):hover{color: red;}h1 a:where(:not(.wp-element-button)):focus,h2 a:where(:not(.wp-element-button)):focus,h3 a:where(:not(.wp-element-button)):focus,h4 a:where(:not(.wp-element-button)):focus,h5 a:where(:not(.wp-element-button)):focus,h6 a:where(:not(.wp-element-button)):focus{color: red;}:where(.wp-block-image img, .wp-block-image .wp-crop-area){border-radius: 9999px;}:where(.wp-block-image){color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
+				':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }:root :where(body){background-color: red;margin: 10px;padding: 10px;}:root :where(a:where(:not(.wp-element-button))){color: blue;}a:where(:not(.wp-element-button)):hover{color: orange;}a:where(:not(.wp-element-button)):focus{color: orange;}:root :where(h1){font-size: 42px;}:root :where(.wp-block-group){margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}:root :where(h1,h2,h3,h4,h5,h6){color: orange;}:root :where(h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button))){color: hotpink;}h1 a:where(:not(.wp-element-button)):hover,h2 a:where(:not(.wp-element-button)):hover,h3 a:where(:not(.wp-element-button)):hover,h4 a:where(:not(.wp-element-button)):hover,h5 a:where(:not(.wp-element-button)):hover,h6 a:where(:not(.wp-element-button)):hover{color: red;}h1 a:where(:not(.wp-element-button)):focus,h2 a:where(:not(.wp-element-button)):focus,h3 a:where(:not(.wp-element-button)):focus,h4 a:where(:not(.wp-element-button)):focus,h5 a:where(:not(.wp-element-button)):focus,h6 a:where(:not(.wp-element-button)):focus{color: red;}:root :where(.wp-block-image img, .wp-block-image .wp-crop-area){border-radius: 9999px;}:root :where(.wp-block-image){color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);
 		} );
 
@@ -520,7 +520,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
-				':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }:where(.wp-image-spacing){padding-top: 1px;}:where(.wp-image-border-color){border-color: red;}:where(.wp-image-border){border-radius: 9999px;}:where(.wp-image){color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
+				':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }:root :where(.wp-image-spacing){padding-top: 1px;}:root :where(.wp-image-border-color){border-color: red;}:root :where(.wp-image-border){border-radius: 9999px;}:root :where(.wp-image){color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
 			);
 		} );
 
@@ -566,7 +566,8 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
-				':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }.is-style-foo.wp-image.wp-image-spacing{padding-top: 2px;}.is-style-foo.wp-image.wp-image-border-color{border-color: blue;}.is-style-foo.wp-image{color: blue;}.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(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }' +
+					':root :where(.is-style-foo.wp-image.wp-image-spacing){padding-top: 2px;}:root :where(.is-style-foo.wp-image.wp-image-border-color){border-color: blue;}:root :where(.is-style-foo.wp-image){color: blue;}.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; }'
 			);
 		} );
 
@@ -725,7 +726,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				':where(.is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(.is-layout-flow) > * + * { margin-block-start: 0.5em; margin-block-end: 0; }: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; }'
+				'.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; }'
 			);
 		} );
 
@@ -742,7 +743,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				':where(.is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(.is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }: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; }'
+				'.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; }'
 			);
 		} );
 
@@ -759,7 +760,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				':where(.wp-block-group-is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(.wp-block-group-is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:where(.wp-block-group-is-layout-flex) { gap: 12px; }'
+				'.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; }'
 			);
 		} );
 
@@ -996,7 +997,7 @@ describe( 'global styles renderer', () => {
 		it( 'should return processed CSS without any nested selectors', () => {
 			expect(
 				processCSSNesting( 'color: red; margin: auto;', '.foo' )
-			).toEqual( '.foo{color: red; margin: auto;}' );
+			).toEqual( ':root :where(.foo){color: red; margin: auto;}' );
 		} );
 		it( 'should return processed CSS with nested selectors', () => {
 			expect(
@@ -1005,7 +1006,7 @@ describe( 'global styles renderer', () => {
 					'.foo'
 				)
 			).toEqual(
-				'.foo{color: red; margin: auto;}.foo.one{color: blue;}.foo .two{color: green;}'
+				':root :where(.foo){color: red; margin: auto;}:root :where(.foo.one){color: blue;}:root :where(.foo .two){color: green;}'
 			);
 		} );
 		it( 'should return processed CSS with pseudo elements', () => {
@@ -1015,7 +1016,7 @@ describe( 'global styles renderer', () => {
 					'.foo'
 				)
 			).toEqual(
-				'.foo{color: red; margin: auto;}.foo::before{color: blue;}.foo ::before{color: green;}.foo.one::before{color: yellow;}.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;}'
 			);
 		} );
 		it( 'should return processed CSS with multiple root selectors', () => {
@@ -1025,7 +1026,7 @@ describe( 'global styles renderer', () => {
 					'.foo, .bar'
 				)
 			).toEqual(
-				'.foo, .bar{color: red; margin: auto;}.foo.one, .bar.one{color: blue;}.foo .two, .bar .two{color: green;}.foo::before, .bar::before{color: yellow;}.foo ::before, .bar ::before{color: purple;}.foo.three::before, .bar.three::before{color: orange;}.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::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;}'
 			);
 		} );
 	} );
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
new file mode 100644
index 0000000000000..1ab05a45f0d54
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/theme-file-uri-utils.js
@@ -0,0 +1,77 @@
+/**
+ * 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 76836c775bb80..3106723945fe8 100644
--- a/packages/block-editor/src/components/global-styles/typography-panel.js
+++ b/packages/block-editor/src/components/global-styles/typography-panel.js
@@ -8,16 +8,16 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { mergeOrigins, hasOriginValue } from '../../store/get-block-settings';
 import FontFamilyControl from '../font-family';
 import FontAppearanceControl from '../font-appearance-control';
 import LineHeightControl from '../line-height-control';
 import LetterSpacingControl from '../letter-spacing-control';
+import TextAlignmentControl from '../text-alignment-control';
 import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
 import WritingModeControl from '../writing-mode-control';
@@ -32,6 +32,7 @@ export function useHasTypographyPanel( settings ) {
 	const hasLineHeight = useHasLineHeightControl( settings );
 	const hasFontAppearance = useHasAppearanceControl( settings );
 	const hasLetterSpacing = useHasLetterSpacingControl( settings );
+	const hasTextAlign = useHasTextAlignmentControl( settings );
 	const hasTextTransform = useHasTextTransformControl( settings );
 	const hasTextDecoration = useHasTextDecorationControl( settings );
 	const hasWritingMode = useHasWritingModeControl( settings );
@@ -43,6 +44,7 @@ export function useHasTypographyPanel( settings ) {
 		hasLineHeight ||
 		hasFontAppearance ||
 		hasLetterSpacing ||
+		hasTextAlign ||
 		hasTextTransform ||
 		hasFontSize ||
 		hasTextDecoration ||
@@ -62,7 +64,9 @@ function useHasFontSizeControl( settings ) {
 }
 
 function useHasFontFamilyControl( settings ) {
-	return hasOriginValue( settings?.typography?.fontFamilies );
+	return [ 'default', 'theme', 'custom' ].some(
+		( key ) => settings?.typography?.fontFamilies?.[ key ]?.length
+	);
 }
 
 function useHasLineHeightControl( settings ) {
@@ -91,6 +95,10 @@ function useHasTextTransformControl( settings ) {
 	return settings?.typography?.textTransform;
 }
 
+function useHasTextAlignmentControl( settings ) {
+	return settings?.typography?.textAlign;
+}
+
 function useHasTextDecorationControl( settings ) {
 	return settings?.typography?.textDecoration;
 }
@@ -150,6 +158,7 @@ const DEFAULT_CONTROLS = {
 	fontAppearance: true,
 	lineHeight: true,
 	letterSpacing: true,
+	textAlign: true,
 	textTransform: true,
 	textDecoration: true,
 	writingMode: true,
@@ -170,8 +179,12 @@ export default function TypographyPanel( {
 
 	// Font Family
 	const hasFontFamilyEnabled = useHasFontFamilyControl( settings );
-	const fontFamilies = settings?.typography?.fontFamilies ?? {};
-	const mergedFontFamilies = fontFamilies ? mergeOrigins( fontFamilies ) : [];
+	const fontFamilies = settings?.typography?.fontFamilies;
+	const mergedFontFamilies = useMemo( () => {
+		return [ 'default', 'theme', 'custom' ].flatMap(
+			( key ) => fontFamilies?.[ key ] ?? []
+		);
+	}, [ fontFamilies ] );
 	const fontFamily = decodeValue( inheritedValue?.typography?.fontFamily );
 	const setFontFamily = ( newValue ) => {
 		const slug = mergedFontFamilies?.find(
@@ -334,6 +347,22 @@ export default function TypographyPanel( {
 	const hasWritingMode = () => !! value?.typography?.writingMode;
 	const resetWritingMode = () => setWritingMode( undefined );
 
+	// Text Alignment
+	const hasTextAlignmentControl = useHasTextAlignmentControl( settings );
+
+	const textAlign = decodeValue( inheritedValue?.typography?.textAlign );
+	const setTextAlign = ( newValue ) => {
+		onChange(
+			setImmutably(
+				value,
+				[ 'typography', 'textAlign' ],
+				newValue || undefined
+			)
+		);
+	};
+	const hasTextAlign = () => !! value?.typography?.textAlign;
+	const resetTextAlign = () => setTextAlign( undefined );
+
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
 			...previousValue,
@@ -514,6 +543,22 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ hasTextAlignmentControl && (
+				<ToolsPanelItem
+					label={ __( 'Text alignment' ) }
+					hasValue={ hasTextAlign }
+					onDeselect={ resetTextAlign }
+					isShownByDefault={ defaultControls.textAlign }
+					panelId={ panelId }
+				>
+					<TextAlignmentControl
+						value={ textAlign }
+						onChange={ setTextAlign }
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					/>
+				</ToolsPanelItem>
+			) }
 		</Wrapper>
 	);
 }
diff --git a/packages/components/src/mobile/global-styles-context/utils.native.js b/packages/block-editor/src/components/global-styles/use-global-styles-context.native.js
similarity index 85%
rename from packages/components/src/mobile/global-styles-context/utils.native.js
rename to packages/block-editor/src/components/global-styles/use-global-styles-context.native.js
index f03a2afa77c40..31bcd899fda7a 100644
--- a/packages/components/src/mobile/global-styles-context/utils.native.js
+++ b/packages/block-editor/src/components/global-styles/use-global-styles-context.native.js
@@ -8,20 +8,18 @@ import { colord } from 'colord';
 /**
  * WordPress dependencies
  */
-import {
-	useSettings,
-	useMultipleOriginColorsAndGradients,
-	SETTINGS_DEFAULTS,
-} from '@wordpress/block-editor';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { createContext, useContext } from '@wordpress/element';
+import { getPxFromCssUnit } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import { default as getPxFromCssUnit } from '../utils/get-px-from-css-unit';
-import { useGlobalStyles } from './index.native';
+import useMultipleOriginColorsAndGradients from '../colors-gradients/use-multiple-origin-colors-and-gradients';
+import { useSettings } from '../use-settings';
+import { SETTINGS_DEFAULTS } from '../../store/defaults';
 
-export const BLOCK_STYLE_ATTRIBUTES = [
+const BLOCK_STYLE_ATTRIBUTES = [
 	'textColor',
 	'backgroundColor',
 	'style',
@@ -29,6 +27,9 @@ export const BLOCK_STYLE_ATTRIBUTES = [
 	'fontSize',
 ];
 
+export const GlobalStylesContext = createContext( { style: {} } );
+GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES = BLOCK_STYLE_ATTRIBUTES;
+
 // Mapping style properties name to native.
 const BLOCK_STYLE_ATTRIBUTES_MAPPING = {
 	textColor: 'color',
@@ -141,7 +142,7 @@ export function getBlockColors(
 	return blockStyles;
 }
 
-export function getBlockTypography(
+function getBlockTypography(
 	blockStyleAttributes,
 	fontSizes,
 	blockName,
@@ -310,7 +311,7 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 	return JSON.parse( stylesBase );
 }
 
-export function getMappedValues( features, palette ) {
+function getMappedValues( features, palette ) {
 	const typography = features?.typography;
 	const colors = [
 		...( palette?.theme || [] ),
@@ -472,6 +473,81 @@ export function getGlobalStyles( rawStyles, rawFeatures ) {
 	};
 }
 
+export const getMergedGlobalStyles = (
+	baseGlobalStyles,
+	globalStyle,
+	wrapperPropsStyle,
+	blockAttributes,
+	defaultColors,
+	blockName,
+	fontSizes
+) => {
+	// Current support for general styles and blocks.
+	const baseGlobalColors = {
+		baseColors: {
+			color: baseGlobalStyles?.color,
+			typography: baseGlobalStyles?.typography,
+			elements: {
+				link: baseGlobalStyles?.elements?.link,
+			},
+			blocks: {
+				'core/button': baseGlobalStyles?.blocks?.[ 'core/button' ],
+			},
+		},
+	};
+
+	const blockStyleAttributes = Object.fromEntries(
+		Object.entries( blockAttributes ?? {} ).filter( ( [ key ] ) =>
+			BLOCK_STYLE_ATTRIBUTES.includes( key )
+		)
+	);
+
+	// This prevents certain wrapper styles from being applied to blocks that
+	// don't support them yet.
+	const wrapperPropsStyleFiltered = Object.fromEntries(
+		Object.entries( wrapperPropsStyle ?? {} ).filter( ( [ key ] ) =>
+			BLOCK_STYLE_ATTRIBUTES.includes( key )
+		)
+	);
+
+	const mergedStyle = {
+		...baseGlobalColors,
+		...globalStyle,
+		...wrapperPropsStyleFiltered,
+	};
+	const blockColors = getBlockColors(
+		blockStyleAttributes,
+		defaultColors,
+		blockName,
+		baseGlobalStyles
+	);
+	const blockPaddings = getBlockPaddings(
+		mergedStyle,
+		wrapperPropsStyle,
+		blockStyleAttributes,
+		blockColors
+	);
+	const blockTypography = getBlockTypography(
+		blockStyleAttributes,
+		fontSizes,
+		blockName,
+		baseGlobalStyles
+	);
+
+	return {
+		...mergedStyle,
+		...blockPaddings,
+		...blockColors,
+		...blockTypography,
+	};
+};
+
+export const useGlobalStyles = () => {
+	const globalStyles = useContext( GlobalStylesContext );
+
+	return globalStyles;
+};
+
 /**
  * Determine and apply appropriate color scheme based on global styles or device's light/dark mode.
  *
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 23bb88efc9991..28e1ddac9ab1d 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
@@ -21,6 +21,7 @@ import {
 	ROOT_BLOCK_SELECTOR,
 	ROOT_CSS_PROPERTIES_SELECTOR,
 	scopeSelector,
+	scopeFeatureSelectors,
 	appendToSelector,
 	getBlockStyleVariationSelector,
 } from './utils';
@@ -33,8 +34,8 @@ import { getGapCSSValue } from '../../hooks/gap';
 import { store as blockEditorStore } from '../../store';
 import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
 import { getValueFromObjectPath, setImmutably } from '../../utils/object';
-import BlockContext from '../block-context';
 import { unlock } from '../../lock-unlock';
+import { setThemeFileUris } from './theme-file-uri-utils';
 
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
@@ -44,6 +45,7 @@ const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
 	spacing: 'spacing',
 	typography: 'typography',
 };
+const { kebabCase } = unlock( componentsPrivateApis );
 
 function compileStyleValue( uncompiledValue ) {
 	const VARIABLE_REFERENCE_PREFIX = 'var:';
@@ -69,8 +71,6 @@ function compileStyleValue( uncompiledValue ) {
  * @return {Array<Object>} An array of style declarations.
  */
 function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
-	const { kebabCase } = unlock( componentsPrivateApis );
-
 	return PRESET_METADATA.reduce(
 		( declarations, { path, valueKey, valueFunc, cssVarInfix } ) => {
 			const presetByOrigin = getValueFromObjectPath(
@@ -115,8 +115,6 @@ function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
  * @return {string} CSS declarations for the preset classes.
  */
 function getPresetsClasses( blockSelector = '*', blockPresets = {} ) {
-	const { kebabCase } = unlock( componentsPrivateApis );
-
 	return PRESET_METADATA.reduce(
 		( declarations, { path, cssVarInfix, classes } ) => {
 			if ( ! classes ) {
@@ -181,7 +179,6 @@ function getPresetsSvgFilters( blockPresets = {} ) {
 }
 
 function flattenTree( input = {}, prefix, token ) {
-	const { kebabCase } = unlock( componentsPrivateApis );
 	let result = [];
 	Object.keys( input ).forEach( ( key ) => {
 		const newKey = prefix + kebabCase( key.replace( '/', '-' ) );
@@ -313,7 +310,7 @@ const getFeatureDeclarations = ( selectors, styles ) => {
  *
  * @param {Object}  tree                A theme.json tree containing layout definitions.
  *
- * @param {boolean} isTemplate          Whether the entity being edited is a full template or a pattern.
+ * @param {boolean} disableRootPadding  Whether to force disable the root padding styles.
  * @return {Array} An array of style declarations.
  */
 export function getStylesDeclarations(
@@ -321,9 +318,8 @@ export function getStylesDeclarations(
 	selector = '',
 	useRootPaddingAlign,
 	tree = {},
-	isTemplate = true
+	disableRootPadding = false
 ) {
-	const { kebabCase } = unlock( componentsPrivateApis );
 	const isRoot = ROOT_BLOCK_SELECTOR === selector;
 	const output = Object.entries( STYLE_PROPERTY ).reduce(
 		(
@@ -398,7 +394,7 @@ export function getStylesDeclarations(
 		// Don't output padding properties if padding variables are set or if we're not editing a full template.
 		if (
 			isRoot &&
-			( useRootPaddingAlign || ! isTemplate ) &&
+			( useRootPaddingAlign || disableRootPadding ) &&
 			rule.key.startsWith( 'padding' )
 		) {
 			return;
@@ -527,10 +523,10 @@ export function getLayoutStyles( {
 							} else {
 								combinedSelector =
 									selector === ROOT_BLOCK_SELECTOR
-										? `:where(.${ className })${
+										? `.${ className }${
 												spacingStyle?.selector || ''
 										  }`
-										: `:where(${ selector }-${ className })${
+										: `${ selector }-${ className }${
 												spacingStyle?.selector || ''
 										  }`;
 							}
@@ -651,14 +647,104 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 
 			if ( node?.variations ) {
 				const variations = {};
-				Object.keys( node.variations ).forEach( ( variation ) => {
-					variations[ variation ] = pickStyleKeys(
-						node.variations[ variation ]
-					);
-				} );
+				Object.entries( node.variations ).forEach(
+					( [ variationName, variation ] ) => {
+						variations[ variationName ] =
+							pickStyleKeys( variation );
+
+						const variationSelector =
+							blockSelectors[ blockName ]
+								.styleVariationSelectors?.[ variationName ];
+
+						// Process the variation's inner element styles.
+						// This comes before the inner block styles so the
+						// element styles within the block type styles take
+						// precedence over these.
+						Object.entries( variation?.elements ?? {} ).forEach(
+							( [ element, elementStyles ] ) => {
+								if ( elementStyles && ELEMENTS[ element ] ) {
+									nodes.push( {
+										styles: elementStyles,
+										selector: scopeSelector(
+											variationSelector,
+											ELEMENTS[ element ]
+										),
+									} );
+								}
+							}
+						);
+
+						// Process the variations inner block type styles.
+						Object.entries( variation?.blocks ?? {} ).forEach(
+							( [
+								variationBlockName,
+								variationBlockStyles,
+							] ) => {
+								const variationBlockSelector = scopeSelector(
+									variationSelector,
+									blockSelectors[ variationBlockName ]
+										.selector
+								);
+								const variationDuotoneSelector = scopeSelector(
+									variationSelector,
+									blockSelectors[ variationBlockName ]
+										.duotoneSelector
+								);
+								const variationFeatureSelectors =
+									scopeFeatureSelectors(
+										variationSelector,
+										blockSelectors[ variationBlockName ]
+											.featureSelectors
+									);
+
+								nodes.push( {
+									selector: variationBlockSelector,
+									duotoneSelector: variationDuotoneSelector,
+									featureSelectors: variationFeatureSelectors,
+									fallbackGapValue:
+										blockSelectors[ variationBlockName ]
+											.fallbackGapValue,
+									hasLayoutSupport:
+										blockSelectors[ variationBlockName ]
+											.hasLayoutSupport,
+									styles: pickStyleKeys(
+										variationBlockStyles
+									),
+								} );
+
+								// Process element styles for the inner blocks
+								// of the variation.
+								Object.entries(
+									variationBlockStyles.elements ?? {}
+								).forEach(
+									( [
+										variationBlockElement,
+										variationBlockElementStyles,
+									] ) => {
+										if (
+											variationBlockElementStyles &&
+											ELEMENTS[ variationBlockElement ]
+										) {
+											nodes.push( {
+												styles: variationBlockElementStyles,
+												selector: scopeSelector(
+													variationBlockSelector,
+													ELEMENTS[
+														variationBlockElement
+													]
+												),
+											} );
+										}
+									}
+								);
+							}
+						);
+					}
+				);
 				blockStyles.variations = variations;
 			}
-			if ( blockStyles && blockSelectors?.[ blockName ]?.selector ) {
+
+			if ( blockSelectors?.[ blockName ]?.selector ) {
 				nodes.push( {
 					duotoneSelector:
 						blockSelectors[ blockName ].duotoneSelector,
@@ -776,7 +862,7 @@ export const toStyles = (
 	hasBlockGapSupport,
 	hasFallbackGapSupport,
 	disableLayoutStyles = false,
-	isTemplate = true,
+	disableRootPadding = false,
 	styleOptions = undefined
 ) => {
 	// These allow opting out of certain sets of styles.
@@ -820,19 +906,18 @@ export const toStyles = (
 		 */
 		ruleset += ':where(body) {margin: 0;';
 
-		// Root padding styles should only be output for full templates, not patterns or template parts.
-		if ( options.rootPadding && useRootPaddingAlign && isTemplate ) {
+		// Root padding styles should be output for full templates, patterns and template parts.
+		if ( options.rootPadding && useRootPaddingAlign ) {
 			/*
 			 * These rules reproduce the ones from https://github.com/WordPress/gutenberg/blob/79103f124925d1f457f627e154f52a56228ed5ad/lib/class-wp-theme-json-gutenberg.php#L2508
 			 * almost exactly, but for the selectors that target block wrappers in the front end. This code only runs in the editor, so it doesn't need those selectors.
 			 */
 			ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
 				.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
-				.has-global-padding :where(.has-global-padding:not(.wp-block-block)) { padding-right: 0; padding-left: 0; }
 				.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
-				.has-global-padding :where(.has-global-padding:not(.wp-block-block)) > .alignfull { margin-right: 0; margin-left: 0; }
-				.has-global-padding > .alignfull:where(:not(.has-global-padding):not(.is-layout-flex):not(.is-layout-grid)) > :where(.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
-				.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where(.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0;`;
+				.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }
+				.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0;
+				`;
 		}
 
 		ruleset += '}';
@@ -861,12 +946,56 @@ export const toStyles = (
 						( [ cssSelector, declarations ] ) => {
 							if ( declarations.length ) {
 								const rules = declarations.join( ';' );
-								ruleset += `:where(${ cssSelector }){${ rules };}`;
+								ruleset += `:root :where(${ cssSelector }){${ rules };}`;
 							}
 						}
 					);
 				}
 
+				// Process duotone styles.
+				if ( duotoneSelector ) {
+					const duotoneStyles = {};
+					if ( styles?.filter ) {
+						duotoneStyles.filter = styles.filter;
+						delete styles.filter;
+					}
+					const duotoneDeclarations =
+						getStylesDeclarations( duotoneStyles );
+					if ( duotoneDeclarations.length ) {
+						ruleset += `${ duotoneSelector }{${ duotoneDeclarations.join(
+							';'
+						) };}`;
+					}
+				}
+
+				// Process blockGap and layout styles.
+				if (
+					! disableLayoutStyles &&
+					( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport )
+				) {
+					ruleset += getLayoutStyles( {
+						style: styles,
+						selector,
+						hasBlockGapSupport,
+						hasFallbackGapSupport,
+						fallbackGapValue,
+					} );
+				}
+
+				// Process the remaining block styles (they use either normal block class or __experimentalSelector).
+				const styleDeclarations = getStylesDeclarations(
+					styles,
+					selector,
+					useRootPaddingAlign,
+					tree,
+					disableRootPadding
+				);
+				if ( styleDeclarations?.length ) {
+					ruleset += `:root :where(${ selector }){${ styleDeclarations.join(
+						';'
+					) };}`;
+				}
+
 				if ( styleVariationSelectors ) {
 					Object.entries( styleVariationSelectors ).forEach(
 						( [ styleVariationName, styleVariationSelector ] ) => {
@@ -893,7 +1022,7 @@ export const toStyles = (
 													);
 												const rules =
 													declarations.join( ';' );
-												ruleset += `${ cssSelector }{${ rules };}`;
+												ruleset += `:root :where(${ cssSelector }){${ rules };}`;
 											}
 										}
 									);
@@ -908,7 +1037,7 @@ export const toStyles = (
 										tree
 									);
 								if ( styleVariationDeclarations.length ) {
-									ruleset += `${ styleVariationSelector }{${ styleVariationDeclarations.join(
+									ruleset += `:root :where(${ styleVariationSelector }){${ styleVariationDeclarations.join(
 										';'
 									) };}`;
 								}
@@ -917,50 +1046,6 @@ export const toStyles = (
 					);
 				}
 
-				// Process duotone styles.
-				if ( duotoneSelector ) {
-					const duotoneStyles = {};
-					if ( styles?.filter ) {
-						duotoneStyles.filter = styles.filter;
-						delete styles.filter;
-					}
-					const duotoneDeclarations =
-						getStylesDeclarations( duotoneStyles );
-					if ( duotoneDeclarations.length ) {
-						ruleset += `${ duotoneSelector }{${ duotoneDeclarations.join(
-							';'
-						) };}`;
-					}
-				}
-
-				// Process blockGap and layout styles.
-				if (
-					! disableLayoutStyles &&
-					( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport )
-				) {
-					ruleset += getLayoutStyles( {
-						style: styles,
-						selector,
-						hasBlockGapSupport,
-						hasFallbackGapSupport,
-						fallbackGapValue,
-					} );
-				}
-
-				// Process the remaining block styles (they use either normal block class or __experimentalSelector).
-				const declarations = getStylesDeclarations(
-					styles,
-					selector,
-					useRootPaddingAlign,
-					tree,
-					isTemplate
-				);
-				if ( declarations?.length ) {
-					ruleset += `:where(${ selector }){${ declarations.join(
-						';'
-					) };}`;
-				}
-
 				// Check for pseudo selector in `styles` and handle separately.
 				const pseudoSelectorStyles = Object.entries( styles ).filter(
 					( [ key ] ) => key.startsWith( ':' )
@@ -976,7 +1061,7 @@ export const toStyles = (
 								return;
 							}
 
-							// `selector` maybe provided in a form
+							// `selector` may be provided in a form
 							// where block level selectors have sub element
 							// selectors appended to them as a comma separated
 							// string.
@@ -1019,13 +1104,13 @@ export const toStyles = (
 			getGapCSSValue( tree?.styles?.spacing?.blockGap ) || '0.5em';
 		ruleset =
 			ruleset +
-			`:where(.wp-site-blocks) > * { margin-block-start: ${ gapValue }; margin-block-end: 0; }`;
+			`:root :where(.wp-site-blocks) > * { margin-block-start: ${ gapValue }; margin-block-end: 0; }`;
 		ruleset =
 			ruleset +
-			':where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
+			':root :where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
 		ruleset =
 			ruleset +
-			':where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';
+			':root :where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';
 	}
 
 	if ( options.presets ) {
@@ -1080,7 +1165,11 @@ const getSelectorsConfig = ( blockType, rootSelector ) => {
 	return config;
 };
 
-export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
+export const getBlockSelectors = (
+	blockTypes,
+	getBlockStyles,
+	variationInstanceId
+) => {
 	const result = {};
 	blockTypes.forEach( ( blockType ) => {
 		const name = blockType.name;
@@ -1110,16 +1199,19 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 
 		const blockStyleVariations = getBlockStyles( name );
 		const styleVariationSelectors = {};
-		if ( blockStyleVariations?.length ) {
-			blockStyleVariations.forEach( ( variation ) => {
-				const styleVariationSelector = getBlockStyleVariationSelector(
-					variation.name,
-					selector
-				);
-				styleVariationSelectors[ variation.name ] =
-					styleVariationSelector;
-			} );
-		}
+		blockStyleVariations?.forEach( ( variation ) => {
+			const variationSuffix = variationInstanceId
+				? `-${ variationInstanceId }`
+				: '';
+			const variationName = `${ variation.name }${ variationSuffix }`;
+			const styleVariationSelector = getBlockStyleVariationSelector(
+				variationName,
+				selector
+			);
+
+			styleVariationSelectors[ variationName ] = styleVariationSelector;
+		} );
+
 		// For each block support feature add any custom selectors.
 		const featureSelectors = getSelectorsConfig( blockType, selector );
 
@@ -1132,8 +1224,7 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 			hasLayoutSupport,
 			name,
 			selector,
-			styleVariationSelectors: Object.keys( styleVariationSelectors )
-				.length
+			styleVariationSelectors: blockStyleVariations?.length
 				? styleVariationSelectors
 				: undefined,
 		};
@@ -1186,7 +1277,7 @@ export function processCSSNesting( css, blockSelector ) {
 		const isRootCss = ! part.includes( '{' );
 		if ( isRootCss ) {
 			// If the part doesn't contain braces, it applies to the root level.
-			processedCSS += `${ blockSelector }{${ part.trim() }}`;
+			processedCSS += `:root :where(${ blockSelector }){${ part.trim() }}`;
 		} else {
 			// If the part contains braces, it's a nested CSS rule.
 			const splittedPart = part.replace( '}', '' ).split( '{' );
@@ -1199,7 +1290,7 @@ export function processCSSNesting( css, blockSelector ) {
 				? scopeSelector( blockSelector, nestedSelector )
 				: appendToSelector( blockSelector, nestedSelector );
 
-			processedCSS += `${ combinedSelector }{${ cssValue.trim() }}`;
+			processedCSS += `:root :where(${ combinedSelector }){${ cssValue.trim() }}`;
 		}
 	} );
 	return processedCSS;
@@ -1212,11 +1303,20 @@ export function processCSSNesting( css, blockSelector ) {
  * The use case for a custom config is to generate bespoke styles
  * and settings for previews, or other out-of-editor experiences.
  *
- * @param {Object} mergedConfig Global styles configuration.
+ * @param {Object}  mergedConfig       Global styles configuration.
+ * @param {boolean} disableRootPadding Disable root padding styles.
+ *
  * @return {Array} Array of stylesheets and settings.
  */
-export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
+export function useGlobalStylesOutputWithConfig(
+	mergedConfig = {},
+	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 ) => {
@@ -1224,10 +1324,6 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 		return !! getSettings().disableLayoutStyles;
 	} );
 
-	const blockContext = useContext( BlockContext );
-
-	const isTemplate = blockContext?.templateSlug !== undefined;
-
 	const { getBlockStyles } = useSelect( blocksStore );
 
 	return useMemo( () => {
@@ -1252,7 +1348,7 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 			hasBlockGapSupport,
 			hasFallbackGapSupport,
 			disableLayoutStyles,
-			isTemplate
+			disableRootPadding
 		);
 		const svgs = toSvgFilters( updatedConfig, blockSelectors );
 
@@ -1299,7 +1395,7 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 		hasFallbackGapSupport,
 		mergedConfig,
 		disableLayoutStyles,
-		isTemplate,
+		disableRootPadding,
 		getBlockStyles,
 	] );
 }
@@ -1307,9 +1403,11 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 /**
  * Returns the global styles output based on the current state of global styles config loaded in the editor context.
  *
+ * @param {boolean} disableRootPadding Disable root padding styles.
+ *
  * @return {Array} Array of stylesheets and settings.
  */
-export function useGlobalStylesOutput() {
+export function useGlobalStylesOutput( disableRootPadding = false ) {
 	const { merged: mergedConfig } = useContext( GlobalStylesContext );
-	return useGlobalStylesOutputWithConfig( mergedConfig );
+	return useGlobalStylesOutputWithConfig( mergedConfig, disableRootPadding );
 }
diff --git a/packages/block-editor/src/components/grid-visualizer/grid-item-resizer.js b/packages/block-editor/src/components/grid-visualizer/grid-item-resizer.js
index 54683e48beeea..21e9bfccee754 100644
--- a/packages/block-editor/src/components/grid-visualizer/grid-item-resizer.js
+++ b/packages/block-editor/src/components/grid-visualizer/grid-item-resizer.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { ResizableBox } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -10,16 +11,84 @@ import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-
 import BlockPopoverCover from '../block-popover/cover';
 import { getComputedCSS } from './utils';
 
-export function GridItemResizer( { clientId, onChange } ) {
+export function GridItemResizer( { clientId, bounds, onChange } ) {
 	const blockElement = useBlockElement( clientId );
-	if ( ! blockElement ) {
+	const rootBlockElement = blockElement?.parentElement;
+
+	if ( ! blockElement || ! rootBlockElement ) {
 		return null;
 	}
+
+	return (
+		<GridItemResizerInner
+			clientId={ clientId }
+			bounds={ bounds }
+			blockElement={ blockElement }
+			rootBlockElement={ rootBlockElement }
+			onChange={ onChange }
+		/>
+	);
+}
+
+function GridItemResizerInner( {
+	clientId,
+	bounds,
+	blockElement,
+	rootBlockElement,
+	onChange,
+} ) {
+	const [ resizeDirection, setResizeDirection ] = useState( null );
+	const [ enableSide, setEnableSide ] = useState( {
+		top: false,
+		bottom: false,
+		left: false,
+		right: false,
+	} );
+
+	useEffect( () => {
+		const observer = new window.ResizeObserver( () => {
+			const blockClientRect = blockElement.getBoundingClientRect();
+			const rootBlockClientRect =
+				rootBlockElement.getBoundingClientRect();
+			setEnableSide( {
+				top: blockClientRect.top > rootBlockClientRect.top,
+				bottom: blockClientRect.bottom < rootBlockClientRect.bottom,
+				left: blockClientRect.left > rootBlockClientRect.left,
+				right: blockClientRect.right < rootBlockClientRect.right,
+			} );
+		} );
+		observer.observe( blockElement );
+		return () => observer.disconnect();
+	}, [ blockElement, rootBlockElement ] );
+
+	const justification = {
+		right: 'flex-start',
+		left: 'flex-end',
+	};
+
+	const alignment = {
+		top: 'flex-end',
+		bottom: 'flex-start',
+	};
+
+	const styles = {
+		display: 'flex',
+		justifyContent: 'center',
+		alignItems: 'center',
+		...( justification[ resizeDirection ] && {
+			justifyContent: justification[ resizeDirection ],
+		} ),
+		...( alignment[ resizeDirection ] && {
+			alignItems: alignment[ resizeDirection ],
+		} ),
+	};
+
 	return (
 		<BlockPopoverCover
 			className="block-editor-grid-item-resizer"
 			clientId={ clientId }
 			__unstablePopoverSlot="block-toolbar"
+			additionalStyles={ styles }
 		>
 			<ResizableBox
 				className="block-editor-grid-item-resizer__box"
@@ -28,50 +97,80 @@ export function GridItemResizer( { clientId, onChange } ) {
 					height: '100%',
 				} }
 				enable={ {
-					bottom: true,
+					bottom: enableSide.bottom,
 					bottomLeft: false,
 					bottomRight: false,
-					left: false,
-					right: true,
-					top: false,
+					left: enableSide.left,
+					right: enableSide.right,
+					top: enableSide.top,
 					topLeft: false,
 					topRight: false,
 				} }
+				bounds={ bounds }
+				boundsByDirection
+				onResizeStart={ ( event, direction ) => {
+					/*
+					 * The container justification and alignment need to be set
+					 * according to the direction the resizer is being dragged in,
+					 * so that it resizes in the right direction.
+					 */
+					setResizeDirection( direction );
+
+					/*
+					 * 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 gridElement = blockElement.parentElement;
 					const columnGap = parseFloat(
-						getComputedCSS( gridElement, 'column-gap' )
+						getComputedCSS( rootBlockElement, 'column-gap' )
 					);
 					const rowGap = parseFloat(
-						getComputedCSS( gridElement, 'row-gap' )
+						getComputedCSS( rootBlockElement, 'row-gap' )
 					);
-					const gridColumnLines = getGridLines(
-						getComputedCSS( gridElement, 'grid-template-columns' ),
+					const gridColumnTracks = getGridTracks(
+						getComputedCSS(
+							rootBlockElement,
+							'grid-template-columns'
+						),
 						columnGap
 					);
-					const gridRowLines = getGridLines(
-						getComputedCSS( gridElement, 'grid-template-rows' ),
+					const gridRowTracks = getGridTracks(
+						getComputedCSS(
+							rootBlockElement,
+							'grid-template-rows'
+						),
 						rowGap
 					);
-					const columnStart = getClosestLine(
-						gridColumnLines,
-						blockElement.offsetLeft
-					);
-					const rowStart = getClosestLine(
-						gridRowLines,
-						blockElement.offsetTop
-					);
-					const columnEnd = getClosestLine(
-						gridColumnLines,
-						blockElement.offsetLeft + boxElement.offsetWidth
-					);
-					const rowEnd = getClosestLine(
-						gridRowLines,
-						blockElement.offsetTop + boxElement.offsetHeight
+					const rect = new window.DOMRect(
+						blockElement.offsetLeft + boxElement.offsetLeft,
+						blockElement.offsetTop + boxElement.offsetTop,
+						boxElement.offsetWidth,
+						boxElement.offsetHeight
 					);
+					const columnStart =
+						getClosestTrack( gridColumnTracks, rect.left ) + 1;
+					const rowStart =
+						getClosestTrack( gridRowTracks, rect.top ) + 1;
+					const columnEnd =
+						getClosestTrack( gridColumnTracks, rect.right, 'end' ) +
+						1;
+					const rowEnd =
+						getClosestTrack( gridRowTracks, rect.bottom, 'end' ) +
+						1;
 					onChange( {
-						columnSpan: Math.max( columnEnd - columnStart, 1 ),
-						rowSpan: Math.max( rowEnd - rowStart, 1 ),
+						columnSpan: columnEnd - columnStart + 1,
+						rowSpan: rowEnd - rowStart + 1,
 					} );
 				} }
 			/>
@@ -79,20 +178,50 @@ export function GridItemResizer( { clientId, onChange } ) {
 	);
 }
 
-function getGridLines( template, gap ) {
-	const lines = [ 0 ];
+/**
+ * Given a grid-template-columns or grid-template-rows CSS property value, gets the start and end
+ * position in pixels of each grid track.
+ *
+ * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
+ *
+ * @param {string} template The grid-template-columns or grid-template-rows CSS property value.
+ *                          Only supports fixed sizes in pixels.
+ * @param {number} gap      The gap between grid tracks in pixels.
+ *
+ * @return {Array<{start: number, end: number}>} An array of objects with the start and end
+ *                                               position in pixels of each grid track.
+ */
+function getGridTracks( template, gap ) {
+	const tracks = [];
 	for ( const size of template.split( ' ' ) ) {
-		const line = parseFloat( size );
-		lines.push( lines[ lines.length - 1 ] + line + gap );
+		const previousTrack = tracks[ tracks.length - 1 ];
+		const start = previousTrack ? previousTrack.end + gap : 0;
+		const end = start + parseFloat( size );
+		tracks.push( { start, end } );
 	}
-	return lines;
+	return tracks;
 }
 
-function getClosestLine( lines, position ) {
-	return lines.reduce(
-		( closest, line, index ) =>
-			Math.abs( line - position ) <
-			Math.abs( lines[ closest ] - position )
+/**
+ * Given an array of grid tracks and a position in pixels, gets the index of the closest track to
+ * that position.
+ *
+ * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
+ *
+ * @param {Array<{start: number, end: number}>} tracks   An array of objects with the start and end
+ *                                                       position in pixels of each grid track.
+ * @param {number}                              position The position in pixels.
+ * @param {string}                              edge     The edge of the track to compare the
+ *                                                       position to. Either 'start' or 'end'.
+ *
+ * @return {number} The index of the closest track to the position. 0-based, unlike CSS grid which
+ *                  is 1-based.
+ */
+function getClosestTrack( tracks, position, edge = 'start' ) {
+	return tracks.reduce(
+		( closest, track, index ) =>
+			Math.abs( track[ edge ] - position ) <
+			Math.abs( tracks[ closest ][ edge ] - position )
 				? index
 				: closest,
 		0
diff --git a/packages/block-editor/src/components/grid-visualizer/grid-visualizer.js b/packages/block-editor/src/components/grid-visualizer/grid-visualizer.js
index 2ca65eb6722e4..cff5efc5218e1 100644
--- a/packages/block-editor/src/components/grid-visualizer/grid-visualizer.js
+++ b/packages/block-editor/src/components/grid-visualizer/grid-visualizer.js
@@ -1,32 +1,44 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, forwardRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import BlockPopoverCover from '../block-popover/cover';
+import { store as blockEditorStore } from '../../store';
 import { getComputedCSS } from './utils';
 
-export function GridVisualizer( { clientId } ) {
+export function GridVisualizer( { clientId, contentRef } ) {
+	const isDistractionFree = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().isDistractionFree,
+		[]
+	);
 	const blockElement = useBlockElement( clientId );
-	if ( ! blockElement ) {
+
+	if ( isDistractionFree || ! blockElement ) {
 		return null;
 	}
+
 	return (
 		<BlockPopoverCover
 			className="block-editor-grid-visualizer"
 			clientId={ clientId }
 			__unstablePopoverSlot="block-toolbar"
 		>
-			<GridVisualizerGrid blockElement={ blockElement } />
+			<GridVisualizerGrid
+				ref={ contentRef }
+				blockElement={ blockElement }
+			/>
 		</BlockPopoverCover>
 	);
 }
 
-function GridVisualizerGrid( { blockElement } ) {
+const GridVisualizerGrid = forwardRef( ( { blockElement }, ref ) => {
 	const [ gridInfo, setGridInfo ] = useState( () =>
 		getGridInfo( blockElement )
 	);
@@ -47,15 +59,22 @@ function GridVisualizerGrid( { blockElement } ) {
 	}, [ blockElement ] );
 	return (
 		<div
+			ref={ ref }
 			className="block-editor-grid-visualizer__grid"
 			style={ gridInfo.style }
 		>
 			{ Array.from( { length: gridInfo.numItems }, ( _, i ) => (
-				<div key={ i } className="block-editor-grid-visualizer__item" />
+				<div
+					key={ i }
+					className="block-editor-grid-visualizer__item"
+					style={ {
+						boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${ gridInfo.currentColor } 20%, #0000)`,
+					} }
+				/>
 			) ) }
 		</div>
 	);
-}
+} );
 
 function getGridInfo( blockElement ) {
 	const gridTemplateColumns = getComputedCSS(
@@ -71,6 +90,7 @@ function getGridInfo( blockElement ) {
 	const numItems = numColumns * numRows;
 	return {
 		numItems,
+		currentColor: getComputedCSS( blockElement, 'color' ),
 		style: {
 			gridTemplateColumns,
 			gridTemplateRows,
diff --git a/packages/block-editor/src/components/grid-visualizer/style.scss b/packages/block-editor/src/components/grid-visualizer/style.scss
index 45140e59c7af9..2adaf18f52470 100644
--- a/packages/block-editor/src/components/grid-visualizer/style.scss
+++ b/packages/block-editor/src/components/grid-visualizer/style.scss
@@ -13,7 +13,8 @@
 }
 
 .block-editor-grid-visualizer__item {
-	border: $border-width dashed $gray-300;
+	outline: 1px solid transparent;
+	border-radius: $radius-block-ui;
 }
 
 .block-editor-grid-item-resizer {
diff --git a/packages/block-editor/src/components/height-control/index.js b/packages/block-editor/src/components/height-control/index.js
index 23738378b6998..71753a67beb02 100644
--- a/packages/block-editor/src/components/height-control/index.js
+++ b/packages/block-editor/src/components/height-control/index.js
@@ -156,7 +156,7 @@ export default function HeightControl( {
 						onChange={ onChange }
 						onUnitChange={ handleUnitChange }
 						min={ 0 }
-						size={ '__unstable-large' }
+						size="__unstable-large"
 						label={ label }
 						hideLabelFromVision
 					/>
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
new file mode 100644
index 0000000000000..165cf70d24a71
--- /dev/null
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -0,0 +1,67 @@
+.block-editor-iframe__body {
+	position: relative;
+}
+
+.block-editor-iframe__container {
+	width: 100%;
+	height: 100%;
+	overflow-x: hidden;
+}
+
+.block-editor-iframe__scale-container {
+	width: 100%;
+	height: 100%;
+}
+
+.block-editor-iframe__scale-container.is-zoomed-out {
+	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
+	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
+	width: $prev-container-width;
+	margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2);
+}
+
+.block-editor-iframe__html {
+	transform-origin: top center;
+	transition: transform 0.3s;
+	@include reduce-motion("transition");
+}
+
+.block-editor-iframe__html.is-zoomed-out {
+	$scale: var(--wp-block-editor-iframe-zoom-out-scale);
+	$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size);
+	$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
+	$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
+	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width);
+
+	transform: scale(#{$scale});
+
+	background-color: $gray-300;
+
+	// Firefox and Safari don't render margin-bottom here and margin-bottom is needed for Chrome
+	// layout, so we use border matching the background instead of margins.
+	border: calc(#{$frame-size} / #{$scale}) solid $gray-300;
+
+	// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,
+	// so we need to adjust the height of the content to match the scale by using negative margins.
+	$extra-content-height: calc(#{$content-height} * (1 - #{$scale}));
+	$total-frame-height: calc(2 * #{$frame-size});
+	$total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px);
+	margin-bottom: calc(-1 * #{$total-height});
+
+	body {
+		min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
+		display: flex;
+		flex-direction: column;
+
+		> .is-root-container {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			height: 100%;
+
+			> main {
+				flex: 1;
+			}
+		}
+	}
+}
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 991830ed868c3..669e2fe25a9fb 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,6 +12,7 @@ import {
 	forwardRef,
 	useMemo,
 	useEffect,
+	useRef,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
@@ -121,13 +122,14 @@ function Iframe( {
 	}, [] );
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
+	const prevContainerWidth = useRef();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
-	const [
-		contentResizeListener,
-		{ height: contentHeight, width: contentWidth },
-	] = useResizeObserver();
+	const [ contentResizeListener, { height: contentHeight } ] =
+		useResizeObserver();
+	const [ containerResizeListener, { width: containerWidth } ] =
+		useResizeObserver();
 
 	const setRef = useRefEffect( ( node ) => {
 		node._load = () => {
@@ -207,9 +209,12 @@ function Iframe( {
 		};
 	}, [] );
 
-	const windowResizeRef = useRefEffect( ( node ) => {
+	const [ iframeWindowInnerHeight, setIframeWindowInnerHeight ] = useState();
+
+	const iframeResizeRef = useRefEffect( ( node ) => {
 		const nodeWindow = node.ownerDocument.defaultView;
 
+		setIframeWindowInnerHeight( nodeWindow.innerHeight );
 		const onResize = () => {
 			setIframeWindowInnerHeight( nodeWindow.innerHeight );
 		};
@@ -219,7 +224,28 @@ function Iframe( {
 		};
 	}, [] );
 
-	const [ iframeWindowInnerHeight, setIframeWindowInnerHeight ] = useState();
+	const [ windowInnerWidth, setWindowInnerWidth ] = useState();
+
+	const windowResizeRef = useRefEffect( ( node ) => {
+		const nodeWindow = node.ownerDocument.defaultView;
+
+		setWindowInnerWidth( nodeWindow.innerWidth );
+		const onResize = () => {
+			setWindowInnerWidth( nodeWindow.innerWidth );
+		};
+		nodeWindow.addEventListener( 'resize', onResize );
+		return () => {
+			nodeWindow.removeEventListener( 'resize', onResize );
+		};
+	}, [] );
+
+	const isZoomedOut = scale !== 1;
+
+	useEffect( () => {
+		if ( ! isZoomedOut ) {
+			prevContainerWidth.current = containerWidth;
+		}
+	}, [ containerWidth, isZoomedOut ] );
 
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
@@ -231,7 +257,7 @@ function Iframe( {
 		// Avoid resize listeners when not needed, these will trigger
 		// unnecessary re-renders when animating the iframe width, or when
 		// expanding preview iframes.
-		scale === 1 ? null : windowResizeRef,
+		isZoomedOut ? iframeResizeRef : null,
 	] );
 
 	// Correct doctype is required to enable rendering in standards
@@ -272,54 +298,80 @@ function Iframe( {
 
 	useEffect( () => cleanup, [ cleanup ] );
 
-	scale =
-		typeof scale === 'function'
-			? scale( contentWidth, contentHeight )
-			: scale;
-
 	useEffect( () => {
-		if ( ! iframeDocument ) {
+		if ( ! iframeDocument || ! isZoomedOut ) {
 			return;
 		}
 
-		if ( scale !== 1 ) {
-			// Hack to get proper margins when scaling the iframe document.
-			const bottomFrameSize = frameSize - contentHeight * ( 1 - scale );
+		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
 
-			iframeDocument.body.classList.add( 'is-zoomed-out' );
+		const maxWidth = 800;
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-scale',
+			scale === 'default'
+				? Math.min( containerWidth, maxWidth ) /
+						prevContainerWidth.current
+				: scale
+		);
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-frame-size',
+			typeof frameSize === 'number' ? `${ frameSize }px` : frameSize
+		);
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-content-height',
+			`${ contentHeight }px`
+		);
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-inner-height',
+			`${ iframeWindowInnerHeight }px`
+		);
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-container-width',
+			`${ containerWidth }px`
+		);
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-prev-container-width',
+			`${ prevContainerWidth.current }px`
+		);
 
-			iframeDocument.documentElement.style.transform = `scale( ${ scale } )`;
-			iframeDocument.documentElement.style.marginTop = `${ frameSize }px`;
-			// TODO: `marginBottom` doesn't work in Firefox. We need another way to do this.
-			iframeDocument.documentElement.style.marginBottom = `${ bottomFrameSize }px`;
-			if ( iframeWindowInnerHeight > contentHeight * scale ) {
-				iframeDocument.body.style.minHeight = `${ Math.floor(
-					( iframeWindowInnerHeight - 2 * frameSize ) / scale
-				) }px`;
-			}
+		return () => {
+			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
 
-			return () => {
-				iframeDocument.body.classList.remove( 'is-zoomed-out' );
-				iframeDocument.documentElement.style.transform = '';
-				iframeDocument.documentElement.style.marginTop = '';
-				iframeDocument.documentElement.style.marginBottom = '';
-				iframeDocument.body.style.minHeight = '';
-			};
-		}
+			iframeDocument.documentElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-scale'
+			);
+			iframeDocument.documentElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-frame-size'
+			);
+			iframeDocument.documentElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-content-height'
+			);
+			iframeDocument.documentElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-inner-height'
+			);
+			iframeDocument.documentElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-container-width'
+			);
+			iframeDocument.documentElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-prev-container-width'
+			);
+		};
 	}, [
 		scale,
 		frameSize,
 		iframeDocument,
-		contentHeight,
 		iframeWindowInnerHeight,
-		contentWidth,
+		contentHeight,
+		containerWidth,
+		windowInnerWidth,
+		isZoomedOut,
 	] );
 
 	// Make sure to not render the before and after focusable div elements in view
 	// mode. They're only needed to capture focus in edit mode.
 	const shouldRenderFocusCaptureElements = tabIndex >= 0 && ! isPreviewMode;
 
-	return (
+	const iframe = (
 		<>
 			{ shouldRenderFocusCaptureElements && before }
 			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
@@ -376,7 +428,7 @@ function Iframe( {
 						/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
 						<body
 							ref={ bodyRef }
-							className={ classnames(
+							className={ clsx(
 								'block-editor-iframe__body',
 								'editor-styles-wrapper',
 								...bodyClasses
@@ -393,6 +445,26 @@ function Iframe( {
 			{ shouldRenderFocusCaptureElements && after }
 		</>
 	);
+
+	return (
+		<div className="block-editor-iframe__container" ref={ windowResizeRef }>
+			{ containerResizeListener }
+			<div
+				className={ clsx(
+					'block-editor-iframe__scale-container',
+					isZoomedOut && 'is-zoomed-out'
+				) }
+				style={ {
+					'--wp-block-editor-iframe-zoom-out-container-width':
+						isZoomedOut && `${ containerWidth }px`,
+					'--wp-block-editor-iframe-zoom-out-prev-container-width':
+						isZoomedOut && `${ prevContainerWidth.current }px`,
+				} }
+			>
+				{ iframe }
+			</div>
+		</div>
+	);
 }
 
 function IframeIfReady( props, ref ) {
diff --git a/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js b/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js
index a15c9f42b9e8e..3f48a634bdbce 100644
--- a/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js
+++ b/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js
@@ -8,34 +8,70 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { useSettings } from '../use-settings';
 import { POPOVER_PROPS } from './constants';
 import { useImageEditingContext } from './context';
 
-function AspectGroup( { aspectRatios, isDisabled, label, onClick, value } ) {
+function AspectRatioGroup( {
+	aspectRatios,
+	isDisabled,
+	label,
+	onClick,
+	value,
+} ) {
 	return (
 		<MenuGroup label={ label }>
-			{ aspectRatios.map( ( { title, aspect } ) => (
+			{ aspectRatios.map( ( { name, slug, ratio } ) => (
 				<MenuItem
-					key={ aspect }
+					key={ slug }
 					disabled={ isDisabled }
 					onClick={ () => {
-						onClick( aspect );
+						onClick( ratio );
 					} }
 					role="menuitemradio"
-					isSelected={ aspect === value }
-					icon={ aspect === value ? check : undefined }
+					isSelected={ ratio === value }
+					icon={ ratio === value ? check : undefined }
 				>
-					{ title }
+					{ name }
 				</MenuItem>
 			) ) }
 		</MenuGroup>
 	);
 }
 
+export function ratioToNumber( str ) {
+	// TODO: support two-value aspect ratio?
+	// https://css-tricks.com/almanac/properties/a/aspect-ratio/#aa-it-can-take-two-values
+	const [ a, b, ...rest ] = str.split( '/' ).map( Number );
+	if (
+		a <= 0 ||
+		b <= 0 ||
+		Number.isNaN( a ) ||
+		Number.isNaN( b ) ||
+		rest.length
+	) {
+		return NaN;
+	}
+	return b ? a / b : a;
+}
+
+function presetRatioAsNumber( { ratio, ...rest } ) {
+	return {
+		ratio: ratioToNumber( ratio ),
+		...rest,
+	};
+}
+
 export default function AspectRatioDropdown( { toggleProps } ) {
 	const { isInProgress, aspect, setAspect, defaultAspect } =
 		useImageEditingContext();
 
+	const [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings(
+		'dimensions.aspectRatios.default',
+		'dimensions.aspectRatios.theme',
+		'dimensions.defaultAspectRatios'
+	);
+
 	return (
 		<DropdownMenu
 			icon={ aspectRatioIcon }
@@ -46,7 +82,7 @@ export default function AspectRatioDropdown( { toggleProps } ) {
 		>
 			{ ( { onClose } ) => (
 				<>
-					<AspectGroup
+					<AspectRatioGroup
 						isDisabled={ isInProgress }
 						onClick={ ( newAspect ) => {
 							setAspect( newAspect );
@@ -56,61 +92,57 @@ export default function AspectRatioDropdown( { toggleProps } ) {
 						aspectRatios={ [
 							// All ratios should be mirrored in AspectRatioTool in @wordpress/block-editor.
 							{
-								title: __( 'Original' ),
+								slug: 'original',
+								name: __( 'Original' ),
 								aspect: defaultAspect,
 							},
-							{
-								title: __( 'Square' ),
-								aspect: 1,
-							},
-						] }
-					/>
-					<AspectGroup
-						label={ __( 'Landscape' ) }
-						isDisabled={ isInProgress }
-						onClick={ ( newAspect ) => {
-							setAspect( newAspect );
-							onClose();
-						} }
-						value={ aspect }
-						aspectRatios={ [
-							{
-								title: __( '16:9' ),
-								aspect: 16 / 9,
-							},
-							{
-								title: __( '4:3' ),
-								aspect: 4 / 3,
-							},
-							{
-								title: __( '3:2' ),
-								aspect: 3 / 2,
-							},
-						] }
-					/>
-					<AspectGroup
-						label={ __( 'Portrait' ) }
-						isDisabled={ isInProgress }
-						onClick={ ( newAspect ) => {
-							setAspect( newAspect );
-							onClose();
-						} }
-						value={ aspect }
-						aspectRatios={ [
-							{
-								title: __( '9:16' ),
-								aspect: 9 / 16,
-							},
-							{
-								title: __( '3:4' ),
-								aspect: 3 / 4,
-							},
-							{
-								title: __( '2:3' ),
-								aspect: 2 / 3,
-							},
+							...( showDefaultRatios
+								? defaultRatios
+										.map( presetRatioAsNumber )
+										.filter( ( { ratio } ) => ratio === 1 )
+								: [] ),
 						] }
 					/>
+					{ themeRatios?.length > 0 && (
+						<AspectRatioGroup
+							label={ __( 'Theme' ) }
+							isDisabled={ isInProgress }
+							onClick={ ( newAspect ) => {
+								setAspect( newAspect );
+								onClose();
+							} }
+							value={ aspect }
+							aspectRatios={ themeRatios }
+						/>
+					) }
+					{ showDefaultRatios && (
+						<AspectRatioGroup
+							label={ __( 'Landscape' ) }
+							isDisabled={ isInProgress }
+							onClick={ ( newAspect ) => {
+								setAspect( newAspect );
+								onClose();
+							} }
+							value={ aspect }
+							aspectRatios={ defaultRatios
+								.map( presetRatioAsNumber )
+								.filter( ( { ratio } ) => ratio > 1 ) }
+						/>
+					) }
+					{ showDefaultRatios && (
+						<AspectRatioGroup
+							label={ __( 'Portrait' ) }
+							isDisabled={ isInProgress }
+							onClick={ ( newAspect ) => {
+								setAspect( newAspect );
+								onClose();
+							} }
+							value={ aspect }
+							aspectRatios={ defaultRatios
+								.map( presetRatioAsNumber )
+								.filter( ( { ratio } ) => ratio < 1 ) }
+						/>
+					) }
 				</>
 			) }
 		</DropdownMenu>
diff --git a/packages/block-editor/src/components/image-editor/cropper.js b/packages/block-editor/src/components/image-editor/cropper.js
index 2d0d4c733d8e6..d5b0c3b03586e 100644
--- a/packages/block-editor/src/components/image-editor/cropper.js
+++ b/packages/block-editor/src/components/image-editor/cropper.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import Cropper from 'react-easy-crop';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -47,7 +47,7 @@ export default function ImageCropper( {
 
 	const area = (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'wp-block-image__crop-area',
 				borderProps?.className,
 				{
diff --git a/packages/block-editor/src/components/image-editor/index.js b/packages/block-editor/src/components/image-editor/index.js
index cfd912bb2827c..133f79732bdbd 100644
--- a/packages/block-editor/src/components/image-editor/index.js
+++ b/packages/block-editor/src/components/image-editor/index.js
@@ -6,11 +6,11 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
 /**
  * Internal dependencies
  */
+import AspectRatioDropdown from './aspect-ratio-dropdown';
 import BlockControls from '../block-controls';
 import ImageEditingProvider from './context';
 import Cropper from './cropper';
 import ZoomDropdown from './zoom-dropdown';
-import AspectRatioDropdown from './aspect-ratio-dropdown';
 import RotationButton from './rotation-button';
 import FormControls from './form-controls';
 
diff --git a/packages/block-editor/src/components/image-editor/test/index.js b/packages/block-editor/src/components/image-editor/test/index.js
new file mode 100644
index 0000000000000..9f0f3491667a8
--- /dev/null
+++ b/packages/block-editor/src/components/image-editor/test/index.js
@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import { ratioToNumber } from '../aspect-ratio-dropdown';
+
+test( 'ratioToNumber', () => {
+	expect( ratioToNumber( '1/1' ) ).toBe( 1 );
+	expect( ratioToNumber( '1' ) ).toBe( 1 );
+	expect( ratioToNumber( '11/11' ) ).toBe( 1 );
+	expect( ratioToNumber( '16/9' ) ).toBe( 16 / 9 );
+	expect( ratioToNumber( '4/3' ) ).toBe( 4 / 3 );
+	expect( ratioToNumber( '3/2' ) ).toBe( 3 / 2 );
+	expect( ratioToNumber( '2/1' ) ).toBe( 2 );
+	expect( ratioToNumber( '1/2' ) ).toBe( 1 / 2 );
+	expect( ratioToNumber( '2/3' ) ).toBe( 2 / 3 );
+	expect( ratioToNumber( '3/4' ) ).toBe( 3 / 4 );
+	expect( ratioToNumber( '9/16' ) ).toBe( 9 / 16 );
+	expect( ratioToNumber( '1/16' ) ).toBe( 1 / 16 );
+	expect( ratioToNumber( '16/1' ) ).toBe( 16 );
+	expect( ratioToNumber( '1/9' ) ).toBe( 1 / 9 );
+	expect( ratioToNumber( 'auto' ) ).toBe( NaN );
+} );
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 5263ca3332b25..2a127feb3df1c 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -160,6 +160,7 @@ export {
 export { default as __experimentalBlockPatternsList } from './block-patterns-list';
 export { default as __experimentalPublishDateTimePicker } from './publish-date-time-picker';
 export { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header';
+export { default as BlockPopover } from './block-popover';
 export { useBlockEditingMode } from './block-editing-mode';
 
 /*
diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js
index debf5a074a07a..ae565cd9cc665 100644
--- a/packages/block-editor/src/components/index.native.js
+++ b/packages/block-editor/src/components/index.native.js
@@ -71,6 +71,12 @@ export { default as Warning } from './warning';
 export { default as ContrastChecker } from './contrast-checker';
 export { default as useMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
 export { default as UnsupportedBlockDetails } from './unsupported-block-details';
+export {
+	useGlobalStyles,
+	getGlobalStyles,
+	getColorsAndGradients,
+	useMobileGlobalStylesColors,
+} from './global-styles/use-global-styles-context';
 
 export {
 	BottomSheetSettings,
@@ -78,6 +84,7 @@ export {
 	blockSettingsScreens,
 } from './block-settings';
 export { default as VideoPlayer, VIDEO_ASPECT_RATIO } from './video-player';
+export { default as AudioPlayer } from './audio-player';
 
 export {
 	getSpacingPresetCssVar,
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 5319b5d4d3c36..500e59863db42 100644
--- a/packages/block-editor/src/components/inner-blocks/button-block-appender.js
+++ b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -18,7 +18,7 @@ export const ButtonBlockAppender = ( {
 } ) => {
 	return (
 		<BaseButtonBlockAppender
-			className={ classnames( {
+			className={ clsx( {
 				'block-list-appender__toggle': isToggle,
 			} ) }
 			rootClientId={ clientId }
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 1dd3005b99d62..49ab36499692b 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -190,10 +190,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	} = useBlockEditContext();
 	const selected = useSelect(
 		( select ) => {
-			if ( ! clientId ) {
-				return {};
-			}
-
 			const {
 				getBlockName,
 				isBlockSelected,
@@ -205,8 +201,19 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				getBlockSettings,
 				isDragging,
 				getSettings,
-				getBlockOrder,
 			} = 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 =
@@ -215,14 +222,8 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 			const parentClientId = getBlockRootClientId( clientId );
 			const [ defaultLayout ] = getBlockSettings( clientId, 'layout' );
 
-			// 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.
-			let _isDropZoneDisabled = blockEditingMode === 'disabled';
-			if ( __unstableGetEditorMode() === 'zoom-out' ) {
-				const { sectionRootClientId } = unlock( getSettings() );
-				const sectionsClientIds = getBlockOrder( sectionRootClientId );
-				_isDropZoneDisabled = sectionsClientIds?.includes( clientId );
+			if ( _isDropZoneDisabled !== undefined ) {
+				_isDropZoneDisabled = blockEditingMode === 'disabled';
 			}
 
 			return {
@@ -262,12 +263,13 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		dropZoneElement,
 		rootClientId: clientId,
 		parentClientId,
-		isDisabled: isDropZoneDisabled,
 	} );
 
 	const ref = useMergeRefs( [
 		props.ref,
-		__unstableDisableDropZone ? null : blockDropZoneRef,
+		__unstableDisableDropZone || isDropZoneDisabled
+			? null
+			: blockDropZoneRef,
 	] );
 
 	const innerBlocksProps = {
@@ -287,7 +289,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	return {
 		...props,
 		ref,
-		className: classnames(
+		className: clsx(
 			props.className,
 			'block-editor-block-list__layout',
 			__unstableDisableLayoutClassNames ? '' : layoutClassNames,
diff --git a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js
index 25a3dc9dadfa9..8417dec1dd48f 100644
--- a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js
+++ b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useLayoutEffect, useMemo, useState } from '@wordpress/element';
-import { useDispatch, useRegistry } from '@wordpress/data';
+import { useRegistry } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
@@ -69,7 +69,6 @@ export default function useNestedSettingsUpdate(
 	// Instead of adding a useSelect mapping here, please add to the useSelect
 	// mapping in InnerBlocks! Every subscription impacts performance.
 
-	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 	const registry = useRegistry();
 
 	// Implementors often pass a new array on every render,
@@ -155,21 +154,16 @@ export default function useNestedSettingsUpdate(
 		// we batch all the updatedBlockListSettings in a single "data" batch
 		// which results in a single re-render.
 		if ( ! pendingSettingsUpdates.get( registry ) ) {
-			pendingSettingsUpdates.set( registry, [] );
+			pendingSettingsUpdates.set( registry, {} );
 		}
-		pendingSettingsUpdates
-			.get( registry )
-			.push( [ clientId, newSettings ] );
+		pendingSettingsUpdates.get( registry )[ clientId ] = newSettings;
 		window.queueMicrotask( () => {
-			if ( pendingSettingsUpdates.get( registry )?.length ) {
-				registry.batch( () => {
-					pendingSettingsUpdates
-						.get( registry )
-						.forEach( ( args ) => {
-							updateBlockListSettings( ...args );
-						} );
-					pendingSettingsUpdates.set( registry, [] );
-				} );
+			const settings = pendingSettingsUpdates.get( registry );
+			if ( Object.keys( settings ).length ) {
+				const { updateBlockListSettings } =
+					registry.dispatch( blockEditorStore );
+				updateBlockListSettings( settings );
+				pendingSettingsUpdates.set( registry, {} );
 			}
 		} );
 	}, [
@@ -183,7 +177,6 @@ export default function useNestedSettingsUpdate(
 		__experimentalDirectInsert,
 		captureToolbars,
 		orientation,
-		updateBlockListSettings,
 		layout,
 		registry,
 	] );
diff --git a/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js b/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js
index e363db4961c7c..f759b0e519fd6 100644
--- a/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js
+++ b/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js
@@ -89,7 +89,7 @@ const WarningMaxDepthExceeded = ( { clientId } ) => {
 		<TouchableWithoutFeedback
 			disabled={ ! isSelected }
 			accessibilityLabel={ __( 'Warning message' ) }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 			accessibilityHint={ __( 'Tap here to show more details.' ) }
 			onPress={ () => setShowDetails( true ) }
 		>
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 5cc59dfbac005..4a0ef102e84b0 100644
--- a/packages/block-editor/src/components/inserter-list-item/index.js
+++ b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -62,7 +62,7 @@ function InserterListItem( {
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
-					className={ classnames(
+					className={ clsx(
 						'block-editor-block-types-list__list-item',
 						{
 							'is-synced': isSynced,
@@ -85,7 +85,7 @@ function InserterListItem( {
 				>
 					<InserterListboxItem
 						isFirst={ isFirst }
-						className={ classnames(
+						className={ clsx(
 							'block-editor-block-types-list__item',
 							className
 						) }
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js
index a5e43c2c6bf87..709e005b587ce 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js
@@ -31,7 +31,7 @@ function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
 	return (
 		<Heading
 			level={ 2 }
-			lineHeight={ '48px' }
+			lineHeight="48px"
 			className="block-editor-block-patterns-explorer__search-results-count"
 		>
 			{ sprintf(
@@ -61,7 +61,8 @@ function PatternList( {
 	} );
 	const [ patterns, , onClickPattern ] = usePatternsState(
 		onInsertBlocks,
-		destinationRootClientId
+		destinationRootClientId,
+		selectedCategory
 	);
 
 	const registeredPatternCategories = useMemo(
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 ebf816a9e2dec..65b477d09069f 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
@@ -3,8 +3,9 @@
  */
 import { useState } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
-import { Button } from '@wordpress/components';
+import { Button, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -15,6 +16,8 @@ import { PatternCategoryPreviews } from './pattern-category-previews';
 import { usePatternCategories } from './use-pattern-categories';
 import CategoryTabs from '../category-tabs';
 import InserterNoResults from '../no-results';
+import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
 function BlockPatternsTab( {
 	onSelectCategory,
@@ -28,6 +31,19 @@ function BlockPatternsTab( {
 	const categories = usePatternCategories( rootClientId );
 
 	const isMobile = useViewportMatch( 'medium', '<' );
+	const isResolvingPatterns = useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).isResolvingPatterns(),
+		[]
+	);
+
+	if ( isResolvingPatterns ) {
+		return (
+			<div className="block-editor-inserter__patterns-loading">
+				<Spinner />
+			</div>
+		);
+	}
 
 	if ( ! categories.length ) {
 		return <InserterNoResults />;
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
index 04f25ade4880d..f91598fb7a61c 100644
--- 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
@@ -1,10 +1,10 @@
 /**
  * Internal dependencies
  */
-
 import { PatternCategoryPreviews } from './pattern-category-previews';
+import { useZoomOut } from '../../../hooks/use-zoom-out';
 
-export function PatternCategoryPreviewPanel( {
+function PatternCategoryPreviewPanelInner( {
 	rootClientId,
 	onInsert,
 	onHover,
@@ -24,3 +24,17 @@ export function PatternCategoryPreviewPanel( {
 		/>
 	);
 }
+
+function PatternCategoryPreviewPanelWithZoomOut( props ) {
+	useZoomOut();
+	return <PatternCategoryPreviewPanelInner { ...props } />;
+}
+
+export function PatternCategoryPreviewPanel( props ) {
+	// When the pattern panel is showing, we want to use zoom out mode
+	if ( window.__experimentalEnableZoomedOutPatternsTab ) {
+		return <PatternCategoryPreviewPanelWithZoomOut { ...props } />;
+	}
+
+	return <PatternCategoryPreviewPanelInner { ...props } />;
+}
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 8a4bedbb4a5fc..3703381b23a14 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
@@ -44,7 +44,8 @@ export function PatternCategoryPreviews( {
 } ) {
 	const [ allPatterns, , onClickPattern ] = usePatternsState(
 		onInsert,
-		rootClientId
+		rootClientId,
+		category?.name
 	);
 	const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );
 	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );
@@ -135,7 +136,12 @@ export function PatternCategoryPreviews( {
 			>
 				<HStack>
 					<FlexBlock>
-						<Heading level={ 4 } as="div">
+						<Heading
+							className="block-editor-inserter__patterns-category-panel-title"
+							size={ 13 }
+							level={ 4 }
+							as="div"
+						>
 							{ category.label }
 						</Heading>
 					</FlexBlock>
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 7f5abf0b8540e..9e57f00b6b466 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
@@ -113,7 +113,8 @@ export function PatternsFilter( {
 				popoverProps={ {
 					placement: 'right-end',
 				} }
-				label="Filter patterns"
+				label={ __( 'Filter patterns' ) }
+				toggleProps={ { size: 'compact' } }
 				icon={
 					<Icon
 						icon={
@@ -126,7 +127,7 @@ export function PatternsFilter( {
 							>
 								<Path
 									d="M10 17.5H14V16H10V17.5ZM6 6V7.5H18V6H6ZM8 12.5H16V11H8V12.5Z"
-									fill="#1E1E1E"
+									fill="currentColor"
 								/>
 							</SVG>
 						}
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 fc742c3bf6489..42c4a6a35e14b 100644
--- a/packages/block-editor/src/components/inserter/block-types-tab.js
+++ b/packages/block-editor/src/components/inserter/block-types-tab.js
@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { useMemo, useEffect } from '@wordpress/element';
-import { pipe, useAsyncList } from '@wordpress/compose';
+import { useMemo, useEffect, forwardRef } from '@wordpress/element';
+import { useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -27,17 +27,15 @@ const MAX_SUGGESTED_ITEMS = 6;
  */
 const EMPTY_ARRAY = [];
 
-export function BlockTypesTab( {
-	rootClientId,
-	onInsert,
+export function BlockTypesTabPanel( {
+	items,
+	collections,
+	categories,
+	onSelectItem,
 	onHover,
 	showMostUsedBlocks,
+	className,
 } ) {
-	const [ items, categories, collections, onSelectItem ] = useBlockTypesState(
-		rootClientId,
-		onInsert
-	);
-
 	const suggestedItems = useMemo( () => {
 		return orderBy( items, 'frecency', 'desc' ).slice(
 			0,
@@ -49,24 +47,6 @@ export function BlockTypesTab( {
 		return items.filter( ( item ) => ! item.category );
 	}, [ items ] );
 
-	const itemsPerCategory = useMemo( () => {
-		return pipe(
-			( itemList ) =>
-				itemList.filter(
-					( item ) => item.category && item.category !== 'reusable'
-				),
-			( itemList ) =>
-				itemList.reduce( ( acc, item ) => {
-					const { category } = item;
-					if ( ! acc[ category ] ) {
-						acc[ category ] = [];
-					}
-					acc[ category ].push( item );
-					return acc;
-				}, {} )
-		)( items );
-	}, [ items ] );
-
 	const itemsPerCollection = useMemo( () => {
 		// Create a new Object to avoid mutating collection.
 		const result = { ...collections };
@@ -103,14 +83,13 @@ export function BlockTypesTab( {
 		didRenderAllCategories ? collectionEntries : EMPTY_ARRAY
 	);
 
-	if ( ! items.length ) {
-		return <InserterNoResults />;
-	}
-
 	return (
-		<InserterListbox>
-			<div>
-				{ showMostUsedBlocks && !! suggestedItems.length && (
+		<div className={ className }>
+			{ showMostUsedBlocks &&
+				// Only show the most used blocks if the total amount of block
+				// is larger than 1 row, otherwise it is not so useful.
+				items.length > 3 &&
+				!! suggestedItems.length && (
 					<InserterPanel title={ _x( 'Most used', 'blocks' ) }>
 						<BlockTypesList
 							items={ suggestedItems }
@@ -121,67 +100,128 @@ export function BlockTypesTab( {
 					</InserterPanel>
 				) }
 
-				{ currentlyRenderedCategories.map( ( category ) => {
-					const categoryItems = itemsPerCategory[ category.slug ];
-					if ( ! categoryItems || ! categoryItems.length ) {
+			{ currentlyRenderedCategories.map( ( category ) => {
+				const categoryItems = items.filter(
+					( item ) => item.category === category.slug
+				);
+				if ( ! categoryItems || ! categoryItems.length ) {
+					return null;
+				}
+				return (
+					<InserterPanel
+						key={ category.slug }
+						title={ category.title }
+						icon={ category.icon }
+					>
+						<BlockTypesList
+							items={ categoryItems }
+							onSelect={ onSelectItem }
+							onHover={ onHover }
+							label={ category.title }
+						/>
+					</InserterPanel>
+				);
+			} ) }
+
+			{ didRenderAllCategories && uncategorizedItems.length > 0 && (
+				<InserterPanel
+					className="block-editor-inserter__uncategorized-blocks-panel"
+					title={ __( 'Uncategorized' ) }
+				>
+					<BlockTypesList
+						items={ uncategorizedItems }
+						onSelect={ onSelectItem }
+						onHover={ onHover }
+						label={ __( 'Uncategorized' ) }
+					/>
+				</InserterPanel>
+			) }
+
+			{ currentlyRenderedCollections.map(
+				( [ namespace, collection ] ) => {
+					const collectionItems = itemsPerCollection[ namespace ];
+					if ( ! collectionItems || ! collectionItems.length ) {
 						return null;
 					}
+
 					return (
 						<InserterPanel
-							key={ category.slug }
-							title={ category.title }
-							icon={ category.icon }
+							key={ namespace }
+							title={ collection.title }
+							icon={ collection.icon }
 						>
 							<BlockTypesList
-								items={ categoryItems }
+								items={ collectionItems }
 								onSelect={ onSelectItem }
 								onHover={ onHover }
-								label={ category.title }
+								label={ collection.title }
 							/>
 						</InserterPanel>
 					);
-				} ) }
+				}
+			) }
+		</div>
+	);
+}
 
-				{ didRenderAllCategories && uncategorizedItems.length > 0 && (
-					<InserterPanel
-						className="block-editor-inserter__uncategorized-blocks-panel"
-						title={ __( 'Uncategorized' ) }
-					>
-						<BlockTypesList
-							items={ uncategorizedItems }
-							onSelect={ onSelectItem }
+export function BlockTypesTab(
+	{ rootClientId, onInsert, onHover, showMostUsedBlocks },
+	ref
+) {
+	const [ items, categories, collections, onSelectItem ] = useBlockTypesState(
+		rootClientId,
+		onInsert
+	);
+
+	if ( ! items.length ) {
+		return <InserterNoResults />;
+	}
+
+	const itemsForCurrentRoot = [];
+	const itemsRemaining = [];
+
+	for ( const item of items ) {
+		// Skip reusable blocks, they moved to the patterns tab.
+		if ( item.category === 'reusable' ) {
+			continue;
+		}
+
+		if ( rootClientId && item.rootClientId === rootClientId ) {
+			itemsForCurrentRoot.push( item );
+		} else {
+			itemsRemaining.push( item );
+		}
+	}
+
+	return (
+		<InserterListbox>
+			<div ref={ ref }>
+				{ !! itemsForCurrentRoot.length && (
+					<>
+						<BlockTypesTabPanel
+							items={ itemsForCurrentRoot }
+							categories={ categories }
+							collections={ collections }
+							onSelectItem={ onSelectItem }
 							onHover={ onHover }
-							label={ __( 'Uncategorized' ) }
+							showMostUsedBlocks={ showMostUsedBlocks }
+							className="block-editor-inserter__insertable-blocks-at-selection"
 						/>
-					</InserterPanel>
-				) }
-
-				{ currentlyRenderedCollections.map(
-					( [ namespace, collection ] ) => {
-						const collectionItems = itemsPerCollection[ namespace ];
-						if ( ! collectionItems || ! collectionItems.length ) {
-							return null;
-						}
-
-						return (
-							<InserterPanel
-								key={ namespace }
-								title={ collection.title }
-								icon={ collection.icon }
-							>
-								<BlockTypesList
-									items={ collectionItems }
-									onSelect={ onSelectItem }
-									onHover={ onHover }
-									label={ collection.title }
-								/>
-							</InserterPanel>
-						);
-					}
+						<hr />
+					</>
 				) }
+				<BlockTypesTabPanel
+					items={ itemsRemaining }
+					categories={ categories }
+					collections={ collections }
+					onSelectItem={ onSelectItem }
+					onHover={ onHover }
+					showMostUsedBlocks={ showMostUsedBlocks }
+					className="block-editor-inserter__all-blocks"
+				/>
 			</div>
 		</InserterListbox>
 	);
 }
 
-export default BlockTypesTab;
+export default forwardRef( BlockTypesTab );
diff --git a/packages/block-editor/src/components/inserter/category-tabs/index.js b/packages/block-editor/src/components/inserter/category-tabs/index.js
index 47c9f0e051a66..a379f4719556b 100644
--- a/packages/block-editor/src/components/inserter/category-tabs/index.js
+++ b/packages/block-editor/src/components/inserter/category-tabs/index.js
@@ -27,7 +27,7 @@ function CategoryTabs( {
 			className="block-editor-inserter__category-tabs"
 			selectOnMove={ false }
 			selectedTabId={ selectedCategory ? selectedCategory.name : null }
-			orientation={ 'vertical' }
+			orientation="vertical"
 			onSelect={ ( categoryId ) => {
 				// Pass the full category object
 				onSelectCategory(
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 566d0476fbd0f..8db23267eee8f 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
@@ -8,26 +8,35 @@ import {
 	parse,
 } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { withRootClientIdOptionKey } from '../../../store/utils';
 
 /**
  * Retrieves the block types inserter state.
  *
  * @param {string=}  rootClientId Insertion's root client ID.
  * @param {Function} onInsert     function called when inserter a list of blocks.
+ * @param {boolean}  isQuick
  * @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler)
  */
-const useBlockTypesState = ( rootClientId, onInsert ) => {
+const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
+	const options = useMemo(
+		() => ( { [ withRootClientIdOptionKey ]: ! isQuick } ),
+		[ isQuick ]
+	);
 	const [ items ] = useSelect(
 		( select ) => [
-			select( blockEditorStore ).getInserterItems( rootClientId ),
+			select( blockEditorStore ).getInserterItems(
+				rootClientId,
+				options
+			),
 		],
-		[ rootClientId ]
+		[ rootClientId, options ]
 	);
 
 	const [ categories, collections ] = useSelect( ( select ) => {
@@ -37,7 +46,14 @@ const useBlockTypesState = ( rootClientId, onInsert ) => {
 
 	const onSelectItem = useCallback(
 		(
-			{ name, initialAttributes, innerBlocks, syncStatus, content },
+			{
+				name,
+				initialAttributes,
+				innerBlocks,
+				syncStatus,
+				content,
+				rootClientId: _rootClientId,
+			},
 			shouldFocusBlock
 		) => {
 			const insertedBlock =
@@ -51,7 +67,12 @@ const useBlockTypesState = ( rootClientId, onInsert ) => {
 							createBlocksFromInnerBlocksTemplate( innerBlocks )
 					  );
 
-			onInsert( insertedBlock, undefined, shouldFocusBlock );
+			onInsert(
+				insertedBlock,
+				undefined,
+				shouldFocusBlock,
+				_rootClientId
+			);
 		},
 		[ onInsert ]
 	);
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 8252de58b49d5..24074ec500456 100644
--- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
+++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { _n, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
@@ -11,6 +11,35 @@ import { useCallback } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+function getIndex( {
+	destinationRootClientId,
+	destinationIndex,
+	rootClientId,
+	registry,
+} ) {
+	if ( rootClientId === destinationRootClientId ) {
+		return destinationIndex;
+	}
+	const parents = [
+		'',
+		...registry
+			.select( blockEditorStore )
+			.getBlockParents( destinationRootClientId ),
+		destinationRootClientId,
+	];
+	const parentIndex = parents.indexOf( rootClientId );
+	if ( parentIndex !== -1 ) {
+		return (
+			registry
+				.select( blockEditorStore )
+				.getBlockIndex( parents[ parentIndex + 1 ] ) + 1
+		);
+	}
+	return registry.select( blockEditorStore ).getBlockOrder( rootClientId )
+		.length;
+}
 
 /**
  * @typedef WPInserterConfig
@@ -41,6 +70,7 @@ function useInsertionPoint( {
 	shouldFocusBlock = true,
 	selectBlockOnInsert = true,
 } ) {
+	const registry = useRegistry();
 	const { getSelectedBlock } = useSelect( blockEditorStore );
 	const { destinationRootClientId, destinationIndex } = useSelect(
 		( select ) => {
@@ -86,10 +116,23 @@ function useInsertionPoint( {
 		insertBlocks,
 		showInsertionPoint,
 		hideInsertionPoint,
-	} = useDispatch( blockEditorStore );
+		setLastFocus,
+	} = unlock( useDispatch( blockEditorStore ) );
 
 	const onInsertBlocks = useCallback(
-		( blocks, meta, shouldForceFocusBlock = false ) => {
+		( blocks, meta, shouldForceFocusBlock = false, _rootClientId ) => {
+			// When we are trying to move focus or select a new block on insert, we also
+			// need to clear the last focus to avoid the focus being set to the wrong block
+			// when tabbing back into the canvas if the block was added from outside the
+			// editor canvas.
+			if (
+				shouldForceFocusBlock ||
+				shouldFocusBlock ||
+				selectBlockOnInsert
+			) {
+				setLastFocus( null );
+			}
+
 			const selectedBlock = getSelectedBlock();
 
 			if (
@@ -107,8 +150,17 @@ function useInsertionPoint( {
 			} else {
 				insertBlocks(
 					blocks,
-					destinationIndex,
-					destinationRootClientId,
+					isAppender || _rootClientId === undefined
+						? destinationIndex
+						: getIndex( {
+								destinationRootClientId,
+								destinationIndex,
+								rootClientId: _rootClientId,
+								registry,
+						  } ),
+					isAppender || _rootClientId === undefined
+						? destinationRootClientId
+						: _rootClientId,
 					selectBlockOnInsert,
 					shouldFocusBlock || shouldForceFocusBlock ? 0 : null,
 					meta
@@ -140,9 +192,17 @@ function useInsertionPoint( {
 	);
 
 	const onToggleInsertionPoint = useCallback(
-		( show ) => {
-			if ( show ) {
-				showInsertionPoint( destinationRootClientId, destinationIndex );
+		( item ) => {
+			if ( item?.hasOwnProperty( 'rootClientId' ) ) {
+				showInsertionPoint(
+					item.rootClientId,
+					getIndex( {
+						destinationRootClientId,
+						destinationIndex,
+						rootClientId: item.rootClientId,
+						registry,
+					} )
+				);
 			} else {
 				hideInsertionPoint();
 			}
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 b5c8c8551b111..6483dc58ae8b9 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
@@ -16,12 +16,13 @@ import { INSERTER_PATTERN_TYPES } from '../block-patterns-tab/utils';
 /**
  * Retrieves the block patterns inserter state.
  *
- * @param {Function} onInsert     function called when inserter a list of blocks.
- * @param {string=}  rootClientId Insertion's root client ID.
+ * @param {Function} onInsert         function called when inserter a list of blocks.
+ * @param {string=}  rootClientId     Insertion's root client ID.
  *
+ * @param {string}   selectedCategory The selected pattern category.
  * @return {Array} Returns the patterns state. (patterns, categories, onSelect handler)
  */
-const usePatternsState = ( onInsert, rootClientId ) => {
+const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => {
 	const { patternCategories, patterns, userPatternCategories } = useSelect(
 		( select ) => {
 			const { __experimentalGetAllowedPatterns, getSettings } =
@@ -63,7 +64,19 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 					? [ createBlock( 'core/block', { ref: pattern.id } ) ]
 					: blocks;
 			onInsert(
-				( patternBlocks ?? [] ).map( ( block ) => cloneBlock( block ) ),
+				( patternBlocks ?? [] ).map( ( block ) => {
+					const clonedBlock = cloneBlock( block );
+					if (
+						clonedBlock.attributes.metadata?.categories?.includes(
+							selectedCategory
+						)
+					) {
+						clonedBlock.attributes.metadata.categories = [
+							selectedCategory,
+						];
+					}
+					return clonedBlock;
+				} ),
 				pattern.name
 			);
 			createSuccessNotice(
@@ -78,7 +91,7 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 				}
 			);
 		},
-		[ createSuccessNotice, onInsert ]
+		[ createSuccessNotice, onInsert, selectedCategory ]
 	);
 
 	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 0fdedfca89e7d..d3e7dba0df683 100644
--- a/packages/block-editor/src/components/inserter/index.js
+++ b/packages/block-editor/src/components/inserter/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -207,10 +207,9 @@ class PrivateInserter extends Component {
 		return (
 			<Dropdown
 				className="block-editor-inserter"
-				contentClassName={ classnames(
-					'block-editor-inserter__popover',
-					{ 'is-quick': isQuick }
-				) }
+				contentClassName={ clsx( 'block-editor-inserter__popover', {
+					'is-quick': isQuick,
+				} ) }
 				popoverProps={ { position, shift: true } }
 				onToggle={ this.onToggle }
 				expandOnMobile
diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
index a3a4e7feb42b3..4e10a051996a9 100644
--- a/packages/block-editor/src/components/inserter/library.js
+++ b/packages/block-editor/src/components/inserter/library.js
@@ -7,7 +7,7 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import InserterMenu from './menu';
+import { PrivateInserterMenu } from './menu';
 import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
@@ -20,10 +20,13 @@ function InserterLibrary(
 		showInserterHelpPanel,
 		showMostUsedBlocks = false,
 		__experimentalInsertionIndex,
+		__experimentalInitialTab,
+		__experimentalInitialCategory,
 		__experimentalFilterValue,
-		__experimentalOnPatternCategorySelection,
+		onPatternCategorySelection,
 		onSelect = noop,
 		shouldFocusBlock = false,
+		onClose,
 	},
 	ref
 ) {
@@ -40,7 +43,7 @@ function InserterLibrary(
 	);
 
 	return (
-		<InserterMenu
+		<PrivateInserterMenu
 			onSelect={ onSelect }
 			rootClientId={ destinationRootClientId }
 			clientId={ clientId }
@@ -49,13 +52,26 @@ function InserterLibrary(
 			showMostUsedBlocks={ showMostUsedBlocks }
 			__experimentalInsertionIndex={ __experimentalInsertionIndex }
 			__experimentalFilterValue={ __experimentalFilterValue }
-			__experimentalOnPatternCategorySelection={
-				__experimentalOnPatternCategorySelection
-			}
+			onPatternCategorySelection={ onPatternCategorySelection }
+			__experimentalInitialTab={ __experimentalInitialTab }
+			__experimentalInitialCategory={ __experimentalInitialCategory }
 			shouldFocusBlock={ shouldFocusBlock }
 			ref={ ref }
+			onClose={ onClose }
 		/>
 	);
 }
 
-export default forwardRef( InserterLibrary );
+export const PrivateInserterLibrary = forwardRef( InserterLibrary );
+
+function PublicInserterLibrary( props, ref ) {
+	return (
+		<PrivateInserterLibrary
+			{ ...props }
+			onPatternCategorySelection={ undefined }
+			ref={ ref }
+		/>
+	);
+}
+
+export default forwardRef( PublicInserterLibrary );
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 807123f327664..816cc9373ea08 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
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -222,7 +222,7 @@ export function MediaPreview( { media, onClick, category } ) {
 			<InserterDraggableBlocks isEnabled blocks={ [ block ] }>
 				{ ( { draggable, onDragStart, onDragEnd } ) => (
 					<div
-						className={ classnames(
+						className={ clsx(
 							'block-editor-inserter__media-list__list-item',
 							{
 								'is-hovered': isHovered,
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index b79a44f6ea942..6a4ac798b7490 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -17,6 +17,7 @@ import {
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDebouncedInput } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -30,7 +31,7 @@ import { MediaTab, MediaCategoryPanel } from './media-tab';
 import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
-import { useZoomOut } from '../../hooks/use-zoom-out';
+import { store as blockEditorStore } from '../../store';
 
 const NOOP = () => {};
 function InserterMenu(
@@ -44,19 +45,30 @@ function InserterMenu(
 		showMostUsedBlocks,
 		__experimentalFilterValue = '',
 		shouldFocusBlock = true,
-		__experimentalOnPatternCategorySelection = NOOP,
+		onPatternCategorySelection,
+		onClose,
+		__experimentalInitialTab,
+		__experimentalInitialCategory,
 	},
 	ref
 ) {
+	const isZoomOutMode = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
+		[]
+	);
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( __experimentalFilterValue );
 	const [ hoveredItem, setHoveredItem ] = useState( null );
-	const [ selectedPatternCategory, setSelectedPatternCategory ] =
-		useState( null );
+	const [ selectedPatternCategory, setSelectedPatternCategory ] = useState(
+		__experimentalInitialCategory
+	);
 	const [ patternFilter, setPatternFilter ] = useState( 'all' );
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
-	const [ selectedTab, setSelectedTab ] = useState( 'blocks' );
+	const [ selectedTab, setSelectedTab ] = useState(
+		__experimentalInitialTab
+	);
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {
@@ -66,13 +78,32 @@ function InserterMenu(
 			insertionIndex: __experimentalInsertionIndex,
 			shouldFocusBlock,
 		} );
+	const blockTypesTabRef = useRef();
 
 	const onInsert = useCallback(
-		( blocks, meta, shouldForceFocusBlock ) => {
-			onInsertBlocks( blocks, meta, shouldForceFocusBlock );
+		( blocks, meta, shouldForceFocusBlock, _rootClientId ) => {
+			onInsertBlocks(
+				blocks,
+				meta,
+				shouldForceFocusBlock,
+				_rootClientId
+			);
 			onSelect();
+
+			// Check for focus loss due to filtering blocks by selected block type
+			window.requestAnimationFrame( () => {
+				if (
+					! shouldFocusBlock &&
+					! blockTypesTabRef?.current.contains(
+						ref.current.ownerDocument.activeElement
+					)
+				) {
+					// There has been a focus loss, so focus the first button in the block types tab
+					blockTypesTabRef?.current.querySelector( 'button' ).focus();
+				}
+			} );
 		},
-		[ onInsertBlocks, onSelect ]
+		[ onInsertBlocks, onSelect, shouldFocusBlock ]
 	);
 
 	const onInsertPattern = useCallback(
@@ -85,7 +116,7 @@ function InserterMenu(
 
 	const onHover = useCallback(
 		( item ) => {
-			onToggleInsertionPoint( !! item );
+			onToggleInsertionPoint( item );
 			setHoveredItem( item );
 		},
 		[ onToggleInsertionPoint, setHoveredItem ]
@@ -98,21 +129,13 @@ function InserterMenu(
 		[ onToggleInsertionPoint ]
 	);
 
-	const isZoomedOutViewExperimentEnabled =
-		window?.__experimentalEnableZoomedOutView;
 	const onClickPatternCategory = useCallback(
 		( patternCategory, filter ) => {
 			setSelectedPatternCategory( patternCategory );
 			setPatternFilter( filter );
-			if ( isZoomedOutViewExperimentEnabled ) {
-				__experimentalOnPatternCategorySelection();
-			}
+			onPatternCategorySelection?.();
 		},
-		[
-			setSelectedPatternCategory,
-			__experimentalOnPatternCategorySelection,
-			isZoomedOutViewExperimentEnabled,
-		]
+		[ setSelectedPatternCategory, onPatternCategorySelection ]
 	);
 
 	const showPatternPanel =
@@ -183,6 +206,7 @@ function InserterMenu(
 			<>
 				<div className="block-editor-inserter__block-list">
 					<BlockTypesTab
+						ref={ blockTypesTabRef }
 						rootClientId={ destinationRootClientId }
 						onInsert={ onInsert }
 						onHover={ onHover }
@@ -262,9 +286,6 @@ function InserterMenu(
 		showMediaPanel,
 	] );
 
-	// When the pattern panel is showing, we want to use zoom out mode
-	useZoomOut( showPatternPanel );
-
 	const handleSetSelectedTab = ( value ) => {
 		// If no longer on patterns tab remove the category setting.
 		if ( value !== 'patterns' ) {
@@ -287,13 +308,19 @@ function InserterMenu(
 
 	return (
 		<div
-			className={ classnames( 'block-editor-inserter__menu', {
+			className={ clsx( 'block-editor-inserter__menu', {
 				'show-panel': showPatternPanel || showMediaPanel,
+				'is-zoom-out': isZoomOutMode,
 			} ) }
 			ref={ ref }
 		>
 			<div className="block-editor-inserter__main-area">
-				<InserterTabs ref={ tabsRef } onSelect={ handleSetSelectedTab }>
+				<InserterTabs
+					ref={ tabsRef }
+					onSelect={ handleSetSelectedTab }
+					onClose={ onClose }
+					selectedTab={ selectedTab }
+				>
 					{ inserterSearch }
 					{ selectedTab === 'blocks' &&
 						! delayedFilterValue &&
@@ -319,4 +346,16 @@ function InserterMenu(
 	);
 }
 
-export default forwardRef( InserterMenu );
+export const PrivateInserterMenu = forwardRef( InserterMenu );
+
+function PublicInserterMenu( props, ref ) {
+	return (
+		<PrivateInserterMenu
+			{ ...props }
+			onPatternCategorySelection={ NOOP }
+			ref={ ref }
+		/>
+	);
+}
+
+export default forwardRef( PublicInserterMenu );
diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
index eaacf32ca956a..022957df952ce 100644
--- a/packages/block-editor/src/components/inserter/quick-inserter.js
+++ b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -44,7 +44,8 @@ export default function QuickInserter( {
 	} );
 	const [ blockTypes ] = useBlockTypesState(
 		destinationRootClientId,
-		onInsertBlocks
+		onInsertBlocks,
+		true
 	);
 
 	const [ patterns ] = usePatternsState(
@@ -96,7 +97,7 @@ export default function QuickInserter( {
 
 	return (
 		<div
-			className={ classnames( 'block-editor-inserter__quick-inserter', {
+			className={ clsx( 'block-editor-inserter__quick-inserter', {
 				'has-search': showSearch,
 				'has-expand': setInserterIsOpened,
 			} ) }
@@ -126,6 +127,7 @@ export default function QuickInserter( {
 					isDraggable={ false }
 					prioritizePatterns={ prioritizePatterns }
 					selectBlockOnInsert={ selectBlockOnInsert }
+					isQuick
 				/>
 			</div>
 
diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js
index edd99609ea916..9c001823745e6 100644
--- a/packages/block-editor/src/components/inserter/search-results.js
+++ b/packages/block-editor/src/components/inserter/search-results.js
@@ -50,6 +50,7 @@ function InserterSearchResults( {
 	shouldFocusBlock = true,
 	prioritizePatterns,
 	selectBlockOnInsert,
+	isQuick,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
@@ -80,7 +81,7 @@ function InserterSearchResults( {
 		blockTypeCategories,
 		blockTypeCollections,
 		onSelectBlockType,
-	] = useBlockTypesState( destinationRootClientId, onInsertBlocks );
+	] = useBlockTypesState( destinationRootClientId, onInsertBlocks, isQuick );
 	const [ patterns, , onClickPattern ] = usePatternsState(
 		onInsertBlocks,
 		destinationRootClientId
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 5e35180ae7c45..4fac1d7ea1f30 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -115,12 +115,25 @@ $block-inserter-tabs-height: 44px;
 	flex-direction: column;
 	overflow: hidden;
 
-	.block-editor-inserter__tablist {
+	.block-editor-inserter__tablist-and-close-button {
 		border-bottom: $border-width solid $gray-300;
+		padding-right: $grid-unit-15;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.block-editor-inserter__close-button {
+		/* stylelint-disable-next-line property-disallowed-list -- This should be refactored to avoid order if possible */
+		order: 1;
+		align-self: center;
+	}
+
+	.block-editor-inserter__tablist {
+		width: 100%;
+		margin-bottom: -$border-width;
 
 		button[role="tab"] {
 			flex-grow: 1;
-			margin-bottom: -$border-width;
 			&[id$="reusable"] {
 				flex-grow: inherit;
 				// These are to align the `reusable` icon with the search icon.
@@ -187,7 +200,8 @@ $block-inserter-tabs-height: 44px;
 	width: 100%;
 }
 
-.block-editor-inserter__no-results {
+.block-editor-inserter__no-results,
+.block-editor-inserter__patterns-loading {
 	padding: $grid-unit-40;
 	text-align: center;
 }
@@ -315,27 +329,35 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__category-panel {
 	background: $gray-100;
-	border-left: $border-width solid $gray-200;
-	border-right: $border-width solid $gray-200;
+	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.
+	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 	position: absolute;
-	top: 0;
+	top: -$border-width;
 	left: 0;
-	height: 100%;
+	height: calc(100% + #{$border-width});
 	width: 100%;
 	padding: 0 $grid-unit-20;
 	display: flex;
 	flex-direction: column;
 
 	@include break-medium {
+		border-left: $border-width solid $gray-200;
 		padding: 0;
 		left: 100%;
 		width: 300px;
 	}
+
+	.block-editor-inserter__media-list,
+	.block-editor-block-patterns-list {
+		padding: 0 $grid-unit-30 $grid-unit-20;
+	}
 }
 
 .block-editor-inserter__patterns-category-panel-header {
-	padding: 16px $grid-unit-30;
+	padding: $grid-unit-10 $grid-unit-30;
 }
+
 .block-editor-inserter__patterns-category-no-results {
 	margin-top: $grid-unit-30;
 }
@@ -345,7 +367,6 @@ $block-inserter-tabs-height: 44px;
 	overflow-y: auto;
 	flex-grow: 1;
 	height: 100%;
-	padding: $grid-unit-20 $grid-unit-30;
 }
 
 .block-editor-inserter__preview-content {
@@ -506,8 +527,8 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__patterns-category-panel-title {
-	font-size: calc(1.25 * 13px);
+.components-heading.block-editor-inserter__patterns-category-panel-title {
+	font-weight: 500;
 }
 
 .block-editor-inserter__patterns-explore-button,
@@ -539,7 +560,7 @@ $block-inserter-tabs-height: 44px;
 	}
 
 	.block-editor-inserter__media-panel-search {
-		padding: $grid-unit-20 $grid-unit-30 0;
+		padding: $grid-unit-20 $grid-unit-30 $grid-unit-10;
 		// TODO: Consider using the Theme component to automatically adapt to a gray background.
 		&:not(:focus-within) {
 			--wp-components-color-background: #{$white};
@@ -551,7 +572,6 @@ $block-inserter-tabs-height: 44px;
 	position: relative;
 	cursor: pointer;
 	margin-bottom: $grid-unit-30;
-	box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
 
 	&.is-placeholder {
 		min-height: 100px;
@@ -562,8 +582,8 @@ $block-inserter-tabs-height: 44px;
 	}
 
 	&.is-hovered {
-		.block-editor-inserter__media-list__item-preview {
-			box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
+		.block-editor-inserter__media-list__item-preview > * {
+			outline-color: rgba($black, 0.3);
 		}
 
 		.block-editor-inserter__media-list__item-preview-options > button {
@@ -610,6 +630,9 @@ $block-inserter-tabs-height: 44px;
 		> * {
 			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 {
@@ -624,11 +647,12 @@ $block-inserter-tabs-height: 44px;
 		}
 	}
 
-	&:focus .block-editor-inserter__media-list__item-preview {
-		box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline: 2px solid transparent;
+	&:focus .block-editor-inserter__media-list__item-preview > * {
+		outline-color: var(--wp-admin-theme-color);
+		outline-width: var(--wp-admin-border-width-focus);
+		outline-offset: calc((-1 * var(--wp-admin-border-width-focus)));
+		transition: outline 0.1s linear;
+		@include reduce-motion("transition");
 	}
 }
 
@@ -700,12 +724,9 @@ $block-inserter-tabs-height: 44px;
 	display: none;
 }
 
-.is-zoom-out {
-	.block-editor-inserter__menu {
-		display: flex;
-	}
-
-	.show-panel::after {
+.block-editor-inserter__menu.is-zoom-out {
+	display: flex;
+	&.show-panel::after {
 		// Makes space for the inserter flyout panel
 		@include break-medium {
 			content: "";
diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
index 5506e3c315cbd..b46e4bfdaf014 100644
--- a/packages/block-editor/src/components/inserter/tabs.js
+++ b/packages/block-editor/src/components/inserter/tabs.js
@@ -1,9 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
+import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -29,23 +33,33 @@ const mediaTab = {
 	title: __( 'Media' ),
 };
 
-function InserterTabs( { onSelect, children }, ref ) {
+function InserterTabs( { onSelect, children, onClose, selectedTab }, ref ) {
 	const tabs = [ blocksTab, patternsTab, mediaTab ];
 
 	return (
 		<div className="block-editor-inserter__tabs" ref={ ref }>
-			<Tabs onSelect={ onSelect }>
-				<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>
+			<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 }
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 76252bae975ae..9e348ab4b1ed1 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/index.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/index.js
@@ -5,6 +5,8 @@ import {
 	Button,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -24,6 +26,10 @@ export default function InspectorControlsTabs( {
 	hasBlockStyles,
 	tabs,
 } ) {
+	const showIconLabels = useSelect( ( select ) => {
+		return select( preferencesStore ).get( 'core', 'showIconLabels' );
+	}, [] );
+
 	// The tabs panel will mount before fills are rendered to the list view
 	// slot. This means the list view tab isn't initially included in the
 	// available tabs so the panel defaults selection to the settings tab
@@ -43,10 +49,16 @@ export default function InspectorControlsTabs( {
 							tabId={ tab.name }
 							render={
 								<Button
-									icon={ tab.icon }
-									label={ tab.title }
+									icon={
+										! showIconLabels ? tab.icon : undefined
+									}
+									label={
+										! showIconLabels ? tab.title : undefined
+									}
 									className={ tab.className }
-								/>
+								>
+									{ showIconLabels && tab.title }
+								</Button>
 							}
 						/>
 					) ) }
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 f25e89903a6ef..70614f56dbcb3 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/style.scss
+++ b/packages/block-editor/src/components/inspector-controls-tabs/style.scss
@@ -1,15 +1,7 @@
 .show-icon-labels {
 	.block-editor-block-inspector__tabs [role="tablist"] {
-		.components-button.has-icon {
-			// Hide the button icons when labels are set to display...
-			svg {
-				display: none;
-			}
-			// ... and display labels.
-			// Uses ::before as ::after is already used for active tab styling.
-			&::before {
-				content: attr(aria-label);
-			}
+		.components-button {
+			justify-content: center;
 		}
 	}
 }
diff --git a/packages/block-editor/src/components/inspector-controls/fill.native.js b/packages/block-editor/src/components/inspector-controls/fill.native.js
index 98b6698721e1c..69da92dd42b37 100644
--- a/packages/block-editor/src/components/inspector-controls/fill.native.js
+++ b/packages/block-editor/src/components/inspector-controls/fill.native.js
@@ -52,11 +52,9 @@ export default function InspectorControlsFill( {
 	return (
 		<>
 			<Fill { ...props }>
-				{
-					<BottomSheetConsumer>
-						{ () => <View>{ children }</View> }
-					</BottomSheetConsumer>
-				}
+				<BottomSheetConsumer>
+					{ () => <View>{ children }</View> }
+				</BottomSheetConsumer>
 			</Fill>
 			{ Children.count( children ) > 0 && <BlockSettingsButton /> }
 		</>
diff --git a/packages/block-editor/src/components/keyboard-shortcuts/index.js b/packages/block-editor/src/components/keyboard-shortcuts/index.js
index 7ea36a14aa7a8..9b83844646922 100644
--- a/packages/block-editor/src/components/keyboard-shortcuts/index.js
+++ b/packages/block-editor/src/components/keyboard-shortcuts/index.js
@@ -143,6 +143,18 @@ function KeyboardShortcutsRegister() {
 				character: 'l',
 			},
 		} );
+
+		registerShortcut( {
+			name: 'core/block-editor/group',
+			category: 'block',
+			description: __(
+				'Create a group block from the selected multiple blocks.'
+			),
+			keyCombination: {
+				modifier: 'primary',
+				character: 'g',
+			},
+		} );
 	}, [ registerShortcut ] );
 
 	return null;
diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index a0df6041bb31a..576556519fb2f 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -220,7 +220,6 @@ function LinkControl( {
 		// because otherwise using the keyboard to select text
 		// *within* the link format is not possible.
 		if ( isMounting.current ) {
-			isMounting.current = false;
 			return;
 		}
 
@@ -238,6 +237,16 @@ function LinkControl( {
 		isEndingEditWithFocus.current = false;
 	}, [ isEditingLink, isCreatingPage ] );
 
+	// The component mounting reference is maintained separately
+	// to correctly reset values in `StrictMode`.
+	useEffect( () => {
+		isMounting.current = false;
+
+		return () => {
+			isMounting.current = true;
+		};
+	}, [] );
+
 	const hasLinkValue = value?.url?.trim()?.length > 0;
 
 	/**
@@ -359,7 +368,7 @@ function LinkControl( {
 			{ isEditing && (
 				<>
 					<div
-						className={ classnames( {
+						className={ clsx( {
 							'block-editor-link-control__search-input-wrapper': true,
 							'has-text-control': showTextControl,
 							'has-actions': showActions,
diff --git a/packages/block-editor/src/components/link-control/link-preview.js b/packages/block-editor/src/components/link-control/link-preview.js
index d922187ec3aa0..fb4b3658e2a4f 100644
--- a/packages/block-editor/src/components/link-control/link-preview.js
+++ b/packages/block-editor/src/components/link-control/link-preview.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -80,7 +80,7 @@ export default function LinkPreview( {
 	return (
 		<div
 			aria-label={ __( 'Currently selected' ) }
-			className={ classnames( 'block-editor-link-control__search-item', {
+			className={ clsx( 'block-editor-link-control__search-item', {
 				'is-current': true,
 				'is-rich': hasRichData,
 				'is-fetching': !! isFetching,
@@ -92,7 +92,7 @@ export default function LinkPreview( {
 			<div className="block-editor-link-control__search-item-top">
 				<span className="block-editor-link-control__search-item-header">
 					<span
-						className={ classnames(
+						className={ clsx(
 							'block-editor-link-control__search-item-icon',
 							{
 								'is-image': richData?.icon,
@@ -149,6 +149,7 @@ export default function LinkPreview( {
 						isEmptyURL || showIconLabels ? '' : ': ' + value.url
 					) }
 					ref={ ref }
+					__experimentalIsFocusable
 					disabled={ isEmptyURL }
 					size="compact"
 				/>
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 238b2d6b3acc7..78730463389e2 100644
--- a/packages/block-editor/src/components/link-control/search-input.js
+++ b/packages/block-editor/src/components/link-control/search-input.js
@@ -125,7 +125,7 @@ const LinkControlSearchInput = forwardRef(
 					className={ className }
 					value={ value }
 					onChange={ onInputChange }
-					placeholder={ placeholder ?? __( 'Search or type url' ) }
+					placeholder={ placeholder ?? __( 'Search or type URL' ) }
 					__experimentalRenderSuggestions={
 						showSuggestions ? handleRenderSuggestions : null
 					}
diff --git a/packages/block-editor/src/components/link-control/search-results.js b/packages/block-editor/src/components/link-control/search-results.js
index 4d5a388a32afb..2186b5d8b62f7 100644
--- a/packages/block-editor/src/components/link-control/search-results.js
+++ b/packages/block-editor/src/components/link-control/search-results.js
@@ -7,7 +7,7 @@ import { VisuallyHidden, MenuGroup } from '@wordpress/components';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -30,7 +30,7 @@ export default function LinkControlSearchResults( {
 	createSuggestionButtonText,
 	suggestionsQuery,
 } ) {
-	const resultsListClasses = classnames(
+	const resultsListClasses = clsx(
 		'block-editor-link-control__search-results',
 		{
 			'is-loading': isLoading,
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index 91428274a9914..c0cf8a3bc2afe 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -36,13 +36,19 @@ $block-editor-link-control-number-of-actions: 1;
 		}
 
 		.block-editor-link-control__search-item-top {
-			gap: $grid-unit-10;
+			gap: $grid-unit-05;
+			flex-wrap: wrap;
 
 			.components-button.has-icon {
-				min-width: inherit;
-				width: min-content;
+				width: auto;
+				padding: $grid-unit-05;
 			}
 		}
+
+		.is-preview .block-editor-link-control__search-item-header {
+			min-width: 100%;
+			margin-right: 0;
+		}
 	}
 }
 
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 0537a4b48cbe4..91bfbd7eddaa0 100644
--- a/packages/block-editor/src/components/list-view/block-contents.js
+++ b/packages/block-editor/src/components/list-view/block-contents.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -53,7 +53,7 @@ const ListViewBlockContents = forwardRef(
 		const isBlockMoveTarget =
 			blockMovingClientId && selectedBlockInBlockEditor === clientId;
 
-		const className = classnames( 'block-editor-list-view-block-contents', {
+		const className = clsx( 'block-editor-list-view-block-contents', {
 			'is-dropping-before': isBlockMoveTarget,
 		} );
 
@@ -77,7 +77,7 @@ const ListViewBlockContents = forwardRef(
 				<BlockDraggable
 					appendToOwnerDocument
 					clientIds={ draggableClientIds }
-					cloneClassname={ 'block-editor-list-view-draggable-chip' }
+					cloneClassname="block-editor-list-view-draggable-chip"
 				>
 					{ ( { draggable, onDragStart, onDragEnd } ) => (
 						<ListViewBlockSelectButton
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 b136491ac7455..605e22f226b25 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -16,6 +16,7 @@ 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';
 
 /**
  * Internal dependencies
@@ -26,6 +27,7 @@ import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
 import useListViewImages from './use-list-view-images';
+import { store as blockEditorStore } from '../../store';
 
 function ListViewBlockSelectButton(
 	{
@@ -51,6 +53,15 @@ function ListViewBlockSelectButton(
 		context: 'list-view',
 	} );
 	const { isLocked } = useBlockLock( clientId );
+	const { isContentOnly } = useSelect(
+		( select ) => ( {
+			isContentOnly:
+				select( blockEditorStore ).getBlockEditingMode( clientId ) ===
+				'contentOnly',
+		} ),
+		[ clientId ]
+	);
+	const shouldShowLockIcon = isLocked && ! isContentOnly;
 	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
 
@@ -82,7 +93,7 @@ function ListViewBlockSelectButton(
 
 	return (
 		<Button
-			className={ classnames(
+			className={ clsx(
 				'block-editor-list-view-block-select-button',
 				className
 			) }
@@ -147,7 +158,7 @@ function ListViewBlockSelectButton(
 						) ) }
 					</span>
 				) : null }
-				{ isLocked && (
+				{ shouldShowLockIcon && (
 					<span className="block-editor-list-view-block-select-button__lock">
 						<Icon icon={ lock } />
 					</span>
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
index 46ba4e536ee67..f93ae2a63787c 100644
--- a/packages/block-editor/src/components/list-view/block.js
+++ b/packages/block-editor/src/components/list-view/block.js
@@ -1,12 +1,16 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { hasBlockSupport } from '@wordpress/blocks';
+import {
+	hasBlockSupport,
+	switchToBlockType,
+	store as blocksStore,
+} from '@wordpress/blocks';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
@@ -25,6 +29,7 @@ import { __ } from '@wordpress/i18n';
 import { BACKSPACE, DELETE } from '@wordpress/keycodes';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -85,6 +90,7 @@ function ListViewBlock( {
 		toggleBlockHighlight,
 		duplicateBlocks,
 		multiSelect,
+		replaceBlocks,
 		removeBlocks,
 		insertAfterBlock,
 		insertBeforeBlock,
@@ -100,38 +106,32 @@ function ListViewBlock( {
 		getBlockParents,
 		getBlocksByClientId,
 		canRemoveBlocks,
+		isGroupable,
 	} = useSelect( blockEditorStore );
+	const { getGroupingBlockName } = useSelect( blocksStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
 
-	const { block, blockName, blockEditingMode, allowRightClickOverrides } =
-		useSelect(
-			( select ) => {
-				const {
-					getBlock,
-					getBlockName,
-					getBlockEditingMode,
-					getSettings,
-				} = select( blockEditorStore );
-
-				return {
-					block: getBlock( clientId ),
-					blockName: getBlockName( clientId ),
-					blockEditingMode: getBlockEditingMode( clientId ),
-					allowRightClickOverrides:
-						getSettings().allowRightClickOverrides,
-				};
-			},
-			[ clientId ]
-		);
+	const { block, blockName, allowRightClickOverrides } = useSelect(
+		( select ) => {
+			const { getBlock, getBlockName, getSettings } =
+				select( blockEditorStore );
+
+			return {
+				block: getBlock( clientId ),
+				blockName: getBlockName( clientId ),
+				allowRightClickOverrides:
+					getSettings().allowRightClickOverrides,
+			};
+		},
+		[ clientId ]
+	);
 
 	const showBlockActions =
 		// When a block hides its toolbar it also hides the block settings menu,
 		// since that menu is part of the toolbar in the editor canvas.
 		// List View respects this by also hiding the block settings menu.
-		hasBlockSupport( blockName, '__experimentalToolbar', true ) &&
-		// Don't show the settings menu if block is disabled or content only.
-		blockEditingMode === 'default';
+		hasBlockSupport( blockName, '__experimentalToolbar', true );
 	const instanceId = useInstanceId( ListViewBlock );
 	const descriptionId = `list-view-block-select-button__description-${ instanceId }`;
 
@@ -181,6 +181,8 @@ function ListViewBlock( {
 			return;
 		}
 
+		const isDeleteKey = [ BACKSPACE, DELETE ].includes( event.keyCode );
+
 		// If multiple blocks are selected, deselect all blocks when the user
 		// presses the escape key.
 		if (
@@ -191,10 +193,15 @@ function ListViewBlock( {
 			event.preventDefault();
 			selectBlock( event, undefined );
 		} else if (
-			event.keyCode === BACKSPACE ||
-			event.keyCode === DELETE ||
+			isDeleteKey ||
 			isMatch( 'core/block-editor/remove', event )
 		) {
+			// Do not handle single-key block deletion shortcuts when events come from modals;
+			// retain the default behavior for these keys.
+			if ( isDeleteKey && event.target.closest( '[role=dialog]' ) ) {
+				return;
+			}
+
 			const {
 				blocksToUpdate: blocksToDelete,
 				firstBlockClientId,
@@ -324,6 +331,23 @@ function ListViewBlock( {
 			collapseAll();
 			// Expand all parents of the current block.
 			expand( blockParents );
+		} else if ( isMatch( 'core/block-editor/group', event ) ) {
+			const { blocksToUpdate } = getBlocksToUpdate();
+			if ( blocksToUpdate.length > 1 && isGroupable( blocksToUpdate ) ) {
+				event.preventDefault();
+				const blocks = getBlocksByClientId( blocksToUpdate );
+				const groupingBlockName = getGroupingBlockName();
+				const newBlocks = switchToBlockType(
+					blocks,
+					groupingBlockName
+				);
+				replaceBlocks( blocksToUpdate, newBlocks );
+				speak( __( 'Selected blocks are grouped.' ) );
+				const newlySelectedBlocks = getSelectedBlockClientIds();
+				// Focus the first block of the newly inserted blocks, to keep focus within the list view.
+				setOpenedBlockSettingsMenu( undefined );
+				updateFocusAndSelection( newlySelectedBlocks[ 0 ], false );
+			}
 		}
 	}
 
@@ -446,12 +470,12 @@ function ListViewBlock( {
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
-	const moverCellClassName = classnames(
+	const moverCellClassName = clsx(
 		'block-editor-list-view-block__mover-cell',
 		{ 'is-visible': isHovered || isSelected }
 	);
 
-	const listViewBlockSettingsClassName = classnames(
+	const listViewBlockSettingsClassName = clsx(
 		'block-editor-list-view-block__menu-cell',
 		{ 'is-visible': isHovered || isFirstSelectedBlock }
 	);
@@ -463,7 +487,7 @@ function ListViewBlock( {
 		colSpan = 3;
 	}
 
-	const classes = classnames( {
+	const classes = clsx( {
 		'is-selected': isSelected,
 		'is-first-selected': isFirstSelectedBlock,
 		'is-last-selected': isLastSelectedBlock,
diff --git a/packages/block-editor/src/components/list-view/drop-indicator.js b/packages/block-editor/src/components/list-view/drop-indicator.js
index a590ebe029b27..3185bf9fbb248 100644
--- a/packages/block-editor/src/components/list-view/drop-indicator.js
+++ b/packages/block-editor/src/components/list-view/drop-indicator.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -302,7 +302,7 @@ export default function ListViewDropIndicatorPreview( {
 		>
 			<div
 				style={ style }
-				className={ classnames(
+				className={ clsx(
 					'block-editor-list-view-drop-indicator__line',
 					{
 						'block-editor-list-view-drop-indicator__line--darker':
@@ -315,7 +315,7 @@ export default function ListViewDropIndicatorPreview( {
 					aria-level={ ariaLevel }
 				>
 					<div
-						className={ classnames(
+						className={ clsx(
 							'block-editor-list-view-block-select-button',
 							'block-editor-list-view-block-contents'
 						) }
diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
index 7ef5d270f50a2..1493fa655a5aa 100644
--- a/packages/block-editor/src/components/list-view/index.js
+++ b/packages/block-editor/src/components/list-view/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -366,7 +366,7 @@ function ListViewComponent(
 			) }
 			<TreeGrid
 				id={ id }
-				className={ classnames( 'block-editor-list-view-tree', {
+				className={ clsx( 'block-editor-list-view-tree', {
 					'is-dragging':
 						draggedClientIds?.length > 0 &&
 						blockDropTargetIndex !== undefined,
diff --git a/packages/block-editor/src/components/list-view/leaf.js b/packages/block-editor/src/components/list-view/leaf.js
index ba6d528746829..1e3e6320d2ace 100644
--- a/packages/block-editor/src/components/list-view/leaf.js
+++ b/packages/block-editor/src/components/list-view/leaf.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { animated } from '@react-spring/web';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -44,10 +44,7 @@ const ListViewLeaf = forwardRef(
 		return (
 			<AnimatedTreeGridRow
 				ref={ mergedRef }
-				className={ classnames(
-					'block-editor-list-view-leaf',
-					className
-				) }
+				className={ clsx( 'block-editor-list-view-leaf', className ) }
 				level={ level }
 				positionInSet={ position }
 				setSize={ rowCount }
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index 1204cad02db87..7fb46d3ca9d56 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -349,7 +349,7 @@ export function MediaPlaceholder( {
 			}
 		}
 
-		const placeholderClassName = classnames(
+		const placeholderClassName = clsx(
 			'block-editor-media-placeholder',
 			className,
 			{
@@ -452,7 +452,7 @@ export function MediaPlaceholder( {
 				multiple={ multiple }
 				onSelect={ onSelect }
 				allowedTypes={ allowedTypes }
-				mode={ 'browse' }
+				mode="browse"
 				value={
 					Array.isArray( value )
 						? value.map( ( { id } ) => id )
@@ -475,7 +475,7 @@ export function MediaPlaceholder( {
 								<>
 									<Button
 										variant="primary"
-										className={ classnames(
+										className={ clsx(
 											'block-editor-media-placeholder__button',
 											'block-editor-media-placeholder__upload-button'
 										) }
@@ -502,7 +502,7 @@ export function MediaPlaceholder( {
 					{ renderDropZone() }
 					<FormFileUpload
 						variant="primary"
-						className={ classnames(
+						className={ clsx(
 							'block-editor-media-placeholder__button',
 							'block-editor-media-placeholder__upload-button'
 						) }
diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js
index e597b65d63b86..bbd9cbad73a4a 100644
--- a/packages/block-editor/src/components/media-placeholder/index.native.js
+++ b/packages/block-editor/src/components/media-placeholder/index.native.js
@@ -164,7 +164,7 @@ function MediaPlaceholder( props ) {
 						activeOpacity={ 0.5 }
 						accessibilityLabel={ accessibilityLabel }
 						style={ buttonStyles }
-						accessibilityRole={ 'button' }
+						accessibilityRole="button"
 						accessibilityHint={ accessibilityHint }
 						hitSlop={ hitSlop }
 						onPress={ onButtonPress( open ) }
@@ -181,7 +181,7 @@ function MediaPlaceholder( props ) {
 					activeOpacity={ 0.5 }
 					accessibilityLabel={ accessibilityLabel }
 					style={ styles[ 'media-placeholder__appender' ] }
-					accessibilityRole={ 'button' }
+					accessibilityRole="button"
 					accessibilityHint={ accessibilityHint }
 					hitSlop={ hitSlop }
 					onPress={ onButtonPress( open ) }
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 33419676eaab8..318eb166734ee 100644
--- a/packages/block-editor/src/components/media-replace-flow/index.js
+++ b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -207,7 +207,7 @@ const MediaReplaceFlow = ( {
 					{ onSelectURL && (
 						// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
 						<form
-							className={ classnames(
+							className={ clsx(
 								'block-editor-media-flow__url-input',
 								{
 									'has-siblings':
diff --git a/packages/block-editor/src/components/media-upload-progress/index.native.js b/packages/block-editor/src/components/media-upload-progress/index.native.js
index cb5a25d0bb866..b2a63e715ba89 100644
--- a/packages/block-editor/src/components/media-upload-progress/index.native.js
+++ b/packages/block-editor/src/components/media-upload-progress/index.native.js
@@ -9,7 +9,10 @@ import { View } from 'react-native';
 import { Component } from '@wordpress/element';
 import { Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { subscribeMediaUpload } from '@wordpress/react-native-bridge';
+import {
+	subscribeMediaUpload,
+	requestImageUploadCancel,
+} from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -44,12 +47,17 @@ export class MediaUploadProgress extends Component {
 	}
 
 	componentWillUnmount() {
+		const { isUploadInProgress, isUploadFailed } = this.state;
+		const { mediaId } = this.props;
+
+		if ( isUploadInProgress || isUploadFailed ) {
+			requestImageUploadCancel( mediaId );
+		}
 		this.removeMediaUploadListener();
 	}
 
 	mediaUpload( payload ) {
 		const { mediaId } = this.props;
-
 		if (
 			payload.mediaId !== mediaId ||
 			( payload.state === this.state.uploadState &&
@@ -58,6 +66,11 @@ export class MediaUploadProgress extends Component {
 			return;
 		}
 
+		if ( payload?.mediaUrl && ! payload.state ) {
+			this.updateMediaThumbnail( payload );
+			return;
+		}
+
 		switch ( payload.state ) {
 			case MEDIA_UPLOAD_STATE_UPLOADING:
 				this.updateMediaProgress( payload );
@@ -89,6 +102,13 @@ export class MediaUploadProgress extends Component {
 		}
 	}
 
+	updateMediaThumbnail( payload ) {
+		const { onUpdateMediaProgress } = this.props;
+		if ( onUpdateMediaProgress ) {
+			onUpdateMediaProgress( payload );
+		}
+	}
+
 	finishMediaUploadWithSuccess( payload ) {
 		this.setState( {
 			uploadState: payload.state,
diff --git a/packages/block-editor/src/components/plain-text/index.js b/packages/block-editor/src/components/plain-text/index.js
index 2a4e1b423e609..4bd6681f4eb07 100644
--- a/packages/block-editor/src/components/plain-text/index.js
+++ b/packages/block-editor/src/components/plain-text/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import TextareaAutosize from 'react-autosize-textarea';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -27,7 +27,7 @@ const PlainText = forwardRef( ( { __experimentalVersion, ...props }, ref ) => {
 	return (
 		<TextareaAutosize
 			ref={ ref }
-			className={ classnames( 'block-editor-plain-text', className ) }
+			className={ clsx( 'block-editor-plain-text', className ) }
 			onChange={ ( event ) => onChange( event.target.value ) }
 			{ ...remainingProps }
 		/>
diff --git a/packages/block-editor/src/components/provider/use-block-sync.js b/packages/block-editor/src/components/provider/use-block-sync.js
index 57e53979142d6..4e9cc9784554f 100644
--- a/packages/block-editor/src/components/provider/use-block-sync.js
+++ b/packages/block-editor/src/components/provider/use-block-sync.js
@@ -2,14 +2,13 @@
  * WordPress dependencies
  */
 import { useEffect, useRef } from '@wordpress/element';
-import { useRegistry } from '@wordpress/data';
+import { useRegistry, useSelect } from '@wordpress/data';
 import { cloneBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { undoIgnoreBlocks } from '../../store/undo-ignore';
 
 const noop = () => {};
 
@@ -82,6 +81,15 @@ export default function useBlockSync( {
 	} = registry.dispatch( blockEditorStore );
 	const { getBlockName, getBlocks, getSelectionStart, getSelectionEnd } =
 		registry.select( blockEditorStore );
+	const isControlled = useSelect(
+		( select ) => {
+			return (
+				! clientId ||
+				select( blockEditorStore ).areInnerBlocksControlled( clientId )
+			);
+		},
+		[ clientId ]
+	);
 
 	const pendingChanges = useRef( { incoming: null, outgoing: [] } );
 	const subscribed = useRef( false );
@@ -177,6 +185,23 @@ export default function useBlockSync( {
 		}
 	}, [ controlledBlocks, clientId ] );
 
+	const isMounted = useRef( false );
+
+	useEffect( () => {
+		// On mount, controlled blocks are already set in the effect above.
+		if ( ! isMounted.current ) {
+			isMounted.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 = [];
+			setControlledBlocks();
+		}
+	}, [ isControlled ] );
+
 	useEffect( () => {
 		const {
 			getSelectedBlocksInitialCaretPosition,
@@ -248,10 +273,6 @@ export default function useBlockSync( {
 				const updateParent = isPersistent
 					? onChangeRef.current
 					: onInputRef.current;
-				const undoIgnore = undoIgnoreBlocks.has( blocks );
-				if ( undoIgnore ) {
-					undoIgnoreBlocks.delete( blocks );
-				}
 				updateParent( blocks, {
 					selection: {
 						selectionStart: getSelectionStart(),
@@ -259,7 +280,6 @@ export default function useBlockSync( {
 						initialPosition:
 							getSelectedBlocksInitialCaretPosition(),
 					},
-					undoIgnore,
 				} );
 			}
 			previousAreBlocksDifferent = areBlocksDifferent;
diff --git a/packages/block-editor/src/components/provider/with-registry-provider.js b/packages/block-editor/src/components/provider/with-registry-provider.js
index 5c00da6e93eab..582a9bd547f20 100644
--- a/packages/block-editor/src/components/provider/with-registry-provider.js
+++ b/packages/block-editor/src/components/provider/with-registry-provider.js
@@ -1,12 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
-import {
-	withRegistry,
-	createRegistry,
-	RegistryProvider,
-} from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { useRegistry, createRegistry, RegistryProvider } from '@wordpress/data';
 import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
@@ -15,41 +11,40 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 import { storeConfig } from '../../store';
 import { STORE_NAME as blockEditorStoreName } from '../../store/constants';
 
-const withRegistryProvider = createHigherOrderComponent(
-	( WrappedComponent ) => {
-		return withRegistry(
-			( { useSubRegistry = true, registry, ...props } ) => {
-				if ( ! useSubRegistry ) {
-					return (
-						<WrappedComponent registry={ registry } { ...props } />
-					);
-				}
-
-				const [ subRegistry, setSubRegistry ] = useState( null );
-				useEffect( () => {
-					const newRegistry = createRegistry( {}, registry );
-					newRegistry.registerStore(
-						blockEditorStoreName,
-						storeConfig
-					);
-					setSubRegistry( newRegistry );
-				}, [ registry ] );
+function getSubRegistry( subRegistries, registry, useSubRegistry ) {
+	if ( ! useSubRegistry ) {
+		return registry;
+	}
+	let subRegistry = subRegistries.get( registry );
+	if ( ! subRegistry ) {
+		subRegistry = createRegistry( {}, registry );
+		subRegistry.registerStore( blockEditorStoreName, storeConfig );
+		subRegistries.set( registry, subRegistry );
+	}
+	return subRegistry;
+}
 
-				if ( ! subRegistry ) {
-					return null;
-				}
+const withRegistryProvider = createHigherOrderComponent(
+	( WrappedComponent ) =>
+		( { useSubRegistry = true, ...props } ) => {
+			const registry = useRegistry();
+			const [ subRegistries ] = useState( () => new WeakMap() );
+			const subRegistry = getSubRegistry(
+				subRegistries,
+				registry,
+				useSubRegistry
+			);
 
-				return (
-					<RegistryProvider value={ subRegistry }>
-						<WrappedComponent
-							registry={ subRegistry }
-							{ ...props }
-						/>
-					</RegistryProvider>
-				);
+			if ( subRegistry === registry ) {
+				return <WrappedComponent registry={ registry } { ...props } />;
 			}
-		);
-	},
+
+			return (
+				<RegistryProvider value={ subRegistry }>
+					<WrappedComponent registry={ subRegistry } { ...props } />
+				</RegistryProvider>
+			);
+		},
 	'withRegistryProvider'
 );
 
diff --git a/packages/block-editor/src/components/publish-date-time-picker/index.js b/packages/block-editor/src/components/publish-date-time-picker/index.js
index 418006cf854c1..eeaa5b2daad6f 100644
--- a/packages/block-editor/src/components/publish-date-time-picker/index.js
+++ b/packages/block-editor/src/components/publish-date-time-picker/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { DateTimePicker } from '@wordpress/components';
+import { DateTimePicker, TimePicker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
 import { getSettings } from '@wordpress/date';
@@ -11,29 +11,57 @@ import { getSettings } from '@wordpress/date';
  */
 import InspectorPopoverHeader from '../inspector-popover-header';
 
-function PublishDateTimePicker(
-	{ onClose, onChange, ...additionalProps },
+export function PublishDateTimePicker(
+	{
+		onClose,
+		onChange,
+		showPopoverHeaderActions,
+		isCompact,
+		currentDate,
+		...additionalProps
+	},
 	ref
 ) {
+	const datePickerProps = {
+		startOfWeek: getSettings().l10n.startOfWeek,
+		onChange,
+		currentDate: isCompact ? undefined : currentDate,
+		currentTime: isCompact ? currentDate : undefined,
+		...additionalProps,
+	};
+	const DatePickerComponent = isCompact ? TimePicker : DateTimePicker;
 	return (
 		<div ref={ ref } className="block-editor-publish-date-time-picker">
 			<InspectorPopoverHeader
 				title={ __( 'Publish' ) }
-				actions={ [
-					{
-						label: __( 'Now' ),
-						onClick: () => onChange?.( null ),
-					},
-				] }
+				actions={
+					showPopoverHeaderActions
+						? [
+								{
+									label: __( 'Now' ),
+									onClick: () => onChange?.( null ),
+								},
+						  ]
+						: undefined
+				}
 				onClose={ onClose }
 			/>
-			<DateTimePicker
-				startOfWeek={ getSettings().l10n.startOfWeek }
-				onChange={ onChange }
-				{ ...additionalProps }
-			/>
+			<DatePickerComponent { ...datePickerProps } />
 		</div>
 	);
 }
 
-export default forwardRef( PublishDateTimePicker );
+export const PrivatePublishDateTimePicker = forwardRef( PublishDateTimePicker );
+
+function PublicPublishDateTimePicker( props, ref ) {
+	return (
+		<PrivatePublishDateTimePicker
+			{ ...props }
+			showPopoverHeaderActions
+			isCompact={ false }
+			ref={ ref }
+		/>
+	);
+}
+
+export default forwardRef( PublicPublishDateTimePicker );
diff --git a/packages/block-editor/src/components/resolution-tool/index.js b/packages/block-editor/src/components/resolution-tool/index.js
index 71c7e508ca3ed..42fea6e8655a8 100644
--- a/packages/block-editor/src/components/resolution-tool/index.js
+++ b/packages/block-editor/src/components/resolution-tool/index.js
@@ -49,7 +49,7 @@ export default function ResolutionTool( {
 				options={ options }
 				onChange={ onChange }
 				help={ __( 'Select the size of the source image.' ) }
-				size={ '__unstable-large' }
+				size="__unstable-large"
 			/>
 		</ToolsPanelItem>
 	);
diff --git a/packages/block-editor/src/components/responsive-block-control/index.js b/packages/block-editor/src/components/responsive-block-control/index.js
index 575018fd7319a..148ba9600f003 100644
--- a/packages/block-editor/src/components/responsive-block-control/index.js
+++ b/packages/block-editor/src/components/responsive-block-control/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -98,7 +98,7 @@ function ResponsiveBlockControl( props ) {
 					help={ toggleHelpText }
 				/>
 				<div
-					className={ classnames(
+					className={ clsx(
 						'block-editor-responsive-block-control__group',
 						{
 							'is-responsive': isResponsive,
diff --git a/packages/block-editor/src/components/rich-text/README.md b/packages/block-editor/src/components/rich-text/README.md
index bea07cdc5c065..11ea1c75204dd 100644
--- a/packages/block-editor/src/components/rich-text/README.md
+++ b/packages/block-editor/src/components/rich-text/README.md
@@ -29,10 +29,6 @@ _Optional._ Placeholder text to show when the field is empty, similar to the
 
 _Optional._  Disables inserting line breaks on `Enter` when it is set to `true`
 
-### `multiline: Boolean | String`
-
-_Optional._ By default, a line break will be inserted on <kbd>Enter</kbd>. If the editable field can contain multiple paragraphs, this property can be set to create new paragraphs on <kbd>Enter</kbd>.
-
 ### `onReplace( blocks: Array ): Function`
 
 _Optional._ Called when the `RichText` instance can be replaced with the given blocks.
diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.js
index 2a8a7a753211f..22202d2d78d10 100644
--- a/packages/block-editor/src/components/rich-text/format-toolbar/index.js
+++ b/packages/block-editor/src/components/rich-text/format-toolbar/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -48,7 +48,7 @@ const FormatToolbar = () => {
 									label={ __( 'More' ) }
 									toggleProps={ {
 										...toggleProps,
-										className: classnames(
+										className: clsx(
 											toggleProps.className,
 											{ 'is-pressed': hasActive }
 										),
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index 670c32975dc43..cc22c9b804130 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,6 +11,7 @@ import {
 	useCallback,
 	forwardRef,
 	createContext,
+	useContext,
 } from '@wordpress/element';
 import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { useMergeRefs, useInstanceId } from '@wordpress/compose';
@@ -39,6 +40,7 @@ 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';
 
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
@@ -121,6 +123,7 @@ export function RichTextWrapper(
 	const context = useBlockEditContext();
 	const { clientId, isSelected: isBlockSelected, name: blockName } = context;
 	const blockBindings = context[ blockBindingsKey ];
+	const blockContext = useContext( BlockContext );
 	const selector = ( select ) => {
 		// Avoid subscribing to the block editor store if the block is not
 		// selected.
@@ -170,7 +173,7 @@ export function RichTextWrapper(
 				const { getBlockBindingsSource } = unlock(
 					select( blocksStore )
 				);
-				for ( const [ attribute, args ] of Object.entries(
+				for ( const [ attribute, binding ] of Object.entries(
 					blockBindings
 				) ) {
 					if (
@@ -180,13 +183,16 @@ export function RichTextWrapper(
 						break;
 					}
 
-					// If the source is not defined, or if its value of `lockAttributesEditing` is `true`, disable it.
+					// If the source is not defined, or if its value of `canUserEditValue` is `false`, disable it.
 					const blockBindingsSource = getBlockBindingsSource(
-						args.source
+						binding.source
 					);
 					if (
-						! blockBindingsSource ||
-						blockBindingsSource.lockAttributesEditing
+						! blockBindingsSource?.canUserEditValue( {
+							select,
+							context: blockContext,
+							args: binding.args,
+						} )
 					) {
 						_disableBoundBlocks = true;
 						break;
@@ -426,7 +432,7 @@ export function RichTextWrapper(
 				] ) }
 				contentEditable={ ! shouldDisableEditing }
 				suppressContentEditableWarning
-				className={ classnames(
+				className={ clsx(
 					'block-editor-rich-text__editable',
 					props.className,
 					'rich-text'
diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js
index 5729aa2d4bf27..2697f5fdf154b 100644
--- a/packages/block-editor/src/components/rich-text/index.native.js
+++ b/packages/block-editor/src/components/rich-text/index.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -644,7 +644,7 @@ export function RichTextWrapper(
 										  }
 										: editableProps.style
 								}
-								className={ classnames(
+								className={ clsx(
 									classes,
 									props.className,
 									editableProps.className
diff --git a/packages/block-editor/src/components/rich-text/native/index.native.js b/packages/block-editor/src/components/rich-text/native/index.native.js
index 26d39a0c6058b..aa06c4dd1e892 100644
--- a/packages/block-editor/src/components/rich-text/native/index.native.js
+++ b/packages/block-editor/src/components/rich-text/native/index.native.js
@@ -402,7 +402,8 @@ export class RichText extends Component {
 		this.comesFromAztec = true;
 		this.firedAfterTextChanged = event.nativeEvent.firedAfterTextChanged;
 		const value = this.createRecord();
-		const { start, end, text } = value;
+		const { start, end, text, activeFormats } = value;
+		const hasActiveFormats = activeFormats && !! activeFormats.length;
 		let newValue;
 
 		// Always handle full content deletion ourselves.
@@ -415,8 +416,8 @@ export class RichText extends Component {
 
 		// Only process delete if the key press occurs at an uncollapsed edge.
 		if (
-			! onDelete ||
 			! isCollapsed( value ) ||
+			hasActiveFormats ||
 			( isReverse && start !== 0 ) ||
 			( ! isReverse && end !== text.length )
 		) {
diff --git a/packages/block-editor/src/components/rich-text/native/test/index.native.js b/packages/block-editor/src/components/rich-text/native/test/index.native.js
index 8197952a116dd..26b6d6c5358ec 100644
--- a/packages/block-editor/src/components/rich-text/native/test/index.native.js
+++ b/packages/block-editor/src/components/rich-text/native/test/index.native.js
@@ -151,7 +151,7 @@ describe( '<RichText/>', () => {
 			const expectedFontSize = 16;
 			// Act.
 			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } />
+				<RichText accessibilityLabel="editor" />
 			);
 			// Assert.
 			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
@@ -164,8 +164,8 @@ describe( '<RichText/>', () => {
 			// Act.
 			const { getByLabelText } = render(
 				<RichText
-					accessibilityLabel={ 'editor' }
-					fontSize={ 'min(2em, 3em)' }
+					accessibilityLabel="editor"
+					fontSize="min(2em, 3em)"
 				/>
 			);
 			// Assert.
@@ -179,7 +179,7 @@ describe( '<RichText/>', () => {
 			// Act.
 			const { getByLabelText } = render(
 				<RichText
-					accessibilityLabel={ 'editor' }
+					accessibilityLabel="editor"
 					style={ { fontSize: 'min(2em, 3em)' } }
 				/>
 			);
@@ -195,7 +195,7 @@ describe( '<RichText/>', () => {
 			mockGlobalSettings( { fontSize: 'min(2em, 3em)' } );
 			// Act.
 			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } tagName="div" />
+				<RichText accessibilityLabel="editor" tagName="div" />
 			);
 			// Assert.
 			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
@@ -209,7 +209,7 @@ describe( '<RichText/>', () => {
 			mockGlobalSettings( { fontSize: 'min(2em, 3em)' } );
 			// Act.
 			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } tagName="p" />
+				<RichText accessibilityLabel="editor" tagName="p" />
 			);
 			// Assert.
 			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
@@ -224,7 +224,7 @@ describe( '<RichText/>', () => {
 				mockGlobalSettings( { fontSize: unit } );
 				// Act.
 				const { getByLabelText } = render(
-					<RichText accessibilityLabel={ 'editor' } tagName="p" />
+					<RichText accessibilityLabel="editor" tagName="p" />
 				);
 				// Assert.
 				const actualFontSize =
@@ -241,9 +241,9 @@ describe( '<RichText/>', () => {
 			// Act.
 			const { getByLabelText } = render(
 				<RichText
-					accessibilityLabel={ 'editor' }
+					accessibilityLabel="editor"
 					style={ { fontSize: '1' } }
-					fontSize={ '2' }
+					fontSize="2"
 					tagName="p"
 				/>
 			);
@@ -260,7 +260,7 @@ describe( '<RichText/>', () => {
 			// Act.
 			const { getByLabelText } = render(
 				<RichText
-					accessibilityLabel={ 'editor' }
+					accessibilityLabel="editor"
 					style={ { fontSize: '1' } }
 					tagName="p"
 				/>
@@ -276,7 +276,7 @@ describe( '<RichText/>', () => {
 			Dimensions.set( { window: { ...window, width: 300 } } );
 			// Act.
 			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } fontSize={ '1vw' } />
+				<RichText accessibilityLabel="editor" fontSize="1vw" />
 			);
 			// Assert.
 			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
@@ -289,7 +289,7 @@ describe( '<RichText/>', () => {
 			Dimensions.set( { window: { ...window, height: 300 } } );
 			// Act.
 			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } fontSize={ '1vh' } />
+				<RichText accessibilityLabel="editor" fontSize="1vh" />
 			);
 			// Assert.
 			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
@@ -335,7 +335,7 @@ describe( '<RichText/>', () => {
 			const style = { lineHeight: 0.2 };
 			// Act.
 			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } style={ style } />
+				<RichText accessibilityLabel="editor" style={ style } />
 			);
 			// Assert.
 			const actualFontSize = getByLabelText( 'editor' ).props.lineHeight;
diff --git a/packages/block-editor/src/components/segmented-text-control/index.js b/packages/block-editor/src/components/segmented-text-control/index.js
index a6117bcc22151..28f049bfb40ec 100644
--- a/packages/block-editor/src/components/segmented-text-control/index.js
+++ b/packages/block-editor/src/components/segmented-text-control/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -36,7 +36,7 @@ export default function SegmentedTextControl( {
 } ) {
 	return (
 		<fieldset
-			className={ classnames(
+			className={ clsx(
 				'block-editor-segmented-text-control',
 				className
 			) }
diff --git a/packages/block-editor/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js b/packages/block-editor/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js
index e75f3519a1ca6..9943978c15af1 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js
@@ -1,28 +1,70 @@
 /**
  * WordPress dependencies
  */
+import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { useSettings } from '../../use-settings';
+import { RANGE_CONTROL_MAX_SIZE } from '../utils';
+
+const EMPTY_ARRAY = [];
+
+const compare = new Intl.Collator( 'und', { numeric: true } ).compare;
 
 export default function useSpacingSizes() {
-	const spacingSizes = [ { name: 0, slug: '0', size: 0 } ];
-
-	const [ settingsSizes ] = useSettings( 'spacing.spacingSizes' );
-	if ( settingsSizes ) {
-		spacingSizes.push( ...settingsSizes );
-	}
-
-	if ( spacingSizes.length > 8 ) {
-		spacingSizes.unshift( {
-			name: __( 'Default' ),
-			slug: 'default',
-			size: undefined,
-		} );
-	}
-
-	return spacingSizes;
+	const [
+		customSpacingSizes,
+		themeSpacingSizes,
+		defaultSpacingSizes,
+		defaultSpacingSizesEnabled,
+	] = useSettings(
+		'spacing.spacingSizes.custom',
+		'spacing.spacingSizes.theme',
+		'spacing.spacingSizes.default',
+		'spacing.defaultSpacingSizes'
+	);
+
+	const customSizes = customSpacingSizes ?? EMPTY_ARRAY;
+
+	const themeSizes = themeSpacingSizes ?? EMPTY_ARRAY;
+
+	const defaultSizes =
+		defaultSpacingSizes && defaultSpacingSizesEnabled !== false
+			? defaultSpacingSizes
+			: EMPTY_ARRAY;
+
+	return useMemo( () => {
+		const sizes = [
+			{ name: __( 'None' ), slug: '0', size: 0 },
+			...customSizes,
+			...themeSizes,
+			...defaultSizes,
+		];
+
+		// Only sort if more than one origin has presets defined in order to
+		// preserve order for themes that don't include default presets and
+		// want a custom order.
+		if (
+			( customSizes.length && 1 ) +
+				( themeSizes.length && 1 ) +
+				( defaultSizes.length && 1 ) >
+			1
+		) {
+			sizes.sort( ( a, b ) => compare( a.slug, b.slug ) );
+		}
+
+		return sizes.length > RANGE_CONTROL_MAX_SIZE
+			? [
+					{
+						name: __( 'Default' ),
+						slug: 'default',
+						size: undefined,
+					},
+					...sizes,
+			  ]
+			: sizes;
+	}, [ customSizes, themeSizes, defaultSizes ] );
 }
diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js
index 6feb583c29cdb..58a81d8b130a3 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
@@ -23,6 +23,7 @@ import { settings } from '@wordpress/icons';
 import { useSettings } from '../../use-settings';
 import { store as blockEditorStore } from '../../../store';
 import {
+	RANGE_CONTROL_MAX_SIZE,
 	ALL_SIDES,
 	LABELS,
 	getSliderValueFromPreset,
@@ -79,7 +80,7 @@ export default function SpacingInputControl( {
 	value = getPresetValueFromCustomValue( value, spacingSizes );
 
 	let selectListSizes = spacingSizes;
-	const showRangeControl = spacingSizes.length <= 8;
+	const showRangeControl = spacingSizes.length <= RANGE_CONTROL_MAX_SIZE;
 
 	const disableCustomSpacingSizes = useSelect( ( select ) => {
 		const editorSettings = select( blockEditorStore ).getSettings();
@@ -230,7 +231,7 @@ export default function SpacingInputControl( {
 						label={ ariaLabel }
 						hideLabelFromVision
 						className="spacing-sizes-control__custom-value-input"
-						size={ '__unstable-large' }
+						size="__unstable-large"
 						onDragStart={ () => {
 							if ( value?.charAt( 0 ) === '-' ) {
 								setMinValue( 0 );
@@ -312,7 +313,7 @@ export default function SpacingInputControl( {
 					options={ options }
 					label={ ariaLabel }
 					hideLabelFromVision
-					size={ '__unstable-large' }
+					size="__unstable-large"
 					onMouseOver={ onMouseOver }
 					onMouseOut={ onMouseOut }
 					onFocus={ onMouseOver }
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 32f0dbc59ac46..91c5a91934f6e 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/utils.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/utils.js
@@ -12,6 +12,8 @@ import {
 	sidesVertical,
 } from '@wordpress/icons';
 
+export const RANGE_CONTROL_MAX_SIZE = 8;
+
 export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
 
 export const DEFAULT_VALUES = {
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 a8e9ee22df7fd..88a6fe274ea09 100644
--- a/packages/block-editor/src/components/text-alignment-control/index.js
+++ b/packages/block-editor/src/components/text-alignment-control/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -78,7 +78,7 @@ export default function TextAlignmentControl( {
 		<SegmentedTextControl
 			label={ __( 'Text alignment' ) }
 			options={ validOptions }
-			className={ classnames(
+			className={ clsx(
 				'block-editor-text-alignment-control',
 				className
 			) }
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 6a2085e980bd4..d06632afdbb3c 100644
--- a/packages/block-editor/src/components/text-decoration-control/index.js
+++ b/packages/block-editor/src/components/text-decoration-control/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -51,7 +51,7 @@ export default function TextDecorationControl( {
 		<SegmentedTextControl
 			label={ __( 'Decoration' ) }
 			options={ TEXT_DECORATIONS }
-			className={ classnames(
+			className={ clsx(
 				'block-editor-text-decoration-control',
 				className
 			) }
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 8fd1fb9cfdf51..f448a55ed946c 100644
--- a/packages/block-editor/src/components/text-transform-control/index.js
+++ b/packages/block-editor/src/components/text-transform-control/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -57,7 +57,7 @@ export default function TextTransformControl( { className, value, onChange } ) {
 		<SegmentedTextControl
 			label={ __( 'Letter case' ) }
 			options={ TEXT_TRANSFORMS }
-			className={ classnames(
+			className={ clsx(
 				'block-editor-text-transform-control',
 				className
 			) }
diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js
index 56426d2eaf479..36e279f94cc79 100644
--- a/packages/block-editor/src/components/url-input/index.js
+++ b/packages/block-editor/src/components/url-input/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -441,7 +441,7 @@ class URLInput extends Component {
 		const controlProps = {
 			id: inputId, // Passes attribute to label for the for attribute
 			label,
-			className: classnames( 'block-editor-url-input', className, {
+			className: clsx( 'block-editor-url-input', className, {
 				'is-full-width': isFullWidth,
 			} ),
 			hideLabelFromVision,
@@ -546,7 +546,7 @@ class URLInput extends Component {
 			<Popover placement="bottom" focusOnMount={ false }>
 				<div
 					{ ...suggestionsListProps }
-					className={ classnames(
+					className={ clsx(
 						'block-editor-url-input__suggestions',
 						`${ className }__suggestions`
 					) }
@@ -555,7 +555,7 @@ class URLInput extends Component {
 						<Button
 							{ ...buildSuggestionItemProps( suggestion, index ) }
 							key={ suggestion.id }
-							className={ classnames(
+							className={ clsx(
 								'block-editor-url-input__suggestion',
 								{
 									'is-selected': index === selectedSuggestion,
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 9acae97615efc..dc9d6d45590d3 100644
--- a/packages/block-editor/src/components/url-popover/link-editor.js
+++ b/packages/block-editor/src/components/url-popover/link-editor.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -24,7 +24,7 @@ export default function LinkEditor( {
 } ) {
 	return (
 		<form
-			className={ classnames(
+			className={ clsx(
 				'block-editor-url-popover__link-editor',
 				className
 			) }
diff --git a/packages/block-editor/src/components/url-popover/link-viewer-url.js b/packages/block-editor/src/components/url-popover/link-viewer-url.js
index 5cf710f203009..c465cd5ad50eb 100644
--- a/packages/block-editor/src/components/url-popover/link-viewer-url.js
+++ b/packages/block-editor/src/components/url-popover/link-viewer-url.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -10,7 +10,7 @@ import { ExternalLink } from '@wordpress/components';
 import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
 
 export default function LinkViewerURL( { url, urlLabel, className } ) {
-	const linkClassName = classnames(
+	const linkClassName = clsx(
 		className,
 		'block-editor-url-popover__link-viewer-url'
 	);
diff --git a/packages/block-editor/src/components/url-popover/link-viewer.js b/packages/block-editor/src/components/url-popover/link-viewer.js
index 20db486e19caa..2b3249b7ba0aa 100644
--- a/packages/block-editor/src/components/url-popover/link-viewer.js
+++ b/packages/block-editor/src/components/url-popover/link-viewer.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -25,7 +25,7 @@ export default function LinkViewer( {
 } ) {
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'block-editor-url-popover__link-viewer',
 				className
 			) }
diff --git a/packages/block-editor/src/components/video-player/index.native.js b/packages/block-editor/src/components/video-player/index.native.js
index a409c1d4ad99f..3c9de8758579b 100644
--- a/packages/block-editor/src/components/video-player/index.native.js
+++ b/packages/block-editor/src/components/video-player/index.native.js
@@ -99,7 +99,7 @@ class Video extends Component {
 					// So we are setting controls=false and adding a play button that
 					// will trigger presentFullscreenPlayer()
 					controls={ false }
-					ignoreSilentSwitch={ 'ignore' }
+					ignoreSilentSwitch="ignore"
 					paused={ ! isFullScreen }
 					onLayout={ this.onVideoLayout }
 					onFullscreenPlayerWillPresent={ () => {
diff --git a/packages/block-editor/src/components/warning/index.js b/packages/block-editor/src/components/warning/index.js
index 914f04e4fc80e..8b6279bef6044 100644
--- a/packages/block-editor/src/components/warning/index.js
+++ b/packages/block-editor/src/components/warning/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { moreVertical } from '@wordpress/icons';
 function Warning( { className, actions, children, secondaryActions } ) {
 	return (
 		<div style={ { display: 'contents', all: 'initial' } }>
-			<div className={ classnames( className, 'block-editor-warning' ) }>
+			<div className={ clsx( className, 'block-editor-warning' ) }>
 				<div className="block-editor-warning__contents">
 					<p className="block-editor-warning__message">
 						{ children }
diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
index c76ab74b03b77..7e6b36b0e2214 100644
--- a/packages/block-editor/src/components/writing-flow/index.js
+++ b/packages/block-editor/src/components/writing-flow/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -78,7 +78,7 @@ function WritingFlow( { children, ...props }, forwardedRef ) {
 			<div
 				{ ...props }
 				ref={ useMergeRefs( [ ref, forwardedRef ] ) }
-				className={ classNames(
+				className={ clsx(
 					props.className,
 					'block-editor-writing-flow'
 				) }
diff --git a/packages/block-editor/src/components/writing-flow/use-clipboard-handler.js b/packages/block-editor/src/components/writing-flow/use-clipboard-handler.js
index a6d5c61b8b5c8..56583447d3f0e 100644
--- a/packages/block-editor/src/components/writing-flow/use-clipboard-handler.js
+++ b/packages/block-editor/src/components/writing-flow/use-clipboard-handler.js
@@ -60,6 +60,25 @@ export default function useClipboardHandler() {
 				return;
 			}
 
+			// Let native copy/paste behaviour take over in input fields.
+			// But always handle multiple selected blocks.
+			if ( ! hasMultiSelection() ) {
+				const { target } = event;
+				const { ownerDocument } = target;
+				// If copying, only consider actual text selection as selection.
+				// Otherwise, any focus on an input field is considered.
+				const hasSelection =
+					event.type === 'copy' || event.type === 'cut'
+						? documentHasUncollapsedSelection( ownerDocument )
+						: documentHasSelection( ownerDocument ) &&
+						  ! ownerDocument.activeElement.isContentEditable;
+
+				// Let native copy behaviour take over in input fields.
+				if ( hasSelection ) {
+					return;
+				}
+			}
+
 			const { activeElement } = event.target.ownerDocument;
 
 			if ( ! node.contains( activeElement ) ) {
@@ -72,22 +91,6 @@ export default function useClipboardHandler() {
 			const expandSelectionIsNeeded =
 				! shouldHandleWholeBlocks && ! isSelectionMergeable;
 			if ( event.type === 'copy' || event.type === 'cut' ) {
-				if ( ! hasMultiSelection() ) {
-					const { target } = event;
-					const { ownerDocument } = target;
-					// If copying, only consider actual text selection as selection.
-					// Otherwise, any focus on an input field is considered.
-					const hasSelection =
-						event.type === 'copy' || event.type === 'cut'
-							? documentHasUncollapsedSelection( ownerDocument )
-							: documentHasSelection( ownerDocument );
-
-					// Let native copy behaviour take over in input fields.
-					if ( hasSelection ) {
-						return;
-					}
-				}
-
 				event.preventDefault();
 
 				if ( selectedBlockClientIds.length === 1 ) {
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 818a2cdbbda02..1394fbbd37e25 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
@@ -45,7 +45,16 @@ export default function useTabNav() {
 		} else if ( hasMultiSelection() ) {
 			container.current.focus();
 		} else if ( getSelectedBlockClientId() ) {
-			getLastFocus()?.current.focus();
+			if ( getLastFocus()?.current ) {
+				getLastFocus().current.focus();
+			} else {
+				// Handles when the last focus has not been set yet, or has been cleared by new blocks being added via the inserter.
+				container.current
+					.querySelector(
+						`[data-block="${ getSelectedBlockClientId() }"]`
+					)
+					.focus();
+			}
 		} else {
 			setNavigationMode( true );
 
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 420c3d75ba31a..7732f54b1569a 100644
--- a/packages/block-editor/src/components/writing-mode-control/index.js
+++ b/packages/block-editor/src/components/writing-mode-control/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -42,10 +42,7 @@ export default function WritingModeControl( { className, value, onChange } ) {
 		<SegmentedTextControl
 			label={ __( 'Orientation' ) }
 			options={ WRITING_MODES }
-			className={ classnames(
-				'block-editor-writing-mode-control',
-				className
-			) }
+			className={ clsx( 'block-editor-writing-mode-control', className ) }
 			value={ value }
 			onChange={ ( newValue ) => {
 				onChange( newValue === value ? undefined : newValue );
diff --git a/packages/block-editor/src/content.scss b/packages/block-editor/src/content.scss
index fa78f2d41f9f9..36d428dca6b76 100644
--- a/packages/block-editor/src/content.scss
+++ b/packages/block-editor/src/content.scss
@@ -7,6 +7,7 @@
 @import "./components/block-variation-picker/content.scss";
 @import "./components/button-block-appender/content.scss";
 @import "./components/default-block-appender/content.scss";
+@import "./components/iframe/content.scss";
 @import "./components/inner-blocks/content.scss";
 @import "./components/media-placeholder/content.scss";
 @import "./components/plain-text/content.scss";
diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
index 3e4a49bb38555..faaf5bb7f03ce 100644
--- a/packages/block-editor/src/hooks/align.js
+++ b/packages/block-editor/src/hooks/align.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -199,7 +199,7 @@ export function addAssignedAlign( props, blockType, attributes ) {
 		hasWideBlockSupport
 	).includes( align );
 	if ( isAlignValid ) {
-		props.className = classnames( `align${ align }`, props.className );
+		props.className = clsx( `align${ align }`, props.className );
 	}
 
 	return props;
diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
index 3d47f42645afc..3e23efcbf5fc9 100644
--- a/packages/block-editor/src/hooks/background.js
+++ b/packages/block-editor/src/hooks/background.js
@@ -59,7 +59,7 @@ export function setBackgroundStyleDefaults( backgroundStyle ) {
 	let backgroundStylesWithDefaults;
 
 	// Set block background defaults.
-	if ( backgroundImage?.source === 'file' && !! backgroundImage?.url ) {
+	if ( !! backgroundImage?.url ) {
 		if ( ! backgroundStyle?.backgroundSize ) {
 			backgroundStylesWithDefaults = {
 				backgroundSize: 'cover',
diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js
new file mode 100644
index 0000000000000..ab12d5d73f0b6
--- /dev/null
+++ b/packages/block-editor/src/hooks/block-bindings.js
@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { store as blocksStore } from '@wordpress/blocks';
+import {
+	PanelBody,
+	__experimentalHStack as HStack,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { canBindAttribute } from '../hooks/use-bindings-attributes';
+import { unlock } from '../lock-unlock';
+import InspectorControls from '../components/inspector-controls';
+
+export const BlockBindingsPanel = ( { name, metadata } ) => {
+	const { bindings } = metadata || {};
+	const { sources } = useSelect( ( select ) => {
+		const _sources = unlock(
+			select( blocksStore )
+		).getAllBlockBindingsSources();
+
+		return {
+			sources: _sources,
+		};
+	}, [] );
+
+	if ( ! bindings ) {
+		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.
+	const filteredBindings = { ...bindings };
+	Object.keys( filteredBindings ).forEach( ( key ) => {
+		if (
+			! canBindAttribute( name, key ) ||
+			filteredBindings[ key ].source === 'core/pattern-overrides'
+		) {
+			delete filteredBindings[ key ];
+		}
+	} );
+
+	if ( Object.keys( filteredBindings ).length === 0 ) {
+		return null;
+	}
+
+	return (
+		<InspectorControls>
+			<PanelBody
+				title={ __( 'Bindings' ) }
+				className="components-panel__block-bindings-panel"
+			>
+				<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>
+			</PanelBody>
+		</InspectorControls>
+	);
+};
+
+export default {
+	edit: BlockBindingsPanel,
+	attributeKeys: [ 'metadata' ],
+	hasSupport() {
+		return true;
+	},
+};
diff --git a/packages/block-editor/src/hooks/block-bindings.scss b/packages/block-editor/src/hooks/block-bindings.scss
new file mode 100644
index 0000000000000..fd46674ad1142
--- /dev/null
+++ b/packages/block-editor/src/hooks/block-bindings.scss
@@ -0,0 +1,3 @@
+.components-panel__block-bindings-panel .components-item__block-bindings-source {
+	color: $gray-700;
+}
diff --git a/packages/block-editor/src/hooks/block-style-variation.js b/packages/block-editor/src/hooks/block-style-variation.js
new file mode 100644
index 0000000000000..ee02b97d21670
--- /dev/null
+++ b/packages/block-editor/src/hooks/block-style-variation.js
@@ -0,0 +1,156 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { useContext, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	GlobalStylesContext,
+	toStyles,
+	getBlockSelectors,
+} from '../components/global-styles';
+import { useStyleOverride } from './utils';
+import { store as blockEditorStore } from '../store';
+import { globalStylesDataKey } from '../store/private-keys';
+
+/**
+ * Get the first block style variation that has been registered from the class string.
+ *
+ * @param {string} className        CSS class string for a block.
+ * @param {Array}  registeredStyles Currently registered block styles.
+ *
+ * @return {string|null} The name of the first registered variation.
+ */
+function getVariationNameFromClass( className, registeredStyles = [] ) {
+	// The global flag affects how capturing groups work in JS. So the regex
+	// below will only return full CSS classes not just the variation name.
+	const matches = className?.match( /\bis-style-(?!default)(\S+)\b/g );
+
+	if ( ! matches ) {
+		return null;
+	}
+
+	for ( const variationClass of matches ) {
+		const variation = variationClass.substring( 9 ); // Remove 'is-style-' prefix.
+		if ( registeredStyles.some( ( style ) => style.name === variation ) ) {
+			return variation;
+		}
+	}
+	return null;
+}
+
+function useBlockSyleVariation( name, variation, clientId ) {
+	// Prefer global styles data in GlobalStylesContext, which are available
+	// if in the site editor. Otherwise fall back to whatever is in the
+	// editor settings and available in the post editor.
+	const { merged: mergedConfig } = useContext( GlobalStylesContext );
+	const { globalSettings, globalStyles } = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		return {
+			globalSettings: settings.__experimentalFeatures,
+			globalStyles: settings[ globalStylesDataKey ],
+		};
+	}, [] );
+
+	return useMemo( () => {
+		const styles = mergedConfig?.styles ?? globalStyles;
+		const variationStyles =
+			styles?.blocks?.[ name ]?.variations?.[ variation ];
+
+		return {
+			settings: mergedConfig?.settings ?? globalSettings,
+			// The variation style data is all that is needed to generate
+			// the styles for the current application to a block. The variation
+			// name is updated to match the instance specific class name.
+			styles: {
+				blocks: {
+					[ name ]: {
+						variations: {
+							[ `${ variation }-${ clientId }` ]: variationStyles,
+						},
+					},
+				},
+			},
+		};
+	}, [
+		mergedConfig,
+		globalSettings,
+		globalStyles,
+		variation,
+		clientId,
+		name,
+	] );
+}
+
+// Rather than leveraging `useInstanceId` here, the `clientId` is used.
+// This is so that the variation style override's ID is predictable
+// when the order of applied style variations changes.
+function useBlockProps( { name, className, clientId } ) {
+	const { getBlockStyles } = useSelect( blocksStore );
+
+	const registeredStyles = getBlockStyles( name );
+	const variation = getVariationNameFromClass( className, registeredStyles );
+	const variationClass = `is-style-${ variation }-${ clientId }`;
+
+	const { settings, styles } = useBlockSyleVariation(
+		name,
+		variation,
+		clientId
+	);
+
+	const variationStyles = useMemo( () => {
+		if ( ! variation ) {
+			return;
+		}
+
+		const variationConfig = { settings, styles };
+		const blockSelectors = getBlockSelectors(
+			getBlockTypes(),
+			getBlockStyles,
+			clientId
+		);
+		const hasBlockGapSupport = false;
+		const hasFallbackGapSupport = true;
+		const disableLayoutStyles = true;
+		const isTemplate = true;
+
+		return toStyles(
+			variationConfig,
+			blockSelectors,
+			hasBlockGapSupport,
+			hasFallbackGapSupport,
+			disableLayoutStyles,
+			isTemplate,
+			{
+				blockGap: false,
+				blockStyles: true,
+				layoutStyles: false,
+				marginReset: false,
+				presets: false,
+				rootPadding: false,
+			}
+		);
+	}, [ variation, settings, styles, getBlockStyles, clientId ] );
+
+	useStyleOverride( {
+		id: `variation-${ clientId }`,
+		css: variationStyles,
+		__unstableType: 'variation',
+		// The clientId will be stored with the override and used to ensure
+		// the order of overrides matches the order of blocks so that the
+		// correct CSS cascade is maintained.
+		clientId,
+	} );
+
+	return variation ? { className: variationClass } : {};
+}
+
+export default {
+	hasSupport: () => true,
+	attributeKeys: [ 'className' ],
+	useBlockProps,
+};
diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
index a8ed9bccaf7df..4ab4c69a41f31 100644
--- a/packages/block-editor/src/hooks/border.js
+++ b/packages/block-editor/src/hooks/border.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -320,7 +320,7 @@ function addSaveProps( props, blockNameOrType, attributes ) {
 	}
 
 	const borderClasses = getBorderClasses( attributes );
-	const newClassName = classnames( props.className, borderClasses );
+	const newClassName = clsx( props.className, borderClasses );
 
 	// If we are clearing the last of the previous classes in `className`
 	// set it to `undefined` to avoid rendering empty DOM attributes.
@@ -341,7 +341,7 @@ export function getBorderClasses( attributes ) {
 	const { borderColor, style } = attributes;
 	const borderColorClass = getColorClassName( 'border-color', borderColor );
 
-	return classnames( {
+	return clsx( {
 		'has-border-color': borderColor || style?.border?.color,
 		[ borderColorClass ]: !! borderColorClass,
 	} );
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index 0995f877309cc..ef8984c936785 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -174,23 +174,16 @@ export function addSaveProps( props, blockNameOrType, attributes ) {
 		style?.color?.background ||
 		( hasGradient && ( gradient || style?.color?.gradient ) );
 
-	const newClassName = classnames(
-		props.className,
-		textClass,
-		gradientClass,
-		{
-			// Don't apply the background class if there's a custom gradient.
-			[ backgroundClass ]:
-				( ! hasGradient || ! style?.color?.gradient ) &&
-				!! backgroundClass,
-			'has-text-color':
-				shouldSerialize( 'text' ) &&
-				( textColor || style?.color?.text ),
-			'has-background': serializeHasBackground && hasBackground,
-			'has-link-color':
-				shouldSerialize( 'link' ) && style?.elements?.link?.color,
-		}
-	);
+	const newClassName = clsx( props.className, textClass, gradientClass, {
+		// Don't apply the background class if there's a custom gradient.
+		[ backgroundClass ]:
+			( ! hasGradient || ! style?.color?.gradient ) && !! backgroundClass,
+		'has-text-color':
+			shouldSerialize( 'text' ) && ( textColor || style?.color?.text ),
+		'has-background': serializeHasBackground && hasBackground,
+		'has-link-color':
+			shouldSerialize( 'link' ) && style?.elements?.link?.color,
+	} );
 	props.className = newClassName ? newClassName : undefined;
 
 	return props;
@@ -399,7 +392,7 @@ function useBlockProps( {
 
 	return {
 		...saveProps,
-		className: classnames(
+		className: clsx(
 			saveProps.className,
 			// Add background image classes in the editor, if not already handled by background color values.
 			! hasBackgroundValue && getBackgroundImageClasses( style )
diff --git a/packages/block-editor/src/hooks/color.scss b/packages/block-editor/src/hooks/color.scss
index f9b7898f941b7..8be620bf40d93 100644
--- a/packages/block-editor/src/hooks/color.scss
+++ b/packages/block-editor/src/hooks/color.scss
@@ -5,6 +5,7 @@
 		 * injected color controls can appear as a single item group without
 		 * the contrast checkers suddenly appearing between items.
 		 */
+		/* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/58936 is fixed. */
 		order: 9999;
 		grid-column: span 2;
 		margin-top: $grid-unit-20;
diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js
index eff6cc9a2d8af..7cca4b325b09d 100644
--- a/packages/block-editor/src/hooks/content-lock-ui.js
+++ b/packages/block-editor/src/hooks/content-lock-ui.js
@@ -20,7 +20,6 @@ import { unlock } from '../lock-unlock';
 // also includes artifacts on the store (actions, reducers, and selector).
 
 function ContentLockControlsPure( { clientId, isSelected } ) {
-	const { getBlockListSettings, getSettings } = useSelect( blockEditorStore );
 	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
 		( select ) => {
 			const {
@@ -37,16 +36,11 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 		[ clientId ]
 	);
 
-	const {
-		updateSettings,
-		updateBlockListSettings,
-		__unstableSetTemporarilyEditingAsBlocks,
-	} = useDispatch( blockEditorStore );
-	const { stopEditingAsBlocks } = unlock( useDispatch( blockEditorStore ) );
+	const { stopEditingAsBlocks, modifyContentLockBlock } = unlock(
+		useDispatch( blockEditorStore )
+	);
 	const isContentLocked =
 		! isLockedByParent && templateLock === 'contentOnly';
-	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
-		useDispatch( blockEditorStore );
 
 	const stopEditingAsBlockCallback = useCallback( () => {
 		stopEditingAsBlocks( clientId );
@@ -73,30 +67,19 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 			) }
 			{ showStartEditingAsBlocks && (
 				<BlockSettingsMenuControls>
-					{ ( { onClose } ) => (
-						<MenuItem
-							onClick={ () => {
-								__unstableMarkNextChangeAsNotPersistent();
-								updateBlockAttributes( clientId, {
-									templateLock: undefined,
-								} );
-								updateBlockListSettings( clientId, {
-									...getBlockListSettings( clientId ),
-									templateLock: false,
-								} );
-								const focusModeToRevert =
-									getSettings().focusMode;
-								updateSettings( { focusMode: true } );
-								__unstableSetTemporarilyEditingAsBlocks(
-									clientId,
-									focusModeToRevert
-								);
-								onClose();
-							} }
-						>
-							{ __( 'Modify' ) }
-						</MenuItem>
-					) }
+					{ ( { selectedClientIds, onClose } ) =>
+						selectedClientIds.length === 1 &&
+						selectedClientIds[ 0 ] === clientId && (
+							<MenuItem
+								onClick={ () => {
+									modifyContentLockBlock( clientId );
+									onClose();
+								} }
+							>
+								{ __( 'Modify' ) }
+							</MenuItem>
+						)
+					}
 				</BlockSettingsMenuControls>
 			) }
 		</>
diff --git a/packages/block-editor/src/hooks/custom-class-name.js b/packages/block-editor/src/hooks/custom-class-name.js
index 037fafe9ca840..91ef07506fd95 100644
--- a/packages/block-editor/src/hooks/custom-class-name.js
+++ b/packages/block-editor/src/hooks/custom-class-name.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -88,7 +88,7 @@ export function addSaveProps( extraProps, blockType, attributes ) {
 		hasBlockSupport( blockType, 'customClassName', true ) &&
 		attributes.className
 	) {
-		extraProps.className = classnames(
+		extraProps.className = clsx(
 			extraProps.className,
 			attributes.className
 		);
diff --git a/packages/block-editor/src/hooks/custom-class-name.native.js b/packages/block-editor/src/hooks/custom-class-name.native.js
index 8d2b6560332e4..b3f153b2bdad1 100644
--- a/packages/block-editor/src/hooks/custom-class-name.native.js
+++ b/packages/block-editor/src/hooks/custom-class-name.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -46,7 +46,7 @@ export function addSaveProps( extraProps, blockType, attributes ) {
 		hasBlockSupport( blockType, 'customClassName', true ) &&
 		attributes.className
 	) {
-		extraProps.className = classnames(
+		extraProps.className = clsx(
 			extraProps.className,
 			attributes.className
 		);
diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
index f78a39230e89b..ffa4048b7740e 100644
--- a/packages/block-editor/src/hooks/dimensions.js
+++ b/packages/block-editor/src/hooks/dimensions.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -170,7 +170,7 @@ function useBlockProps( { name, minHeight, style } ) {
 		return {};
 	}
 
-	const className = classnames( {
+	const className = clsx( {
 		'has-aspect-ratio': !! style?.dimensions?.aspectRatio,
 	} );
 
diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js
index db6515ef1c2fe..ba9a66a8bcf04 100644
--- a/packages/block-editor/src/hooks/font-family.js
+++ b/packages/block-editor/src/hooks/font-family.js
@@ -14,6 +14,7 @@ import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
 import { unlock } from '../lock-unlock';
 
 export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
+const { kebabCase } = unlock( componentsPrivateApis );
 
 /**
  * Filters registered block settings, extending attributes to include
@@ -68,7 +69,6 @@ function addSaveProps( props, blockType, attributes ) {
 
 	// Use TokenList to dedupe classes.
 	const classes = new TokenList( props.className );
-	const { kebabCase } = unlock( componentsPrivateApis );
 	classes.add( `has-${ kebabCase( attributes?.fontFamily ) }-font-family` );
 	const newClassName = classes.value;
 	props.className = newClassName ? newClassName : undefined;
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index ec5cf29b49c5a..89e6819c1d031 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -24,16 +24,19 @@ import fontSize from './font-size';
 import textAlign from './text-align';
 import border from './border';
 import position from './position';
+import blockStyleVariation from './block-style-variation';
 import layout from './layout';
 import childLayout from './layout-child';
 import contentLockUI from './content-lock-ui';
 import './metadata';
 import blockHooks from './block-hooks';
+import blockBindingsPanel from './block-bindings';
 import './block-renaming';
 import './use-bindings-attributes';
 
 createBlockEditFilter(
 	[
+		blockBindingsPanel,
 		align,
 		textAlign,
 		anchor,
@@ -59,6 +62,7 @@ createBlockListBlockFilter( [
 	fontSize,
 	border,
 	position,
+	blockStyleVariation,
 	childLayout,
 ] );
 createBlockSaveFilter( [
diff --git a/packages/block-editor/src/hooks/layout-child.js b/packages/block-editor/src/hooks/layout-child.js
index 4fa641bff203a..860b4aaf04179 100644
--- a/packages/block-editor/src/hooks/layout-child.js
+++ b/packages/block-editor/src/hooks/layout-child.js
@@ -3,6 +3,7 @@
  */
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -134,37 +135,50 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 }
 
 function ChildLayoutControlsPure( { clientId, style, setAttributes } ) {
-	const parentLayout = useLayout() || {};
+	const {
+		type: parentLayoutType = 'default',
+		allowSizingOnChildren = false,
+	} = useLayout() || {};
+
 	const rootClientId = useSelect(
 		( select ) => {
 			return select( blockEditorStore ).getBlockRootClientId( clientId );
 		},
 		[ clientId ]
 	);
-	if ( parentLayout.type !== 'grid' ) {
-		return null;
-	}
-	if ( ! window.__experimentalEnableGridInteractivity ) {
+
+	// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.
+	const [ resizerBounds, setResizerBounds ] = useState();
+
+	if ( parentLayoutType !== 'grid' ) {
 		return null;
 	}
+
 	return (
 		<>
-			<GridVisualizer clientId={ rootClientId } />
-			<GridItemResizer
-				clientId={ clientId }
-				onChange={ ( { columnSpan, rowSpan } ) => {
-					setAttributes( {
-						style: {
-							...style,
-							layout: {
-								...style?.layout,
-								columnSpan,
-								rowSpan,
-							},
-						},
-					} );
-				} }
+			<GridVisualizer
+				clientId={ rootClientId }
+				contentRef={ setResizerBounds }
 			/>
+			{ allowSizingOnChildren && (
+				<GridItemResizer
+					clientId={ clientId }
+					// Don't allow resizing beyond the grid visualizer.
+					bounds={ resizerBounds }
+					onChange={ ( { columnSpan, rowSpan } ) => {
+						setAttributes( {
+							style: {
+								...style,
+								layout: {
+									...style?.layout,
+									columnSpan,
+									rowSpan,
+								},
+							},
+						} );
+					} }
+				/>
+			) }
 		</>
 	);
 }
diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index ac6a381742c81..a19c5604701f6 100644
--- a/packages/block-editor/src/hooks/layout.js
+++ b/packages/block-editor/src/hooks/layout.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,6 +32,7 @@ import { useBlockSettings, useStyleOverride } from './utils';
 import { unlock } from '../lock-unlock';
 
 const layoutBlockSupportKey = 'layout';
+const { kebabCase } = unlock( componentsPrivateApis );
 
 function hasLayoutBlockSupport( blockName ) {
 	return (
@@ -49,7 +50,6 @@ function hasLayoutBlockSupport( blockName ) {
  * @return { Array } Array of CSS classname strings.
  */
 export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
-	const { kebabCase } = unlock( componentsPrivateApis );
 	const { layout } = blockAttributes;
 	const { default: defaultBlockLayout } =
 		getBlockSupport( blockName, layoutBlockSupportKey ) || {};
@@ -371,7 +371,6 @@ function BlockWithLayoutStyles( {
 			? { ...layout, type: 'constrained' }
 			: layout || defaultBlockLayout || {};
 
-	const { kebabCase } = unlock( componentsPrivateApis );
 	const selectorPrefix = `wp-container-${ kebabCase( name ) }-is-layout-`;
 	// Higher specificity to override defaults from theme.json.
 	const selector = `.${ selectorPrefix }${ id }`;
@@ -389,7 +388,7 @@ function BlockWithLayoutStyles( {
 	} );
 
 	// Attach a `wp-container-` id-based class name as well as a layout class name such as `is-layout-flex`.
-	const layoutClassNames = classnames(
+	const layoutClassNames = clsx(
 		{
 			[ `${ selectorPrefix }${ id }` ]: !! css, // Only attach a container class if there is generated CSS to be attached.
 		},
diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js
index 89b7a2d6b23b4..a5d4a0cb43bf3 100644
--- a/packages/block-editor/src/hooks/position.js
+++ b/packages/block-editor/src/hooks/position.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -303,7 +303,7 @@ export function PositionPanelPure( {
 							onChange={ ( { selectedItem } ) => {
 								onChangeType( selectedItem.value );
 							} }
-							size={ '__unstable-large' }
+							size="__unstable-large"
 						/>
 					</BaseControl>
 				</InspectorControls>
@@ -351,7 +351,7 @@ function useBlockProps( { name, style } ) {
 	}
 
 	// Attach a `wp-container-` id-based class name.
-	const className = classnames( {
+	const className = clsx( {
 		[ `wp-container-${ id }` ]: allowPositionStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
 		[ `is-position-${ style?.position?.type }` ]:
 			allowPositionStyles && !! css && !! style?.position?.type,
diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index dad62bc0594a7..4cd3335022454 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -332,7 +332,15 @@ function BlockStyleControls( {
 		clientId,
 		name,
 		setAttributes,
-		settings,
+		settings: {
+			...settings,
+			typography: {
+				...settings.typography,
+				// The text alignment UI for individual blocks is rendered in
+				// the block toolbar, so disable it here.
+				textAlign: false,
+			},
+		},
 	};
 	if ( blockEditingMode !== 'default' ) {
 		return null;
diff --git a/packages/block-editor/src/hooks/text-align.js b/packages/block-editor/src/hooks/text-align.js
index daa8df6cc8210..af20404d79ecc 100644
--- a/packages/block-editor/src/hooks/text-align.js
+++ b/packages/block-editor/src/hooks/text-align.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -15,7 +15,11 @@ import { alignLeft, alignRight, alignCenter } from '@wordpress/icons';
  */
 import { AlignmentControl, BlockControls } from '../components';
 import { useBlockEditingMode } from '../components/block-editing-mode';
-import { cleanEmptyObject, shouldSkipSerialization } from './utils';
+import {
+	cleanEmptyObject,
+	shouldSkipSerialization,
+	useBlockSettings,
+} from './utils';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
 
 export const TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign';
@@ -39,6 +43,7 @@ const TEXT_ALIGNMENT_OPTIONS = [
 ];
 
 const VALID_TEXT_ALIGNMENTS = [ 'left', 'center', 'right' ];
+const NO_TEXT_ALIGNMENTS = [];
 
 /**
  * Returns the valid text alignments.
@@ -50,19 +55,13 @@ const VALID_TEXT_ALIGNMENTS = [ 'left', 'center', 'right' ];
  * @return {string[]} Valid text alignments.
  */
 export function getValidTextAlignments( blockTextAlign ) {
-	let validTextAlignments;
 	if ( Array.isArray( blockTextAlign ) ) {
-		validTextAlignments = VALID_TEXT_ALIGNMENTS.filter( ( textAlign ) =>
+		return VALID_TEXT_ALIGNMENTS.filter( ( textAlign ) =>
 			blockTextAlign.includes( textAlign )
 		);
-	} else if ( blockTextAlign === true ) {
-		// `true` includes all alignments...
-		validTextAlignments = [ ...VALID_TEXT_ALIGNMENTS ];
-	} else {
-		validTextAlignments = [];
 	}
 
-	return validTextAlignments;
+	return blockTextAlign === true ? VALID_TEXT_ALIGNMENTS : NO_TEXT_ALIGNMENTS;
 }
 
 function BlockEditTextAlignmentToolbarControlsPure( {
@@ -70,11 +69,18 @@ function BlockEditTextAlignmentToolbarControlsPure( {
 	name: blockName,
 	setAttributes,
 } ) {
+	const settings = useBlockSettings( blockName );
+	const hasTextAlignControl = settings?.typography?.textAlign;
+	const blockEditingMode = useBlockEditingMode();
+
+	if ( ! hasTextAlignControl || blockEditingMode !== 'default' ) {
+		return null;
+	}
+
 	const validTextAlignments = getValidTextAlignments(
 		getBlockSupport( blockName, TEXT_ALIGN_SUPPORT_KEY )
 	);
-	const blockEditingMode = useBlockEditingMode();
-	if ( ! validTextAlignments.length || blockEditingMode !== 'default' ) {
+	if ( ! validTextAlignments.length ) {
 		return null;
 	}
 
@@ -136,7 +142,7 @@ function useBlockProps( { name, style } ) {
 
 	const textAlign = style.typography.textAlign;
 
-	const className = classnames( {
+	const className = clsx( {
 		[ `has-text-align-${ textAlign }` ]: textAlign,
 	} );
 	return { className };
@@ -169,7 +175,7 @@ export function addAssignedTextAlign( props, blockType, attributes ) {
 			'textAlign'
 		)
 	) {
-		props.className = classnames(
+		props.className = clsx(
 			`has-text-align-${ textAlign }`,
 			props.className
 		);
diff --git a/packages/block-editor/src/hooks/use-bindings-attributes.js b/packages/block-editor/src/hooks/use-bindings-attributes.js
index 5ca526b5749b7..334c751bc01b0 100644
--- a/packages/block-editor/src/hooks/use-bindings-attributes.js
+++ b/packages/block-editor/src/hooks/use-bindings-attributes.js
@@ -4,7 +4,7 @@
 import { store as blocksStore } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useRegistry, useSelect } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 
 /**
@@ -25,10 +25,45 @@ import { unlock } from '../lock-unlock';
 const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
 	'core/paragraph': [ 'content' ],
 	'core/heading': [ 'content' ],
-	'core/image': [ 'url', 'title', 'alt' ],
-	'core/button': [ 'url', 'text', 'linkTarget' ],
+	'core/image': [ 'id', 'url', 'title', 'alt' ],
+	'core/button': [ 'url', 'text', 'linkTarget', 'rel' ],
 };
 
+const DEFAULT_ATTRIBUTE = '__default';
+
+/**
+ * Returns the bindings with the `__default` binding for pattern overrides
+ * replaced with the full-set of supported attributes. e.g.:
+ *
+ * bindings passed in: `{ __default: { source: 'core/pattern-overrides' } }`
+ * bindings returned: `{ content: { source: 'core/pattern-overrides' } }`
+ *
+ * @param {string} blockName The block name (e.g. 'core/paragraph').
+ * @param {Object} bindings  A block's bindings from the metadata attribute.
+ *
+ * @return {Object} The bindings with default replaced for pattern overrides.
+ */
+function replacePatternOverrideDefaultBindings( blockName, bindings ) {
+	// The `__default` binding currently only works for pattern overrides.
+	if (
+		bindings?.[ DEFAULT_ATTRIBUTE ]?.source === 'core/pattern-overrides'
+	) {
+		const supportedAttributes = BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ];
+		const bindingsWithDefaults = {};
+		for ( const attributeName of supportedAttributes ) {
+			// If the block has mixed binding sources, retain any non pattern override bindings.
+			const bindingSource = bindings[ attributeName ]
+				? bindings[ attributeName ]
+				: { source: 'core/pattern-overrides' };
+			bindingsWithDefaults[ attributeName ] = bindingSource;
+		}
+
+		return bindingsWithDefaults;
+	}
+
+	return bindings;
+}
+
 /**
  * Based on the given block name,
  * check if it is possible to bind the block.
@@ -61,8 +96,15 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 		const sources = useSelect( ( select ) =>
 			unlock( select( blocksStore ) ).getAllBlockBindingsSources()
 		);
-		const bindings = props.attributes.metadata?.bindings;
 		const { name, clientId, context } = props;
+		const bindings = useMemo(
+			() =>
+				replacePatternOverrideDefaultBindings(
+					name,
+					props.attributes.metadata?.bindings
+				),
+			[ props.attributes.metadata?.bindings, name ]
+		);
 		const boundAttributes = useSelect( () => {
 			if ( ! bindings ) {
 				return;
@@ -110,34 +152,67 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 			( nextAttributes ) => {
 				registry.batch( () => {
 					if ( ! bindings ) {
-						return setAttributes( nextAttributes );
+						setAttributes( nextAttributes );
+						return;
 					}
 
 					const keptAttributes = { ...nextAttributes };
+					const updatesBySource = new Map();
 
-					for ( const [
-						attributeName,
-						boundAttribute,
-					] of Object.entries( bindings ) ) {
-						const source = sources[ boundAttribute.source ];
+					// Loop only over the updated attributes to avoid modifying the bound ones that haven't changed.
+					for ( const [ attributeName, newValue ] of Object.entries(
+						keptAttributes
+					) ) {
 						if (
-							! source?.setValue ||
+							! bindings[ attributeName ] ||
 							! canBindAttribute( name, attributeName )
 						) {
 							continue;
 						}
 
-						source.setValue( {
-							registry,
-							context,
-							clientId,
-							attributeName,
-							args: boundAttribute.args,
-							value: nextAttributes[ attributeName ],
+						const binding = bindings[ attributeName ];
+						const source = sources[ binding?.source ];
+						if ( ! source?.setValue && ! source?.setValues ) {
+							continue;
+						}
+						updatesBySource.set( source, {
+							...updatesBySource.get( source ),
+							[ attributeName ]: newValue,
 						} );
 						delete keptAttributes[ attributeName ];
 					}
 
+					if ( updatesBySource.size ) {
+						for ( const [
+							source,
+							attributes,
+						] of updatesBySource ) {
+							if ( source.setValues ) {
+								source.setValues( {
+									registry,
+									context,
+									clientId,
+									attributes,
+								} );
+							} else {
+								for ( const [
+									attributeName,
+									value,
+								] of Object.entries( attributes ) ) {
+									const binding = bindings[ attributeName ];
+									source.setValue( {
+										registry,
+										context,
+										clientId,
+										attributeName,
+										args: binding.args,
+										value,
+									} );
+								}
+							}
+						}
+					}
+
 					if ( Object.keys( keptAttributes ).length ) {
 						setAttributes( keptAttributes );
 					}
diff --git a/packages/block-editor/src/hooks/use-color-props.js b/packages/block-editor/src/hooks/use-color-props.js
index 679f0b7accbf7..5e52b3eb6841f 100644
--- a/packages/block-editor/src/hooks/use-color-props.js
+++ b/packages/block-editor/src/hooks/use-color-props.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -51,7 +51,7 @@ export function getColorClassesAndStyles( attributes ) {
 	const hasGradient = gradientClass || style?.color?.gradient;
 
 	// Determine color CSS class name list.
-	const className = classnames( textClass, gradientClass, {
+	const className = clsx( textClass, gradientClass, {
 		// Don't apply the background class if there's a gradient.
 		[ backgroundClass ]: ! hasGradient && !! backgroundClass,
 		'has-text-color': textColor || style?.color?.text,
diff --git a/packages/block-editor/src/hooks/use-typography-props.js b/packages/block-editor/src/hooks/use-typography-props.js
index 3986bbf7cfe17..0f1a2caefde04 100644
--- a/packages/block-editor/src/hooks/use-typography-props.js
+++ b/packages/block-editor/src/hooks/use-typography-props.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -16,6 +16,8 @@ import { getFontSizeClass } from '../components/font-sizes';
 import { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';
 import { unlock } from '../lock-unlock';
 
+const { kebabCase } = unlock( componentsPrivateApis );
+
 /*
  * This utility is intended to assist where the serialization of the typography
  * block support is being skipped for a block but the typography related CSS
@@ -31,7 +33,6 @@ import { unlock } from '../lock-unlock';
  * @return {Object} Typography block support derived CSS classes & styles.
  */
 export function getTypographyClassesAndStyles( attributes, settings ) {
-	const { kebabCase } = unlock( componentsPrivateApis );
 	let typographyStyles = attributes?.style?.typography || {};
 	typographyStyles = {
 		...typographyStyles,
@@ -48,7 +49,7 @@ export function getTypographyClassesAndStyles( attributes, settings ) {
 	const textAlignClassName = !! attributes?.style?.typography?.textAlign
 		? `has-text-align-${ attributes?.style?.typography?.textAlign }`
 		: '';
-	const className = classnames(
+	const className = clsx(
 		fontFamilyClassName,
 		textAlignClassName,
 		getFontSizeClass( attributes?.fontSize )
diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index ce20cb5bd7a17..3ec701cfc4a14 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -29,7 +29,10 @@ export function useZoomOut( zoomOut = true ) {
 
 		return () => {
 			// We need to use  __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount
-			if ( __unstableGetEditorMode() !== originalEditingMode.current ) {
+			if (
+				__unstableGetEditorMode() === 'zoom-out' &&
+				__unstableGetEditorMode() !== originalEditingMode.current
+			) {
 				__unstableSetEditorMode( originalEditingMode.current );
 			}
 		};
@@ -39,7 +42,11 @@ export function useZoomOut( zoomOut = true ) {
 	useEffect( () => {
 		if ( zoomOut && mode !== 'zoom-out' ) {
 			__unstableSetEditorMode( 'zoom-out' );
-		} else if ( ! zoomOut && originalEditingMode.current !== mode ) {
+		} else if (
+			! zoomOut &&
+			__unstableGetEditorMode() === 'zoom-out' &&
+			originalEditingMode.current !== mode
+		) {
 			__unstableSetEditorMode( originalEditingMode.current );
 		}
 	}, [ __unstableSetEditorMode, zoomOut, mode ] );
diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js
index 89ac3a9d70583..4338262300c61 100644
--- a/packages/block-editor/src/hooks/utils.js
+++ b/packages/block-editor/src/hooks/utils.js
@@ -23,7 +23,7 @@ import { unlock } from '../lock-unlock';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Removed falsy values from nested object.
@@ -240,7 +240,11 @@ export function useBlockSettings( name, parentLayout ) {
 		padding,
 		margin,
 		blockGap,
-		spacingSizes,
+		defaultSpacingSizesEnabled,
+		customSpacingSize,
+		userSpacingSizes,
+		defaultSpacingSizes,
+		themeSpacingSizes,
 		units,
 		aspectRatio,
 		minHeight,
@@ -293,7 +297,11 @@ export function useBlockSettings( name, parentLayout ) {
 		'spacing.padding',
 		'spacing.margin',
 		'spacing.blockGap',
-		'spacing.spacingSizes',
+		'spacing.defaultSpacingSizes',
+		'spacing.customSpacingSize',
+		'spacing.spacingSizes.custom',
+		'spacing.spacingSizes.default',
+		'spacing.spacingSizes.theme',
 		'spacing.units',
 		'dimensions.aspectRatio',
 		'dimensions.minHeight',
@@ -384,8 +392,12 @@ export function useBlockSettings( name, parentLayout ) {
 			},
 			spacing: {
 				spacingSizes: {
-					custom: spacingSizes,
+					custom: userSpacingSizes,
+					default: defaultSpacingSizes,
+					theme: themeSpacingSizes,
 				},
+				customSpacingSize,
+				defaultSpacingSizes: defaultSpacingSizesEnabled,
 				padding,
 				margin,
 				blockGap,
@@ -428,7 +440,11 @@ export function useBlockSettings( name, parentLayout ) {
 		padding,
 		margin,
 		blockGap,
-		spacingSizes,
+		defaultSpacingSizesEnabled,
+		customSpacingSize,
+		userSpacingSizes,
+		defaultSpacingSizes,
+		themeSpacingSizes,
 		units,
 		aspectRatio,
 		minHeight,
@@ -595,6 +611,7 @@ export function createBlockListBlockFilter( features ) {
 							// function reference.
 							setAllWrapperProps={ setAllWrapperProps }
 							name={ props.name }
+							clientId={ props.clientId }
 							// This component is pure, so only pass needed
 							// props!!!
 							{ ...neededProps }
@@ -610,7 +627,7 @@ export function createBlockListBlockFilter( features ) {
 							return {
 								...acc,
 								...wrapperProps,
-								className: classnames(
+								className: clsx(
 									acc.className,
 									wrapperProps.className
 								),
diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
index f628a9bf3c3f6..72beca11b3f0c 100644
--- a/packages/block-editor/src/layouts/flex.js
+++ b/packages/block-editor/src/layouts/flex.js
@@ -403,12 +403,12 @@ function OrientationControl( { layout, onChange } ) {
 		>
 			<ToggleGroupControlOptionIcon
 				icon={ arrowRight }
-				value={ 'horizontal' }
+				value="horizontal"
 				label={ __( 'Horizontal' ) }
 			/>
 			<ToggleGroupControlOptionIcon
 				icon={ arrowDown }
-				value={ 'vertical' }
+				value="vertical"
 				label={ __( 'Vertical' ) }
 			/>
 		</ToggleGroupControl>
diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js
index e71e1739447aa..4528de117c45b 100644
--- a/packages/block-editor/src/layouts/grid.js
+++ b/packages/block-editor/src/layouts/grid.js
@@ -68,7 +68,6 @@ export default {
 	inspectorControls: function GridLayoutInspectorControls( {
 		layout = {},
 		onChange,
-		clientId,
 		layoutBlockSupport = {},
 	} ) {
 		const { allowSizingOnChildren = false } = layoutBlockSupport;
@@ -90,14 +89,11 @@ export default {
 						onChange={ onChange }
 					/>
 				) }
-				{ window.__experimentalEnableGridInteractivity && (
-					<GridVisualizer clientId={ clientId } />
-				) }
 			</>
 		);
 	},
-	toolBarControls: function GridLayoutToolbarControls() {
-		return null;
+	toolBarControls: function GridLayoutToolbarControls( { clientId } ) {
+		return <GridVisualizer clientId={ clientId } />;
 	},
 	getLayoutStyle: function getLayoutStyle( {
 		selector,
@@ -136,7 +132,7 @@ export default {
 		} else if ( minimumColumnWidth ) {
 			rules.push(
 				`grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))`,
-				`container-type: inline-size`
+				'container-type: inline-size'
 			);
 		}
 
@@ -207,7 +203,7 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 			<Flex gap={ 4 }>
 				<FlexItem isBlock>
 					<UnitControl
-						size={ '__unstable-large' }
+						size="__unstable-large"
 						onChange={ ( newValue ) => {
 							onChange( {
 								...layout,
@@ -255,7 +251,7 @@ function GridLayoutColumnsAndRowsControl( {
 				<Flex gap={ 4 }>
 					<FlexItem isBlock>
 						<NumberControl
-							size={ '__unstable-large' }
+							size="__unstable-large"
 							onChange={ ( value ) => {
 								/**
 								 * If the input is cleared, avoid switching
@@ -300,7 +296,7 @@ function GridLayoutColumnsAndRowsControl( {
 						<Flex gap={ 4 }>
 							<FlexItem isBlock>
 								<NumberControl
-									size={ '__unstable-large' }
+									size="__unstable-large"
 									onChange={ ( value ) => {
 										onChange( {
 											...layout,
@@ -376,12 +372,12 @@ function GridLayoutTypeControl( { layout, onChange } ) {
 			isBlock
 		>
 			<ToggleGroupControlOption
-				key={ 'auto' }
+				key="auto"
 				value="auto"
 				label={ __( 'Auto' ) }
 			/>
 			<ToggleGroupControlOption
-				key={ 'manual' }
+				key="manual"
 				value="manual"
 				label={ __( 'Manual' ) }
 			/>
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
index f10fcc4df2c72..848a3ee49251b 100644
--- a/packages/block-editor/src/private-apis.js
+++ b/packages/block-editor/src/private-apis.js
@@ -35,9 +35,14 @@ import { useFlashEditableBlocks } from './components/use-flash-editable-blocks';
 import {
 	selectBlockPatternsKey,
 	reusableBlocksSelectKey,
+	globalStylesDataKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
+import { PrivateBlockPopover } from './components/block-popover';
+import { PrivateInserterLibrary } from './components/inserter/library';
+import { PrivatePublishDateTimePicker } from './components/publish-date-time-picker';
+import useSpacingSizes from './components/spacing-sizes-control/hooks/use-spacing-sizes';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -72,8 +77,13 @@ lock( privateApis, {
 	useReusableBlocksRenameHint,
 	usesContextKey,
 	useFlashEditableBlocks,
+	globalStylesDataKey,
 	selectBlockPatternsKey,
 	requiresWrapperOnCopy,
 	PrivateRichText,
+	PrivateInserterLibrary,
 	reusableBlocksSelectKey,
+	PrivateBlockPopover,
+	PrivatePublishDateTimePicker,
+	useSpacingSizes,
 } );
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index 61acae16fcca2..d44fa3e69f86a 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -18,6 +18,7 @@ import {
 } from '@wordpress/blocks';
 import { speak } from '@wordpress/a11y';
 import { __, _n, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
 import { create, insert, remove, toHTMLString } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
 
@@ -872,6 +873,30 @@ export const __unstableSplitSelection =
 			typeof selectionB.attributeKey === 'string'
 				? selectionB.attributeKey
 				: findRichTextAttributeKey( blockBType );
+		const blockAttributes = select.getBlockAttributes(
+			selectionA.clientId
+		);
+		const bindings = blockAttributes?.metadata?.bindings;
+
+		// If the attribute is bound, don't split the selection and insert a new block instead.
+		if ( bindings?.[ attributeKeyA ] ) {
+			// Show warning if user tries to insert a block into another block with bindings.
+			if ( blocks.length ) {
+				const { createWarningNotice } =
+					registry.dispatch( noticesStore );
+				createWarningNotice(
+					__(
+						"Blocks can't be inserted into other blocks with bindings"
+					),
+					{
+						type: 'snackbar',
+					}
+				);
+				return;
+			}
+			dispatch.insertAfterBlock( selectionA.clientId );
+			return;
+		}
 
 		// Can't split if the selection is not set.
 		if (
@@ -918,9 +943,7 @@ export const __unstableSplitSelection =
 						  );
 				}
 
-				const length = select.getBlockAttributes( selectionA.clientId )[
-					attributeKeyA
-				].length;
+				const length = blockAttributes[ attributeKeyA ].length;
 
 				if ( selectionA.offset === 0 && length ) {
 					dispatch.insertBlocks(
@@ -1000,7 +1023,10 @@ export const __unstableSplitSelection =
 			const first = firstBlocks.shift();
 			head = {
 				...head,
-				attributes: headType.merge( head.attributes, first.attributes ),
+				attributes: {
+					...head.attributes,
+					...headType.merge( head.attributes, first.attributes ),
+				},
 			};
 			output.push( head );
 			selection = {
@@ -1034,10 +1060,10 @@ export const __unstableSplitSelection =
 				const last = lastBlocks.pop();
 				output.push( {
 					...tail,
-					attributes: tailType.merge(
-						last.attributes,
-						tail.attributes
-					),
+					attributes: {
+						...tail.attributes,
+						...tailType.merge( last.attributes, tail.attributes ),
+					},
 				} );
 				output.push( ...lastBlocks );
 				selection = {
@@ -1506,11 +1532,18 @@ export const insertDefaultBlock =
 	};
 
 /**
- * Action that changes the nested settings of a given block.
+ * @typedef {Object< string, Object >} SettingsByClientId
+ */
+
+/**
+ * Action that changes the nested settings of the given block(s).
  *
- * @param {string} clientId Client ID of the block whose nested setting are
- *                          being received.
- * @param {Object} settings Object with the new settings for the nested block.
+ * @param {string | SettingsByClientId} clientId Client ID of the block whose
+ *                                               nested setting are being
+ *                                               received, or object of settings
+ *                                               by client ID.
+ * @param {Object}                      settings Object with the new settings
+ *                                               for the nested block.
  *
  * @return {Object} Action object
  */
@@ -1612,42 +1645,31 @@ export const __unstableSetEditorMode =
 		// When switching to zoom-out mode, we need to select the parent section
 		if ( mode === 'zoom-out' ) {
 			const firstSelectedClientId = select.getBlockSelectionStart();
-			const allBlocks = select.getBlocks();
-
 			const { sectionRootClientId } = unlock(
 				registry.select( STORE_NAME ).getSettings()
 			);
-			if ( sectionRootClientId ) {
-				const sectionClientIds =
-					select.getBlockOrder( sectionRootClientId );
-				const lastSectionClientId =
-					sectionClientIds[ sectionClientIds.length - 1 ];
-				if ( sectionClientIds ) {
-					if ( firstSelectedClientId ) {
-						const parents = select.getBlockParents(
-							firstSelectedClientId
-						);
-						const firstSectionClientId = parents.find( ( parent ) =>
+			if ( firstSelectedClientId ) {
+				let sectionClientId;
+
+				if ( sectionRootClientId ) {
+					const sectionClientIds =
+						select.getBlockOrder( sectionRootClientId );
+					sectionClientId = select
+						.getBlockParents( firstSelectedClientId )
+						.find( ( parent ) =>
 							sectionClientIds.includes( parent )
 						);
-						if ( firstSectionClientId ) {
-							dispatch.selectBlock( firstSectionClientId );
-						} else {
-							dispatch.selectBlock( lastSectionClientId );
-						}
-					} else {
-						dispatch.selectBlock( lastSectionClientId );
-					}
+				} else {
+					sectionClientId = select.getBlockHierarchyRootClientId(
+						firstSelectedClientId
+					);
+				}
+
+				if ( sectionClientId ) {
+					dispatch.selectBlock( sectionClientId );
+				} else {
+					dispatch.clearSelectedBlock();
 				}
-			} else if ( firstSelectedClientId ) {
-				const rootClientId = select.getBlockHierarchyRootClientId(
-					firstSelectedClientId
-				);
-				dispatch.selectBlock( rootClientId );
-			} else {
-				// If there's no block selected and no sectionRootClientId, select the last root block.
-				const lastRootBlock = allBlocks[ allBlocks.length - 1 ];
-				dispatch.selectBlock( lastRootBlock?.clientId );
 			}
 		}
 
@@ -1988,7 +2010,7 @@ export function __unstableSetTemporarilyEditingAsBlocks(
  * 	 		per_page: 'page_size',
  * 	 		search: 'q',
  * 	 	};
- * 	 	const url = new URL( 'https://api.openverse.engineering/v1/images/' );
+ * 	 	const url = new URL( 'https://api.openverse.org/v1/images/' );
  * 	 	Object.entries( finalQuery ).forEach( ( [ key, value ] ) => {
  * 	 		const queryKey = mapFromInserterMediaRequest[ key ] || key;
  * 	 		url.searchParams.set( queryKey, value );
diff --git a/packages/block-editor/src/store/get-block-settings.js b/packages/block-editor/src/store/get-block-settings.js
index 1bffebf931e81..9ea8fab15f597 100644
--- a/packages/block-editor/src/store/get-block-settings.js
+++ b/packages/block-editor/src/store/get-block-settings.js
@@ -91,51 +91,6 @@ const removeCustomPrefixes = ( path ) => {
 	return prefixedFlags[ path ] || path;
 };
 
-/**
- * For settings like `color.palette`, which have a value that is an object
- * with `default`, `theme`, `custom`, with field values that are arrays of
- * items, merge these three arrays into one and return it. The calculation
- * is memoized so that identical input values produce identical output.
- * @param {Object} value Object to merge
- * @return {Array} Array of merged items
- */
-export function mergeOrigins( value ) {
-	let result = mergeCache.get( value );
-	if ( ! result ) {
-		result = [ 'default', 'theme', 'custom' ].flatMap(
-			( key ) => value[ key ] ?? []
-		);
-		mergeCache.set( value, result );
-	}
-	return result;
-}
-const mergeCache = new WeakMap();
-
-/**
- * For settings like `color.palette`, which have a value that is an object
- * with `default`, `theme`, `custom`, with field values that are arrays of
- * items, returns the one with the highest priority among these three arrays.
- * @param {Object} value Object to extract from
- * @return {Array} Array of items extracted from the three origins
- */
-export function overrideOrigins( value ) {
-	return value.custom ?? value.theme ?? value.default;
-}
-
-/**
- * For settings like `color.palette`, which have a value that is an object
- * with `default`, `theme`, `custom`, with field values that are arrays of
- * items, see if any of the three origins have values.
- *
- * @param {Object} value Object to check
- * @return {boolean} Whether the object has values in any of the three origins
- */
-export function hasOriginValue( value ) {
-	return [ 'default', 'theme', 'custom' ].some(
-		( key ) => value?.[ key ]?.length
-	);
-}
-
 export function getBlockSettings( state, clientId, ...paths ) {
 	const blockName = getBlockName( state, clientId );
 	const candidates = [];
@@ -215,7 +170,7 @@ export function getBlockSettings( state, clientId, ...paths ) {
 		// Return if the setting was found in either the block instance or the store.
 		if ( result !== undefined ) {
 			if ( PATHS_WITH_OVERRIDE[ normalizedPath ] ) {
-				return overrideOrigins( result );
+				return result.custom ?? result.theme ?? result.default;
 			}
 			return result;
 		}
diff --git a/packages/block-editor/src/store/private-actions.js b/packages/block-editor/src/store/private-actions.js
index 6cfccb17287ff..5e4e0c7a222b0 100644
--- a/packages/block-editor/src/store/private-actions.js
+++ b/packages/block-editor/src/store/private-actions.js
@@ -6,7 +6,6 @@ import { Platform } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { undoIgnoreBlocks } from './undo-ignore';
 import { store as blockEditorStore } from './index';
 import { unlock } from '../lock-unlock';
 
@@ -292,34 +291,6 @@ export function deleteStyleOverride( id ) {
 	};
 }
 
-/**
- * A higher-order action that mark every change inside a callback as "non-persistent"
- * and ignore pushing to the undo history stack. It's primarily used for synchronized
- * derived updates from the block editor without affecting the undo history.
- *
- * @param {() => void} callback The synchronous callback to derive updates.
- */
-export function syncDerivedUpdates( callback ) {
-	return ( { dispatch, select, registry } ) => {
-		registry.batch( () => {
-			// Mark every change in the `callback` as non-persistent.
-			dispatch( {
-				type: 'SET_EXPLICIT_PERSISTENT',
-				isPersistentChange: false,
-			} );
-			callback();
-			dispatch( {
-				type: 'SET_EXPLICIT_PERSISTENT',
-				isPersistentChange: undefined,
-			} );
-
-			// Ignore pushing undo stack for the updated blocks.
-			const updatedBlocks = select.getBlocks();
-			undoIgnoreBlocks.add( updatedBlocks );
-		} );
-	};
-}
-
 /**
  * Action that sets the element that had focus when focus leaves the editor canvas.
  *
@@ -391,3 +362,27 @@ export function expandBlock( clientId ) {
 		clientId,
 	};
 }
+
+/**
+ * Temporarily modify/unlock the content-only block for editions.
+ *
+ * @param {string} clientId The client id of the block.
+ */
+export const modifyContentLockBlock =
+	( clientId ) =>
+	( { select, dispatch } ) => {
+		dispatch.__unstableMarkNextChangeAsNotPersistent();
+		dispatch.updateBlockAttributes( clientId, {
+			templateLock: undefined,
+		} );
+		dispatch.updateBlockListSettings( clientId, {
+			...select.getBlockListSettings( clientId ),
+			templateLock: false,
+		} );
+		const focusModeToRevert = select.getSettings().focusMode;
+		dispatch.updateSettings( { focusMode: true } );
+		dispatch.__unstableSetTemporarilyEditingAsBlocks(
+			clientId,
+			focusModeToRevert
+		);
+	};
diff --git a/packages/block-editor/src/store/private-keys.js b/packages/block-editor/src/store/private-keys.js
index f48612e7491c9..82264ebe19157 100644
--- a/packages/block-editor/src/store/private-keys.js
+++ b/packages/block-editor/src/store/private-keys.js
@@ -1,2 +1,3 @@
+export const globalStylesDataKey = Symbol( 'globalStylesDataKey' );
 export const selectBlockPatternsKey = Symbol( 'selectBlockPatternsKey' );
 export const reusableBlocksSelectKey = Symbol( 'reusableBlocksSelect' );
diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
index bb7f8fed18954..c534c65b8defe 100644
--- a/packages/block-editor/src/store/private-selectors.js
+++ b/packages/block-editor/src/store/private-selectors.js
@@ -401,6 +401,21 @@ export const getAllPatterns = createRegistrySelector( ( select ) =>
 	}, getAllPatternsDependants( select ) )
 );
 
+export const isResolvingPatterns = createRegistrySelector( ( select ) =>
+	createSelector( ( state ) => {
+		const blockPatternsSelect = state.settings[ selectBlockPatternsKey ];
+		const reusableBlocksSelect = state.settings[ reusableBlocksSelectKey ];
+		return (
+			( blockPatternsSelect
+				? blockPatternsSelect( select ) === undefined
+				: false ) ||
+			( reusableBlocksSelect
+				? reusableBlocksSelect( select ) === undefined
+				: false )
+		);
+	}, getAllPatternsDependants( select ) )
+);
+
 const EMPTY_ARRAY = [];
 
 export const getReusableBlocks = createRegistrySelector(
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index 3ea0fb4627304..7c83887876919 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -1750,24 +1750,37 @@ export const blockListSettings = ( state = {}, action ) => {
 			);
 		}
 		case 'UPDATE_BLOCK_LIST_SETTINGS': {
-			const { clientId } = action;
-			if ( ! action.settings ) {
-				if ( state.hasOwnProperty( clientId ) ) {
-					const { [ clientId ]: removedBlock, ...restBlocks } = state;
-					return restBlocks;
+			const updates =
+				typeof action.clientId === 'string'
+					? { [ action.clientId ]: action.settings }
+					: action.clientId;
+
+			// Remove settings that are the same as the current state.
+			for ( const clientId in updates ) {
+				if ( ! updates[ clientId ] ) {
+					if ( ! state[ clientId ] ) {
+						delete updates[ clientId ];
+					}
+				} else if (
+					fastDeepEqual( state[ clientId ], updates[ clientId ] )
+				) {
+					delete updates[ clientId ];
 				}
+			}
 
+			if ( Object.keys( updates ).length === 0 ) {
 				return state;
 			}
 
-			if ( fastDeepEqual( state[ clientId ], action.settings ) ) {
-				return state;
+			const merged = { ...state, ...updates };
+
+			for ( const clientId in updates ) {
+				if ( ! updates[ clientId ] ) {
+					delete merged[ clientId ];
+				}
 			}
 
-			return {
-				...state,
-				[ clientId ]: action.settings,
-			};
+			return merged;
 		}
 	}
 	return state;
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 4ce85afb8cfd1..bf98521dfe9b6 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -22,6 +22,7 @@ import { createSelector, createRegistrySelector } from '@wordpress/data';
  * Internal dependencies
  */
 import {
+	withRootClientIdOptionKey,
 	checkAllowListRecursive,
 	checkAllowList,
 	getAllPatternsDependants,
@@ -75,6 +76,8 @@ const EMPTY_ARRAY = [];
  */
 const EMPTY_SET = new Set();
 
+const EMPTY_OBJECT = {};
+
 /**
  * Returns a block's name given its client ID, or null if no block exists with
  * the client ID.
@@ -1765,7 +1768,6 @@ export function canMoveBlock( state, clientId, rootClientId = null ) {
 	if ( getTemplateLock( state, rootClientId ) === 'all' ) {
 		return false;
 	}
-
 	return getBlockEditingMode( state, rootClientId ) !== 'disabled';
 }
 
@@ -1996,7 +1998,7 @@ const buildBlockTypeItem =
  */
 export const getInserterItems = createRegistrySelector( ( select ) =>
 	createSelector(
-		( state, rootClientId = null ) => {
+		( state, rootClientId = null, options = EMPTY_OBJECT ) => {
 			const buildReusableBlockInserterItem = ( reusableBlock ) => {
 				const icon = ! reusableBlock.wp_pattern_sync_status
 					? {
@@ -2038,16 +2040,73 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 				buildScope: 'inserter',
 			} );
 
-			const blockTypeInserterItems = getBlockTypes()
+			let blockTypeInserterItems = getBlockTypes()
 				.filter( ( blockType ) =>
-					canIncludeBlockTypeInInserter(
-						state,
-						blockType,
-						rootClientId
-					)
+					hasBlockSupport( blockType, 'inserter', true )
 				)
 				.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 {
+				blockTypeInserterItems = blockTypeInserterItems.filter(
+					( blockType ) =>
+						canIncludeBlockTypeInInserter(
+							state,
+							blockType,
+							rootClientId
+						)
+				);
+			}
+
 			const items = blockTypeInserterItems.reduce(
 				( accumulator, item ) => {
 					const { variations = [] } = item;
diff --git a/packages/block-editor/src/store/undo-ignore.js b/packages/block-editor/src/store/undo-ignore.js
deleted file mode 100644
index f0a64428ea7c2..0000000000000
--- a/packages/block-editor/src/store/undo-ignore.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// Keep track of the blocks that should not be pushing an additional
-// undo stack when editing the entity.
-// See the implementation of `syncDerivedUpdates` and `useBlockSync`.
-export const undoIgnoreBlocks = new WeakSet();
diff --git a/packages/block-editor/src/store/utils.js b/packages/block-editor/src/store/utils.js
index f236c4a7e56eb..c94453e99c60a 100644
--- a/packages/block-editor/src/store/utils.js
+++ b/packages/block-editor/src/store/utils.js
@@ -5,6 +5,8 @@ import { selectBlockPatternsKey } from './private-keys';
 import { unlock } from '../lock-unlock';
 import { STORE_NAME } from './constants';
 
+export const withRootClientIdOptionKey = Symbol( 'withRootClientId' );
+
 export const checkAllowList = ( list, item, defaultResult = null ) => {
 	if ( typeof list === 'boolean' ) {
 		return list;
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 5080aa05718bb..484d79e8db9fa 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -46,6 +46,7 @@
 @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/border.scss";
 @import "./hooks/color.scss";
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
index 28c4202f414a9..9da07667d0a3e 100644
--- a/packages/block-editor/src/utils/test/__snapshots__/transform-styles.js.snap
+++ b/packages/block-editor/src/utils/test/__snapshots__/transform-styles.js.snap
@@ -24,6 +24,12 @@ exports[`transformStyles URL rewrite should rewrite relative paths 1`] = `
 ]
 `;
 
+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`] = `
 [
   "
diff --git a/packages/block-editor/src/utils/test/transform-styles.js b/packages/block-editor/src/utils/test/transform-styles.js
index 38eaa1947d2a8..8245ce6283107 100644
--- a/packages/block-editor/src/utils/test/transform-styles.js
+++ b/packages/block-editor/src/utils/test/transform-styles.js
@@ -51,6 +51,20 @@ describe( 'transformStyles', () => {
 				//                                                        ^^^^ In PostCSS, a tab is equal four spaces
 			);
 		} );
+
+		it( 'should handle multiple instances of `:root :where(body)`', () => {
+			const input = `:root :where(body) { color: pink; } :root :where(body) { color: orange; }`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+
+			expect( output ).toMatchSnapshot();
+		} );
 	} );
 
 	describe( 'selector wrap', () => {
diff --git a/packages/block-editor/src/utils/transform-styles/index.js b/packages/block-editor/src/utils/transform-styles/index.js
index 129a4cd0e3e7b..9d57de3fa3833 100644
--- a/packages/block-editor/src/utils/transform-styles/index.js
+++ b/packages/block-editor/src/utils/transform-styles/index.js
@@ -5,7 +5,7 @@ import postcss, { CssSyntaxError } from 'postcss';
 import wrap from 'postcss-prefixwrap';
 import rebaseUrl from 'postcss-urlrebase';
 
-const transformStylesCache = new WeakMap();
+const cacheByWrapperSelector = new Map();
 
 function transformStyle(
 	{ css, ignoredSelectors = [], baseURL },
@@ -18,8 +18,9 @@ function transformStyle(
 	if ( ! wrapperSelector && ! baseURL ) {
 		return css;
 	}
-
-	const postcssFriendlyCSS = css.replace( ':where(body)', 'body' );
+	const postcssFriendlyCSS = css
+		.replace( /:root :where\(body\)/g, 'body' )
+		.replace( /:where\(body\)/g, 'body' );
 	try {
 		return postcss(
 			[
@@ -65,14 +66,18 @@ function transformStyle(
  * @return {Array} converted rules.
  */
 const transformStyles = ( styles, wrapperSelector = '' ) => {
+	let cache = cacheByWrapperSelector.get( wrapperSelector );
+	if ( ! cache ) {
+		cache = new WeakMap();
+		cacheByWrapperSelector.set( wrapperSelector, cache );
+	}
 	return styles.map( ( style ) => {
-		if ( transformStylesCache.has( style ) ) {
-			return transformStylesCache.get( style );
+		let css = cache.get( style );
+		if ( ! css ) {
+			css = transformStyle( style, wrapperSelector );
+			cache.set( style, css );
 		}
-
-		const transformedStyle = transformStyle( style, wrapperSelector );
-		transformStylesCache.set( style, transformedStyle );
-		return transformedStyle;
+		return css;
 	} );
 };
 
diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
index 28ab22cf56777..1ef1ad977e977 100644
--- a/packages/block-library/CHANGELOG.md
+++ b/packages/block-library/CHANGELOG.md
@@ -2,6 +2,19 @@
 
 ## Unreleased
 
+## 9.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 8.35.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
 ## 8.34.0 (2024-05-02)
 
 ## 8.33.0 (2024-04-19)
@@ -34,7 +47,6 @@
 
 -   Fix Image block lightbox missing alt attribute and improve accessibility. ([#54608](https://github.com/WordPress/gutenberg/pull/55010))
 
-
 ## 8.20.0 (2023-10-05)
 
 ## 8.19.0 (2023-09-20)
@@ -79,7 +91,7 @@
 
 ### Breaking Changes
 
--   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+-   Updated dependencies to require React 18 ([#45235](https://github.com/WordPress/gutenberg/pull/45235))
 
 ## 7.19.0 (2022-11-16)
 
@@ -188,8 +200,8 @@
 
 ### Breaking Changes
 
--   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/.
--   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/.
+-   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at <https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/>.
+-   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at <https://nodejs.org/en/about/releases/>.
 
 ## 2.29.0 (2021-03-17)
 
diff --git a/packages/block-library/README.md b/packages/block-library/README.md
index 25c5f9b52c71a..28cf7471ed1f1 100644
--- a/packages/block-library/README.md
+++ b/packages/block-library/README.md
@@ -66,7 +66,7 @@ To find out more about contributing to this package or Gutenberg as a whole, ple
 
 ⚠️ Adding new blocks to this package **requires** additional steps!
 
-1.  Do not forget to register a new core block in the [`index.js`](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/index.js) file of this package. For example, if you were to add the new core block called `core/blinking-paragraph`, you would have to add something like:
+1.  Do not forget to register a new core block in the [`index.js`](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/index.js) file of this package. For example, if you were to add the new core block called `core/blinking-paragraph`, you would have to add something like:
 
     ```js
     // packages/block-library/src/index.js
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index e6a91b2607871..3615ec396d976 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.34.0",
+	"version": "9.0.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -65,7 +66,7 @@
 		"@wordpress/viewport": "file:../viewport",
 		"@wordpress/wordcount": "file:../wordcount",
 		"change-case": "^4.1.2",
-		"classnames": "^2.3.1",
+		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"escape-html": "^1.0.3",
 		"fast-average-color": "^9.1.1",
diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
index e98f845cb56a7..0db2552b8ac26 100644
--- a/packages/block-library/src/audio/edit.js
+++ b/packages/block-library/src/audio/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -107,7 +107,7 @@ function AudioEdit( {
 		} );
 	}
 
-	const classes = classnames( className, {
+	const classes = clsx( className, {
 		'is-transient': isTemporaryAudio,
 	} );
 
diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js
index 4de2fdcefe22f..ab2b1b2844128 100644
--- a/packages/block-library/src/audio/edit.native.js
+++ b/packages/block-library/src/audio/edit.native.js
@@ -13,9 +13,9 @@ import {
 	ToggleControl,
 	ToolbarButton,
 	ToolbarGroup,
-	AudioPlayer,
 } from '@wordpress/components';
 import {
+	AudioPlayer,
 	BlockCaption,
 	BlockControls,
 	BlockIcon,
diff --git a/packages/block-library/src/audio/theme.scss b/packages/block-library/src/audio/theme.scss
index eda394fd6a3d5..2744d36e74ca6 100644
--- a/packages/block-library/src/audio/theme.scss
+++ b/packages/block-library/src/audio/theme.scss
@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-:where(.wp-block-audio) {
+.wp-block-audio {
 	margin: 0 0 1em 0;
 }
diff --git a/packages/block-library/src/avatar/edit.js b/packages/block-library/src/avatar/edit.js
index 364baa39c441a..4fad0fb09f883 100644
--- a/packages/block-library/src/avatar/edit.js
+++ b/packages/block-library/src/avatar/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -124,7 +124,7 @@ const ResizableAvatar = ( {
 				<img
 					src={ doubledSizedSrc }
 					alt={ avatar.alt }
-					className={ classnames(
+					className={ clsx(
 						'avatar',
 						'avatar-' + attributes.size,
 						'photo',
diff --git a/packages/block-library/src/block/edit-title.native.js b/packages/block-library/src/block/edit-title.native.js
index d0c7d981202d9..9c33fd7164ccc 100644
--- a/packages/block-library/src/block/edit-title.native.js
+++ b/packages/block-library/src/block/edit-title.native.js
@@ -6,7 +6,8 @@ import { Text, View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon, useGlobalStyles } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
+import { useGlobalStyles } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { help, lock } from '@wordpress/icons';
diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
index 7b555c1c7186e..8d4147cb31855 100644
--- a/packages/block-library/src/block/edit.js
+++ b/packages/block-library/src/block/edit.js
@@ -1,14 +1,18 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { useRegistry, useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useRef, useMemo, useEffect } from '@wordpress/element';
-import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
+import {
+	useEntityRecord,
+	store as coreStore,
+	useEntityBlockEditor,
+} from '@wordpress/core-data';
 import {
 	Placeholder,
 	Spinner,
@@ -20,7 +24,6 @@ import {
 	useInnerBlocksProps,
 	RecursionProvider,
 	useHasRecursion,
-	InnerBlocks,
 	useBlockProps,
 	Warning,
 	privateApis as blockEditorPrivateApis,
@@ -28,8 +31,7 @@ import {
 	BlockControls,
 } from '@wordpress/block-editor';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
-import { parse, cloneBlock, store as blocksStore } from '@wordpress/blocks';
-import { RichTextData } from '@wordpress/rich-text';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -38,29 +40,11 @@ import { name as patternBlockName } from './index';
 import { unlock } from '../lock-unlock';
 
 const { useLayoutClasses } = unlock( blockEditorPrivateApis );
-const { isOverridableBlock } = unlock( patternsPrivateApis );
+const { isOverridableBlock, hasOverridableBlocks } =
+	unlock( patternsPrivateApis );
 
 const fullAlignments = [ 'full', 'wide', 'left', 'right' ];
 
-function getLegacyIdMap( blocks, content, nameCount = {} ) {
-	let idToClientIdMap = {};
-	for ( const block of blocks ) {
-		if ( block?.innerBlocks?.length ) {
-			idToClientIdMap = {
-				...idToClientIdMap,
-				...getLegacyIdMap( block.innerBlocks, content, nameCount ),
-			};
-		}
-
-		const id = block.attributes.metadata?.id;
-		const clientId = block.clientId;
-		if ( id && content?.[ id ] ) {
-			idToClientIdMap[ clientId ] = id;
-		}
-	}
-	return idToClientIdMap;
-}
-
 const useInferredLayout = ( blocks, parentLayout ) => {
 	const initialInferredAlignmentRef = useRef();
 
@@ -90,121 +74,6 @@ const useInferredLayout = ( blocks, parentLayout ) => {
 	}, [ blocks, parentLayout ] );
 };
 
-function hasOverridableBlocks( blocks ) {
-	return blocks.some( ( block ) => {
-		if ( isOverridableBlock( block ) ) {
-			return true;
-		}
-		return hasOverridableBlocks( block.innerBlocks );
-	} );
-}
-
-function getOverridableAttributes( block ) {
-	return Object.entries( block.attributes.metadata.bindings )
-		.filter(
-			( [ , binding ] ) => binding.source === 'core/pattern-overrides'
-		)
-		.map( ( [ attributeKey ] ) => attributeKey );
-}
-
-function applyInitialContentValuesToInnerBlocks(
-	blocks,
-	content = {},
-	defaultValues,
-	legacyIdMap
-) {
-	return blocks.map( ( block ) => {
-		const innerBlocks = applyInitialContentValuesToInnerBlocks(
-			block.innerBlocks,
-			content,
-			defaultValues,
-			legacyIdMap
-		);
-		const metadataName =
-			legacyIdMap?.[ block.clientId ] ?? block.attributes.metadata?.name;
-
-		if ( ! metadataName || ! isOverridableBlock( block ) ) {
-			return { ...block, innerBlocks };
-		}
-
-		const attributes = getOverridableAttributes( block );
-		const newAttributes = { ...block.attributes };
-		for ( const attributeKey of attributes ) {
-			defaultValues[ metadataName ] ??= {};
-			defaultValues[ metadataName ][ attributeKey ] =
-				block.attributes[ attributeKey ];
-
-			const contentValues = content[ metadataName ];
-			if ( contentValues?.[ attributeKey ] !== undefined ) {
-				newAttributes[ attributeKey ] = contentValues[ attributeKey ];
-			}
-		}
-		return {
-			...block,
-			attributes: newAttributes,
-			innerBlocks,
-		};
-	} );
-}
-
-function isAttributeEqual( attribute1, attribute2 ) {
-	if (
-		attribute1 instanceof RichTextData &&
-		attribute2 instanceof RichTextData
-	) {
-		return attribute1.toString() === attribute2.toString();
-	}
-	return attribute1 === attribute2;
-}
-
-function getContentValuesFromInnerBlocks( blocks, defaultValues, legacyIdMap ) {
-	/** @type {Record<string, { values: Record<string, unknown>}>} */
-	const content = {};
-	for ( const block of blocks ) {
-		if ( block.name === patternBlockName ) {
-			continue;
-		}
-		if ( block.innerBlocks.length ) {
-			Object.assign(
-				content,
-				getContentValuesFromInnerBlocks(
-					block.innerBlocks,
-					defaultValues,
-					legacyIdMap
-				)
-			);
-		}
-		const metadataName =
-			legacyIdMap?.[ block.clientId ] ?? block.attributes.metadata?.name;
-		if ( ! metadataName || ! isOverridableBlock( block ) ) {
-			continue;
-		}
-
-		const attributes = getOverridableAttributes( block );
-
-		for ( const attributeKey of attributes ) {
-			if (
-				! isAttributeEqual(
-					block.attributes[ attributeKey ],
-					defaultValues?.[ metadataName ]?.[ attributeKey ]
-				)
-			) {
-				content[ metadataName ] ??= {};
-				// TODO: We need a way to represent `undefined` in the serialized overrides.
-				// Also see: https://github.com/WordPress/gutenberg/pull/57249#discussion_r1452987871
-				content[ metadataName ][ attributeKey ] =
-					block.attributes[ attributeKey ] === undefined
-						? // TODO: We use an empty string to represent undefined for now until
-						  // we support a richer format for overrides and the block binding API.
-						  // Currently only the `linkTarget` attribute of `core/button` is affected.
-						  ''
-						: block.attributes[ attributeKey ];
-			}
-		}
-	}
-	return Object.keys( content ).length > 0 ? content : undefined;
-}
-
 function setBlockEditMode( setEditMode, blocks, mode ) {
 	blocks.forEach( ( block ) => {
 		const editMode =
@@ -232,6 +101,8 @@ function RecursionWarning() {
 	);
 }
 
+const NOOP = () => {};
+
 // Wrap the main Edit function for the pattern block with a recursion wrapper
 // that allows short-circuiting rendering as early as possible, before any
 // of the other effects in the block edit have run.
@@ -257,33 +128,22 @@ function ReusableBlockEdit( {
 	clientId: patternClientId,
 	setAttributes,
 } ) {
-	const registry = useRegistry();
-	const { record, editedRecord, hasResolved } = useEntityRecord(
+	const { record, hasResolved } = useEntityRecord(
 		'postType',
 		'wp_block',
 		ref
 	);
+	const [ blocks ] = useEntityBlockEditor( 'postType', 'wp_block', {
+		id: ref,
+	} );
 	const isMissing = hasResolved && ! record;
 
-	// The value of the `content` attribute, stored in a `ref` to avoid triggering the effect
-	// that runs `applyInitialContentValuesToInnerBlocks` unnecessarily.
-	const contentRef = useRef( content );
-
-	// The default content values from the original pattern for overridable attributes.
-	// Set by the `applyInitialContentValuesToInnerBlocks` function.
-	const defaultContent = useRef( {} );
-
-	const {
-		replaceInnerBlocks,
-		__unstableMarkNextChangeAsNotPersistent,
-		setBlockEditingMode,
-	} = useDispatch( blockEditorStore );
-	const { syncDerivedUpdates } = unlock( useDispatch( blockEditorStore ) );
+	const { setBlockEditingMode, __unstableMarkLastChangeAsPersistent } =
+		useDispatch( blockEditorStore );
 
 	const {
 		innerBlocks,
 		userCanEdit,
-		getBlockEditingMode,
 		onNavigateToEntityRecord,
 		editingMode,
 		hasPatternOverridesSource,
@@ -296,12 +156,11 @@ function ReusableBlockEdit( {
 				getBlockEditingMode: _getBlockEditingMode,
 			} = select( blockEditorStore );
 			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
-			const blocks = getBlocks( patternClientId );
 			const canEdit = canUser( 'update', 'blocks', ref );
 
 			// For editing link to the site editor if the theme and user permissions support it.
 			return {
-				innerBlocks: blocks,
+				innerBlocks: getBlocks( patternClientId ),
 				userCanEdit: canEdit,
 				getBlockEditingMode: _getBlockEditingMode,
 				onNavigateToEntityRecord:
@@ -333,115 +192,31 @@ function ReusableBlockEdit( {
 	] );
 
 	const canOverrideBlocks = useMemo(
-		() => hasPatternOverridesSource && hasOverridableBlocks( innerBlocks ),
-		[ hasPatternOverridesSource, innerBlocks ]
+		() => hasPatternOverridesSource && hasOverridableBlocks( blocks ),
+		[ hasPatternOverridesSource, blocks ]
 	);
 
-	const initialBlocks = useMemo(
-		() =>
-			// Clone the blocks to generate new client IDs.
-			editedRecord.blocks?.map( ( block ) => cloneBlock( block ) ) ??
-			( editedRecord.content && typeof editedRecord.content !== 'function'
-				? parse( editedRecord.content )
-				: [] ),
-		[ editedRecord.blocks, editedRecord.content ]
-	);
-
-	const legacyIdMap = useRef( {} );
-
-	// Apply the initial overrides from the pattern block to the inner blocks.
-	useEffect( () => {
-		// Build a map of clientIds to the old nano id system to provide back compat.
-		legacyIdMap.current = getLegacyIdMap(
-			initialBlocks,
-			contentRef.current
-		);
-		defaultContent.current = {};
-		const originalEditingMode = getBlockEditingMode( patternClientId );
-		// Replace the contents of the blocks with the overrides.
-		registry.batch( () => {
-			setBlockEditingMode( patternClientId, 'default' );
-			syncDerivedUpdates( () => {
-				const blocks = hasPatternOverridesSource
-					? applyInitialContentValuesToInnerBlocks(
-							initialBlocks,
-							contentRef.current,
-							defaultContent.current,
-							legacyIdMap.current
-					  )
-					: initialBlocks;
-
-				replaceInnerBlocks( patternClientId, blocks );
-			} );
-			setBlockEditingMode( patternClientId, originalEditingMode );
-		} );
-	}, [
-		hasPatternOverridesSource,
-		__unstableMarkNextChangeAsNotPersistent,
-		patternClientId,
-		initialBlocks,
-		replaceInnerBlocks,
-		registry,
-		getBlockEditingMode,
-		setBlockEditingMode,
-		syncDerivedUpdates,
-	] );
-
-	const { alignment, layout } = useInferredLayout(
-		innerBlocks,
-		parentLayout
-	);
+	const { alignment, layout } = useInferredLayout( blocks, parentLayout );
 	const layoutClasses = useLayoutClasses( { layout }, name );
 
 	const blockProps = useBlockProps( {
-		className: classnames(
+		className: clsx(
 			'block-library-block__reusable-block-container',
 			layout && layoutClasses,
 			{ [ `align${ alignment }` ]: alignment }
 		),
 	} );
 
+	// Use `blocks` variable until `innerBlocks` is populated, which has the proper clientIds.
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		templateLock: 'contentOnly',
+		templateLock: 'all',
 		layout,
-		renderAppender: innerBlocks?.length
-			? undefined
-			: InnerBlocks.ButtonBlockAppender,
+		value: innerBlocks.length > 0 ? innerBlocks : blocks,
+		onInput: NOOP,
+		onChange: NOOP,
+		renderAppender: blocks?.length ? undefined : blocks.ButtonBlockAppender,
 	} );
 
-	// Sync the `content` attribute from the updated blocks to the pattern block.
-	// `syncDerivedUpdates` is used here to avoid creating an additional undo level.
-	useEffect( () => {
-		if ( ! hasPatternOverridesSource ) {
-			return;
-		}
-		const { getBlocks } = registry.select( blockEditorStore );
-		let prevBlocks = getBlocks( patternClientId );
-		return registry.subscribe( () => {
-			const blocks = getBlocks( patternClientId );
-			if ( blocks !== prevBlocks ) {
-				prevBlocks = blocks;
-				syncDerivedUpdates( () => {
-					const updatedContent = getContentValuesFromInnerBlocks(
-						blocks,
-						defaultContent.current,
-						legacyIdMap.current
-					);
-					setAttributes( {
-						content: updatedContent,
-					} );
-					contentRef.current = updatedContent;
-				} );
-			}
-		}, blockEditorStore );
-	}, [
-		hasPatternOverridesSource,
-		syncDerivedUpdates,
-		patternClientId,
-		registry,
-		setAttributes,
-	] );
-
 	const handleEditOriginal = () => {
 		onNavigateToEntityRecord( {
 			postId: ref,
@@ -451,7 +226,9 @@ function ReusableBlockEdit( {
 
 	const resetContent = () => {
 		if ( content ) {
-			replaceInnerBlocks( patternClientId, initialBlocks );
+			// Make sure any previous changes are persisted before resetting.
+			__unstableMarkLastChangeAsPersistent();
+			setAttributes( { content: undefined } );
 		}
 	};
 
diff --git a/packages/block-library/src/block/edit.native.js b/packages/block-library/src/block/edit.native.js
index ae8c8315aa2e8..6578c12eefc4e 100644
--- a/packages/block-library/src/block/edit.native.js
+++ b/packages/block-library/src/block/edit.native.js
@@ -232,7 +232,7 @@ export default function ReusableBlockEdit( {
 			<TouchableWithoutFeedback
 				disabled={ ! isSelected }
 				accessibilityLabel={ __( 'Help button' ) }
-				accessibilityRole={ 'button' }
+				accessibilityRole="button"
 				accessibilityHint={ __( 'Tap here to show help' ) }
 				onPress={ openSheet }
 			>
diff --git a/packages/block-library/src/block/editor.scss b/packages/block-library/src/block/editor.scss
deleted file mode 100644
index c49675392a525..0000000000000
--- a/packages/block-library/src/block/editor.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.edit-post-visual-editor .block-library-block__reusable-block-container {
-	// Unset the padding that root containers get when they're actually root containers.
-	.is-root-container {
-		padding-left: 0;
-		padding-right: 0;
-	}
-
-	// Allow vertical paddings to collapse to better fit the flow.
-	.block-editor-writing-flow {
-		display: block;
-	}
-
-	.components-disabled .block-list-appender {
-		display: none;
-	}
-}
-
-.edit-post-visual-editor .block-editor-block-list__block:not(.remove-outline).is-reusable {
-	&.is-highlighted,
-	&.is-selected {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
-	}
-
-	&.block-editor-block-list__block:not([contenteditable]):focus {
-		&::after {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
-			}
-		}
-	}
-}
diff --git a/packages/block-library/src/block/index.php b/packages/block-library/src/block/index.php
index 9403205c18659..8beef975fad6f 100644
--- a/packages/block-library/src/block/index.php
+++ b/packages/block-library/src/block/index.php
@@ -78,7 +78,7 @@ function render_block_core_block( $attributes ) {
 	 * filter so that it is available when a pattern's inner blocks are
 	 * rendering via do_blocks given it only receives the inner content.
 	 */
-	$has_pattern_overrides = isset( $attributes['content'] );
+	$has_pattern_overrides = isset( $attributes['content'] ) && null !== get_block_bindings_source( 'core/pattern-overrides' );
 	if ( $has_pattern_overrides ) {
 		$filter_block_context = static function ( $context ) use ( $attributes ) {
 			$context['pattern/overrides'] = $attributes['content'];
diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js
index 1ec6fde3fe4a4..8ab83e1b09518 100644
--- a/packages/block-library/src/button/deprecated.js
+++ b/packages/block-library/src/button/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -58,7 +58,7 @@ function migrateAlign( attributes ) {
 	const { align, ...otherAttributes } = attributes;
 	return {
 		...otherAttributes,
-		className: classnames(
+		className: clsx(
 			otherAttributes.className,
 			`align${ attributes.align }`
 		),
@@ -226,7 +226,7 @@ const v11 = {
 		const borderProps = getBorderClassesAndStyles( attributes );
 		const colorProps = getColorClassesAndStyles( attributes );
 		const spacingProps = getSpacingClassesAndStyles( attributes );
-		const buttonClasses = classnames(
+		const buttonClasses = clsx(
 			'wp-block-button__link',
 			colorProps.className,
 			borderProps.className,
@@ -246,7 +246,7 @@ const v11 = {
 		// if it had already been assigned, for the sake of backward-compatibility.
 		// A title will no longer be assigned for new or updated button block links.
 
-		const wrapperClasses = classnames( className, {
+		const wrapperClasses = clsx( className, {
 			[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 			[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
 		} );
@@ -352,7 +352,7 @@ const v10 = {
 		const borderProps = getBorderClassesAndStyles( attributes );
 		const colorProps = getColorClassesAndStyles( attributes );
 		const spacingProps = getSpacingClassesAndStyles( attributes );
-		const buttonClasses = classnames(
+		const buttonClasses = clsx(
 			'wp-block-button__link',
 			colorProps.className,
 			borderProps.className,
@@ -372,7 +372,7 @@ const v10 = {
 		// if it had already been assigned, for the sake of backward-compatibility.
 		// A title will no longer be assigned for new or updated button block links.
 
-		const wrapperClasses = classnames( className, {
+		const wrapperClasses = clsx( className, {
 			[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 			[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
 		} );
@@ -468,7 +468,7 @@ const deprecated = [
 
 			const borderRadius = style?.border?.radius;
 			const colorProps = getColorClassesAndStyles( attributes );
-			const buttonClasses = classnames(
+			const buttonClasses = clsx(
 				'wp-block-button__link',
 				colorProps.className,
 				{
@@ -484,7 +484,7 @@ const deprecated = [
 			// if it had already been assigned, for the sake of backward-compatibility.
 			// A title will no longer be assigned for new or updated button block links.
 
-			const wrapperClasses = classnames( className, {
+			const wrapperClasses = clsx( className, {
 				[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 				[ `has-custom-font-size` ]:
 					fontSize || style?.typography?.fontSize,
@@ -558,7 +558,7 @@ const deprecated = [
 			const { borderRadius, linkTarget, rel, text, title, url, width } =
 				attributes;
 			const colorProps = getColorClassesAndStyles( attributes );
-			const buttonClasses = classnames(
+			const buttonClasses = clsx(
 				'wp-block-button__link',
 				colorProps.className,
 				{
@@ -574,7 +574,7 @@ const deprecated = [
 			// if it had already been assigned, for the sake of backward-compatibility.
 			// A title will no longer be assigned for new or updated button block links.
 
-			const wrapperClasses = classnames( className, {
+			const wrapperClasses = clsx( className, {
 				[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 			} );
 
@@ -646,7 +646,7 @@ const deprecated = [
 			const { borderRadius, linkTarget, rel, text, title, url, width } =
 				attributes;
 			const colorProps = getColorClassesAndStyles( attributes );
-			const buttonClasses = classnames(
+			const buttonClasses = clsx(
 				'wp-block-button__link',
 				colorProps.className,
 				{
@@ -662,7 +662,7 @@ const deprecated = [
 			// if it had already been assigned, for the sake of backward-compatibility.
 			// A title will no longer be assigned for new or updated button block links.
 
-			const wrapperClasses = classnames( className, {
+			const wrapperClasses = clsx( className, {
 				[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 			} );
 
@@ -725,7 +725,7 @@ const deprecated = [
 		save( { attributes } ) {
 			const { borderRadius, linkTarget, rel, text, title, url } =
 				attributes;
-			const buttonClasses = classnames( 'wp-block-button__link', {
+			const buttonClasses = clsx( 'wp-block-button__link', {
 				'no-border-radius': borderRadius === 0,
 			} );
 			const buttonStyle = {
@@ -823,7 +823,7 @@ const deprecated = [
 				getColorClassName( 'background-color', backgroundColor );
 			const gradientClass = __experimentalGetGradientClass( gradient );
 
-			const buttonClasses = classnames( 'wp-block-button__link', {
+			const buttonClasses = clsx( 'wp-block-button__link', {
 				'has-text-color': textColor || customTextColor,
 				[ textClass ]: textClass,
 				'has-background':
@@ -941,7 +941,7 @@ const deprecated = [
 				backgroundColor
 			);
 
-			const buttonClasses = classnames( 'wp-block-button__link', {
+			const buttonClasses = clsx( 'wp-block-button__link', {
 				'has-text-color': textColor || customTextColor,
 				[ textClass ]: textClass,
 				'has-background': backgroundColor || customBackgroundColor,
@@ -1009,7 +1009,7 @@ const deprecated = [
 				backgroundColor
 			);
 
-			const buttonClasses = classnames( 'wp-block-button__link', {
+			const buttonClasses = clsx( 'wp-block-button__link', {
 				'has-text-color': textColor || customTextColor,
 				[ textClass ]: textClass,
 				'has-background': backgroundColor || customBackgroundColor,
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index e9ae124c6a439..e5bd5e6b5f064 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -156,6 +156,7 @@ function ButtonEdit( props ) {
 		onReplace,
 		mergeBlocks,
 		clientId,
+		context,
 	} = props;
 	const {
 		tagName,
@@ -246,18 +247,21 @@ function ButtonEdit( props ) {
 			return {
 				lockUrlControls:
 					!! metadata?.bindings?.url &&
-					( ! blockBindingsSource ||
-						blockBindingsSource?.lockAttributesEditing ),
+					! blockBindingsSource?.canUserEditValue( {
+						select,
+						context,
+						args: metadata?.bindings?.url?.args,
+					} ),
 			};
 		},
-		[ isSelected ]
+		[ isSelected, metadata?.bindings?.url ]
 	);
 
 	return (
 		<>
 			<div
 				{ ...blockProps }
-				className={ classnames( blockProps.className, {
+				className={ clsx( blockProps.className, {
 					[ `has-custom-width wp-block-button__width-${ width }` ]:
 						width,
 					[ `has-custom-font-size` ]: blockProps.style.fontSize,
@@ -274,7 +278,7 @@ function ButtonEdit( props ) {
 						} )
 					}
 					withoutInteractiveFormatting
-					className={ classnames(
+					className={ clsx(
 						className,
 						'wp-block-button__link',
 						colorProps.className,
@@ -339,7 +343,7 @@ function ButtonEdit( props ) {
 						} }
 						anchor={ popoverAnchor }
 						focusOnMount={ isEditingURL ? 'firstElement' : false }
-						__unstableSlotName={ '__unstable-block-tools-after' }
+						__unstableSlotName="__unstable-block-tools-after"
 						shift
 					>
 						<LinkControl
diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js
index e975710f821e1..26509a93de686 100644
--- a/packages/block-library/src/button/edit.native.js
+++ b/packages/block-library/src/button/edit.native.js
@@ -17,6 +17,7 @@ import {
 	getColorObjectByAttributeValues,
 	getGradientValueBySlug,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	useMobileGlobalStylesColors,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -28,7 +29,6 @@ import {
 	BottomSheetSelectControl,
 	CSS_UNITS,
 	filterUnitsWithSettings,
-	useMobileGlobalStylesColors,
 } from '@wordpress/components';
 import { link } from '@wordpress/icons';
 // eslint-disable-next-line no-restricted-imports
diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index c24021d17e38e..8c879c7e3b7c9 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -37,38 +37,3 @@ div[data-type="core/button"] {
 	text-decoration: inherit;
 }
 
-.editor-styles-wrapper .wp-block-button .wp-block-button__link {
-	// The following styles ensure a default border is applied when the user selects only a border color or style in the editor,
-	// but no width. They override the `border-width: 0;` applied by core's theme.json via the Elements API button.
-	&:where(.has-border-color) {
-		border-width: initial;
-	}
-	&:where([style*="border-top-color"]) {
-		border-top-width: initial;
-	}
-	&:where([style*="border-right-color"]) {
-		border-right-width: initial;
-	}
-	&:where([style*="border-bottom-color"]) {
-		border-bottom-width: initial;
-	}
-	&:where([style*="border-left-color"]) {
-		border-left-width: initial;
-	}
-
-	&:where([style*="border-style"]) {
-		border-width: initial;
-	}
-	&:where([style*="border-top-style"]) {
-		border-top-width: initial;
-	}
-	&:where([style*="border-right-style"]) {
-		border-right-width: initial;
-	}
-	&:where([style*="border-bottom-style"]) {
-		border-bottom-width: initial;
-	}
-	&:where([style*="border-left-style"]) {
-		border-left-width: initial;
-	}
-}
diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
index ba0fbd45f083c..65f095b21e144 100644
--- a/packages/block-library/src/button/save.js
+++ b/packages/block-library/src/button/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -42,7 +42,7 @@ export default function save( { attributes, className } ) {
 	const colorProps = getColorClassesAndStyles( attributes );
 	const spacingProps = getSpacingClassesAndStyles( attributes );
 	const shadowProps = getShadowClassesAndStyles( attributes );
-	const buttonClasses = classnames(
+	const buttonClasses = clsx(
 		'wp-block-button__link',
 		colorProps.className,
 		borderProps.className,
@@ -65,7 +65,7 @@ export default function save( { attributes, className } ) {
 	// if it had already been assigned, for the sake of backward-compatibility.
 	// A title will no longer be assigned for new or updated button block links.
 
-	const wrapperClasses = classnames( className, {
+	const wrapperClasses = clsx( className, {
 		[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 		[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
 	} );
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index f441152107973..42306cba0c984 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -86,69 +86,37 @@ $blocks-block__margin: 0.5em;
 	}
 }
 
-// the first selector is required for old buttons markup
+// The follow block style selectors are required for old buttons markup
+// and do not use the `:root :where()` format to match specificity at
+// the time they were deprecated.
 .wp-block-button.is-style-squared,
 .wp-block-button__link.wp-block-button.is-style-squared {
 	border-radius: 0;
 }
-
-// the first selector is required for old buttons markup
 .wp-block-button.no-border-radius,
 .wp-block-button__link.no-border-radius {
 	border-radius: 0 !important;
 }
 
-.wp-block-button:where(.is-style-outline) > .wp-block-button__link,
-.wp-block-button .wp-block-button__link:where(.is-style-outline) {
-	border: 2px solid currentColor;
-	padding: 0.667em 1.333em;
-}
-
-.wp-block-button:where(.is-style-outline) > .wp-block-button__link:not(.has-text-color),
-.wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-text-color) {
-	color: currentColor;
-}
-
-.wp-block-button:where(.is-style-outline) > .wp-block-button__link:not(.has-background),
-.wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-background) {
-	background-color: transparent;
-	// background-image is required to overwrite a gradient background
-	background-image: none;
-}
-
-.wp-block-button .wp-block-button__link {
-	// The following styles ensure a default border is applied when the user
-	// selects only a border color or style. This overcomes the zero border
-	// width applied by core's theme.json via the elements API.
-	&:where(.has-border-color) {
-		border-width: initial;
-	}
-	&:where([style*="border-top-color"]) {
-		border-top-width: initial;
-	}
-	&:where([style*="border-right-color"]) {
-		border-right-width: initial;
-	}
-	&:where([style*="border-bottom-color"]) {
-		border-bottom-width: initial;
-	}
-	&:where([style*="border-left-color"]) {
-		border-left-width: initial;
+// Selectors here use the `:root :where()` format for maintaining compatibility
+// with global styles and nested block style variations.
+:root {
+	// Outline Block Style Variation.
+	:where(.wp-block-button.is-style-outline > .wp-block-button__link),
+	:where(.wp-block-button .wp-block-button__link.is-style-outline) {
+		border: 2px solid currentColor;
+		padding: 0.667em 1.333em;
 	}
 
-	&:where([style*="border-style"]) {
-		border-width: initial;
-	}
-	&:where([style*="border-top-style"]) {
-		border-top-width: initial;
+	:where(.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color)),
+	:where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color)) {
+		color: currentColor;
 	}
-	&:where([style*="border-right-style"]) {
-		border-right-width: initial;
-	}
-	&:where([style*="border-bottom-style"]) {
-		border-bottom-width: initial;
-	}
-	&:where([style*="border-left-style"]) {
-		border-left-width: initial;
+
+	:where(.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background)),
+	:where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background)) {
+		background-color: transparent;
+		// background-image is required to overwrite a gradient background
+		background-image: none;
 	}
 }
diff --git a/packages/block-library/src/buttons/deprecated.js b/packages/block-library/src/buttons/deprecated.js
index 469cc14e76439..da28a6617fb65 100644
--- a/packages/block-library/src/buttons/deprecated.js
+++ b/packages/block-library/src/buttons/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -63,7 +63,7 @@ const deprecated = [
 			return (
 				<div
 					{ ...useBlockProps.save( {
-						className: classnames( {
+						className: clsx( {
 							[ `is-content-justification-${ contentJustification }` ]:
 								contentJustification,
 							'is-vertical': orientation === 'vertical',
diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
index 644c0570928ad..6fb718475c2ca 100644
--- a/packages/block-library/src/buttons/edit.js
+++ b/packages/block-library/src/buttons/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -28,7 +28,7 @@ const DEFAULT_BLOCK = {
 function ButtonsEdit( { attributes, className } ) {
 	const { fontSize, layout, style } = attributes;
 	const blockProps = useBlockProps( {
-		className: classnames( className, {
+		className: clsx( className, {
 			'has-custom-font-size': fontSize || style?.typography?.fontSize,
 		} ),
 	} );
diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
index 018ca3b7e2f8e..b97c915671ad9 100644
--- a/packages/block-library/src/buttons/editor.scss
+++ b/packages/block-library/src/buttons/editor.scss
@@ -33,9 +33,7 @@ $blocks-block__margin: 0.5em;
 	//
 	// This back compat rule is ignored if the user decides to use the
 	// newer justification options on the button block, hence the :not.
-	//
-	// Disable the stylelint rule, otherwise this selector is ugly!
-	/* stylelint-disable indentation */
+	/* stylelint-disable indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
 	&:not(
 		.is-content-justification-space-between,
 		.is-content-justification-right,
diff --git a/packages/block-library/src/buttons/save.js b/packages/block-library/src/buttons/save.js
index 77431ef98829c..43da258c8d706 100644
--- a/packages/block-library/src/buttons/save.js
+++ b/packages/block-library/src/buttons/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 export default function save( { attributes, className } ) {
 	const { fontSize, style } = attributes;
 	const blockProps = useBlockProps.save( {
-		className: classnames( className, {
+		className: clsx( className, {
 			'has-custom-font-size': fontSize || style?.typography?.fontSize,
 		} ),
 	} );
diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
index 0f15bdab46fcf..7e8bd61b03eaf 100644
--- a/packages/block-library/src/buttons/style.scss
+++ b/packages/block-library/src/buttons/style.scss
@@ -55,9 +55,7 @@ $blocks-block__margin: 0.5em;
 	//
 	// This back compat rule is ignored if the user decides to use the
 	// newer justification options on the button block, hence the :not.
-	//
-	// Disable the stylelint rule, otherwise this selector is ugly!
-	/* stylelint-disable indentation */
+	/* stylelint-disable indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
 	&:not(
 		.is-content-justification-space-between,
 		.is-content-justification-right,
diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js
index 15a526f249cf2..0c4df48d7c3dc 100644
--- a/packages/block-library/src/categories/edit.js
+++ b/packages/block-library/src/categories/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -127,7 +127,7 @@ export default function CategoriesEdit( {
 			? 'ul'
 			: 'div';
 
-	const classes = classnames( className, {
+	const classes = clsx( className, {
 		'wp-block-categories-list':
 			!! categories?.length && ! displayAsDropdown && ! isResolving,
 		'wp-block-categories-dropdown':
diff --git a/packages/block-library/src/code/theme.native.scss b/packages/block-library/src/code/theme.native.scss
index ee432598dd1c2..44eb9707b86a4 100644
--- a/packages/block-library/src/code/theme.native.scss
+++ b/packages/block-library/src/code/theme.native.scss
@@ -1,4 +1,4 @@
-/* stylelint-disable font-family-no-missing-generic-family-keyword */
+/* stylelint-disable font-family-no-missing-generic-family-keyword -- iOS will use the Menlo typeface and Android will use monospace, no need for a generic family keyword. */
 
 .blockCode {
 	font-family: $default-monospace-font;
diff --git a/packages/block-library/src/column/deprecated.js b/packages/block-library/src/column/deprecated.js
index eabefba86a798..514ab41dd62a8 100644
--- a/packages/block-library/src/column/deprecated.js
+++ b/packages/block-library/src/column/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ const deprecated = [
 		save( { attributes } ) {
 			const { verticalAlignment, width } = attributes;
 
-			const wrapperClasses = classnames( {
+			const wrapperClasses = clsx( {
 				[ `is-vertically-aligned-${ verticalAlignment }` ]:
 					verticalAlignment,
 			} );
diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js
index 1ea7b3e2517fd..2d399f392278c 100644
--- a/packages/block-library/src/column/edit.js
+++ b/packages/block-library/src/column/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -51,7 +51,7 @@ function ColumnEdit( {
 	setAttributes,
 	clientId,
 } ) {
-	const classes = classnames( 'block-core-columns', {
+	const classes = clsx( 'block-core-columns', {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 	const { columnsIds, hasChildBlocks, rootClientId } = useSelect(
diff --git a/packages/block-library/src/column/save.js b/packages/block-library/src/column/save.js
index 9d52ff19d0823..87806f70f25ff 100644
--- a/packages/block-library/src/column/save.js
+++ b/packages/block-library/src/column/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 export default function save( { attributes } ) {
 	const { verticalAlignment, width } = attributes;
 
-	const wrapperClasses = classnames( {
+	const wrapperClasses = clsx( {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 
diff --git a/packages/block-library/src/columns/deprecated.js b/packages/block-library/src/columns/deprecated.js
index be4527c5b1dab..21be6d29118ee 100644
--- a/packages/block-library/src/columns/deprecated.js
+++ b/packages/block-library/src/columns/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -95,7 +95,7 @@ export default [
 
 			const textClass = getColorClassName( 'color', textColor );
 
-			const className = classnames( {
+			const className = clsx( {
 				'has-background': backgroundColor || customBackgroundColor,
 				'has-text-color': textColor || customTextColor,
 				[ backgroundClass ]: backgroundClass,
@@ -210,7 +210,7 @@ export default [
 		save( { attributes } ) {
 			const { verticalAlignment, columns } = attributes;
 
-			const wrapperClasses = classnames( `has-${ columns }-columns`, {
+			const wrapperClasses = clsx( `has-${ columns }-columns`, {
 				[ `are-vertically-aligned-${ verticalAlignment }` ]:
 					verticalAlignment,
 			} );
diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index d608d66f9d15e..f8cf0297302cc 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -192,7 +192,7 @@ function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 	const { getBlockOrder } = useSelect( blockEditorStore );
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	const classes = classnames( {
+	const classes = clsx( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
 	} );
diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
index 1ab31bddbbe41..07655981edcad 100644
--- a/packages/block-library/src/columns/edit.native.js
+++ b/packages/block-library/src/columns/edit.native.js
@@ -13,7 +13,6 @@ import {
 	FooterMessageControl,
 	UnitControl,
 	getValueAndUnit,
-	GlobalStylesContext,
 	alignmentHelpers,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
@@ -25,12 +24,12 @@ import {
 	BlockVariationPicker,
 	useSettings,
 	store as blockEditorStore,
+	useGlobalStyles,
 } from '@wordpress/block-editor';
 import { withDispatch, useSelect } from '@wordpress/data';
 import {
 	useEffect,
 	useState,
-	useContext,
 	useMemo,
 	useCallback,
 	memo,
@@ -90,7 +89,7 @@ function ColumnsEditContainer( {
 	const [ resizeListener, sizes ] = useResizeObserver();
 	const [ columnsInRow, setColumnsInRow ] = useState( MIN_COLUMNS_NUM );
 	const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
-	const globalStyles = useContext( GlobalStylesContext );
+	const globalStyles = useGlobalStyles();
 
 	const { verticalAlignment, align } = attributes;
 	const { width } = sizes || {};
diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js
index 0dde559530853..cdd291f02c67a 100644
--- a/packages/block-library/src/columns/save.js
+++ b/packages/block-library/src/columns/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 export default function save( { attributes } ) {
 	const { isStackedOnMobile, verticalAlignment } = attributes;
 
-	const className = classnames( {
+	const className = clsx( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
 	} );
diff --git a/packages/block-library/src/comment-author-name/edit.js b/packages/block-library/src/comment-author-name/edit.js
index 629ff185394c5..b20816d39b64f 100644
--- a/packages/block-library/src/comment-author-name/edit.js
+++ b/packages/block-library/src/comment-author-name/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -37,7 +37,7 @@ export default function Edit( {
 	setAttributes,
 } ) {
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/comment-content/edit.js b/packages/block-library/src/comment-content/edit.js
index a22acd43612b2..45c2324dfa387 100644
--- a/packages/block-library/src/comment-content/edit.js
+++ b/packages/block-library/src/comment-content/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -34,7 +34,7 @@ export default function Edit( {
 	context: { commentId },
 } ) {
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/comment-edit-link/edit.js b/packages/block-library/src/comment-edit-link/edit.js
index 72de15757560f..d3cde7f2abeaf 100644
--- a/packages/block-library/src/comment-edit-link/edit.js
+++ b/packages/block-library/src/comment-edit-link/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ export default function Edit( {
 	setAttributes,
 } ) {
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/comment-reply-link/edit.js b/packages/block-library/src/comment-reply-link/edit.js
index 08a4d21de88c7..a8ef53aaaa25c 100644
--- a/packages/block-library/src/comment-reply-link/edit.js
+++ b/packages/block-library/src/comment-reply-link/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -25,7 +25,7 @@ import {
  */
 function Edit( { setAttributes, attributes: { textAlign } } ) {
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js
index 3765a45d4f8bb..07149607bfc39 100644
--- a/packages/block-library/src/comments-title/edit.js
+++ b/packages/block-library/src/comments-title/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ export default function Edit( {
 	const [ rawTitle ] = useEntityProp( 'postType', postType, 'title', postId );
 	const isSiteEditor = typeof postId === 'undefined';
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/comments/edit/comments-legacy.js b/packages/block-library/src/comments/edit/comments-legacy.js
index 16ba4d8b1641e..be460dbbcb0b5 100644
--- a/packages/block-library/src/comments/edit/comments-legacy.js
+++ b/packages/block-library/src/comments/edit/comments-legacy.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -38,7 +38,7 @@ export default function CommentsLegacy( {
 	];
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php
index e776db9b18d9d..f61490ab890d9 100644
--- a/packages/block-library/src/comments/index.php
+++ b/packages/block-library/src/comments/index.php
@@ -18,7 +18,7 @@
  *
  * @since 6.1.0
  *
- * @global WP_Post  $post     Global post object.
+ * @global WP_Post $post Global post object.
  *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss
index 2e1c2b8b706bc..c6327692ff02a 100644
--- a/packages/block-library/src/common.scss
+++ b/packages/block-library/src/common.scss
@@ -165,8 +165,8 @@ html :where(img[class*="wp-image-"]) {
 // Set the admin bar offset for sticky positioned blocks to the height of the admin bar.
 // This allows sticky positioned blocks to be positioned correctly when the admin bar is visible.
 html :where(.is-position-sticky) {
-	/* stylelint-disable length-zero-no-unit */
-	--wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px); // 0px is set explicitly so that it can be used in a calc value.
+	/* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
+	--wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
 	/* stylelint-enable length-zero-no-unit */
 }
 
@@ -175,8 +175,8 @@ html :where(.is-position-sticky) {
 // is not fixed to the top on mobile devices, but is fixed on viewports larger than 600px.
 @media screen and (max-width: 600px) {
 	html :where(.is-position-sticky) {
-		/* stylelint-disable length-zero-no-unit */
-		--wp-admin--admin-bar--position-offset: 0px; // 0px is set explicitly so that it can be used in a calc value.
+		/* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
+		--wp-admin--admin-bar--position-offset: 0px;
 		/* stylelint-enable length-zero-no-unit */
 	}
 }
diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index eb55a8dbabec1..0ce80ca8d424f 100644
--- a/packages/block-library/src/cover/block.json
+++ b/packages/block-library/src/cover/block.json
@@ -85,6 +85,7 @@
 		"anchor": true,
 		"align": true,
 		"html": false,
+		"shadow": true,
 		"spacing": {
 			"padding": true,
 			"margin": [ "top", "bottom" ],
diff --git a/packages/block-library/src/cover/controls.native.js b/packages/block-library/src/cover/controls.native.js
index 252211bfcf17b..dfcf441f4b7ec 100644
--- a/packages/block-library/src/cover/controls.native.js
+++ b/packages/block-library/src/cover/controls.native.js
@@ -213,7 +213,7 @@ function Controls( {
 										videoRef?.current.seek( 0 );
 									} }
 									ref={ videoRef }
-									resizeMode={ 'cover' }
+									resizeMode="cover"
 									source={ { uri: url } }
 									style={ videoPreviewStyles }
 								/>
@@ -281,7 +281,7 @@ function Controls( {
 						value={ dimRatio }
 						onChange={ onOpacityChange }
 						style={ styles.rangeCellContainer }
-						separatorType={ 'topFullWidth' }
+						separatorType="topFullWidth"
 					/>
 				</PanelBody>
 			) : null }
diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js
index e2e773cace142..c5f430eead685 100644
--- a/packages/block-library/src/cover/deprecated.js
+++ b/packages/block-library/src/cover/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -305,7 +305,7 @@ const v13 = {
 
 		const backgroundPosition = mediaPosition( focalPoint );
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -316,7 +316,7 @@ const v13 = {
 			getPositionClassName( contentPosition )
 		);
 
-		const imgClasses = classnames(
+		const imgClasses = clsx(
 			'wp-block-cover__image-background',
 			id ? `wp-image-${ id }` : null,
 			{
@@ -331,7 +331,7 @@ const v13 = {
 			<Tag { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__background',
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
@@ -370,7 +370,7 @@ const v13 = {
 					) ) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -467,7 +467,7 @@ const v12 = {
 
 		const backgroundPosition = mediaPosition( focalPoint );
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -478,7 +478,7 @@ const v12 = {
 			getPositionClassName( contentPosition )
 		);
 
-		const imgClasses = classnames(
+		const imgClasses = clsx(
 			'wp-block-cover__image-background',
 			id ? `wp-image-${ id }` : null,
 			{
@@ -493,7 +493,7 @@ const v12 = {
 			<Tag { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__background',
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
@@ -532,7 +532,7 @@ const v12 = {
 					) ) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -616,7 +616,7 @@ const v11 = {
 
 		const backgroundPosition = mediaPosition( focalPoint );
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -627,7 +627,7 @@ const v11 = {
 			getPositionClassName( contentPosition )
 		);
 
-		const imgClasses = classnames(
+		const imgClasses = clsx(
 			'wp-block-cover__image-background',
 			id ? `wp-image-${ id }` : null,
 			{
@@ -642,7 +642,7 @@ const v11 = {
 			<div { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__background',
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
@@ -681,7 +681,7 @@ const v11 = {
 					) ) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -765,7 +765,7 @@ const v10 = {
 				 ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
 				 : undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -782,7 +782,7 @@ const v10 = {
 			<div { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__background',
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
@@ -805,7 +805,7 @@ const v10 = {
 					isImgElement &&
 					url && (
 						<img
-							className={ classnames(
+							className={ clsx(
 								'wp-block-cover__image-background',
 								id ? `wp-image-${ id }` : null
 							) }
@@ -818,7 +818,7 @@ const v10 = {
 					) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -900,7 +900,7 @@ const v9 = {
 				 ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
 				 : undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -917,7 +917,7 @@ const v9 = {
 			<div { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__background',
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
@@ -937,7 +937,7 @@ const v9 = {
 
 				{ isImageBackground && isImgElement && url && (
 					<img
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__image-background',
 							id ? `wp-image-${ id }` : null
 						) }
@@ -950,7 +950,7 @@ const v9 = {
 				) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -1032,7 +1032,7 @@ const v8 = {
 				 ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
 				 : undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -1047,7 +1047,7 @@ const v8 = {
 			<div { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
 						'wp-block-cover__gradient-background',
@@ -1064,7 +1064,7 @@ const v8 = {
 
 				{ isImageBackground && isImgElement && url && (
 					<img
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__image-background',
 							id ? `wp-image-${ id }` : null
 						) }
@@ -1077,7 +1077,7 @@ const v8 = {
 				) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -1182,7 +1182,7 @@ const v7 = {
 					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
 					: undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -1202,7 +1202,7 @@ const v7 = {
 				{ url && ( gradient || customGradient ) && dimRatio !== 0 && (
 					<span
 						aria-hidden="true"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__gradient-background',
 							gradientClass
 						) }
@@ -1215,7 +1215,7 @@ const v7 = {
 				) }
 				{ isImageBackground && isImgElement && url && (
 					<img
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__image-background',
 							id ? `wp-image-${ id }` : null
 						) }
@@ -1228,7 +1228,7 @@ const v7 = {
 				) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -1333,7 +1333,7 @@ const v6 = {
 			}
 		}
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -1353,7 +1353,7 @@ const v6 = {
 				{ url && ( gradient || customGradient ) && dimRatio !== 0 && (
 					<span
 						aria-hidden="true"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__gradient-background',
 							gradientClass
 						) }
@@ -1436,7 +1436,7 @@ const v5 = {
 		}
 		style.minHeight = minHeight || undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -1452,7 +1452,7 @@ const v5 = {
 				{ url && ( gradient || customGradient ) && dimRatio !== 0 && (
 					<span
 						aria-hidden="true"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__gradient-background',
 							gradientClass
 						) }
@@ -1533,7 +1533,7 @@ const v4 = {
 		}
 		style.minHeight = minHeight || undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -1549,7 +1549,7 @@ const v4 = {
 				{ url && ( gradient || customGradient ) && dimRatio !== 0 && (
 					<span
 						aria-hidden="true"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__gradient-background',
 							gradientClass
 						) }
@@ -1623,7 +1623,7 @@ const v3 = {
 			}%`;
 		}
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -1716,7 +1716,7 @@ const v2 = {
 			style.backgroundColor = customOverlayColor;
 		}
 
-		const classes = classnames(
+		const classes = clsx(
 			'wp-block-cover-image',
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
@@ -1785,7 +1785,7 @@ const v1 = {
 	save( { attributes } ) {
 		const { url, title, hasParallax, dimRatio, align } = attributes;
 		const style = backgroundImageStyles( url );
-		const classes = classnames(
+		const classes = clsx(
 			'wp-block-cover-image',
 			dimRatioToClassV1( dimRatio ),
 			{
diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
index 1fc1519f47f94..99324545bf798 100644
--- a/packages/block-library/src/cover/edit.native.js
+++ b/packages/block-library/src/cover/edit.native.js
@@ -10,7 +10,7 @@ import {
 	Platform,
 } from 'react-native';
 import Video from 'react-native-video';
-import classnames from 'classnames/dedupe';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -33,7 +33,6 @@ import {
 	ColorPicker,
 	BottomSheetConsumer,
 	useConvertUnitToMobile,
-	useMobileGlobalStylesColors,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -47,6 +46,8 @@ import {
 	getColorObjectByAttributeValues,
 	getGradientValueBySlug,
 	store as blockEditorStore,
+	useGlobalStyles,
+	useMobileGlobalStylesColors,
 } from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { useDispatch, withSelect, withDispatch } from '@wordpress/data';
@@ -156,9 +157,11 @@ const Cover = ( {
 		mediaUploadSync();
 	}, [] );
 
+	const globalStyles = useGlobalStyles();
 	const convertedMinHeight = useConvertUnitToMobile(
 		minHeight || COVER_DEFAULT_HEIGHT,
-		minHeightUnit
+		minHeightUnit,
+		globalStyles
 	);
 
 	const isImage = backgroundType === MEDIA_TYPE_IMAGE;
@@ -218,6 +221,21 @@ const Cover = ( {
 		} );
 	};
 
+	const onUpdateMediaProgress = useCallback(
+		( payload ) => {
+			const { mediaUrl, state } = payload;
+
+			setIsUploadInProgress( true );
+
+			if ( isUploadInProgress && isImage && mediaUrl && ! state ) {
+				setAttributes( {
+					url: mediaUrl,
+				} );
+			}
+		},
+		[ isImage, isUploadInProgress, setAttributes ]
+	);
+
 	const onMediaPressed = () => {
 		if ( isUploadInProgress ) {
 			requestImageUploadCancelDialog( id );
@@ -298,7 +316,7 @@ const Cover = ( {
 
 		// Ensure that "is-light" is removed from "className" attribute if cover background is dark.
 		if ( isCoverDark && attributes.className?.includes( 'is-light' ) ) {
-			const className = classnames( attributes.className, {
+			const className = clsx( attributes.className, {
 				'is-light': false,
 			} );
 			setAttributes( {
@@ -447,9 +465,7 @@ const Cover = ( {
 					toolbarControls( openMediaOptionsRef.current ) }
 				<MediaUploadProgress
 					mediaId={ id }
-					onUpdateMediaProgress={ () => {
-						setIsUploadInProgress( true );
-					} }
+					onUpdateMediaProgress={ onUpdateMediaProgress }
 					onFinishMediaUploadWithSuccess={ ( {
 						mediaServerId,
 						mediaUrl,
@@ -496,7 +512,7 @@ const Cover = ( {
 						muted
 						disableFocus
 						repeat
-						resizeMode={ 'cover' }
+						resizeMode="cover"
 						source={ { uri: url } }
 						onLoad={ onVideoLoad }
 						onLoadStart={ onVideoLoadStart }
diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js
index 7de600f0b6809..458f279e8748b 100644
--- a/packages/block-library/src/cover/edit/index.js
+++ b/packages/block-library/src/cover/edit/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -447,10 +447,7 @@ function CoverEdit( {
 				) }
 				<TagName
 					{ ...blockProps }
-					className={ classnames(
-						'is-placeholder',
-						blockProps.className
-					) }
+					className={ clsx( 'is-placeholder', blockProps.className ) }
 					style={ {
 						...blockProps.style,
 						minHeight: minHeightWithUnit || undefined,
@@ -476,7 +473,7 @@ function CoverEdit( {
 		);
 	}
 
-	const classes = classnames(
+	const classes = clsx(
 		{
 			'is-dark-theme': isDark,
 			'is-light': ! isDark,
@@ -498,7 +495,7 @@ function CoverEdit( {
 			{ inspectorControls }
 			<TagName
 				{ ...blockProps }
-				className={ classnames( classes, blockProps.className ) }
+				className={ clsx( classes, blockProps.className ) }
 				style={ { ...style, ...blockProps.style } }
 				data-url={ url }
 			>
@@ -506,7 +503,7 @@ function CoverEdit( {
 				{ showOverlay && (
 					<span
 						aria-hidden="true"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__background',
 							dimRatioToClass( dimRatio ),
 							{
@@ -547,7 +544,7 @@ function CoverEdit( {
 							ref={ mediaElement }
 							role={ alt ? 'img' : undefined }
 							aria-label={ alt ? alt : undefined }
-							className={ classnames(
+							className={ clsx(
 								classes,
 								'wp-block-cover__image-background'
 							) }
diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
index a978b2ff184a7..0b05a004cd06e 100644
--- a/packages/block-library/src/cover/edit/inspector-controls.js
+++ b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -79,7 +79,7 @@ function CoverHeightInput( {
 			min={ min }
 			onChange={ handleOnChange }
 			onUnitChange={ onUnitChange }
-			__unstableInputWidth={ '80px' }
+			__unstableInputWidth="80px"
 			units={ units }
 			value={ computedValue }
 		/>
@@ -211,7 +211,14 @@ export default function CoverInspectorControls( {
 								}
 								help={
 									<>
-										<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+										<ExternalLink
+											href={
+												// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+												__(
+													'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+												)
+											}
+										>
 											{ __(
 												'Describe the purpose of the image.'
 											) }
diff --git a/packages/block-library/src/cover/edit/resizable-cover-popover.js b/packages/block-library/src/cover/edit/resizable-cover-popover.js
index 64d1bf106c3bc..a6447d0108c7f 100644
--- a/packages/block-library/src/cover/edit/resizable-cover-popover.js
+++ b/packages/block-library/src/cover/edit/resizable-cover-popover.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -42,7 +42,7 @@ export default function ResizableCoverPopover( {
 	const [ isResizing, setIsResizing ] = useState( false );
 
 	const resizableBoxProps = {
-		className: classnames( className, { 'is-resizing': isResizing } ),
+		className: clsx( className, { 'is-resizing': isResizing } ),
 		enable: RESIZABLE_BOX_ENABLE_OPTION,
 		onResizeStart: ( _event, _direction, elt ) => {
 			onResizeStart( elt.clientHeight );
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index 6aa10657ec6f2..189d658e955c9 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -123,10 +123,3 @@
 .color-block-support-panel__inner-wrapper > :not(.block-editor-tools-panel-color-gradient-settings__item) {
 	margin-top: $grid-unit-30;
 }
-
-
-// The frontend style.scss includes a min-height as an IE11 fix.
-// This fix causes extra spacing for the focus style in the editor, so we omit it here.
-.wp-block-cover::after {
-	min-height: auto;
-}
diff --git a/packages/block-library/src/cover/overlay-color-settings.native.js b/packages/block-library/src/cover/overlay-color-settings.native.js
index 7a68e207ffb27..a8acf8bf11b10 100644
--- a/packages/block-library/src/cover/overlay-color-settings.native.js
+++ b/packages/block-library/src/cover/overlay-color-settings.native.js
@@ -12,9 +12,9 @@ import {
 	getGradientValueBySlug,
 	getGradientSlugByValue,
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
+	useMobileGlobalStylesColors,
 } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
-import { useMobileGlobalStylesColors } from '@wordpress/components';
 
 function OverlayColorSettings( {
 	overlayColor,
diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
index 680e92a5f9177..f4ee486fb99a7 100644
--- a/packages/block-library/src/cover/save.js
+++ b/packages/block-library/src/cover/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -80,7 +80,7 @@ export default function save( { attributes } ) {
 
 	const backgroundPosition = mediaPosition( focalPoint );
 
-	const classes = classnames(
+	const classes = clsx(
 		{
 			'is-light': ! isDark,
 			'has-parallax': hasParallax,
@@ -91,7 +91,7 @@ export default function save( { attributes } ) {
 		getPositionClassName( contentPosition )
 	);
 
-	const imgClasses = classnames(
+	const imgClasses = clsx(
 		'wp-block-cover__image-background',
 		id ? `wp-image-${ id }` : null,
 		{
@@ -106,7 +106,7 @@ export default function save( { attributes } ) {
 		<Tag { ...useBlockProps.save( { className: classes, style } ) }>
 			<span
 				aria-hidden="true"
-				className={ classnames(
+				className={ clsx(
 					'wp-block-cover__background',
 					overlayColorClass,
 					dimRatioToClass( dimRatio ),
@@ -146,7 +146,7 @@ export default function save( { attributes } ) {
 				) ) }
 			{ isVideoBackground && url && (
 				<video
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__video-background',
 						'intrinsic-ignore'
 					) }
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index d14f606fc0226..41b3acf1833fc 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -1,11 +1,7 @@
-// Lowest specificity styles are used to ensure that the default styles for the cover block can be overridden by global styles.
-:where(.wp-block-cover-image, .wp-block-cover) {
-	min-height: 430px;
-	padding: 1em;
-}
-
 .wp-block-cover-image,
 .wp-block-cover {
+	min-height: 430px;
+	padding: 1em;
 	position: relative;
 	background-position: center center;
 	display: flex;
@@ -91,20 +87,6 @@
 		width: 100%;
 	}
 
-	// Using flexbox without an assigned height property breaks vertical center alignment in IE11.
-	// Appending an empty ::after element tricks IE11 into giving the cover image an implicit height, which sidesteps this issue.
-	&::after {
-		display: block;
-		content: "";
-		font-size: 0;
-		min-height: inherit;
-
-		// IE doesn't support flex so omit that.
-		@supports (position: sticky) {
-			content: none;
-		}
-	}
-
 	// Aligned cover blocks should not use our global alignment rules
 	&.aligncenter,
 	&.alignleft,
@@ -120,18 +102,6 @@
 		/*rtl:raw: direction: rtl; */
 	}
 
-	p,
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		&:where(:not(.has-text-color)) {
-			color: inherit;
-		}
-	}
-
 	// Position: Top
 	&.is-position-top-left {
 		align-items: flex-start;
@@ -314,3 +284,15 @@ section.wp-block-cover-image > h2,
 :where(.wp-block-cover-image.is-light:not(.has-text-color)) {
 	color: $black;
 }
+
+:root {
+	:where(.wp-block-cover p:not(.has-text-color)),
+	:where(.wp-block-cover h1:not(.has-text-color)),
+	:where(.wp-block-cover h2:not(.has-text-color)),
+	:where(.wp-block-cover h3:not(.has-text-color)),
+	:where(.wp-block-cover h4:not(.has-text-color)),
+	:where(.wp-block-cover h5:not(.has-text-color)),
+	:where(.wp-block-cover h6:not(.has-text-color)) {
+		color: inherit;
+	}
+}
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index 0bca3e23028c5..c43137c632b73 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -1,7 +1,6 @@
 @import "./archives/editor.scss";
 @import "./audio/editor.scss";
 @import "./avatar/editor.scss";
-@import "./block/editor.scss";
 @import "./button/editor.scss";
 @import "./buttons/editor.scss";
 @import "./categories/editor.scss";
diff --git a/packages/block-library/src/embed/deprecated.js b/packages/block-library/src/embed/deprecated.js
index afa691ecb64e2..2b55a87a0015b 100644
--- a/packages/block-library/src/embed/deprecated.js
+++ b/packages/block-library/src/embed/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -26,7 +26,7 @@ const v2 = {
 			return null;
 		}
 
-		const className = classnames( 'wp-block-embed', {
+		const className = clsx( 'wp-block-embed', {
 			[ `is-type-${ type }` ]: type,
 			[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
 			[ `wp-block-embed-${ providerNameSlug }` ]: providerNameSlug,
@@ -52,7 +52,7 @@ const v1 = {
 			return null;
 		}
 
-		const embedClassName = classnames( 'wp-block-embed', {
+		const embedClassName = clsx( 'wp-block-embed', {
 			[ `is-type-${ type }` ]: type,
 			[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
 		} );
diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js
index f386799be7e9d..12265883d6963 100644
--- a/packages/block-library/src/embed/edit.js
+++ b/packages/block-library/src/embed/edit.js
@@ -18,7 +18,7 @@ import EmbedPreview from './embed-preview';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -249,7 +249,7 @@ const EmbedEdit = ( props ) => {
 		allowResponsive,
 		className: classFromPreview,
 	} = getMergedAttributes();
-	const className = classnames( classFromPreview, props.className );
+	const className = clsx( classFromPreview, props.className );
 
 	return (
 		<>
diff --git a/packages/block-library/src/embed/edit.native.js b/packages/block-library/src/embed/edit.native.js
index a04e49fbd6d54..2144d2f2eba72 100644
--- a/packages/block-library/src/embed/edit.native.js
+++ b/packages/block-library/src/embed/edit.native.js
@@ -19,7 +19,7 @@ import EmbedLinkSettings from './embed-link-settings';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -246,7 +246,7 @@ const EmbedEdit = ( props ) => {
 		allowResponsive,
 		className: classFromPreview,
 	} = getMergedAttributes();
-	const className = classnames( classFromPreview, props.className );
+	const className = clsx( classFromPreview, props.className );
 
 	const isProviderPreviewable =
 		PREVIEWABLE_PROVIDERS.includes( providerNameSlug ) ||
diff --git a/packages/block-library/src/embed/embed-no-preview.native.js b/packages/block-library/src/embed/embed-no-preview.native.js
index cac8c5d1a4c10..de97ca73a1618 100644
--- a/packages/block-library/src/embed/embed-no-preview.native.js
+++ b/packages/block-library/src/embed/embed-no-preview.native.js
@@ -124,7 +124,7 @@ const EmbedNoPreview = ( {
 	const embedNoProviderPreview = (
 		<>
 			<TouchableWithoutFeedback
-				accessibilityRole={ 'button' }
+				accessibilityRole="button"
 				accessibilityHint={ previewButtonA11yHint }
 				disabled={ ! isSelected }
 				onPress={ onPressContainer }
@@ -145,7 +145,7 @@ const EmbedNoPreview = ( {
 					<TouchableOpacity
 						accessibilityHint={ __( 'Tap here to show help' ) }
 						accessibilityLabel={ __( 'Help button' ) }
-						accessibilityRole={ 'button' }
+						accessibilityRole="button"
 						disabled={ ! isSelected }
 						onPress={ onPressHelp }
 						style={ helpIconStyle }
diff --git a/packages/block-library/src/embed/embed-placeholder.native.js b/packages/block-library/src/embed/embed-placeholder.native.js
index 35b71b3ab988e..9d0dfff3cf284 100644
--- a/packages/block-library/src/embed/embed-placeholder.native.js
+++ b/packages/block-library/src/embed/embed-placeholder.native.js
@@ -125,7 +125,7 @@ const EmbedPlaceholder = ( {
 						</Text>
 						<TouchableOpacity
 							activeOpacity={ 0.5 }
-							accessibilityRole={ 'button' }
+							accessibilityRole="button"
 							accessibilityHint={ __(
 								'Double tap to view embed options.'
 							) }
@@ -155,7 +155,7 @@ const EmbedPlaceholder = ( {
 						</View>
 						<TouchableOpacity
 							activeOpacity={ 0.5 }
-							accessibilityRole={ 'button' }
+							accessibilityRole="button"
 							accessibilityHint={ __(
 								'Double tap to add a link.'
 							) }
diff --git a/packages/block-library/src/embed/embed-preview.js b/packages/block-library/src/embed/embed-preview.js
index 017fac72f6637..be74f2f627a10 100644
--- a/packages/block-library/src/embed/embed-preview.js
+++ b/packages/block-library/src/embed/embed-preview.js
@@ -6,7 +6,7 @@ import { getPhotoHtml } from './util';
 /**
  * External dependencies
  */
-import classnames from 'classnames/dedupe';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -82,7 +82,7 @@ class EmbedPreview extends Component {
 			__( 'Embedded content from %s' ),
 			parsedHostBaseUrl
 		);
-		const sandboxClassnames = classnames(
+		const sandboxClassnames = clsx(
 			type,
 			className,
 			'wp-block-embed__wrapper'
@@ -116,7 +116,7 @@ class EmbedPreview extends Component {
 
 		return (
 			<figure
-				className={ classnames( className, 'wp-block-embed', {
+				className={ clsx( className, 'wp-block-embed', {
 					'is-type-video': 'video' === type,
 				} ) }
 			>
diff --git a/packages/block-library/src/embed/embed-preview.native.js b/packages/block-library/src/embed/embed-preview.native.js
index f4baf97871059..d692b6cd58563 100644
--- a/packages/block-library/src/embed/embed-preview.native.js
+++ b/packages/block-library/src/embed/embed-preview.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { TouchableWithoutFeedback } from 'react-native';
-import classnames from 'classnames/dedupe';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -86,7 +86,7 @@ const EmbedPreview = ( {
 		__( 'Embedded content from %s' ),
 		parsedHostBaseUrl
 	);
-	const sandboxClassnames = classnames(
+	const sandboxClassnames = clsx(
 		type,
 		className,
 		'wp-block-embed__wrapper'
diff --git a/packages/block-library/src/embed/icons.js b/packages/block-library/src/embed/icons.js
index 21a3b20ae278a..2e9386373f083 100644
--- a/packages/block-library/src/embed/icons.js
+++ b/packages/block-library/src/embed/icons.js
@@ -178,3 +178,12 @@ export const embedPocketCastsIcon = {
 		</SVG>
 	),
 };
+
+export const embedBlueskyIcon = (
+	<SVG viewBox="0 0 24 24">
+		<Path
+			fill="#0a7aff"
+			d="M6.3,4.2c2.3,1.7,4.8,5.3,5.7,7.2.9-1.9,3.4-5.4,5.7-7.2,1.7-1.3,4.3-2.2,4.3.9s-.4,5.2-.6,5.9c-.7,2.6-3.3,3.2-5.6,2.8,4,.7,5.1,3,2.9,5.3-5,5.2-6.7-2.8-6.7-2.8,0,0-1.7,8-6.7,2.8-2.2-2.3-1.2-4.6,2.9-5.3-2.3.4-4.9-.3-5.6-2.8-.2-.7-.6-5.3-.6-5.9,0-3.1,2.7-2.1,4.3-.9h0Z"
+		/>
+	</SVG>
+);
diff --git a/packages/block-library/src/embed/save.js b/packages/block-library/src/embed/save.js
index cb52b22b9b744..8f825d5cabc04 100644
--- a/packages/block-library/src/embed/save.js
+++ b/packages/block-library/src/embed/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames/dedupe';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -19,7 +19,7 @@ export default function save( { attributes } ) {
 		return null;
 	}
 
-	const className = classnames( 'wp-block-embed', {
+	const className = clsx( 'wp-block-embed', {
 		[ `is-type-${ type }` ]: type,
 		[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
 		[ `wp-block-embed-${ providerNameSlug }` ]: providerNameSlug,
diff --git a/packages/block-library/src/embed/theme.scss b/packages/block-library/src/embed/theme.scss
index 57ece1dcd43ca..e809a783b9c81 100644
--- a/packages/block-library/src/embed/theme.scss
+++ b/packages/block-library/src/embed/theme.scss
@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-:where(.wp-block-embed) {
+.wp-block-embed {
 	margin: 0 0 1em 0;
 }
diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js
index 01596f4f22822..eae45cc397e7b 100644
--- a/packages/block-library/src/embed/util.js
+++ b/packages/block-library/src/embed/util.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames/dedupe';
+import clsx from 'clsx';
 import memoize from 'memize';
 
 /**
@@ -23,6 +23,7 @@ import { ASPECT_RATIOS, WP_EMBED_TYPE } from './constants';
 import { unlock } from '../lock-unlock';
 
 const { name: DEFAULT_EMBED_BLOCK } = metadata;
+const { kebabCase } = unlock( componentsPrivateApis );
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
 
@@ -177,17 +178,21 @@ export const removeAspectRatioClasses = ( existingClassNames ) => {
 	if ( ! existingClassNames ) {
 		// Avoids extraneous work and also, by returning the same value as
 		// received, ensures the post is not dirtied by a change of the block
-		// attribute from `undefined` to an emtpy string.
+		// attribute from `undefined` to an empty string.
 		return existingClassNames;
 	}
 	const aspectRatioClassNames = ASPECT_RATIOS.reduce(
 		( accumulator, { className } ) => {
-			accumulator[ className ] = false;
+			accumulator.push( className );
 			return accumulator;
 		},
-		{ 'wp-has-aspect-ratio': false }
+		[ 'wp-has-aspect-ratio' ]
 	);
-	return classnames( existingClassNames, aspectRatioClassNames );
+	let outputClassNames = existingClassNames;
+	for ( const className of aspectRatioClassNames ) {
+		outputClassNames = outputClassNames.replace( className, '' );
+	}
+	return outputClassNames.trim();
 };
 
 /**
@@ -230,7 +235,7 @@ export function getClassNames(
 					return removeAspectRatioClasses( existingClassNames );
 				}
 				// Close aspect ratio match found.
-				return classnames(
+				return clsx(
 					removeAspectRatioClasses( existingClassNames ),
 					potentialRatio.className,
 					'wp-has-aspect-ratio'
@@ -284,7 +289,6 @@ export const getAttributesFromPreview = memoize(
 		// If we got a provider name from the API, use it for the slug, otherwise we use the title,
 		// because not all embed code gives us a provider name.
 		const { html, provider_name: providerName } = preview;
-		const { kebabCase } = unlock( componentsPrivateApis );
 		const providerNameSlug = kebabCase(
 			( providerName || title ).toLowerCase()
 		);
diff --git a/packages/block-library/src/embed/variations.js b/packages/block-library/src/embed/variations.js
index 6083ea1adc90b..e770c12ddfd97 100644
--- a/packages/block-library/src/embed/variations.js
+++ b/packages/block-library/src/embed/variations.js
@@ -27,6 +27,7 @@ import {
 	embedPinterestIcon,
 	embedWolframIcon,
 	embedPocketCastsIcon,
+	embedBlueskyIcon,
 } from './icons';
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
@@ -360,6 +361,14 @@ const variations = [
 		patterns: [ /^https?:\/\/(www\.)?wolframcloud\.com\/obj\/.+/i ],
 		attributes: { providerNameSlug: 'wolfram-cloud', responsive: true },
 	},
+	{
+		name: 'bluesky',
+		title: 'Bluesky',
+		icon: embedBlueskyIcon,
+		description: __( 'Embed a Bluesky post.' ),
+		patterns: [ /^https?:\/\/bsky\.app\/profile\/.+\/post\/.+/i ],
+		attributes: { providerNameSlug: 'bluesky' },
+	},
 ];
 
 /**
diff --git a/packages/block-library/src/file/deprecated.js b/packages/block-library/src/file/deprecated.js
index a2dc67644fac9..51b3704205b38 100644
--- a/packages/block-library/src/file/deprecated.js
+++ b/packages/block-library/src/file/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -127,7 +127,7 @@ const v3 = {
 					{ showDownloadButton && (
 						<a
 							href={ href }
-							className={ classnames(
+							className={ clsx(
 								'wp-block-file__button',
 								__experimentalGetElementClassName( 'button' )
 							) }
diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
index 31302b7e49169..42bb5fd7cf684 100644
--- a/packages/block-library/src/file/edit.js
+++ b/packages/block-library/src/file/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -165,7 +165,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const attachmentPage = media && media.link;
 
 	const blockProps = useBlockProps( {
-		className: classnames(
+		className: clsx(
 			isBlobURL( href ) && getAnimateClassName( { type: 'loading' } ),
 			{
 				'is-transient': isBlobURL( href ),
@@ -258,7 +258,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 						) }
 					</ResizableBox>
 				) }
-				<div className={ 'wp-block-file__content-wrapper' }>
+				<div className="wp-block-file__content-wrapper">
 					<RichText
 						identifier="fileName"
 						tagName="a"
@@ -273,17 +273,13 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 						href={ textLinkHref }
 					/>
 					{ showDownloadButton && (
-						<div
-							className={
-								'wp-block-file__button-richtext-wrapper'
-							}
-						>
+						<div className="wp-block-file__button-richtext-wrapper">
 							{ /* Using RichText here instead of PlainText so that it can be styled like a button. */ }
 							<RichText
 								identifier="downloadButtonText"
 								tagName="div" // Must be block-level or else cursor disappears.
 								aria-label={ __( 'Download button text' ) }
-								className={ classnames(
+								className={ clsx(
 									'wp-block-file__button',
 									__experimentalGetElementClassName(
 										'button'
diff --git a/packages/block-library/src/file/save.js b/packages/block-library/src/file/save.js
index 27f6633370a35..34b1046d6d2bb 100644
--- a/packages/block-library/src/file/save.js
+++ b/packages/block-library/src/file/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -69,7 +69,7 @@ export default function save( { attributes } ) {
 				{ showDownloadButton && (
 					<a
 						href={ href }
-						className={ classnames(
+						className={ clsx(
 							'wp-block-file__button',
 							__experimentalGetElementClassName( 'button' )
 						) }
diff --git a/packages/block-library/src/form-input/deprecated.js b/packages/block-library/src/form-input/deprecated.js
index bb1fdf6e40204..9cd49d5b0011b 100644
--- a/packages/block-library/src/form-input/deprecated.js
+++ b/packages/block-library/src/form-input/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import removeAccents from 'remove-accents';
 
 /**
@@ -101,7 +101,7 @@ const v1 = {
 			...colorProps.style,
 		};
 
-		const inputClasses = classNames(
+		const inputClasses = clsx(
 			'wp-block-form-input__input',
 			colorProps.className,
 			borderProps.className
@@ -115,7 +115,7 @@ const v1 = {
 		/* eslint-disable jsx-a11y/label-has-associated-control */
 		return (
 			<label
-				className={ classNames( 'wp-block-form-input__label', {
+				className={ clsx( 'wp-block-form-input__label', {
 					'is-label-inline': inlineLabel,
 				} ) }
 			>
diff --git a/packages/block-library/src/form-input/edit.js b/packages/block-library/src/form-input/edit.js
index 6b721c17fa552..97115d86fb370 100644
--- a/packages/block-library/src/form-input/edit.js
+++ b/packages/block-library/src/form-input/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -83,7 +83,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 				{ controls }
 				<input
 					type="hidden"
-					className={ classNames(
+					className={ clsx(
 						className,
 						'wp-block-form-input__input',
 						colorProps.className,
@@ -103,7 +103,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 		<div { ...blockProps }>
 			{ controls }
 			<span
-				className={ classNames( 'wp-block-form-input__label', {
+				className={ clsx( 'wp-block-form-input__label', {
 					'is-label-inline': inlineLabel || 'checkbox' === type,
 				} ) }
 			>
@@ -120,7 +120,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 				/>
 				<TagName
 					type={ 'textarea' === type ? undefined : type }
-					className={ classNames(
+					className={ clsx(
 						className,
 						'wp-block-form-input__input',
 						colorProps.className,
diff --git a/packages/block-library/src/form-input/save.js b/packages/block-library/src/form-input/save.js
index d8f5852c2ab90..c408e06923ca9 100644
--- a/packages/block-library/src/form-input/save.js
+++ b/packages/block-library/src/form-input/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import removeAccents from 'remove-accents';
 
 /**
@@ -46,7 +46,7 @@ export default function save( { attributes } ) {
 		...colorProps.style,
 	};
 
-	const inputClasses = classNames(
+	const inputClasses = clsx(
 		'wp-block-form-input__input',
 		colorProps.className,
 		borderProps.className
@@ -63,7 +63,7 @@ export default function save( { attributes } ) {
 		<div { ...blockProps }>
 			{ /* eslint-disable jsx-a11y/label-has-associated-control */ }
 			<label
-				className={ classNames( 'wp-block-form-input__label', {
+				className={ clsx( 'wp-block-form-input__label', {
 					'is-label-inline': inlineLabel,
 				} ) }
 			>
diff --git a/packages/block-library/src/form-submission-notification/edit.js b/packages/block-library/src/form-submission-notification/edit.js
index 4425a4d9147df..01a0c589584dd 100644
--- a/packages/block-library/src/form-submission-notification/edit.js
+++ b/packages/block-library/src/form-submission-notification/edit.js
@@ -13,7 +13,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 const TEMPLATE = [
 	[
@@ -29,7 +29,7 @@ const TEMPLATE = [
 const Edit = ( { attributes, clientId } ) => {
 	const { type } = attributes;
 	const blockProps = useBlockProps( {
-		className: classnames( 'wp-block-form-submission-notification', {
+		className: clsx( 'wp-block-form-submission-notification', {
 			[ `form-notification-type-${ type }` ]: type,
 		} ),
 	} );
diff --git a/packages/block-library/src/form-submission-notification/save.js b/packages/block-library/src/form-submission-notification/save.js
index 7b3c6c895c192..d2578b85f7eb6 100644
--- a/packages/block-library/src/form-submission-notification/save.js
+++ b/packages/block-library/src/form-submission-notification/save.js
@@ -6,7 +6,7 @@ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export default function save( { attributes } ) {
 	const { type } = attributes;
@@ -15,12 +15,9 @@ export default function save( { attributes } ) {
 		<div
 			{ ...useInnerBlocksProps.save(
 				useBlockProps.save( {
-					className: classnames(
-						'wp-block-form-submission-notification',
-						{
-							[ `form-notification-type-${ type }` ]: type,
-						}
-					),
+					className: clsx( 'wp-block-form-submission-notification', {
+						[ `form-notification-type-${ type }` ]: type,
+					} ),
 				} )
 			) }
 		/>
diff --git a/packages/block-library/src/form-submit-button/save.js b/packages/block-library/src/form-submit-button/save.js
index ba361ebe9db20..eb703c4a0a4c5 100644
--- a/packages/block-library/src/form-submit-button/save.js
+++ b/packages/block-library/src/form-submit-button/save.js
@@ -3,12 +3,11 @@
  */
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 
-const Save = () => {
+export default function save() {
 	const blockProps = useBlockProps.save();
 	return (
 		<div className="wp-block-form-submit-wrapper" { ...blockProps }>
 			<InnerBlocks.Content />
 		</div>
 	);
-};
-export default Save;
+}
diff --git a/packages/block-library/src/form/save.js b/packages/block-library/src/form/save.js
index a824fc076d2ac..daeedd3ef67e8 100644
--- a/packages/block-library/src/form/save.js
+++ b/packages/block-library/src/form/save.js
@@ -3,7 +3,7 @@
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
-const Save = ( { attributes } ) => {
+export default function save( { attributes } ) {
 	const blockProps = useBlockProps.save();
 	const { submissionMethod } = attributes;
 
@@ -16,5 +16,4 @@ const Save = ( { attributes } ) => {
 			<InnerBlocks.Content />
 		</form>
 	);
-};
-export default Save;
+}
diff --git a/packages/block-library/src/freeform/edit.js b/packages/block-library/src/freeform/edit.js
index c41a78ca5c042..9e432992a3005 100644
--- a/packages/block-library/src/freeform/edit.js
+++ b/packages/block-library/src/freeform/edit.js
@@ -83,12 +83,15 @@ function ClassicEdit( {
 		}
 
 		const editor = window.tinymce.get( `editor-${ clientId }` );
-		const currentContent = editor?.getContent();
+		if ( ! editor ) {
+			return;
+		}
 
+		const currentContent = editor.getContent();
 		if ( currentContent !== content ) {
 			editor.setContent( content || '' );
 		}
-	}, [ content ] );
+	}, [ clientId, content ] );
 
 	useEffect( () => {
 		const { baseURL, suffix } = window.wpEditorL10n.tinymce;
@@ -227,6 +230,7 @@ function ClassicEdit( {
 				onReadyStateChange
 			);
 			wp.oldEditor.remove( `editor-${ clientId }` );
+			didMount.current = false;
 		};
 	}, [] );
 
diff --git a/packages/block-library/src/gallery/deprecated.js b/packages/block-library/src/gallery/deprecated.js
index 89df39d48ab1d..722890c0de013 100644
--- a/packages/block-library/src/gallery/deprecated.js
+++ b/packages/block-library/src/gallery/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -228,7 +228,7 @@ const v7 = {
 	save( { attributes } ) {
 		const { caption, columns, imageCrop } = attributes;
 
-		const className = classnames( 'has-nested-images', {
+		const className = clsx( 'has-nested-images', {
 			[ `columns-${ columns }` ]: columns !== undefined,
 			[ `columns-default` ]: columns === undefined,
 			'is-cropped': imageCrop,
@@ -1061,7 +1061,7 @@ const v1 = {
 			imageCrop,
 			linkTo,
 		} = attributes;
-		const className = classnames( `columns-${ columns }`, {
+		const className = clsx( `columns-${ columns }`, {
 			alignnone: align === 'none',
 			'is-cropped': imageCrop,
 		} );
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index 2eff9a4f2143b..0b0b378889070 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -488,7 +488,7 @@ function GalleryEdit( props ) {
 	);
 
 	const blockProps = useBlockProps( {
-		className: classnames( className, 'has-nested-images' ),
+		className: clsx( className, 'has-nested-images' ),
 	} );
 
 	const nativeInnerBlockProps = Platform.isNative && {
@@ -580,11 +580,11 @@ function GalleryEdit( props ) {
 						/>
 					) }
 					{ Platform.isWeb && ! imageSizeOptions && hasImageIds && (
-						<BaseControl className={ 'gallery-image-sizes' }>
+						<BaseControl className="gallery-image-sizes">
 							<BaseControl.VisualLabel>
 								{ __( 'Resolution' ) }
 							</BaseControl.VisualLabel>
-							<View className={ 'gallery-image-sizes__loading' }>
+							<View className="gallery-image-sizes__loading">
 								<Spinner />
 								{ __( 'Loading options…' ) }
 							</View>
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index ea6fa8836a3a4..9efaf88e5acc7 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -1,4 +1,7 @@
-:where(figure.wp-block-gallery) {
+// Adding `figure` to the selector increases the specificity above the global
+// styles specificity, which is levelled at 0-1-0. We should figure out why
+// `figure` is needed.
+:root :where(figure.wp-block-gallery) {
 	// Override the default list style type _only in the editor_
 	// to avoid :not() selector specificity issues.
 	// See https://github.com/WordPress/gutenberg/pull/10358
diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
index 10c05eb8cc401..96b70cb87a70c 100644
--- a/packages/block-library/src/gallery/gallery.js
+++ b/packages/block-library/src/gallery/gallery.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ export default function Gallery( props ) {
 	return (
 		<figure
 			{ ...blockProps }
-			className={ classnames(
+			className={ clsx(
 				blockProps.className,
 				layoutClassNames,
 				'blocks-gallery-grid',
diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js
index 66253001e6418..c57f8ef3b7350 100644
--- a/packages/block-library/src/gallery/save.js
+++ b/packages/block-library/src/gallery/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -26,7 +26,7 @@ export default function saveWithInnerBlocks( { attributes } ) {
 
 	const { caption, columns, imageCrop } = attributes;
 
-	const className = classnames( 'has-nested-images', {
+	const className = clsx( 'has-nested-images', {
 		[ `columns-${ columns }` ]: columns !== undefined,
 		[ `columns-default` ]: columns === undefined,
 		'is-cropped': imageCrop,
@@ -40,7 +40,7 @@ export default function saveWithInnerBlocks( { attributes } ) {
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
 					tagName="figcaption"
-					className={ classnames(
+					className={ clsx(
 						'blocks-gallery-caption',
 						__experimentalGetElementClassName( 'caption' )
 					) }
diff --git a/packages/block-library/src/gallery/test/helpers.native.js b/packages/block-library/src/gallery/test/helpers.native.js
index 0535e092a11d8..6c97c2d82fcda 100644
--- a/packages/block-library/src/gallery/test/helpers.native.js
+++ b/packages/block-library/src/gallery/test/helpers.native.js
@@ -65,9 +65,9 @@ export const initializeWithGalleryBlock = async ( {
 /**
  * Gets a gallery item within a Gallery block.
  *
- * @param {HTMLElement} galleryBlock Gallery block instance.
- * @param {number}      rowIndex     Row position within the Gallery block.
- * @return {HTMLElement} Gallery item.
+ * @param {import('react-test-renderer').ReactTestInstance} galleryBlock Gallery block instance.
+ * @param {number}                                          rowIndex     Row position within the Gallery block.
+ * @return {import('react-test-renderer').ReactTestInstance} Gallery item.
  */
 export const getGalleryItem = ( galleryBlock, rowIndex ) =>
 	getInnerBlock( galleryBlock, 'Image', { rowIndex } );
diff --git a/packages/block-library/src/gallery/v1/gallery-button.native.js b/packages/block-library/src/gallery/v1/gallery-button.native.js
index 8804e99cf2e7e..4dc9abd9753ee 100644
--- a/packages/block-library/src/gallery/v1/gallery-button.native.js
+++ b/packages/block-library/src/gallery/v1/gallery-button.native.js
@@ -35,7 +35,7 @@ export function Button( props ) {
 			style={ buttonStyle }
 			activeOpacity={ 0.7 }
 			accessibilityLabel={ accessibilityLabel }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 			onPress={ onClick }
 			disabled={ isDisabled }
 		>
diff --git a/packages/block-library/src/gallery/v1/gallery-image.js b/packages/block-library/src/gallery/v1/gallery-image.js
index c9c2bf6cb5bd1..5384944b2335d 100644
--- a/packages/block-library/src/gallery/v1/gallery-image.js
+++ b/packages/block-library/src/gallery/v1/gallery-image.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -192,7 +192,7 @@ class GalleryImage extends Component {
 			/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
 		);
 
-		const className = classnames( {
+		const className = clsx( {
 			'is-selected': isSelected,
 			'is-transient': isBlobURL( url ),
 		} );
@@ -222,6 +222,8 @@ class GalleryImage extends Component {
 						onClick={ isFirstItem ? undefined : onMoveBackward }
 						label={ __( 'Move image backward' ) }
 						aria-disabled={ isFirstItem }
+						// Disable reason: Truly disable when image is not selected.
+						// eslint-disable-next-line no-restricted-syntax
 						disabled={ ! isSelected }
 					/>
 					<Button
@@ -229,6 +231,8 @@ class GalleryImage extends Component {
 						onClick={ isLastItem ? undefined : onMoveForward }
 						label={ __( 'Move image forward' ) }
 						aria-disabled={ isLastItem }
+						// Disable reason: Truly disable when image is not selected.
+						// eslint-disable-next-line no-restricted-syntax
 						disabled={ ! isSelected }
 					/>
 				</ButtonGroup>
@@ -237,12 +241,16 @@ class GalleryImage extends Component {
 						icon={ edit }
 						onClick={ this.onEdit }
 						label={ __( 'Replace image' ) }
+						// Disable reason: Truly disable when image is not selected.
+						// eslint-disable-next-line no-restricted-syntax
 						disabled={ ! isSelected }
 					/>
 					<Button
 						icon={ closeSmall }
 						onClick={ onRemove }
 						label={ __( 'Remove image' ) }
+						// Disable reason: Truly disable when image is not selected.
+						// eslint-disable-next-line no-restricted-syntax
 						disabled={ ! isSelected }
 					/>
 				</ButtonGroup>
diff --git a/packages/block-library/src/gallery/v1/gallery-image.native.js b/packages/block-library/src/gallery/v1/gallery-image.native.js
index b887ca0bbfe04..fc07a209d8c6a 100644
--- a/packages/block-library/src/gallery/v1/gallery-image.native.js
+++ b/packages/block-library/src/gallery/v1/gallery-image.native.js
@@ -310,7 +310,7 @@ class GalleryImage extends Component {
 				onPress={ this.onMediaPressed }
 				accessible={ ! isSelected } // We need only child views to be accessible after the selection.
 				accessibilityLabel={ this.accessibilityLabelImageContainer() } // if we don't set this explicitly it reads system provided accessibilityLabels of all child components and those include pretty technical words which don't make sense
-				accessibilityRole={ 'imagebutton' } // this makes VoiceOver to read a description of image provided by system on iOS and lets user know this is a button which conveys the message of tappablity
+				accessibilityRole="imagebutton" // this makes VoiceOver to read a description of image provided by system on iOS and lets user know this is a button which conveys the message of tappablity
 			>
 				<View style={ containerStyle }>
 					<MediaUploadProgress
diff --git a/packages/block-library/src/gallery/v1/gallery.js b/packages/block-library/src/gallery/v1/gallery.js
index 7fc587f27911a..1af81bbc16b50 100644
--- a/packages/block-library/src/gallery/v1/gallery.js
+++ b/packages/block-library/src/gallery/v1/gallery.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -48,7 +48,7 @@ export const Gallery = ( props ) => {
 	return (
 		<figure
 			{ ...blockProps }
-			className={ classnames( blockProps.className, {
+			className={ clsx( blockProps.className, {
 				[ `align${ align }` ]: align,
 				[ `columns-${ columns }` ]: columns,
 				'is-cropped': imageCrop,
@@ -97,7 +97,7 @@ export const Gallery = ( props ) => {
 			<RichTextVisibilityHelper
 				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
 				tagName="figcaption"
-				className={ classnames(
+				className={ clsx(
 					'blocks-gallery-caption',
 					__experimentalGetElementClassName( 'caption' )
 				) }
diff --git a/packages/block-library/src/gallery/v1/save.js b/packages/block-library/src/gallery/v1/save.js
index 3c20f0c7c30bf..386783e019806 100644
--- a/packages/block-library/src/gallery/v1/save.js
+++ b/packages/block-library/src/gallery/v1/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -69,7 +69,7 @@ export default function saveV1( { attributes } ) {
 								{ ! RichText.isEmpty( image.caption ) && (
 									<RichText.Content
 										tagName="figcaption"
-										className={ classnames(
+										className={ clsx(
 											'blocks-gallery-item__caption',
 											__experimentalGetElementClassName(
 												'caption'
@@ -86,7 +86,7 @@ export default function saveV1( { attributes } ) {
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
 					tagName="figcaption"
-					className={ classnames(
+					className={ clsx(
 						'blocks-gallery-caption',
 						__experimentalGetElementClassName( 'caption' )
 					) }
diff --git a/packages/block-library/src/group/deprecated.js b/packages/block-library/src/group/deprecated.js
index 4a98de433c529..fcc2b249d2229 100644
--- a/packages/block-library/src/group/deprecated.js
+++ b/packages/block-library/src/group/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -201,7 +201,7 @@ const deprecated = [
 				backgroundColor
 			);
 			const textClass = getColorClassName( 'color', textColor );
-			const className = classnames( backgroundClass, textClass, {
+			const className = clsx( backgroundClass, textClass, {
 				'has-text-color': textColor || customTextColor,
 				'has-background': backgroundColor || customBackgroundColor,
 			} );
@@ -257,7 +257,7 @@ const deprecated = [
 				backgroundColor
 			);
 			const textClass = getColorClassName( 'color', textColor );
-			const className = classnames( backgroundClass, {
+			const className = clsx( backgroundClass, {
 				'has-text-color': textColor || customTextColor,
 				'has-background': backgroundColor || customBackgroundColor,
 			} );
@@ -301,7 +301,7 @@ const deprecated = [
 				'background-color',
 				backgroundColor
 			);
-			const className = classnames( backgroundClass, {
+			const className = clsx( backgroundClass, {
 				'has-background': backgroundColor || customBackgroundColor,
 			} );
 
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index 076d7a1881085..a2926c89ae802 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -48,7 +48,8 @@
 
 	// Let the parent be selectable in the placeholder area.
 	pointer-events: none;
-	.block-editor-inserter {
+	.block-editor-inserter,
+	.block-editor-button-block-appender {
 		pointer-events: all;
 	}
 }
diff --git a/packages/block-library/src/heading/deprecated.js b/packages/block-library/src/heading/deprecated.js
index 6ea881acbc19f..a97415712bf07 100644
--- a/packages/block-library/src/heading/deprecated.js
+++ b/packages/block-library/src/heading/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -83,7 +83,7 @@ const v1 = {
 
 		const textClass = getColorClassName( 'color', textColor );
 
-		const className = classnames( {
+		const className = clsx( {
 			[ textClass ]: textClass,
 		} );
 
@@ -119,7 +119,7 @@ const v2 = {
 
 		const textClass = getColorClassName( 'color', textColor );
 
-		const className = classnames( {
+		const className = clsx( {
 			[ textClass ]: textClass,
 			[ `has-text-align-${ align }` ]: align,
 		} );
@@ -157,7 +157,7 @@ const v3 = {
 
 		const textClass = getColorClassName( 'color', textColor );
 
-		const className = classnames( {
+		const className = clsx( {
 			[ textClass ]: textClass,
 			'has-text-color': textColor || customTextColor,
 			[ `has-text-align-${ align }` ]: align,
@@ -200,7 +200,7 @@ const v4 = {
 		const { align, content, level } = attributes;
 		const TagName = 'h' + level;
 
-		const className = classnames( {
+		const className = clsx( {
 			[ `has-text-align-${ align }` ]: align,
 		} );
 
@@ -273,7 +273,7 @@ const v5 = {
 		const { textAlign, content, level } = attributes;
 		const TagName = 'h' + level;
 
-		const className = classnames( {
+		const className = clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} );
 
diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js
index c9743c1325a51..86ac776b9b16e 100644
--- a/packages/block-library/src/heading/edit.js
+++ b/packages/block-library/src/heading/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -35,7 +35,7 @@ function HeadingEdit( {
 	const { textAlign, content, level, placeholder, anchor } = attributes;
 	const tagName = 'h' + level;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 		style,
diff --git a/packages/block-library/src/heading/edit.native.js b/packages/block-library/src/heading/edit.native.js
index b7d1d17426443..0946fe5a5ad66 100644
--- a/packages/block-library/src/heading/edit.native.js
+++ b/packages/block-library/src/heading/edit.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -35,7 +35,7 @@ function HeadingEdit( {
 	const { textAlign, content, level, placeholder, anchor } = attributes;
 	const tagName = 'h' + level;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 		style,
diff --git a/packages/block-library/src/heading/save.js b/packages/block-library/src/heading/save.js
index 181f40234444e..8ae4fa6afd9f6 100644
--- a/packages/block-library/src/heading/save.js
+++ b/packages/block-library/src/heading/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,7 +12,7 @@ export default function save( { attributes } ) {
 	const { textAlign, content, level } = attributes;
 	const TagName = 'h' + level;
 
-	const className = classnames( {
+	const className = clsx( {
 		[ `has-text-align-${ textAlign }` ]: textAlign,
 	} );
 
diff --git a/packages/block-library/src/heading/test/__snapshots__/index.native.js.snap b/packages/block-library/src/heading/test/__snapshots__/index.native.js.snap
index 220061bf9a86b..ceb77e2c8c7f0 100644
--- a/packages/block-library/src/heading/test/__snapshots__/index.native.js.snap
+++ b/packages/block-library/src/heading/test/__snapshots__/index.native.js.snap
@@ -12,6 +12,12 @@ exports[`Heading block inserts block 1`] = `
 <!-- /wp:heading -->"
 `;
 
+exports[`Heading block should keep the heading when there is an empty paragraph block before and backspace is pressed at the start 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">A quick brown fox jumps over the lazy dog.</h2>
+<!-- /wp:heading -->"
+`;
+
 exports[`Heading block should merge with an empty Paragraph block and keep being the Heading block 1`] = `
 "<!-- wp:heading -->
 <h2 class="wp-block-heading">A quick brown fox jumps over the lazy dog.</h2>
@@ -29,3 +35,9 @@ exports[`Heading block should set a text color 1`] = `
 <h2 class="wp-block-heading has-pale-pink-color has-text-color">A quick brown fox jumps over the lazy dog.</h2>
 <!-- /wp:heading -->"
 `;
+
+exports[`Heading block should transform to a paragraph block when pressing backspace at the beginning of the first heading block 1`] = `
+"<!-- wp:paragraph -->
+<p>A quick brown fox jumps over the lazy dog.</p>
+<!-- /wp:paragraph -->"
+`;
diff --git a/packages/block-library/src/heading/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/heading/test/__snapshots__/transforms.native.js.snap
index 4f6512b3f8662..c773f86307771 100644
--- a/packages/block-library/src/heading/test/__snapshots__/transforms.native.js.snap
+++ b/packages/block-library/src/heading/test/__snapshots__/transforms.native.js.snap
@@ -20,7 +20,7 @@ exports[`Heading block transforms to Group block 1`] = `
 
 exports[`Heading block transforms to List block 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Example text</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->"
diff --git a/packages/block-library/src/heading/test/index.native.js b/packages/block-library/src/heading/test/index.native.js
index 498ae6b3ea1d7..b8d93c32f5b4f 100644
--- a/packages/block-library/src/heading/test/index.native.js
+++ b/packages/block-library/src/heading/test/index.native.js
@@ -189,4 +189,69 @@ describe( 'Heading block', () => {
 		// Assert
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
+
+	it( 'should transform to a paragraph block when pressing backspace at the beginning of the first heading block', async () => {
+		// Arrange
+		await initializeEditor();
+
+		// Act
+		await addBlock( screen, 'Heading' );
+		const headingBlock = getBlock( screen, 'Heading' );
+		fireEvent.press( headingBlock );
+
+		const headingTextInput =
+			within( headingBlock ).getByPlaceholderText( 'Heading' );
+		typeInRichText(
+			headingTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 0, finalSelectionEnd: 0 }
+		);
+
+		fireEvent( headingTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should keep the heading when there is an empty paragraph block before and backspace is pressed at the start', async () => {
+		// Arrange
+		await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		fireEvent( paragraphTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+
+		await addBlock( screen, 'Heading' );
+		const headingBlock = getBlock( screen, 'Heading', { rowIndex: 2 } );
+		fireEvent.press( headingBlock );
+
+		const headingTextInput =
+			within( headingBlock ).getByPlaceholderText( 'Heading' );
+		typeInRichText(
+			headingTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 0, finalSelectionEnd: 0 }
+		);
+
+		fireEvent( headingTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
 } );
diff --git a/packages/block-library/src/home-link/edit.js b/packages/block-library/src/home-link/edit.js
index 4d13dd1939e4c..ec9ae2864e3d5 100644
--- a/packages/block-library/src/home-link/edit.js
+++ b/packages/block-library/src/home-link/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ export default function HomeEdit( { attributes, setAttributes, context } ) {
 
 	const { textColor, backgroundColor, style } = context;
 	const blockProps = useBlockProps( {
-		className: classnames( 'wp-block-navigation-item', {
+		className: clsx( 'wp-block-navigation-item', {
 			'has-text-color': !! textColor || !! style?.color?.text,
 			[ `has-${ textColor }-color` ]: !! textColor,
 			'has-background': !! backgroundColor || !! style?.color?.background,
diff --git a/packages/block-library/src/html/editor.scss b/packages/block-library/src/html/editor.scss
index d77b1e9bf5145..d3feef0381f72 100644
--- a/packages/block-library/src/html/editor.scss
+++ b/packages/block-library/src/html/editor.scss
@@ -13,5 +13,8 @@
 		box-sizing: border-box;
 		max-height: 250px;
 		@include editor-input-reset();
+		// HTML input is always LTR regardless of language.
+		/*rtl:ignore*/
+		direction: ltr;
 	}
 }
diff --git a/packages/block-library/src/image/deprecated.js b/packages/block-library/src/image/deprecated.js
index 8d1039696647a..135463a377131 100644
--- a/packages/block-library/src/image/deprecated.js
+++ b/packages/block-library/src/image/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -207,7 +207,7 @@ const v3 = {
 		const { url, alt, caption, align, href, width, height, id } =
 			attributes;
 
-		const classes = classnames( {
+		const classes = clsx( {
 			[ `align${ align }` ]: align,
 			'is-resized': width || height,
 		} );
@@ -329,7 +329,7 @@ const v4 = {
 
 		const newRel = ! rel ? undefined : rel;
 
-		const classes = classnames( {
+		const classes = clsx( {
 			[ `align${ align }` ]: align,
 			[ `size-${ sizeSlug }` ]: sizeSlug,
 			'is-resized': width || height,
@@ -499,7 +499,7 @@ const v5 = {
 
 		const newRel = ! rel ? undefined : rel;
 
-		const classes = classnames( {
+		const classes = clsx( {
 			[ `align${ align }` ]: align,
 			[ `size-${ sizeSlug }` ]: sizeSlug,
 			'is-resized': width || height,
@@ -681,7 +681,7 @@ const v6 = {
 		const newRel = ! rel ? undefined : rel;
 		const borderProps = getBorderClassesAndStyles( attributes );
 
-		const classes = classnames( {
+		const classes = clsx( {
 			[ `align${ align }` ]: align,
 			[ `size-${ sizeSlug }` ]: sizeSlug,
 			'is-resized': width || height,
@@ -691,7 +691,7 @@ const v6 = {
 					Object.keys( borderProps.style ).length > 0 ),
 		} );
 
-		const imageClasses = classnames( borderProps.className, {
+		const imageClasses = clsx( borderProps.className, {
 			[ `wp-image-${ id }` ]: !! id,
 		} );
 
@@ -883,7 +883,7 @@ const v7 = {
 		const newRel = ! rel ? undefined : rel;
 		const borderProps = getBorderClassesAndStyles( attributes );
 
-		const classes = classnames( {
+		const classes = clsx( {
 			[ `align${ align }` ]: align,
 			[ `size-${ sizeSlug }` ]: sizeSlug,
 			'is-resized': width || height,
@@ -893,7 +893,7 @@ const v7 = {
 					Object.keys( borderProps.style ).length > 0 ),
 		} );
 
-		const imageClasses = classnames( borderProps.className, {
+		const imageClasses = clsx( borderProps.className, {
 			[ `wp-image-${ id }` ]: !! id,
 		} );
 
@@ -1102,7 +1102,7 @@ const v8 = {
 		const newRel = ! rel ? undefined : rel;
 		const borderProps = getBorderClassesAndStyles( attributes );
 
-		const classes = classnames( {
+		const classes = clsx( {
 			[ `align${ align }` ]: align,
 			[ `size-${ sizeSlug }` ]: sizeSlug,
 			'is-resized': width || height,
@@ -1112,7 +1112,7 @@ const v8 = {
 					Object.keys( borderProps.style ).length > 0 ),
 		} );
 
-		const imageClasses = classnames( borderProps.className, {
+		const imageClasses = clsx( borderProps.className, {
 			[ `wp-image-${ id }` ]: !! id,
 		} );
 
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index 750a7e64a695c..673ab44a8c28a 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -103,6 +103,7 @@ export function ImageEdit( {
 	onReplace,
 	context,
 	clientId,
+	__unstableParentLayout: parentLayout,
 } ) {
 	const {
 		url = '',
@@ -144,7 +145,7 @@ export function ImageEdit( {
 				scale: undefined,
 			} );
 		}
-	}, [ align ] );
+	}, [ __unstableMarkNextChangeAsNotPersistent, align, setAttributes ] );
 
 	const { getSettings } = useSelect( blockEditorStore );
 	const blockEditingMode = useBlockEditingMode();
@@ -282,7 +283,7 @@ export function ImageEdit( {
 		<img
 			alt={ __( 'Edit image' ) }
 			title={ __( 'Edit image' ) }
-			className={ 'edit-image-preview' }
+			className="edit-image-preview"
 			src={ url }
 		/>
 	);
@@ -290,7 +291,7 @@ export function ImageEdit( {
 	const borderProps = useBorderProps( attributes );
 	const shadowProps = getShadowClassesAndStyles( attributes );
 
-	const classes = classnames( className, {
+	const classes = clsx( className, {
 		'is-transient': temporaryURL,
 		'is-resized': !! width || !! height,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
@@ -316,8 +317,11 @@ export function ImageEdit( {
 			return {
 				lockUrlControls:
 					!! metadata?.bindings?.url &&
-					( ! blockBindingsSource ||
-						blockBindingsSource?.lockAttributesEditing ),
+					! blockBindingsSource?.canUserEditValue( {
+						select,
+						context,
+						args: metadata?.bindings?.url?.args,
+					} ),
 				lockUrlControlsMessage: blockBindingsSource?.label
 					? sprintf(
 							/* translators: %s: Label of the bindings source. */
@@ -327,12 +331,12 @@ export function ImageEdit( {
 					: __( 'Connected to dynamic data' ),
 			};
 		},
-		[ isSingleSelected ]
+		[ isSingleSelected, metadata?.bindings?.url ]
 	);
 	const placeholder = ( content ) => {
 		return (
 			<Placeholder
-				className={ classnames( 'block-editor-media-placeholder', {
+				className={ clsx( 'block-editor-media-placeholder', {
 					[ borderProps.className ]:
 						!! borderProps.className && ! isSingleSelected,
 				} ) }
@@ -358,9 +362,7 @@ export function ImageEdit( {
 				} }
 			>
 				{ lockUrlControls ? (
-					<span
-						className={ 'block-bindings-media-placeholder-message' }
-					>
+					<span className="block-bindings-media-placeholder-message">
 						{ lockUrlControlsMessage }
 					</span>
 				) : (
@@ -385,6 +387,7 @@ export function ImageEdit( {
 				context={ context }
 				clientId={ clientId }
 				blockEditingMode={ blockEditingMode }
+				parentLayoutType={ parentLayout?.type }
 			/>
 			<MediaPlaceholder
 				icon={ <BlockIcon icon={ icon } /> }
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 010ec4cd59694..efa526ec0afd5 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -581,7 +581,10 @@ export class ImageEdit extends Component {
 						) }{ ' ' }
 						<FooterMessageLink
 							href={
-								'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+								// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+								__(
+									'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+								)
 							}
 							value={ __( 'What is alt text?' ) }
 						/>
@@ -617,7 +620,7 @@ export class ImageEdit extends Component {
 					styles.removeFeaturedButton,
 				] }
 				cellContainerStyle={ styles.setFeaturedButtonCellContainer }
-				separatorType={ 'none' }
+				separatorType="none"
 				onPress={ () =>
 					this.onSetFeatured( MEDIA_ID_NO_FEATURED_IMAGE_SET )
 				}
@@ -629,7 +632,7 @@ export class ImageEdit extends Component {
 				label={ __( 'Set as Featured Image' ) }
 				labelStyle={ setFeaturedButtonStyle }
 				cellContainerStyle={ styles.setFeaturedButtonCellContainer }
-				separatorType={ 'none' }
+				separatorType="none"
 				onPress={ () => this.onSetFeatured( attributes.id ) }
 			/>
 		);
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index 90af21b1a9a82..bd9dd0e32a9af 100644
--- a/packages/block-library/src/image/editor.scss
+++ b/packages/block-library/src/image/editor.scss
@@ -141,13 +141,19 @@ figure.wp-block-image:not(.wp-block) {
 	width: 100%;
 	overflow: hidden;
 
-	// This removes the border from the img within the image cropper so it
-	// can be applied to the cropper itself. This then allows the image to be
-	// cropped within the visual border providing more accurate editing and
-	// smoother UX.
-	.reactEasyCrop_Container .reactEasyCrop_Image {
-		border: none;
-		border-radius: 0; // Prevent's theme.json radius bleeding into cropper.
+	.reactEasyCrop_Container {
+		// The linked Image block has `pointer-events: none` applied. Override it
+		// here to enable the crop action.
+		pointer-events: auto;
+
+		// This removes the border from the img within the image cropper so it
+		// can be applied to the cropper itself. This then allows the image to be
+		// cropped within the visual border providing more accurate editing and
+		// smoother UX.
+		.reactEasyCrop_Image {
+			border: none;
+			border-radius: 0; // Prevent's theme.json radius bleeding into cropper.
+		}
 	}
 }
 
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 13607508a56f6..6095ef2fee24d 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -82,7 +82,8 @@ const ImageWrapper = ( { href, children } ) => {
 				// When the Image block is linked,
 				// it's wrapped with a disabled <a /> tag.
 				// Restore cursor style so it doesn't appear 'clickable'
-				// Safari needs the display property.
+				// and remove pointer events. Safari needs the display property.
+				pointerEvents: 'none',
 				cursor: 'default',
 				display: 'inline',
 			} }
@@ -105,6 +106,7 @@ export default function Image( {
 	context,
 	clientId,
 	blockEditingMode,
+	parentLayoutType,
 } ) {
 	const {
 		url = '',
@@ -180,7 +182,8 @@ export default function Image( {
 		allowResize &&
 		hasNonContentControls &&
 		! isWideAligned &&
-		isLargeViewport;
+		isLargeViewport &&
+		parentLayoutType !== 'grid';
 	const imageSizeOptions = imageSizes
 		.filter(
 			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
@@ -459,8 +462,11 @@ export default function Image( {
 			return {
 				lockUrlControls:
 					!! urlBinding &&
-					( ! urlBindingSource ||
-						urlBindingSource?.lockAttributesEditing ),
+					! urlBindingSource?.canUserEditValue( {
+						select,
+						context,
+						args: urlBinding?.args,
+					} ),
 				lockHrefControls:
 					// Disable editing the link of the URL if the image is inside a pattern instance.
 					// This is a temporary solution until we support overriding the link on the frontend.
@@ -471,8 +477,11 @@ export default function Image( {
 					hasParentPattern,
 				lockAltControls:
 					!! altBinding &&
-					( ! altBindingSource ||
-						altBindingSource?.lockAttributesEditing ),
+					! altBindingSource?.canUserEditValue( {
+						select,
+						context,
+						args: altBinding?.args,
+					} ),
 				lockAltControlsMessage: altBindingSource?.label
 					? sprintf(
 							/* translators: %s: Label of the bindings source. */
@@ -482,8 +491,11 @@ export default function Image( {
 					: __( 'Connected to dynamic data' ),
 				lockTitleControls:
 					!! titleBinding &&
-					( ! titleBindingSource ||
-						titleBindingSource?.lockAttributesEditing ),
+					! titleBindingSource?.canUserEditValue( {
+						select,
+						context,
+						args: titleBinding?.args,
+					} ),
 				lockTitleControlsMessage: titleBindingSource?.label
 					? sprintf(
 							/* translators: %s: Label of the bindings source. */
@@ -496,13 +508,21 @@ export default function Image( {
 		[ clientId, isSingleSelected, metadata?.bindings ]
 	);
 
+	const showUrlInput =
+		isSingleSelected &&
+		! isEditingImage &&
+		! lockHrefControls &&
+		! lockUrlControls;
+
+	const showCoverControls = isSingleSelected && canInsertCover;
+
+	const showBlockControls = showUrlInput || allowCrop || showCoverControls;
+
 	const controls = (
 		<>
-			<BlockControls group="block">
-				{ isSingleSelected &&
-					! isEditingImage &&
-					! lockHrefControls &&
-					! lockUrlControls && (
+			{ showBlockControls && (
+				<BlockControls group="block">
+					{ showUrlInput && (
 						<ImageURLInputUI
 							url={ href || '' }
 							onChangeUrl={ onSetHref }
@@ -518,21 +538,22 @@ export default function Image( {
 							resetLightbox={ resetLightbox }
 						/>
 					) }
-				{ allowCrop && (
-					<ToolbarButton
-						onClick={ () => setIsEditingImage( true ) }
-						icon={ crop }
-						label={ __( 'Crop' ) }
-					/>
-				) }
-				{ isSingleSelected && canInsertCover && (
-					<ToolbarButton
-						icon={ overlayText }
-						label={ __( 'Add text over image' ) }
-						onClick={ switchToCover }
-					/>
-				) }
-			</BlockControls>
+					{ allowCrop && (
+						<ToolbarButton
+							onClick={ () => setIsEditingImage( true ) }
+							icon={ crop }
+							label={ __( 'Crop' ) }
+						/>
+					) }
+					{ showCoverControls && (
+						<ToolbarButton
+							icon={ overlayText }
+							label={ __( 'Add text over image' ) }
+							onClick={ switchToCover }
+						/>
+					) }
+				</BlockControls>
+			) }
 			{ isSingleSelected && ! isEditingImage && ! lockUrlControls && (
 				<BlockControls group="other">
 					<MediaReplaceFlow
@@ -594,7 +615,14 @@ export default function Image( {
 										<>{ lockAltControlsMessage }</>
 									) : (
 										<>
-											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+											<ExternalLink
+												href={
+													// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+													__(
+														'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+													)
+												}
+											>
 												{ __(
 													'Describe the purpose of the image.'
 												) }
@@ -681,7 +709,14 @@ export default function Image( {
 										<>{ lockAltControlsMessage }</>
 									) : (
 										<>
-											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+											<ExternalLink
+												href={
+													// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+													__(
+														'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+													)
+												}
+											>
 												{ __(
 													'Describe the purpose of the image.'
 												) }
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index 2351f6aad6c46..7fe05b2209c81 100644
--- a/packages/block-library/src/image/index.php
+++ b/packages/block-library/src/image/index.php
@@ -188,12 +188,12 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	// Image.
 	$p->next_tag( 'img' );
 	$p->set_attribute( 'data-wp-init', 'callbacks.setButtonStyles' );
-	$p->set_attribute( 'data-wp-on--load', 'callbacks.setButtonStyles' );
-	$p->set_attribute( 'data-wp-on-window--resize', 'callbacks.setButtonStyles' );
+	$p->set_attribute( 'data-wp-on-async--load', 'callbacks.setButtonStyles' );
+	$p->set_attribute( 'data-wp-on-async-window--resize', 'callbacks.setButtonStyles' );
 	// Sets an event callback on the `img` because the `figure` element can also
 	// contain a caption, and we don't want to trigger the lightbox when the
 	// caption is clicked.
-	$p->set_attribute( 'data-wp-on--click', 'actions.showLightbox' );
+	$p->set_attribute( 'data-wp-on-async--click', 'actions.showLightbox' );
 
 	$body_content = $p->get_updated_html();
 
@@ -209,7 +209,7 @@ class="lightbox-trigger"
 			aria-haspopup="dialog"
 			aria-label="' . esc_attr( $aria_label ) . '"
 			data-wp-init="callbacks.initTriggerButton"
-			data-wp-on--click="actions.showLightbox"
+			data-wp-on-async--click="actions.showLightbox"
 			data-wp-style--right="context.imageButtonRight"
 			data-wp-style--top="context.imageButtonTop"
 		>
@@ -258,12 +258,12 @@ class="wp-lightbox-overlay zoom"
 			data-wp-class--show-closing-animation="state.showClosingAnimation"
 			data-wp-watch="callbacks.setOverlayFocus"
 			data-wp-on--keydown="actions.handleKeydown"
-			data-wp-on--touchstart="actions.handleTouchStart"
+			data-wp-on-async--touchstart="actions.handleTouchStart"
 			data-wp-on--touchmove="actions.handleTouchMove"
-			data-wp-on--touchend="actions.handleTouchEnd"
-			data-wp-on--click="actions.hideLightbox"
-			data-wp-on-window--resize="callbacks.setOverlayStyles"
-			data-wp-on-window--scroll="actions.handleScroll"
+			data-wp-on-async--touchend="actions.handleTouchEnd"
+			data-wp-on-async--click="actions.hideLightbox"
+			data-wp-on-async-window--resize="callbacks.setOverlayStyles"
+			data-wp-on-async-window--scroll="actions.handleScroll"
 			tabindex="-1"
 			>
 				<button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button">
diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js
index 60fca74fc7643..69c26cde52a9c 100644
--- a/packages/block-library/src/image/save.js
+++ b/packages/block-library/src/image/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -37,7 +37,7 @@ export default function save( { attributes } ) {
 	const borderProps = getBorderClassesAndStyles( attributes );
 	const shadowProps = getShadowClassesAndStyles( attributes );
 
-	const classes = classnames( {
+	const classes = clsx( {
 		// All other align classes are handled by block supports.
 		// `{ align: 'none' }` is unique to transforms for the image block.
 		alignnone: 'none' === align,
@@ -49,7 +49,7 @@ export default function save( { attributes } ) {
 				Object.keys( borderProps.style ).length > 0 ),
 	} );
 
-	const imageClasses = classnames( borderProps.className, {
+	const imageClasses = clsx( borderProps.className, {
 		[ `wp-image-${ id }` ]: !! id,
 	} );
 
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index 4387d45d5699e..40ffe0cd0e61c 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -82,27 +82,19 @@
 		@include caption-style();
 	}
 
-	// Variations
-	&.is-style-rounded img,
-	.is-style-rounded img {
-		// We use an absolute pixel to prevent the oval shape that a value of 50% would give
-		// to rectangular images. A pill-shape is better than otherwise.
-		border-radius: 9999px;
-	}
-
 	// The following variation is deprecated.
 	// The CSS is kept here for the time being, to support blocks using the old variation.
+	// The selector is not scoped with `:root :where()` like global styles are to keep its
+	// specificity the same as it was when it was deprecated.
 	&.is-style-circle-mask img {
 		// We use an absolute pixel to prevent the oval shape that a value of 50% would give
 		// to rectangular images. A pill-shape is better than otherwise.
 		border-radius: 9999px;
 
 		// If a browser supports it, we will switch to using a circular SVG mask.
-		// The stylelint override is necessary to use the SVG inline here.
 		@supports (mask-image: none) or (-webkit-mask-image: none) {
-			/* stylelint-disable */
+			/* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
 			mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
-			/* stylelint-enable */
 			mask-mode: alpha;
 			mask-repeat: no-repeat;
 			mask-size: contain;
@@ -110,42 +102,13 @@
 			border-radius: 0;
 		}
 	}
+}
 
-	// The following is required to overcome WP Core applying styles that clear
-	// img borders with a higher specificity than those added by the border
-	// block support to provide a default border-style of solid when a border
-	// color or width has been set.
-	:where(.has-border-color) {
-		border-style: solid;
-	}
-	:where([style*="border-top-color"]) {
-		border-top-style: solid;
-	}
-	:where([style*="border-right-color"]) {
-		border-right-style: solid;
-	}
-	:where([style*="border-bottom-color"]) {
-		border-bottom-style: solid;
-	}
-	:where([style*="border-left-color"]) {
-		border-left-style: solid;
-	}
-
-	:where([style*="border-width"]) {
-		border-style: solid;
-	}
-	:where([style*="border-top-width"]) {
-		border-top-style: solid;
-	}
-	:where([style*="border-right-width"]) {
-		border-right-style: solid;
-	}
-	:where([style*="border-bottom-width"]) {
-		border-bottom-style: solid;
-	}
-	:where([style*="border-left-width"]) {
-		border-left-style: solid;
-	}
+// Variations
+:root :where(.wp-block-image.is-style-rounded img, .wp-block-image .is-style-rounded img) {
+	// We use an absolute pixel to prevent the oval shape that a value of 50% would give
+	// to rectangular images. A pill-shape is better than otherwise.
+	border-radius: 9999px;
 }
 
 .wp-block-image figure {
diff --git a/packages/block-library/src/image/theme.scss b/packages/block-library/src/image/theme.scss
index 459036511335a..c89dd3334dd09 100644
--- a/packages/block-library/src/image/theme.scss
+++ b/packages/block-library/src/image/theme.scss
@@ -1,7 +1,7 @@
-.wp-block-image figcaption {
+:root :where(.wp-block-image figcaption) {
 	@include caption-style-theme();
 }
 
-:where(.wp-block-image) {
+.wp-block-image {
 	margin: 0 0 1em 0;
 }
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index 9cb2f44d05eb9..56365c87a268f 100644
--- a/packages/block-library/src/index.js
+++ b/packages/block-library/src/index.js
@@ -314,21 +314,21 @@ export const registerCoreBlocks = (
  * __experimentalRegisterExperimentalCoreBlocks( settings );
  * ```
  */
-export const __experimentalRegisterExperimentalCoreBlocks = process.env
-	.IS_GUTENBERG_PLUGIN
-	? ( { enableFSEBlocks } = {} ) => {
-			const enabledExperiments = [ enableFSEBlocks ? 'fse' : null ];
-			getAllBlocks()
-				.filter( ( { metadata } ) =>
-					isBlockMetadataExperimental( metadata )
-				)
-				.filter(
-					( { metadata: { __experimental } } ) =>
-						__experimental === true ||
-						enabledExperiments.includes( __experimental )
-				)
-				.forEach( ( { init } ) => init() );
-	  }
-	: undefined;
+export const __experimentalRegisterExperimentalCoreBlocks =
+	globalThis.IS_GUTENBERG_PLUGIN
+		? ( { enableFSEBlocks } = {} ) => {
+				const enabledExperiments = [ enableFSEBlocks ? 'fse' : null ];
+				getAllBlocks()
+					.filter( ( { metadata } ) =>
+						isBlockMetadataExperimental( metadata )
+					)
+					.filter(
+						( { metadata: { __experimental } } ) =>
+							__experimental === true ||
+							enabledExperiments.includes( __experimental )
+					)
+					.forEach( ( { init } ) => init() );
+		  }
+		: undefined;
 
 export { privateApis } from './private-apis';
diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
index 1ef7bd5e5fed7..ce8f75c671c83 100644
--- a/packages/block-library/src/latest-posts/edit.js
+++ b/packages/block-library/src/latest-posts/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,7 @@ import {
 	ToggleControl,
 	ToolbarGroup,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { dateI18n, format, getSettings } from '@wordpress/date';
 import {
 	InspectorControls,
@@ -383,7 +383,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	);
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			'wp-block-latest-posts__list': true,
 			'is-grid': postLayout === 'grid',
 			'has-dates': displayPostDate,
@@ -416,13 +416,13 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	const layoutControls = [
 		{
 			icon: list,
-			title: __( 'List view' ),
+			title: _x( 'List view', 'Latest posts block display setting' ),
 			onClick: () => setAttributes( { postLayout: 'list' } ),
 			isActive: postLayout === 'list',
 		},
 		{
 			icon: grid,
-			title: __( 'Grid view' ),
+			title: _x( 'Grid view', 'Latest posts block display setting' ),
 			onClick: () => setAttributes( { postLayout: 'grid' } ),
 			isActive: postLayout === 'grid',
 		},
@@ -454,7 +454,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 
 					const { url: imageSourceUrl, alt: featuredImageAlt } =
 						getFeaturedImageDetails( post, featuredImageSizeSlug );
-					const imageClasses = classnames( {
+					const imageClasses = clsx( {
 						'wp-block-latest-posts__featured-image': true,
 						[ `align${ featuredImageAlign }` ]:
 							!! featuredImageAlign,
diff --git a/packages/block-library/src/latest-posts/edit.native.js b/packages/block-library/src/latest-posts/edit.native.js
index 90edce4f84b5b..632efa149313f 100644
--- a/packages/block-library/src/latest-posts/edit.native.js
+++ b/packages/block-library/src/latest-posts/edit.native.js
@@ -207,7 +207,7 @@ class LatestPostsEdit extends Component {
 								label={ __( 'Add link to featured image' ) }
 								checked={ addLinkToFeaturedImage }
 								onChange={ this.onSetAddLinkToFeaturedImage }
-								separatorType={ 'topFullWidth' }
+								separatorType="topFullWidth"
 							/>
 						</>
 					) }
diff --git a/packages/block-library/src/latest-posts/editor.scss b/packages/block-library/src/latest-posts/editor.scss
index 3c2d6a30f1c07..d3f0b5275653e 100644
--- a/packages/block-library/src/latest-posts/editor.scss
+++ b/packages/block-library/src/latest-posts/editor.scss
@@ -1,9 +1,4 @@
 .wp-block-latest-posts {
-	padding-left: 2.5em;
-	&.is-grid {
-		padding-left: 0;
-	}
-
 	// Apply overflow for post items, so any floated featured images won't crop the focus style.
 	> li {
 		overflow: hidden;
@@ -14,10 +9,6 @@
 	display: inline;
 }
 
-.edit-post-visual-editor .wp-block-latest-posts.is-grid li {
-	margin-bottom: 20px;
-}
-
 .editor-latest-posts-image-alignment-control {
 	.components-base-control__label {
 		display: block;
@@ -27,3 +18,13 @@
 		border-radius: $radius-block-ui;
 	}
 }
+
+:root :where(.wp-block-latest-posts) {
+	padding-left: 2.5em;
+}
+:root {
+	:where(.wp-block-latest-posts.is-grid),
+	:where(.wp-block-latest-posts__list) {
+		padding-left: 0;
+	}
+}
diff --git a/packages/block-library/src/latest-posts/index.php b/packages/block-library/src/latest-posts/index.php
index 913a9ae2d430e..85c7b58737a1c 100644
--- a/packages/block-library/src/latest-posts/index.php
+++ b/packages/block-library/src/latest-posts/index.php
@@ -152,6 +152,7 @@ function render_block_core_latest_posts( $attributes ) {
 			 * [&hellip;] is the default excerpt ending from wp_trim_excerpt() in Core.
 			 */
 			if ( str_ends_with( $trimmed_excerpt, ' [&hellip;]' ) ) {
+				/** This filter is documented in wp-includes/formatting.php */
 				$excerpt_length = (int) apply_filters( 'excerpt_length', $block_core_latest_posts_excerpt_length );
 				if ( $excerpt_length <= $block_core_latest_posts_excerpt_length ) {
 					$trimmed_excerpt  = substr( $trimmed_excerpt, 0, -11 );
diff --git a/packages/block-library/src/latest-posts/style.scss b/packages/block-library/src/latest-posts/style.scss
index 17d92a4ad91b9..2a01d177ef47c 100644
--- a/packages/block-library/src/latest-posts/style.scss
+++ b/packages/block-library/src/latest-posts/style.scss
@@ -12,17 +12,16 @@
 	}
 	&.wp-block-latest-posts__list {
 		list-style: none;
-		padding-left: 0;
 
 		li {
 			clear: both;
+			overflow-wrap: break-word;
 		}
 	}
 
 	&.is-grid {
 		display: flex;
 		flex-wrap: wrap;
-		padding: 0;
 
 		li {
 			margin: 0 1.25em 1.25em 0;
@@ -33,9 +32,9 @@
 	@include break-small {
 		@for $i from 2 through 6 {
 			&.columns-#{ $i } li {
-				width: calc((100% / #{ $i }) - 1.25em + (1.25em / #{ $i }));
+				width: calc((100% / #{$i}) - 1.25em + (1.25em / #{$i}));
 
-				&:nth-child( #{ $i }n ) {
+				&:nth-child(#{ $i }n) {
 					margin-right: 0;
 				}
 			}
@@ -43,6 +42,15 @@
 	}
 }
 
+:root {
+	:where(.wp-block-latest-posts.is-grid) {
+		padding: 0;
+	}
+	:where(.wp-block-latest-posts.wp-block-latest-posts__list) {
+		padding-left: 0;
+	}
+}
+
 .wp-block-latest-posts__post-date,
 .wp-block-latest-posts__post-author {
 	display: block;
diff --git a/packages/block-library/src/list-item/block.json b/packages/block-library/src/list-item/block.json
index 3acaf2a3bb29b..92822c993589d 100644
--- a/packages/block-library/src/list-item/block.json
+++ b/packages/block-library/src/list-item/block.json
@@ -21,8 +21,8 @@
 	},
 	"supports": {
 		"className": false,
+		"__experimentalSelector": ".wp-block-list > li",
 		"splitting": true,
-		"__experimentalSelector": "li",
 		"spacing": {
 			"margin": true,
 			"padding": true,
diff --git a/packages/block-library/src/list/block.json b/packages/block-library/src/list/block.json
index 8e6ff21e5bd10..157aaf7c0cf63 100644
--- a/packages/block-library/src/list/block.json
+++ b/packages/block-library/src/list/block.json
@@ -39,7 +39,6 @@
 	"supports": {
 		"anchor": true,
 		"html": false,
-		"className": false,
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -70,7 +69,6 @@
 			}
 		},
 		"__unstablePasteTextInline": true,
-		"__experimentalSelector": "ol,ul",
 		"__experimentalOnMerge": true,
 		"__experimentalSlashInserter": true,
 		"interactivity": {
diff --git a/packages/block-library/src/list/deprecated.js b/packages/block-library/src/list/deprecated.js
index cecc17430f65e..edb04dff27c90 100644
--- a/packages/block-library/src/list/deprecated.js
+++ b/packages/block-library/src/list/deprecated.js
@@ -219,6 +219,93 @@ const v2 = {
 	migrate: migrateTypeToInlineStyle,
 };
 
+// Version without block support 'className: true'.
+const v3 = {
+	attributes: {
+		ordered: {
+			type: 'boolean',
+			default: false,
+			__experimentalRole: 'content',
+		},
+		values: {
+			type: 'string',
+			source: 'html',
+			selector: 'ol,ul',
+			multiline: 'li',
+			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
+			default: '',
+			__experimentalRole: 'content',
+		},
+		type: {
+			type: 'string',
+		},
+		start: {
+			type: 'number',
+		},
+		reversed: {
+			type: 'boolean',
+		},
+		placeholder: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		className: false,
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+			__experimentalDefaultControls: {
+				margin: false,
+				padding: false,
+			},
+		},
+		__unstablePasteTextInline: true,
+		__experimentalSelector: 'ol,ul',
+		__experimentalOnMerge: 'true',
+		__experimentalSlashInserter: true,
+	},
+	save( { attributes } ) {
+		const { ordered, type, reversed, start } = attributes;
+		const TagName = ordered ? 'ol' : 'ul';
+		return (
+			<TagName
+				{ ...useBlockProps.save( {
+					reversed,
+					start,
+					style: {
+						listStyleType:
+							ordered && type !== 'decimal' ? type : undefined,
+					},
+				} ) }
+			>
+				<InnerBlocks.Content />
+			</TagName>
+		);
+	},
+};
+
 /**
  * New deprecations need to be placed first
  * for them to have higher priority.
@@ -227,4 +314,4 @@ const v2 = {
  *
  * See block-deprecation.md
  */
-export default [ v2, v1, v0 ];
+export default [ v3, v2, v1, v0 ];
diff --git a/packages/block-library/src/list/index.php b/packages/block-library/src/list/index.php
new file mode 100644
index 0000000000000..1bffd81324857
--- /dev/null
+++ b/packages/block-library/src/list/index.php
@@ -0,0 +1,54 @@
+<?php
+/**
+ * Adds the wp-block-list class to the rendered list block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Adds the wp-block-list class to the rendered list block.
+ * Ensures that pre-existing list blocks use the class name on the front.
+ * For example, <ol> is transformed to <ol class="wp-block-list">.
+ *
+ * @since 6.6.0
+ *
+ * @see https://github.com/WordPress/gutenberg/issues/12420
+ *
+ * @param array  $attributes Attributes of the block being rendered.
+ * @param string $content Content of the block being rendered.
+ *
+ * @return string The content of the block being rendered.
+ */
+function block_core_list_render( $attributes, $content ) {
+	if ( ! $content ) {
+		return $content;
+	}
+
+	$processor = new WP_HTML_Tag_Processor( $content );
+
+	$list_tags = array( 'OL', 'UL' );
+	while ( $processor->next_tag() ) {
+		if ( in_array( $processor->get_tag(), $list_tags, true ) ) {
+			$processor->add_class( 'wp-block-list' );
+			break;
+		}
+	}
+
+	return $processor->get_updated_html();
+}
+
+/**
+ * Registers the `core/list` block on server.
+ *
+ * @since 6.6.0
+ */
+function register_block_core_list() {
+	register_block_type_from_metadata(
+		__DIR__ . '/list',
+		array(
+			'render_callback' => 'block_core_list_render',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_list' );
diff --git a/packages/block-library/src/list/style.scss b/packages/block-library/src/list/style.scss
index badf1b9e560eb..11f7c4888a5ef 100644
--- a/packages/block-library/src/list/style.scss
+++ b/packages/block-library/src/list/style.scss
@@ -1,8 +1,8 @@
 ol,
 ul {
 	box-sizing: border-box;
+}
 
-	&.has-background {
-		padding: $block-bg-padding--v $block-bg-padding--h;
-	}
+:root :where(ul.has-background, ol.has-background) {
+	padding: $block-bg-padding--v $block-bg-padding--h;
 }
diff --git a/packages/block-library/src/list/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/list/test/__snapshots__/edit.native.js.snap
index 1bc5cf6ce937f..058ccc6b9ca63 100644
--- a/packages/block-library/src/list/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/list/test/__snapshots__/edit.native.js.snap
@@ -2,7 +2,7 @@
 
 exports[`List block adds one item to the list 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First list item</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->"
@@ -10,9 +10,9 @@ exports[`List block adds one item to the list 1`] = `
 
 exports[`List block changes the indentation level 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Item 2</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -22,7 +22,7 @@ exports[`List block changes the indentation level 1`] = `
 
 exports[`List block changes to ordered list 1`] = `
 "<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -38,7 +38,7 @@ exports[`List block changes to ordered list 1`] = `
 
 exports[`List block changes to reverse ordered list 1`] = `
 "<!-- wp:list {"ordered":true,"reversed":true} -->
-<ol reversed><!-- wp:list-item -->
+<ol reversed class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -54,7 +54,7 @@ exports[`List block changes to reverse ordered list 1`] = `
 
 exports[`List block inserts block 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->"
@@ -62,7 +62,7 @@ exports[`List block inserts block 1`] = `
 
 exports[`List block removes the indentation level 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -74,7 +74,7 @@ exports[`List block removes the indentation level 1`] = `
 
 exports[`List block sets a start value to an ordered list 1`] = `
 "<!-- wp:list {"ordered":true,"start":25} -->
-<ol start="25"><!-- wp:list-item -->
+<ol start="25" class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -90,19 +90,19 @@ exports[`List block sets a start value to an ordered list 1`] = `
 
 exports[`List block shows different indentation levels 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>List item 1</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>List item 2<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>List item nested 1</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>List item nested 2<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Extra item 1</li>
 <!-- /wp:list-item -->
 
diff --git a/packages/block-library/src/list/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/list/test/__snapshots__/transforms.native.js.snap
index 723d19a658366..9e28f1c77de94 100644
--- a/packages/block-library/src/list/test/__snapshots__/transforms.native.js.snap
+++ b/packages/block-library/src/list/test/__snapshots__/transforms.native.js.snap
@@ -4,7 +4,7 @@ exports[`List block transforms to Columns block 1`] = `
 "<!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
 <div class="wp-block-column" style="flex-basis:100%"><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First Item</li>
 <!-- /wp:list-item -->
 
@@ -23,7 +23,7 @@ exports[`List block transforms to Columns block 1`] = `
 exports[`List block transforms to Group block 1`] = `
 "<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First Item</li>
 <!-- /wp:list-item -->
 
@@ -69,7 +69,7 @@ exports[`List block transforms to Paragraph block 1`] = `
 exports[`List block transforms to Quote block 1`] = `
 "<!-- wp:quote -->
 <blockquote class="wp-block-quote"><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First Item</li>
 <!-- /wp:list-item -->
 
diff --git a/packages/block-library/src/list/test/edit.native.js b/packages/block-library/src/list/test/edit.native.js
index 1f7296db98c8c..a33bce32e5bca 100644
--- a/packages/block-library/src/list/test/edit.native.js
+++ b/packages/block-library/src/list/test/edit.native.js
@@ -60,7 +60,7 @@ describe( 'List block', () => {
 
 	it( 'adds one item to the list', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li></li><!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
@@ -88,17 +88,17 @@ describe( 'List block', () => {
 
 	it( 'shows different indentation levels', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>List item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>List item 2<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>List item nested 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>List item nested 2<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Extra item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -140,7 +140,7 @@ describe( 'List block', () => {
 
 	it( 'changes the indentation level', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -183,9 +183,9 @@ describe( 'List block', () => {
 
 	it( 'removes the indentation level', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 2</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list --></li>
@@ -230,7 +230,7 @@ describe( 'List block', () => {
 
 	it( 'changes to ordered list', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -258,7 +258,7 @@ describe( 'List block', () => {
 
 	it( 'changes to reverse ordered list', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -299,7 +299,7 @@ describe( 'List block', () => {
 
 	it( 'sets a start value to an ordered list', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -342,7 +342,7 @@ describe( 'List block', () => {
 	it( 'splits empty list items into paragraphs', async () => {
 		// Arrange
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li><!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Two</li><!-- /wp:list-item --></ul>
@@ -370,7 +370,7 @@ describe( 'List block', () => {
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
 		"<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->
@@ -380,7 +380,7 @@ describe( 'List block', () => {
 		<!-- /wp:paragraph -->
 
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Two</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->"
@@ -389,7 +389,7 @@ describe( 'List block', () => {
 
 	it( 'merges paragraphs into list items', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->
@@ -399,7 +399,7 @@ describe( 'List block', () => {
 		<!-- /wp:paragraph -->
 
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Three</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
@@ -417,7 +417,7 @@ describe( 'List block', () => {
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
 		"<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item -->
 
@@ -435,7 +435,7 @@ describe( 'List block', () => {
 	it( 'merges lists into lists', async () => {
 		// Arrange
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item -->
 
@@ -445,7 +445,7 @@ describe( 'List block', () => {
 		<!-- /wp:list -->
 
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Three</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
@@ -466,7 +466,7 @@ describe( 'List block', () => {
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
 		"<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item -->
 
@@ -486,7 +486,7 @@ describe( 'List block', () => {
 		<p>A quick brown fox.</p>
 		<!-- /wp:paragraph -->
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li><!-- /wp:list-item --><!-- wp:list-item -->
 		<li>Two</li><!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
@@ -527,7 +527,7 @@ describe( 'List block', () => {
 		<!-- /wp:paragraph -->
 
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Two</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->"
@@ -539,9 +539,9 @@ describe( 'List block', () => {
 		<p>A quick brown fox.</p>
 		<!-- /wp:paragraph -->
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Two</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -591,7 +591,7 @@ describe( 'List block', () => {
 		<!-- /wp:paragraph -->
 
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Two</li>
 		<!-- /wp:list-item -->
 
diff --git a/packages/block-library/src/list/test/transforms.native.js b/packages/block-library/src/list/test/transforms.native.js
index dd8ec5ccd2c77..538d5b7ed0193 100644
--- a/packages/block-library/src/list/test/transforms.native.js
+++ b/packages/block-library/src/list/test/transforms.native.js
@@ -12,7 +12,7 @@ import {
 const block = 'List';
 const initialHtml = `
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First Item</li>
 <!-- /wp:list-item -->
 
diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js
index d03659022b95b..1cd1472f876c0 100644
--- a/packages/block-library/src/media-text/deprecated.js
+++ b/packages/block-library/src/media-text/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -263,7 +263,7 @@ const v6 = {
 			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 		const newRel = ! rel ? undefined : rel;
 
-		const imageClasses = classnames( {
+		const imageClasses = clsx( {
 			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
 			[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
 		} );
@@ -293,7 +293,7 @@ const v6 = {
 			image: () => image,
 			video: () => <video controls src={ mediaUrl } />,
 		};
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			'is-stacked-on-mobile': isStackedOnMobile,
 			[ `is-vertically-aligned-${ verticalAlignment }` ]:
@@ -392,7 +392,7 @@ const v5 = {
 			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 		const newRel = ! rel ? undefined : rel;
 
-		const imageClasses = classnames( {
+		const imageClasses = clsx( {
 			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
 			[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
 		} );
@@ -422,7 +422,7 @@ const v5 = {
 			image: () => image,
 			video: () => <video controls src={ mediaUrl } />,
 		};
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			'is-stacked-on-mobile': isStackedOnMobile,
 			[ `is-vertically-aligned-${ verticalAlignment }` ]:
@@ -506,7 +506,7 @@ const v4 = {
 			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 		const newRel = ! rel ? undefined : rel;
 
-		const imageClasses = classnames( {
+		const imageClasses = clsx( {
 			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
 			[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
 		} );
@@ -537,7 +537,7 @@ const v4 = {
 			video: () => <video controls src={ mediaUrl } />,
 		};
 
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			'is-stacked-on-mobile': isStackedOnMobile,
 			[ `is-vertically-aligned-${ verticalAlignment }` ]:
@@ -688,7 +688,7 @@ const v3 = {
 			'background-color',
 			backgroundColor
 		);
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			'has-background': backgroundClass || customBackgroundColor,
 			[ backgroundClass ]: backgroundClass,
@@ -791,7 +791,7 @@ const v2 = {
 			'background-color',
 			backgroundColor
 		);
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			[ backgroundClass ]: backgroundClass,
 			'is-stacked-on-mobile': isStackedOnMobile,
@@ -870,7 +870,7 @@ const v1 = {
 			'background-color',
 			backgroundColor
 		);
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			[ backgroundClass ]: backgroundClass,
 			'is-stacked-on-mobile': isStackedOnMobile,
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 5cf7928563d61..bcdbc658507fc 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -16,18 +16,19 @@ import {
 	InspectorControls,
 	useBlockProps,
 	__experimentalImageURLInputUI as ImageURLInputUI,
-	__experimentalImageSizeControl as ImageSizeControl,
 	store as blockEditorStore,
 	useBlockEditingMode,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import {
-	PanelBody,
 	RangeControl,
 	TextareaControl,
 	ToggleControl,
 	ToolbarButton,
 	ExternalLink,
 	FocalPointPicker,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { isBlobURL, getBlobTypeByURL } from '@wordpress/blob';
 import { pullLeft, pullRight } from '@wordpress/icons';
@@ -44,6 +45,10 @@ import {
 	LINK_DESTINATION_ATTACHMENT,
 	TEMPLATE,
 } from './constants';
+import { unlock } from '../lock-unlock';
+import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../utils/constants';
+
+const { ResolutionTool } = unlock( blockEditorPrivateApis );
 
 // this limits the resize to a safe zone to avoid making broken layouts
 const applyWidthConstraints = ( width ) =>
@@ -182,6 +187,12 @@ function MediaTextEdit( {
 			mediaId: undefined,
 			mediaUrl: undefined,
 			mediaAlt: undefined,
+			mediaLink: undefined,
+			linkDestination: undefined,
+			linkTarget: undefined,
+			linkClass: undefined,
+			rel: undefined,
+			href: undefined,
 			useFeaturedImage: ! useFeaturedImage,
 		} );
 	};
@@ -227,7 +238,7 @@ function MediaTextEdit( {
 		setTemporaryMediaWidth( null );
 	};
 
-	const classNames = classnames( {
+	const classNames = clsx( {
 		'has-media-on-the-right': 'right' === mediaPosition,
 		'is-selected': isSelected,
 		'is-stacked-on-mobile': isStackedOnMobile,
@@ -267,86 +278,144 @@ function MediaTextEdit( {
 	};
 
 	const mediaTextGeneralSettings = (
-		<PanelBody title={ __( 'Settings' ) }>
-			<RangeControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize
+		<ToolsPanel
+			label={ __( 'Settings' ) }
+			resetAll={ () => {
+				setAttributes( {
+					isStackedOnMobile: true,
+					imageFill: false,
+					mediaAlt: '',
+					focalPoint: undefined,
+					mediaWidth: 50,
+					mediaSizeSlug: undefined,
+				} );
+			} }
+			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+		>
+			<ToolsPanelItem
 				label={ __( 'Media width' ) }
-				value={ temporaryMediaWidth || mediaWidth }
-				onChange={ commitWidthChange }
-				min={ WIDTH_CONSTRAINT_PERCENTAGE }
-				max={ 100 - WIDTH_CONSTRAINT_PERCENTAGE }
-			/>
-			<ToggleControl
-				__nextHasNoMarginBottom
+				isShownByDefault
+				hasValue={ () => mediaWidth !== 50 }
+				onDeselect={ () => setAttributes( { mediaWidth: 50 } ) }
+			>
+				<RangeControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+					label={ __( 'Media width' ) }
+					value={ temporaryMediaWidth || mediaWidth }
+					onChange={ commitWidthChange }
+					min={ WIDTH_CONSTRAINT_PERCENTAGE }
+					max={ 100 - WIDTH_CONSTRAINT_PERCENTAGE }
+				/>
+			</ToolsPanelItem>
+			<ToolsPanelItem
 				label={ __( 'Stack on mobile' ) }
-				checked={ isStackedOnMobile }
-				onChange={ () =>
-					setAttributes( {
-						isStackedOnMobile: ! isStackedOnMobile,
-					} )
+				isShownByDefault
+				hasValue={ () => ! isStackedOnMobile }
+				onDeselect={ () =>
+					setAttributes( { isStackedOnMobile: true } )
 				}
-			/>
-			{ mediaType === 'image' && (
+			>
 				<ToggleControl
 					__nextHasNoMarginBottom
-					label={ __( 'Crop image to fill' ) }
-					checked={ !! imageFill }
+					label={ __( 'Stack on mobile' ) }
+					checked={ isStackedOnMobile }
 					onChange={ () =>
 						setAttributes( {
-							imageFill: ! imageFill,
+							isStackedOnMobile: ! isStackedOnMobile,
 						} )
 					}
 				/>
+			</ToolsPanelItem>
+			{ mediaType === 'image' && (
+				<ToolsPanelItem
+					label={ __( 'Crop image to fill' ) }
+					isShownByDefault
+					hasValue={ () => !! imageFill }
+					onDeselect={ () => setAttributes( { imageFill: false } ) }
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Crop image to fill' ) }
+						checked={ !! imageFill }
+						onChange={ () =>
+							setAttributes( {
+								imageFill: ! imageFill,
+							} )
+						}
+					/>
+				</ToolsPanelItem>
 			) }
 			{ imageFill &&
 				( mediaUrl || featuredImageURL ) &&
 				mediaType === 'image' && (
-					<FocalPointPicker
-						__nextHasNoMarginBottom
+					<ToolsPanelItem
 						label={ __( 'Focal point' ) }
-						url={
-							useFeaturedImage && featuredImageURL
-								? featuredImageURL
-								: mediaUrl
-						}
-						value={ focalPoint }
-						onChange={ ( value ) =>
-							setAttributes( { focalPoint: value } )
+						isShownByDefault
+						hasValue={ () => !! focalPoint }
+						onDeselect={ () =>
+							setAttributes( { focalPoint: undefined } )
 						}
-						onDragStart={ imperativeFocalPointPreview }
-						onDrag={ imperativeFocalPointPreview }
-					/>
+					>
+						<FocalPointPicker
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Focal point' ) }
+							url={
+								useFeaturedImage && featuredImageURL
+									? featuredImageURL
+									: mediaUrl
+							}
+							value={ focalPoint }
+							onChange={ ( value ) =>
+								setAttributes( { focalPoint: value } )
+							}
+							onDragStart={ imperativeFocalPointPreview }
+							onDrag={ imperativeFocalPointPreview }
+						/>
+					</ToolsPanelItem>
 				) }
 			{ mediaType === 'image' && mediaUrl && ! useFeaturedImage && (
-				<TextareaControl
-					__nextHasNoMarginBottom
+				<ToolsPanelItem
 					label={ __( 'Alternative text' ) }
-					value={ mediaAlt }
-					onChange={ onMediaAltChange }
-					help={
-						<>
-							<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
-								{ __( 'Describe the purpose of the image.' ) }
-							</ExternalLink>
-							<br />
-							{ __( 'Leave empty if decorative.' ) }
-						</>
-					}
-				/>
+					isShownByDefault
+					hasValue={ () => !! mediaAlt }
+					onDeselect={ () => setAttributes( { mediaAlt: '' } ) }
+				>
+					<TextareaControl
+						__nextHasNoMarginBottom
+						label={ __( 'Alternative text' ) }
+						value={ mediaAlt }
+						onChange={ onMediaAltChange }
+						help={
+							<>
+								<ExternalLink
+									href={
+										// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+										__(
+											'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+										)
+									}
+								>
+									{ __(
+										'Describe the purpose of the image.'
+									) }
+								</ExternalLink>
+								<br />
+								{ __( 'Leave empty if decorative.' ) }
+							</>
+						}
+					/>
+				</ToolsPanelItem>
 			) }
-			{ mediaType === 'image' && (
-				<ImageSizeControl
-					onChangeImage={ updateImage }
-					slug={ mediaSizeSlug }
-					imageSizeOptions={ imageSizeOptions }
-					isResizable={ false }
-					imageSizeHelp={ __(
-						'Select the size of the source image.'
-					) }
+			{ mediaType === 'image' && ! useFeaturedImage && (
+				<ResolutionTool
+					value={ mediaSizeSlug }
+					options={ imageSizeOptions }
+					onChange={ updateImage }
 				/>
 			) }
-		</PanelBody>
+		</ToolsPanel>
 	);
 
 	const blockProps = useBlockProps( {
@@ -390,17 +459,13 @@ function MediaTextEdit( {
 					</>
 				) }
 
-				{ mediaType === 'image' && (
+				{ mediaType === 'image' && ! useFeaturedImage && (
 					<ImageURLInputUI
 						url={ href || '' }
 						onChangeUrl={ onSetHref }
 						linkDestination={ linkDestination }
 						mediaType={ mediaType }
-						mediaUrl={
-							useFeaturedImage && featuredImageURL
-								? featuredImageURL
-								: image && image.source_url
-						}
+						mediaUrl={ image && image.source_url }
 						mediaLink={ image && image.link }
 						linkTarget={ linkTarget }
 						linkClass={ linkClass }
diff --git a/packages/block-library/src/media-text/edit.native.js b/packages/block-library/src/media-text/edit.native.js
index 0b5890af55683..a5ccb007bdf5c 100644
--- a/packages/block-library/src/media-text/edit.native.js
+++ b/packages/block-library/src/media-text/edit.native.js
@@ -52,6 +52,7 @@ class MediaTextEdit extends Component {
 
 		this.onSelectMedia = this.onSelectMedia.bind( this );
 		this.onMediaUpdate = this.onMediaUpdate.bind( this );
+		this.onMediaThumbnailUpdate = this.onMediaThumbnailUpdate.bind( this );
 		this.onWidthChange = this.onWidthChange.bind( this );
 		this.commitWidthChange = this.commitWidthChange.bind( this );
 		this.onLayoutChange = this.onLayoutChange.bind( this );
@@ -121,6 +122,14 @@ class MediaTextEdit extends Component {
 		} );
 	}
 
+	onMediaThumbnailUpdate( mediaUrl ) {
+		const { setAttributes } = this.props;
+
+		setAttributes( {
+			mediaUrl,
+		} );
+	}
+
 	onWidthChange( width ) {
 		this.setState( {
 			mediaWidth: applyWidthConstraints( width ),
@@ -221,6 +230,7 @@ class MediaTextEdit extends Component {
 				onFocus={ this.props.onFocus }
 				onMediaSelected={ this.onMediaSelected }
 				onMediaUpdate={ this.onMediaUpdate }
+				onMediaThumbnailUpdate={ this.onMediaThumbnailUpdate }
 				onSelectMedia={ this.onSelectMedia }
 				onSetOpenPickerRef={ this.onSetOpenPickerRef }
 				onWidthChange={ this.onWidthChange }
diff --git a/packages/block-library/src/media-text/icon-retry.native.js b/packages/block-library/src/media-text/icon-retry.native.js
index 580cd1fff188f..d9b3d82e796cb 100644
--- a/packages/block-library/src/media-text/icon-retry.native.js
+++ b/packages/block-library/src/media-text/icon-retry.native.js
@@ -6,6 +6,6 @@ import { Path, SVG } from '@wordpress/components';
 export default (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
-		<Path d="M0 0h24v24H0z" fill={ 'none' } />
+		<Path d="M0 0h24v24H0z" fill="none" />
 	</SVG>
 );
diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js
index 72b38c43d16a9..2d8556f9ebe32 100644
--- a/packages/block-library/src/media-text/media-container.js
+++ b/packages/block-library/src/media-text/media-container.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -173,7 +173,7 @@ function MediaContainer( props, ref ) {
 		return (
 			<ResizableBoxContainer
 				as="figure"
-				className={ classnames(
+				className={ clsx(
 					className,
 					'editor-media-container__resizer',
 					{ 'is-transient': isTemporaryMedia }
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 1e8a60dc3fa97..eaee027c06185 100644
--- a/packages/block-library/src/media-text/media-container.native.js
+++ b/packages/block-library/src/media-text/media-container.native.js
@@ -130,10 +130,23 @@ class MediaContainer extends Component {
 		return <Icon icon={ icon } { ...iconStyle } />;
 	}
 
-	updateMediaProgress() {
-		if ( ! this.state.isUploadInProgress ) {
+	updateMediaProgress( payload ) {
+		const { isUploadInProgress } = this.state;
+		const { mediaUrl, state } = payload;
+		const { mediaType, onMediaThumbnailUpdate } = this.props;
+
+		if ( ! isUploadInProgress ) {
 			this.setState( { isUploadInProgress: true } );
 		}
+
+		if (
+			isUploadInProgress &&
+			mediaType === MEDIA_TYPE_IMAGE &&
+			mediaUrl &&
+			! state
+		) {
+			onMediaThumbnailUpdate( mediaUrl );
+		}
 	}
 
 	finishMediaUploadWithSuccess( payload ) {
@@ -317,7 +330,7 @@ class MediaContainer extends Component {
 				onSelect={ this.onSelectMediaUploadOption }
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				onFocus={ this.props.onFocus }
-				className={ 'no-block-outline' }
+				className="no-block-outline"
 			/>
 		);
 	}
diff --git a/packages/block-library/src/media-text/save.js b/packages/block-library/src/media-text/save.js
index 53c6ef50f143b..5bf9517adae66 100644
--- a/packages/block-library/src/media-text/save.js
+++ b/packages/block-library/src/media-text/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -37,7 +37,7 @@ export default function save( { attributes } ) {
 	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 	const newRel = ! rel ? undefined : rel;
 
-	const imageClasses = classnames( {
+	const imageClasses = clsx( {
 		[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
 		[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
 	} );
@@ -67,7 +67,7 @@ export default function save( { attributes } ) {
 		image: () => image,
 		video: () => <video controls src={ mediaUrl } />,
 	};
-	const className = classnames( {
+	const className = clsx( {
 		'has-media-on-the-right': 'right' === mediaPosition,
 		'is-stacked-on-mobile': isStackedOnMobile,
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
index e43961ac89097..d24ef46409323 100644
--- a/packages/block-library/src/media-text/style.scss
+++ b/packages/block-library/src/media-text/style.scss
@@ -15,27 +15,28 @@
 }
 
 .wp-block-media-text.is-vertically-aligned-top {
-	.wp-block-media-text__content,
-	.wp-block-media-text__media {
+	> .wp-block-media-text__content,
+	> .wp-block-media-text__media {
 		align-self: start;
 	}
 }
+
 .wp-block-media-text,
 .wp-block-media-text.is-vertically-aligned-center {
-	.wp-block-media-text__content,
-	.wp-block-media-text__media {
+	> .wp-block-media-text__content,
+	> .wp-block-media-text__media {
 		align-self: center;
 	}
 }
 
 .wp-block-media-text.is-vertically-aligned-bottom {
-	.wp-block-media-text__content,
-	.wp-block-media-text__media {
+	> .wp-block-media-text__content,
+	> .wp-block-media-text__media {
 		align-self: end;
 	}
 }
 
-.wp-block-media-text .wp-block-media-text__media {
+.wp-block-media-text > .wp-block-media-text__media {
 	/*!rtl:begin:ignore*/
 	grid-column: 1;
 	grid-row: 1;
@@ -43,7 +44,7 @@
 	margin: 0;
 }
 
-.wp-block-media-text .wp-block-media-text__content {
+.wp-block-media-text > .wp-block-media-text__content {
 	direction: ltr;
 	/*!rtl:begin:ignore*/
 	grid-column: 2;
@@ -53,14 +54,14 @@
 	word-break: break-word;
 }
 
-.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
+.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
 	/*!rtl:begin:ignore*/
 	grid-column: 2;
 	grid-row: 1;
 	/*!rtl:end:ignore*/
 }
 
-.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
+.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
 	/*!rtl:begin:ignore*/
 	grid-column: 1;
 	grid-row: 1;
@@ -75,18 +76,18 @@
 	vertical-align: middle;
 }
 
-.wp-block-media-text.is-image-fill .wp-block-media-text__media {
+.wp-block-media-text.is-image-fill > .wp-block-media-text__media {
 	height: 100%;
 	min-height: 250px;
 	background-size: cover;
 }
 
-.wp-block-media-text.is-image-fill .wp-block-media-text__media > a {
+.wp-block-media-text.is-image-fill > .wp-block-media-text__media > a {
 	display: block;
 	height: 100%;
 }
 
-.wp-block-media-text.is-image-fill .wp-block-media-text__media img {
+.wp-block-media-text.is-image-fill > .wp-block-media-text__media img {
 	// The image is visually hidden but accessible to assistive technologies.
 	position: absolute;
 	width: 1px;
@@ -107,11 +108,11 @@
 @media (max-width: #{ ($break-small) }) {
 	.wp-block-media-text.is-stacked-on-mobile {
 		grid-template-columns: 100% !important;
-		.wp-block-media-text__media {
+		> .wp-block-media-text__media {
 			grid-column: 1;
 			grid-row: 1;
 		}
-		.wp-block-media-text__content {
+		> .wp-block-media-text__content {
 			grid-column: 1;
 			grid-row: 2;
 		}
diff --git a/packages/block-library/src/missing/edit.native.js b/packages/block-library/src/missing/edit.native.js
index a6164f590ca21..950d9afaaebf3 100644
--- a/packages/block-library/src/missing/edit.native.js
+++ b/packages/block-library/src/missing/edit.native.js
@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	View,
-	Text,
-	TouchableWithoutFeedback,
-	TouchableOpacity,
-} from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -25,6 +20,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as noticesStore } from '@wordpress/notices';
+import { requestUnsupportedBlockFallback } from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -48,11 +44,38 @@ export class UnsupportedBlockEdit extends Component {
 	}
 
 	toggleSheet() {
+		const { attributes, block, clientId } = this.props;
+		const { originalName } = attributes;
+		const title = this.getTitle();
+		const blockContent = serialize( block ? [ block ] : [] );
+
+		if ( this.canEditUnsupportedBlock() ) {
+			requestUnsupportedBlockFallback(
+				blockContent,
+				clientId,
+				originalName,
+				title
+			);
+			return;
+		}
+
 		this.setState( {
 			showHelp: ! this.state.showHelp,
 		} );
 	}
 
+	canEditUnsupportedBlock() {
+		const {
+			canEnableUnsupportedBlockEditor,
+			isUnsupportedBlockEditorSupported,
+		} = this.props;
+
+		return (
+			! canEnableUnsupportedBlockEditor &&
+			isUnsupportedBlockEditorSupported
+		);
+	}
+
 	closeSheet() {
 		this.setState( {
 			showHelp: false,
@@ -88,7 +111,7 @@ export class UnsupportedBlockEdit extends Component {
 				onPress={ this.onHelpButtonPressed }
 				style={ styles.helpIconContainer }
 				accessibilityLabel={ __( 'Help button' ) }
-				accessibilityRole={ 'button' }
+				accessibilityRole="button"
 				accessibilityHint={ __( 'Tap here to show help' ) }
 			>
 				<Icon
@@ -186,7 +209,11 @@ export class UnsupportedBlockEdit extends Component {
 		);
 
 		const subtitle = (
-			<Text style={ subTitleStyle }>{ __( 'Unsupported' ) }</Text>
+			<Text style={ subTitleStyle }>
+				{ this.canEditUnsupportedBlock()
+					? __( 'Tap to edit' )
+					: __( 'Unsupported' ) }
+			</Text>
 		);
 
 		const icon = blockType
@@ -198,10 +225,10 @@ export class UnsupportedBlockEdit extends Component {
 		);
 		const iconClassName = 'unsupported-icon' + '-' + preferredColorScheme;
 		return (
-			<TouchableWithoutFeedback
-				disabled={ ! this.props.isSelected }
+			<TouchableOpacity
+				activeOpacity={ 0.5 }
 				accessibilityLabel={ __( 'Help button' ) }
-				accessibilityRole={ 'button' }
+				accessibilityRole="button"
 				accessibilityHint={ __( 'Tap here to show help' ) }
 				onPress={ this.toggleSheet }
 			>
@@ -211,7 +238,8 @@ export class UnsupportedBlockEdit extends Component {
 						styles.unsupportedBlockDark
 					) }
 				>
-					{ this.renderHelpIcon() }
+					{ ! this.canEditUnsupportedBlock() &&
+						this.renderHelpIcon() }
 					<View style={ styles.unsupportedBlockHeader }>
 						<Icon
 							className={ iconClassName }
@@ -223,7 +251,7 @@ export class UnsupportedBlockEdit extends Component {
 					{ subtitle }
 					{ this.renderSheet( title, originalName ) }
 				</View>
-			</TouchableWithoutFeedback>
+			</TouchableOpacity>
 		);
 	}
 }
diff --git a/packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap
index 245410a5c5d57..2ac371120be4b 100644
--- a/packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap
@@ -9,12 +9,21 @@ exports[`Missing block renders without crashing 1`] = `
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": true,
+      "disabled": undefined,
       "expanded": undefined,
       "selected": undefined,
     }
   }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
+  collapsable={false}
   focusable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -23,72 +32,79 @@ exports[`Missing block renders without crashing 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "opacity": 1,
+    }
+  }
 >
-  <View
-    accessibilityHint="Tap here to show help"
-    accessibilityLabel="Help button"
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
+  <View>
+    <View
+      accessibilityHint="Tap here to show help"
+      accessibilityLabel="Help button"
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
       }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
       }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "opacity": 1,
+        }
       }
-    }
-  >
-    <Svg
-      height={24}
-      label="Help icon"
-      style={{}}
-      viewBox="0 0 24 24"
-      width={24}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      Path
-    </Svg>
-  </View>
-  <View>
-    <Svg
-      fill="white"
-      height={24}
-      style={{}}
-      viewBox="0 0 24 24"
-      width={24}
-      xmlns="http://www.w3.org/2000/svg"
     >
-      Path
-    </Svg>
+      <Svg
+        height={24}
+        label="Help icon"
+        style={{}}
+        viewBox="0 0 24 24"
+        width={24}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        Path
+      </Svg>
+    </View>
+    <View>
+      <Svg
+        fill="white"
+        height={24}
+        style={{}}
+        viewBox="0 0 24 24"
+        width={24}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        Path
+      </Svg>
+      <Text>
+        missing/block/title
+      </Text>
+    </View>
     <Text>
-      missing/block/title
+      Unsupported
     </Text>
   </View>
-  <Text>
-    Unsupported
-  </Text>
 </View>
 `;
diff --git a/packages/block-library/src/more/block.json b/packages/block-library/src/more/block.json
index b071f6ba5d7ef..d1153ca4f1689 100644
--- a/packages/block-library/src/more/block.json
+++ b/packages/block-library/src/more/block.json
@@ -9,7 +9,8 @@
 	"textdomain": "default",
 	"attributes": {
 		"customText": {
-			"type": "string"
+			"type": "string",
+			"default": ""
 		},
 		"noTeaser": {
 			"type": "boolean",
diff --git a/packages/block-library/src/more/edit.js b/packages/block-library/src/more/edit.js
index 7757af5e96ba1..bcad7ec1b8366 100644
--- a/packages/block-library/src/more/edit.js
+++ b/packages/block-library/src/more/edit.js
@@ -16,8 +16,7 @@ export default function MoreEdit( {
 } ) {
 	const onChangeInput = ( event ) => {
 		setAttributes( {
-			customText:
-				event.target.value !== '' ? event.target.value : undefined,
+			customText: event.target.value,
 		} );
 	};
 
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index fb0f1cacc29e9..57ac7c24b60e7 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -259,6 +259,7 @@ export default function NavigationLinkEdit( {
 	const isDraggingWithin = useIsDraggingWithin( listItemRef );
 	const itemLabelPlaceholder = __( 'Add label…' );
 	const ref = useRef();
+	const linkUIref = useRef();
 	const prevUrl = usePrevious( url );
 
 	const {
@@ -397,7 +398,7 @@ export default function NavigationLinkEdit( {
 
 	const blockProps = useBlockProps( {
 		ref: useMergeRefs( [ setPopoverAnchor, listItemRef ] ),
-		className: classnames( 'wp-block-navigation-item', {
+		className: clsx( 'wp-block-navigation-item', {
 			'is-editing': isSelected || isParentOfSelectedBlock,
 			'is-dragging-within': isDraggingWithin,
 			'has-link': !! url,
@@ -434,7 +435,7 @@ export default function NavigationLinkEdit( {
 		};
 	}
 
-	const classes = classnames( 'wp-block-navigation-item__content', {
+	const classes = clsx( 'wp-block-navigation-item__content', {
 		'wp-block-navigation-link__placeholder': ! url || isInvalid || isDraft,
 	} );
 
@@ -559,14 +560,27 @@ export default function NavigationLinkEdit( {
 					) }
 					{ isLinkOpen && (
 						<LinkUI
+							ref={ linkUIref }
 							clientId={ clientId }
 							link={ attributes }
 							onClose={ () => {
 								// If there is no link then remove the auto-inserted block.
 								// This avoids empty blocks which can provided a poor UX.
 								if ( ! url ) {
-									// Select the previous block to keep focus nearby
-									selectPreviousBlock( clientId, true );
+									// Fixes https://github.com/WordPress/gutenberg/issues/61361
+									// There's a chance we're closing due to the user selecting the browse all button.
+									// Only move focus if the focus is still within the popover ui. If it's not within
+									// the popover, it's because something has taken the focus from the popover, and
+									// we don't want to steal it back.
+									if (
+										linkUIref.current.contains(
+											window.document.activeElement
+										)
+									) {
+										// Select the previous block to keep focus nearby
+										selectPreviousBlock( clientId, true );
+									}
+
 									// Remove the link.
 									onReplace( [] );
 									return;
diff --git a/packages/block-library/src/navigation-link/link-ui.js b/packages/block-library/src/navigation-link/link-ui.js
index ce79af40e4708..6619c46253546 100644
--- a/packages/block-library/src/navigation-link/link-ui.js
+++ b/packages/block-library/src/navigation-link/link-ui.js
@@ -20,6 +20,7 @@ import {
 	useState,
 	useRef,
 	useEffect,
+	forwardRef,
 } from '@wordpress/element';
 import {
 	store as coreStore,
@@ -145,7 +146,7 @@ function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
 	);
 }
 
-export function LinkUI( props ) {
+function UnforwardedLinkUI( props, ref ) {
 	const [ addingBlock, setAddingBlock ] = useState( false );
 	const [ focusAddBlockButton, setFocusAddBlockButton ] = useState( false );
 	const { saveEntityRecord } = useDispatch( coreStore );
@@ -214,6 +215,7 @@ export function LinkUI( props ) {
 
 	return (
 		<Popover
+			ref={ ref }
 			placement="bottom"
 			onClose={ props.onClose }
 			anchor={ props.anchor }
@@ -298,6 +300,8 @@ export function LinkUI( props ) {
 	);
 }
 
+export const LinkUI = forwardRef( UnforwardedLinkUI );
+
 const LinkUITools = ( { setAddingBlock, focusAddBlockButton } ) => {
 	const blockInserterAriaRole = 'listbox';
 	const addBlockButtonRef = useRef();
diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js
index 11660b0621e4e..bbba77707e815 100644
--- a/packages/block-library/src/navigation-submenu/edit.js
+++ b/packages/block-library/src/navigation-submenu/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -293,7 +293,7 @@ export default function NavigationSubmenuEdit( {
 
 	const blockProps = useBlockProps( {
 		ref: useMergeRefs( [ setPopoverAnchor, listItemRef ] ),
-		className: classnames( 'wp-block-navigation-item', {
+		className: clsx( 'wp-block-navigation-item', {
 			'is-editing': isSelected || isParentOfSelectedBlock,
 			'is-dragging-within': isDraggingWithin,
 			'has-link': !! url,
@@ -459,34 +459,32 @@ export default function NavigationSubmenuEdit( {
 				{ /* eslint-disable jsx-a11y/anchor-is-valid */ }
 				<ParentElement className="wp-block-navigation-item__content">
 					{ /* eslint-enable */ }
-					{
-						<RichText
-							ref={ ref }
-							identifier="label"
-							className="wp-block-navigation-item__label"
-							value={ label }
-							onChange={ ( labelValue ) =>
-								setAttributes( { label: labelValue } )
+					<RichText
+						ref={ ref }
+						identifier="label"
+						className="wp-block-navigation-item__label"
+						value={ label }
+						onChange={ ( labelValue ) =>
+							setAttributes( { label: labelValue } )
+						}
+						onMerge={ mergeBlocks }
+						onReplace={ onReplace }
+						aria-label={ __( 'Navigation link text' ) }
+						placeholder={ itemLabelPlaceholder }
+						withoutInteractiveFormatting
+						allowedFormats={ [
+							'core/bold',
+							'core/italic',
+							'core/image',
+							'core/strikethrough',
+						] }
+						onClick={ () => {
+							if ( ! openSubmenusOnClick && ! url ) {
+								setIsLinkOpen( true );
+								setOpenedBy( ref.current );
 							}
-							onMerge={ mergeBlocks }
-							onReplace={ onReplace }
-							aria-label={ __( 'Navigation link text' ) }
-							placeholder={ itemLabelPlaceholder }
-							withoutInteractiveFormatting
-							allowedFormats={ [
-								'core/bold',
-								'core/italic',
-								'core/image',
-								'core/strikethrough',
-							] }
-							onClick={ () => {
-								if ( ! openSubmenusOnClick && ! url ) {
-									setIsLinkOpen( true );
-									setOpenedBy( ref.current );
-								}
-							} }
-						/>
-					}
+						} }
+					/>
 					{ ! openSubmenusOnClick && isLinkOpen && (
 						<LinkUI
 							clientId={ clientId }
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index e232be2e0fe5d..5477dc1aeebf3 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -409,7 +409,7 @@ function Navigation( {
 	const isResponsive = 'never' !== overlayMenu;
 	const blockProps = useBlockProps( {
 		ref: navRef,
-		className: classnames(
+		className: clsx(
 			className,
 			{
 				'items-justified-right': justifyContent === 'right',
@@ -558,7 +558,7 @@ function Navigation( {
 	const hasManagePermissions =
 		canUserCreateNavigationMenus || canUserUpdateNavigationMenu;
 
-	const overlayMenuPreviewClasses = classnames(
+	const overlayMenuPreviewClasses = clsx(
 		'wp-block-navigation__overlay-menu-preview',
 		{ open: overlayMenuPreview }
 	);
diff --git a/packages/block-library/src/navigation/edit/responsive-wrapper.js b/packages/block-library/src/navigation/edit/responsive-wrapper.js
index ff66be85b5cde..0c6fa0e3b9128 100644
--- a/packages/block-library/src/navigation/edit/responsive-wrapper.js
+++ b/packages/block-library/src/navigation/edit/responsive-wrapper.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ export default function ResponsiveWrapper( {
 		return children;
 	}
 
-	const responsiveContainerClasses = classnames(
+	const responsiveContainerClasses = clsx(
 		'wp-block-navigation__responsive-container',
 		{
 			'has-text-color':
@@ -59,7 +59,7 @@ export default function ResponsiveWrapper( {
 			overlayBackgroundColor.color,
 	};
 
-	const openButtonClasses = classnames(
+	const openButtonClasses = clsx(
 		'wp-block-navigation__responsive-container-open',
 		{ 'always-shown': isHiddenByDefault }
 	);
diff --git a/packages/block-library/src/navigation/edit/utils.js b/packages/block-library/src/navigation/edit/utils.js
index 2c436af8c5754..943fc3b4cb4c1 100644
--- a/packages/block-library/src/navigation/edit/utils.js
+++ b/packages/block-library/src/navigation/edit/utils.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
@@ -91,7 +91,7 @@ export function getColors( context, isSubMenu ) {
 
 export function getNavigationChildBlockProps( innerBlocksColors ) {
 	return {
-		className: classnames( 'wp-block-navigation__submenu-container', {
+		className: clsx( 'wp-block-navigation__submenu-container', {
 			'has-text-color': !! (
 				innerBlocksColors.textColor || innerBlocksColors.customTextColor
 			),
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 107fb6e6de5fd..9f22262c53bd9 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -468,10 +468,6 @@ $color-control-label-height: 20px;
 	top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width;
 }
 
-.is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open {
-	right: $sidebar-width;
-}
-
 // When fullscreen.
 .is-fullscreen-mode {
 	.wp-block-navigation__responsive-container.is-menu-open {
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 49c4c67969191..940277d47a2af 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -7,27 +7,36 @@
 
 /**
  * Helper functions used to render the navigation block.
+ *
+ * @since 6.5.0
  */
 class WP_Navigation_Block_Renderer {
 
 	/**
 	 * Used to determine whether or not a navigation has submenus.
+	 *
+	 * @since 6.5.0
 	 */
 	private static $has_submenus = false;
 
 	/**
 	 * Used to determine which blocks need an <li> wrapper.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @var array
 	 */
 	private static $needs_list_item_wrapper = array(
 		'core/site-title',
 		'core/site-logo',
+		'core/social-links',
 	);
 
 	/**
 	 * Keeps track of all the navigation names that have been seen.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @var array
 	 */
 	private static $seen_menu_names = array();
@@ -35,6 +44,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Returns whether or not this is responsive navigation.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array $attributes The block attributes.
 	 * @return bool Returns whether or not this is responsive navigation.
 	 */
@@ -50,6 +61,8 @@ private static function is_responsive( $attributes ) {
 	/**
 	 * Returns whether or not a navigation has a submenu.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param WP_Block_List $inner_blocks The list of inner blocks.
 	 * @return bool Returns whether or not a navigation has a submenu and also sets the member variable.
 	 */
@@ -87,6 +100,8 @@ private static function has_submenus( $inner_blocks ) {
 	/**
 	 * Determine whether the navigation blocks is interactive.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array         $attributes   The block attributes.
 	 * @param WP_Block_List $inner_blocks The list of inner blocks.
 	 * @return bool Returns whether or not to load the view script.
@@ -100,6 +115,8 @@ private static function is_interactive( $attributes, $inner_blocks ) {
 	/**
 	 * Returns whether or not a block needs a list item wrapper.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param WP_Block $block The block.
 	 * @return bool Returns whether or not a block needs a list item wrapper.
 	 */
@@ -126,6 +143,8 @@ private static function does_block_need_a_list_item_wrapper( $block ) {
 	/**
 	 * Returns the markup for a single inner block.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param WP_Block $inner_block The inner block.
 	 * @return string Returns the markup for a single inner block.
 	 */
@@ -143,6 +162,8 @@ private static function get_markup_for_inner_block( $inner_block ) {
 	/**
 	 * Returns the html for the inner blocks of the navigation block.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array         $attributes   The block attributes.
 	 * @param WP_Block_List $inner_blocks The list of inner blocks.
 	 * @return string Returns the html for the inner blocks of the navigation block.
@@ -200,6 +221,8 @@ private static function get_inner_blocks_html( $attributes, $inner_blocks ) {
 	/**
 	 * Gets the inner blocks for the navigation block from the navigation post.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array $attributes The block attributes.
 	 * @return WP_Block_List Returns the inner blocks for the navigation block.
 	 */
@@ -235,6 +258,8 @@ private static function get_inner_blocks_from_navigation_post( $attributes ) {
 	/**
 	 * Gets the inner blocks for the navigation block from the fallback.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array $attributes The block attributes.
 	 * @return WP_Block_List Returns the inner blocks for the navigation block.
 	 */
@@ -252,6 +277,8 @@ private static function get_inner_blocks_from_fallback( $attributes ) {
 	/**
 	 * Gets the inner blocks for the navigation block.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array    $attributes The block attributes.
 	 * @param WP_Block $block The parsed block.
 	 * @return WP_Block_List Returns the inner blocks for the navigation block.
@@ -310,6 +337,8 @@ private static function get_inner_blocks( $attributes, $block ) {
 	/**
 	 * Gets the name of the current navigation, if it has one.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array $attributes The block attributes.
 	 * @return string Returns the name of the navigation.
 	 */
@@ -345,6 +374,8 @@ private static function get_navigation_name( $attributes ) {
 	/**
 	 * Returns the layout class for the navigation block.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array $attributes The block attributes.
 	 * @return string Returns the layout class for the navigation block.
 	 */
@@ -376,6 +407,8 @@ private static function get_layout_class( $attributes ) {
 	/**
 	 * Return classes for the navigation block.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array $attributes The block attributes.
 	 * @return string Returns the classes for the navigation block.
 	 */
@@ -403,6 +436,8 @@ private static function get_classes( $attributes ) {
 	/**
 	 * Get styles for the navigation block.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array $attributes The block attributes.
 	 * @return string Returns the styles for the navigation block.
 	 */
@@ -416,6 +451,8 @@ private static function get_styles( $attributes ) {
 	/**
 	 * Get the responsive container markup
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array         $attributes The block attributes.
 	 * @param WP_Block_List $inner_blocks The list of inner blocks.
 	 * @param string        $inner_blocks_html The markup for the inner blocks.
@@ -514,6 +551,8 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
 	/**
 	 * Get the wrapper attributes
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array         $attributes    The block attributes.
 	 * @param WP_Block_List $inner_blocks  A list of inner blocks.
 	 * @return string Returns the navigation block markup.
@@ -543,6 +582,8 @@ private static function get_nav_wrapper_attributes( $attributes, $inner_blocks )
 	/**
 	 * Gets the nav element directives.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param bool $is_interactive Whether the block is interactive.
 	 * @return string the directives for the navigation element.
 	 */
@@ -573,6 +614,8 @@ private static function get_nav_element_directives( $is_interactive ) {
 	/**
 	 * Handle view script module loading.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array         $attributes   The block attributes.
 	 * @param WP_Block      $block        The parsed block.
 	 * @param WP_Block_List $inner_blocks The list of inner blocks.
@@ -597,6 +640,8 @@ private static function handle_view_script_module_loading( $attributes, $block,
 	/**
 	 * Returns the markup for the navigation block.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array         $attributes The block attributes.
 	 * @param WP_Block_List $inner_blocks The list of inner blocks.
 	 * @return string Returns the navigation wrapper markup.
@@ -612,6 +657,8 @@ private static function get_wrapper_markup( $attributes, $inner_blocks ) {
 	/**
 	 * Returns a unique name for the navigation.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array $attributes The block attributes.
 	 * @return string Returns a unique name for the navigation.
 	 */
@@ -631,6 +678,8 @@ private static function get_unique_navigation_name( $attributes ) {
 	/**
 	 * Renders the navigation block.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array    $attributes The block attributes.
 	 * @param string   $content    The saved content.
 	 * @param WP_Block $block      The parsed block.
@@ -1568,10 +1617,16 @@ function block_core_navigation_update_ignore_hooked_blocks_meta( $post ) {
 $rest_insert_wp_navigation_core_callback = 'block_core_navigation_' . 'update_ignore_hooked_blocks_meta'; // phpcs:ignore Generic.Strings.UnnecessaryStringConcat.Found
 
 /*
- * Injection of hooked blocks into the Navigation block relies on some functions present in WP >= 6.5
- * that are not present in Gutenberg's WP 6.5 compatibility layer.
+ * 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 ( function_exists( 'set_ignored_hooked_blocks_metadata' ) && ! has_filter( 'rest_pre_insert_wp_navigation', $rest_insert_wp_navigation_core_callback ) ) {
+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' );
 }
 
@@ -1603,7 +1658,9 @@ function block_core_navigation_insert_hooked_blocks_into_rest_response( $respons
 	// Remove mock Navigation block wrapper.
 	$content = block_core_navigation_remove_serialized_parent_block( $content );
 
-	$response->data['content']['raw']      = $content;
+	$response->data['content']['raw'] = $content;
+
+	/** This filter is documented in wp-includes/post-template.php */
 	$response->data['content']['rendered'] = apply_filters( 'the_content', $content );
 
 	return $response;
@@ -1617,9 +1674,15 @@ function block_core_navigation_insert_hooked_blocks_into_rest_response( $respons
 $rest_prepare_wp_navigation_core_callback = 'block_core_navigation_' . 'insert_hooked_blocks_into_rest_response';
 
 /*
- * Injection of hooked blocks into the Navigation block relies on some functions present in WP >= 6.5
- * that are not present in Gutenberg's WP 6.5 compatibility layer.
+ * 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 ( function_exists( 'set_ignored_hooked_blocks_metadata' ) && ! has_filter( 'rest_prepare_wp_navigation', $rest_prepare_wp_navigation_core_callback ) ) {
+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/page-list-item/edit.js b/packages/block-library/src/page-list-item/edit.js
index dda1ab155816f..56a11ee073e16 100644
--- a/packages/block-library/src/page-list-item/edit.js
+++ b/packages/block-library/src/page-list-item/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -52,7 +52,7 @@ export default function PageListItemEdit( { context, attributes } ) {
 	return (
 		<li
 			key={ id }
-			className={ classnames( 'wp-block-pages-list__item', {
+			className={ clsx( 'wp-block-pages-list__item', {
 				'has-child': hasChildren,
 				'wp-block-navigation-item': isNavigationChild,
 				'open-on-click': context.openSubmenusOnClick,
@@ -76,7 +76,7 @@ export default function PageListItemEdit( { context, attributes } ) {
 				</>
 			) : (
 				<a
-					className={ classnames( 'wp-block-pages-list__item__link', {
+					className={ clsx( 'wp-block-pages-list__item__link', {
 						'wp-block-navigation-item__content': isNavigationChild,
 					} ) }
 					href={ link }
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 8f8c75f6dea1c..12277bee01faf 100644
--- a/packages/block-library/src/page-list/convert-to-links-modal.js
+++ b/packages/block-library/src/page-list/convert-to-links-modal.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { Button, Modal } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 export const convertDescription = __(
@@ -13,12 +14,20 @@ export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
 		<Modal
 			onRequestClose={ onClose }
 			title={ __( 'Edit Page List' ) }
-			className={ 'wp-block-page-list-modal' }
+			className="wp-block-page-list-modal"
 			aria={ {
-				describedby: 'wp-block-page-list-modal__description',
+				describedby: useInstanceId(
+					ConvertToLinksModal,
+					'wp-block-page-list-modal__description'
+				),
 			} }
 		>
-			<p id={ 'wp-block-page-list-modal__description' }>
+			<p
+				id={ useInstanceId(
+					ConvertToLinksModal,
+					'wp-block-page-list-modal__description'
+				) }
+			>
 				{ convertDescription }
 			</p>
 			<div className="wp-block-page-list-modal-buttons">
@@ -27,6 +36,7 @@ export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
 				</Button>
 				<Button
 					variant="primary"
+					__experimentalIsFocusable
 					disabled={ disabled }
 					onClick={ onClick }
 				>
diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
index 34b35d61a7fa6..11ecfa67e1859 100644
--- a/packages/block-library/src/page-list/edit.js
+++ b/packages/block-library/src/page-list/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -63,7 +63,7 @@ function BlockContent( {
 	if ( pages === null ) {
 		return (
 			<div { ...blockProps }>
-				<Notice status={ 'warning' } isDismissible={ false }>
+				<Notice status="warning" isDismissible={ false }>
 					{ __( 'Page List: Cannot retrieve Pages.' ) }
 				</Notice>
 			</div>
@@ -73,7 +73,7 @@ function BlockContent( {
 	if ( pages.length === 0 ) {
 		return (
 			<div { ...blockProps }>
-				<Notice status={ 'info' } isDismissible={ false }>
+				<Notice status="info" isDismissible={ false }>
 					{ __( 'Page List: Cannot retrieve Pages.' ) }
 				</Notice>
 			</div>
@@ -101,7 +101,7 @@ function BlockContent( {
 
 		return (
 			<div { ...blockProps }>
-				<Notice status={ 'warning' } isDismissible={ false }>
+				<Notice status="warning" isDismissible={ false }>
 					{ __( 'Page List: Cannot retrieve Pages.' ) }
 				</Notice>
 			</div>
@@ -170,7 +170,7 @@ export default function PageListEdit( {
 	}, [ pages ] );
 
 	const blockProps = useBlockProps( {
-		className: classnames( 'wp-block-page-list', {
+		className: clsx( 'wp-block-page-list', {
 			'has-text-color': !! context.textColor,
 			[ getColorClassName( 'color', context.textColor ) ]:
 				!! context.textColor,
@@ -338,6 +338,7 @@ export default function PageListEdit( {
 						<p>{ convertDescription }</p>
 						<Button
 							variant="primary"
+							__experimentalIsFocusable
 							disabled={ ! hasResolvedPages }
 							onClick={ convertToNavigationLinks }
 						>
diff --git a/packages/block-library/src/paragraph/deprecated.js b/packages/block-library/src/paragraph/deprecated.js
index b5b62992aab76..855b23f4aed29 100644
--- a/packages/block-library/src/paragraph/deprecated.js
+++ b/packages/block-library/src/paragraph/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -110,7 +110,7 @@ const deprecated = [
 		},
 		save( { attributes } ) {
 			const { align, content, dropCap, direction } = attributes;
-			const className = classnames( {
+			const className = clsx( {
 				'has-drop-cap':
 					align === ( isRTL() ? 'left' : 'right' ) ||
 					align === 'center'
@@ -162,7 +162,7 @@ const deprecated = [
 			);
 			const fontSizeClass = getFontSizeClass( fontSize );
 
-			const className = classnames( {
+			const className = clsx( {
 				'has-text-color': textColor || customTextColor,
 				'has-background': backgroundColor || customBackgroundColor,
 				'has-drop-cap': dropCap,
@@ -227,7 +227,7 @@ const deprecated = [
 			);
 			const fontSizeClass = getFontSizeClass( fontSize );
 
-			const className = classnames( {
+			const className = clsx( {
 				'has-text-color': textColor || customTextColor,
 				'has-background': backgroundColor || customBackgroundColor,
 				'has-drop-cap': dropCap,
@@ -295,7 +295,7 @@ const deprecated = [
 			);
 			const fontSizeClass = fontSize && `is-${ fontSize }-text`;
 
-			const className = classnames( {
+			const className = clsx( {
 				[ `align${ width }` ]: width,
 				'has-background': backgroundColor || customBackgroundColor,
 				'has-drop-cap': dropCap,
@@ -341,7 +341,7 @@ const deprecated = [
 				textColor,
 				fontSize,
 			} = attributes;
-			const className = classnames( {
+			const className = clsx( {
 				[ `align${ width }` ]: width,
 				'has-background': backgroundColor,
 				'has-drop-cap': dropCap,
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index 061cb672ae259..7edfbbc6252ae 100644
--- a/packages/block-library/src/paragraph/edit.js
+++ b/packages/block-library/src/paragraph/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -100,7 +100,7 @@ function ParagraphBlock( {
 	const { align, content, direction, dropCap, placeholder } = attributes;
 	const blockProps = useBlockProps( {
 		ref: useOnEnter( { clientId, content } ),
-		className: classnames( {
+		className: clsx( {
 			'has-drop-cap': hasDropCapDisabled( align ) ? false : dropCap,
 			[ `has-text-align-${ align }` ]: align,
 		} ),
diff --git a/packages/block-library/src/paragraph/save.js b/packages/block-library/src/paragraph/save.js
index 5f451225ff223..c503b5f2b4322 100644
--- a/packages/block-library/src/paragraph/save.js
+++ b/packages/block-library/src/paragraph/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { isRTL } from '@wordpress/i18n';
 
 export default function save( { attributes } ) {
 	const { align, content, dropCap, direction } = attributes;
-	const className = classnames( {
+	const className = clsx( {
 		'has-drop-cap':
 			align === ( isRTL() ? 'left' : 'right' ) || align === 'center'
 				? false
diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss
index 34960bdb2fd58..7bd8c77e85de8 100644
--- a/packages/block-library/src/paragraph/style.scss
+++ b/packages/block-library/src/paragraph/style.scss
@@ -38,7 +38,8 @@ p.has-drop-cap.has-background {
 	overflow: hidden;
 }
 
-p.has-background {
+// Specificity is reduced to 0-1-0 so global styles can override this.
+:root :where(p.has-background) {
 	padding: $block-bg-padding--v $block-bg-padding--h;
 }
 
diff --git a/packages/block-library/src/paragraph/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/paragraph/test/__snapshots__/edit.native.js.snap
index 2910d1551ca28..10e599372dfef 100644
--- a/packages/block-library/src/paragraph/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/paragraph/test/__snapshots__/edit.native.js.snap
@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Paragraph block should prevent deleting the first Paragraph block when pressing backspace at the start 1`] = `
+"<!-- wp:paragraph -->
+<p>A quick brown fox jumps over the lazy dog.</p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`Paragraph block should render without crashing and match snapshot 1`] = `
 <View
   style={
diff --git a/packages/block-library/src/paragraph/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/paragraph/test/__snapshots__/transforms.native.js.snap
index b0855c02bd0e9..3a2a928b81f5e 100644
--- a/packages/block-library/src/paragraph/test/__snapshots__/transforms.native.js.snap
+++ b/packages/block-library/src/paragraph/test/__snapshots__/transforms.native.js.snap
@@ -32,7 +32,7 @@ exports[`Paragraph block transforms to Heading block 1`] = `
 
 exports[`Paragraph block transforms to List block 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Example text</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->"
diff --git a/packages/block-library/src/paragraph/test/edit.native.js b/packages/block-library/src/paragraph/test/edit.native.js
index 9cbd2344ced7e..df18654c1915d 100644
--- a/packages/block-library/src/paragraph/test/edit.native.js
+++ b/packages/block-library/src/paragraph/test/edit.native.js
@@ -64,6 +64,32 @@ describe( 'Paragraph block', () => {
 		expect( screen.toJSON() ).toMatchSnapshot();
 	} );
 
+	it( 'should prevent deleting the first Paragraph block when pressing backspace at the start', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 0, finalSelectionEnd: 0 }
+		);
+
+		fireEvent( paragraphTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
 	it( 'should bold text', async () => {
 		// Arrange
 		const screen = await initializeEditor();
diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js
index 7b78796aacd54..f496132f6e2b1 100644
--- a/packages/block-library/src/pattern/edit.js
+++ b/packages/block-library/src/pattern/edit.js
@@ -43,7 +43,7 @@ const PatternEdit = ( { attributes, clientId } ) => {
 	const [ hasRecursionError, setHasRecursionError ] = useState( false );
 	const parsePatternDependencies = useParsePatternDependencies();
 
-	// Duplicated in packages/edit-site/src/components/start-template-options/index.js.
+	// Duplicated in packages/editor/src/components/start-template-options/index.js.
 	function injectThemeAttributeInBlockTemplateContent( block ) {
 		if (
 			block.innerBlocks.find(
diff --git a/packages/block-library/src/post-author-biography/edit.js b/packages/block-library/src/post-author-biography/edit.js
index 6bd733f32fd46..20f9e94302e4b 100644
--- a/packages/block-library/src/post-author-biography/edit.js
+++ b/packages/block-library/src/post-author-biography/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -37,7 +37,7 @@ function PostAuthorBiographyEdit( {
 	);
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/post-author-name/edit.js b/packages/block-library/src/post-author-name/edit.js
index 9cd2d40799a00..b4afb9a979949 100644
--- a/packages/block-library/src/post-author-name/edit.js
+++ b/packages/block-library/src/post-author-name/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -39,7 +39,7 @@ function PostAuthorNameEdit( {
 	);
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js
index 9927525dcefa4..dfe0a001d2ee5 100644
--- a/packages/block-library/src/post-author/edit.js
+++ b/packages/block-library/src/post-author/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -72,7 +72,7 @@ function PostAuthorEdit( {
 	}
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/post-comments-count/edit.js b/packages/block-library/src/post-comments-count/edit.js
index e5d0ec9352eda..9e148a1c33b03 100644
--- a/packages/block-library/src/post-comments-count/edit.js
+++ b/packages/block-library/src/post-comments-count/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -26,7 +26,7 @@ export default function PostCommentsCountEdit( {
 	const { postId } = context;
 	const [ commentsCount, setCommentsCount ] = useState();
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/post-comments-form/edit.js b/packages/block-library/src/post-comments-form/edit.js
index b63c798a2458a..11089cbe627ff 100644
--- a/packages/block-library/src/post-comments-form/edit.js
+++ b/packages/block-library/src/post-comments-form/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ export default function PostCommentsFormEdit( {
 	const instanceIdDesc = sprintf( 'comments-form-edit-%d-desc', instanceId );
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 		'aria-describedby': instanceIdDesc,
diff --git a/packages/block-library/src/post-comments-form/form.js b/packages/block-library/src/post-comments-form/form.js
index 10483e145f709..f6ab07ed897d7 100644
--- a/packages/block-library/src/post-comments-form/form.js
+++ b/packages/block-library/src/post-comments-form/form.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -44,7 +44,7 @@ const CommentsFormPlaceholder = () => {
 					<input
 						name="submit"
 						type="submit"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-button__link',
 							__experimentalGetElementClassName( 'button' )
 						) }
diff --git a/packages/block-library/src/post-comments-link/edit.js b/packages/block-library/src/post-comments-link/edit.js
index 36e617c55a3e7..e90734e9740bb 100644
--- a/packages/block-library/src/post-comments-link/edit.js
+++ b/packages/block-library/src/post-comments-link/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -25,7 +25,7 @@ function PostCommentsLinkEdit( { context, attributes, setAttributes } ) {
 	const [ commentsCount, setCommentsCount ] = useState();
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js
index 0a70758ac32f0..cfb5c57210600 100644
--- a/packages/block-library/src/post-date/edit.js
+++ b/packages/block-library/src/post-date/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -35,7 +35,7 @@ export default function PostDateEdit( {
 	setAttributes,
 } ) {
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 			[ `wp-block-post-date__modified-date` ]: displayType === 'modified',
 		} ),
diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js
index 2f0cee86f0932..702219e06a969 100644
--- a/packages/block-library/src/post-excerpt/edit.js
+++ b/packages/block-library/src/post-excerpt/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -71,7 +71,7 @@ export default function PostExcerptEditor( {
 		userCanEdit && ! isDescendentOfQueryLoop && postTypeSupportsExcerpts;
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
@@ -141,7 +141,7 @@ export default function PostExcerptEditor( {
 			withoutInteractiveFormatting
 		/>
 	);
-	const excerptClassName = classnames( 'wp-block-post-excerpt__excerpt', {
+	const excerptClassName = clsx( 'wp-block-post-excerpt__excerpt', {
 		'is-inline': ! showMoreOnNewLine,
 	} );
 
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 b64b3299fc96b..c8e8c0005cfef 100644
--- a/packages/block-library/src/post-featured-image/dimension-controls.js
+++ b/packages/block-library/src/post-featured-image/dimension-controls.js
@@ -57,7 +57,13 @@ const DimensionControls = ( {
 	setAttributes,
 	media,
 } ) => {
-	const [ availableUnits ] = useSettings( 'spacing.units' );
+	const [ availableUnits, defaultRatios, themeRatios, showDefaultRatios ] =
+		useSettings(
+			'spacing.units',
+			'dimensions.aspectRatios.default',
+			'dimensions.aspectRatios.theme',
+			'dimensions.defaultAspectRatios'
+		);
 	const units = useCustomUnits( {
 		availableUnits: availableUnits || [ 'px', '%', 'vw', 'em', 'rem' ],
 	} );
@@ -93,6 +99,28 @@ const DimensionControls = ( {
 	const showScaleControl =
 		height || ( aspectRatio && aspectRatio !== 'auto' );
 
+	const themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {
+		label: name,
+		value: ratio,
+	} ) );
+
+	const defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( {
+		label: name,
+		value: ratio,
+	} ) );
+
+	const aspectRatioOptions = [
+		{
+			label: _x(
+				'Original',
+				'Aspect ratio option for dimensions control'
+			),
+			value: 'auto',
+		},
+		...( showDefaultRatios ? defaultOptions : [] ),
+		...( themeOptions ? themeOptions : [] ),
+	];
+
 	return (
 		<>
 			<ToolsPanelItem
@@ -109,41 +137,7 @@ const DimensionControls = ( {
 					__nextHasNoMarginBottom
 					label={ __( 'Aspect ratio' ) }
 					value={ aspectRatio }
-					options={ [
-						// These should use the same values as AspectRatioDropdown in @wordpress/block-editor
-						{
-							label: __( 'Original' ),
-							value: 'auto',
-						},
-						{
-							label: __( 'Square' ),
-							value: '1',
-						},
-						{
-							label: __( '16:9' ),
-							value: '16/9',
-						},
-						{
-							label: __( '4:3' ),
-							value: '4/3',
-						},
-						{
-							label: __( '3:2' ),
-							value: '3/2',
-						},
-						{
-							label: __( '9:16' ),
-							value: '9/16',
-						},
-						{
-							label: __( '3:4' ),
-							value: '3/4',
-						},
-						{
-							label: __( '2:3' ),
-							value: '2/3',
-						},
-					] }
+					options={ aspectRatioOptions }
 					onChange={ ( nextAspectRatio ) =>
 						setAttributes( { aspectRatio: nextAspectRatio } )
 					}
diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index 14e9bfdc74a87..c9f4645e5e865 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -133,7 +133,7 @@ export default function PostFeaturedImageEdit( {
 
 	const blockProps = useBlockProps( {
 		style: { width, height, aspectRatio },
-		className: classnames( {
+		className: clsx( {
 			'is-transient': temporaryURL,
 		} ),
 	} );
@@ -144,7 +144,7 @@ export default function PostFeaturedImageEdit( {
 	const placeholder = ( content ) => {
 		return (
 			<Placeholder
-				className={ classnames(
+				className={ clsx(
 					'block-editor-media-placeholder',
 					borderProps.className
 				) }
diff --git a/packages/block-library/src/post-featured-image/overlay.js b/packages/block-library/src/post-featured-image/overlay.js
index fb22196981d78..2ddebd5d9de90 100644
--- a/packages/block-library/src/post-featured-image/overlay.js
+++ b/packages/block-library/src/post-featured-image/overlay.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -38,7 +38,7 @@ const Overlay = ( { attributes, overlayColor } ) => {
 	return (
 		<span
 			aria-hidden="true"
-			className={ classnames(
+			className={ clsx(
 				'wp-block-post-featured-image__overlay',
 				dimRatioToClass( dimRatio ),
 				{
diff --git a/packages/block-library/src/post-navigation-link/edit.js b/packages/block-library/src/post-navigation-link/edit.js
index 7828c0773c223..25cabe442b9c0 100644
--- a/packages/block-library/src/post-navigation-link/edit.js
+++ b/packages/block-library/src/post-navigation-link/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -55,7 +55,7 @@ export default function PostNavigationLinkEdit( {
 
 	const ariaLabel = isNext ? __( 'Next post' ) : __( 'Previous post' );
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js
index 4302c44309423..70f960a219743 100644
--- a/packages/block-library/src/post-template/edit.js
+++ b/packages/block-library/src/post-template/edit.js
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import { memo, useMemo, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
 	BlockControls,
 	BlockContextProvider,
@@ -29,7 +29,7 @@ const TEMPLATE = [
 
 function PostTemplateInnerBlocks( { classList } ) {
 	const innerBlocksProps = useInnerBlocksProps(
-		{ className: classnames( 'wp-block-post', classList ) },
+		{ className: clsx( 'wp-block-post', classList ) },
 		{ template: TEMPLATE, __unstableDisableLayoutClassNames: true }
 	);
 	return <li { ...innerBlocksProps } />;
@@ -45,7 +45,7 @@ function PostTemplateBlockPreview( {
 	const blockPreviewProps = useBlockPreview( {
 		blocks,
 		props: {
-			className: classnames( 'wp-block-post', classList ),
+			className: clsx( 'wp-block-post', classList ),
 		},
 	} );
 
@@ -220,7 +220,7 @@ export default function PostTemplateEdit( {
 	);
 
 	const blockProps = useBlockProps( {
-		className: classnames( __unstableLayoutClassNames, {
+		className: clsx( __unstableLayoutClassNames, {
 			[ `columns-${ columnCount }` ]:
 				layoutType === 'grid' && columnCount, // Ensure column count is flagged via classname for backwards compatibility.
 		} ),
@@ -246,13 +246,13 @@ export default function PostTemplateEdit( {
 	const displayLayoutControls = [
 		{
 			icon: list,
-			title: __( 'List view' ),
+			title: _x( 'List view', 'Post template block display setting' ),
 			onClick: () => setDisplayLayout( { type: 'default' } ),
 			isActive: layoutType === 'default' || layoutType === 'constrained',
 		},
 		{
 			icon: grid,
-			title: __( 'Grid view' ),
+			title: _x( 'Grid view', 'Post template block display setting' ),
 			onClick: () =>
 				setDisplayLayout( {
 					type: 'grid',
diff --git a/packages/block-library/src/post-template/style.scss b/packages/block-library/src/post-template/style.scss
index 4af30e30b2309..806aadc77470e 100644
--- a/packages/block-library/src/post-template/style.scss
+++ b/packages/block-library/src/post-template/style.scss
@@ -5,10 +5,6 @@
 	list-style: none;
 	padding: 0;
 
-	// Unset background colors that can be inherited from Global Styles with extra specificity.
-	&.wp-block-post-template {
-		background: none;
-	}
 	// These rules no longer apply but should be kept for backwards compatibility.
 	&.is-flex-container {
 		flex-direction: row;
diff --git a/packages/block-library/src/post-terms/edit.js b/packages/block-library/src/post-terms/edit.js
index 95fca21a3a26a..b822e457ffcae 100644
--- a/packages/block-library/src/post-terms/edit.js
+++ b/packages/block-library/src/post-terms/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -65,7 +65,7 @@ export default function PostTermsEdit( {
 	const hasPost = postId && postType;
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 			[ `taxonomy-${ term }` ]: term,
 		} ),
diff --git a/packages/block-library/src/post-time-to-read/edit.js b/packages/block-library/src/post-time-to-read/edit.js
index 1689a6da71a5a..abfdce6630a67 100644
--- a/packages/block-library/src/post-time-to-read/edit.js
+++ b/packages/block-library/src/post-time-to-read/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -66,7 +66,7 @@ function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
 		const minutesToRead = Math.max(
 			1,
 			Math.round(
-				wordCount( content, wordCountType ) / AVERAGE_READING_RATE
+				wordCount( content || '', wordCountType ) / AVERAGE_READING_RATE
 			)
 		);
 
@@ -78,7 +78,7 @@ function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
 	}, [ contentStructure, blocks ] );
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js
index f6bba60990731..5b11ec3a9452a 100644
--- a/packages/block-library/src/post-title/edit.js
+++ b/packages/block-library/src/post-title/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -61,7 +61,7 @@ export default function PostTitleEdit( {
 		insertBlocksAfter( createBlock( getDefaultBlockName() ) );
 	};
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/pullquote/deprecated.js b/packages/block-library/src/pullquote/deprecated.js
index 2839a6d2b8804..6e6f49da91c6a 100644
--- a/packages/block-library/src/pullquote/deprecated.js
+++ b/packages/block-library/src/pullquote/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -95,7 +95,7 @@ const v5 = {
 		return (
 			<figure
 				{ ...useBlockProps.save( {
-					className: classnames( {
+					className: clsx( {
 						[ `has-text-align-${ textAlign }` ]: textAlign,
 					} ),
 				} ) }
@@ -145,7 +145,7 @@ const v4 = {
 				mainColor
 			);
 
-			figureClasses = classnames( {
+			figureClasses = clsx( {
 				'has-background': backgroundClass || customMainColor,
 				[ backgroundClass ]: backgroundClass,
 			} );
@@ -164,7 +164,7 @@ const v4 = {
 			'color',
 			textColor
 		);
-		const blockquoteClasses = classnames( {
+		const blockquoteClasses = clsx( {
 			'has-text-color': textColor || customTextColor,
 			[ blockquoteTextColorClass ]: blockquoteTextColorClass,
 		} );
@@ -275,7 +275,7 @@ const v3 = {
 				mainColor
 			);
 
-			figureClasses = classnames( {
+			figureClasses = clsx( {
 				'has-background': backgroundClass || customMainColor,
 				[ backgroundClass ]: backgroundClass,
 			} );
@@ -308,7 +308,7 @@ const v3 = {
 		);
 		const blockquoteClasses =
 			( textColor || customTextColor ) &&
-			classnames( 'has-text-color', {
+			clsx( 'has-text-color', {
 				[ blockquoteTextColorClass ]: blockquoteTextColorClass,
 			} );
 
@@ -446,7 +446,7 @@ const v2 = {
 		);
 		const blockquoteClasses =
 			textColor || customTextColor
-				? classnames( 'has-text-color', {
+				? clsx( 'has-text-color', {
 						[ blockquoteTextColorClass ]: blockquoteTextColorClass,
 				  } )
 				: undefined;
diff --git a/packages/block-library/src/pullquote/edit.js b/packages/block-library/src/pullquote/edit.js
index 637d83d5b4289..3b0831a26352d 100644
--- a/packages/block-library/src/pullquote/edit.js
+++ b/packages/block-library/src/pullquote/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ function PullQuoteEdit( {
 } ) {
 	const { textAlign, citation, value } = attributes;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/pullquote/editor.scss b/packages/block-library/src/pullquote/editor.scss
index 7b985d8020c9f..deb325849ebeb 100644
--- a/packages/block-library/src/pullquote/editor.scss
+++ b/packages/block-library/src/pullquote/editor.scss
@@ -1,4 +1,6 @@
 // .is-style-solid-color is deprecated.
+// This selector has not been scoped with `:root :where`, as global styles
+// does, to keep its specificity as it was at the time of deprecation.
 .wp-block-pullquote.is-style-solid-color {
 	& blockquote p {
 		font-size: 32px;
diff --git a/packages/block-library/src/pullquote/save.js b/packages/block-library/src/pullquote/save.js
index 26f6adc3eef05..19fa49a3fa834 100644
--- a/packages/block-library/src/pullquote/save.js
+++ b/packages/block-library/src/pullquote/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -15,7 +15,7 @@ export default function save( { attributes } ) {
 	return (
 		<figure
 			{ ...useBlockProps.save( {
-				className: classnames( {
+				className: clsx( {
 					[ `has-text-align-${ textAlign }` ]: textAlign,
 				} ),
 			} ) }
diff --git a/packages/block-library/src/pullquote/style.scss b/packages/block-library/src/pullquote/style.scss
index 07f6366d47617..b9e28b7cdcfaa 100644
--- a/packages/block-library/src/pullquote/style.scss
+++ b/packages/block-library/src/pullquote/style.scss
@@ -2,6 +2,8 @@
 	text-align: center; // Default text-alignment where the `textAlign` attribute value isn't specified.
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 	box-sizing: border-box;
+	margin: 0 0 1em 0;
+	padding: 4em 0;
 
 	p,
 	blockquote,
@@ -35,12 +37,6 @@
 	}
 }
 
-// Lowest specificity to avoid overriding layout and global styles.
-:where(.wp-block-pullquote) {
-	margin: 0 0 1em 0;
-	padding: 4em 0;
-}
-
 // Ensure that we are reasonably specific to override theme defaults.
 .wp-block-pullquote.has-text-align-left blockquote {
 	text-align: left;
@@ -52,6 +48,8 @@
 }
 
 // .is-style-solid-color is deprecated.
+// This selector has not been scoped with `:root :where`, as global styles
+// does, to keep its specificity as it was at the time of deprecation.
 .wp-block-pullquote.is-style-solid-color {
 	border: none;
 	blockquote {
diff --git a/packages/block-library/src/pullquote/theme.scss b/packages/block-library/src/pullquote/theme.scss
index 0dc7943a77051..6b5e8401227f5 100644
--- a/packages/block-library/src/pullquote/theme.scss
+++ b/packages/block-library/src/pullquote/theme.scss
@@ -1,11 +1,9 @@
-:where(.wp-block-pullquote) {
+.wp-block-pullquote {
 	border-top: 4px solid currentColor;
 	border-bottom: 4px solid currentColor;
 	margin-bottom: 1.75em;
 	color: currentColor;
-}
 
-.wp-block-pullquote {
 	cite,
 	footer,
 	&__citation {
diff --git a/packages/block-library/src/query-no-results/save.js b/packages/block-library/src/query-no-results/save.js
index 70161d85c27b1..17571d8f30d2d 100644
--- a/packages/block-library/src/query-no-results/save.js
+++ b/packages/block-library/src/query-no-results/save.js
@@ -3,6 +3,6 @@
  */
 import { InnerBlocks } from '@wordpress/block-editor';
 
-export default function QueryNoResultsSave() {
+export default function save() {
 	return <InnerBlocks.Content />;
 }
diff --git a/packages/block-library/src/query-title/edit.js b/packages/block-library/src/query-title/edit.js
index b74e03e7583b2..0194f3f99f4e1 100644
--- a/packages/block-library/src/query-title/edit.js
+++ b/packages/block-library/src/query-title/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -39,7 +39,7 @@ export default function QueryTitleEdit( {
 
 	const TagName = `h${ level }`;
 	const blockProps = useBlockProps( {
-		className: classnames( 'wp-block-query-title__placeholder', {
+		className: clsx( 'wp-block-query-title__placeholder', {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/query/save.js b/packages/block-library/src/query/save.js
index d8ae9942ed6f1..0f8be90273bef 100644
--- a/packages/block-library/src/query/save.js
+++ b/packages/block-library/src/query/save.js
@@ -3,7 +3,7 @@
  */
 import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
-export default function QuerySave( { attributes: { tagName: Tag = 'div' } } ) {
+export default function save( { attributes: { tagName: Tag = 'div' } } ) {
 	const blockProps = useBlockProps.save();
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 	return <Tag { ...innerBlocksProps } />;
diff --git a/packages/block-library/src/query/variations.js b/packages/block-library/src/query/variations.js
index 65a73d134981f..1970d9947916b 100644
--- a/packages/block-library/src/query/variations.js
+++ b/packages/block-library/src/query/variations.js
@@ -54,9 +54,7 @@ const variations = [
 			},
 		},
 		scope: [ 'inserter' ],
-		isActive: ( { namespace, query } ) => {
-			return namespace === 'core/posts-list' && query.postType === 'post';
-		},
+		isActive: [ 'namespace', 'query.postType' ],
 	},
 	{
 		name: 'title-date',
diff --git a/packages/block-library/src/quote/deprecated.js b/packages/block-library/src/quote/deprecated.js
index fcf6776b76236..77098b6e75313 100644
--- a/packages/block-library/src/quote/deprecated.js
+++ b/packages/block-library/src/quote/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -115,7 +115,7 @@ const v4 = {
 	isEligible: ( { align } ) => TEXT_ALIGN_OPTIONS.includes( align ),
 	save( { attributes } ) {
 		const { align, citation } = attributes;
-		const className = classnames( {
+		const className = clsx( {
 			[ `has-text-align-${ align }` ]: align,
 		} );
 		return (
@@ -170,7 +170,7 @@ const v3 = {
 	save( { attributes } ) {
 		const { align, value, citation } = attributes;
 
-		const className = classnames( {
+		const className = clsx( {
 			[ `has-text-align-${ align }` ]: align,
 		} );
 
diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js
index dbd2f7fd77e59..d712f9691ee54 100644
--- a/packages/block-library/src/quote/edit.js
+++ b/packages/block-library/src/quote/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -80,7 +80,7 @@ export default function QuoteEdit( {
 	useMigrateOnLoad( attributes, clientId );
 
 	const blockProps = useBlockProps( {
-		className: classNames( className, {
+		className: clsx( className, {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 		...( ! isWebPlatform && { style } ),
diff --git a/packages/block-library/src/quote/save.js b/packages/block-library/src/quote/save.js
index c932c50e5c955..521d78def3ef3 100644
--- a/packages/block-library/src/quote/save.js
+++ b/packages/block-library/src/quote/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
 export default function save( { attributes } ) {
 	const { textAlign, citation } = attributes;
 
-	const className = classNames( {
+	const className = clsx( {
 		[ `has-text-align-${ textAlign }` ]: textAlign,
 	} );
 
diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss
index aaf63b899771b..5bcccbd60eefc 100644
--- a/packages/block-library/src/quote/theme.scss
+++ b/packages/block-library/src/quote/theme.scss
@@ -1,4 +1,4 @@
-:where(.wp-block-quote) {
+.wp-block-quote {
 	border-left: 0.25em solid currentColor;
 	margin: 0 0 1.75em 0;
 	padding-left: 1em;
diff --git a/packages/block-library/src/rss/edit.js b/packages/block-library/src/rss/edit.js
index 7c35d63f4fc89..b67cb4f9193df 100644
--- a/packages/block-library/src/rss/edit.js
+++ b/packages/block-library/src/rss/edit.js
@@ -14,12 +14,11 @@ import {
 	RangeControl,
 	ToggleControl,
 	ToolbarGroup,
-	__experimentalHStack as HStack,
 	__experimentalInputControl as InputControl,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { grid, list, edit, rss } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { prependHTTP } from '@wordpress/url';
 import ServerSideRender from '@wordpress/server-side-render';
 
@@ -59,32 +58,40 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 
 	const blockProps = useBlockProps();
 
+	const label = __( 'RSS URL' );
+
 	if ( isEditing ) {
 		return (
 			<div { ...blockProps }>
-				<Placeholder icon={ rss } label="RSS">
+				<Placeholder
+					icon={ rss }
+					label={ label }
+					instructions={ __(
+						'Display entries from any RSS or Atom feed.'
+					) }
+				>
 					<form
 						onSubmit={ onSubmitURL }
 						className="wp-block-rss__placeholder-form"
 					>
-						<HStack wrap>
-							<InputControl
-								__next40pxDefaultSize
-								placeholder={ __( 'Enter URL here…' ) }
-								value={ feedURL }
-								onChange={ ( value ) =>
-									setAttributes( { feedURL: value } )
-								}
-								className="wp-block-rss__placeholder-input"
-							/>
-							<Button
-								__next40pxDefaultSize
-								variant="primary"
-								type="submit"
-							>
-								{ __( 'Use URL' ) }
-							</Button>
-						</HStack>
+						<InputControl
+							__next40pxDefaultSize
+							label={ label }
+							hideLabelFromVision
+							placeholder={ __( 'Enter URL here…' ) }
+							value={ feedURL }
+							onChange={ ( value ) =>
+								setAttributes( { feedURL: value } )
+							}
+							className="wp-block-rss__placeholder-input"
+						/>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Apply' ) }
+						</Button>
 					</form>
 				</Placeholder>
 			</div>
@@ -99,13 +106,13 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 		},
 		{
 			icon: list,
-			title: __( 'List view' ),
+			title: _x( 'List view', 'RSS block display setting' ),
 			onClick: () => setAttributes( { blockLayout: 'list' } ),
 			isActive: blockLayout === 'list',
 		},
 		{
 			icon: grid,
-			title: __( 'Grid view' ),
+			title: _x( 'Grid view', 'RSS block display setting' ),
 			onClick: () => setAttributes( { blockLayout: 'grid' } ),
 			isActive: blockLayout === 'grid',
 		},
diff --git a/packages/block-library/src/rss/editor.scss b/packages/block-library/src/rss/editor.scss
index 9b4bac2874ad5..c5e79d6254460 100644
--- a/packages/block-library/src/rss/editor.scss
+++ b/packages/block-library/src/rss/editor.scss
@@ -2,20 +2,6 @@
 	display: inline;
 }
 
-.wp-block-rss__placeholder-form {
-	> * {
-		margin-bottom: $grid-unit-10;
-	}
-
-	@include break-medium() {
-		> * {
-			margin-bottom: 0;
-		}
-	}
-
-	.wp-block-rss__placeholder-input {
-		flex: 1;
-		min-width: 80%;
-	}
+.wp-block-rss__placeholder-form .wp-block-rss__placeholder-input {
+	flex: 1 1 auto;
 }
-
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index 6877990ea173e..cfe7b29caf5de 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -112,13 +112,19 @@ export default function SearchEdit( {
 	] );
 
 	const borderRadius = style?.border?.radius;
-	const borderProps = useBorderProps( attributes );
+	let borderProps = useBorderProps( attributes );
 
 	// Check for old deprecated numerical border radius. Done as a separate
 	// check so that a borderRadius style won't overwrite the longhand
 	// per-corner styles.
 	if ( typeof borderRadius === 'number' ) {
-		borderProps.style.borderRadius = `${ borderRadius }px`;
+		borderProps = {
+			...borderProps,
+			style: {
+				...borderProps.style,
+				borderRadius: `${ borderRadius }px`,
+			},
+		};
 	}
 
 	const colorProps = useColorProps( attributes );
@@ -168,7 +174,7 @@ export default function SearchEdit( {
 	}, [ hasOnlyButton, isSelected, setAttributes, width ] );
 
 	const getBlockClassNames = () => {
-		return classnames(
+		return clsx(
 			className,
 			isButtonPositionInside
 				? 'wp-block-search__button-inside'
@@ -267,7 +273,7 @@ export default function SearchEdit( {
 
 	const renderTextField = () => {
 		// If the input is inside the wrapper, the wrapper gets the border color styles/classes, not the input control.
-		const textFieldClasses = classnames(
+		const textFieldClasses = clsx(
 			'wp-block-search__input',
 			isButtonPositionInside ? undefined : borderProps.className,
 			typographyProps.className
@@ -303,7 +309,7 @@ export default function SearchEdit( {
 
 	const renderButton = () => {
 		// If the button is inside the wrapper, the wrapper gets the border color styles/classes, not the button.
-		const buttonClasses = classnames(
+		const buttonClasses = clsx(
 			'wp-block-search__button',
 			colorProps.className,
 			typographyProps.className,
@@ -435,7 +441,7 @@ export default function SearchEdit( {
 									widthUnit: newUnit,
 								} );
 							} }
-							__unstableInputWidth={ '80px' }
+							__unstableInputWidth="80px"
 							value={ `${ width }${ widthUnit }` }
 							units={ units }
 						/>
@@ -536,7 +542,7 @@ export default function SearchEdit( {
 		},
 	} );
 
-	const labelClassnames = classnames(
+	const labelClassnames = clsx(
 		'wp-block-search__label',
 		typographyProps.className
 	);
@@ -562,7 +568,7 @@ export default function SearchEdit( {
 				size={ {
 					width: `${ width }${ widthUnit }`,
 				} }
-				className={ classnames(
+				className={ clsx(
 					'wp-block-search__inside-wrapper',
 					isButtonPositionInside ? borderProps.className : undefined
 				) }
diff --git a/packages/block-library/src/search/edit.native.js b/packages/block-library/src/search/edit.native.js
index 05ff7ebaa6332..47a7eb98ded60 100644
--- a/packages/block-library/src/search/edit.native.js
+++ b/packages/block-library/src/search/edit.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { View, AccessibilityInfo } from 'react-native';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -133,7 +133,7 @@ export default function SearchEdit( {
 	};
 
 	const getBlockClassNames = () => {
-		return classnames(
+		return clsx(
 			className,
 			'button-inside' === buttonPosition
 				? 'wp-block-search__button-inside'
diff --git a/packages/block-library/src/separator/deprecated.js b/packages/block-library/src/separator/deprecated.js
index 43cad97fd9ee9..5174310e186ff 100644
--- a/packages/block-library/src/separator/deprecated.js
+++ b/packages/block-library/src/separator/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -27,7 +27,7 @@ const v1 = {
 		// using color, not backgroundColor
 		const colorClass = getColorClassName( 'color', color );
 
-		const className = classnames( {
+		const className = clsx( {
 			'has-text-color has-background': color || customColor,
 			[ backgroundClass ]: backgroundClass,
 			[ colorClass ]: colorClass,
diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js
index 5ce522737f450..0d0af336713c1 100644
--- a/packages/block-library/src/separator/edit.js
+++ b/packages/block-library/src/separator/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -30,7 +30,7 @@ export default function SeparatorEdit( { attributes, setAttributes } ) {
 	// using color, not backgroundColor.
 	const colorClass = getColorClassName( 'color', backgroundColor );
 
-	const className = classnames(
+	const className = clsx(
 		{
 			'has-text-color': backgroundColor || currentColor,
 			[ colorClass ]: colorClass,
diff --git a/packages/block-library/src/separator/editor.scss b/packages/block-library/src/separator/editor.scss
index 220c6bd9d80e3..24e940684279e 100644
--- a/packages/block-library/src/separator/editor.scss
+++ b/packages/block-library/src/separator/editor.scss
@@ -2,11 +2,4 @@
 	// Prevent margin collapsing so the area to select the separator is bigger.
 	padding-top: 0.1px;
 	padding-bottom: 0.1px;
-
-	// This is also set in style.scss, but needs a higher specificity in editor
-	// due to the way that color block supports adds additional background color styles.
-	&.wp-block-separator.is-style-dots {
-		background: none !important;
-		border: none;
-	}
 }
diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js
index 55a67c980c24f..12d2282eb1d3e 100644
--- a/packages/block-library/src/separator/save.js
+++ b/packages/block-library/src/separator/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -23,7 +23,7 @@ export default function separatorSave( { attributes } ) {
 	// using color, not backgroundColor.
 	const colorClass = getColorClassName( 'color', backgroundColor );
 
-	const className = classnames(
+	const className = clsx(
 		{
 			'has-text-color': backgroundColor || customColor,
 			[ colorClass ]: colorClass,
diff --git a/packages/block-library/src/separator/style.scss b/packages/block-library/src/separator/style.scss
index d40dd2f05844e..65e463bc513f4 100644
--- a/packages/block-library/src/separator/style.scss
+++ b/packages/block-library/src/separator/style.scss
@@ -1,28 +1,4 @@
 .wp-block-separator {
-	// Dots style
-	&.is-style-dots {
-		// Override any background themes often set on the hr tag for this style.
-		// also override the color set in the editor since it's intented for normal HR
-		background: none !important;
-		border: none;
-		text-align: center;
-		line-height: 1;
-		height: auto;
-
-		&::before {
-			content: "\00b7 \00b7 \00b7";
-			color: currentColor;
-			font-size: 1.5em;
-			letter-spacing: 2em;
-			/*rtl:ignore*/
-			padding-left: 2em;
-			font-family: serif;
-		}
-	}
-}
-
-// Lowest specificity to avoid overriding global styles.
-:where(.wp-block-separator) {
 	border-top: 2px solid currentColor;
 	// Default, thin style, is stored in theme.scss so it can be opted out of
 
@@ -31,3 +7,31 @@
 	border-right: none;
 	border-bottom: none;
 }
+
+// Dots block style variation
+:root :where(.wp-block-separator.is-style-dots) {
+	text-align: center;
+	line-height: 1;
+	height: auto;
+
+	&::before {
+		content: "\00b7 \00b7 \00b7";
+		color: currentColor;
+		font-size: 1.5em;
+		letter-spacing: 2em;
+		/*rtl:ignore*/
+		padding-left: 2em;
+		font-family: serif;
+	}
+}
+
+// The following overrides should be enforced regardless of global styles.
+// The dots block style uses a pseudo element to render the dots. Background
+// color and borders would break this aesthetic.
+.wp-block-separator.is-style-dots {
+	// Override any background themes often set on the hr tag for this style.
+	// also override the color set in the editor since it's intended for normal HR
+	background: none !important;
+	// Important required to ensure dots does not get a border.
+	border: none !important;
+}
diff --git a/packages/block-library/src/shortcode/edit.js b/packages/block-library/src/shortcode/edit.js
index aecebd115a983..b3063077fe308 100644
--- a/packages/block-library/src/shortcode/edit.js
+++ b/packages/block-library/src/shortcode/edit.js
@@ -4,29 +4,25 @@
 import { __ } from '@wordpress/i18n';
 import { PlainText, useBlockProps } from '@wordpress/block-editor';
 import { useInstanceId } from '@wordpress/compose';
-import { Icon, shortcode } from '@wordpress/icons';
+import { Placeholder } from '@wordpress/components';
+import { shortcode } from '@wordpress/icons';
 
 export default function ShortcodeEdit( { attributes, setAttributes } ) {
 	const instanceId = useInstanceId( ShortcodeEdit );
 	const inputId = `blocks-shortcode-input-${ instanceId }`;
 
 	return (
-		<div { ...useBlockProps( { className: 'components-placeholder' } ) }>
-			<label
-				htmlFor={ inputId }
-				className="components-placeholder__label"
-			>
-				<Icon icon={ shortcode } />
-				{ __( 'Shortcode' ) }
-			</label>
-			<PlainText
-				className="blocks-shortcode__textarea"
-				id={ inputId }
-				value={ attributes.text }
-				aria-label={ __( 'Shortcode text' ) }
-				placeholder={ __( 'Write shortcode here…' ) }
-				onChange={ ( text ) => setAttributes( { text } ) }
-			/>
+		<div { ...useBlockProps() }>
+			<Placeholder icon={ shortcode } label={ __( 'Shortcode' ) }>
+				<PlainText
+					className="blocks-shortcode__textarea"
+					id={ inputId }
+					value={ attributes.text }
+					aria-label={ __( 'Shortcode text' ) }
+					placeholder={ __( 'Write shortcode here…' ) }
+					onChange={ ( text ) => setAttributes( { text } ) }
+				/>
+			</Placeholder>
 		</div>
 	);
 }
diff --git a/packages/block-library/src/shortcode/editor.scss b/packages/block-library/src/shortcode/editor.scss
index 56586df8eefd2..6e7f482ad19f4 100644
--- a/packages/block-library/src/shortcode/editor.scss
+++ b/packages/block-library/src/shortcode/editor.scss
@@ -1,9 +1,3 @@
-[data-type="core/shortcode"] {
-	&.components-placeholder {
-		min-height: 0;
-	}
-}
-
 // The editing view for the Shortcode block is equivalent to block UI.
 // Therefore we increase specificity to avoid theme styles bleeding in.
 .blocks-shortcode__textarea {
diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index af7ae6f7a8f12..046b5feeb20c9 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -73,7 +73,6 @@ const SiteLogo = ( {
 	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const { toggleSelection } = useDispatch( blockEditorStore );
-	const classes = classnames( 'custom-logo-link' );
 	const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
 		const siteEntities = select( coreStore ).getEntityRecord(
@@ -136,7 +135,7 @@ const SiteLogo = ( {
 			/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 			<a
 				href={ siteUrl }
-				className={ classes }
+				className="custom-logo-link"
 				rel="home"
 				title={ title }
 				onClick={ ( event ) => event.preventDefault() }
@@ -562,7 +561,7 @@ export default function LogoEdit( {
 		);
 	}
 	const placeholder = ( content ) => {
-		const placeholderClassName = classnames(
+		const placeholderClassName = clsx(
 			'block-editor-media-placeholder',
 			className
 		);
@@ -581,7 +580,7 @@ export default function LogoEdit( {
 		);
 	};
 
-	const classes = classnames( className, {
+	const classes = clsx( className, {
 		'is-default-size': ! width,
 		'is-transient': temporaryURL,
 	} );
diff --git a/packages/block-library/src/site-logo/style.scss b/packages/block-library/src/site-logo/style.scss
index ca9c92539b676..020b7aab5370b 100644
--- a/packages/block-library/src/site-logo/style.scss
+++ b/packages/block-library/src/site-logo/style.scss
@@ -31,11 +31,11 @@
 		margin-right: auto;
 		text-align: center;
 	}
+}
 
-	// Style variations
-	&.is-style-rounded {
-		// We use an absolute pixel to prevent the oval shape that a value of 50% would give
-		// to rectangular images. A pill-shape is better than otherwise.
-		border-radius: 9999px;
-	}
+// Style variations
+:root :where(.wp-block-site-logo.is-style-rounded) {
+	// We use an absolute pixel to prevent the oval shape that a value of 50% would give
+	// to rectangular images. A pill-shape is better than otherwise.
+	border-radius: 9999px;
 }
diff --git a/packages/block-library/src/site-tagline/edit.js b/packages/block-library/src/site-tagline/edit.js
index e4ea535966044..fea91f867053a 100644
--- a/packages/block-library/src/site-tagline/edit.js
+++ b/packages/block-library/src/site-tagline/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -51,7 +51,7 @@ export default function SiteTaglineEdit( {
 	}
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 			'wp-block-site-tagline__placeholder': ! canUserEdit && ! tagline,
 		} ),
diff --git a/packages/block-library/src/site-title/edit.js b/packages/block-library/src/site-title/edit.js
index ad3136d106557..850268bf4ace5 100644
--- a/packages/block-library/src/site-title/edit.js
+++ b/packages/block-library/src/site-title/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -51,7 +51,7 @@ export default function SiteTitleEdit( {
 
 	const TagName = level === 0 ? 'p' : `h${ level }`;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 			'wp-block-site-title__placeholder': ! canUserEdit && ! title,
 		} ),
diff --git a/packages/block-library/src/site-title/editor.scss b/packages/block-library/src/site-title/editor.scss
index 173e4570929a5..ce83659170ff6 100644
--- a/packages/block-library/src/site-title/editor.scss
+++ b/packages/block-library/src/site-title/editor.scss
@@ -3,8 +3,6 @@
 	border: 1px dashed;
 }
 
-.editor-styles-wrapper .wp-block-site-title {
-	a {
-		color: inherit;
-	}
+.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 afc6f449f4025..337c82f79ad35 100644
--- a/packages/block-library/src/site-title/style.scss
+++ b/packages/block-library/src/site-title/style.scss
@@ -1,5 +1,3 @@
-.wp-block-site-title {
-	a {
-		color: inherit;
-	}
+:root :where(.wp-block-site-title a) {
+	color: inherit;
 }
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 102267e0b7a37..d0444b79298e7 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -102,7 +102,7 @@ const SocialLinkEdit = ( {
 		iconBackgroundColorValue,
 	} = context;
 	const [ showURLPopover, setPopover ] = useState( false );
-	const classes = classNames( 'wp-social-link', 'wp-social-link-' + service, {
+	const classes = clsx( 'wp-social-link', 'wp-social-link-' + service, {
 		'wp-social-link__is-incomplete': ! url,
 		[ `has-${ iconColor }-color` ]: iconColor,
 		[ `has-${ iconBackgroundColor }-background-color` ]:
@@ -165,7 +165,7 @@ const SocialLinkEdit = ( {
 				>
 					<IconComponent />
 					<span
-						className={ classNames( 'wp-block-social-link-label', {
+						className={ clsx( 'wp-block-social-link-label', {
 							'screen-reader-text': ! showLabels,
 						} ) }
 					>
diff --git a/packages/block-library/src/social-link/edit.native.js b/packages/block-library/src/social-link/edit.native.js
index 3ea794a9b8c20..0b4b6b0ac7d4b 100644
--- a/packages/block-library/src/social-link/edit.native.js
+++ b/packages/block-library/src/social-link/edit.native.js
@@ -171,7 +171,7 @@ const SocialLinkEdit = ( {
 
 			<TouchableWithoutFeedback
 				onPress={ onIconPress }
-				accessibilityRole={ 'button' }
+				accessibilityRole="button"
 				accessibilityLabel={ sprintf(
 					// translators: %s: social link name e.g: "Instagram".
 					__( '%s social icon' ),
diff --git a/packages/block-library/src/social-link/editor.scss b/packages/block-library/src/social-link/editor.scss
index 73211958b48c1..bd93ad9f055fc 100644
--- a/packages/block-library/src/social-link/editor.scss
+++ b/packages/block-library/src/social-link/editor.scss
@@ -31,11 +31,11 @@
 	}
 }
 
-.wp-block-social-links.is-style-pill-shape .wp-social-link button {
+:root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link button) {
 	padding-left: calc((2/3) * 1em);
 	padding-right: calc((2/3) * 1em);
 }
 
-.wp-block-social-links.is-style-logos-only .wp-social-link button {
+:root :where(.wp-block-social-links.is-style-logos-only .wp-social-link button) {
 	padding: 0;
 }
diff --git a/packages/block-library/src/social-link/icons/bluesky.js b/packages/block-library/src/social-link/icons/bluesky.js
new file mode 100644
index 0000000000000..0295d318efe81
--- /dev/null
+++ b/packages/block-library/src/social-link/icons/bluesky.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+export const BlueskyIcon = () => (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M6.3,4.2c2.3,1.7,4.8,5.3,5.7,7.2.9-1.9,3.4-5.4,5.7-7.2,1.7-1.3,4.3-2.2,4.3.9s-.4,5.2-.6,5.9c-.7,2.6-3.3,3.2-5.6,2.8,4,.7,5.1,3,2.9,5.3-5,5.2-6.7-2.8-6.7-2.8,0,0-1.7,8-6.7,2.8-2.2-2.3-1.2-4.6,2.9-5.3-2.3.4-4.9-.3-5.6-2.8-.2-.7-.6-5.3-.6-5.9,0-3.1,2.7-2.1,4.3-.9h0Z" />
+	</SVG>
+);
diff --git a/packages/block-library/src/social-link/icons/index.js b/packages/block-library/src/social-link/icons/index.js
index 46c8c6d5acc6e..422ff6f02dd20 100644
--- a/packages/block-library/src/social-link/icons/index.js
+++ b/packages/block-library/src/social-link/icons/index.js
@@ -1,6 +1,7 @@
 export * from './amazon';
 export * from './bandcamp';
 export * from './behance';
+export * from './bluesky';
 export * from './chain';
 export * from './codepen';
 export * from './deviantart';
diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php
index 5e2bc616d0e5a..da28034f5a55d 100644
--- a/packages/block-library/src/social-link/index.php
+++ b/packages/block-library/src/social-link/index.php
@@ -153,6 +153,10 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 			'name' => 'Behance',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M7.799,5.698c0.589,0,1.12,0.051,1.606,0.156c0.482,0.102,0.894,0.273,1.241,0.507c0.344,0.235,0.612,0.546,0.804,0.938 c0.188,0.387,0.281,0.871,0.281,1.443c0,0.619-0.141,1.137-0.421,1.551c-0.284,0.413-0.7,0.751-1.255,1.014 c0.756,0.218,1.317,0.601,1.689,1.146c0.374,0.549,0.557,1.205,0.557,1.975c0,0.623-0.12,1.161-0.359,1.612 c-0.241,0.457-0.569,0.828-0.973,1.114c-0.408,0.288-0.876,0.5-1.399,0.637C9.052,17.931,8.514,18,7.963,18H2V5.698H7.799 M7.449,10.668c0.481,0,0.878-0.114,1.192-0.345c0.311-0.228,0.463-0.603,0.463-1.119c0-0.286-0.051-0.523-0.152-0.707 C8.848,8.315,8.711,8.171,8.536,8.07C8.362,7.966,8.166,7.894,7.94,7.854c-0.224-0.044-0.457-0.06-0.697-0.06H4.709v2.874H7.449z M7.6,15.905c0.267,0,0.521-0.024,0.759-0.077c0.243-0.053,0.457-0.137,0.637-0.261c0.182-0.12,0.332-0.283,0.441-0.491 C9.547,14.87,9.6,14.602,9.6,14.278c0-0.633-0.18-1.084-0.533-1.357c-0.356-0.27-0.83-0.404-1.413-0.404H4.709v3.388L7.6,15.905z M16.162,15.864c0.367,0.358,0.897,0.538,1.583,0.538c0.493,0,0.92-0.125,1.277-0.374c0.354-0.248,0.571-0.514,0.654-0.79h2.155 c-0.347,1.072-0.872,1.838-1.589,2.299C19.534,18,18.67,18.23,17.662,18.23c-0.701,0-1.332-0.113-1.899-0.337 c-0.567-0.227-1.041-0.544-1.439-0.958c-0.389-0.415-0.689-0.907-0.904-1.484c-0.213-0.574-0.32-1.21-0.32-1.899 c0-0.666,0.11-1.288,0.329-1.863c0.222-0.577,0.529-1.075,0.933-1.492c0.406-0.42,0.885-0.751,1.444-0.994 c0.558-0.241,1.175-0.363,1.857-0.363c0.754,0,1.414,0.145,1.98,0.44c0.563,0.291,1.026,0.686,1.389,1.181 c0.363,0.493,0.622,1.057,0.783,1.69c0.16,0.632,0.217,1.292,0.171,1.983h-6.428C15.557,14.84,15.795,15.506,16.162,15.864 M18.973,11.184c-0.291-0.321-0.783-0.496-1.384-0.496c-0.39,0-0.714,0.066-0.973,0.2c-0.254,0.132-0.461,0.297-0.621,0.491 c-0.157,0.197-0.265,0.405-0.328,0.628c-0.063,0.217-0.101,0.413-0.111,0.587h3.98C19.478,11.969,19.265,11.509,18.973,11.184z M15.057,7.738h4.985V6.524h-4.985L15.057,7.738z"></path></svg>',
 		),
+		'bluesky'       => array(
+			'name' => 'Bluesky',
+			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M6.3,4.2c2.3,1.7,4.8,5.3,5.7,7.2.9-1.9,3.4-5.4,5.7-7.2,1.7-1.3,4.3-2.2,4.3.9s-.4,5.2-.6,5.9c-.7,2.6-3.3,3.2-5.6,2.8,4,.7,5.1,3,2.9,5.3-5,5.2-6.7-2.8-6.7-2.8,0,0-1.7,8-6.7,2.8-2.2-2.3-1.2-4.6,2.9-5.3-2.3.4-4.9-.3-5.6-2.8-.2-.7-.6-5.3-.6-5.9,0-3.1,2.7-2.1,4.3-.9h0Z"></path></svg>',
+		),
 		'chain'         => array(
 			'name' => 'Link',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M15.6,7.2H14v1.5h1.6c2,0,3.7,1.7,3.7,3.7s-1.7,3.7-3.7,3.7H14v1.5h1.6c2.8,0,5.2-2.3,5.2-5.2,0-2.9-2.3-5.2-5.2-5.2zM4.7,12.4c0-2,1.7-3.7,3.7-3.7H10V7.2H8.4c-2.9,0-5.2,2.3-5.2,5.2,0,2.9,2.3,5.2,5.2,5.2H10v-1.5H8.4c-2,0-3.7-1.7-3.7-3.7zm4.6.9h5.3v-1.5H9.3v1.5z"></path></svg>',
diff --git a/packages/block-library/src/social-link/socials-with-bg.scss b/packages/block-library/src/social-link/socials-with-bg.scss
index 86079515f6971..907e6bb98023d 100644
--- a/packages/block-library/src/social-link/socials-with-bg.scss
+++ b/packages/block-library/src/social-link/socials-with-bg.scss
@@ -18,6 +18,11 @@
 	color: #fff;
 }
 
+.wp-social-link-bluesky {
+	background-color: #0a7aff;
+	color: #fff;
+}
+
 .wp-social-link-codepen {
 	background-color: #1e1f26;
 	color: #fff;
diff --git a/packages/block-library/src/social-link/socials-without-bg.scss b/packages/block-library/src/social-link/socials-without-bg.scss
index ee364ae634afa..371310628c9b2 100644
--- a/packages/block-library/src/social-link/socials-without-bg.scss
+++ b/packages/block-library/src/social-link/socials-without-bg.scss
@@ -10,6 +10,10 @@
 	color: #0757fe;
 }
 
+.wp-social-link-bluesky {
+	color: #0a7aff;
+}
+
 .wp-social-link-codepen {
 	color: #1e1f26;
 }
diff --git a/packages/block-library/src/social-link/variations.js b/packages/block-library/src/social-link/variations.js
index 24a6c60c3db77..a97a396882d76 100644
--- a/packages/block-library/src/social-link/variations.js
+++ b/packages/block-library/src/social-link/variations.js
@@ -5,6 +5,7 @@ import {
 	AmazonIcon,
 	BandcampIcon,
 	BehanceIcon,
+	BlueskyIcon,
 	ChainIcon,
 	CodepenIcon,
 	DeviantArtIcon,
@@ -83,6 +84,12 @@ const variations = [
 		title: 'Behance',
 		icon: BehanceIcon,
 	},
+	{
+		name: 'bluesky',
+		attributes: { service: 'bluesky' },
+		title: 'Bluesky',
+		icon: BlueskyIcon,
+	},
 	{
 		name: 'chain',
 		attributes: { service: 'chain' },
diff --git a/packages/block-library/src/social-links/deprecated.js b/packages/block-library/src/social-links/deprecated.js
index b5a56db3e102c..e13cdaba6a43c 100644
--- a/packages/block-library/src/social-links/deprecated.js
+++ b/packages/block-library/src/social-links/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -96,7 +96,7 @@ const deprecated = [
 				},
 			} = props;
 
-			const className = classNames( size, {
+			const className = clsx( size, {
 				'has-icon-color': iconColorValue,
 				'has-icon-background-color': iconBackgroundColorValue,
 				[ `items-justified-${ itemsJustification }` ]:
diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
index 52d26be50a6c9..bea4a4e6721ec 100644
--- a/packages/block-library/src/social-links/edit.js
+++ b/packages/block-library/src/social-links/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -95,7 +95,7 @@ export function SocialLinksEdit( props ) {
 
 	// Fallback color values are used maintain selections in case switching
 	// themes and named colors in palette do not match.
-	const className = classNames( size, {
+	const className = clsx( size, {
 		'has-visible-labels': showLabels,
 		'has-icon-color': iconColor.color || iconColorValue,
 		'has-icon-background-color':
diff --git a/packages/block-library/src/social-links/edit.native.js b/packages/block-library/src/social-links/edit.native.js
index ea9c439d61933..c250465302227 100644
--- a/packages/block-library/src/social-links/edit.native.js
+++ b/packages/block-library/src/social-links/edit.native.js
@@ -95,7 +95,7 @@ function SocialLinksEdit( {
 			renderFooterAppender={
 				shouldRenderFooterAppender && renderFooterAppender.current
 			}
-			orientation={ 'horizontal' }
+			orientation="horizontal"
 			onDeleteBlock={ shouldDelete ? onDelete : undefined }
 			marginVertical={ spacing }
 			marginHorizontal={ spacing }
diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss
index b729949c837d8..6f07ea209ecbe 100644
--- a/packages/block-library/src/social-links/editor.scss
+++ b/packages/block-library/src/social-links/editor.scss
@@ -11,9 +11,19 @@
 	transform: none;
 }
 
-.editor-styles-wrapper .wp-block-social-links {
+// Specificity for the following styles are fixed at 0-1-0 to match and be
+// overridable by global styles.
+:root :where(.wp-block-social-links),
+:root :where(.wp-block-social-links.is-style-logos-only .wp-block-social-links__social-placeholder .wp-social-link) {
 	padding: 0;
 }
+:root :where(.wp-block-social-links__social-placeholder .wp-social-link) {
+	padding: 0.25em;
+}
+:root :where(.wp-block-social-links.is-style-pill-shape .wp-block-social-links__social-placeholder .wp-social-link) {
+	padding-left: calc((2/3) * 1em);
+	padding-right: calc((2/3) * 1em);
+}
 
 // Placeholder/setup state.
 .wp-block-social-links__social-placeholder {
@@ -37,19 +47,6 @@
 		display: flex;
 	}
 
-	.wp-social-link {
-		padding: 0.25em;
-
-		.is-style-pill-shape & {
-			padding-left: calc((2/3) * 1em);
-			padding-right: calc((2/3) * 1em);
-		}
-
-		.is-style-logos-only & {
-			padding: 0;
-		}
-	}
-
 	.wp-social-link::before {
 		content: "";
 		display: block;
diff --git a/packages/block-library/src/social-links/save.js b/packages/block-library/src/social-links/save.js
index 07a9142416624..53d2243085048 100644
--- a/packages/block-library/src/social-links/save.js
+++ b/packages/block-library/src/social-links/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ export default function save( props ) {
 		},
 	} = props;
 
-	const className = classNames( size, {
+	const className = clsx( size, {
 		'has-visible-labels': showLabels,
 		'has-icon-color': iconColorValue,
 		'has-icon-background-color': iconBackgroundColorValue,
diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss
index 1ad883bbb8884..f04c11ea07acd 100644
--- a/packages/block-library/src/social-links/style.scss
+++ b/packages/block-library/src/social-links/style.scss
@@ -21,12 +21,6 @@
 	}
 
 	.wp-social-link {
-		// By setting the font size, we can scale icons and paddings consistently based on that.
-		// This also allows themes to override this, if need be.
-		a {
-			padding: 0.25em;
-		}
-
 		svg {
 			width: 1em;
 			height: 1em;
@@ -119,14 +113,13 @@
 }
 
 // Treatment for logos only style.
+// The specificity for this selector has not been reduced to 0-1-0 as per
+// global styles variation selectors as the lack of background should be
+// enforced for this block style.
 .wp-block-social-links.is-style-logos-only {
 	.wp-social-link {
 		background: none;
 
-		a {
-			padding: 0;
-		}
-
 		// Make these bigger.
 		svg {
 			width: 1.25em;
@@ -142,11 +135,19 @@
 	.wp-social-link {
 		width: auto;
 	}
+}
 
-	.wp-social-link a {
-		padding-left: calc((2/3) * 1em);
-		padding-right: calc((2/3) * 1em);
-	}
+// The following rules have their selector specificity set to 0-1-0 to
+// facilitate theme.json styling of the inner social-link block padding.
+:root :where(.wp-block-social-links .wp-social-link a) {
+	padding: 0.25em;
+}
+:root :where(.wp-block-social-links.is-style-logos-only .wp-social-link a) {
+	padding: 0;
+}
+:root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link a) {
+	padding-left: calc((2/3) * 1em);
+	padding-right: calc((2/3) * 1em);
 }
 
 // Ensure the Snapchat label is visible when no custom
diff --git a/packages/block-library/src/spacer/controls.js b/packages/block-library/src/spacer/controls.js
index 91a1e79be173e..160335fcc092e 100644
--- a/packages/block-library/src/spacer/controls.js
+++ b/packages/block-library/src/spacer/controls.js
@@ -7,6 +7,7 @@ import {
 	useSettings,
 	__experimentalSpacingSizesControl as SpacingSizesControl,
 	isValueSpacingPreset,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import {
 	BaseControl,
@@ -21,14 +22,15 @@ import { View } from '@wordpress/primitives';
 /**
  * Internal dependencies
  */
+import { unlock } from '../lock-unlock';
 import { MIN_SPACER_SIZE } from './constants';
 
+const { useSpacingSizes } = unlock( blockEditorPrivateApis );
+
 function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' );
-	const [ spacingSizes, spacingUnits ] = useSettings(
-		'spacing.spacingSizes',
-		'spacing.units'
-	);
+	const spacingSizes = useSpacingSizes();
+	const [ spacingUnits ] = useSettings( 'spacing.units' );
 	// In most contexts the spacer size cannot meaningfully be set to a
 	// percentage, since this is relative to the parent container. This
 	// unit is disabled from the UI.
diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js
index def3104c9b282..1e0ffb9700d68 100644
--- a/packages/block-library/src/spacer/edit.js
+++ b/packages/block-library/src/spacer/edit.js
@@ -1,17 +1,17 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import {
 	useBlockProps,
-	useSettings,
 	getCustomValueFromPreset,
 	getSpacingPresetCssVar,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { ResizableBox } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
@@ -21,9 +21,12 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
+import { unlock } from '../lock-unlock';
 import SpacerControls from './controls';
 import { MIN_SPACER_SIZE } from './constants';
 
+const { useSpacingSizes } = unlock( blockEditorPrivateApis );
+
 const ResizableSpacer = ( {
 	orientation,
 	onResizeStart,
@@ -46,7 +49,7 @@ const ResizableSpacer = ( {
 
 	return (
 		<ResizableBox
-			className={ classnames( 'block-library-spacer__resize-container', {
+			className={ clsx( 'block-library-spacer__resize-container', {
 				'resize-horizontal': orientation === 'horizontal',
 				'is-resizing': isResizing,
 				'is-selected': isSelected,
@@ -112,7 +115,7 @@ const SpacerEdit = ( {
 	const { layout = {} } = blockStyle;
 	const { selfStretch, flexSize } = layout;
 
-	const [ spacingSizes ] = useSettings( 'spacing.spacingSizes' );
+	const spacingSizes = useSpacingSizes();
 
 	const [ isResizing, setIsResizing ] = useState( false );
 	const [ temporaryHeight, setTemporaryHeight ] = useState( null );
@@ -346,7 +349,7 @@ const SpacerEdit = ( {
 			<View
 				{ ...useBlockProps( {
 					style,
-					className: classnames( className, {
+					className: clsx( className, {
 						'custom-sizes-disabled': disableCustomSpacingSizes,
 					} ),
 				} ) }
diff --git a/packages/block-library/src/table/deprecated.js b/packages/block-library/src/table/deprecated.js
index 43d4b0098a02f..5f8ab6d5a7e3f 100644
--- a/packages/block-library/src/table/deprecated.js
+++ b/packages/block-library/src/table/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -174,13 +174,9 @@ const v4 = {
 		const colorProps = getColorClassesAndStyles( attributes );
 		const borderProps = getBorderClassesAndStyles( attributes );
 
-		const classes = classnames(
-			colorProps.className,
-			borderProps.className,
-			{
-				'has-fixed-layout': hasFixedLayout,
-			}
-		);
+		const classes = clsx( colorProps.className, borderProps.className, {
+			'has-fixed-layout': hasFixedLayout,
+		} );
 
 		const hasCaption = ! RichText.isEmpty( caption );
 
@@ -207,7 +203,7 @@ const v4 = {
 									},
 									cellIndex
 								) => {
-									const cellClasses = classnames( {
+									const cellClasses = clsx( {
 										[ `has-text-align-${ align }` ]: align,
 									} );
 
@@ -395,13 +391,9 @@ const v3 = {
 		const colorProps = getColorClassesAndStyles( attributes );
 		const borderProps = getBorderClassesAndStyles( attributes );
 
-		const classes = classnames(
-			colorProps.className,
-			borderProps.className,
-			{
-				'has-fixed-layout': hasFixedLayout,
-			}
-		);
+		const classes = clsx( colorProps.className, borderProps.className, {
+			'has-fixed-layout': hasFixedLayout,
+		} );
 
 		const hasCaption = ! RichText.isEmpty( caption );
 
@@ -421,7 +413,7 @@ const v3 = {
 									{ content, tag, scope, align },
 									cellIndex
 								) => {
-									const cellClasses = classnames( {
+									const cellClasses = clsx( {
 										[ `has-text-align-${ align }` ]: align,
 									} );
 
@@ -570,7 +562,7 @@ const v2 = {
 			backgroundColor
 		);
 
-		const classes = classnames( backgroundClass, {
+		const classes = clsx( backgroundClass, {
 			'has-fixed-layout': hasFixedLayout,
 			'has-background': !! backgroundClass,
 		} );
@@ -593,7 +585,7 @@ const v2 = {
 									{ content, tag, scope, align },
 									cellIndex
 								) => {
-									const cellClasses = classnames( {
+									const cellClasses = clsx( {
 										[ `has-text-align-${ align }` ]: align,
 									} );
 
@@ -746,7 +738,7 @@ const v1 = {
 			backgroundColor
 		);
 
-		const classes = classnames( backgroundClass, {
+		const classes = clsx( backgroundClass, {
 			'has-fixed-layout': hasFixedLayout,
 			'has-background': !! backgroundClass,
 		} );
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index b8f239a01095d..f0c3ece790863 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -419,7 +419,7 @@ function TableEdit( {
 								scope={ CellTag === 'th' ? scope : undefined }
 								colSpan={ colspan }
 								rowSpan={ rowspan }
-								className={ classnames(
+								className={ clsx(
 									{
 										[ `has-text-align-${ align }` ]: align,
 									},
@@ -505,7 +505,7 @@ function TableEdit( {
 			</InspectorControls>
 			{ ! isEmpty && (
 				<table
-					className={ classnames(
+					className={ clsx(
 						colorProps.className,
 						borderProps.className,
 						{
diff --git a/packages/block-library/src/table/save.js b/packages/block-library/src/table/save.js
index dca1295656aa6..abf0c3ce900dc 100644
--- a/packages/block-library/src/table/save.js
+++ b/packages/block-library/src/table/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -25,7 +25,7 @@ export default function save( { attributes } ) {
 	const colorProps = getColorClassesAndStyles( attributes );
 	const borderProps = getBorderClassesAndStyles( attributes );
 
-	const classes = classnames( colorProps.className, borderProps.className, {
+	const classes = clsx( colorProps.className, borderProps.className, {
 		'has-fixed-layout': hasFixedLayout,
 	} );
 
@@ -54,7 +54,7 @@ export default function save( { attributes } ) {
 								},
 								cellIndex
 							) => {
-								const cellClasses = classnames( {
+								const cellClasses = clsx( {
 									[ `has-text-align-${ align }` ]: align,
 								} );
 
diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss
index 4f4271650f50e..69cd2666e13e2 100644
--- a/packages/block-library/src/table/style.scss
+++ b/packages/block-library/src/table/style.scss
@@ -71,6 +71,9 @@
 	}
 
 	// "Stripes" style variation.
+	// This block style selector does not have 0-1-0 specificity, as per those
+	// generated via global styles, to maintain current styling. Global styles
+	// support for table borders also only applies to the outer `table` element.
 	&.is-style-stripes {
 		border-spacing: 0;
 		border-collapse: inherit;
diff --git a/packages/block-library/src/table/theme.scss b/packages/block-library/src/table/theme.scss
index 19dc71c8857bd..d42e79b02b496 100644
--- a/packages/block-library/src/table/theme.scss
+++ b/packages/block-library/src/table/theme.scss
@@ -1,4 +1,6 @@
 .wp-block-table {
+	margin: 0 0 1em 0;
+
 	td,
 	th {
 		word-break: normal;
@@ -8,7 +10,3 @@
 		@include caption-style-theme();
 	}
 }
-
-:where(.wp-block-table) {
-	margin: 0 0 1em 0;
-}
diff --git a/packages/block-library/src/tag-cloud/style.scss b/packages/block-library/src/tag-cloud/style.scss
index 5fb04840de151..dedb5e73ab1a1 100644
--- a/packages/block-library/src/tag-cloud/style.scss
+++ b/packages/block-library/src/tag-cloud/style.scss
@@ -22,18 +22,20 @@
 		margin-left: 5px;
 		text-decoration: none;
 	}
+}
 
-	&.is-style-outline {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 1ch;
-
-		a {
-			border: 1px solid currentColor;
-			font-size: unset !important; // !important Needed to override the inline styles.
-			margin-right: 0;
-			padding: 1ch 2ch;
-			text-decoration: none !important; // !important needed to override generic post content link decoration.
-		}
-	}
+// Specificity is set to 0-1-0 to match global styles selectors.
+:root :where(.wp-block-tag-cloud.is-style-outline) {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1ch;
+}
+// The block support related styles below haven't been replicated in the base theme.json
+// as the block doesn't yet adopt them for its inner links.
+:root :where(.wp-block-tag-cloud.is-style-outline a) {
+	border: 1px solid currentColor;
+	font-size: unset !important; // !important Needed to override the inline styles.
+	margin-right: 0;
+	padding: 1ch 2ch;
+	text-decoration: none !important; // !important needed to override generic post content link decoration.
 }
diff --git a/packages/block-library/src/template-part/edit/title-modal.js b/packages/block-library/src/template-part/edit/title-modal.js
index f813541bd7d73..bae4e893443c8 100644
--- a/packages/block-library/src/template-part/edit/title-modal.js
+++ b/packages/block-library/src/template-part/edit/title-modal.js
@@ -43,8 +43,8 @@ export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
 						<Button
 							variant="primary"
 							type="submit"
+							__experimentalIsFocusable
 							disabled={ ! title.length }
-							aria-disabled={ ! title.length }
 						>
 							{ __( 'Create' ) }
 						</Button>
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index e5df190c2fe85..71659ce6ba717 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -24,24 +24,21 @@
 }
 
 // We don't use .is-outline-mode in this case so colors take effect properly in the block editor.
-// Will be a better result when outlines are not shadows, but outlines, so we can target outline-color, not redefine the entire shadow.
 .block-editor-block-list__block:not(.remove-outline).wp-block-template-part,
 .block-editor-block-list__block:not(.remove-outline).is-reusable {
+
 	&.is-highlighted::after,
 	&.is-selected::after {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
-	}
-
-	&.is-hovered::after {
-		box-shadow: 0 0 0 $border-width var(--wp-block-synced-color);
+		outline-color: var(--wp-block-synced-color);
 	}
 
 	&.block-editor-block-list__block:not([contenteditable]):focus {
 		&::after {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+			outline-color: var(--wp-block-synced-color);
+
 			// Show a light color for dark themes.
 			.is-dark-theme & {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
+				outline-color: $dark-theme-focus;
 			}
 		}
 	}
diff --git a/packages/block-library/src/template-part/theme.scss b/packages/block-library/src/template-part/theme.scss
index 2f1d3a0a513cb..179873b9448b8 100644
--- a/packages/block-library/src/template-part/theme.scss
+++ b/packages/block-library/src/template-part/theme.scss
@@ -1,9 +1,7 @@
 // Same as the group block styles.
-:where(.wp-block-template-part) {
-	&.has-background {
-		// Matches paragraph Block padding
-		padding: $block-bg-padding--v $block-bg-padding--h;
-		margin-top: 0;
-		margin-bottom: 0;
-	}
+:root :where(.wp-block-template-part.has-background) {
+	// Matches paragraph Block padding
+	padding: $block-bg-padding--v $block-bg-padding--h;
+	margin-top: 0;
+	margin-bottom: 0;
 }
diff --git a/packages/block-library/src/term-description/edit.js b/packages/block-library/src/term-description/edit.js
index cd728ec051b60..c19d38abde513 100644
--- a/packages/block-library/src/term-description/edit.js
+++ b/packages/block-library/src/term-description/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ export default function TermDescriptionEdit( {
 } ) {
 	const { textAlign } = attributes;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 		style: mergedStyle,
diff --git a/packages/block-library/src/utils/caption.js b/packages/block-library/src/utils/caption.js
index e365593dcc663..2c653a9cc7fb8 100644
--- a/packages/block-library/src/utils/caption.js
+++ b/packages/block-library/src/utils/caption.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -94,7 +94,7 @@ export function Caption( {
 					<RichText
 						identifier={ attributeKey }
 						tagName={ tagName }
-						className={ classnames(
+						className={ clsx(
 							className,
 							__experimentalGetElementClassName( 'caption' )
 						) }
diff --git a/packages/block-library/src/utils/hooks.js b/packages/block-library/src/utils/hooks.js
index 85196fe67ed7a..418b0dbebb0c0 100644
--- a/packages/block-library/src/utils/hooks.js
+++ b/packages/block-library/src/utils/hooks.js
@@ -33,6 +33,7 @@ export function useCanEditEntity( kind, name, recordId ) {
  */
 export function useUploadMediaFromBlobURL( args = {} ) {
 	const latestArgs = useRef( args );
+	const hasUploadStarted = useRef( false );
 	const { getSettings } = useSelect( blockEditorStore );
 
 	useLayoutEffect( () => {
@@ -40,6 +41,12 @@ export function useUploadMediaFromBlobURL( 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 ) {
+			return;
+		}
+
 		if (
 			! latestArgs.current.url ||
 			! isBlobURL( latestArgs.current.url )
@@ -55,6 +62,8 @@ export function useUploadMediaFromBlobURL( args = {} ) {
 		const { url, allowedTypes, onChange, onError } = latestArgs.current;
 		const { mediaUpload } = getSettings();
 
+		hasUploadStarted.current = true;
+
 		mediaUpload( {
 			filesList: [ file ],
 			allowedTypes,
@@ -65,10 +74,12 @@ export function useUploadMediaFromBlobURL( args = {} ) {
 
 				revokeBlobURL( url );
 				onChange( media );
+				hasUploadStarted.current = false;
 			},
 			onError: ( message ) => {
 				revokeBlobURL( url );
 				onError( message );
+				hasUploadStarted.current = false;
 			},
 		} );
 	}, [ getSettings ] );
diff --git a/packages/block-library/src/verse/deprecated.js b/packages/block-library/src/verse/deprecated.js
index d986e2df75e5b..7e3c96bc80cd9 100644
--- a/packages/block-library/src/verse/deprecated.js
+++ b/packages/block-library/src/verse/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -69,7 +69,7 @@ const v2 = {
 	save( { attributes } ) {
 		const { textAlign, content } = attributes;
 
-		const className = classnames( {
+		const className = clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} );
 
diff --git a/packages/block-library/src/verse/edit.js b/packages/block-library/src/verse/edit.js
index a76ecc1ff6ab4..ea7a2037303a8 100644
--- a/packages/block-library/src/verse/edit.js
+++ b/packages/block-library/src/verse/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -25,7 +25,7 @@ export default function VerseEdit( {
 } ) {
 	const { textAlign, content } = attributes;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 		style,
diff --git a/packages/block-library/src/verse/save.js b/packages/block-library/src/verse/save.js
index 9a535f7b19c68..42f10533cac17 100644
--- a/packages/block-library/src/verse/save.js
+++ b/packages/block-library/src/verse/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { RichText, useBlockProps } from '@wordpress/block-editor';
 export default function save( { attributes } ) {
 	const { textAlign, content } = attributes;
 
-	const className = classnames( {
+	const className = clsx( {
 		[ `has-text-align-${ textAlign }` ]: textAlign,
 	} );
 
diff --git a/packages/block-library/src/video/edit-common-settings.js b/packages/block-library/src/video/edit-common-settings.js
index d781fb31b5f3a..5ebf431ade3fc 100644
--- a/packages/block-library/src/video/edit-common-settings.js
+++ b/packages/block-library/src/video/edit-common-settings.js
@@ -74,9 +74,13 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 			/>
 			<ToggleControl
 				__nextHasNoMarginBottom
+				/* translators: Setting to play videos within the webpage on mobile browsers rather than opening in a fullscreen player. */
 				label={ __( 'Play inline' ) }
 				onChange={ toggleFactory.playsInline }
 				checked={ !! playsInline }
+				help={ __(
+					'When enabled, videos will play directly within the webpage on mobile browsers, instead of opening in a fullscreen player.'
+				) }
 			/>
 			<SelectControl
 				__nextHasNoMarginBottom
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index 3b66e476002e1..f7d535667f2bf 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -134,7 +134,7 @@ function VideoEdit( {
 		createErrorNotice( message, { type: 'snackbar' } );
 	}
 
-	const classes = classnames( className, {
+	const classes = clsx( className, {
 		'is-transient': isTemporaryVideo,
 	} );
 
diff --git a/packages/block-library/src/video/theme.scss b/packages/block-library/src/video/theme.scss
index c5399582bbb28..cdc95af0b02c2 100644
--- a/packages/block-library/src/video/theme.scss
+++ b/packages/block-library/src/video/theme.scss
@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-:where(.wp-block-video) {
+.wp-block-video {
 	margin: 0 0 1em 0;
 }
diff --git a/packages/block-serialization-default-parser/CHANGELOG.md b/packages/block-serialization-default-parser/CHANGELOG.md
index 1fdfcd7d5847e..199849d08ce2c 100644
--- a/packages/block-serialization-default-parser/CHANGELOG.md
+++ b/packages/block-serialization-default-parser/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.58.0 (2024-05-16)
+
 ## 4.57.0 (2024-05-02)
 
 ## 4.56.0 (2024-04-19)
diff --git a/packages/block-serialization-default-parser/package.json b/packages/block-serialization-default-parser/package.json
index 5870d6381e485..fba002addabba 100644
--- a/packages/block-serialization-default-parser/package.json
+++ b/packages/block-serialization-default-parser/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-serialization-default-parser",
-	"version": "4.57.0",
+	"version": "5.0.0",
 	"description": "Block serialization specification parser for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/block-serialization-spec-parser/CHANGELOG.md b/packages/block-serialization-spec-parser/CHANGELOG.md
index 0a34380bc0628..2048ba7631ee0 100644
--- a/packages/block-serialization-spec-parser/CHANGELOG.md
+++ b/packages/block-serialization-spec-parser/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.58.0 (2024-05-16)
+
 ## 4.57.0 (2024-05-02)
 
 ## 4.56.0 (2024-04-19)
diff --git a/packages/block-serialization-spec-parser/package.json b/packages/block-serialization-spec-parser/package.json
index f83d52d8657fb..b83b8ebb4b38d 100644
--- a/packages/block-serialization-spec-parser/package.json
+++ b/packages/block-serialization-spec-parser/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-serialization-spec-parser",
-	"version": "4.57.0",
+	"version": "5.0.0",
 	"description": "Block serialization specification parser for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "parser.js",
 	"sideEffects": false,
diff --git a/packages/blocks/CHANGELOG.md b/packages/blocks/CHANGELOG.md
index 0e4544cfeeacb..de9f9180822d4 100644
--- a/packages/blocks/CHANGELOG.md
+++ b/packages/blocks/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 ## Unreleased
 
+## 13.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 12.35.0 (2024-05-16)
+
 ## 12.34.0 (2024-05-02)
 
 ## 12.33.0 (2024-04-19)
@@ -90,7 +99,8 @@
 
 ## 11.17.0 (2022-09-21)
 
-- The block attribute sources `children` and `node` have been deprecated. Please use the `html` source instead. See https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/ and the core blocks for examples.
+-   The block attribute sources `children` and `node` have been deprecated. Please use the `html` source instead. See https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/ and the core blocks for examples.
+
 ## 11.16.0 (2022-09-13)
 
 ## 11.15.0 (2022-08-24)
diff --git a/packages/blocks/README.md b/packages/blocks/README.md
index 8e6fdc9d900db..4086186258573 100644
--- a/packages/blocks/README.md
+++ b/packages/blocks/README.md
@@ -507,7 +507,7 @@ _Parameters_
 
 ### registerBlockStyle
 
-Registers a new block style for the given block.
+Registers a new block style for the given block types.
 
 For more information on connecting the styles with CSS [the official documentation](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/#styles).
 
@@ -536,7 +536,7 @@ const ExampleComponent = () => {
 
 _Parameters_
 
--   _blockName_ `string`: Name of block (example: “core/latest-posts”).
+-   _blockNames_ `string|Array`: Name of blocks e.g. “core/latest-posts” or `["core/group", "core/columns"]`.
 -   _styleVariation_ `Object`: Object containing `name` which is the class name applied to the block and `label` which identifies the variation to the user.
 
 ### registerBlockType
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
index 1fdc0383f07d2..8250de1fac564 100644
--- a/packages/blocks/package.json
+++ b/packages/blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/blocks",
-	"version": "12.34.0",
+	"version": "13.0.0",
 	"description": "Block API for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -32,7 +33,6 @@
 		"@wordpress/autop": "file:../autop",
 		"@wordpress/blob": "file:../blob",
 		"@wordpress/block-serialization-default-parser": "file:../block-serialization-default-parser",
-		"@wordpress/compose": "file:../compose",
 		"@wordpress/data": "file:../data",
 		"@wordpress/deprecated": "file:../deprecated",
 		"@wordpress/dom": "file:../dom",
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index 08b4e084e2ec9..620dfcbb8599c 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -51,6 +51,11 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		support: [ 'background', 'backgroundSize' ],
 		useEngine: true,
 	},
+	backgroundPosition: {
+		value: [ 'background', 'backgroundPosition' ],
+		support: [ 'background', 'backgroundPosition' ],
+		useEngine: true,
+	},
 	borderColor: {
 		value: [ 'border', 'color' ],
 		support: [ '__experimentalBorder', 'color' ],
@@ -288,6 +293,7 @@ export const __EXPERIMENTAL_PATHS_WITH_OVERRIDE = {
 	'color.duotone': true,
 	'color.gradients': true,
 	'color.palette': true,
+	'dimensions.aspectRatios': true,
 	'typography.fontSizes': true,
 	'spacing.spacingSizes': true,
 };
diff --git a/packages/blocks/src/api/parser/convert-legacy-block.js b/packages/blocks/src/api/parser/convert-legacy-block.js
index c828a3f5db6c4..055679302efd6 100644
--- a/packages/blocks/src/api/parser/convert-legacy-block.js
+++ b/packages/blocks/src/api/parser/convert-legacy-block.js
@@ -79,7 +79,7 @@ export function convertLegacyBlockNameAndAttributes( name, attributes ) {
 
 	// The following code is only relevant for the Gutenberg plugin.
 	// It's a stand-alone if statement for dead-code elimination.
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 		// Convert pattern overrides added during experimental phase.
 		// Only four blocks were supported initially.
 		// These checks can be removed in WordPress 6.6.
@@ -88,25 +88,41 @@ export function convertLegacyBlockNameAndAttributes( name, attributes ) {
 			( name === 'core/paragraph' ||
 				name === 'core/heading' ||
 				name === 'core/image' ||
-				name === 'core/button' )
+				name === 'core/button' ) &&
+			newAttributes.metadata.bindings.__default?.source !==
+				'core/pattern-overrides'
 		) {
 			const bindings = [
 				'content',
 				'url',
 				'title',
+				'id',
 				'alt',
 				'text',
 				'linkTarget',
 			];
+			// Delete any existing individual bindings and add a default binding.
+			// It was only possible to add all the default attributes through the UI,
+			// So as soon as we find an attribute, we can assume all default attributes are overridable.
+			let hasPatternOverrides = false;
 			bindings.forEach( ( binding ) => {
 				if (
-					newAttributes.metadata.bindings[ binding ]?.source?.name ===
-					'pattern_attributes'
+					newAttributes.metadata.bindings[ binding ]?.source ===
+					'core/pattern-overrides'
 				) {
-					newAttributes.metadata.bindings[ binding ].source =
-						'core/pattern-overrides';
+					hasPatternOverrides = true;
+					newAttributes.metadata = {
+						...newAttributes.metadata,
+						bindings: { ...newAttributes.metadata.bindings },
+					};
+					delete newAttributes.metadata.bindings[ binding ];
 				}
 			} );
+			if ( hasPatternOverrides ) {
+				newAttributes.metadata.bindings.__default = {
+					source: 'core/pattern-overrides',
+				};
+			}
 		}
 	}
 	return [ name, newAttributes ];
diff --git a/packages/blocks/src/api/parser/get-block-attributes.js b/packages/blocks/src/api/parser/get-block-attributes.js
index 24faae7370463..36ea86399329e 100644
--- a/packages/blocks/src/api/parser/get-block-attributes.js
+++ b/packages/blocks/src/api/parser/get-block-attributes.js
@@ -7,7 +7,6 @@ import memoize from 'memize';
 /**
  * WordPress dependencies
  */
-import { pipe } from '@wordpress/compose';
 import { applyFilters } from '@wordpress/hooks';
 import { RichTextData } from '@wordpress/rich-text';
 
@@ -37,24 +36,8 @@ import { normalizeBlockType, getDefault } from '../utils';
  *
  * @return {Function} Enhanced hpq matcher.
  */
-export const toBooleanAttributeMatcher = ( matcher ) =>
-	pipe( [
-		matcher,
-		// Expected values from `attr( 'disabled' )`:
-		//
-		// <input>
-		// - Value:       `undefined`
-		// - Transformed: `false`
-		//
-		// <input disabled>
-		// - Value:       `''`
-		// - Transformed: `true`
-		//
-		// <input disabled="disabled">
-		// - Value:       `'disabled'`
-		// - Transformed: `true`
-		( value ) => value !== undefined,
-	] );
+export const toBooleanAttributeMatcher = ( matcher ) => ( value ) =>
+	matcher( value ) !== undefined;
 
 /**
  * Returns true if value is of the given JSON schema type, or false otherwise.
@@ -214,13 +197,13 @@ export function isValidByEnum( value, enumSet ) {
  */
 export const matcherFromSource = memoize( ( sourceConfig ) => {
 	switch ( sourceConfig.source ) {
-		case 'attribute':
+		case 'attribute': {
 			let matcher = attr( sourceConfig.selector, sourceConfig.attribute );
 			if ( sourceConfig.type === 'boolean' ) {
 				matcher = toBooleanAttributeMatcher( matcher );
 			}
-
 			return matcher;
+		}
 		case 'html':
 			return html( sourceConfig.selector, sourceConfig.multiline );
 		case 'text':
@@ -244,12 +227,10 @@ export const matcherFromSource = memoize( ( sourceConfig ) => {
 				)
 			);
 			return query( sourceConfig.selector, subMatchers );
-		case 'tag':
-			return pipe( [
-				prop( sourceConfig.selector, 'nodeName' ),
-				( nodeName ) =>
-					nodeName ? nodeName.toLowerCase() : undefined,
-			] );
+		case 'tag': {
+			const matcher = prop( sourceConfig.selector, 'nodeName' );
+			return ( domNode ) => matcher( domNode )?.toLowerCase();
+		}
 		default:
 			// eslint-disable-next-line no-console
 			console.error( `Unknown source type "${ sourceConfig.source }"` );
diff --git a/packages/blocks/src/api/raw-handling/image-corrector.native.js b/packages/blocks/src/api/raw-handling/image-corrector.native.js
index c6a9288ede2d3..550c2e0e6e153 100644
--- a/packages/blocks/src/api/raw-handling/image-corrector.native.js
+++ b/packages/blocks/src/api/raw-handling/image-corrector.native.js
@@ -10,7 +10,10 @@ export default function imageCorrector( node ) {
 		return;
 	}
 
-	if ( node.src.indexOf( 'file:' ) === 0 ) {
+	// For local files makes sure the path doesn't end with an invalid extension.
+	// This scenario often happens with content from MS Word and similar text apps.
+	// We still need to support local files pasted from the users Media library.
+	if ( node.src.startsWith( 'file:' ) && node.src.slice( -1 ) === '/' ) {
 		node.setAttribute( 'src', '' );
 	}
 
diff --git a/packages/blocks/src/api/registration.js b/packages/blocks/src/api/registration.js
index 52a2f30983732..fb21b7083b0c5 100644
--- a/packages/blocks/src/api/registration.js
+++ b/packages/blocks/src/api/registration.js
@@ -611,13 +611,13 @@ export const hasChildBlocksWithInserterSupport = ( blockName ) => {
 };
 
 /**
- * Registers a new block style for the given block.
+ * Registers a new block style for the given block types.
  *
  * For more information on connecting the styles with CSS
  * [the official documentation](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/#styles).
  *
- * @param {string} blockName      Name of block (example: “core/latest-posts”).
- * @param {Object} styleVariation Object containing `name` which is the class name applied to the block and `label` which identifies the variation to the user.
+ * @param {string|Array} blockNames     Name of blocks e.g. “core/latest-posts” or `["core/group", "core/columns"]`.
+ * @param {Object}       styleVariation Object containing `name` which is the class name applied to the block and `label` which identifies the variation to the user.
  *
  * @example
  * ```js
@@ -642,8 +642,8 @@ export const hasChildBlocksWithInserterSupport = ( blockName ) => {
  * };
  * ```
  */
-export const registerBlockStyle = ( blockName, styleVariation ) => {
-	dispatch( blocksStore ).addBlockStyles( blockName, styleVariation );
+export const registerBlockStyle = ( blockNames, styleVariation ) => {
+	dispatch( blocksStore ).addBlockStyles( blockNames, styleVariation );
 };
 
 /**
diff --git a/packages/blocks/src/store/actions.js b/packages/blocks/src/store/actions.js
index d3bd71c067ebe..34216e05808ad 100644
--- a/packages/blocks/src/store/actions.js
+++ b/packages/blocks/src/store/actions.js
@@ -98,18 +98,18 @@ export function removeBlockTypes( names ) {
  * Returns an action object used in signalling that new block styles have been added.
  * Ignored from documentation as the recommended usage for this action through registerBlockStyle from @wordpress/blocks.
  *
- * @param {string}       blockName Block name.
- * @param {Array|Object} styles    Block style object or array of block style objects.
+ * @param {string|Array} blockNames Block names to register new styles for.
+ * @param {Array|Object} styles     Block style object or array of block style objects.
  *
  * @ignore
  *
  * @return {Object} Action object.
  */
-export function addBlockStyles( blockName, styles ) {
+export function addBlockStyles( blockNames, styles ) {
 	return {
 		type: 'ADD_BLOCK_STYLES',
 		styles: Array.isArray( styles ) ? styles : [ styles ],
-		blockName,
+		blockNames: Array.isArray( blockNames ) ? blockNames : [ blockNames ],
 	};
 }
 
diff --git a/packages/blocks/src/store/private-actions.js b/packages/blocks/src/store/private-actions.js
index 1ef9c3614922e..dd6650338d9d1 100644
--- a/packages/blocks/src/store/private-actions.js
+++ b/packages/blocks/src/store/private-actions.js
@@ -53,7 +53,8 @@ export function registerBlockBindingsSource( source ) {
 		sourceLabel: source.label,
 		getValue: source.getValue,
 		setValue: source.setValue,
+		setValues: source.setValues,
 		getPlaceholder: source.getPlaceholder,
-		lockAttributesEditing: source.lockAttributesEditing,
+		canUserEditValue: source.canUserEditValue,
 	};
 }
diff --git a/packages/blocks/src/store/reducer.js b/packages/blocks/src/store/reducer.js
index 7a3a866485e4a..c00810c534d55 100644
--- a/packages/blocks/src/store/reducer.js
+++ b/packages/blocks/src/store/reducer.js
@@ -201,13 +201,14 @@ export function blockStyles( state = {}, action ) {
 				),
 			};
 		case 'ADD_BLOCK_STYLES':
-			return {
-				...state,
-				[ action.blockName ]: getUniqueItemsByName( [
-					...( state[ action.blockName ] ?? [] ),
+			const updatedStyles = {};
+			action.blockNames.forEach( ( blockName ) => {
+				updatedStyles[ blockName ] = getUniqueItemsByName( [
+					...( state[ blockName ] ?? [] ),
 					...action.styles,
-				] ),
-			};
+				] );
+			} );
+			return { ...state, ...updatedStyles };
 		case 'REMOVE_BLOCK_STYLES':
 			return {
 				...state,
@@ -378,8 +379,9 @@ export function blockBindingsSources( state = {}, action ) {
 				label: action.sourceLabel,
 				getValue: action.getValue,
 				setValue: action.setValue,
+				setValues: action.setValues,
 				getPlaceholder: action.getPlaceholder,
-				lockAttributesEditing: action.lockAttributesEditing ?? true,
+				canUserEditValue: action.canUserEditValue || ( () => false ),
 			},
 		};
 	}
diff --git a/packages/blocks/src/store/selectors.js b/packages/blocks/src/store/selectors.js
index a69879809ab1a..ecdc82e763304 100644
--- a/packages/blocks/src/store/selectors.js
+++ b/packages/blocks/src/store/selectors.js
@@ -6,7 +6,6 @@ import removeAccents from 'remove-accents';
 /**
  * WordPress dependencies
  */
-import { pipe } from '@wordpress/compose';
 import { createSelector } from '@wordpress/data';
 
 /**
@@ -238,26 +237,54 @@ export const getBlockVariations = createSelector(
 export function getActiveBlockVariation( state, blockName, attributes, scope ) {
 	const variations = getBlockVariations( state, blockName, scope );
 
-	const match = variations?.find( ( variation ) => {
+	if ( ! variations ) {
+		return variations;
+	}
+
+	const blockType = getBlockType( state, blockName );
+	const attributeKeys = Object.keys( blockType?.attributes || {} );
+	let match;
+	let maxMatchedAttributes = 0;
+
+	for ( const variation of variations ) {
 		if ( Array.isArray( variation.isActive ) ) {
-			const blockType = getBlockType( state, blockName );
-			const attributeKeys = Object.keys( blockType?.attributes || {} );
 			const definedAttributes = variation.isActive.filter(
-				( attribute ) => attributeKeys.includes( attribute )
+				( attribute ) => {
+					// We support nested attribute paths, e.g. `layout.type`.
+					// In this case, we need to check if the part before the
+					// first dot is a known attribute.
+					const topLevelAttribute = attribute.split( '.' )[ 0 ];
+					return attributeKeys.includes( topLevelAttribute );
+				}
 			);
-			if ( definedAttributes.length === 0 ) {
-				return false;
+			const definedAttributesLength = definedAttributes.length;
+			if ( definedAttributesLength === 0 ) {
+				continue;
 			}
-			return definedAttributes.every(
-				( attribute ) =>
-					attributes[ attribute ] ===
-					variation.attributes[ attribute ]
-			);
+			const isMatch = definedAttributes.every( ( attribute ) => {
+				const attributeValue = getValueFromObjectPath(
+					attributes,
+					attribute
+				);
+				if ( attributeValue === undefined ) {
+					return false;
+				}
+				return (
+					attributeValue ===
+					getValueFromObjectPath( variation.attributes, attribute )
+				);
+			} );
+			if ( isMatch && definedAttributesLength > maxMatchedAttributes ) {
+				match = variation;
+				maxMatchedAttributes = definedAttributesLength;
+			}
+		} else if ( variation.isActive?.( attributes, variation.attributes ) ) {
+			// If isActive is a function, we cannot know how many attributes it matches.
+			// This means that we cannot compare the specificity of our matches,
+			// and simply return the best match we have found.
+			return match || variation;
 		}
-
-		return variation.isActive?.( attributes, variation.attributes );
-	} );
-
+	}
 	return match;
 }
 
@@ -645,6 +672,18 @@ export function hasBlockSupport( state, nameOrType, feature, defaultSupports ) {
 	return !! getBlockSupport( state, nameOrType, feature, defaultSupports );
 }
 
+/**
+ * Normalizes a search term string: removes accents, converts to lowercase, removes extra whitespace.
+ *
+ * @param {string|null|undefined} term Search term to normalize.
+ * @return {string} Normalized search term.
+ */
+function getNormalizedSearchTerm( term ) {
+	return removeAccents( term ?? '' )
+		.toLowerCase()
+		.trim();
+}
+
 /**
  * Returns true if the block type by the given name or object value matches a
  * search term, or false otherwise.
@@ -684,30 +723,12 @@ export function hasBlockSupport( state, nameOrType, feature, defaultSupports ) {
  *
  * @return {Object[]} Whether block type matches search term.
  */
-export function isMatchingSearchTerm( state, nameOrType, searchTerm ) {
+export function isMatchingSearchTerm( state, nameOrType, searchTerm = '' ) {
 	const blockType = getNormalizedBlockType( state, nameOrType );
-
-	const getNormalizedSearchTerm = pipe( [
-		// Disregard diacritics.
-		//  Input: "média"
-		( term ) => removeAccents( term ?? '' ),
-
-		// Lowercase.
-		//  Input: "MEDIA"
-		( term ) => term.toLowerCase(),
-
-		// Strip leading and trailing whitespace.
-		//  Input: " media "
-		( term ) => term.trim(),
-	] );
-
 	const normalizedSearchTerm = getNormalizedSearchTerm( searchTerm );
 
-	const isSearchMatch = pipe( [
-		getNormalizedSearchTerm,
-		( normalizedCandidate ) =>
-			normalizedCandidate.includes( normalizedSearchTerm ),
-	] );
+	const isSearchMatch = ( candidate ) =>
+		getNormalizedSearchTerm( candidate ).includes( normalizedSearchTerm );
 
 	return (
 		isSearchMatch( blockType.title ) ||
diff --git a/packages/blocks/src/store/test/reducer.js b/packages/blocks/src/store/test/reducer.js
index 5664f9d876cb6..babaaad4e0e0d 100644
--- a/packages/blocks/src/store/test/reducer.js
+++ b/packages/blocks/src/store/test/reducer.js
@@ -10,6 +10,7 @@ import {
 	addBlockVariations,
 	addBlockTypes,
 	removeBlockVariations,
+	addBlockStyles,
 } from '../actions';
 import {
 	unprocessedBlockTypes,
@@ -108,30 +109,55 @@ describe( 'blockStyles', () => {
 		expect( blockStyles( undefined, {} ) ).toEqual( {} );
 	} );
 
-	it( 'should add a new block styles', () => {
+	it( 'should add new block styles for a single block type', () => {
 		const original = deepFreeze( {} );
 
-		let state = blockStyles( original, {
-			type: 'ADD_BLOCK_STYLES',
-			blockName,
-			styles: [ { name: 'fancy' } ],
-		} );
+		let state = blockStyles(
+			original,
+			addBlockStyles( blockName, [ { name: 'fancy' } ] )
+		);
 
 		expect( state ).toEqual( {
 			[ blockName ]: [ { name: 'fancy' } ],
 		} );
 
-		state = blockStyles( state, {
-			type: 'ADD_BLOCK_STYLES',
-			blockName,
-			styles: [ { name: 'lightbox' } ],
-		} );
+		state = blockStyles(
+			state,
+			addBlockStyles( blockName, [ { name: 'lightbox' } ] )
+		);
 
 		expect( state ).toEqual( {
 			[ blockName ]: [ { name: 'fancy' }, { name: 'lightbox' } ],
 		} );
 	} );
 
+	it( 'should add block styles for array of block types', () => {
+		const original = deepFreeze( {} );
+
+		let state = blockStyles(
+			original,
+			addBlockStyles(
+				[ 'core/group', 'core/columns' ],
+				[ { name: 'dark' } ]
+			)
+		);
+
+		expect( state ).toEqual( {
+			'core/group': [ { name: 'dark' } ],
+			'core/columns': [ { name: 'dark' } ],
+		} );
+
+		state = blockStyles(
+			state,
+			addBlockStyles( [ 'core/group' ], [ { name: 'light' } ] )
+		);
+
+		expect( state ).toEqual( {
+			'core/group': [ { name: 'dark' }, { name: 'light' } ],
+			'core/columns': [ { name: 'dark' } ],
+		} );
+	} );
+
 	it( 'should prepend block styles when adding a block', () => {
 		const original = deepFreeze( {
 			[ blockName ]: [ { name: 'fancy' } ],
diff --git a/packages/blocks/src/store/test/selectors.js b/packages/blocks/src/store/test/selectors.js
index 1fda11d72311a..1a6e768724acc 100644
--- a/packages/blocks/src/store/test/selectors.js
+++ b/packages/blocks/src/store/test/selectors.js
@@ -291,6 +291,7 @@ describe( 'selectors', () => {
 					testAttribute: {},
 					firstTestAttribute: {},
 					secondTestAttribute: {},
+					thirdTestAttribute: {},
 				},
 			};
 			const FIRST_VARIATION_TEST_ATTRIBUTE_VALUE = 1;
@@ -410,6 +411,47 @@ describe( 'selectors', () => {
 					expect( result ).toEqual( variation );
 				} );
 			} );
+			it( 'should support nested attribute paths in the isActive array', () => {
+				const variations = [
+					{
+						name: 'variation-1',
+						attributes: {
+							firstTestAttribute: {
+								nestedProperty: 1,
+								otherNestedProperty: 5555,
+							},
+						},
+						isActive: [ 'firstTestAttribute.nestedProperty' ],
+					},
+					{
+						name: 'variation-2',
+						attributes: {
+							firstTestAttribute: {
+								nestedProperty: 2,
+								otherNestedProperty: 5555,
+							},
+						},
+						isActive: [ 'firstTestAttribute.nestedProperty' ],
+					},
+				];
+				const state =
+					createBlockVariationsStateWithTestBlockType( variations );
+
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: {
+							nestedProperty: 1,
+						},
+					} )
+				).toEqual( variations[ 0 ] );
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: {
+							nestedProperty: 2,
+						},
+					} )
+				).toEqual( variations[ 1 ] );
+			} );
 			it( 'should return the active variation based on the given isActive array (multiple values)', () => {
 				const variations = [
 					{
@@ -469,6 +511,136 @@ describe( 'selectors', () => {
 					} )
 				).toEqual( variations[ 2 ] );
 			} );
+			it( 'should return the active variation using the match with the highest specificity for the given isActive array (multiple values)', () => {
+				const variations = [
+					{
+						name: 'variation-1',
+						attributes: {
+							firstTestAttribute: 1,
+							secondTestAttribute: 2,
+						},
+						isActive: [
+							'firstTestAttribute',
+							'secondTestAttribute',
+						],
+					},
+					{
+						name: 'variation-2',
+						attributes: {
+							firstTestAttribute: 1,
+							secondTestAttribute: 2,
+							thirdTestAttribute: 3,
+						},
+						isActive: [
+							'firstTestAttribute',
+							'secondTestAttribute',
+							'thirdTestAttribute',
+						],
+					},
+					{
+						name: 'variation-3',
+						attributes: {
+							firstTestAttribute: 1,
+							thirdTestAttribute: 3,
+						},
+						isActive: [
+							'firstTestAttribute',
+							'thirdTestAttribute',
+						],
+					},
+				];
+
+				const state =
+					createBlockVariationsStateWithTestBlockType( variations );
+
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: 1,
+						secondTestAttribute: 2,
+					} )
+				).toEqual( variations[ 0 ] );
+				// All variations match the following attributes. Since all matches have an array for their isActive
+				// fields, we can compare the specificity of each match and return the most specific match.
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: 1,
+						secondTestAttribute: 2,
+						thirdTestAttribute: 3,
+					} )
+				).toEqual( variations[ 1 ] );
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: 1,
+						thirdTestAttribute: 3,
+					} )
+				).toEqual( variations[ 2 ] );
+			} );
+			it( 'should return the active variation using the first match given the isActive array (multiple values) and function', () => {
+				const variations = [
+					{
+						name: 'variation-1',
+						attributes: {
+							firstTestAttribute: 1,
+							secondTestAttribute: 2,
+						},
+						isActive: [
+							'firstTestAttribute',
+							'secondTestAttribute',
+						],
+					},
+					{
+						name: 'variation-2',
+						attributes: {
+							firstTestAttribute: 1,
+							secondTestAttribute: 2,
+							thirdTestAttribute: 3,
+						},
+						isActive: [
+							'firstTestAttribute',
+							'secondTestAttribute',
+							'thirdTestAttribute',
+						],
+					},
+					{
+						name: 'variation-3',
+						attributes: {
+							firstTestAttribute: 1,
+							thirdTestAttribute: 3,
+						},
+						isActive: ( blockAttributes, variationAttributes ) =>
+							blockAttributes.firstTestAttribute ===
+								variationAttributes.firstTestAttribute &&
+							blockAttributes.thirdTestAttribute ===
+								variationAttributes.thirdTestAttribute,
+					},
+				];
+
+				const state =
+					createBlockVariationsStateWithTestBlockType( variations );
+
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: 1,
+						secondTestAttribute: 2,
+					} )
+				).toEqual( variations[ 0 ] );
+				// All variations match the following attributes. However, since the third variation has a function
+				// for its isActive field, we cannot compare the specificity of each match, so instead we return the
+				// best match we've found.
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: 1,
+						secondTestAttribute: 2,
+						thirdTestAttribute: 3,
+					} )
+				).toEqual( variations[ 1 ] );
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: 1,
+						thirdTestAttribute: 3,
+					} )
+				).toEqual( variations[ 2 ] );
+			} );
 			it( 'should ignore attributes that are not defined in the block type', () => {
 				const variations = [
 					{
diff --git a/packages/browserslist-config/CHANGELOG.md b/packages/browserslist-config/CHANGELOG.md
index d9651ea02bcbe..6737bb003c193 100644
--- a/packages/browserslist-config/CHANGELOG.md
+++ b/packages/browserslist-config/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 6.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 5.41.0 (2024-05-16)
+
 ## 5.40.0 (2024-05-02)
 
 ## 5.39.0 (2024-04-19)
diff --git a/packages/browserslist-config/README.md b/packages/browserslist-config/README.md
index 0ab8e724947d7..2376c8332a2b8 100644
--- a/packages/browserslist-config/README.md
+++ b/packages/browserslist-config/README.md
@@ -10,7 +10,7 @@ Install the module
 $ npm install browserslist @wordpress/browserslist-config --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Usage
 
diff --git a/packages/browserslist-config/package.json b/packages/browserslist-config/package.json
index 012941eb05270..4f5a1773c25f9 100644
--- a/packages/browserslist-config/package.json
+++ b/packages/browserslist-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/browserslist-config",
-	"version": "5.40.0",
+	"version": "6.0.0",
 	"description": "WordPress Browserslist shared configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"index.js"
diff --git a/packages/commands/CHANGELOG.md b/packages/commands/CHANGELOG.md
index c7eac41f4d6c4..17a55cbf221de 100644
--- a/packages/commands/CHANGELOG.md
+++ b/packages/commands/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 1.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 0.29.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
 ## 0.28.0 (2024-05-02)
 
 ## 0.27.0 (2024-04-19)
diff --git a/packages/commands/package.json b/packages/commands/package.json
index 6eadcb8127898..a4a8e952f3ef1 100644
--- a/packages/commands/package.json
+++ b/packages/commands/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/commands",
-	"version": "0.28.0",
+	"version": "1.0.0",
 	"description": "Handles the commands menu.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -34,7 +35,7 @@
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/private-apis": "file:../private-apis",
-		"classnames": "^2.3.1",
+		"clsx": "^2.1.1",
 		"cmdk": "^0.2.0"
 	},
 	"peerDependencies": {
diff --git a/packages/commands/src/components/command-menu.js b/packages/commands/src/components/command-menu.js
index 0d90f62a8737b..3a129823fedb3 100644
--- a/packages/commands/src/components/command-menu.js
+++ b/packages/commands/src/components/command-menu.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Command, useCommandState } from 'cmdk';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -55,7 +55,7 @@ function CommandMenuLoader( { name, search, hook, setLoader, close } ) {
 				>
 					<HStack
 						alignment="left"
-						className={ classnames( 'commands-command-menu__item', {
+						className={ clsx( 'commands-command-menu__item', {
 							'has-icon': command.icon,
 						} ) }
 					>
@@ -126,7 +126,7 @@ export function CommandMenuGroup( { isContextual, search, setLoader, close } ) {
 				>
 					<HStack
 						alignment="left"
-						className={ classnames( 'commands-command-menu__item', {
+						className={ clsx( 'commands-command-menu__item', {
 							'has-icon': command.icon,
 						} ) }
 					>
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 6276f6927945f..fd89e5e01fd0f 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,25 +2,82 @@
 
 ## Unreleased
 
+### Enhancements
+
+- Add `text-wrap: balance` fallback to all instances of `text-wrap: pretty` for greater cross browser compatibility. ([#62233](https://github.com/WordPress/gutenberg/pull/62233))
+
+### Bug Fixes
+
+-   `Tabs`: Prevent accidental overflow in indicator ([#61979](https://github.com/WordPress/gutenberg/pull/61979)).
+
+## 28.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+### Enhancements
+
+-   `Tabs`: Animate indicator ([#60560](https://github.com/WordPress/gutenberg/pull/60560)).
+-   `ComboboxControl`: Introduce Combobox expandOnFocus prop ([#61705](https://github.com/WordPress/gutenberg/pull/61705)).
+-   `ProgressBar`: Expose as public API ([#61062](https://github.com/WordPress/gutenberg/pull/61062)).
+-   `ProgressBar`: Simplify default width implementation and make it more easily overridable ([#61976](https://github.com/WordPress/gutenberg/pull/61976)).
+
+### Bug Fixes
+
+-   `Autocomplete`: Stabilize rendering of autocomplete items ([#61877](https://github.com/WordPress/gutenberg/pull/61877)).
+-   `TabPanel`: Make the the focus styles consistent with `Tabs`. ([#61317](https://github.com/WordPress/gutenberg/pull/61317)).
+-   `InputControl`: Fixed z-index issue where slider dots appeared in front of the Appearance dropdown. ([#61937](https://github.com/WordPress/gutenberg/pull/61937))
+
+### Internal
+
+-   Remove `reduceMotion` util ([#61963](https://github.com/WordPress/gutenberg/pull/61963)).
+-   Add type support for CSS Custom Properties ([#61872](https://github.com/WordPress/gutenberg/pull/61872)).
+-   Remove usage of deprecated spreading of `key` prop in JSX in CustomSelectControl and FormTokenField components ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
+-   `Tooltip`: Fix Ariakit tooltip store usage ([#61858](https://github.com/WordPress/gutenberg/pull/61858)).
+-   `CustomSelectControlV2`: Use `InputBase` for styling ([#60261](https://github.com/WordPress/gutenberg/pull/60261)).
+
+## 27.6.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+-   Upgrade `@use-gesture/react` package to `^10.3.1` ([#61503](https://github.com/WordPress/gutenberg/pull/61503)).
+-   Upgrade `framer-motion` package to version `^11.1.9` ([#61572](https://github.com/WordPress/gutenberg/pull/61572)).
+
+### Enhancements
+
+-   `FontSizePicker`: Add `vw` and `vh` units to the default units in the font size picker ([#60507](<(https://github.com/WordPress/gutenberg/pull/60607)>).
+-   `PaletteEdit`: Use consistent spacing and metrics. ([#61368](https://github.com/WordPress/gutenberg/pull/61368)).
+-   `FormTokenField`: Hide label when not defined ([#61336](https://github.com/WordPress/gutenberg/pull/61336)).
+-   `ComboboxControl`: supports disabled items ([#61294](https://github.com/WordPress/gutenberg/pull/61294)).
+-   Upgraded the @types/react and @types/react-dom packages ([#60796](https://github.com/WordPress/gutenberg/pull/60796)).
+-   `Placeholder`: Tweak placeholder style ([#61590](https://github.com/WordPress/gutenberg/pull/61590)).
+
+### Bug Fix
+
+-   `ToolsPanel`: Fix sticking “Reset” option ([#60621](https://github.com/WordPress/gutenberg/pull/60621)).
+-   Fix an issue where types used a synthetic default import ([#61679](https://github.com/WordPress/gutenberg/pull/61679)).
+
 ## 27.5.0 (2024-05-02)
 
 ### Enhancements
 
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
 -   `InputControl`: Add a password visibility toggle story ([#60898](https://github.com/WordPress/gutenberg/pull/60898)).
 -   `View`: Fix prop types ([#60919](https://github.com/WordPress/gutenberg/pull/60919)).
 -   `Placeholder`: Unify appearance across. ([#59275](https://github.com/WordPress/gutenberg/pull/59275)).
 -   `Toolbar`: Adjust top toolbar to use same metrics as block toolbar ([#61126](https://github.com/WordPress/gutenberg/pull/61126)).
+-   `DropZone`: Avoid a media query on mount [#60546](https://github.com/WordPress/gutenberg/pull/60546)).
+-   `ComboboxControl`: Simplify string normalization ([#60893](https://github.com/WordPress/gutenberg/pull/60893)).
 
 ### Bug Fix
 
+-   `BaseControl`, `InputControl`: Remove usage of aria-details from InputControl and BaseControl ([#61203](https://github.com/WordPress/gutenberg/pull/61203)).
 -   `SlotFill`: fixed missing `getServerSnapshot` parameter in slot map ([#60943](https://github.com/WordPress/gutenberg/pull/60943)).
 -   `Panel`: Fix issue with collapsing panel header ([#61319](https://github.com/WordPress/gutenberg/pull/61319)).
 
-### Enhancements
-
--   `DropZone`: Avoid a media query on mount [#60546](https://github.com/WordPress/gutenberg/pull/60546)).
--   `ComboboxControl`: Simplify string normalization ([#60893](https://github.com/WordPress/gutenberg/pull/60893)).
-
 ### Internal
 
 -   `FontSizerPicker`: Improve docs for default units ([#60996](https://github.com/WordPress/gutenberg/pull/60996)).
diff --git a/packages/components/package.json b/packages/components/package.json
index 1b1113aa5df7a..89ed60367d88e 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "27.5.0",
+	"version": "28.0.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -41,7 +42,7 @@
 		"@floating-ui/react-dom": "^2.0.8",
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
-		"@use-gesture/react": "^10.2.24",
+		"@use-gesture/react": "^10.3.1",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/date": "file:../date",
@@ -60,13 +61,13 @@
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/warning": "file:../warning",
 		"change-case": "^4.1.2",
-		"classnames": "^2.3.1",
+		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^3.6.0",
 		"deepmerge": "^4.3.0",
 		"downshift": "^6.0.15",
 		"fast-deep-equal": "^3.1.3",
-		"framer-motion": "^10.13.0",
+		"framer-motion": "^11.1.9",
 		"gradient-parser": "^0.1.5",
 		"highlight-words-core": "^1.2.2",
 		"is-plain-object": "^5.0.0",
diff --git a/packages/components/src/alignment-matrix-control/icon.tsx b/packages/components/src/alignment-matrix-control/icon.tsx
index 33528e63fc87f..bacc9771cf3e4 100644
--- a/packages/components/src/alignment-matrix-control/icon.tsx
+++ b/packages/components/src/alignment-matrix-control/icon.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -28,7 +28,7 @@ function AlignmentMatrixControlIcon( {
 	const alignIndex = getAlignmentIndex( value );
 	const scale = ( size / BASE_SIZE ).toFixed( 2 );
 
-	const classes = classnames(
+	const classes = clsx(
 		'component-alignment-matrix-control-icon',
 		className
 	);
diff --git a/packages/components/src/alignment-matrix-control/index.tsx b/packages/components/src/alignment-matrix-control/index.tsx
index daf234a32b491..eaec8a285b0c5 100644
--- a/packages/components/src/alignment-matrix-control/index.tsx
+++ b/packages/components/src/alignment-matrix-control/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -70,10 +70,7 @@ export function AlignmentMatrixControl( {
 
 	const activeId = compositeStore.useState( 'activeId' );
 
-	const classes = classnames(
-		'component-alignment-matrix-control',
-		className
-	);
+	const classes = clsx( 'component-alignment-matrix-control', className );
 
 	return (
 		<Composite
diff --git a/packages/components/src/angle-picker-control/index.tsx b/packages/components/src/angle-picker-control/index.tsx
index dcd0fe6f94a2e..b824660fddb13 100644
--- a/packages/components/src/angle-picker-control/index.tsx
+++ b/packages/components/src/angle-picker-control/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -46,7 +46,7 @@ function UnforwardedAnglePickerControl(
 		onChange( inputValue );
 	};
 
-	const classes = classnames( 'components-angle-picker-control', className );
+	const classes = clsx( 'components-angle-picker-control', className );
 
 	const unitText = <UnitText>°</UnitText>;
 	const [ prefixedUnitText, suffixedUnitText ] = isRTL()
diff --git a/packages/components/src/animate/index.tsx b/packages/components/src/animate/index.tsx
index f73090bf85dba..e819020447bc9 100644
--- a/packages/components/src/animate/index.tsx
+++ b/packages/components/src/animate/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -23,24 +23,21 @@ function getDefaultOrigin( type?: GetAnimateOptions[ 'type' ] ) {
  */
 export function getAnimateClassName( options: GetAnimateOptions ) {
 	if ( options.type === 'loading' ) {
-		return classnames( 'components-animate__loading' );
+		return 'components-animate__loading';
 	}
 
 	const { type, origin = getDefaultOrigin( type ) } = options;
 
 	if ( type === 'appear' ) {
 		const [ yAxis, xAxis = 'center' ] = origin.split( ' ' );
-		return classnames( 'components-animate__appear', {
+		return clsx( 'components-animate__appear', {
 			[ 'is-from-' + xAxis ]: xAxis !== 'center',
 			[ 'is-from-' + yAxis ]: yAxis !== 'middle',
 		} );
 	}
 
 	if ( type === 'slide-in' ) {
-		return classnames(
-			'components-animate__slide-in',
-			'is-from-' + origin
-		);
+		return clsx( 'components-animate__slide-in', 'is-from-' + origin );
 	}
 
 	return undefined;
diff --git a/packages/components/src/animate/stories/index.story.tsx b/packages/components/src/animate/stories/index.story.tsx
index be076b4e6976c..de28495a97fc5 100644
--- a/packages/components/src/animate/stories/index.story.tsx
+++ b/packages/components/src/animate/stories/index.story.tsx
@@ -27,7 +27,12 @@ export const Default = Template.bind( {} );
 Default.args = {
 	children: ( { className } ) => (
 		<Notice className={ className } status="success">
-			<p>{ `No default animation. Use one of type = "appear", "slide-in", or "loading".` }</p>
+			<p>
+				{ /* eslint-disable react/no-unescaped-entities */ }
+				No default animation. Use one of type = "appear", "slide-in", or
+				"loading".
+				{ /* eslint-enable react/no-unescaped-entities */ }
+			</p>
 		</Notice>
 	),
 };
diff --git a/packages/components/src/autocomplete/autocompleter-ui.native.js b/packages/components/src/autocomplete/autocompleter-ui.native.js
index 1785d742d1ee4..1400c78e518d7 100644
--- a/packages/components/src/autocomplete/autocompleter-ui.native.js
+++ b/packages/components/src/autocomplete/autocompleter-ui.native.js
@@ -21,10 +21,6 @@ import {
 	useCallback,
 } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	Icon,
-	__unstableAutocompletionItemsFill as AutocompletionItemsFill,
-} from '@wordpress/components';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
@@ -33,6 +29,8 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import BackgroundView from './background-view';
 import getDefaultUseItems from './get-default-use-items';
 import styles from './style.scss';
+import Icon from '../icon';
+import { __unstableAutocompletionItemsFill as AutocompletionItemsFill } from '../mobile/autocompletion-items';
 
 const { compose: stylesCompose } = StyleSheet;
 
diff --git a/packages/components/src/autocomplete/autocompleter-ui.tsx b/packages/components/src/autocomplete/autocompleter-ui.tsx
index b95ee0548dc0a..a22e197decd15 100644
--- a/packages/components/src/autocomplete/autocompleter-ui.tsx
+++ b/packages/components/src/autocomplete/autocompleter-ui.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -27,10 +27,57 @@ import { VisuallyHidden } from '../visually-hidden';
 import { createPortal } from 'react-dom';
 import type { AutocompleterUIProps, KeyedOption, WPCompleter } from './types';
 
+type ListBoxProps = {
+	items: KeyedOption[];
+	onSelect: ( option: KeyedOption ) => void;
+	selectedIndex: number;
+	instanceId: number;
+	listBoxId: string | undefined;
+	className?: string;
+	Component?: React.ElementType;
+};
+
+function ListBox( {
+	items,
+	onSelect,
+	selectedIndex,
+	instanceId,
+	listBoxId,
+	className,
+	Component = 'div',
+}: ListBoxProps ) {
+	return (
+		<Component
+			id={ listBoxId }
+			role="listbox"
+			className="components-autocomplete__results"
+		>
+			{ items.map( ( option, index ) => (
+				<Button
+					key={ option.key }
+					id={ `components-autocomplete-item-${ instanceId }-${ option.key }` }
+					role="option"
+					aria-selected={ index === selectedIndex }
+					disabled={ option.isDisabled }
+					className={ clsx(
+						'components-autocomplete__result',
+						className,
+						{
+							'is-selected': index === selectedIndex,
+						}
+					) }
+					onClick={ () => onSelect( option ) }
+				>
+					{ option.label }
+				</Button>
+			) ) }
+		</Component>
+	);
+}
+
 export function getAutoCompleterUI( autocompleter: WPCompleter ) {
-	const useItems = autocompleter.useItems
-		? autocompleter.useItems
-		: getDefaultUseItems( autocompleter );
+	const useItems =
+		autocompleter.useItems ?? getDefaultUseItems( autocompleter );
 
 	function AutocompleterUI( {
 		filterValue,
@@ -62,7 +109,7 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) {
 					// If the popover is rendered in a different document than
 					// the content, we need to duplicate the options list in the
 					// content document so that it's available to the screen
-					// readers, which check the DOM ID based aira-* attributes.
+					// readers, which check the DOM ID based aria-* attributes.
 					setNeedsA11yCompat(
 						node.ownerDocument !== contentRef.current.ownerDocument
 					);
@@ -124,38 +171,6 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) {
 			return null;
 		}
 
-		const ListBox = ( {
-			Component = 'div',
-		}: {
-			Component?: React.ElementType;
-		} ) => (
-			<Component
-				id={ listBoxId }
-				role="listbox"
-				className="components-autocomplete__results"
-			>
-				{ items.map( ( option, index ) => (
-					<Button
-						key={ option.key }
-						id={ `components-autocomplete-item-${ instanceId }-${ option.key }` }
-						role="option"
-						aria-selected={ index === selectedIndex }
-						disabled={ option.isDisabled }
-						className={ classnames(
-							'components-autocomplete__result',
-							className,
-							{
-								'is-selected': index === selectedIndex,
-							}
-						) }
-						onClick={ () => onSelect( option ) }
-					>
-						{ option.label }
-					</Button>
-				) ) }
-			</Component>
-		);
-
 		return (
 			<>
 				<Popover
@@ -166,12 +181,27 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) {
 					anchor={ popoverAnchor }
 					ref={ popoverRefs }
 				>
-					<ListBox />
+					<ListBox
+						items={ items }
+						onSelect={ onSelect }
+						selectedIndex={ selectedIndex }
+						instanceId={ instanceId }
+						listBoxId={ listBoxId }
+						className={ className }
+					/>
 				</Popover>
 				{ contentRef.current &&
 					needsA11yCompat &&
 					createPortal(
-						<ListBox Component={ VisuallyHidden } />,
+						<ListBox
+							items={ items }
+							onSelect={ onSelect }
+							selectedIndex={ selectedIndex }
+							instanceId={ instanceId }
+							listBoxId={ listBoxId }
+							className={ className }
+							Component={ VisuallyHidden }
+						/>,
 						contentRef.current.ownerDocument.body
 					) }
 			</>
diff --git a/packages/components/src/autocomplete/test/index.tsx b/packages/components/src/autocomplete/test/index.tsx
index 7a31680b3dd5e..0df784f8367cd 100644
--- a/packages/components/src/autocomplete/test/index.tsx
+++ b/packages/components/src/autocomplete/test/index.tsx
@@ -67,10 +67,10 @@ describe( 'AutocompleterUI', () => {
 				return (
 					<div>
 						<AutocompleterUI
-							className={ 'test' }
-							filterValue={ 'Apple' }
+							className="test"
+							filterValue="Apple"
 							instanceId={ 1 }
-							listBoxId={ '1' }
+							listBoxId="1"
 							selectedIndex={ 0 }
 							onChangeOptions={ () => {} }
 							onSelect={ () => {} }
diff --git a/packages/components/src/base-control/README.md b/packages/components/src/base-control/README.md
index c2f3dc3e0108f..bc46629d2b618 100644
--- a/packages/components/src/base-control/README.md
+++ b/packages/components/src/base-control/README.md
@@ -53,7 +53,7 @@ If true, the label will only be visible to screen readers.
 
 ### help
 
-Additional description for the control. It is preferable to use plain text for `help`, as it can be accessibly associated with the control using `aria-describedby`. When the `help` contains links, or otherwise non-plain text content, it will be associated with the control using `aria-details`.
+Additional description for the control. The element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
 
 -   Type: `ReactNode`
 -   Required: No
diff --git a/packages/components/src/base-control/hooks.ts b/packages/components/src/base-control/hooks.ts
index cfc5a8cf9baa4..7aa7c24257522 100644
--- a/packages/components/src/base-control/hooks.ts
+++ b/packages/components/src/base-control/hooks.ts
@@ -27,10 +27,6 @@ export function useBaseControlProps(
 		preferredId
 	);
 
-	// ARIA descriptions can only contain plain text, so fall back to aria-details if not.
-	const helpPropName =
-		typeof help === 'string' ? 'aria-describedby' : 'aria-details';
-
 	return {
 		baseControlProps: {
 			id: uniqueId,
@@ -39,7 +35,7 @@ export function useBaseControlProps(
 		},
 		controlProps: {
 			id: uniqueId,
-			...( !! help ? { [ helpPropName ]: `${ uniqueId }__help` } : {} ),
+			...( !! help ? { 'aria-describedby': `${ uniqueId }__help` } : {} ),
 		},
 	};
 }
diff --git a/packages/components/src/base-control/index.tsx b/packages/components/src/base-control/index.tsx
index 344643f28cfd7..2de6ced0a5465 100644
--- a/packages/components/src/base-control/index.tsx
+++ b/packages/components/src/base-control/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -124,10 +124,7 @@ export const VisualLabel = ( {
 	return (
 		<StyledVisualLabel
 			{ ...props }
-			className={ classnames(
-				'components-base-control__label',
-				className
-			) }
+			className={ clsx( 'components-base-control__label', className ) }
 		>
 			{ children }
 		</StyledVisualLabel>
diff --git a/packages/components/src/base-control/test/index.tsx b/packages/components/src/base-control/test/index.tsx
index e83c041590c59..07623a8b4c3e7 100644
--- a/packages/components/src/base-control/test/index.tsx
+++ b/packages/components/src/base-control/test/index.tsx
@@ -31,7 +31,7 @@ describe( 'BaseControl', () => {
 		).toBeInTheDocument();
 	} );
 
-	it( 'should render help as aria-details when not plain text', () => {
+	it( 'should still render help as aria-describedby when not plain text', () => {
 		render(
 			<MyBaseControl
 				label="Text"
@@ -44,10 +44,10 @@ describe( 'BaseControl', () => {
 			name: 'My help text',
 		} );
 
-		expect( textarea ).toHaveAttribute( 'aria-details' );
+		expect( textarea ).toHaveAttribute( 'aria-describedby' );
 		expect(
 			// eslint-disable-next-line testing-library/no-node-access
-			help.closest( `#${ textarea.getAttribute( 'aria-details' ) }` )
+			help.closest( `#${ textarea.getAttribute( 'aria-describedby' ) }` )
 		).toBeVisible();
 	} );
 } );
diff --git a/packages/components/src/base-control/types.ts b/packages/components/src/base-control/types.ts
index 36306e9a24b0b..eeb8736cf1b95 100644
--- a/packages/components/src/base-control/types.ts
+++ b/packages/components/src/base-control/types.ts
@@ -21,8 +21,7 @@ export type BaseControlProps = {
 	/**
 	 * Additional description for the control.
 	 *
-	 * It is preferable to use plain text for `help`, as it can be accessibly associated with the control using `aria-describedby`.
-	 * When the `help` contains links, or otherwise non-plain text content, it will be associated with the control using `aria-details`.
+	 * The element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
 	 */
 	help?: ReactNode;
 	/**
diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts
index b1ff87aaf5da3..5e028050d8e18 100644
--- a/packages/components/src/border-control/types.ts
+++ b/packages/components/src/border-control/types.ts
@@ -61,6 +61,10 @@ export type BorderControlProps = ColorProps &
 		 * interaction that selects or clears, border color, style, or width.
 		 */
 		onChange: ( value?: Border ) => void;
+		/**
+		 * Placeholder text for the number input.
+		 */
+		placeholder?: HTMLInputElement[ 'placeholder' ];
 		/**
 		 * An internal prop used to control the visibility of the dropdown.
 		 */
diff --git a/packages/components/src/button-group/index.tsx b/packages/components/src/button-group/index.tsx
index 2eb7451e3e00d..fb2659c2a0d7d 100644
--- a/packages/components/src/button-group/index.tsx
+++ b/packages/components/src/button-group/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -20,7 +20,7 @@ function UnforwardedButtonGroup(
 	ref: ForwardedRef< HTMLDivElement >
 ) {
 	const { className, ...restProps } = props;
-	const classes = classnames( 'components-button-group', className );
+	const classes = clsx( 'components-button-group', className );
 
 	return (
 		<div ref={ ref } role="group" className={ classes } { ...restProps } />
diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js
index f093502a750fd..063a2cc191eae 100644
--- a/packages/components/src/button/index.native.js
+++ b/packages/components/src/button/index.native.js
@@ -183,7 +183,7 @@ export function Button( props ) {
 			accessible
 			accessibilityLabel={ label }
 			accessibilityStates={ states }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 			accessibilityHint={ hint }
 			onPress={ onClick }
 			style={ containerStyle }
diff --git a/packages/components/src/button/index.tsx b/packages/components/src/button/index.tsx
index 456e563c8159e..e2ef34f35712e 100644
--- a/packages/components/src/button/index.tsx
+++ b/packages/components/src/button/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type {
 	ComponentPropsWithoutRef,
 	ForwardedRef,
@@ -141,7 +141,7 @@ export function UnforwardedButton(
 		'mixed',
 	];
 
-	const classes = classnames( 'components-button', className, {
+	const classes = clsx( 'components-button', className, {
 		'is-next-40px-default-size': __next40pxDefaultSize,
 		'is-secondary': variant === 'secondary',
 		'is-primary': variant === 'primary',
@@ -174,14 +174,16 @@ export function UnforwardedButton(
 	const anchorProps: ComponentPropsWithoutRef< 'a' > =
 		Tag === 'a' ? { href, target } : {};
 
+	const disableEventProps: {
+		[ key: string ]: ( event: MouseEvent ) => void;
+	} = {};
 	if ( disabled && isFocusable ) {
 		// In this case, the button will be disabled, but still focusable and
 		// perceivable by screen reader users.
 		buttonProps[ 'aria-disabled' ] = true;
 		anchorProps[ 'aria-disabled' ] = true;
-
 		for ( const disabledEvent of disabledEventsOnDisabledButton ) {
-			additionalProps[ disabledEvent ] = ( event: MouseEvent ) => {
+			disableEventProps[ disabledEvent ] = ( event: MouseEvent ) => {
 				if ( event ) {
 					event.stopPropagation();
 					event.preventDefault();
@@ -234,6 +236,7 @@ export function UnforwardedButton(
 			<a
 				{ ...anchorProps }
 				{ ...( additionalProps as HTMLAttributes< HTMLAnchorElement > ) }
+				{ ...disableEventProps }
 				{ ...commonProps }
 			>
 				{ elementChildren }
@@ -242,6 +245,7 @@ export function UnforwardedButton(
 			<button
 				{ ...buttonProps }
 				{ ...( additionalProps as HTMLAttributes< HTMLButtonElement > ) }
+				{ ...disableEventProps }
 				{ ...commonProps }
 			>
 				{ elementChildren }
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 25095d3395897..ae242c3863418 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -93,8 +93,7 @@
 		&.is-busy[aria-disabled="true"] {
 			color: $components-color-accent-inverted;
 			background-size: 100px 100%;
-			// Disable reason: This function call looks nicer when each argument is on its own line.
-			/* stylelint-disable */
+			/* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
 			background-image: linear-gradient(
 				-45deg,
 				$components-color-accent 33%,
@@ -163,13 +162,13 @@
 
 		&:hover:not(:disabled, [aria-disabled="true"]) {
 			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
-			/* stylelint-disable-next-line declaration-property-value-disallowed-list */
+			/* stylelint-disable-next-line declaration-property-value-disallowed-list -- Allow tertiary buttons to use colors from the user admin color scheme. */
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 		}
 
 		&:active:not(:disabled, [aria-disabled="true"]) {
 			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
-			/* stylelint-disable-next-line declaration-property-value-disallowed-list */
+			/* stylelint-disable-next-line declaration-property-value-disallowed-list -- Allow tertiary buttons to use colors from the user admin color scheme. */
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 		}
 
@@ -262,8 +261,7 @@
 		}
 		opacity: 1;
 		background-size: 100px 100%;
-		// Disable reason: This function call looks nicer when each argument is on its own line.
-		/* stylelint-disable */
+		/* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
 		background-image: linear-gradient(
 			-45deg,
 			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
diff --git a/packages/components/src/checkbox-control/index.tsx b/packages/components/src/checkbox-control/index.tsx
index a3119128c8980..87ca06698ac64 100644
--- a/packages/components/src/checkbox-control/index.tsx
+++ b/packages/components/src/checkbox-control/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ChangeEvent } from 'react';
 
 /**
@@ -103,7 +103,7 @@ export function CheckboxControl(
 					</span>
 				)
 			}
-			className={ classnames( 'components-checkbox-control', className ) }
+			className={ clsx( 'components-checkbox-control', className ) }
 		>
 			<HStack spacing={ 0 } justify="start" alignment="top">
 				<span className="components-checkbox-control__input-container">
diff --git a/packages/components/src/circular-option-picker/circular-option-picker-actions.tsx b/packages/components/src/circular-option-picker/circular-option-picker-actions.tsx
index a9c86b4240ee9..4cf4d6f95da38 100644
--- a/packages/components/src/circular-option-picker/circular-option-picker-actions.tsx
+++ b/packages/components/src/circular-option-picker/circular-option-picker-actions.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -20,7 +20,7 @@ export function DropdownLinkAction( {
 }: DropdownLinkActionProps ) {
 	return (
 		<Dropdown
-			className={ classnames(
+			className={ clsx(
 				'components-circular-option-picker__dropdown-link-action',
 				className
 			) }
@@ -47,7 +47,7 @@ export function ButtonAction( {
 }: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {
 	return (
 		<Button
-			className={ classnames(
+			className={ clsx(
 				'components-circular-option-picker__clear',
 				className
 			) }
diff --git a/packages/components/src/circular-option-picker/circular-option-picker-option-group.tsx b/packages/components/src/circular-option-picker/circular-option-picker-option-group.tsx
index 2b50d80799b84..a4a8da1b62b58 100644
--- a/packages/components/src/circular-option-picker/circular-option-picker-option-group.tsx
+++ b/packages/components/src/circular-option-picker/circular-option-picker-option-group.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -22,7 +22,7 @@ export function OptionGroup( {
 		<div
 			{ ...additionalProps }
 			role={ role }
-			className={ classnames(
+			className={ clsx(
 				'components-circular-option-picker__option-group',
 				'components-circular-option-picker__swatches',
 				className
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 7dcfd63555755..6c00a0e5d0bf1 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
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -107,7 +107,7 @@ export function Option( {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				className,
 				'components-circular-option-picker__option-wrapper'
 			) }
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 047b0c569c7d3..cd2ddcf90d7ce 100644
--- a/packages/components/src/circular-option-picker/circular-option-picker.tsx
+++ b/packages/components/src/circular-option-picker/circular-option-picker.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -102,7 +102,7 @@ function ListboxCircularOptionPicker(
 					{ ...additionalProps }
 					id={ baseId }
 					store={ compositeStore }
-					role={ 'listbox' }
+					role="listbox"
 				>
 					{ options }
 				</Composite>
@@ -156,7 +156,7 @@ function CircularOptionPicker( props: CircularOptionPickerProps ) {
 	) : undefined;
 
 	const options = (
-		<div className={ 'components-circular-option-picker__swatches' }>
+		<div className="components-circular-option-picker__swatches">
 			{ optionsProp }
 		</div>
 	);
@@ -165,10 +165,7 @@ function CircularOptionPicker( props: CircularOptionPickerProps ) {
 		<OptionPickerImplementation
 			{ ...additionalProps }
 			baseId={ baseId }
-			className={ classnames(
-				'components-circular-option-picker',
-				className
-			) }
+			className={ clsx( 'components-circular-option-picker', className ) }
 			actions={ actions }
 			options={ options }
 		>
diff --git a/packages/components/src/circular-option-picker/stories/index.story.tsx b/packages/components/src/circular-option-picker/stories/index.story.tsx
index 45643e9d6dd6e..e091a2ac54d41 100644
--- a/packages/components/src/circular-option-picker/stories/index.story.tsx
+++ b/packages/components/src/circular-option-picker/stories/index.story.tsx
@@ -101,7 +101,7 @@ const DefaultActions = () => {
 		<CircularOptionPicker.ButtonAction
 			onClick={ () => setCurrentColor?.( undefined ) }
 		>
-			{ 'Clear' }
+			Clear
 		</CircularOptionPicker.ButtonAction>
 	);
 };
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index a705bf62fdb11..33ba6070dde79 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -60,8 +60,7 @@ $color-palette-circle-spacing: 12px;
 	border-radius: $radius-round;
 	// Show a thin circular outline in Windows high contrast mode, otherwise the button is invisible.
 	z-index: z-index(".components-circular-option-picker__option-wrapper::before");
-	// Need to disable the lint rule because given that we are in the presence of a data URL that needs quotes we need to wrap it with single quotes.
-	/* stylelint-disable-next-line function-url-quotes */
+	/* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
 	background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E');
 }
 
diff --git a/packages/components/src/circular-option-picker/test/index.tsx b/packages/components/src/circular-option-picker/test/index.tsx
index b37cb7e534168..0b5ccbeecb57d 100644
--- a/packages/components/src/circular-option-picker/test/index.tsx
+++ b/packages/components/src/circular-option-picker/test/index.tsx
@@ -9,17 +9,11 @@ import { press, sleep } from '@ariakit/test';
  */
 import CircularOptionPicker from '..';
 
-const SINGLE_OPTION = [ <CircularOptionPicker.Option key={ 'option' } /> ];
+const SINGLE_OPTION = [ <CircularOptionPicker.Option key="option" /> ];
 
 const MULTIPLE_OPTIONS = [
-	<CircularOptionPicker.Option
-		key={ 'option-1' }
-		aria-label={ 'Option One' }
-	/>,
-	<CircularOptionPicker.Option
-		key={ 'option-2' }
-		aria-label={ 'Option Two' }
-	/>,
+	<CircularOptionPicker.Option key="option-1" aria-label="Option One" />,
+	<CircularOptionPicker.Option key="option-2" aria-label="Option Two" />,
 ];
 
 const DEFAULT_PROPS = {
diff --git a/packages/components/src/clipboard-button/index.tsx b/packages/components/src/clipboard-button/index.tsx
index 5a9cec30f7d49..2f66b97a5a00f 100644
--- a/packages/components/src/clipboard-button/index.tsx
+++ b/packages/components/src/clipboard-button/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -50,7 +50,7 @@ export default function ClipboardButton( {
 		}
 	}, [] );
 
-	const classes = classnames( 'components-clipboard-button', className );
+	const classes = clsx( 'components-clipboard-button', className );
 
 	// Workaround for inconsistent behavior in Safari, where <textarea> is not
 	// the document.activeElement at the moment when the copy event fires.
diff --git a/packages/components/src/color-indicator/index.native.js b/packages/components/src/color-indicator/index.native.js
index 2a058f25ceec4..b76915e87469e 100644
--- a/packages/components/src/color-indicator/index.native.js
+++ b/packages/components/src/color-indicator/index.native.js
@@ -6,12 +6,12 @@ import { View, Animated } from 'react-native';
  * WordPress dependencies
  */
 import { Icon, check } from '@wordpress/icons';
-import { Gradient } from '@wordpress/components';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
+import Gradient from '../mobile/gradient';
 import { colorsUtils } from '../mobile/color-settings/utils';
 
 function SelectedIcon( { opacity } ) {
diff --git a/packages/components/src/color-indicator/index.tsx b/packages/components/src/color-indicator/index.tsx
index 00312a39cdc7d..9d4c0de452b24 100644
--- a/packages/components/src/color-indicator/index.tsx
+++ b/packages/components/src/color-indicator/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -23,7 +23,7 @@ function UnforwardedColorIndicator(
 
 	return (
 		<span
-			className={ classnames( 'component-color-indicator', className ) }
+			className={ clsx( 'component-color-indicator', className ) }
 			style={ { background: colorValue } }
 			ref={ forwardedRef }
 			{ ...additionalProps }
diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js
index 87b8e704b704e..bb45de6d66e88 100644
--- a/packages/components/src/color-palette/index.native.js
+++ b/packages/components/src/color-palette/index.native.js
@@ -285,7 +285,7 @@ function ColorPalette( {
 						<View key={ `${ color }-${ isSelected( color ) }` }>
 							<TouchableWithoutFeedback
 								onPress={ () => onColorPress( color ) }
-								accessibilityRole={ 'button' }
+								accessibilityRole="button"
 								accessibilityState={ {
 									selected: isSelected( color ),
 								} }
@@ -326,7 +326,7 @@ function ColorPalette( {
 						) }
 						<TouchableWithoutFeedback
 							onPress={ onCustomPress }
-							accessibilityRole={ 'button' }
+							accessibilityRole="button"
 							accessibilityState={ {
 								selected: isSelectedCustom(),
 							} }
diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index 96f8fba24cd64..1c1bb1204afef 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -5,7 +5,7 @@ import type { ForwardedRef } from 'react';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -320,7 +320,7 @@ function UnforwardedColorPalette(
 								does not shift
 								*/ }
 								<Truncate
-									className={ classnames(
+									className={ clsx(
 										'components-color-palette__custom-color-value',
 										{
 											'components-color-palette__custom-color-value--is-hex':
diff --git a/packages/components/src/color-palette/stories/index.story.tsx b/packages/components/src/color-palette/stories/index.story.tsx
index b49de51c1d16e..727e840ff9935 100644
--- a/packages/components/src/color-palette/stories/index.story.tsx
+++ b/packages/components/src/color-palette/stories/index.story.tsx
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import type { CSSProperties } from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
 
 /**
@@ -92,13 +91,11 @@ MultipleOrigins.args = {
 export const CSSVariables: StoryFn< typeof ColorPalette > = ( args ) => {
 	return (
 		<div
-			style={
-				{
-					'--red': '#f00',
-					'--yellow': '#ff0',
-					'--blue': '#00f',
-				} as CSSProperties
-			}
+			style={ {
+				'--red': '#f00',
+				'--yellow': '#ff0',
+				'--blue': '#00f',
+			} }
 		>
 			<Template { ...args } />
 		</div>
diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js
index 92228ca669064..46059a58520ba 100644
--- a/packages/components/src/color-picker/index.native.js
+++ b/packages/components/src/color-picker/index.native.js
@@ -9,7 +9,6 @@ import namesPlugin from 'colord/plugins/names';
  */
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { BottomSheet } from '@wordpress/components';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { Icon, check, close } from '@wordpress/icons';
 /**
@@ -17,6 +16,7 @@ import { Icon, check, close } from '@wordpress/icons';
  */
 import styles from './style.scss';
 import HsvColorPicker from './hsv-color-picker.native.js';
+import BottomSheet from '../mobile/bottom-sheet';
 
 extend( [ namesPlugin ] );
 
diff --git a/packages/components/src/combobox-control/README.md b/packages/components/src/combobox-control/README.md
index b84e01b7d6a07..68e1e08e599ab 100644
--- a/packages/components/src/combobox-control/README.md
+++ b/packages/components/src/combobox-control/README.md
@@ -77,7 +77,7 @@ If this property is added, a help text will be generated using help property as
 
 The options that can be chosen from.
 
--   Type: `Array<{ value: string, label: string }>`
+-   Type: `Array<{ value: string, label: string, disabled?: boolean }>`
 -   Required: Yes
 
 #### onFilterValueChange
@@ -101,6 +101,15 @@ The current value of the control.
 -   Type: `string | null`
 -   Required: No
 
+#### expandOnFocus
+
+Automatically expand the dropdown when the control is focused.
+If the control is clicked, the dropdown will expand regardless of this prop.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `true`
+
 #### __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).
diff --git a/packages/components/src/combobox-control/index.tsx b/packages/components/src/combobox-control/index.tsx
index 5ca4f4e0960f1..a47e6ce5d8e45 100644
--- a/packages/components/src/combobox-control/index.tsx
+++ b/packages/components/src/combobox-control/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -78,10 +78,12 @@ const getIndexOfMatchingSuggestion = (
  * 	{
  * 		value: 'normal',
  * 		label: 'Normal',
+ * 		disabled: true,
  * 	},
  * 	{
  * 		value: 'large',
  * 		label: 'Large',
+ * 		disabled: false,
  * 	},
  * ];
  *
@@ -125,6 +127,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 			selected: __( 'Item selected.' ),
 		},
 		__experimentalRenderItem,
+		expandOnFocus = true,
 	} = useDeprecated36pxDefaultSizeProp( props );
 
 	const [ value, setValue ] = useControlledValue( {
@@ -165,6 +168,10 @@ function ComboboxControl( props: ComboboxControlProps ) {
 	const onSuggestionSelected = (
 		newSelectedSuggestion: ComboboxControlOption
 	) => {
+		if ( newSelectedSuggestion.disabled ) {
+			return;
+		}
+
 		setValue( newSelectedSuggestion.value );
 		speak( messages.selected, 'assertive' );
 		setSelectedSuggestion( newSelectedSuggestion );
@@ -230,11 +237,18 @@ function ComboboxControl( props: ComboboxControlProps ) {
 
 	const onFocus = () => {
 		setInputHasFocus( true );
-		setIsExpanded( true );
+		if ( expandOnFocus ) {
+			setIsExpanded( true );
+		}
+
 		onFilterValueChange( '' );
 		setInputValue( '' );
 	};
 
+	const onClick = () => {
+		setIsExpanded( true );
+	};
+
 	const onFocusOutside = () => {
 		setIsExpanded( false );
 	};
@@ -296,10 +310,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		<DetectOutside onFocusOutside={ onFocusOutside }>
 			<BaseControl
 				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-				className={ classnames(
-					className,
-					'components-combobox-control'
-				) }
+				className={ clsx( className, 'components-combobox-control' ) }
 				label={ label }
 				id={ `components-form-token-input-${ instanceId }` }
 				hideLabelFromVision={ hideLabelFromVision }
@@ -321,6 +332,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 								value={ isExpanded ? inputValue : currentLabel }
 								onFocus={ onFocus }
 								onBlur={ onBlur }
+								onClick={ onClick }
 								isExpanded={ isExpanded }
 								selectedSuggestionIndex={ getIndexOfMatchingSuggestion(
 									selectedSuggestion,
diff --git a/packages/components/src/combobox-control/stories/index.story.tsx b/packages/components/src/combobox-control/stories/index.story.tsx
index 9c0e5455ebc06..0f45c8a54a2ee 100644
--- a/packages/components/src/combobox-control/stories/index.story.tsx
+++ b/packages/components/src/combobox-control/stories/index.story.tsx
@@ -20,6 +20,17 @@ const countries = [
 	{ name: 'Albania', code: 'AL' },
 	{ name: 'Algeria', code: 'DZ' },
 	{ name: 'American Samoa', code: 'AS' },
+	{ name: 'Andorra', code: 'AD' },
+	{ name: 'Angola', code: 'AO' },
+	{ name: 'Anguilla', code: 'AI' },
+	{ name: 'Antarctica', code: 'AQ' },
+	{ name: 'Antigua and Barbuda', code: 'AG' },
+	{ name: 'Argentina', code: 'AR' },
+	{ name: 'Armenia', code: 'AM' },
+	{ name: 'Aruba', code: 'AW' },
+	{ name: 'Australia', code: 'AU' },
+	{ name: 'Austria', code: 'AT' },
+	{ name: 'Azerbaijan', code: 'AZ' },
 ];
 
 const meta: Meta< typeof ComboboxControl > = {
@@ -111,3 +122,34 @@ WithCustomRenderItem.args = {
 		);
 	},
 };
+
+/**
+ * You can disable options in the list
+ * by setting the `disabled` property to true
+ * for individual items in the option object.
+ */
+export const WithDisabledOptions = Template.bind( {} );
+const optionsWithDisabledOptions = countryOptions.map( ( option, index ) => ( {
+	...option,
+	disabled: index % 3 === 0, // Disable options at index 0, 3, 6, etc.
+} ) );
+
+WithDisabledOptions.args = {
+	allowReset: false,
+	label: 'Select a country',
+	options: optionsWithDisabledOptions,
+};
+
+/**
+ * By default, the combobox expands when focused.
+ * You can disable this behavior by setting the `expandOnFocus` prop to `false`.
+ * This is useful when you want to show the suggestions only when the user interacts with the input.
+ */
+export const NotExpandOnFocus = Template.bind( {} );
+
+NotExpandOnFocus.args = {
+	allowReset: false,
+	label: 'Select a country',
+	options: countryOptions,
+	expandOnFocus: false,
+};
diff --git a/packages/components/src/combobox-control/types.ts b/packages/components/src/combobox-control/types.ts
index 6a32fb17e16c0..61953ce946629 100644
--- a/packages/components/src/combobox-control/types.ts
+++ b/packages/components/src/combobox-control/types.ts
@@ -6,6 +6,7 @@ import type { BaseControlProps } from '../base-control/types';
 export type ComboboxControlOption = {
 	label: string;
 	value: string;
+	disabled?: boolean;
 	[ key: string ]: any;
 };
 
@@ -44,6 +45,13 @@ export type ComboboxControlProps = Pick<
 	 * @default true
 	 */
 	allowReset?: boolean;
+	/**
+	 * Automatically expand the dropdown when the control is focused.
+	 * If the control is clicked, the dropdown will expand regardless of this prop.
+	 *
+	 * @default true
+	 */
+	expandOnFocus?: boolean;
 	/**
 	 * Customizable UI messages.
 	 */
diff --git a/packages/components/src/composite/current/stories/index.story.tsx b/packages/components/src/composite/current/stories/index.story.tsx
index 441af6941c614..335ebc3244c91 100644
--- a/packages/components/src/composite/current/stories/index.story.tsx
+++ b/packages/components/src/composite/current/stories/index.story.tsx
@@ -33,8 +33,8 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		CompositeItem,
 	},
+	tags: [ 'status-private' ],
 	parameters: {
-		badges: [ 'private' ],
 		docs: {
 			canvas: { sourceState: 'shown' },
 			source: { transform },
diff --git a/packages/components/src/css.d.ts b/packages/components/src/css.d.ts
new file mode 100644
index 0000000000000..598eb388f6d35
--- /dev/null
+++ b/packages/components/src/css.d.ts
@@ -0,0 +1,9 @@
+import type * as CSS from 'csstype';
+
+// See: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/f6d4d15522356eba4a0267142834e3abc6b603fc/types/react/index.d.ts#L2580-L2587
+declare module 'csstype' {
+	interface Properties {
+		// Allow any CSS Custom Properties
+		[ index: `--${ string }` ]: any;
+	}
+}
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx b/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx
index 1c64dea91e9f2..e3620655aee1a 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
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { colord } from 'colord';
 
 /**
@@ -66,7 +66,7 @@ function ControlPointButton( {
 				aria-describedby={ descriptionId }
 				aria-haspopup="true"
 				aria-expanded={ isOpen }
-				className={ classnames(
+				className={ clsx(
 					'components-custom-gradient-picker__control-point-button',
 					{
 						'is-active': isOpen,
@@ -102,7 +102,7 @@ function GradientColorPickerDropdown( {
 		[]
 	);
 
-	const mergedClassName = classnames(
+	const mergedClassName = clsx(
 		'components-custom-gradient-picker__control-point-dropdown',
 		className
 	);
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/index.tsx b/packages/components/src/custom-gradient-picker/gradient-bar/index.tsx
index 53589aa1d3efd..4f5eafb17523b 100644
--- a/packages/components/src/custom-gradient-picker/gradient-bar/index.tsx
+++ b/packages/components/src/custom-gradient-picker/gradient-bar/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -133,7 +133,7 @@ export default function CustomGradientBar( {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'components-custom-gradient-picker__gradient-bar',
 				{ 'has-gradient': hasGradient }
 			) }
diff --git a/packages/components/src/custom-gradient-picker/index.native.js b/packages/components/src/custom-gradient-picker/index.native.js
index d10ade0aea7c2..12b2e44e379e6 100644
--- a/packages/components/src/custom-gradient-picker/index.native.js
+++ b/packages/components/src/custom-gradient-picker/index.native.js
@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { PanelBody, RadioControl, RangeControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 
@@ -16,6 +15,9 @@ import {
 	HORIZONTAL_GRADIENT_ORIENTATION,
 } from './constants';
 import styles from './style.scss';
+import PanelBody from '../panel/body';
+import RadioControl from '../radio-control';
+import RangeControl from '../range-control';
 
 function CustomGradientPicker( { setColor, currentValue, isGradientColor } ) {
 	const [ gradientOrientation, setGradientOrientation ] = useState(
diff --git a/packages/components/src/custom-gradient-picker/index.tsx b/packages/components/src/custom-gradient-picker/index.tsx
index 66add261ce5e6..dd0659515234a 100644
--- a/packages/components/src/custom-gradient-picker/index.tsx
+++ b/packages/components/src/custom-gradient-picker/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type gradientParser from 'gradient-parser';
+import { type LinearGradientNode } from 'gradient-parser';
 
 /**
  * WordPress dependencies
@@ -79,7 +79,7 @@ const GradientTypePicker = ( {
 					? undefined
 					: HORIZONTAL_GRADIENT_ORIENTATION,
 				type: 'linear-gradient',
-			} as gradientParser.LinearGradientNode )
+			} satisfies LinearGradientNode )
 		);
 	};
 
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 2bd1221f1381e..9ae402d37f40d 100644
--- a/packages/components/src/custom-select-control-v2/custom-select.tsx
+++ b/packages/components/src/custom-select-control-v2/custom-select.tsx
@@ -3,7 +3,6 @@
  */
 import { createContext, useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { Icon, chevronDown } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -14,13 +13,12 @@ import type {
 	CustomSelectContext as CustomSelectContextType,
 	CustomSelectStore,
 	CustomSelectButtonProps,
+	CustomSelectButtonSize,
 	_CustomSelectProps,
 } from './types';
-import {
-	contextConnectWithoutRef,
-	useContextSystem,
-	type WordPressComponentProps,
-} from '../context';
+import type { WordPressComponentProps } from '../context';
+import InputBase from '../input-control/input-base';
+import SelectControlChevronDown from '../select-control/chevron-down';
 
 export const CustomSelectContext =
 	createContext< CustomSelectContextType >( undefined );
@@ -46,23 +44,19 @@ function defaultRenderSelectedValue(
 	return value;
 }
 
-const UnconnectedCustomSelectButton = (
-	props: Omit<
-		WordPressComponentProps<
-			CustomSelectButtonProps & CustomSelectStore,
-			'button',
-			false
-		>,
-		'onChange'
-	>
-) => {
-	const {
-		renderSelectedValue,
-		size = 'default',
-		store,
-		...restProps
-	} = useContextSystem( props, 'CustomSelectControlButton' );
-
+const CustomSelectButton = ( {
+	renderSelectedValue,
+	size = 'default',
+	store,
+	...restProps
+}: Omit<
+	WordPressComponentProps<
+		CustomSelectButtonProps & CustomSelectButtonSize & CustomSelectStore,
+		'button',
+		false
+	>,
+	'onChange'
+> ) => {
 	const { value: currentValue } = store.useState();
 
 	const computedRenderSelectedValue = useMemo(
@@ -81,21 +75,18 @@ const UnconnectedCustomSelectButton = (
 			showOnKeyDown={ false }
 		>
 			<div>{ computedRenderSelectedValue( currentValue ) }</div>
-			<Icon icon={ chevronDown } size={ 18 } />
 		</Styled.Select>
 	);
 };
 
-const CustomSelectButton = contextConnectWithoutRef(
-	UnconnectedCustomSelectButton,
-	'CustomSelectControlButton'
-);
-
-function _CustomSelect( props: _CustomSelectProps & CustomSelectStore ) {
+function _CustomSelect(
+	props: _CustomSelectProps & CustomSelectStore & CustomSelectButtonSize
+) {
 	const {
 		children,
 		hideLabelFromVision = false,
 		label,
+		size,
 		store,
 		...restProps
 	} = props;
@@ -109,12 +100,22 @@ function _CustomSelect( props: _CustomSelectProps & CustomSelectStore ) {
 					{ label }
 				</Styled.SelectLabel>
 			) }
-			<CustomSelectButton { ...restProps } store={ store } />
-			<Styled.SelectPopover gutter={ 12 } store={ store } sameWidth>
-				<CustomSelectContext.Provider value={ { store } }>
-					{ children }
-				</CustomSelectContext.Provider>
-			</Styled.SelectPopover>
+			<InputBase
+				__next40pxDefaultSize
+				size={ size }
+				suffix={ <SelectControlChevronDown /> }
+			>
+				<CustomSelectButton
+					{ ...restProps }
+					size={ size }
+					store={ store }
+				/>
+				<Styled.SelectPopover gutter={ 12 } store={ store } sameWidth>
+					<CustomSelectContext.Provider value={ { store } }>
+						{ children }
+					</CustomSelectContext.Provider>
+				</Styled.SelectPopover>
+			</InputBase>
 		</>
 	);
 }
diff --git a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
index 0472d7df327b6..43f102e6ee049 100644
--- a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
+++ b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
@@ -3,10 +3,7 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -14,12 +11,12 @@ import _CustomSelect from '../custom-select';
 import CustomSelectItem from '../item';
 import type { LegacyCustomSelectProps } from '../types';
 import * as Styled from '../styles';
-import { ContextSystemProvider } from '../../context';
 
 function CustomSelectControl( props: LegacyCustomSelectProps ) {
 	const {
 		__experimentalShowSelectedHint,
 		__next40pxDefaultSize = false,
+		describedBy,
 		options,
 		onChange,
 		size = 'default',
@@ -94,39 +91,33 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 		);
 	};
 
-	// translate legacy button sizing
-	const contextSystemValue = useMemo( () => {
-		let selectedSize;
-
+	const translatedSize = ( () => {
 		if (
 			( __next40pxDefaultSize && size === 'default' ) ||
 			size === '__unstable-large'
 		) {
-			selectedSize = 'default';
-		} else if ( ! __next40pxDefaultSize && size === 'default' ) {
-			selectedSize = 'compact';
-		} else {
-			selectedSize = size;
+			return 'default';
 		}
-
-		return {
-			CustomSelectControlButton: { _overrides: { size: selectedSize } },
-		};
-	}, [ __next40pxDefaultSize, size ] );
-
-	const translatedProps = {
-		'aria-describedby': props.describedBy,
-		children,
-		renderSelectedValue: __experimentalShowSelectedHint
-			? renderSelectedValueHint
-			: undefined,
-		...restProps,
-	};
+		if ( ! __next40pxDefaultSize && size === 'default' ) {
+			return 'compact';
+		}
+		return size;
+	} )();
 
 	return (
-		<ContextSystemProvider value={ contextSystemValue }>
-			<_CustomSelect { ...translatedProps } store={ store } />
-		</ContextSystemProvider>
+		<_CustomSelect
+			aria-describedby={ describedBy }
+			renderSelectedValue={
+				__experimentalShowSelectedHint
+					? renderSelectedValueHint
+					: undefined
+			}
+			size={ translatedSize }
+			store={ store }
+			{ ...restProps }
+		>
+			{ children }
+		</_CustomSelect>
 	);
 }
 
diff --git a/packages/components/src/custom-select-control-v2/stories/default.story.tsx b/packages/components/src/custom-select-control-v2/stories/default.story.tsx
index 07c0c62cb1edb..5b715b2af9c09 100644
--- a/packages/components/src/custom-select-control-v2/stories/default.story.tsx
+++ b/packages/components/src/custom-select-control-v2/stories/default.story.tsx
@@ -26,7 +26,6 @@ const meta: Meta< typeof CustomSelectControlV2 > = {
 	},
 	tags: [ 'status-wip' ],
 	parameters: {
-		badges: [ 'wip' ],
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: {
diff --git a/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx b/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx
index dc1d4ca490d5d..e8835d1897db9 100644
--- a/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx
+++ b/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx
@@ -21,8 +21,8 @@ const meta: Meta< typeof CustomSelectControl > = {
 		onChange: { control: { type: null } },
 		value: { control: { type: null } },
 	},
+	tags: [ 'status-wip' ],
 	parameters: {
-		badges: [ 'wip' ],
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: {
diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts
index f268b75b30c5c..676a9c1a1ec59 100644
--- a/packages/components/src/custom-select-control-v2/styles.ts
+++ b/packages/components/src/custom-select-control-v2/styles.ts
@@ -10,7 +10,7 @@ import styled from '@emotion/styled';
  */
 import { COLORS, CONFIG } from '../utils';
 import { space } from '../utils/space';
-import type { CustomSelectButtonProps } from './types';
+import type { CustomSelectButtonSize } from './types';
 
 const ITEM_PADDING = space( 2 );
 
@@ -46,7 +46,7 @@ export const Select = styled( Ariakit.Select, {
 	size,
 	hasCustomRenderProp,
 }: {
-	size: NonNullable< CustomSelectButtonProps[ 'size' ] >;
+	size: NonNullable< CustomSelectButtonSize[ 'size' ] >;
 	hasCustomRenderProp: boolean;
 } ) => {
 	const heightProperty = hasCustomRenderProp ? 'minHeight' : 'height';
@@ -79,17 +79,15 @@ export const Select = styled( Ariakit.Select, {
 		align-items: center;
 		justify-content: space-between;
 		background-color: ${ COLORS.theme.background };
-		border: 1px solid ${ COLORS.ui.border };
-		border-radius: 2px;
+		border: none;
 		cursor: pointer;
 		font-size: ${ CONFIG.fontSize };
 		width: 100%;
+
 		&[data-focus-visible] {
-			outline-style: solid;
-		}
-		&[aria-expanded='true'] {
-			outline: 1.5px solid ${ COLORS.theme.accent };
+			outline: none; // handled by InputBase component
 		}
+
 		${ getSize() }
 	`;
 } );
@@ -98,6 +96,10 @@ export const SelectPopover = styled( Ariakit.SelectPopover )`
 	border-radius: 2px;
 	background: ${ COLORS.theme.background };
 	border: 1px solid ${ COLORS.theme.foreground };
+
+	&[data-focus-visible] {
+		outline: none; // outline will be on the trigger, rather than the popover
+	}
 `;
 
 export const SelectItem = styled( Ariakit.SelectItem )`
diff --git a/packages/components/src/custom-select-control-v2/types.ts b/packages/components/src/custom-select-control-v2/types.ts
index 313bc06dd493b..5540a533c09d4 100644
--- a/packages/components/src/custom-select-control-v2/types.ts
+++ b/packages/components/src/custom-select-control-v2/types.ts
@@ -14,6 +14,19 @@ export type CustomSelectStore = {
 
 export type CustomSelectContext = CustomSelectStore | undefined;
 
+type CustomSelectSize< Size = 'compact' | 'default' > = {
+	/**
+	 * The size of the control.
+	 *
+	 * @default 'default'
+	 */
+	size?: Size;
+};
+
+export type CustomSelectButtonSize = CustomSelectSize<
+	'compact' | 'default' | 'small'
+>;
+
 export type CustomSelectButtonProps = {
 	/**
 	 * An optional default value for the control when used in uncontrolled mode.
@@ -30,19 +43,13 @@ export type CustomSelectButtonProps = {
 	renderSelectedValue?: (
 		selectedValue: string | string[]
 	) => React.ReactNode;
-	/**
-	 * The size of the control.
-	 *
-	 * @default 'default'
-	 */
-	size?: 'compact' | 'default' | 'small';
 	/**
 	 * The value of the control when used in uncontrolled mode.
 	 */
 	value?: string | string[];
 };
 
-export type _CustomSelectProps = {
+export type _CustomSelectProps = CustomSelectButtonProps & {
 	/**
 	 * The child elements. This should be composed of `CustomSelectItem` components.
 	 */
@@ -60,14 +67,8 @@ export type _CustomSelectProps = {
 };
 
 export type CustomSelectProps = _CustomSelectProps &
-	Omit< CustomSelectButtonProps, 'size' > & {
-		/**
-		 * The size of the control.
-		 *
-		 * @default 'default'
-		 */
-		size?: Exclude< CustomSelectButtonProps[ 'size' ], 'small' >;
-	};
+	CustomSelectButtonProps &
+	CustomSelectSize;
 
 /**
  * The legacy object structure for the options array.
diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
index ec43ec5d8aeeb..58ca5a961a138 100644
--- a/packages/components/src/custom-select-control/index.js
+++ b/packages/components/src/custom-select-control/index.js
@@ -3,7 +3,7 @@
  * External dependencies
  */
 import { useSelect } from 'downshift';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -114,7 +114,7 @@ export default function CustomSelectControl( props ) {
 		return sprintf( __( 'Currently selected: %s' ), selectedItem.name );
 	}
 
-	const menuProps = getMenuProps( {
+	let menuProps = getMenuProps( {
 		className: 'components-custom-select-control__menu',
 		'aria-hidden': ! isOpen,
 	} );
@@ -131,14 +131,15 @@ export default function CustomSelectControl( props ) {
 	if (
 		menuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )
 	) {
-		delete menuProps[ 'aria-activedescendant' ];
+		const {
+			'aria-activedescendant': ariaActivedescendant,
+			...restMenuProps
+		} = menuProps;
+		menuProps = restMenuProps;
 	}
 	return (
 		<div
-			className={ classnames(
-				'components-custom-select-control',
-				className
-			) }
+			className={ clsx( 'components-custom-select-control', className ) }
 		>
 			{ hideLabelFromVision ? (
 				<VisuallyHidden as="label" { ...getLabelProps() }>
@@ -188,13 +189,12 @@ export default function CustomSelectControl( props ) {
 					<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>
 						{ isOpen &&
 							items.map( ( item, index ) => (
-								// eslint-disable-next-line react/jsx-key
 								<li
+									key={ item.key }
 									{ ...getItemProps( {
 										item,
 										index,
-										key: item.key,
-										className: classnames(
+										className: clsx(
 											item.className,
 											'components-custom-select-control__item',
 											{
diff --git a/packages/components/src/dashicon/index.native.js b/packages/components/src/dashicon/index.native.js
index 35f9f6f99cb6f..aba2631341260 100644
--- a/packages/components/src/dashicon/index.native.js
+++ b/packages/components/src/dashicon/index.native.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
+import { Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
diff --git a/packages/components/src/dimension-control/index.tsx b/packages/components/src/dimension-control/index.tsx
index 38ad5b2f85ccc..8ba0de0ce0599 100644
--- a/packages/components/src/dimension-control/index.tsx
+++ b/packages/components/src/dimension-control/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -87,10 +87,7 @@ export function DimensionControl( props: DimensionControlProps ) {
 	return (
 		<SelectControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
-			className={ classnames(
-				className,
-				'block-editor-dimension-control'
-			) }
+			className={ clsx( className, 'block-editor-dimension-control' ) }
 			label={ selectLabel }
 			hideLabelFromVision={ false }
 			value={ value }
diff --git a/packages/components/src/dimension-control/stories/index.story.tsx b/packages/components/src/dimension-control/stories/index.story.tsx
index 1220be3d4eea1..33d5bad4ff4b1 100644
--- a/packages/components/src/dimension-control/stories/index.story.tsx
+++ b/packages/components/src/dimension-control/stories/index.story.tsx
@@ -13,7 +13,7 @@ import sizes from '../sizes';
  */
 import { desktop, tablet, mobile } from '@wordpress/icons';
 
-export default {
+const meta: Meta< typeof DimensionControl > = {
 	component: DimensionControl,
 	title: 'Components (Experimental)/DimensionControl',
 	argTypes: {
@@ -34,7 +34,8 @@ export default {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},
-} as Meta< typeof DimensionControl >;
+};
+export default meta;
 
 const Template: StoryFn< typeof DimensionControl > = ( args ) => (
 	<DimensionControl { ...args } />
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 ab4e87ef5a99f..608cadbcf544f 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
@@ -47,10 +47,6 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   min-height: 0;
 }
 
-.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) {
-  z-index: 1;
-}
-
 .emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
   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));
@@ -72,6 +68,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -330,10 +327,6 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   min-height: 0;
 }
 
-.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) {
-  z-index: 1;
-}
-
 .emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
   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));
@@ -355,6 +348,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -623,10 +617,6 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   min-height: 0;
 }
 
-.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) {
-  z-index: 1;
-}
-
 .emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
   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));
@@ -648,6 +638,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -928,10 +919,6 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   min-height: 0;
 }
 
-.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) {
-  z-index: 1;
-}
-
 .emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
   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));
@@ -953,6 +940,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
diff --git a/packages/components/src/dimension-control/test/index.test.js b/packages/components/src/dimension-control/test/index.test.js
index 247e15fbe1b52..1d65dd86c7e7c 100644
--- a/packages/components/src/dimension-control/test/index.test.js
+++ b/packages/components/src/dimension-control/test/index.test.js
@@ -25,10 +25,7 @@ describe( 'DimensionControl', () => {
 	describe( 'rendering', () => {
 		it( 'renders with defaults', () => {
 			const { container } = render(
-				<DimensionControl
-					instanceId={ instanceId }
-					label={ 'Padding' }
-				/>
+				<DimensionControl instanceId={ instanceId } label="Padding" />
 			);
 			expect( container ).toMatchSnapshot();
 		} );
@@ -37,7 +34,7 @@ describe( 'DimensionControl', () => {
 			const { container } = render(
 				<DimensionControl
 					instanceId={ instanceId }
-					label={ 'Margin' }
+					label="Margin"
 					icon={ plus }
 				/>
 			);
@@ -48,9 +45,9 @@ describe( 'DimensionControl', () => {
 			const { container } = render(
 				<DimensionControl
 					instanceId={ instanceId }
-					label={ 'Margin' }
+					label="Margin"
 					icon={ plus }
-					iconLabel={ 'Tablet Devices' }
+					iconLabel="Tablet Devices"
 				/>
 			);
 			expect( container ).toMatchSnapshot();
@@ -78,7 +75,7 @@ describe( 'DimensionControl', () => {
 			const { container } = render(
 				<DimensionControl
 					instanceId={ instanceId }
-					label={ 'Custom Dimension' }
+					label="Custom Dimension"
 					sizes={ customSizes }
 				/>
 			);
@@ -93,7 +90,7 @@ describe( 'DimensionControl', () => {
 			render(
 				<DimensionControl
 					instanceId={ instanceId }
-					label={ 'Padding' }
+					label="Padding"
 					onChange={ onChangeHandler }
 				/>
 			);
@@ -115,7 +112,7 @@ describe( 'DimensionControl', () => {
 			render(
 				<DimensionControl
 					instanceId={ instanceId }
-					label={ 'Padding' }
+					label="Padding"
 					onChange={ onChangeHandler }
 				/>
 			);
diff --git a/packages/components/src/draggable/test/index.native.js b/packages/components/src/draggable/test/index.native.js
index 6fb20fc04e0b4..ca607960010d1 100644
--- a/packages/components/src/draggable/test/index.native.js
+++ b/packages/components/src/draggable/test/index.native.js
@@ -10,9 +10,9 @@ import { State } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { Draggable, DraggableTrigger } from '@wordpress/components';
+import Draggable, { DraggableTrigger } from '../../draggable';
 
 // Touch event type constants have been extracted from original source code, as they are not exported in the package.
 // Reference: https://github.com/software-mansion/react-native-gesture-handler/blob/90895e5f38616a6be256fceec6c6a391cd9ad7c7/src/TouchEventType.ts
diff --git a/packages/components/src/drop-zone/index.tsx b/packages/components/src/drop-zone/index.tsx
index 9d5255a1d771e..abe8a2c0263da 100644
--- a/packages/components/src/drop-zone/index.tsx
+++ b/packages/components/src/drop-zone/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -181,7 +181,7 @@ export function DropZoneComponent( {
 			setIsDraggingOverElement( false );
 		},
 	} );
-	const classes = classnames( 'components-drop-zone', className, {
+	const classes = clsx( 'components-drop-zone', className, {
 		'is-active':
 			( isDraggingOverDocument || isDraggingOverElement ) &&
 			( ( type === 'file' && onFilesDrop ) ||
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 11f3c8fb1a6b1..6996431fc6053 100644
--- a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx
+++ b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx
@@ -59,7 +59,6 @@ const meta: Meta< typeof DropdownMenu > = {
 	tags: [ 'status-private' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
-		badges: [ 'private' ],
 		controls: { expanded: true },
 		docs: {
 			canvas: { sourceState: 'shown' },
@@ -111,7 +110,7 @@ export const Default: StoryFn< typeof DropdownMenu > = ( props ) => (
 			>
 				<DropdownMenuItemLabel>With prefix</DropdownMenuItemLabel>
 			</DropdownMenuItem>
-			<DropdownMenuItem suffix={ '⌘S' }>With suffix</DropdownMenuItem>
+			<DropdownMenuItem suffix="⌘S">With suffix</DropdownMenuItem>
 			<DropdownMenuItem
 				disabled
 				prefix={ <Icon icon={ formatCapitalize } size={ 24 } /> }
diff --git a/packages/components/src/dropdown-menu-v2/test/index.tsx b/packages/components/src/dropdown-menu-v2/test/index.tsx
index 10351d6cb588a..2829fbb8fefce 100644
--- a/packages/components/src/dropdown-menu-v2/test/index.tsx
+++ b/packages/components/src/dropdown-menu-v2/test/index.tsx
@@ -54,9 +54,14 @@ describe( 'DropdownMenu', () => {
 
 		expect( toggleButton ).toHaveAttribute( 'aria-expanded', 'true' );
 
-		expect(
-			screen.getByRole( 'menu', { name: toggleButton.textContent ?? '' } )
-		).toHaveFocus();
+		await waitFor( () =>
+			expect(
+				screen.getByRole( 'menu', {
+					name: toggleButton.textContent ?? '',
+				} )
+			).toHaveFocus()
+		);
+
 		expect( screen.getByRole( 'separator' ) ).toHaveAttribute(
 			'aria-orientation',
 			'horizontal'
diff --git a/packages/components/src/dropdown-menu/index.native.js b/packages/components/src/dropdown-menu/index.native.js
index d3c9607377050..1e9d6569afc93 100644
--- a/packages/components/src/dropdown-menu/index.native.js
+++ b/packages/components/src/dropdown-menu/index.native.js
@@ -1,12 +1,11 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Platform } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { BottomSheet, PanelBody } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { menu } from '@wordpress/icons';
 
@@ -15,6 +14,8 @@ import { menu } from '@wordpress/icons';
  */
 import Button from '../button';
 import Dropdown from '../dropdown';
+import BottomSheet from '../mobile/bottom-sheet';
+import PanelBody from '../panel/body';
 
 function mergeProps( defaultProps = {}, props = {} ) {
 	const mergedProps = {
@@ -23,10 +24,7 @@ function mergeProps( defaultProps = {}, props = {} ) {
 	};
 
 	if ( props.className && defaultProps.className ) {
-		mergedProps.className = classnames(
-			props.className,
-			defaultProps.className
-		);
+		mergedProps.className = clsx( props.className, defaultProps.className );
 	}
 
 	return mergedProps;
@@ -72,17 +70,14 @@ function DropdownMenu( {
 
 	return (
 		<Dropdown
-			className={ classnames( 'components-dropdown-menu', className ) }
+			className={ clsx( 'components-dropdown-menu', className ) }
 			popoverProps={ mergedPopoverProps }
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				const mergedToggleProps = mergeProps(
 					{
-						className: classnames(
-							'components-dropdown-menu__toggle',
-							{
-								'is-opened': isOpen,
-							}
-						),
+						className: clsx( 'components-dropdown-menu__toggle', {
+							'is-opened': isOpen,
+						} ),
 					},
 					toggleProps
 				);
diff --git a/packages/components/src/dropdown-menu/index.tsx b/packages/components/src/dropdown-menu/index.tsx
index 5d0e69f528204..e0b7a5884ed6d 100644
--- a/packages/components/src/dropdown-menu/index.tsx
+++ b/packages/components/src/dropdown-menu/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -30,10 +30,7 @@ function mergeProps<
 	};
 
 	if ( props.className && defaultProps.className ) {
-		mergedProps.className = classnames(
-			props.className,
-			defaultProps.className
-		);
+		mergedProps.className = clsx( props.className, defaultProps.className );
 	}
 
 	return mergedProps;
@@ -113,12 +110,9 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 
 				const mergedToggleProps = mergeProps(
 					{
-						className: classnames(
-							'components-dropdown-menu__toggle',
-							{
-								'is-opened': isOpen,
-							}
-						),
+						className: clsx( 'components-dropdown-menu__toggle', {
+							'is-opened': isOpen,
+						} ),
 					},
 					restToggleProps
 				);
@@ -157,10 +151,9 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 				const mergedMenuProps = mergeProps(
 					{
 						'aria-label': label,
-						className: classnames(
-							'components-dropdown-menu__menu',
-							{ 'no-icons': noIcons }
-						),
+						className: clsx( 'components-dropdown-menu__menu', {
+							'no-icons': noIcons,
+						} ),
 					},
 					menuProps
 				);
@@ -182,7 +175,7 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 											control.onClick();
 										}
 									} }
-									className={ classnames(
+									className={ clsx(
 										'components-dropdown-menu__menu-item',
 										{
 											'has-separator':
diff --git a/packages/components/src/dropdown/index.tsx b/packages/components/src/dropdown/index.tsx
index 0527f4f0c2cd8..3530d3b1e8de2 100644
--- a/packages/components/src/dropdown/index.tsx
+++ b/packages/components/src/dropdown/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -142,7 +142,7 @@ const UnconnectedDropdown = (
 					}
 					variant={ variant }
 					{ ...popoverProps }
-					className={ classnames(
+					className={ clsx(
 						'components-dropdown__content',
 						popoverProps?.className,
 						contentClassName
diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx
index 96d67441f78d4..3df2f78345066 100644
--- a/packages/components/src/dropdown/stories/index.story.tsx
+++ b/packages/components/src/dropdown/stories/index.story.tsx
@@ -66,7 +66,9 @@ WithMorePadding.args = {
 	...Default.args,
 	renderContent: () => (
 		<DropdownContentWrapper paddingSize="medium">
-			Content wrapped with <code>{ `paddingSize="medium"` }</code>.
+			{ /* eslint-disable react/no-unescaped-entities */ }
+			Content wrapped with <code>paddingSize="medium"</code>.
+			{ /* eslint-enable react/no-unescaped-entities */ }
 		</DropdownContentWrapper>
 	),
 };
@@ -81,7 +83,9 @@ WithNoPadding.args = {
 	...Default.args,
 	renderContent: () => (
 		<DropdownContentWrapper paddingSize="none">
-			Content wrapped with <code>{ `paddingSize="none"` }</code>.
+			{ /* eslint-disable react/no-unescaped-entities */ }
+			Content wrapped with <code>paddingSize="none"</code>.
+			{ /* eslint-enable react/no-unescaped-entities */ }
 		</DropdownContentWrapper>
 	),
 };
diff --git a/packages/components/src/external-link/index.tsx b/packages/components/src/external-link/index.tsx
index 3f09cdd92b010..0927effb3ae67 100644
--- a/packages/components/src/external-link/index.tsx
+++ b/packages/components/src/external-link/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -34,7 +34,7 @@ function UnforwardedExternalLink(
 			].filter( Boolean )
 		),
 	].join( ' ' );
-	const classes = classnames( 'components-external-link', className );
+	const classes = clsx( 'components-external-link', className );
 	/* Anchor links are perceived as external links.
 	This constant helps check for on page anchor links,
 	to prevent them from being opened in the editor. */
diff --git a/packages/components/src/focal-point-picker/focal-point.tsx b/packages/components/src/focal-point-picker/focal-point.tsx
index 5b82bef4bfb2e..a03e41d4809cc 100644
--- a/packages/components/src/focal-point-picker/focal-point.tsx
+++ b/packages/components/src/focal-point-picker/focal-point.tsx
@@ -6,7 +6,6 @@ import { PointerCircle } from './styles/focal-point-style';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
 import type { FocalPointProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
@@ -15,11 +14,13 @@ export default function FocalPoint( {
 	top = '50%',
 	...props
 }: WordPressComponentProps< FocalPointProps, 'div' > ) {
-	const classes = classnames(
-		'components-focal-point-picker__icon_container'
-	);
-
 	const style = { left, top };
 
-	return <PointerCircle { ...props } className={ classes } style={ style } />;
+	return (
+		<PointerCircle
+			{ ...props }
+			className="components-focal-point-picker__icon_container"
+			style={ style }
+		/>
+	);
 }
diff --git a/packages/components/src/focal-point-picker/index.native.js b/packages/components/src/focal-point-picker/index.native.js
index 834c962eae7b1..9a11673aa41bb 100644
--- a/packages/components/src/focal-point-picker/index.native.js
+++ b/packages/components/src/focal-point-picker/index.native.js
@@ -12,7 +12,6 @@ import {
 	setFocalPointPickerTooltipShown,
 } from '@wordpress/react-native-bridge';
 import { __ } from '@wordpress/i18n';
-import { Image, UnitControl } from '@wordpress/components';
 import { useRef, useState, useMemo, useEffect } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
@@ -24,6 +23,8 @@ import Tooltip from './tooltip';
 import styles from './style.scss';
 import { isVideoType } from './utils';
 import { clamp } from '../utils/math';
+import Image from '../mobile/image';
+import UnitControl from '../unit-control';
 
 const MIN_POSITION_VALUE = 0;
 const MAX_POSITION_VALUE = 100;
diff --git a/packages/components/src/focal-point-picker/index.tsx b/packages/components/src/focal-point-picker/index.tsx
index 0e633dae47cd8..aa6c5484948cf 100644
--- a/packages/components/src/focal-point-picker/index.tsx
+++ b/packages/components/src/focal-point-picker/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -232,10 +232,7 @@ export function FocalPointPicker( {
 		top: y !== undefined ? y * bounds.height : 0.5 * bounds.height,
 	};
 
-	const classes = classnames(
-		'components-focal-point-picker-control',
-		className
-	);
+	const classes = clsx( 'components-focal-point-picker-control', className );
 
 	const instanceId = useInstanceId( FocalPointPicker );
 	const id = `inspector-focal-point-picker-control-${ instanceId }`;
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 5ee0c01c42dd6..6f95978256f72 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,11 +3,6 @@
  */
 import styled from '@emotion/styled';
 
-/**
- * Internal dependencies
- */
-import { reduceMotion } from '../../utils';
-
 export const PointerCircle = styled.div`
 	background-color: transparent;
 	cursor: grab;
@@ -23,9 +18,10 @@ export const PointerCircle = styled.div`
 	border-radius: 50%;
 	backdrop-filter: blur( 16px ) saturate( 180% );
 	box-shadow: rgb( 0 0 0 / 10% ) 0px 0px 8px;
-	transition: transform 100ms linear;
 
-	${ reduceMotion( 'transition' ) }
+	@media not ( prefers-reduced-motion ) {
+		transition: transform 100ms linear;
+	}
 
 	${ ( { isDragging }: { isDragging: boolean } ) =>
 		isDragging &&
diff --git a/packages/components/src/focal-point-picker/test/index.js b/packages/components/src/focal-point-picker/test/index.tsx
similarity index 75%
rename from packages/components/src/focal-point-picker/test/index.js
rename to packages/components/src/focal-point-picker/test/index.tsx
index d5c7946cffd86..1eccced32c70a 100644
--- a/packages/components/src/focal-point-picker/test/index.js
+++ b/packages/components/src/focal-point-picker/test/index.tsx
@@ -8,6 +8,19 @@ import userEvent from '@testing-library/user-event';
  * Internal dependencies
  */
 import Picker from '..';
+import type { FocalPointPickerProps } from '../types';
+
+type Log = { name: string; args: unknown[] };
+type EventLogger = ( name: string, args: unknown[] ) => void;
+
+const props: FocalPointPickerProps = {
+	onChange: jest.fn(),
+	url: 'test-url',
+	value: {
+		x: 0,
+		y: 0,
+	},
+};
 
 describe( 'FocalPointPicker', () => {
 	describe( 'focus and blur', () => {
@@ -16,7 +29,7 @@ describe( 'FocalPointPicker', () => {
 
 			const mockOnChange = jest.fn();
 
-			render( <Picker onChange={ mockOnChange } /> );
+			render( <Picker { ...props } onChange={ mockOnChange } /> );
 
 			const draggableArea = screen.getByRole( 'button' );
 
@@ -32,6 +45,7 @@ describe( 'FocalPointPicker', () => {
 
 			render(
 				<Picker
+					{ ...props }
 					onChange={ mockOnChange }
 					onDrag={ mockOnDrag }
 					onDragEnd={ mockOnDragEnd }
@@ -57,15 +71,16 @@ describe( 'FocalPointPicker', () => {
 
 	describe( 'drag gestures', () => {
 		it( 'should call onDragStart, onDrag, onDragEnd and onChange in that order', () => {
-			const logs = [];
-			const eventLogger = ( name, args ) => logs.push( { name, args } );
+			const logs: Log[] = [];
+			const eventLogger: EventLogger = ( name, args ) =>
+				logs.push( { name, args } );
 			const events = [ 'onDragStart', 'onDrag', 'onDragEnd', 'onChange' ];
-			const handlers = {};
+			const handlers: { [ key: string ]: EventLogger } = {};
 			events.forEach( ( name ) => {
 				handlers[ name ] = ( ...all ) => eventLogger( name, all );
 			} );
 
-			render( <Picker { ...handlers } /> );
+			render( <Picker { ...props } { ...handlers } /> );
 
 			const dragArea = screen.getByRole( 'button' );
 
@@ -92,6 +107,7 @@ describe( 'FocalPointPicker', () => {
 
 			render(
 				<Picker
+					{ ...props }
 					value={ { x: 0.25, y: 0.25 } }
 					onChange={ spyChange }
 					resolvePoint={ () => {
@@ -118,12 +134,12 @@ describe( 'FocalPointPicker', () => {
 	describe( 'controllability', () => {
 		it( 'should update value from props', () => {
 			const { rerender } = render(
-				<Picker value={ { x: 0.25, y: 0.5 } } />
+				<Picker { ...props } value={ { x: 0.25, y: 0.5 } } />
 			);
 			const xInput = screen.getByRole( 'spinbutton', {
 				name: 'Focal point left position',
-			} );
-			rerender( <Picker value={ { x: 0.93, y: 0.5 } } /> );
+			} ) as HTMLButtonElement;
+			rerender( <Picker { ...props } value={ { x: 0.93, y: 0.5 } } /> );
 			expect( xInput.value ).toBe( '93' );
 		} );
 		it( 'call onChange with the expected values', async () => {
@@ -131,7 +147,11 @@ describe( 'FocalPointPicker', () => {
 
 			const spyChange = jest.fn();
 			render(
-				<Picker value={ { x: 0.14, y: 0.62 } } onChange={ spyChange } />
+				<Picker
+					{ ...props }
+					value={ { x: 0.14, y: 0.62 } }
+					onChange={ spyChange }
+				/>
 			);
 			// Focus and press arrow up
 			const dragArea = screen.getByRole( 'button' );
@@ -151,20 +171,27 @@ describe( 'FocalPointPicker', () => {
 			const onChangeSpy = jest.fn();
 			render(
 				<Picker
-					value={ { x: '0.1', y: '0.2' } }
+					{ ...props }
+					value={ {
+						x: '0.1' as unknown as number,
+						y: '0.2' as unknown as number,
+					} }
 					onChange={ onChangeSpy }
 				/>
 			);
-
 			expect(
-				screen.getByRole( 'spinbutton', {
-					name: 'Focal point left position',
-				} ).value
+				(
+					screen.getByRole( 'spinbutton', {
+						name: 'Focal point left position',
+					} ) as HTMLButtonElement
+				 ).value
 			).toBe( '10' );
 			expect(
-				screen.getByRole( 'spinbutton', {
-					name: 'Focal point top position',
-				} ).value
+				(
+					screen.getByRole( 'spinbutton', {
+						name: 'Focal point top position',
+					} ) as HTMLButtonElement
+				 ).value
 			).toBe( '20' );
 			expect( onChangeSpy ).not.toHaveBeenCalled();
 		} );
diff --git a/packages/components/src/focal-point-picker/test/media.js b/packages/components/src/focal-point-picker/test/media.tsx
similarity index 63%
rename from packages/components/src/focal-point-picker/test/media.js
rename to packages/components/src/focal-point-picker/test/media.tsx
index 25296424cf65e..e2c03968f795d 100644
--- a/packages/components/src/focal-point-picker/test/media.js
+++ b/packages/components/src/focal-point-picker/test/media.tsx
@@ -7,11 +7,22 @@ import { render, screen } from '@testing-library/react';
  * Internal dependencies
  */
 import Media from '../media';
+import type { FocalPointPickerMediaProps } from '../types';
+
+type FocalPointPickerMediaTestProps = FocalPointPickerMediaProps & {
+	'data-testid': string;
+};
+
+const props: FocalPointPickerMediaTestProps = {
+	alt: '',
+	src: '',
+	'data-testid': 'media',
+};
 
 describe( 'FocalPointPicker/Media', () => {
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
-			render( <Media data-testid="media" /> );
+			render( <Media { ...props } /> );
 
 			expect( screen.getByTestId( 'media' ) ).toBeVisible();
 		} );
@@ -19,7 +30,7 @@ describe( 'FocalPointPicker/Media', () => {
 
 	describe( 'Media types', () => {
 		it( 'should render a placeholder by default', () => {
-			render( <Media data-testid="media" /> );
+			render( <Media { ...props } /> );
 
 			expect( screen.getByTestId( 'media' ) ).toHaveClass(
 				'components-focal-point-picker__media--placeholder'
@@ -28,34 +39,28 @@ describe( 'FocalPointPicker/Media', () => {
 
 		it( 'should render an video if src is a video file', () => {
 			const { rerender } = render(
-				<Media src="file.mp4" muted={ false } data-testid="media" />
+				<Media { ...props } src="file.mp4" muted={ false } />
 			);
 
 			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
 
-			rerender(
-				<Media src="file.ogg" muted={ false } data-testid="media" />
-			);
+			rerender( <Media { ...props } src="file.ogg" muted={ false } /> );
 
 			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
 
-			rerender(
-				<Media src="file.webm" muted={ false } data-testid="media" />
-			);
+			rerender( <Media { ...props } src="file.webm" muted={ false } /> );
 
 			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
 		} );
 
 		it( 'should render an image file, if not video', () => {
 			const { rerender } = render(
-				<Media src="file.gif" data-testid="media" />
+				<Media { ...props } src="file.gif" />
 			);
 
 			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'IMG' );
 
-			rerender(
-				<Media src="file.png" muted={ false } data-testid="media" />
-			);
+			rerender( <Media { ...props } src="file.png" muted={ false } /> );
 
 			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'IMG' );
 		} );
diff --git a/packages/components/src/font-size-picker/index.native.js b/packages/components/src/font-size-picker/index.native.js
index b6e9d5797564b..b12a27296ca29 100644
--- a/packages/components/src/font-size-picker/index.native.js
+++ b/packages/components/src/font-size-picker/index.native.js
@@ -10,7 +10,6 @@ import { useNavigation } from '@react-navigation/native';
 import { useState } from '@wordpress/element';
 import { Icon, chevronRight, check } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
-import { BottomSheet } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -18,6 +17,7 @@ import { BottomSheet } from '@wordpress/components';
 import { default as getPxFromCssUnit } from '../mobile/utils/get-px-from-css-unit';
 import { default as UnitControl, useCustomUnits } from '../unit-control';
 import styles from './style.scss';
+import BottomSheet from '../mobile/bottom-sheet';
 
 const DEFAULT_FONT_SIZE = 16;
 
@@ -59,7 +59,7 @@ function FontSizePicker( {
 	const label = __( 'Font Size' );
 
 	const units = useCustomUnits( {
-		availableUnits: [ 'px', 'em', 'rem' ],
+		availableUnits: [ 'px', 'em', 'rem', 'vw', 'vh' ],
 	} );
 
 	const accessibilityLabel = sprintf(
@@ -85,7 +85,7 @@ function FontSizePicker( {
 							: __( 'Default' )
 					}
 					onPress={ openSubSheet }
-					accessibilityRole={ 'button' }
+					accessibilityRole="button"
 					accessibilityLabel={ accessibilityLabel }
 					accessibilityHint={ sprintf(
 						// translators: %s: Select control button label e.g. Small
@@ -112,8 +112,8 @@ function FontSizePicker( {
 						label={ __( 'Default' ) }
 						onPress={ onChangeValue( undefined ) }
 						leftAlign
-						key={ 'default' }
-						accessibilityRole={ 'button' }
+						key="default"
+						accessibilityRole="button"
 						accessibilityLabel={ __( 'Selected: Default' ) }
 						accessibilityHint={ __(
 							'Double tap to select default font size'
@@ -139,7 +139,7 @@ function FontSizePicker( {
 								onPress={ onChangeValue( item.sizePx ) }
 								leftAlign
 								key={ index }
-								accessibilityRole={ 'button' }
+								accessibilityRole="button"
 								accessibilityLabel={
 									item.sizePx === selectedValue
 										? sprintf(
diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
index 6a18660adfda1..cb17b7a16e363 100644
--- a/packages/components/src/font-size-picker/index.tsx
+++ b/packages/components/src/font-size-picker/index.tsx
@@ -36,7 +36,7 @@ import FontSizePickerSelect from './font-size-picker-select';
 import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
 import { T_SHIRT_NAMES } from './constants';
 
-const DEFAULT_UNITS = [ 'px', 'em', 'rem' ];
+const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
 
 const UnforwardedFontSizePicker = (
 	props: FontSizePickerProps,
@@ -112,7 +112,7 @@ const UnforwardedFontSizePicker = (
 		units
 	);
 	const isValueUnitRelative =
-		!! valueUnit && [ 'em', 'rem' ].includes( valueUnit );
+		!! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit );
 	const isDisabled = value === undefined;
 
 	return (
diff --git a/packages/components/src/form-toggle/index.tsx b/packages/components/src/form-toggle/index.tsx
index 372f646b846a6..f0f800514a411 100644
--- a/packages/components/src/form-toggle/index.tsx
+++ b/packages/components/src/form-toggle/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -48,7 +48,7 @@ export function FormToggle(
 		onChange = noop,
 		...additionalProps
 	} = props;
-	const wrapperClasses = classnames( 'components-form-toggle', className, {
+	const wrapperClasses = clsx( 'components-form-toggle', className, {
 		'is-checked': checked,
 		'is-disabled': disabled,
 	} );
diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx
index 50dc8d66b8786..9fa3d3b7323df 100644
--- a/packages/components/src/form-token-field/index.tsx
+++ b/packages/components/src/form-token-field/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { KeyboardEvent, MouseEvent, TouchEvent, FocusEvent } from 'react';
 
 /**
@@ -644,7 +644,6 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			autoCapitalize,
 			autoComplete,
 			placeholder: value.length === 0 ? placeholder : '',
-			key: 'input',
 			disabled,
 			value: incompleteTokenValue,
 			onBlur,
@@ -654,6 +653,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 
 		return (
 			<TokenInput
+				key="input"
 				{ ...inputProps }
 				onChange={
 					! ( maxLength && value.length >= maxLength )
@@ -665,7 +665,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		);
 	}
 
-	const classes = classnames(
+	const classes = clsx(
 		className,
 		'components-form-token-field__input-container',
 		{
@@ -694,12 +694,14 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
 		<div { ...tokenFieldProps }>
-			<StyledLabel
-				htmlFor={ `components-form-token-input-${ instanceId }` }
-				className="components-form-token-field__label"
-			>
-				{ label }
-			</StyledLabel>
+			{ label && (
+				<StyledLabel
+					htmlFor={ `components-form-token-input-${ instanceId }` }
+					className="components-form-token-field__label"
+				>
+					{ label }
+				</StyledLabel>
+			) }
 			<div
 				ref={ tokensAndInput }
 				className={ classes }
diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
index 72a5b7929a7b0..57435a3f62ad2 100644
--- a/packages/components/src/form-token-field/style.scss
+++ b/packages/components/src/form-token-field/style.scss
@@ -181,4 +181,13 @@
 		background: $components-color-accent;
 		color: $white;
 	}
+
+	&[aria-disabled="true"] {
+		pointer-events: none;
+		color: $gray-600;
+
+		&.is-selected {
+			background-color: $components-color-accent-transparent-40;
+		}
+	}
 }
diff --git a/packages/components/src/form-token-field/suggestions-list.tsx b/packages/components/src/form-token-field/suggestions-list.tsx
index ff2036a3472e0..43a9b87c2030b 100644
--- a/packages/components/src/form-token-field/suggestions-list.tsx
+++ b/packages/components/src/form-token-field/suggestions-list.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { MouseEventHandler, ReactNode } from 'react';
 
 /**
@@ -19,7 +19,9 @@ const handleMouseDown: MouseEventHandler = ( e ) => {
 	e.preventDefault();
 };
 
-export function SuggestionsList< T extends string | { value: string } >( {
+export function SuggestionsList<
+	T extends string | { value: string; disabled?: boolean },
+>( {
 	selectedIndex,
 	scrollIntoView,
 	match,
@@ -103,10 +105,18 @@ export function SuggestionsList< T extends string | { value: string } >( {
 		>
 			{ suggestions.map( ( suggestion, index ) => {
 				const matchText = computeSuggestionMatch( suggestion );
-				const className = classnames(
+				const isSelected = index === selectedIndex;
+				const isDisabled =
+					typeof suggestion === 'object' && suggestion?.disabled;
+				const key =
+					typeof suggestion === 'object' && 'value' in suggestion
+						? suggestion?.value
+						: displayTransform( suggestion );
+
+				const className = clsx(
 					'components-form-token-field__suggestion',
 					{
-						'is-selected': index === selectedIndex,
+						'is-selected': isSelected,
 					}
 				);
 
@@ -134,16 +144,12 @@ export function SuggestionsList< T extends string | { value: string } >( {
 						id={ `components-form-token-suggestions-${ instanceId }-${ index }` }
 						role="option"
 						className={ className }
-						key={
-							typeof suggestion === 'object' &&
-							'value' in suggestion
-								? suggestion?.value
-								: displayTransform( suggestion )
-						}
+						key={ key }
 						onMouseDown={ handleMouseDown }
 						onClick={ handleClick( suggestion ) }
 						onMouseEnter={ handleHover( suggestion ) }
 						aria-selected={ index === selectedIndex }
+						aria-disabled={ isDisabled }
 					>
 						{ output }
 					</li>
diff --git a/packages/components/src/form-token-field/token-input.tsx b/packages/components/src/form-token-field/token-input.tsx
index c2b4983c51cb9..daf1df4223354 100644
--- a/packages/components/src/form-token-field/token-input.tsx
+++ b/packages/components/src/form-token-field/token-input.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ChangeEvent, ForwardedRef, FocusEventHandler } from 'react';
 
 /**
@@ -64,7 +64,7 @@ export function UnForwardedTokenInput(
 			onFocus={ onFocusHandler }
 			onBlur={ onBlurHandler }
 			size={ size }
-			className={ classnames(
+			className={ clsx(
 				className,
 				'components-form-token-field__input'
 			) }
diff --git a/packages/components/src/form-token-field/token.tsx b/packages/components/src/form-token-field/token.tsx
index 745a6d485df9b..7afd703588228 100644
--- a/packages/components/src/form-token-field/token.tsx
+++ b/packages/components/src/form-token-field/token.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -34,7 +34,7 @@ export default function Token( {
 	termsCount,
 }: TokenProps ) {
 	const instanceId = useInstanceId( Token );
-	const tokenClasses = classnames( 'components-form-token-field__token', {
+	const tokenClasses = clsx( 'components-form-token-field__token', {
 		'is-error': 'error' === status,
 		'is-success': 'success' === status,
 		'is-validating': 'validating' === status,
diff --git a/packages/components/src/guide/index.tsx b/packages/components/src/guide/index.tsx
index c5655847d99e5..afb39e7bd12b5 100644
--- a/packages/components/src/guide/index.tsx
+++ b/packages/components/src/guide/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -106,7 +106,7 @@ function Guide( {
 
 	return (
 		<Modal
-			className={ classnames( 'components-guide', className ) }
+			className={ clsx( 'components-guide', className ) }
 			contentLabel={ contentLabel }
 			isDismissible={ pages.length > 1 }
 			onRequestClose={ onFinish }
diff --git a/packages/components/src/heading/test/__snapshots__/index.tsx.snap b/packages/components/src/heading/test/__snapshots__/index.tsx.snap
index 9a779613f56c2..cf863c4b2bb2e 100644
--- a/packages/components/src/heading/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/heading/test/__snapshots__/index.tsx.snap
@@ -5,6 +5,7 @@ exports[`props should render correctly 1`] = `
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   color: #1e1e1e;
   font-size: calc(1.95 * 13px);
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index 1421316d27b40..7c2866cbe98b1 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -111,7 +111,6 @@ export { default as Image } from './mobile/image';
 export { IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image/constants';
 export { default as ImageEditingButton } from './mobile/image/image-editing-button';
 export { setClipboard, getClipboard } from './mobile/clipboard';
-export { default as AudioPlayer } from './mobile/audio-player';
 export { default as Badge } from './mobile/badge';
 export { default as Gridicons } from './mobile/gridicons';
 
@@ -131,18 +130,5 @@ export {
 	getValueAndUnit,
 } from './mobile/utils/use-unit-converter-to-mobile';
 
-export {
-	default as GlobalStylesContext,
-	useGlobalStyles,
-	withGlobalStyles,
-	getMergedGlobalStyles,
-} from './mobile/global-styles-context';
-export {
-	getGlobalStyles,
-	getColorsAndGradients,
-	useMobileGlobalStylesColors,
-	useEditorColorScheme,
-} from './mobile/global-styles-context/utils';
-
 // Private APIs.
 export { privateApis } from './private-apis';
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index a824162cb2412..f3643a1499a02 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -132,6 +132,7 @@ export { default as PanelHeader } from './panel/header';
 export { default as PanelRow } from './panel/row';
 export { default as Placeholder } from './placeholder';
 export { default as Popover } from './popover';
+export { default as ProgressBar } from './progress-bar';
 export { default as QueryControls } from './query-controls';
 export { default as __experimentalRadio } from './radio-group/radio';
 export { default as __experimentalRadioGroup } from './radio-group';
diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx
index 1cf9000a467dd..a5a9e054bc37d 100644
--- a/packages/components/src/input-control/index.tsx
+++ b/packages/components/src/input-control/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -58,7 +58,7 @@ export function UnforwardedInputControl(
 	} = useDeprecated36pxDefaultSizeProp< InputControlProps >( props );
 
 	const id = useUniqueId( idProp );
-	const classes = classNames( 'components-input-control', className );
+	const classes = clsx( 'components-input-control', className );
 
 	const draftHookProps = useDraft( {
 		value,
@@ -66,10 +66,7 @@ export function UnforwardedInputControl(
 		onChange,
 	} );
 
-	// ARIA descriptions can only contain plain text, so fall back to aria-details if not.
-	const helpPropName =
-		typeof help === 'string' ? 'aria-describedby' : 'aria-details';
-	const helpProp = !! help ? { [ helpPropName ]: `${ id }__help` } : {};
+	const helpProp = !! help ? { 'aria-describedby': `${ id }__help` } : {};
 
 	return (
 		<BaseControl
diff --git a/packages/components/src/input-control/input-base.tsx b/packages/components/src/input-control/input-base.tsx
index 9e34139f3e54b..58396f3ab9859 100644
--- a/packages/components/src/input-control/input-base.tsx
+++ b/packages/components/src/input-control/input-base.tsx
@@ -64,7 +64,7 @@ function getUIFlexProps( labelPosition?: LabelPosition ) {
 	return props;
 }
 
-export function InputBase(
+function InputBase(
 	props: WordPressComponentProps< InputBaseProps, 'div' >,
 	ref: ForwardedRef< HTMLDivElement >
 ) {
@@ -144,4 +144,8 @@ export function InputBase(
 	);
 }
 
+/**
+ * `InputBase` is an internal component used to style the standard borders for an input,
+ * as well as handle the layout for prefix/suffix elements.
+ */
 export default contextConnect( InputBase, 'InputBase' );
diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx
index 3192141a8ac0b..ddfad620b9124 100644
--- a/packages/components/src/input-control/styles/input-control-styles.tsx
+++ b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -83,8 +83,6 @@ export const Root = styled( Flex )`
 
 	// Focus within, excluding cases where auxiliary controls in prefix or suffix have focus.
 	&:focus-within:not( :has( :is( ${ Prefix }, ${ Suffix } ):focus-within ) ) {
-		z-index: 1;
-
 		${ BackdropUI } {
 			border-color: ${ COLORS.ui.borderFocus };
 			box-shadow: ${ CONFIG.controlBoxShadowFocus };
diff --git a/packages/components/src/input-control/test/index.js b/packages/components/src/input-control/test/index.js
index 4a2230bb664fe..ace3086c388c8 100644
--- a/packages/components/src/input-control/test/index.js
+++ b/packages/components/src/input-control/test/index.js
@@ -53,7 +53,7 @@ describe( 'InputControl', () => {
 			).toBeInTheDocument();
 		} );
 
-		it( 'should render help as aria-details when not plain text', () => {
+		it( 'should still render help as aria-describedby when not plain text', () => {
 			render( <InputControl help={ <a href="/foo">My help text</a> } /> );
 
 			const input = screen.getByRole( 'textbox' );
@@ -61,7 +61,7 @@ describe( 'InputControl', () => {
 
 			expect(
 				// eslint-disable-next-line testing-library/no-node-access
-				help.closest( `#${ input.getAttribute( 'aria-details' ) }` )
+				help.closest( `#${ input.getAttribute( 'aria-describedby' ) }` )
 			).toBeVisible();
 		} );
 	} );
diff --git a/packages/components/src/keyboard-shortcuts/stories/index.story.tsx b/packages/components/src/keyboard-shortcuts/stories/index.story.tsx
index d181be737353c..9e3a1e207451b 100644
--- a/packages/components/src/keyboard-shortcuts/stories/index.story.tsx
+++ b/packages/components/src/keyboard-shortcuts/stories/index.story.tsx
@@ -32,7 +32,9 @@ Default.args = {
 	},
 	children: (
 		<div>
-			<p>{ `Hit the "a" or "b" key in this textarea:` }</p>
+			{ /* eslint-disable react/no-unescaped-entities */ }
+			<p>Hit the "a" or "b" key in this textarea:</p>
+			{ /* eslint-enable react/no-unescaped-entities */ }
 			<textarea />
 		</div>
 	),
diff --git a/packages/components/src/menu-group/index.tsx b/packages/components/src/menu-group/index.tsx
index 0093892896950..4148db8f36955 100644
--- a/packages/components/src/menu-group/index.tsx
+++ b/packages/components/src/menu-group/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -38,7 +38,7 @@ export function MenuGroup( props: MenuGroupProps ) {
 	}
 
 	const labelId = `components-menu-group-label-${ instanceId }`;
-	const classNames = classnames( className, 'components-menu-group', {
+	const classNames = clsx( className, 'components-menu-group', {
 		'has-hidden-separator': hideSeparator,
 	} );
 
diff --git a/packages/components/src/menu-group/stories/index.story.tsx b/packages/components/src/menu-group/stories/index.story.tsx
index 80cdae3dab600..7cb9004b45a8c 100644
--- a/packages/components/src/menu-group/stories/index.story.tsx
+++ b/packages/components/src/menu-group/stories/index.story.tsx
@@ -54,7 +54,7 @@ const MultiGroupsTemplate: StoryFn< typeof MenuGroup > = ( args ) => {
 
 	return (
 		<>
-			<MenuGroup label={ 'View' }>
+			<MenuGroup label="View">
 				<MenuItem>Top Toolbar</MenuItem>
 				<MenuItem>Spotlight Mode</MenuItem>
 				<MenuItem>Distraction Free</MenuItem>
diff --git a/packages/components/src/menu-item/index.tsx b/packages/components/src/menu-item/index.tsx
index 644d5bff2b023..cb746becdbb1b 100644
--- a/packages/components/src/menu-item/index.tsx
+++ b/packages/components/src/menu-item/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -35,7 +35,7 @@ function UnforwardedMenuItem(
 		...buttonProps
 	} = props;
 
-	className = classnames( 'components-menu-item__button', className );
+	className = clsx( 'components-menu-item__button', className );
 
 	if ( info ) {
 		children = (
@@ -48,7 +48,7 @@ function UnforwardedMenuItem(
 
 	if ( icon && typeof icon !== 'string' ) {
 		icon = cloneElement( icon, {
-			className: classnames( 'components-menu-items__item-icon', {
+			className: clsx( 'components-menu-items__item-icon', {
 				'has-icon-right': iconPosition === 'right',
 			} ),
 		} );
diff --git a/packages/components/src/mobile/autocompletion-items.native.js b/packages/components/src/mobile/autocompletion-items.native.js
index 320dc6758ba5d..9d010dc3a144e 100644
--- a/packages/components/src/mobile/autocompletion-items.native.js
+++ b/packages/components/src/mobile/autocompletion-items.native.js
@@ -1,7 +1,7 @@
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { createSlotFill } from '@wordpress/components';
+import { createSlotFill } from '../slot-fill';
 
 const { Fill, Slot } = createSlotFill( '__unstableAutocompletionItemsSlot' );
 
diff --git a/packages/components/src/mobile/bottom-sheet-select-control/index.native.js b/packages/components/src/mobile/bottom-sheet-select-control/index.native.js
index 8c3a29b85453d..89c157d85b9b2 100644
--- a/packages/components/src/mobile/bottom-sheet-select-control/index.native.js
+++ b/packages/components/src/mobile/bottom-sheet-select-control/index.native.js
@@ -10,11 +10,12 @@ import { useNavigation } from '@react-navigation/native';
 import { useState } from '@wordpress/element';
 import { Icon, chevronRight, check } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
-import { BottomSheet } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
+import BottomSheet from '../bottom-sheet';
 
 const EMPTY_OPTION = {
 	label: '',
@@ -61,7 +62,7 @@ const BottomSheetSelectControl = ( {
 					icon={ icon }
 					value={ selectedOption.label }
 					onPress={ openSubSheet }
-					accessibilityRole={ 'button' }
+					accessibilityRole="button"
 					accessibilityLabel={ sprintf(
 						// translators:  %1$s: Select control button label e.g. "Button width". %2$s: Select control option value e.g: "Auto, 25%".
 						__( '%1$s. Currently selected: %2$s' ),
@@ -97,7 +98,7 @@ const BottomSheetSelectControl = ( {
 							onPress={ onChangeValue( item.value ) }
 							leftAlign
 							key={ index }
-							accessibilityRole={ 'button' }
+							accessibilityRole="button"
 							accessibilityLabel={
 								item.value === selectedValue
 									? sprintf(
diff --git a/packages/components/src/mobile/bottom-sheet-text-control/index.native.js b/packages/components/src/mobile/bottom-sheet-text-control/index.native.js
index a66d3648afdcb..430981f8f9695 100644
--- a/packages/components/src/mobile/bottom-sheet-text-control/index.native.js
+++ b/packages/components/src/mobile/bottom-sheet-text-control/index.native.js
@@ -10,16 +10,14 @@ import { useNavigation } from '@react-navigation/native';
 import { useState } from '@wordpress/element';
 import { Icon, chevronRight } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import {
-	BottomSheet,
-	PanelBody,
-	FooterMessageControl,
-} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
+import BottomSheet from '../bottom-sheet';
+import PanelBody from '../../panel/body';
+import FooterMessageControl from '../../footer-message-control';
 
 const BottomSheetTextControl = ( {
 	initialValue,
@@ -84,9 +82,9 @@ const BottomSheetTextControl = ( {
 						defaultValue={ initialValue }
 						multiline
 						placeholder={ placeholder }
-						placeholderTextColor={ '#87a6bc' }
+						placeholderTextColor="#87a6bc"
 						style={ textEditorStyle }
-						textAlignVertical={ 'top' }
+						textAlignVertical="top"
 					/>
 				</PanelBody>
 			</>
diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js
index bde7c2c67ee52..353f145427a65 100644
--- a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js
+++ b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js
@@ -16,13 +16,14 @@ import {
 /**
  * WordPress dependencies
  */
-import { BottomSheetContext } from '@wordpress/components';
+
 import { useRef, useCallback, useContext, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { BottomSheetNavigationContext } from './bottom-sheet-navigation-context';
+import { BottomSheetContext } from '../bottom-sheet-context';
 import styles from './styles.scss';
 
 const BottomSheetNavigationScreen = ( {
diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js
index 30f061dc5c14b..6618566837cfc 100644
--- a/packages/components/src/mobile/bottom-sheet/cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/cell.native.js
@@ -14,7 +14,6 @@ import {
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
 import { check } from '@wordpress/icons';
 import { Component } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -27,6 +26,7 @@ import styles from './styles.scss';
 import platformStyles from './cellStyles.scss';
 import TouchableRipple from './ripple';
 import LockIcon from './lock-icon';
+import Icon from '../../icon';
 
 const isIOS = Platform.OS === 'ios';
 class BottomSheetCell extends Component {
@@ -272,7 +272,7 @@ class BottomSheetCell extends Component {
 				<Text
 					style={ textStyle }
 					numberOfLines={ 1 }
-					ellipsizeMode={ 'middle' }
+					ellipsizeMode="middle"
 				>
 					{ value }
 				</Text>
@@ -419,7 +419,7 @@ class BottomSheetCell extends Component {
 						{ customActionButton && (
 							<TouchableOpacity
 								onPress={ handler }
-								accessibilityRole={ 'button' }
+								accessibilityRole="button"
 							>
 								<Text style={ resetButtonStyle }>
 									{ title }
diff --git a/packages/components/src/mobile/bottom-sheet/color-cell.native.js b/packages/components/src/mobile/bottom-sheet/color-cell.native.js
index 76cdc56930805..a03b968e3b03e 100644
--- a/packages/components/src/mobile/bottom-sheet/color-cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/color-cell.native.js
@@ -3,12 +3,13 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Icon, chevronRight } from '@wordpress/icons';
-import { ColorIndicator } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
 import Cell from './cell';
 import styles from './styles.scss';
+import ColorIndicator from '../../color-indicator';
 
 export default function BottomSheetColorCell( props ) {
 	const { color, withColorIndicator = true, disabled, ...cellProps } = props;
@@ -16,7 +17,7 @@ export default function BottomSheetColorCell( props ) {
 	return (
 		<Cell
 			{ ...cellProps }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 			accessibilityHint={
 				/* translators: accessibility text (hint for moving to color settings) */
 				__( 'Double tap to go to color settings' )
diff --git a/packages/components/src/mobile/bottom-sheet/footer-message-cell.native.js b/packages/components/src/mobile/bottom-sheet/footer-message-cell.native.js
index 343363a2b07fe..17001242b30a2 100644
--- a/packages/components/src/mobile/bottom-sheet/footer-message-cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/footer-message-cell.native.js
@@ -13,8 +13,8 @@ function FooterMessageCell( { textAlign = 'left', ...props } ) {
 		<Cell
 			{ ...props }
 			editable={ false }
-			value={ '' }
-			accessibilityRole={ 'text' }
+			value=""
+			accessibilityRole="text"
 			labelStyle={ [ styles.footerMessageCell, { textAlign } ] }
 		/>
 	);
diff --git a/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js b/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js
index f183f8f291b5b..46029a7585f54 100644
--- a/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js
@@ -64,7 +64,7 @@ function LinkSuggestionItemCell( { suggestion, onLinkPicked, ...props } ) {
 			{ ...props }
 			icon={ icons[ type ] || empty }
 			onPress={ pickLink }
-			separatorType={ 'none' }
+			separatorType="none"
 			cellContainerStyle={ suggestionStyles.itemContainerStyle }
 			labelStyle={ suggestionStyles.hidden }
 			valueStyle={ suggestionStyles.hidden }
@@ -73,14 +73,14 @@ function LinkSuggestionItemCell( { suggestion, onLinkPicked, ...props } ) {
 				<Text
 					style={ titleStyle }
 					numberOfLines={ 1 }
-					ellipsizeMode={ 'middle' }
+					ellipsizeMode="middle"
 				>
 					{ title }
 				</Text>
 				<Text
 					style={ summaryStyle }
 					numberOfLines={ 1 }
-					ellipsizeMode={ 'middle' }
+					ellipsizeMode="middle"
 				>
 					{ summary }
 				</Text>
diff --git a/packages/components/src/mobile/bottom-sheet/nav-bar/action-button.native.js b/packages/components/src/mobile/bottom-sheet/nav-bar/action-button.native.js
index 6b11f30959fe5..6a13bca18e9ef 100644
--- a/packages/components/src/mobile/bottom-sheet/nav-bar/action-button.native.js
+++ b/packages/components/src/mobile/bottom-sheet/nav-bar/action-button.native.js
@@ -18,7 +18,7 @@ function ActionButton( {
 	return (
 		<TouchableWithoutFeedback
 			onPress={ onPress }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 			accessibilityLabel={ accessibilityLabel }
 			accessibilityHint={ accessibilityHint }
 		>
diff --git a/packages/components/src/mobile/bottom-sheet/radio-cell.native.js b/packages/components/src/mobile/bottom-sheet/radio-cell.native.js
index 2700cb0f92388..c2b5df004d5c3 100644
--- a/packages/components/src/mobile/bottom-sheet/radio-cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/radio-cell.native.js
@@ -21,14 +21,14 @@ export default function BottomSheetRadioCell( props ) {
 	return (
 		<Cell
 			{ ...cellProps }
-			accessibilityRole={ 'radio' }
+			accessibilityRole="radio"
 			accessibilityState={ { selected } }
 			accessibilityHint={
 				/* translators: accessibility text (hint for selecting option) */
 				__( 'Double tap to select the option' )
 			}
 			editable={ false }
-			value={ '' }
+			value=""
 			showLockIcon={ selected }
 		>
 			{ selected && (
diff --git a/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.android.js b/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.android.js
index 37f72425640fe..ce0fbba03eae8 100644
--- a/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.android.js
+++ b/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.android.js
@@ -56,7 +56,7 @@ function Stepper( {
 			) }
 			{ children }
 			<TouchableOpacity
-				testID={ 'Increment' }
+				testID="Increment"
 				disabled={ isMaxValue }
 				onPressIn={ onPressInIncrement }
 				onPressOut={ onPressOut }
diff --git a/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js b/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js
index fa2318a9fd728..3cd25ab6b7bd6 100644
--- a/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js
+++ b/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js
@@ -49,7 +49,7 @@ function Stepper( {
 				<Icon icon={ reset } size={ 24 } color={ buttonStyle.color } />
 			</TouchableOpacity>
 			<TouchableOpacity
-				testID={ 'Increment' }
+				testID="Increment"
 				disabled={ isMaxValue }
 				onPressIn={ onPressInIncrement }
 				onPressOut={ onPressOut }
diff --git a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js
index 64e3f609d167c..d46b10cfb560f 100644
--- a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js
+++ b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js
@@ -7,7 +7,12 @@ import { SafeAreaView } from 'react-native';
  * WordPress dependencies
  */
 import { Children, useEffect, useContext } from '@wordpress/element';
-import { createSlotFill, BottomSheetContext } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { BottomSheetContext } from '../bottom-sheet-context';
+import { createSlotFill } from '../../../slot-fill';
 
 const { Fill, Slot } = createSlotFill( 'BottomSheetSubSheet' );
 
diff --git a/packages/components/src/mobile/bottom-sheet/switch-cell.native.js b/packages/components/src/mobile/bottom-sheet/switch-cell.native.js
index f16bb0d7b237a..3e00756b1a7dc 100644
--- a/packages/components/src/mobile/bottom-sheet/switch-cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/switch-cell.native.js
@@ -54,14 +54,14 @@ export default function BottomSheetSwitchCell( props ) {
 		<Cell
 			{ ...cellProps }
 			accessibilityLabel={ getAccessibilityLabel() }
-			accessibilityRole={ 'none' }
+			accessibilityRole="none"
 			accessibilityHint={
 				/* translators: accessibility text (hint for switches) */
 				__( 'Double tap to toggle setting' )
 			}
 			onPress={ onPress }
 			editable={ false }
-			value={ '' }
+			value=""
 			disabled={ disabled }
 			disabledStyle={ EMPTY_STYLE }
 		>
diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js
index 171c4a011a7fe..10cf776ed808c 100644
--- a/packages/components/src/mobile/color-settings/index.native.js
+++ b/packages/components/src/mobile/color-settings/index.native.js
@@ -7,7 +7,6 @@ import { useRoute } from '@react-navigation/native';
  * WordPress dependencies
  */
 import { memo, useEffect, useContext } from '@wordpress/element';
-import { BottomSheetContext, BottomSheet } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -15,6 +14,8 @@ import { BottomSheetContext, BottomSheet } from '@wordpress/components';
 import PickerScreen from './picker-screen';
 import GradientPickerScreen from './gradient-picker-screen';
 import PaletteScreen from './palette.screen';
+import BottomSheet from '../bottom-sheet';
+import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
 
 import { colorsUtils } from './utils';
 
diff --git a/packages/components/src/mobile/color-settings/palette.screen.native.js b/packages/components/src/mobile/color-settings/palette.screen.native.js
index 1ec9421e87da5..a780a4295dfba 100644
--- a/packages/components/src/mobile/color-settings/palette.screen.native.js
+++ b/packages/components/src/mobile/color-settings/palette.screen.native.js
@@ -9,12 +9,6 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native';
 import { __ } from '@wordpress/i18n';
 import { useState, useContext } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import {
-	ColorControl,
-	PanelBody,
-	BottomSheetContext,
-	useMobileGlobalStylesColors,
-} from '@wordpress/components';
 import { useRoute, useNavigation } from '@react-navigation/native';
 
 /**
@@ -25,6 +19,9 @@ import ColorIndicator from '../../color-indicator';
 import NavBar from '../bottom-sheet/nav-bar';
 import SegmentedControls from '../segmented-control';
 import { colorsUtils } from './utils';
+import PanelBody from '../../panel/body';
+import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
+import ColorControl from '../../color-control';
 
 import styles from './style.scss';
 
@@ -55,7 +52,7 @@ const PaletteScreen = () => {
 	const currentSegmentColors = ! isGradientSegment
 		? defaultSettings.colors
 		: defaultSettings.gradients;
-	const allAvailableColors = useMobileGlobalStylesColors();
+	const allAvailableColors = defaultSettings?.allAvailableColors || [];
 	const allAvailableGradients = currentSegmentColors
 		.flatMap( ( { gradients } ) => gradients )
 		.filter( Boolean );
diff --git a/packages/components/src/mobile/color-settings/picker-screen.native.js b/packages/components/src/mobile/color-settings/picker-screen.native.js
index f8626a67338a4..2d505621f6eda 100644
--- a/packages/components/src/mobile/color-settings/picker-screen.native.js
+++ b/packages/components/src/mobile/color-settings/picker-screen.native.js
@@ -7,12 +7,12 @@ import { useRoute, useNavigation } from '@react-navigation/native';
  * WordPress dependencies
  */
 import { useContext, useMemo } from '@wordpress/element';
-import { BottomSheetContext } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { ColorPicker } from '../../color-picker';
+import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
 
 const PickerScreen = () => {
 	const route = useRoute();
diff --git a/packages/components/src/mobile/color-settings/utils.native.js b/packages/components/src/mobile/color-settings/utils.native.js
index c18a6503e5973..87ad346c8ec3a 100644
--- a/packages/components/src/mobile/color-settings/utils.native.js
+++ b/packages/components/src/mobile/color-settings/utils.native.js
@@ -28,7 +28,7 @@ export const colorsUtils = {
 		picker: 'Picker',
 		palette: 'Palette',
 	},
-	segments: [ __( 'Solid' ), __( 'Gradient' ) ],
+	segments: [ __( 'Color' ), __( 'Gradient' ) ],
 	gradients,
 	gradientOptions,
 	getGradientType,
diff --git a/packages/components/src/mobile/focal-point-settings-panel/index.native.js b/packages/components/src/mobile/focal-point-settings-panel/index.native.js
index c9b87a4793cdb..0aefdc6188c22 100644
--- a/packages/components/src/mobile/focal-point-settings-panel/index.native.js
+++ b/packages/components/src/mobile/focal-point-settings-panel/index.native.js
@@ -9,13 +9,14 @@ import { useRoute, useNavigation } from '@react-navigation/native';
  */
 import { __ } from '@wordpress/i18n';
 import { memo, useContext, useState, useCallback } from '@wordpress/element';
-import { BottomSheetContext, FocalPointPicker } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import NavBar from '../bottom-sheet/nav-bar';
 import styles from './styles.scss';
+import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
+import FocalPointPicker from '../../focal-point-picker';
 
 const FocalPointSettingsPanelMemo = memo(
 	( {
diff --git a/packages/components/src/mobile/global-styles-context/index.native.js b/packages/components/src/mobile/global-styles-context/index.native.js
deleted file mode 100644
index cc9f6baf93348..0000000000000
--- a/packages/components/src/mobile/global-styles-context/index.native.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import {
-	BLOCK_STYLE_ATTRIBUTES,
-	getBlockPaddings,
-	getBlockColors,
-	getBlockTypography,
-} from './utils';
-
-const GlobalStylesContext = createContext( { style: {} } );
-
-GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES = BLOCK_STYLE_ATTRIBUTES;
-
-export const getMergedGlobalStyles = (
-	baseGlobalStyles,
-	globalStyle,
-	wrapperPropsStyle,
-	blockAttributes,
-	defaultColors,
-	blockName,
-	fontSizes
-) => {
-	// Current support for general styles and blocks.
-	const baseGlobalColors = {
-		baseColors: {
-			color: baseGlobalStyles?.color,
-			typography: baseGlobalStyles?.typography,
-			elements: {
-				link: baseGlobalStyles?.elements?.link,
-			},
-			blocks: {
-				'core/button': baseGlobalStyles?.blocks?.[ 'core/button' ],
-			},
-		},
-	};
-
-	const blockStyleAttributes = Object.fromEntries(
-		Object.entries( blockAttributes ?? {} ).filter( ( [ key ] ) =>
-			BLOCK_STYLE_ATTRIBUTES.includes( key )
-		)
-	);
-
-	// This prevents certain wrapper styles from being applied to blocks that
-	// don't support them yet.
-	const wrapperPropsStyleFiltered = Object.fromEntries(
-		Object.entries( wrapperPropsStyle ?? {} ).filter( ( [ key ] ) =>
-			BLOCK_STYLE_ATTRIBUTES.includes( key )
-		)
-	);
-
-	const mergedStyle = {
-		...baseGlobalColors,
-		...globalStyle,
-		...wrapperPropsStyleFiltered,
-	};
-	const blockColors = getBlockColors(
-		blockStyleAttributes,
-		defaultColors,
-		blockName,
-		baseGlobalStyles
-	);
-	const blockPaddings = getBlockPaddings(
-		mergedStyle,
-		wrapperPropsStyle,
-		blockStyleAttributes,
-		blockColors
-	);
-	const blockTypography = getBlockTypography(
-		blockStyleAttributes,
-		fontSizes,
-		blockName,
-		baseGlobalStyles
-	);
-
-	return {
-		...mergedStyle,
-		...blockPaddings,
-		...blockColors,
-		...blockTypography,
-	};
-};
-
-export const useGlobalStyles = () => {
-	const globalStyles = useContext( GlobalStylesContext );
-
-	return globalStyles;
-};
-
-export const withGlobalStyles = ( WrappedComponent ) => ( props ) => (
-	<GlobalStylesContext.Consumer>
-		{ ( globalStyles ) => (
-			<WrappedComponent { ...props } globalStyles={ globalStyles } />
-		) }
-	</GlobalStylesContext.Consumer>
-);
-
-export default GlobalStylesContext;
diff --git a/packages/components/src/mobile/global-styles-context/test/utils.native.js b/packages/components/src/mobile/global-styles-context/test/utils.native.js
deleted file mode 100644
index 6144b9a13ae89..0000000000000
--- a/packages/components/src/mobile/global-styles-context/test/utils.native.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	getBlockPaddings,
-	getBlockColors,
-	parseStylesVariables,
-	getGlobalStyles,
-} from '../utils';
-
-import {
-	DEFAULT_COLORS,
-	GLOBAL_STYLES_GRADIENTS,
-	DEFAULT_GLOBAL_STYLES,
-	PARSED_GLOBAL_STYLES,
-	RAW_FEATURES,
-	MAPPED_VALUES,
-} from './fixtures/theme';
-
-describe( 'getBlockPaddings', () => {
-	const PADDING = 12;
-
-	it( 'returns no paddings for a block without background color', () => {
-		const paddings = getBlockPaddings(
-			{ color: 'red' },
-			{ backgroundColor: 'red' },
-			{ textColor: 'primary' }
-		);
-		expect( paddings ).toEqual( expect.objectContaining( {} ) );
-	} );
-
-	it( 'returns paddings for a block with background color', () => {
-		const paddings = getBlockPaddings(
-			{ color: 'red' },
-			{},
-			{ backgroundColor: 'red', textColor: 'primary' }
-		);
-		expect( paddings ).toEqual(
-			expect.objectContaining( { padding: PADDING } )
-		);
-	} );
-
-	it( 'returns no paddings for an inner block without background color within a parent block with background color', () => {
-		const paddings = getBlockPaddings(
-			{ backgroundColor: 'blue', color: 'yellow', padding: PADDING },
-			{},
-			{ textColor: 'primary' }
-		);
-
-		expect( paddings ).toEqual(
-			expect.not.objectContaining( { padding: PADDING } )
-		);
-	} );
-} );
-
-describe( 'getBlockColors', () => {
-	it( 'returns the theme colors correctly', () => {
-		const blockColors = getBlockColors(
-			{ backgroundColor: 'accent', textColor: 'secondary' },
-			DEFAULT_COLORS
-		);
-		expect( blockColors ).toEqual(
-			expect.objectContaining( {
-				backgroundColor: '#cd2653',
-				color: '#6d6d6d',
-			} )
-		);
-	} );
-
-	it( 'returns custom background color correctly', () => {
-		const blockColors = getBlockColors(
-			{ backgroundColor: '#222222', textColor: 'accent' },
-			DEFAULT_COLORS
-		);
-		expect( blockColors ).toEqual(
-			expect.objectContaining( {
-				backgroundColor: '#222222',
-				color: '#cd2653',
-			} )
-		);
-	} );
-
-	it( 'returns custom text color correctly', () => {
-		const blockColors = getBlockColors(
-			{ textColor: '#4ddddd' },
-			DEFAULT_COLORS
-		);
-		expect( blockColors ).toEqual(
-			expect.objectContaining( {
-				color: '#4ddddd',
-			} )
-		);
-	} );
-} );
-
-describe( 'parseStylesVariables', () => {
-	it( 'returns the parsed preset values correctly', () => {
-		const customValues = parseStylesVariables(
-			JSON.stringify( RAW_FEATURES.custom ),
-			MAPPED_VALUES
-		);
-		const blockColors = parseStylesVariables(
-			JSON.stringify( DEFAULT_GLOBAL_STYLES ),
-			MAPPED_VALUES,
-			customValues
-		);
-		expect( blockColors ).toEqual(
-			expect.objectContaining( PARSED_GLOBAL_STYLES )
-		);
-	} );
-
-	it( 'returns the parsed custom color values correctly', () => {
-		const defaultStyles = {
-			...DEFAULT_GLOBAL_STYLES,
-			color: {
-				text: 'var(--wp--custom--color--blue)',
-				background: 'var(--wp--custom--color--green)',
-			},
-		};
-		const customValues = parseStylesVariables(
-			JSON.stringify( RAW_FEATURES.custom ),
-			MAPPED_VALUES
-		);
-		const styles = parseStylesVariables(
-			JSON.stringify( defaultStyles ),
-			MAPPED_VALUES,
-			customValues
-		);
-		expect( styles ).toEqual(
-			expect.objectContaining( PARSED_GLOBAL_STYLES )
-		);
-	} );
-} );
-
-describe( 'getGlobalStyles', () => {
-	it( 'returns the global styles data correctly', () => {
-		const rawFeatures = JSON.stringify( RAW_FEATURES );
-		const gradients = parseStylesVariables(
-			JSON.stringify( GLOBAL_STYLES_GRADIENTS ),
-			MAPPED_VALUES
-		);
-
-		const globalStyles = getGlobalStyles(
-			JSON.stringify( DEFAULT_GLOBAL_STYLES ),
-			rawFeatures
-		);
-
-		expect( globalStyles ).toEqual(
-			expect.objectContaining( {
-				__experimentalFeatures: {
-					color: {
-						palette: RAW_FEATURES.color.palette,
-						gradients,
-						text: true,
-						background: true,
-						defaultPalette: true,
-						defaultGradients: true,
-					},
-					typography: {
-						fontSizes: RAW_FEATURES.typography.fontSizes,
-						customLineHeight: RAW_FEATURES.custom[ 'line-height' ],
-					},
-				},
-				__experimentalGlobalStylesBaseStyles: PARSED_GLOBAL_STYLES,
-			} )
-		);
-	} );
-} );
diff --git a/packages/components/src/mobile/gradient/index.native.js b/packages/components/src/mobile/gradient/index.native.js
index 830ea97253b47..47e96558ce3fe 100644
--- a/packages/components/src/mobile/gradient/index.native.js
+++ b/packages/components/src/mobile/gradient/index.native.js
@@ -7,7 +7,6 @@ import gradientParser from 'gradient-parser';
 /**
  * WordPress dependencies
  */
-import { colorsUtils } from '@wordpress/components';
 import { RadialGradient, Stop, SVG, Defs, Rect } from '@wordpress/primitives';
 import { useResizeObserver } from '@wordpress/compose';
 import { useMemo } from '@wordpress/element';
@@ -16,6 +15,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import styles from './style.scss';
+import { colorsUtils } from '../color-settings/utils';
 
 export function getGradientAngle( gradientValue ) {
 	const angleBase = 45;
diff --git a/packages/components/src/mobile/image/icon-customize.native.js b/packages/components/src/mobile/image/icon-customize.native.js
index 57fc39c7c29f1..0f33638041688 100644
--- a/packages/components/src/mobile/image/icon-customize.native.js
+++ b/packages/components/src/mobile/image/icon-customize.native.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Path, SVG } from '@wordpress/components';
+import { SVG, Path } from '@wordpress/primitives';
 
 export default (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
diff --git a/packages/components/src/mobile/image/icon-retry.native.js b/packages/components/src/mobile/image/icon-retry.native.js
index 580cd1fff188f..1ac6c714b3f6e 100644
--- a/packages/components/src/mobile/image/icon-retry.native.js
+++ b/packages/components/src/mobile/image/icon-retry.native.js
@@ -1,11 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { Path, SVG } from '@wordpress/components';
+import { SVG, Path } from '@wordpress/primitives';
 
 export default (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
-		<Path d="M0 0h24v24H0z" fill={ 'none' } />
+		<Path d="M0 0h24v24H0z" fill="none" />
 	</SVG>
 );
diff --git a/packages/components/src/mobile/image/image-editing-button.native.js b/packages/components/src/mobile/image/image-editing-button.native.js
index fccc4fa2bfe33..b3dfd546b6364 100644
--- a/packages/components/src/mobile/image/image-editing-button.native.js
+++ b/packages/components/src/mobile/image/image-editing-button.native.js
@@ -6,7 +6,6 @@ import { TouchableWithoutFeedback, View, Platform } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -15,6 +14,7 @@ import { __ } from '@wordpress/i18n';
 import { MediaEdit } from '../media-edit';
 import SvgIconCustomize from './icon-customize';
 import styles from './style.scss';
+import Icon from '../../icon';
 
 const accessibilityHint =
 	Platform.OS === 'ios'
@@ -40,7 +40,7 @@ const ImageEditingButton = ( {
 				<TouchableWithoutFeedback
 					accessibilityHint={ accessibilityHint }
 					accessibilityLabel={ __( 'Edit image' ) }
-					accessibilityRole={ 'button' }
+					accessibilityRole="button"
 					onPress={ open }
 				>
 					<View style={ styles.editContainer }>
diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js
index c3e010c40c3b8..9f8673b7bdcdf 100644
--- a/packages/components/src/mobile/image/index.native.js
+++ b/packages/components/src/mobile/image/index.native.js
@@ -8,7 +8,6 @@ import FastImage from 'react-native-fast-image';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Icon } from '@wordpress/components';
 import { image, offline } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { useEffect, useState, Platform } from '@wordpress/element';
@@ -20,6 +19,7 @@ import { getImageWithFocalPointStyles } from './utils';
 import styles from './style.scss';
 import SvgIconRetry from './icon-retry';
 import ImageEditingButton from './image-editing-button';
+import Icon from '../../icon';
 
 const ICON_TYPE = {
 	OFFLINE: 'offline',
@@ -285,7 +285,7 @@ const ImageComponent = ( {
 				disabled={ ! isSelected }
 				accessibilityLabel={ alt }
 				accessibilityHint={ __( 'Double tap and hold to edit' ) }
-				accessibilityRole={ 'imagebutton' }
+				accessibilityRole="imagebutton"
 				key={ url }
 				style={ imageContainerStyles }
 			>
diff --git a/packages/components/src/mobile/link-picker/index.native.js b/packages/components/src/mobile/link-picker/index.native.js
index 404bbb1760c15..d6eb354287b9a 100644
--- a/packages/components/src/mobile/link-picker/index.native.js
+++ b/packages/components/src/mobile/link-picker/index.native.js
@@ -9,7 +9,6 @@ import Clipboard from '@react-native-clipboard/clipboard';
  */
 import { useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { BottomSheet, Icon } from '@wordpress/components';
 import { getProtocol, isURL, prependHTTP } from '@wordpress/url';
 import { link, cancelCircleFilled } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
@@ -20,6 +19,8 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import LinkPickerResults from './link-picker-results';
 import NavBar from '../bottom-sheet/nav-bar';
 import styles from './styles.scss';
+import BottomSheet from '../bottom-sheet';
+import Icon from '../../icon';
 
 // This creates a search suggestion for adding a url directly.
 export const createDirectEntry = ( value ) => {
diff --git a/packages/components/src/mobile/link-picker/link-picker-results.native.js b/packages/components/src/mobile/link-picker/link-picker-results.native.js
index c2d0b60f8a3df..1d411b97ff066 100644
--- a/packages/components/src/mobile/link-picker/link-picker-results.native.js
+++ b/packages/components/src/mobile/link-picker/link-picker-results.native.js
@@ -6,7 +6,6 @@ import { ActivityIndicator, FlatList, View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { BottomSheet, BottomSheetConsumer } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -15,6 +14,8 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import styles from './styles.scss';
+import BottomSheet from '../bottom-sheet';
+import { BottomSheetConsumer } from '../bottom-sheet/bottom-sheet-context';
 
 const PER_PAGE = 20;
 const REQUEST_DEBOUNCE_DELAY = 400;
diff --git a/packages/components/src/mobile/link-settings/link-rel.native.js b/packages/components/src/mobile/link-settings/link-rel.native.js
index bc8060ec405a8..041acb2b33aaa 100644
--- a/packages/components/src/mobile/link-settings/link-rel.native.js
+++ b/packages/components/src/mobile/link-settings/link-rel.native.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Path, SVG } from '@wordpress/components';
+import { Path, SVG } from '@wordpress/primitives';
 
 export default (
 	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
diff --git a/packages/components/src/mobile/media-edit/index.native.js b/packages/components/src/mobile/media-edit/index.native.js
index 5b81b7fb08bf1..08bedbb804a1a 100644
--- a/packages/components/src/mobile/media-edit/index.native.js
+++ b/packages/components/src/mobile/media-edit/index.native.js
@@ -3,12 +3,16 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Picker } from '@wordpress/components';
 import {
 	requestMediaEditor,
 	mediaSources,
 } from '@wordpress/react-native-bridge';
 
+/**
+ * Internal dependencies
+ */
+import Picker from '../picker';
+
 export const MEDIA_TYPE_IMAGE = 'image';
 
 export const MEDIA_EDITOR = 'MEDIA_EDITOR';
diff --git a/packages/components/src/mobile/picker/index.android.js b/packages/components/src/mobile/picker/index.android.js
index 0db2826ddb16c..06d2665f189c8 100644
--- a/packages/components/src/mobile/picker/index.android.js
+++ b/packages/components/src/mobile/picker/index.android.js
@@ -9,13 +9,14 @@ import { View } from 'react-native';
 import { __ } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { PanelBody, TextControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import BottomSheet from '../bottom-sheet';
 import styles from './styles.scss';
+import PanelBody from '../../panel/body';
+import TextControl from '../../text-control';
 
 function Separator() {
 	const separatorStyle = usePreferredColorSchemeStyle(
@@ -61,7 +62,7 @@ export default class Picker extends Component {
 					icon={ option.icon }
 					leftAlign={ leftAlign }
 					label={ option.label }
-					separatorType={ 'none' }
+					separatorType="none"
 					onPress={ () => this.onCellPress( option.value ) }
 					disabled={ option.disabled }
 					style={
@@ -93,7 +94,7 @@ export default class Picker extends Component {
 						<TextControl
 							label={ __( 'Cancel' ) }
 							onPress={ this.onClose }
-							separatorType={ 'none' }
+							separatorType="none"
 						/>
 					) }
 				</PanelBody>
diff --git a/packages/components/src/mobile/picker/index.ios.js b/packages/components/src/mobile/picker/index.ios.js
index dac31ded159be..a6f98465e7e49 100644
--- a/packages/components/src/mobile/picker/index.ios.js
+++ b/packages/components/src/mobile/picker/index.ios.js
@@ -9,13 +9,13 @@ import { ActionSheetIOS } from 'react-native';
 import { __ } from '@wordpress/i18n';
 import { Component, forwardRef, useContext } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { BottomSheetContext } from '@wordpress/components';
 import { usePreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
+import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
 
 class Picker extends Component {
 	presentPicker() {
diff --git a/packages/components/src/mobile/segmented-control/index.native.js b/packages/components/src/mobile/segmented-control/index.native.js
index d76a42d6d8c3b..49d46b8cd08be 100644
--- a/packages/components/src/mobile/segmented-control/index.native.js
+++ b/packages/components/src/mobile/segmented-control/index.native.js
@@ -173,7 +173,7 @@ const SegmentedControls = ( {
 							accessibilityState={ {
 								selected: activeSegmentIndex === index,
 							} }
-							accessibilityRole={ 'button' }
+							accessibilityRole="button"
 							accessibilityLabel={ segment }
 							accessibilityHint={ `${ index + 1 } on ${
 								segments.length
diff --git a/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js b/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js
index 11d54f954215d..891f11f502ebf 100644
--- a/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js
+++ b/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js
@@ -6,18 +6,7 @@ import { Dimensions } from 'react-native';
 /**
  * WordPress dependencies
  */
-import {
-	useContext,
-	useEffect,
-	useState,
-	useMemo,
-	useCallback,
-} from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import GlobalStylesContext from '../global-styles-context';
+import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
 
 const getValueAndUnit = ( value, unit ) => {
 	const regex = /(\d+\.?\d*)(.*)/;
@@ -63,8 +52,7 @@ const convertUnitToMobile = ( containerSize, globalStyles, value, unit ) => {
 	}
 };
 
-const useConvertUnitToMobile = ( value, unit ) => {
-	const { globalStyles: styles } = useContext( GlobalStylesContext );
+const useConvertUnitToMobile = ( value, unit, styles ) => {
 	const [ windowSizes, setWindowSizes ] = useState(
 		Dimensions.get( 'window' )
 	);
diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index c505ce210fa5c..42ba2d78db57a 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type {
 	ForwardedRef,
 	KeyboardEvent,
@@ -255,7 +255,7 @@ function UnforwardedModal(
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
 			ref={ useMergeRefs( [ ref, forwardedRef ] ) }
-			className={ classnames(
+			className={ clsx(
 				'components-modal__screen-overlay',
 				overlayClassName
 			) }
@@ -264,7 +264,7 @@ function UnforwardedModal(
 		>
 			<StyleProvider document={ document }>
 				<div
-					className={ classnames(
+					className={ clsx(
 						'components-modal__frame',
 						sizeClass,
 						className
@@ -285,7 +285,7 @@ function UnforwardedModal(
 					onKeyDown={ onKeyDown }
 				>
 					<div
-						className={ classnames( 'components-modal__content', {
+						className={ clsx( 'components-modal__content', {
 							'hide-header': __experimentalHideHeader,
 							'is-scrollable': hasScrollableContent,
 							'has-scrolled-content': hasScrolledContent,
diff --git a/packages/components/src/navigation/back-button/index.tsx b/packages/components/src/navigation/back-button/index.tsx
index f1fb79ae40d48..077e5a8dbdc6d 100644
--- a/packages/components/src/navigation/back-button/index.tsx
+++ b/packages/components/src/navigation/back-button/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -29,10 +29,7 @@ function UnforwardedNavigationBackButton(
 ) {
 	const { setActiveMenu, navigationTree } = useNavigationContext();
 
-	const classes = classnames(
-		'components-navigation__back-button',
-		className
-	);
+	const classes = clsx( 'components-navigation__back-button', className );
 
 	const parentMenuTitle =
 		parentMenu !== undefined
diff --git a/packages/components/src/navigation/group/index.tsx b/packages/components/src/navigation/group/index.tsx
index 60febcf764456..f1871f67cace3 100644
--- a/packages/components/src/navigation/group/index.tsx
+++ b/packages/components/src/navigation/group/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -48,7 +48,7 @@ export function NavigationGroup( {
 	}
 
 	const groupTitleId = `components-navigation__group-title-${ groupId }`;
-	const classes = classnames( 'components-navigation__group', className );
+	const classes = clsx( 'components-navigation__group', className );
 
 	return (
 		<NavigationGroupContext.Provider value={ context }>
diff --git a/packages/components/src/navigation/index.tsx b/packages/components/src/navigation/index.tsx
index 9ccd4f46e5f18..b1c12f59e27a9 100644
--- a/packages/components/src/navigation/index.tsx
+++ b/packages/components/src/navigation/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -116,7 +116,7 @@ export function Navigation( {
 		navigationTree,
 	};
 
-	const classes = classnames( 'components-navigation', className );
+	const classes = clsx( 'components-navigation', className );
 	const animateClassName = getAnimateClassName( {
 		type: 'slide-in',
 		origin: slideOrigin,
@@ -128,7 +128,7 @@ export function Navigation( {
 				key={ menu }
 				className={
 					animateClassName
-						? classnames( {
+						? clsx( {
 								[ animateClassName ]:
 									isMounted.current && slideOrigin,
 						  } )
diff --git a/packages/components/src/navigation/item/base.tsx b/packages/components/src/navigation/item/base.tsx
index e5d106bf71c1a..de4dfaba88c1a 100644
--- a/packages/components/src/navigation/item/base.tsx
+++ b/packages/components/src/navigation/item/base.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ export default function NavigationItemBase( props: NavigationItemBaseProps ) {
 		return null;
 	}
 
-	const classes = classnames( 'components-navigation__item', className );
+	const classes = clsx( 'components-navigation__item', className );
 
 	return (
 		<ItemBaseUI className={ classes } { ...restProps }>
diff --git a/packages/components/src/navigation/item/index.tsx b/packages/components/src/navigation/item/index.tsx
index d234ed1a549b5..4f4cc2a5dc7a2 100644
--- a/packages/components/src/navigation/item/index.tsx
+++ b/packages/components/src/navigation/item/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -60,7 +60,7 @@ export function NavigationItem( props: NavigationItemProps ) {
 
 	const isActive = item && activeItem === item;
 
-	const classes = classnames( className, {
+	const classes = clsx( className, {
 		'is-active': isActive,
 	} );
 
diff --git a/packages/components/src/navigation/menu/index.tsx b/packages/components/src/navigation/menu/index.tsx
index 8fcddf3faddb9..2a2cb20da0e9c 100644
--- a/packages/components/src/navigation/menu/index.tsx
+++ b/packages/components/src/navigation/menu/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -66,7 +66,7 @@ export function NavigationMenu( props: NavigationMenuProps ) {
 		: setUncontrolledSearch;
 
 	const menuTitleId = `components-navigation__menu-title-${ menu }`;
-	const classes = classnames( 'components-navigation__menu', className );
+	const classes = clsx( 'components-navigation__menu', className );
 
 	return (
 		<NavigationMenuContext.Provider value={ context }>
diff --git a/packages/components/src/notice/index.tsx b/packages/components/src/notice/index.tsx
index 7117295b71975..868576ecc9aa3 100644
--- a/packages/components/src/notice/index.tsx
+++ b/packages/components/src/notice/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -93,14 +93,9 @@ function Notice( {
 }: NoticeProps ) {
 	useSpokenMessage( spokenMessage, politeness );
 
-	const classes = classnames(
-		className,
-		'components-notice',
-		'is-' + status,
-		{
-			'is-dismissible': isDismissible,
-		}
-	);
+	const classes = clsx( className, 'components-notice', 'is-' + status, {
+		'is-dismissible': isDismissible,
+	} );
 
 	if ( __unstableHTML && typeof children === 'string' ) {
 		children = <RawHTML>{ children }</RawHTML>;
@@ -151,7 +146,7 @@ function Notice( {
 									href={ url }
 									variant={ computedVariant }
 									onClick={ url ? undefined : onClick }
-									className={ classnames(
+									className={ clsx(
 										'components-notice__action',
 										buttonCustomClasses
 									) }
diff --git a/packages/components/src/notice/list.tsx b/packages/components/src/notice/list.tsx
index 5b92b6902a847..04351f383894e 100644
--- a/packages/components/src/notice/list.tsx
+++ b/packages/components/src/notice/list.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -48,7 +48,7 @@ function NoticeList( {
 		( id: NoticeListProps[ 'notices' ][ number ][ 'id' ] ) => () =>
 			onRemove( id );
 
-	className = classnames( 'components-notice-list', className );
+	className = clsx( 'components-notice-list', className );
 
 	return (
 		<div className={ className }>
diff --git a/packages/components/src/notice/stories/index.story.tsx b/packages/components/src/notice/stories/index.story.tsx
index 16a68ab293f55..3314fc722af96 100644
--- a/packages/components/src/notice/stories/index.story.tsx
+++ b/packages/components/src/notice/stories/index.story.tsx
@@ -109,7 +109,7 @@ export const NoticeListSubcomponent: StoryFn< typeof NoticeList > = () => {
 	return (
 		<>
 			<NoticeList notices={ notices } onRemove={ removeNotice } />
-			<Button variant={ 'primary' } onClick={ resetNotices }>
+			<Button variant="primary" onClick={ resetNotices }>
 				Reset Notices
 			</Button>
 		</>
diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index 8c9c9bec8a8aa..5c846aaafc1e0 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';
 
 /**
@@ -82,7 +82,7 @@ function UnforwardedNumberControl(
 	};
 
 	const autoComplete = typeProp === 'number' ? 'off' : undefined;
-	const classes = classNames( 'components-number-control', className );
+	const classes = clsx( 'components-number-control', className );
 	const cx = useCx();
 	const spinButtonClasses = cx( size === 'small' && styles.smallSpinButtons );
 
diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx
index 56234ca5c86bc..8d8e00888dd56 100644
--- a/packages/components/src/palette-edit/index.tsx
+++ b/packages/components/src/palette-edit/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -37,13 +37,13 @@ import {
 	PaletteActionsContainer,
 	PaletteEditStyles,
 	PaletteHeading,
-	PaletteHStackHeader,
 	IndicatorStyled,
 	PaletteItem,
 	NameContainer,
 	NameInputControl,
 	DoneButton,
 	RemoveButton,
+	PaletteEditContents,
 } from './styles';
 import { NavigableMenu } from '../navigable-container';
 import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';
@@ -130,7 +130,7 @@ function ColorPickerPopover< T extends Color | Gradient >( {
 				resize: false,
 				placement: 'left-start',
 				...receivedPopoverProps,
-				className: classnames(
+				className: clsx(
 					'components-palette-edit__popover',
 					receivedPopoverProps?.className
 				),
@@ -410,7 +410,7 @@ export function PaletteEdit( {
 
 	return (
 		<PaletteEditStyles>
-			<PaletteHStackHeader>
+			<HStack>
 				<PaletteHeading level={ paletteLabelHeadingLevel }>
 					{ paletteLabel }
 				</PaletteHeading>
@@ -542,9 +542,9 @@ export function PaletteEdit( {
 							</DropdownMenu>
 						) }
 				</PaletteActionsContainer>
-			</PaletteHStackHeader>
+			</HStack>
 			{ hasElements && (
-				<>
+				<PaletteEditContents>
 					{ isEditing && (
 						<PaletteEditListView< ( typeof elements )[ number ] >
 							canOnlyChangeValues={ canOnlyChangeValues }
@@ -602,9 +602,11 @@ export function PaletteEdit( {
 								disableCustomColors
 							/>
 						) ) }
-				</>
+				</PaletteEditContents>
+			) }
+			{ ! hasElements && emptyMessage && (
+				<PaletteEditContents>{ emptyMessage }</PaletteEditContents>
 			) }
-			{ ! hasElements && emptyMessage }
 		</PaletteEditStyles>
 	);
 }
diff --git a/packages/components/src/palette-edit/styles.ts b/packages/components/src/palette-edit/styles.ts
index f0d8301309557..aa4ed720b93bf 100644
--- a/packages/components/src/palette-edit/styles.ts
+++ b/packages/components/src/palette-edit/styles.ts
@@ -9,7 +9,6 @@ import { css } from '@emotion/react';
  */
 import Button from '../button';
 import { Heading } from '../heading';
-import { HStack } from '../h-stack';
 import { space } from '../utils/space';
 import { COLORS, CONFIG, font } from '../utils';
 import { View } from '../view';
@@ -131,8 +130,8 @@ export const PaletteActionsContainer = styled( View )`
 	display: flex;
 `;
 
-export const PaletteHStackHeader = styled( HStack )`
-	margin-bottom: ${ space( 2 ) };
+export const PaletteEditContents = styled( View )`
+	margin-top: ${ space( 2 ) };
 `;
 
 export const PaletteEditStyles = styled( View )`
diff --git a/packages/components/src/palette-edit/test/index.tsx b/packages/components/src/palette-edit/test/index.tsx
index 7ebdaa77ef0b8..a8c12e7fc6fcd 100644
--- a/packages/components/src/palette-edit/test/index.tsx
+++ b/packages/components/src/palette-edit/test/index.tsx
@@ -154,7 +154,7 @@ describe( 'PaletteEdit', () => {
 		render(
 			<PaletteEdit
 				{ ...defaultProps }
-				emptyMessage={ 'Test empty message' }
+				emptyMessage="Test empty message"
 			/>
 		);
 
@@ -170,11 +170,13 @@ describe( 'PaletteEdit', () => {
 			} )
 		);
 
-		expect(
-			screen.getByRole( 'button', {
-				name: 'Remove all colors',
-			} )
-		).toBeVisible();
+		await waitFor( () => {
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Remove all colors',
+				} )
+			).toBeVisible();
+		} );
 	} );
 
 	it( 'shows a reset option when the `canReset` prop is enabled', async () => {
@@ -187,11 +189,13 @@ describe( 'PaletteEdit', () => {
 				name: 'Color options',
 			} )
 		);
-		expect(
-			screen.getByRole( 'button', {
-				name: 'Reset colors',
-			} )
-		).toBeVisible();
+		await waitFor( () => {
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Reset colors',
+				} )
+			).toBeVisible();
+		} );
 	} );
 
 	it( 'does not show a reset colors option when `canReset` is disabled', async () => {
diff --git a/packages/components/src/panel/actions.native.js b/packages/components/src/panel/actions.native.js
index cea78ce46fef0..9e14932bfd5e1 100644
--- a/packages/components/src/panel/actions.native.js
+++ b/packages/components/src/panel/actions.native.js
@@ -6,7 +6,6 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { TextControl } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { useMemo } from '@wordpress/element';
 
@@ -15,6 +14,7 @@ import { useMemo } from '@wordpress/element';
  */
 import styles from './actions.scss';
 import BottomSeparatorCover from './bottom-separator-cover';
+import TextControl from '../text-control';
 
 function PanelActions( { actions, getStylesFromColorScheme } ) {
 	const mappedActions = useMemo( () => {
diff --git a/packages/components/src/panel/body.tsx b/packages/components/src/panel/body.tsx
index d395ed8ed98f4..bf6b867dccbf4 100644
--- a/packages/components/src/panel/body.tsx
+++ b/packages/components/src/panel/body.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -79,7 +79,7 @@ export function UnforwardedPanelBody(
 		}
 	}, [ isOpened, scrollBehavior ] );
 
-	const classes = classnames( 'components-panel__body', className, {
+	const classes = clsx( 'components-panel__body', className, {
 		'is-opened': isOpened,
 	} );
 
diff --git a/packages/components/src/panel/index.tsx b/packages/components/src/panel/index.tsx
index aa15d043647ec..de44af6bdfa3f 100644
--- a/packages/components/src/panel/index.tsx
+++ b/packages/components/src/panel/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ function UnforwardedPanel(
 	{ header, className, children }: PanelProps,
 	ref: React.ForwardedRef< HTMLDivElement >
 ) {
-	const classNames = classnames( className, 'components-panel' );
+	const classNames = clsx( className, 'components-panel' );
 	return (
 		<div className={ classNames } ref={ ref }>
 			{ header && <PanelHeader label={ header } /> }
diff --git a/packages/components/src/panel/row.tsx b/packages/components/src/panel/row.tsx
index 72f0e392e90b0..392f215c2c675 100644
--- a/packages/components/src/panel/row.tsx
+++ b/packages/components/src/panel/row.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ function UnforwardedPanelRow(
 ) {
 	return (
 		<div
-			className={ classnames( 'components-panel__row', className ) }
+			className={ clsx( 'components-panel__row', className ) }
 			ref={ ref }
 		>
 			{ children }
diff --git a/packages/components/src/placeholder/index.tsx b/packages/components/src/placeholder/index.tsx
index d55741f1f4157..9a6e12f30fefc 100644
--- a/packages/components/src/placeholder/index.tsx
+++ b/packages/components/src/placeholder/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -68,14 +68,14 @@ export function Placeholder(
 		};
 	}
 
-	const classes = classnames(
+	const classes = clsx(
 		'components-placeholder',
 		className,
 		modifierClassNames,
 		withIllustration ? 'has-illustration' : null
 	);
 
-	const fieldsetClasses = classnames( 'components-placeholder__fieldset', {
+	const fieldsetClasses = clsx( 'components-placeholder__fieldset', {
 		'is-column-layout': isColumnLayout,
 	} );
 
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index cc107da0a9389..0e9bfa0f86a0c 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -67,7 +67,7 @@
 	flex-direction: row;
 	width: 100%;
 	flex-wrap: wrap;
-	gap: $grid-unit-15;
+	gap: $grid-unit-20;
 	justify-content: flex-start;
 
 	p {
@@ -83,7 +83,6 @@
 
 .components-placeholder__input[type="url"] {
 	@include input-control;
-	margin: 0 8px 0 0;
 	flex: 1 1 auto;
 }
 
diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
index 4ac17056c86ca..9df0eca588051 100644
--- a/packages/components/src/popover/index.tsx
+++ b/packages/components/src/popover/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { ForwardedRef, SyntheticEvent, RefCallback } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	useFloating,
 	flip as flipMiddleware,
@@ -78,7 +78,7 @@ export const SLOT_NAME = 'Popover';
 const ArrowTriangle = () => (
 	<SVG
 		xmlns="http://www.w3.org/2000/svg"
-		viewBox={ `0 0 100 100` }
+		viewBox="0 0 100 100"
 		className="components-popover__triangle"
 		role="presentation"
 	>
@@ -390,7 +390,7 @@ const UnforwardedPopover = (
 
 	let content = (
 		<motion.div
-			className={ classnames( className, {
+			className={ clsx( className, {
 				'is-expanded': isExpanded,
 				'is-positioned': isPositioned,
 				// Use the 'alternate' classname for 'toolbar' variant for back compat.
diff --git a/packages/components/src/private-apis.ts b/packages/components/src/private-apis.ts
index 6694c1d30bdce..f55373664efff 100644
--- a/packages/components/src/private-apis.ts
+++ b/packages/components/src/private-apis.ts
@@ -15,7 +15,6 @@ import {
 } from './composite/v2';
 import { default as CustomSelectControl } from './custom-select-control';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
-import { default as ProgressBar } from './progress-bar';
 import { createPrivateSlotFill } from './slot-fill';
 import {
 	DropdownMenu as DropdownMenuV2,
@@ -44,7 +43,6 @@ lock( privateApis, {
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,
 	ComponentsContext,
-	ProgressBar,
 	Tabs,
 	Theme,
 	DropdownMenuV2,
diff --git a/packages/components/src/progress-bar/README.md b/packages/components/src/progress-bar/README.md
index ad69ab54b098a..07bd1d6c12071 100644
--- a/packages/components/src/progress-bar/README.md
+++ b/packages/components/src/progress-bar/README.md
@@ -1,13 +1,47 @@
 # ProgressBar
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 A simple horizontal progress bar component.
 
 Supports two modes: determinate and indeterminate. A progress bar is determinate when a specific progress value has been specified (from 0 to 100), and indeterminate when a value hasn't been specified.
 
+## Usage
+
+Basic usage:
+
+```jsx
+import { ProgressBar } from '@wordpress/components';
+
+const MyLoadingComponent = () => {
+	return <ProgressBar />;
+};
+```
+
+You can also make it determinate by passing a `value` (from 0 to 100) representing the progress:
+
+```jsx
+import { ProgressBar } from '@wordpress/components';
+
+const MyLoadingComponent = ( { progress } ) => {
+	return <ProgressBar value={ progress } />;
+};
+```
+
+You can customize its appearance by passing a custom CSS class name to `className`.
+
+```css
+.my-custom-progress-bar {
+	width: 100%;
+}
+```
+
+```jsx
+import { ProgressBar } from '@wordpress/components';
+
+const MyLoadingComponent = () => {
+	return <ProgressBar className="my-custom-progress-bar" />;
+};
+```
+
 ### Props
 
 The component accepts the following props:
@@ -23,7 +57,7 @@ If a `value` is not specified, the progress bar will be considered indeterminate
 
 A CSS class to apply to the underlying `div` element, serving as a progress bar track.
 
-- Required: No
+-   Required: No
 
 #### Inherited props
 
diff --git a/packages/components/src/progress-bar/index.tsx b/packages/components/src/progress-bar/index.tsx
index ed13c036e9916..e6a3485095456 100644
--- a/packages/components/src/progress-bar/index.tsx
+++ b/packages/components/src/progress-bar/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { CSSProperties, ForwardedRef } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -26,13 +26,11 @@ function UnforwardedProgressBar(
 	return (
 		<ProgressBarStyled.Track className={ className }>
 			<ProgressBarStyled.Indicator
-				style={
-					{
-						'--indicator-width': ! isIndeterminate
-							? `${ value }%`
-							: undefined,
-					} as CSSProperties
-				}
+				style={ {
+					'--indicator-width': ! isIndeterminate
+						? `${ value }%`
+						: undefined,
+				} }
 				isIndeterminate={ isIndeterminate }
 			/>
 			<ProgressBarStyled.ProgressElement
@@ -46,6 +44,21 @@ function UnforwardedProgressBar(
 	);
 }
 
+/**
+ * A simple horizontal progress bar component.
+ *
+ * Supports two modes: determinate and indeterminate. A progress bar is determinate
+ * when a specific progress value has been specified (from 0 to 100), and indeterminate
+ * when a value hasn't been specified.
+ *
+ * ```jsx
+ * import { ProgressBar } from '@wordpress/components';
+ *
+ * const MyLoadingComponent = () => {
+ * 	return <ProgressBar />;
+ * };
+ * ```
+ */
 export const ProgressBar = forwardRef( UnforwardedProgressBar );
 
 export default ProgressBar;
diff --git a/packages/components/src/progress-bar/stories/index.story.tsx b/packages/components/src/progress-bar/stories/index.story.tsx
index dad1958bf0e66..4396c4cc48eeb 100644
--- a/packages/components/src/progress-bar/stories/index.story.tsx
+++ b/packages/components/src/progress-bar/stories/index.story.tsx
@@ -10,13 +10,11 @@ import { ProgressBar } from '..';
 
 const meta: Meta< typeof ProgressBar > = {
 	component: ProgressBar,
-	title: 'Components (Experimental)/ProgressBar',
+	title: 'Components/ProgressBar',
 	argTypes: {
 		value: { control: { type: 'number', min: 0, max: 100, step: 1 } },
 	},
-	tags: [ 'status-private' ],
 	parameters: {
-		badges: [ 'private' ],
 		controls: {
 			expanded: true,
 		},
@@ -31,3 +29,38 @@ const Template: StoryFn< typeof ProgressBar > = ( { ...args } ) => {
 
 export const Default: StoryFn< typeof ProgressBar > = Template.bind( {} );
 Default.args = {};
+
+const withCustomWidthCustomCSS = `
+	.custom-progress-bar {
+		width: 100%;
+	}
+`;
+
+/**
+ * A progress bar with a custom width.
+ *
+ * You can override the default `width` by passing a custom CSS class via the
+ * `className` prop.
+ *
+ * This example shows a progress bar with an overriden `width` of `100%` which
+ * makes it fit all available horizontal space of the parent element. The CSS
+ * class looks like this:
+ *
+ * ```css
+ * .custom-progress-bar {
+ *   width: 100%;
+ * }
+ * ```
+ */
+export const WithCustomWidth = Template.bind( {} );
+WithCustomWidth.args = {
+	className: 'custom-progress-bar',
+};
+WithCustomWidth.decorators = [
+	( Story ) => (
+		<>
+			<style>{ withCustomWidthCustomCSS }</style>
+			<Story />
+		</>
+	),
+];
diff --git a/packages/components/src/progress-bar/styles.ts b/packages/components/src/progress-bar/styles.ts
index f04002f458c0a..0e91556b96b9d 100644
--- a/packages/components/src/progress-bar/styles.ts
+++ b/packages/components/src/progress-bar/styles.ts
@@ -24,8 +24,6 @@ export const INDETERMINATE_TRACK_WIDTH = 50;
 export const Track = styled.div`
 	position: relative;
 	overflow: hidden;
-	width: 100%;
-	max-width: 160px;
 	height: ${ CONFIG.borderWidthFocus };
 	/* Text color at 10% opacity */
 	background-color: color-mix(
@@ -38,6 +36,10 @@ export const Track = styled.div`
 	// Windows high contrast mode.
 	outline: 2px solid transparent;
 	outline-offset: 2px;
+
+	:where( & ) {
+		width: 160px;
+	}
 `;
 
 export const Indicator = styled.div< {
diff --git a/packages/components/src/query-controls/index.native.js b/packages/components/src/query-controls/index.native.js
index ef34329706862..4e687f4af09d5 100644
--- a/packages/components/src/query-controls/index.native.js
+++ b/packages/components/src/query-controls/index.native.js
@@ -7,7 +7,8 @@ import { useCallback, memo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { RangeControl, SelectControl } from '../';
+import RangeControl from '../range-control';
+import SelectControl from '../select-control';
 import CategorySelect from './category-select';
 
 const DEFAULT_MIN_ITEMS = 1;
diff --git a/packages/components/src/radio-control/index.tsx b/packages/components/src/radio-control/index.tsx
index 0f87f5de7c94e..043ca3d158a80 100644
--- a/packages/components/src/radio-control/index.tsx
+++ b/packages/components/src/radio-control/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ChangeEvent } from 'react';
 
 /**
@@ -71,7 +71,7 @@ export function RadioControl(
 			id={ id }
 			hideLabelFromVision={ hideLabelFromVision }
 			help={ help }
-			className={ classnames( className, 'components-radio-control' ) }
+			className={ clsx( className, 'components-radio-control' ) }
 		>
 			<VStack spacing={ 1 }>
 				{ options.map( ( option, index ) => (
diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx
index 196985152fa63..ae39e08d41c03 100644
--- a/packages/components/src/range-control/index.tsx
+++ b/packages/components/src/range-control/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ChangeEvent, FocusEvent, ForwardedRef } from 'react';
 
 /**
@@ -116,9 +116,9 @@ function UnforwardedRangeControl(
 		: ( ( value - min ) / ( max - min ) ) * 100;
 	const fillValueOffset = `${ clamp( fillValue, 0, 100 ) }%`;
 
-	const classes = classnames( 'components-range-control', className );
+	const classes = clsx( 'components-range-control', className );
 
-	const wrapperClasses = classnames(
+	const wrapperClasses = clsx(
 		'components-range-control__wrapper',
 		!! marks && 'is-marked'
 	);
diff --git a/packages/components/src/range-control/mark.tsx b/packages/components/src/range-control/mark.tsx
index 856b540b70e1b..a17665bb628ab 100644
--- a/packages/components/src/range-control/mark.tsx
+++ b/packages/components/src/range-control/mark.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -22,12 +22,12 @@ export default function RangeMark(
 		...otherProps
 	} = props;
 
-	const classes = classnames(
+	const classes = clsx(
 		'components-range-control__mark',
 		isFilled && 'is-filled',
 		className
 	);
-	const labelClasses = classnames(
+	const labelClasses = clsx(
 		'components-range-control__mark-label',
 		isFilled && 'is-filled'
 	);
diff --git a/packages/components/src/range-control/tooltip.tsx b/packages/components/src/range-control/tooltip.tsx
index c5428baab5217..432415086dcef 100644
--- a/packages/components/src/range-control/tooltip.tsx
+++ b/packages/components/src/range-control/tooltip.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -31,7 +31,7 @@ export default function SimpleTooltip(
 		...restProps
 	} = props;
 	const position = useTooltipPosition( { inputRef, tooltipPosition } );
-	const classes = classnames( 'components-simple-tooltip', className );
+	const classes = clsx( 'components-simple-tooltip', className );
 	const styles = {
 		...style,
 		zIndex,
diff --git a/packages/components/src/resizable-box/index.tsx b/packages/components/src/resizable-box/index.tsx
index 0955c29c53778..1b05270ea0bf2 100644
--- a/packages/components/src/resizable-box/index.tsx
+++ b/packages/components/src/resizable-box/index.tsx
@@ -6,7 +6,7 @@ import { forwardRef } from '@wordpress/element';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Resizable } from 're-resizable';
 import type { ResizableProps } from 're-resizable';
 import type { ReactNode, ForwardedRef } from 'react';
@@ -21,45 +21,45 @@ const SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';
 const CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';
 
 const HANDLE_CLASSES = {
-	top: classnames(
+	top: clsx(
 		HANDLE_CLASS_NAME,
 		SIDE_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-top'
 	),
-	right: classnames(
+	right: clsx(
 		HANDLE_CLASS_NAME,
 		SIDE_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-right'
 	),
-	bottom: classnames(
+	bottom: clsx(
 		HANDLE_CLASS_NAME,
 		SIDE_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-bottom'
 	),
-	left: classnames(
+	left: clsx(
 		HANDLE_CLASS_NAME,
 		SIDE_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-left'
 	),
-	topLeft: classnames(
+	topLeft: clsx(
 		HANDLE_CLASS_NAME,
 		CORNER_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-top',
 		'components-resizable-box__handle-left'
 	),
-	topRight: classnames(
+	topRight: clsx(
 		HANDLE_CLASS_NAME,
 		CORNER_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-top',
 		'components-resizable-box__handle-right'
 	),
-	bottomRight: classnames(
+	bottomRight: clsx(
 		HANDLE_CLASS_NAME,
 		CORNER_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-bottom',
 		'components-resizable-box__handle-right'
 	),
-	bottomLeft: classnames(
+	bottomLeft: clsx(
 		HANDLE_CLASS_NAME,
 		CORNER_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-bottom',
@@ -107,7 +107,7 @@ function UnforwardedResizableBox(
 ): JSX.Element {
 	return (
 		<Resizable
-			className={ classnames(
+			className={ clsx(
 				'components-resizable-box__container',
 				showHandle && 'has-show-handle',
 				className
diff --git a/packages/components/src/resizable-box/resize-tooltip/index.tsx b/packages/components/src/resizable-box/resize-tooltip/index.tsx
index 996399f98a12a..edab3f8406798 100644
--- a/packages/components/src/resizable-box/resize-tooltip/index.tsx
+++ b/packages/components/src/resizable-box/resize-tooltip/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { Ref, ForwardedRef } from 'react';
 
 /**
@@ -59,7 +59,7 @@ function ResizeTooltip(
 		return null;
 	}
 
-	const classes = classnames( 'components-resize-tooltip', className );
+	const classes = clsx( 'components-resize-tooltip', className );
 
 	return (
 		<Root aria-hidden="true" className={ classes } ref={ ref } { ...props }>
diff --git a/packages/components/src/responsive-wrapper/index.tsx b/packages/components/src/responsive-wrapper/index.tsx
index a8b2ef9ff438a..98e0493ad3e83 100644
--- a/packages/components/src/responsive-wrapper/index.tsx
+++ b/packages/components/src/responsive-wrapper/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -49,7 +49,7 @@ function ResponsiveWrapper( {
 		<TagName className="components-responsive-wrapper">
 			<div>
 				{ cloneElement( children, {
-					className: classnames(
+					className: clsx(
 						'components-responsive-wrapper__content',
 						children.props.className
 					),
diff --git a/packages/components/src/search-control/index.native.js b/packages/components/src/search-control/index.native.js
index 495eb88bb6969..8bff86049b018 100644
--- a/packages/components/src/search-control/index.native.js
+++ b/packages/components/src/search-control/index.native.js
@@ -22,7 +22,6 @@ import {
 	useCallback,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button, Gridicons } from '@wordpress/components';
 import {
 	Icon,
 	cancelCircleFilled as cancelCircleFilledIcon,
@@ -35,6 +34,8 @@ import {
  */
 import allStyles from './style.scss';
 import platformStyles from './platform-style.scss';
+import Button from '../button';
+import Gridicons from '../mobile/gridicons';
 
 // Merge platform specific styles with the default styles.
 const baseStyles = { ...allStyles };
@@ -236,7 +237,7 @@ function SearchControl( {
 					onPress={ onCancel }
 					style={ cancelButtonTextStyle }
 					accessible
-					accessibilityRole={ 'button' }
+					accessibilityRole="button"
 					accessibilityLabel={ __( 'Cancel search' ) }
 					accessibilityHint={ __( 'Cancel search' ) }
 				>
diff --git a/packages/components/src/search-control/index.tsx b/packages/components/src/search-control/index.tsx
index 66b7ae619ab7e..08cb3b065c904 100644
--- a/packages/components/src/search-control/index.tsx
+++ b/packages/components/src/search-control/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -97,10 +97,7 @@ function UnforwardedSearchControl(
 				ref={ useMergeRefs( [ searchRef, forwardedRef ] ) }
 				type="search"
 				size={ size }
-				className={ classnames(
-					'components-search-control',
-					className
-				) }
+				className={ clsx( 'components-search-control', className ) }
 				onChange={ ( nextValue?: string ) =>
 					onChange( nextValue ?? '' )
 				}
diff --git a/packages/components/src/select-control/index.tsx b/packages/components/src/select-control/index.tsx
index 4f2fd7587a4f2..cbf0720c5544c 100644
--- a/packages/components/src/select-control/index.tsx
+++ b/packages/components/src/select-control/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -74,7 +74,7 @@ function UnforwardedSelectControl(
 		props.onChange?.( event.target.value, { event } );
 	};
 
-	const classes = classNames( 'components-select-control', className );
+	const classes = clsx( 'components-select-control', className );
 
 	return (
 		<BaseControl
diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx
index bce3175e658c3..4d68db6fd175e 100644
--- a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx
+++ b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import { observableMap } from '@wordpress/compose';
 
@@ -98,7 +98,7 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 export default function SlotFillProvider( {
 	children,
 }: SlotFillProviderProps ) {
-	const registry = useMemo( createSlotRegistry, [] );
+	const [ registry ] = useState( createSlotRegistry );
 	return (
 		<SlotFillContext.Provider value={ registry }>
 			{ children }
diff --git a/packages/components/src/slot-fill/provider.tsx b/packages/components/src/slot-fill/provider.tsx
index ea32d7104b498..6ed624bab67a3 100644
--- a/packages/components/src/slot-fill/provider.tsx
+++ b/packages/components/src/slot-fill/provider.tsx
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import type { Component } from '@wordpress/element';
-import { useMemo } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -118,7 +118,7 @@ function createSlotRegistry(): BaseSlotFillContext {
 }
 
 export function SlotFillProvider( { children }: SlotFillProviderProps ) {
-	const contextValue = useMemo( createSlotRegistry, [] );
+	const [ contextValue ] = useState( createSlotRegistry );
 	return (
 		<SlotFillContext.Provider value={ contextValue }>
 			{ children }
diff --git a/packages/components/src/snackbar/index.tsx b/packages/components/src/snackbar/index.tsx
index 73f9d9d71a3b1..5bd44d8aace33 100644
--- a/packages/components/src/snackbar/index.tsx
+++ b/packages/components/src/snackbar/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -113,7 +113,7 @@ function UnforwardedSnackbar(
 		return () => clearTimeout( timeoutHandle );
 	}, [ explicitDismiss ] );
 
-	const classes = classnames( className, 'components-snackbar', {
+	const classes = clsx( className, 'components-snackbar', {
 		'components-snackbar-explicit-dismiss': !! explicitDismiss,
 	} );
 	if ( actions && actions.length > 1 ) {
@@ -125,12 +125,9 @@ function UnforwardedSnackbar(
 		actions = [ actions[ 0 ] ];
 	}
 
-	const snackbarContentClassnames = classnames(
-		'components-snackbar__content',
-		{
-			'components-snackbar__content-with-icon': !! icon,
-		}
-	);
+	const snackbarContentClassnames = clsx( 'components-snackbar__content', {
+		'components-snackbar__content-with-icon': !! icon,
+	} );
 
 	return (
 		<div
diff --git a/packages/components/src/snackbar/list.tsx b/packages/components/src/snackbar/list.tsx
index 13772f1f396f2..f97f8cc5db894 100644
--- a/packages/components/src/snackbar/list.tsx
+++ b/packages/components/src/snackbar/list.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -68,7 +68,7 @@ export function SnackbarList( {
 }: WordPressComponentProps< SnackbarListProps, 'div' > ) {
 	const listRef = useRef< HTMLDivElement | null >( null );
 	const isReducedMotion = useReducedMotion();
-	className = classnames( 'components-snackbar-list', className );
+	className = clsx( 'components-snackbar-list', className );
 	const removeNotice =
 		( notice: SnackbarListProps[ 'notices' ][ number ] ) => () =>
 			onRemove?.( notice.id );
@@ -87,9 +87,9 @@ export function SnackbarList( {
 					return (
 						<motion.div
 							layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
-							initial={ 'init' }
-							animate={ 'open' }
-							exit={ 'exit' }
+							initial="init"
+							animate="open"
+							exit="exit"
 							key={ notice.id }
 							variants={
 								isReducedMotion ? undefined : SNACKBAR_VARIANTS
diff --git a/packages/components/src/spinner/index.tsx b/packages/components/src/spinner/index.tsx
index 9864819fa3d97..b9c0a0e92b9e2 100644
--- a/packages/components/src/spinner/index.tsx
+++ b/packages/components/src/spinner/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -21,7 +21,7 @@ export function UnforwardedSpinner(
 ) {
 	return (
 		<StyledSpinner
-			className={ classNames( 'components-spinner', className ) }
+			className={ clsx( 'components-spinner', className ) }
 			viewBox="0 0 100 100"
 			width="16"
 			height="16"
diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
index f4abd1c121b2f..882fddc8607d7 100644
--- a/packages/components/src/tab-panel/index.tsx
+++ b/packages/components/src/tab-panel/index.tsx
@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -202,7 +202,7 @@ const UnforwardedTabPanel = (
 						<Ariakit.Tab
 							key={ tab.name }
 							id={ prependInstanceId( tab.name ) }
-							className={ classnames(
+							className={ clsx(
 								'components-tab-panel__tabs-item',
 								tab.className,
 								{
@@ -232,7 +232,7 @@ const UnforwardedTabPanel = (
 					id={ `${ prependInstanceId( selectedTab.name ) }-view` }
 					store={ tabStore }
 					tabId={ prependInstanceId( selectedTab.name ) }
-					className={ 'components-tab-panel__tab-content' }
+					className="components-tab-panel__tab-content"
 				>
 					{ children( selectedTab ) }
 				</Ariakit.TabPanel>
diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss
index a6b6189e6c204..2855f8c2b06a0 100644
--- a/packages/components/src/tab-panel/style.scss
+++ b/packages/components/src/tab-panel/style.scss
@@ -81,3 +81,19 @@
 		outline: 2px solid transparent;
 	}
 }
+
+.components-tab-panel__tab-content {
+	&:focus {
+		box-shadow: none;
+		outline: none;
+	}
+
+	&:focus-visible {
+		border-radius: 2px;
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+		outline-offset: 0;
+	}
+}
diff --git a/packages/components/src/tabs/stories/index.story.tsx b/packages/components/src/tabs/stories/index.story.tsx
index 883a75c46ad13..164b2cbb5ea9b 100644
--- a/packages/components/src/tabs/stories/index.story.tsx
+++ b/packages/components/src/tabs/stories/index.story.tsx
@@ -31,7 +31,6 @@ const meta: Meta< typeof Tabs > = {
 	tags: [ 'status-private' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
-		badges: [ 'private' ],
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},
@@ -69,6 +68,20 @@ const Template: StoryFn< typeof Tabs > = ( props ) => {
 
 export const Default = Template.bind( {} );
 
+const VerticalTemplate: StoryFn< typeof Tabs > = ( props ) => {
+	return (
+		<Tabs orientation="vertical" { ...props }>
+			<Tabs.TabList style={ { maxWidth: '10rem' } }>
+				<Tabs.Tab tabId="tab1">Tab 1</Tabs.Tab>
+				<Tabs.Tab tabId="tab2">Tab 2</Tabs.Tab>
+				<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
+			</Tabs.TabList>
+		</Tabs>
+	);
+};
+
+export const Vertical = VerticalTemplate.bind( {} );
+
 const DisabledTabTemplate: StoryFn< typeof Tabs > = ( props ) => {
 	return (
 		<Tabs { ...props }>
@@ -203,7 +216,7 @@ const CloseButtonTemplate: StoryFn< typeof Tabs > = ( props ) => {
 								<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
 							</Tabs.TabList>
 							<Button
-								variant={ 'tertiary' }
+								variant="tertiary"
 								style={ {
 									marginLeft: 'auto',
 									alignSelf: 'center',
@@ -225,10 +238,7 @@ const CloseButtonTemplate: StoryFn< typeof Tabs > = ( props ) => {
 					</Tabs>
 				</div>
 			) : (
-				<Button
-					variant={ 'tertiary' }
-					onClick={ () => setIsOpen( true ) }
-				>
+				<Button variant="tertiary" onClick={ () => setIsOpen( true ) }>
 					Open Tabs
 				</Button>
 			) }
@@ -269,31 +279,29 @@ const ControlledModeTemplate: StoryFn< typeof Tabs > = ( props ) => {
 					<p>Selected tab: Tab 3</p>
 				</Tabs.TabPanel>
 			</Tabs>
-			{
-				<div style={ { marginTop: '200px' } }>
-					<p>Select a tab:</p>
-					<DropdownMenu
-						controls={ [
-							{
-								onClick: () => setSelectedTabId( 'tab1' ),
-								title: 'Tab 1',
-								isActive: selectedTabId === 'tab1',
-							},
-							{
-								onClick: () => setSelectedTabId( 'tab2' ),
-								title: 'Tab 2',
-								isActive: selectedTabId === 'tab2',
-							},
-							{
-								onClick: () => setSelectedTabId( 'tab3' ),
-								title: 'Tab 3',
-								isActive: selectedTabId === 'tab3',
-							},
-						] }
-						label="Choose a tab. The power is yours."
-					/>
-				</div>
-			}
+			<div style={ { marginTop: '200px' } }>
+				<p>Select a tab:</p>
+				<DropdownMenu
+					controls={ [
+						{
+							onClick: () => setSelectedTabId( 'tab1' ),
+							title: 'Tab 1',
+							isActive: selectedTabId === 'tab1',
+						},
+						{
+							onClick: () => setSelectedTabId( 'tab2' ),
+							title: 'Tab 2',
+							isActive: selectedTabId === 'tab2',
+						},
+						{
+							onClick: () => setSelectedTabId( 'tab3' ),
+							title: 'Tab 3',
+							isActive: selectedTabId === 'tab3',
+						},
+					] }
+					label="Choose a tab. The power is yours."
+				/>
+			</div>
 		</>
 	);
 };
diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 6abca79aa51ae..ce575c9f31779 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -10,15 +10,49 @@ import * as Ariakit from '@ariakit/react';
  */
 import { COLORS } from '../utils';
 import { space } from '../utils/space';
-import { reduceMotion } from '../utils/reduce-motion';
 
 export const TabListWrapper = styled.div`
+	position: relative;
 	display: flex;
 	align-items: stretch;
 	flex-direction: row;
 	&[aria-orientation='vertical'] {
 		flex-direction: column;
 	}
+	@media not ( prefers-reduced-motion: reduce ) {
+		&.is-animation-enabled::after {
+			transition-property: left, top, width, height;
+			transition-duration: 0.2s;
+			transition-timing-function: ease-out;
+		}
+	}
+	&::after {
+		content: '';
+		position: absolute;
+		pointer-events: none;
+
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+		outline-offset: -1px;
+	}
+	&:not( [aria-orientation='vertical'] )::after {
+		left: var( --indicator-left );
+		bottom: 0;
+		width: var( --indicator-width );
+		height: 0;
+		border-bottom: var( --wp-admin-border-width-focus ) solid
+			${ COLORS.theme.accent };
+	}
+	&[aria-orientation='vertical']::after {
+		/* Temporarily hidden, context: https://github.com/WordPress/gutenberg/pull/60560#issuecomment-2126670072 */
+		opacity: 0;
+
+		right: 0;
+		top: var( --indicator-top );
+		height: var( --indicator-height );
+		border-right: var( --wp-admin-border-width-focus ) solid
+			${ COLORS.theme.accent };
+	}
 `;
 
 export const Tab = styled( Ariakit.Tab )`
@@ -51,34 +85,6 @@ export const Tab = styled( Ariakit.Tab )`
 			outline: none;
 		}
 
-		// Tab indicator
-		&::after {
-			content: '';
-			position: absolute;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			pointer-events: none;
-
-			// Draw the indicator.
-			background: ${ COLORS.theme.accent };
-			height: calc( 0 * var( --wp-admin-border-width-focus ) );
-			border-radius: 0;
-
-			// Animation
-			transition: all 0.1s linear;
-			${ reduceMotion( 'transition' ) };
-		}
-
-		// Active.
-		&[aria-selected='true']::after {
-			height: calc( 1 * var( --wp-admin-border-width-focus ) );
-
-			// Windows high contrast mode.
-			outline: 2px solid transparent;
-			outline-offset: -1px;
-		}
-
 		// Focus.
 		&::before {
 			content: '';
@@ -90,17 +96,20 @@ export const Tab = styled( Ariakit.Tab )`
 			pointer-events: none;
 
 			// Draw the indicator.
-			box-shadow: 0 0 0 0 transparent;
+			box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
+				${ COLORS.theme.accent };
 			border-radius: 2px;
 
 			// Animation
-			transition: all 0.1s linear;
-			${ reduceMotion( 'transition' ) };
+			opacity: 0;
+
+			@media not ( prefers-reduced-motion ) {
+				transition: opacity 0.1s linear;
+			}
 		}
 
 		&:focus-visible::before {
-			box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
-				${ COLORS.theme.accent };
+			opacity: 1;
 
 			// Windows high contrast mode.
 			outline: 2px solid transparent;
diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx
index afa2d8283e6d6..917bcbe755ee0 100644
--- a/packages/components/src/tabs/tablist.tsx
+++ b/packages/components/src/tabs/tablist.tsx
@@ -8,7 +8,13 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import warning from '@wordpress/warning';
-import { forwardRef } from '@wordpress/element';
+import {
+	forwardRef,
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -17,19 +23,123 @@ import type { TabListProps } from './types';
 import { useTabsContext } from './context';
 import { TabListWrapper } from './styles';
 import type { WordPressComponentProps } from '../context';
+import clsx from 'clsx';
+
+function useTrackElementOffset(
+	targetElement?: HTMLElement | null,
+	onUpdate?: () => void
+) {
+	const [ indicatorPosition, setIndicatorPosition ] = useState( {
+		left: 0,
+		top: 0,
+		width: 0,
+		height: 0,
+	} );
+
+	// TODO: replace with useEventCallback or similar when officially available.
+	const updateCallbackRef = useRef( onUpdate );
+	useLayoutEffect( () => {
+		updateCallbackRef.current = onUpdate;
+	} );
+
+	const observedElementRef = useRef< HTMLElement >();
+	const resizeObserverRef = useRef< ResizeObserver >();
+	useEffect( () => {
+		if ( targetElement === observedElementRef.current ) {
+			return;
+		}
+
+		observedElementRef.current = targetElement ?? undefined;
+
+		function updateIndicator( element: HTMLElement ) {
+			setIndicatorPosition( {
+				// Workaround to prevent unwanted scrollbars, see:
+				// https://github.com/WordPress/gutenberg/pull/61979
+				left: Math.max( element.offsetLeft - 1, 0 ),
+				top: Math.max( element.offsetTop - 1, 0 ),
+				width: parseFloat( getComputedStyle( element ).width ),
+				height: parseFloat( getComputedStyle( element ).height ),
+			} );
+			updateCallbackRef.current?.();
+		}
+
+		// Set up a ResizeObserver.
+		if ( ! resizeObserverRef.current ) {
+			resizeObserverRef.current = new ResizeObserver( () => {
+				if ( observedElementRef.current ) {
+					updateIndicator( observedElementRef.current );
+				}
+			} );
+		}
+		const { current: resizeObserver } = resizeObserverRef;
+
+		// Observe new element.
+		if ( targetElement ) {
+			updateIndicator( targetElement );
+			resizeObserver.observe( targetElement );
+		}
+
+		return () => {
+			// Unobserve previous element.
+			if ( observedElementRef.current ) {
+				resizeObserver.unobserve( observedElementRef.current );
+			}
+		};
+	}, [ targetElement ] );
+
+	return indicatorPosition;
+}
+
+type ValueUpdateContext< T > = {
+	previousValue: T;
+};
+
+function useOnValueUpdate< T >(
+	value: T,
+	onUpdate: ( context: ValueUpdateContext< T > ) => void
+) {
+	const previousValueRef = useRef( value );
+
+	// TODO: replace with useEventCallback or similar when officially available.
+	const updateCallbackRef = useRef( onUpdate );
+	useLayoutEffect( () => {
+		updateCallbackRef.current = onUpdate;
+	} );
+
+	useEffect( () => {
+		if ( previousValueRef.current !== value ) {
+			updateCallbackRef.current( {
+				previousValue: previousValueRef.current,
+			} );
+			previousValueRef.current = value;
+		}
+	}, [ value ] );
+}
 
 export const TabList = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< TabListProps, 'div', false >
 >( function TabList( { children, ...otherProps }, ref ) {
 	const context = useTabsContext();
+
+	const selectedId = context?.store.useState( 'selectedId' );
+	const indicatorPosition = useTrackElementOffset(
+		context?.store.item( selectedId )?.element
+	);
+
+	const [ animationEnabled, setAnimationEnabled ] = useState( false );
+	useOnValueUpdate(
+		selectedId,
+		( { previousValue } ) => previousValue && setAnimationEnabled( true )
+	);
+
 	if ( ! context ) {
 		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
 		return null;
 	}
 	const { store } = context;
 
-	const { selectedId, activeId, selectOnMove } = store.useState();
+	const { activeId, selectOnMove } = store.useState();
 	const { setActiveId } = store;
 
 	const onBlur = () => {
@@ -50,9 +160,28 @@ export const TabList = forwardRef<
 		<Ariakit.TabList
 			ref={ ref }
 			store={ store }
-			render={ <TabListWrapper /> }
+			render={
+				<TabListWrapper
+					onTransitionEnd={ ( event ) => {
+						if ( event.pseudoElement === '::after' ) {
+							setAnimationEnabled( false );
+						}
+					} }
+				/>
+			}
 			onBlur={ onBlur }
 			{ ...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' : '',
+				otherProps.className
+			) }
 		>
 			{ children }
 		</Ariakit.TabList>
diff --git a/packages/components/src/text-control/index.tsx b/packages/components/src/text-control/index.tsx
index 30298357c3c01..e964f918c119e 100644
--- a/packages/components/src/text-control/index.tsx
+++ b/packages/components/src/text-control/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { ChangeEvent, ForwardedRef } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -48,7 +48,7 @@ function UnforwardedTextControl(
 			className={ className }
 		>
 			<input
-				className={ classnames( 'components-text-control__input', {
+				className={ clsx( 'components-text-control__input', {
 					'is-next-40px-default-size': __next40pxDefaultSize,
 				} ) }
 				type={ type }
diff --git a/packages/components/src/text/styles.ts b/packages/components/src/text/styles.ts
index 1a0a6383363df..c7d4855279593 100644
--- a/packages/components/src/text/styles.ts
+++ b/packages/components/src/text/styles.ts
@@ -12,6 +12,7 @@ export const Text = css`
 	color: ${ COLORS.gray[ 900 ] };
 	line-height: ${ CONFIG.fontLineHeightBase };
 	margin: 0;
+	text-wrap: balance; /* Fallback for Safari. */
 	text-wrap: pretty;
 `;
 
diff --git a/packages/components/src/text/test/__snapshots__/index.tsx.snap b/packages/components/src/text/test/__snapshots__/index.tsx.snap
index d2caecd9bf059..1b98c0853ac54 100644
--- a/packages/components/src/text/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/text/test/__snapshots__/index.tsx.snap
@@ -22,6 +22,7 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] =
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -54,6 +55,7 @@ exports[`Text snapshot tests should render correctly 1`] = `
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
diff --git a/packages/components/src/theme/stories/index.story.tsx b/packages/components/src/theme/stories/index.story.tsx
index c26e0a752c0d4..e83d0421f0229 100644
--- a/packages/components/src/theme/stories/index.story.tsx
+++ b/packages/components/src/theme/stories/index.story.tsx
@@ -13,14 +13,13 @@ import { HStack } from '../../h-stack';
 
 const meta: Meta< typeof Theme > = {
 	component: Theme,
-	title: 'Components (Experimental)/Theme',
+	title: 'Components/Theme',
 	argTypes: {
 		accent: { control: { type: 'color' } },
 		background: { control: { type: 'color' } },
 	},
 	tags: [ 'status-private' ],
 	parameters: {
-		badges: [ 'private' ],
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},
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 edd203a432199..a7adcc81aa735 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
@@ -278,7 +278,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             <div
               class="emotion-15"
               role="presentation"
-              style="opacity: 1;"
             />
           </div>
         </div>
@@ -824,7 +823,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             <div
               class="emotion-15"
               role="presentation"
-              style="opacity: 1;"
             />
           </div>
         </div>
diff --git a/packages/components/src/toolbar/toolbar-button/index.tsx b/packages/components/src/toolbar/toolbar-button/index.tsx
index 3d77e9cbc8cf6..ea18c3a23e3ab 100644
--- a/packages/components/src/toolbar/toolbar-button/index.tsx
+++ b/packages/components/src/toolbar/toolbar-button/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef, MouseEvent as ReactMouseEvent } from 'react';
 
 /**
@@ -55,7 +55,7 @@ function UnforwardedToolbarButton(
 							props.onClick( event );
 						}
 					} }
-					className={ classnames(
+					className={ clsx(
 						'components-toolbar__control',
 						className
 					) }
@@ -76,7 +76,7 @@ function UnforwardedToolbarButton(
 	// Button.
 	return (
 		<ToolbarItem
-			className={ classnames( 'components-toolbar-button', className ) }
+			className={ clsx( 'components-toolbar-button', className ) }
 			{ ...extraProps }
 			{ ...props }
 			ref={ ref }
diff --git a/packages/components/src/toolbar/toolbar-group/index.tsx b/packages/components/src/toolbar/toolbar-group/index.tsx
index e2c0b5b2f22c4..af555233cc25c 100644
--- a/packages/components/src/toolbar/toolbar-group/index.tsx
+++ b/packages/components/src/toolbar/toolbar-group/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -67,7 +67,7 @@ function ToolbarGroup( {
 		return null;
 	}
 
-	const finalClassName = classnames(
+	const finalClassName = clsx(
 		// Unfortunately, there's legacy code referencing to `.components-toolbar`
 		// So we can't get rid of it
 		accessibleToolbarState
diff --git a/packages/components/src/toolbar/toolbar/index.tsx b/packages/components/src/toolbar/toolbar/index.tsx
index 47c49b270afef..ba2e8062aed85 100644
--- a/packages/components/src/toolbar/toolbar/index.tsx
+++ b/packages/components/src/toolbar/toolbar/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -60,7 +60,7 @@ function UnforwardedToolbar(
 		);
 	}
 	// `ToolbarGroup` already uses components-toolbar for compatibility reasons.
-	const finalClassName = classnames(
+	const finalClassName = clsx(
 		'components-accessible-toolbar',
 		className,
 		variant && `is-${ variant }`
diff --git a/packages/components/src/tools-panel/stories/index.story.tsx b/packages/components/src/tools-panel/stories/index.story.tsx
index cd6f61c6e921b..459932c9d22d7 100644
--- a/packages/components/src/tools-panel/stories/index.story.tsx
+++ b/packages/components/src/tools-panel/stories/index.story.tsx
@@ -367,7 +367,7 @@ export const WithSlotFillItems: StoryFn< typeof ToolsPanel > = ( {
 					label="Item for alternate panel"
 					onDeselect={ () => undefined }
 					resetAllFilter={ () => undefined }
-					panelId={ 'intended-for-another-panel-via-shared-slot' }
+					panelId="intended-for-another-panel-via-shared-slot"
 				>
 					<p>
 						This panel item will not be displayed in the demo as its
diff --git a/packages/components/src/tools-panel/tools-panel-header/component.tsx b/packages/components/src/tools-panel/tools-panel-header/component.tsx
index b08981f94949a..a30a8aa1c2f4b 100644
--- a/packages/components/src/tools-panel/tools-panel-header/component.tsx
+++ b/packages/components/src/tools-panel/tools-panel-header/component.tsx
@@ -224,7 +224,7 @@ const ToolsPanelHeader = (
 									// @ts-expect-error - TODO: If this "tertiary" style is something we really want to allow on MenuItem,
 									// we should rename it and explicitly allow it as an official API. All the other Button variants
 									// don't make sense in a MenuItem context, and should be disallowed.
-									variant={ 'tertiary' }
+									variant="tertiary"
 									onClick={ () => {
 										if ( canResetAll ) {
 											resetAll();
diff --git a/packages/components/src/tools-panel/tools-panel-item/hook.ts b/packages/components/src/tools-panel/tools-panel-item/hook.ts
index fe415b8723a88..1e33e7c6740de 100644
--- a/packages/components/src/tools-panel/tools-panel-item/hook.ts
+++ b/packages/components/src/tools-panel/tools-panel-item/hook.ts
@@ -125,17 +125,21 @@ export function useToolsPanelItem(
 	const isRegistered = menuItems?.[ menuGroup ]?.[ label ] !== undefined;
 
 	const isValueSet = hasValue();
-	const wasValueSet = usePrevious( isValueSet );
-	const newValueSet = isValueSet && ! wasValueSet;
-
-	// Notify the panel when an item's value has been set.
+	// Notify the panel when an item's value has changed except for optional
+	// items without value because the item should not cause itself to hide.
 	useEffect( () => {
-		if ( ! newValueSet ) {
+		if ( ! isShownByDefault && ! isValueSet ) {
 			return;
 		}
 
-		flagItemCustomization( label, menuGroup );
-	}, [ newValueSet, menuGroup, label, flagItemCustomization ] );
+		flagItemCustomization( isValueSet, label, menuGroup );
+	}, [
+		isValueSet,
+		menuGroup,
+		label,
+		flagItemCustomization,
+		isShownByDefault,
+	] );
 
 	// Determine if the panel item's corresponding menu is being toggled and
 	// trigger appropriate callback if it is.
@@ -151,7 +155,7 @@ export function useToolsPanelItem(
 			onSelect?.();
 		}
 
-		if ( ! isMenuItemChecked && wasMenuItemChecked ) {
+		if ( ! isMenuItemChecked && isValueSet && wasMenuItemChecked ) {
 			onDeselect?.();
 		}
 	}, [
diff --git a/packages/components/src/tools-panel/tools-panel/hook.ts b/packages/components/src/tools-panel/tools-panel/hook.ts
index 8a38a15084b33..8742f1c494ce1 100644
--- a/packages/components/src/tools-panel/tools-panel/hook.ts
+++ b/packages/components/src/tools-panel/tools-panel/hook.ts
@@ -205,18 +205,21 @@ export function useToolsPanel(
 		} );
 	}, [ panelItems, setMenuItems, menuItemOrder ] );
 
-	// Force a menu item to be checked.
-	// This is intended for use with default panel items. They are displayed
-	// separately to optional items and have different display states,
-	// we need to update that when their value is customized.
+	// Updates the status of the panel’s menu items. For default items the
+	// value represents whether it differs from the default and for optional
+	// items whether the item is shown.
 	const flagItemCustomization = useCallback(
-		( label: string, group: ToolsPanelMenuItemKey = 'default' ) => {
+		(
+			value: boolean,
+			label: string,
+			group: ToolsPanelMenuItemKey = 'default'
+		) => {
 			setMenuItems( ( items ) => {
 				const newState = {
 					...items,
 					[ group ]: {
 						...items[ group ],
-						[ label ]: true,
+						[ label ]: value,
 					},
 				};
 				return newState;
diff --git a/packages/components/src/tools-panel/types.ts b/packages/components/src/tools-panel/types.ts
index 9f4fc78bea46a..e8e2f950de9a3 100644
--- a/packages/components/src/tools-panel/types.ts
+++ b/packages/components/src/tools-panel/types.ts
@@ -176,6 +176,7 @@ export type ToolsPanelContext = {
 	registerResetAllFilter: ( filter: ResetAllFilter ) => void;
 	deregisterResetAllFilter: ( filter: ResetAllFilter ) => void;
 	flagItemCustomization: (
+		value: boolean,
 		label: string,
 		group?: ToolsPanelMenuItemKey
 	) => void;
diff --git a/packages/components/src/tooltip/index.tsx b/packages/components/src/tooltip/index.tsx
index 87c7506a9c5f7..1eb0de7fed009 100644
--- a/packages/components/src/tooltip/index.tsx
+++ b/packages/components/src/tooltip/index.tsx
@@ -87,10 +87,7 @@ function UnforwardedTooltip(
 	}
 	computedPlacement = computedPlacement || 'bottom';
 
-	// Removing the `Ariakit` namespace from the hook name allows ESLint to
-	// properly identify the hook, and apply the correct linting rules.
-	const useAriakitTooltipStore = Ariakit.useTooltipStore;
-	const tooltipStore = useAriakitTooltipStore( {
+	const tooltipStore = Ariakit.useTooltipStore( {
 		placement: computedPlacement,
 		showTimeout: delay,
 	} );
diff --git a/packages/components/src/tooltip/test/index.native.js b/packages/components/src/tooltip/test/index.native.js
index 5827f5a8e5e99..4b9691313e3d1 100644
--- a/packages/components/src/tooltip/test/index.native.js
+++ b/packages/components/src/tooltip/test/index.native.js
@@ -4,15 +4,11 @@
 import { fireEvent, render, act } from 'test/helpers';
 import { Keyboard, Text } from 'react-native';
 
-/**
- * WordPress dependencies
- */
-import { SlotFillProvider } from '@wordpress/components';
-
 /**
  * Internal dependencies
  */
 import Tooltip from '../index';
+import { Provider as SlotFillProvider } from '../../slot-fill';
 
 // Minimal tree to render tooltip.
 const TooltipSlot = ( { children } ) => (
diff --git a/packages/components/src/truncate/hook.ts b/packages/components/src/truncate/hook.ts
index 440865a596432..940e3b0127b08 100644
--- a/packages/components/src/truncate/hook.ts
+++ b/packages/components/src/truncate/hook.ts
@@ -57,7 +57,7 @@ export default function useTruncate(
 		// breaks even when it contains 'unbreakable' content such as long URLs.
 		// See https://github.com/WordPress/gutenberg/issues/60860.
 		const truncateLines = css`
-			word-break: break-all;
+			${ numberOfLines === 1 ? 'word-break: break-all;' : '' }
 			-webkit-box-orient: vertical;
 			-webkit-line-clamp: ${ numberOfLines };
 			display: -webkit-box;
diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx
index e6eb1ee1c09db..0bd3dc751f850 100644
--- a/packages/components/src/unit-control/index.tsx
+++ b/packages/components/src/unit-control/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { KeyboardEvent, ForwardedRef, SyntheticEvent } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -108,7 +108,7 @@ function UnforwardedUnitControl(
 		}
 	}, [ parsedUnit, setUnit ] );
 
-	const classes = classnames(
+	const classes = clsx(
 		'components-unit-control',
 		// This class is added for legacy purposes to maintain it on the outer
 		// wrapper. See: https://github.com/WordPress/gutenberg/pull/45139
diff --git a/packages/components/src/unit-control/test/index.tsx b/packages/components/src/unit-control/test/index.tsx
index 777004a6e8ae2..d91498d46478b 100644
--- a/packages/components/src/unit-control/test/index.tsx
+++ b/packages/components/src/unit-control/test/index.tsx
@@ -138,7 +138,7 @@ describe( 'UnitControl', () => {
 			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
-			render( <UnitControl value={ '50px' } onChange={ onChangeSpy } /> );
+			render( <UnitControl value="50px" onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.clear( input );
@@ -159,7 +159,7 @@ describe( 'UnitControl', () => {
 			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
-			render( <UnitControl value={ '50px' } onChange={ onChangeSpy } /> );
+			render( <UnitControl value="50px" onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.type( input, '{ArrowUp}' );
@@ -175,7 +175,7 @@ describe( 'UnitControl', () => {
 			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
-			render( <UnitControl value={ '50px' } onChange={ onChangeSpy } /> );
+			render( <UnitControl value="50px" onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.type( input, '{Shift>}{ArrowUp}{/Shift}' );
@@ -253,7 +253,7 @@ describe( 'UnitControl', () => {
 
 			render(
 				<UnitControl
-					value={ '33%' }
+					value="33%"
 					onChange={ onChangeSpy }
 					onBlur={ onBlurSpy }
 				/>
@@ -282,7 +282,7 @@ describe( 'UnitControl', () => {
 
 			render(
 				<UnitControl
-					value={ '15px' }
+					value="15px"
 					onChange={ onChangeSpy }
 					isPressEnterToChange
 				/>
@@ -348,7 +348,7 @@ describe( 'UnitControl', () => {
 
 			render(
 				<UnitControl
-					value={ '14rem' }
+					value="14rem"
 					onChange={ onChangeSpy }
 					onUnitChange={ onUnitChangeSpy }
 				/>
@@ -468,7 +468,7 @@ describe( 'UnitControl', () => {
 
 			render(
 				<UnitControl
-					value={ '50%' }
+					value="50%"
 					units={ [ { value: '%', label: '%' } ] }
 					onChange={ onChangeSpy }
 				/>
@@ -570,19 +570,19 @@ describe( 'UnitControl', () => {
 
 	describe( 'Unit Parser', () => {
 		it( 'should update unit after initial render and with new unit prop', async () => {
-			const { rerender } = render( <UnitControl value={ '10%' } /> );
+			const { rerender } = render( <UnitControl value="10%" /> );
 
 			const select = getSelect();
 
 			expect( select.value ).toBe( '%' );
 
-			rerender( <UnitControl value={ '20vh' } /> );
+			rerender( <UnitControl value="20vh" /> );
 
 			expect( select.value ).toBe( 'vh' );
 		} );
 
 		it( 'should fallback to default unit if parsed unit is invalid', () => {
-			render( <UnitControl value={ '10null' } /> );
+			render( <UnitControl value="10null" /> );
 
 			expect( getSelect().value ).toBe( 'px' );
 		} );
@@ -590,7 +590,7 @@ describe( 'UnitControl', () => {
 		it( 'should display valid CSS unit when not explicitly included in units list', () => {
 			render(
 				<UnitControl
-					value={ '10%' }
+					value="10%"
 					units={ [
 						{ value: 'px', label: 'px' },
 						{ value: 'em', label: 'em' },
@@ -616,7 +616,7 @@ describe( 'UnitControl', () => {
 
 				render(
 					<UnitControl
-						value={ '10%' }
+						value="10%"
 						onChange={ onChangeSpy }
 						onUnitChange={ onUnitChangeSpy }
 					/>
diff --git a/packages/components/src/unit-control/unit-select-control.tsx b/packages/components/src/unit-control/unit-select-control.tsx
index c3019fb830c22..3bd3266a0a9af 100644
--- a/packages/components/src/unit-control/unit-select-control.tsx
+++ b/packages/components/src/unit-control/unit-select-control.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ChangeEvent, ForwardedRef } from 'react';
 
 /**
@@ -47,7 +47,7 @@ function UnitSelectControl(
 		onChange?.( unitValue, { event, data } );
 	};
 
-	const classes = classnames( 'components-unit-control__select', className );
+	const classes = clsx( 'components-unit-control__select', className );
 
 	return (
 		<UnitSelect
diff --git a/packages/components/src/utils/reduce-motion.js b/packages/components/src/utils/reduce-motion.js
deleted file mode 100644
index 68089e019e50e..0000000000000
--- a/packages/components/src/utils/reduce-motion.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Allows users to opt-out of animations via OS-level preferences.
- *
- * @param {'transition' | 'animation' | string} [prop='transition'] CSS Property name
- * @return {string} Generated CSS code for the reduced style
- *
- * @deprecated Write your own media query instead,
- * e.g. `@media not ( prefers-reduced-motion ) { ...some animation... }` or
- * `@media ( prefers-reduced-motion ) { ...reduced animation... }`.
- */
-export function reduceMotion( prop = 'transition' ) {
-	let style;
-
-	switch ( prop ) {
-		case 'transition':
-			style = 'transition-duration: 0ms;';
-			break;
-
-		case 'animation':
-			style = 'animation-duration: 1ms;';
-			break;
-
-		default:
-			style = `
-				animation-duration: 1ms;
-				transition-duration: 0ms;
-			`;
-	}
-
-	return `
-		@media ( prefers-reduced-motion: reduce ) {
-			${ style };
-		}
-	`;
-}
diff --git a/packages/components/src/utils/style-mixins.js b/packages/components/src/utils/style-mixins.js
index c858e8731fc52..46ee1183f5969 100644
--- a/packages/components/src/utils/style-mixins.js
+++ b/packages/components/src/utils/style-mixins.js
@@ -1,6 +1,5 @@
 export { boxSizingReset } from './box-sizing';
 export { rgba } from './colors';
-export { reduceMotion } from './reduce-motion';
 export { rtl } from './rtl';
 export { font } from './font';
 export { breakpoint } from './breakpoint';
diff --git a/packages/components/src/utils/theme-variables.scss b/packages/components/src/utils/theme-variables.scss
index 14e44f3ddc7d2..8c8c2d8a5633f 100644
--- a/packages/components/src/utils/theme-variables.scss
+++ b/packages/components/src/utils/theme-variables.scss
@@ -4,6 +4,10 @@
 // `--wp-admin-theme-color`. If the `--wp-admin-theme-color` variable is not
 // defined, fallback to the default theme color (WP blueberry).
 $components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+
+// Define accent color transparent variants.
+$components-color-accent-transparent-40: rgba(var(--wp-components-color-accent--rgb, var(--wp-admin-theme-color--rgb)), 0.04);
+
 $components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
 $components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
 
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 81045d05c21fc..2033a6f43fede 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -9,10 +9,7 @@
 			"gutenberg-test-env",
 			"jest",
 			"@testing-library/jest-dom"
-		],
-		// TODO: Remove `skipLibCheck` after resolving duplicate declaration of the `process` variable
-		// between `@types/webpack-env` (from @storybook packages) and `gutenberg-env`.
-		"skipLibCheck": true
+		]
 	},
 	"references": [
 		{ "path": "../a11y" },
diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md
index e25903ae4c513..702df49b9a28b 100644
--- a/packages/compose/CHANGELOG.md
+++ b/packages/compose/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 7.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 6.35.0 (2024-05-16)
+
 ## 6.34.0 (2024-05-02)
 
 -   Added new `observableMap` data structure and `useObservableValue` React hook ([#60945](https://github.com/WordPress/gutenberg/pull/60945)).
diff --git a/packages/compose/README.md b/packages/compose/README.md
index 83bde196033a0..f4f0631ba36a5 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -69,7 +69,7 @@ This is inspired by `lodash`'s `flowRight` function.
 
 _Related_
 
--   <https://docs-lodash.com/v4/flow-right/>
+-   <https://lodash.com/docs/4#flow-right>
 
 ### createHigherOrderComponent
 
@@ -145,7 +145,7 @@ This is inspired by `lodash`'s `flow` function.
 
 _Related_
 
--   <https://docs-lodash.com/v4/flow/>
+-   <https://lodash.com/docs/4#flow>
 
 ### pure
 
@@ -247,7 +247,7 @@ Debounces a function similar to Lodash's `debounce`. A new debounced function wi
 
 _Related_
 
--   <https://docs-lodash.com/v4/debounce/>
+-   <https://lodash.com/docs/4#debounce>
 
 _Parameters_
 
@@ -265,11 +265,11 @@ Helper hook for input fields that need to debounce the value before using it.
 
 _Parameters_
 
--   _defaultValue_ `any`: The default value to use.
+-   _defaultValue_ The default value to use.
 
 _Returns_
 
--   `[string, Function, string]`: The input value, the setter and the debounced input value.
+-   `[ string, ( value: string ) => void, string ]`: The input value, the setter and the debounced input value.
 
 ### useDisabled
 
@@ -535,7 +535,7 @@ Throttles a function similar to Lodash's `throttle`. A new throttled function wi
 
 _Related_
 
--   <https://docs-lodash.com/v4/throttle/>
+-   <https://lodash.com/docs/4#throttle>
 
 _Parameters_
 
diff --git a/packages/compose/package.json b/packages/compose/package.json
index c4b6fb96f1c4d..7568f2f26f08d 100644
--- a/packages/compose/package.json
+++ b/packages/compose/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "6.34.0",
+	"version": "7.0.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/compose/src/higher-order/compose.ts b/packages/compose/src/higher-order/compose.ts
index 2b7b598c70c95..1fcaa55eb4512 100644
--- a/packages/compose/src/higher-order/compose.ts
+++ b/packages/compose/src/higher-order/compose.ts
@@ -9,7 +9,7 @@ import { basePipe } from './pipe';
  *
  * This is inspired by `lodash`'s `flowRight` function.
  *
- * @see https://docs-lodash.com/v4/flow-right/
+ * @see https://lodash.com/docs/4#flow-right
  */
 const compose = basePipe( true );
 
diff --git a/packages/compose/src/higher-order/pipe.ts b/packages/compose/src/higher-order/pipe.ts
index ced7618ad81bf..29003d818ccc3 100644
--- a/packages/compose/src/higher-order/pipe.ts
+++ b/packages/compose/src/higher-order/pipe.ts
@@ -43,7 +43,7 @@
  *
  * Allows to choose whether to perform left-to-right or right-to-left composition.
  *
- * @see https://docs-lodash.com/v4/flow/
+ * @see https://lodash.com/docs/4#flow
  *
  * @param {boolean} reverse True if right-to-left, false for left-to-right composition.
  */
@@ -67,7 +67,7 @@ const basePipe =
  *
  * This is inspired by `lodash`'s `flow` function.
  *
- * @see https://docs-lodash.com/v4/flow/
+ * @see https://lodash.com/docs/4#flow
  */
 const pipe = basePipe();
 
diff --git a/packages/compose/src/hooks/use-debounce/index.js b/packages/compose/src/hooks/use-debounce/index.js
index 5d48dba91bde6..6da42f159a864 100644
--- a/packages/compose/src/hooks/use-debounce/index.js
+++ b/packages/compose/src/hooks/use-debounce/index.js
@@ -19,7 +19,7 @@ import { debounce } from '../../utils/debounce';
  * including the function to debounce, so please wrap functions created on
  * render in components in `useCallback`.
  *
- * @see https://docs-lodash.com/v4/debounce/
+ * @see https://lodash.com/docs/4#debounce
  *
  * @template {(...args: any[]) => void} TFunc
  *
diff --git a/packages/compose/src/hooks/use-debounced-input/index.js b/packages/compose/src/hooks/use-debounced-input/index.ts
similarity index 60%
rename from packages/compose/src/hooks/use-debounced-input/index.js
rename to packages/compose/src/hooks/use-debounced-input/index.ts
index 91a01073fcfee..643b0ba68026c 100644
--- a/packages/compose/src/hooks/use-debounced-input/index.js
+++ b/packages/compose/src/hooks/use-debounced-input/index.ts
@@ -11,18 +11,20 @@ import useDebounce from '../use-debounce';
 /**
  * Helper hook for input fields that need to debounce the value before using it.
  *
- * @param {any} defaultValue The default value to use.
- * @return {[string, Function, string]} The input value, the setter and the debounced input value.
+ * @param defaultValue The default value to use.
+ * @return The input value, the setter and the debounced input value.
  */
-export default function useDebouncedInput( defaultValue = '' ) {
-	const [ input, setInput ] = useState( defaultValue );
+export default function useDebouncedInput(
+	defaultValue = ''
+): [ string, ( value: string ) => void, string ] {
+	const [ input, setInput ] = useState< string >( defaultValue );
 	const [ debouncedInput, setDebouncedState ] = useState( defaultValue );
 
 	const setDebouncedInput = useDebounce( setDebouncedState, 250 );
 
 	useEffect( () => {
 		setDebouncedInput( input );
-	}, [ input ] );
+	}, [ input, setDebouncedInput ] );
 
 	return [ input, setInput, debouncedInput ];
 }
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 00b5cd50f0b58..db1f2dcdbe3ea 100644
--- a/packages/compose/src/hooks/use-focus-on-mount/index.js
+++ b/packages/compose/src/hooks/use-focus-on-mount/index.js
@@ -1,9 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect, useCallback } from '@wordpress/element';
+import { useRef, useEffect } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
 
+/**
+ * Internal dependencies
+ */
+import useRefEffect from '../use-ref-effect';
+
 /**
  * Hook used to focus the first tabbable element on mount.
  *
@@ -50,15 +55,7 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
 		focusOnMountRef.current = focusOnMount;
 	}, [ focusOnMount ] );
 
-	useEffect( () => {
-		return () => {
-			if ( timerId.current ) {
-				clearTimeout( timerId.current );
-			}
-		};
-	}, [] );
-
-	return useCallback( ( node ) => {
+	return useRefEffect( ( node ) => {
 		if ( ! node || focusOnMountRef.current === false ) {
 			return;
 		}
@@ -80,5 +77,11 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
 		}
 
 		setFocus( node );
+
+		return () => {
+			if ( timerId.current ) {
+				clearTimeout( timerId.current );
+			}
+		};
 	}, [] );
 }
diff --git a/packages/compose/src/hooks/use-throttle/index.js b/packages/compose/src/hooks/use-throttle/index.js
index 8cade9a8442ac..4bf6cc6e85555 100644
--- a/packages/compose/src/hooks/use-throttle/index.js
+++ b/packages/compose/src/hooks/use-throttle/index.js
@@ -19,7 +19,7 @@ import { throttle } from '../../utils/throttle';
  * including the function to throttle, so please wrap functions created on
  * render in components in `useCallback`.
  *
- * @see https://docs-lodash.com/v4/throttle/
+ * @see https://lodash.com/docs/4#throttle
  *
  * @template {(...args: any[]) => void} TFunc
  *
diff --git a/packages/core-commands/CHANGELOG.md b/packages/core-commands/CHANGELOG.md
index f3fa13088e9fa..b05dda0cca2b2 100644
--- a/packages/core-commands/CHANGELOG.md
+++ b/packages/core-commands/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 1.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 0.27.0 (2024-05-16)
+
 ## 0.26.0 (2024-05-02)
 
 ## 0.25.0 (2024-04-19)
@@ -52,4 +60,4 @@
 
 ## 0.2.0 (2023-05-10)
 
-Initial release.
\ No newline at end of file
+Initial release.
diff --git a/packages/core-commands/package.json b/packages/core-commands/package.json
index 6af1ccb20171d..f79adf41f4898 100644
--- a/packages/core-commands/package.json
+++ b/packages/core-commands/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/core-commands",
-	"version": "0.26.0",
+	"version": "1.0.0",
 	"description": "WordPress core reusable commands.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/core-commands/src/admin-navigation-commands.js b/packages/core-commands/src/admin-navigation-commands.js
index 4de403761f4cc..0ffa7ba7eb628 100644
--- a/packages/core-commands/src/admin-navigation-commands.js
+++ b/packages/core-commands/src/admin-navigation-commands.js
@@ -3,26 +3,9 @@
  */
 import { useCommand } from '@wordpress/commands';
 import { __ } from '@wordpress/i18n';
-import { plus, symbol } from '@wordpress/icons';
-import { addQueryArgs, getPath } from '@wordpress/url';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import { useIsTemplatesAccessible } from './hooks';
-import { unlock } from './lock-unlock';
-
-const { useHistory } = unlock( routerPrivateApis );
+import { plus } from '@wordpress/icons';
 
 export function useAdminNavigationCommands() {
-	const history = useHistory();
-	const isTemplatesAccessible = useIsTemplatesAccessible();
-
-	const isSiteEditor = getPath( window.location.href )?.includes(
-		'site-editor.php'
-	);
-
 	useCommand( {
 		name: 'core/add-new-post',
 		label: __( 'Add new post' ),
@@ -39,28 +22,4 @@ export function useAdminNavigationCommands() {
 			document.location.href = 'post-new.php?post_type=page';
 		},
 	} );
-	useCommand( {
-		name: 'core/manage-reusable-blocks',
-		label: __( 'Patterns' ),
-		icon: symbol,
-		callback: ( { close } ) => {
-			// The site editor and templates both check whether the user
-			// can read templates. We can leverage that here and this
-			// command links to the classic dashboard manage patterns page
-			// if the user can't access it.
-			if ( isTemplatesAccessible ) {
-				const args = {
-					path: '/patterns',
-				};
-				if ( isSiteEditor ) {
-					history.push( args );
-				} else {
-					document.location = addQueryArgs( 'site-editor.php', args );
-				}
-				close();
-			} else {
-				document.location.href = 'edit.php?post_type=wp_block';
-			}
-		},
-	} );
 }
diff --git a/packages/core-commands/src/hooks.js b/packages/core-commands/src/hooks.js
index 6d744e3223234..0622a970680c1 100644
--- a/packages/core-commands/src/hooks.js
+++ b/packages/core-commands/src/hooks.js
@@ -4,13 +4,6 @@
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
-export function useIsTemplatesAccessible() {
-	return useSelect(
-		( select ) => select( coreStore ).canUser( 'read', 'templates' ),
-		[]
-	);
-}
-
 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 695ad00e56720..ba34fffd98824 100644
--- a/packages/core-commands/src/site-editor-navigation-commands.js
+++ b/packages/core-commands/src/site-editor-navigation-commands.js
@@ -10,22 +10,23 @@ import {
 	post,
 	page,
 	layout,
+	symbol,
 	symbolFilled,
 	styles,
 	navigation,
 } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { getQueryArg, addQueryArgs, getPath } from '@wordpress/url';
+import { addQueryArgs, getPath } from '@wordpress/url';
 import { useDebounce } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { useIsTemplatesAccessible, useIsBlockBasedTheme } from './hooks';
+import { useIsBlockBasedTheme } from './hooks';
 import { unlock } from './lock-unlock';
 import { orderEntityRecordsBySearch } from './utils/order-entity-records-by-search';
 
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 const icons = {
 	post,
@@ -118,14 +119,6 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
 				const isSiteEditor = getPath( window.location.href )?.includes(
 					'site-editor.php'
 				);
-				const extraArgs = isSiteEditor
-					? {
-							canvas: getQueryArg(
-								window.location.href,
-								'canvas'
-							),
-					  }
-					: {};
 
 				return {
 					...command,
@@ -133,7 +126,7 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
 						const args = {
 							postType,
 							postId: record.id,
-							...extraArgs,
+							canvas: 'edit',
 						};
 						const targetUrl = addQueryArgs(
 							'site-editor.php',
@@ -159,14 +152,6 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
 const getNavigationCommandLoaderPerTemplate = ( templateType ) =>
 	function useNavigationCommandLoader( { search } ) {
 		const history = useHistory();
-		const location = useLocation();
-
-		const isPatternsPage =
-			location?.params?.path === '/patterns' ||
-			location?.params?.postType === 'wp_block';
-		const didAccessPatternsPage =
-			!! location?.params?.didAccessPatternsPage;
-
 		const isBlockBasedTheme = useIsBlockBasedTheme();
 		const { records, isLoading } = useSelect( ( select ) => {
 			const { getEntityRecords } = select( coreStore );
@@ -196,31 +181,52 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) =>
 			) {
 				return [];
 			}
-			return orderedRecords.map( ( record ) => {
-				const isSiteEditor = getPath( window.location.href )?.includes(
-					'site-editor.php'
-				);
-				const extraArgs = isSiteEditor
-					? { canvas: getQueryArg( window.location.href, 'canvas' ) }
-					: {};
+			const isSiteEditor = getPath( window.location.href )?.includes(
+				'site-editor.php'
+			);
+			const result = [];
+			result.push(
+				...orderedRecords.map( ( record ) => {
+					return {
+						name: templateType + '-' + record.id,
+						searchLabel: record.title?.rendered + ' ' + record.id,
+						label: record.title?.rendered
+							? record.title?.rendered
+							: __( '(no title)' ),
+						icon: icons[ templateType ],
+						callback: ( { close } ) => {
+							const args = {
+								postType: templateType,
+								postId: record.id,
+								canvas: 'edit',
+							};
+							const targetUrl = addQueryArgs(
+								'site-editor.php',
+								args
+							);
+							if ( isSiteEditor ) {
+								history.push( args );
+							} else {
+								document.location = targetUrl;
+							}
+							close();
+						},
+					};
+				} )
+			);
 
-				return {
-					name: templateType + '-' + record.id,
-					searchLabel: record.title?.rendered + ' ' + record.id,
-					label: record.title?.rendered
-						? record.title?.rendered
-						: __( '(no title)' ),
-					icon: icons[ templateType ],
+			if (
+				orderedRecords?.length > 0 &&
+				templateType === 'wp_template_part'
+			) {
+				result.push( {
+					name: 'core/edit-site/open-template-parts',
+					label: __( 'Template parts' ),
+					icon: symbolFilled,
 					callback: ( { close } ) => {
 						const args = {
-							postType: templateType,
-							postId: record.id,
-							didAccessPatternsPage:
-								! isBlockBasedTheme &&
-								( isPatternsPage || didAccessPatternsPage )
-									? 1
-									: undefined,
-							...extraArgs,
+							postType: 'wp_template_part',
+							categoryId: 'all-parts',
 						};
 						const targetUrl = addQueryArgs(
 							'site-editor.php',
@@ -233,8 +239,9 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) =>
 						}
 						close();
 					},
-				};
-			} );
+				} );
+			}
+			return result;
 		}, [ isBlockBasedTheme, orderedRecords, history ] );
 
 		return {
@@ -257,89 +264,112 @@ function useSiteEditorBasicNavigationCommands() {
 	const isSiteEditor = getPath( window.location.href )?.includes(
 		'site-editor.php'
 	);
-	const isTemplatesAccessible = useIsTemplatesAccessible();
+	const canCreateTemplate = useSelect( ( select ) => {
+		return select( coreStore ).canUser( 'create', 'templates' );
+	}, [] );
 	const isBlockBasedTheme = useIsBlockBasedTheme();
 	const commands = useMemo( () => {
 		const result = [];
 
-		if ( ! isTemplatesAccessible || ! isBlockBasedTheme ) {
-			return result;
-		}
+		if ( canCreateTemplate && isBlockBasedTheme ) {
+			result.push( {
+				name: 'core/edit-site/open-navigation',
+				label: __( 'Navigation' ),
+				icon: navigation,
+				callback: ( { close } ) => {
+					const args = {
+						postType: 'wp_navigation',
+					};
+					const targetUrl = addQueryArgs( 'site-editor.php', args );
+					if ( isSiteEditor ) {
+						history.push( args );
+					} else {
+						document.location = targetUrl;
+					}
+					close();
+				},
+			} );
 
-		result.push( {
-			name: 'core/edit-site/open-navigation',
-			label: __( 'Navigation' ),
-			icon: navigation,
-			callback: ( { close } ) => {
-				const args = {
-					path: '/navigation',
-				};
-				const targetUrl = addQueryArgs( 'site-editor.php', args );
-				if ( isSiteEditor ) {
-					history.push( args );
-				} else {
-					document.location = targetUrl;
-				}
-				close();
-			},
-		} );
+			result.push( {
+				name: 'core/edit-site/open-styles',
+				label: __( 'Styles' ),
+				icon: styles,
+				callback: ( { close } ) => {
+					const args = {
+						path: '/wp_global_styles',
+					};
+					const targetUrl = addQueryArgs( 'site-editor.php', args );
+					if ( isSiteEditor ) {
+						history.push( args );
+					} else {
+						document.location = targetUrl;
+					}
+					close();
+				},
+			} );
 
-		result.push( {
-			name: 'core/edit-site/open-styles',
-			label: __( 'Styles' ),
-			icon: styles,
-			callback: ( { close } ) => {
-				const args = {
-					path: '/wp_global_styles',
-				};
-				const targetUrl = addQueryArgs( 'site-editor.php', args );
-				if ( isSiteEditor ) {
-					history.push( args );
-				} else {
-					document.location = targetUrl;
-				}
-				close();
-			},
-		} );
+			result.push( {
+				name: 'core/edit-site/open-pages',
+				label: __( 'Pages' ),
+				icon: page,
+				callback: ( { close } ) => {
+					const args = {
+						post_type: 'page',
+					};
+					const targetUrl = addQueryArgs( 'site-editor.php', args );
+					if ( isSiteEditor ) {
+						history.push( args );
+					} else {
+						document.location = targetUrl;
+					}
+					close();
+				},
+			} );
 
-		result.push( {
-			name: 'core/edit-site/open-pages',
-			label: __( 'Pages' ),
-			icon: page,
-			callback: ( { close } ) => {
-				const args = {
-					path: '/page',
-				};
-				const targetUrl = addQueryArgs( 'site-editor.php', args );
-				if ( isSiteEditor ) {
-					history.push( args );
-				} else {
-					document.location = targetUrl;
-				}
-				close();
-			},
-		} );
+			result.push( {
+				name: 'core/edit-site/open-templates',
+				label: __( 'Templates' ),
+				icon: layout,
+				callback: ( { close } ) => {
+					const args = {
+						postType: 'wp_template',
+					};
+					const targetUrl = addQueryArgs( 'site-editor.php', args );
+					if ( isSiteEditor ) {
+						history.push( args );
+					} else {
+						document.location = targetUrl;
+					}
+					close();
+				},
+			} );
+		}
 
 		result.push( {
-			name: 'core/edit-site/open-templates',
-			label: __( 'Templates' ),
-			icon: layout,
+			name: 'core/edit-site/open-patterns',
+			label: __( 'Patterns' ),
+			icon: symbol,
 			callback: ( { close } ) => {
-				const args = {
-					path: '/wp_template',
-				};
-				const targetUrl = addQueryArgs( 'site-editor.php', args );
-				if ( isSiteEditor ) {
-					history.push( args );
+				if ( canCreateTemplate ) {
+					const args = {
+						postType: 'wp_block',
+					};
+					const targetUrl = addQueryArgs( 'site-editor.php', args );
+					if ( isSiteEditor ) {
+						history.push( args );
+					} else {
+						document.location = targetUrl;
+					}
+					close();
 				} else {
-					document.location = targetUrl;
+					// If a user cannot access the site editor
+					document.location.href = 'edit.php?post_type=wp_block';
 				}
-				close();
 			},
 		} );
 
 		return result;
-	}, [ history, isSiteEditor, isTemplatesAccessible, isBlockBasedTheme ] );
+	}, [ history, isSiteEditor, canCreateTemplate, isBlockBasedTheme ] );
 
 	return {
 		commands,
diff --git a/packages/core-data/CHANGELOG.md b/packages/core-data/CHANGELOG.md
index b1d0859311fb3..810e8ab00d21c 100644
--- a/packages/core-data/CHANGELOG.md
+++ b/packages/core-data/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 ## Unreleased
 
+## 7.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 6.35.0 (2024-05-16)
+
 ## 6.34.0 (2024-05-02)
 
 ## 6.33.0 (2024-04-19)
@@ -95,7 +104,7 @@
 
 ### Breaking Changes
 
-–   Add TypeScript types to the built package (via "types": "build-types" in the package.json)
+– Add TypeScript types to the built package (via "types": "build-types" in the package.json)
 
 ## 4.14.0 (2022-08-24)
 
@@ -130,6 +139,7 @@
 ## 4.3.0 (2022-03-23)
 
 ### New Features
+
 -   The saveEntityRecord, saveEditedEntityRecord, and deleteEntityRecord actions now accept an optional throwOnError option (defaults to false). When set to true, any exceptions occurring when the action was executing are re-thrown, causing dispatch().saveEntityRecord() to reject with an error. ([#39258](https://github.com/WordPress/gutenberg/pull/39258))
 -   Added support for fetching block patterns and their categories, with the `getBlockPatterns` and `getBlockPatternCategories` selectors.
 
diff --git a/packages/core-data/package.json b/packages/core-data/package.json
index b2b09b71a4463..984de2f7628ec 100644
--- a/packages/core-data/package.json
+++ b/packages/core-data/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/core-data",
-	"version": "6.34.0",
+	"version": "7.0.0",
 	"description": "Access to and manipulation of core WordPress entities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/core-data/src/actions.js b/packages/core-data/src/actions.js
index 454250e8ad13c..36b0ba5f84c9d 100644
--- a/packages/core-data/src/actions.js
+++ b/packages/core-data/src/actions.js
@@ -396,7 +396,7 @@ export const editEntityRecord =
 			}, {} ),
 		};
 		if ( window.__experimentalEnableSync && entityConfig.syncConfig ) {
-			if ( process.env.IS_GUTENBERG_PLUGIN ) {
+			if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 				const objectId = entityConfig.getSyncObjectId( recordId );
 				getSyncProvider().update(
 					entityConfig.syncObjectType + '--edit',
@@ -598,10 +598,14 @@ export const saveEntityRecord =
 							return acc;
 						},
 						{
+							// Do not update the `status` if we have edited it when auto saving.
+							// It's very important to let the user explicitly save this change,
+							// because it can lead to unexpected results. An example would be to
+							// have a draft post and change the status to publish.
 							status:
 								data.status === 'auto-draft'
 									? 'draft'
-									: data.status,
+									: undefined,
 						}
 					);
 					updatedRecord = await __unstableFetch( {
diff --git a/packages/core-data/src/entities.js b/packages/core-data/src/entities.js
index e91744110faf3..8d09402087cf9 100644
--- a/packages/core-data/src/entities.js
+++ b/packages/core-data/src/entities.js
@@ -485,7 +485,7 @@ export const getOrLoadEntitiesConfig =
 
 		if ( configs?.length > 0 && hasConfig ) {
 			if ( window.__experimentalEnableSync ) {
-				if ( process.env.IS_GUTENBERG_PLUGIN ) {
+				if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 					registerSyncConfigs( configs );
 				}
 			}
@@ -506,7 +506,7 @@ export const getOrLoadEntitiesConfig =
 
 		configs = await loader.loadEntities();
 		if ( window.__experimentalEnableSync ) {
-			if ( process.env.IS_GUTENBERG_PLUGIN ) {
+			if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 				registerSyncConfigs( configs );
 			}
 		}
diff --git a/packages/core-data/src/entity-provider.js b/packages/core-data/src/entity-provider.js
index 51830f622a026..a2324c06e4dbc 100644
--- a/packages/core-data/src/entity-provider.js
+++ b/packages/core-data/src/entity-provider.js
@@ -20,39 +20,7 @@ import { updateFootnotesFromMeta } from './footnotes';
 
 const EMPTY_ARRAY = [];
 
-/**
- * Internal dependencies
- */
-import { rootEntitiesConfig, additionalEntityConfigLoaders } from './entities';
-
-const entityContexts = {
-	...rootEntitiesConfig.reduce( ( acc, loader ) => {
-		if ( ! acc[ loader.kind ] ) {
-			acc[ loader.kind ] = {};
-		}
-		acc[ loader.kind ][ loader.name ] = {
-			context: createContext( undefined ),
-		};
-		return acc;
-	}, {} ),
-	...additionalEntityConfigLoaders.reduce( ( acc, loader ) => {
-		acc[ loader.kind ] = {};
-		return acc;
-	}, {} ),
-};
-const getEntityContext = ( kind, name ) => {
-	if ( ! entityContexts[ kind ] ) {
-		throw new Error( `Missing entity config for kind: ${ kind }.` );
-	}
-
-	if ( ! entityContexts[ kind ][ name ] ) {
-		entityContexts[ kind ][ name ] = {
-			context: createContext( undefined ),
-		};
-	}
-
-	return entityContexts[ kind ][ name ].context;
-};
+const EntityContext = createContext( {} );
 
 /**
  * Context provider component for providing
@@ -68,8 +36,22 @@ const getEntityContext = ( kind, name ) => {
  *                   the entity's context provider.
  */
 export default function EntityProvider( { kind, type: name, id, children } ) {
-	const Provider = getEntityContext( kind, name ).Provider;
-	return <Provider value={ id }>{ children }</Provider>;
+	const parent = useContext( EntityContext );
+	const childContext = useMemo(
+		() => ( {
+			...parent,
+			[ kind ]: {
+				...parent?.[ kind ],
+				[ name ]: id,
+			},
+		} ),
+		[ parent, kind, name, id ]
+	);
+	return (
+		<EntityContext.Provider value={ childContext }>
+			{ children }
+		</EntityContext.Provider>
+	);
 }
 
 /**
@@ -80,7 +62,8 @@ export default function EntityProvider( { kind, type: name, id, children } ) {
  * @param {string} name The entity name.
  */
 export function useEntityId( kind, name ) {
-	return useContext( getEntityContext( kind, name ) );
+	const context = useContext( EntityContext );
+	return context?.[ kind ]?.[ name ];
 }
 
 /**
diff --git a/packages/core-data/src/entity-types/theme.ts b/packages/core-data/src/entity-types/theme.ts
index 761c6461d4aca..75826c9110b65 100644
--- a/packages/core-data/src/entity-types/theme.ts
+++ b/packages/core-data/src/entity-types/theme.ts
@@ -129,6 +129,10 @@ declare module './base-entity-records' {
 			 * Custom font sizes if defined by the theme.
 			 */
 			'editor-font-sizes': boolean | FontSize[];
+			/**
+			 * Custom spacing sizes if defined by the theme.
+			 */
+			'editor-spacing-sizes': boolean | SpacingSize[];
 			/**
 			 * Custom gradient presets if defined by the theme.
 			 */
@@ -212,6 +216,12 @@ declare module './base-entity-records' {
 			slug: string;
 		}
 
+		export interface SpacingSize {
+			name: string;
+			size: number;
+			slug: string;
+		}
+
 		export interface GradientPreset {
 			name: string;
 			gradient: string;
diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js
index 7de2c354ba2bf..3e5373eda6d6a 100644
--- a/packages/core-data/src/resolvers.js
+++ b/packages/core-data/src/resolvers.js
@@ -81,7 +81,7 @@ export const getEntityRecord =
 				entityConfig.syncConfig &&
 				! query
 			) {
-				if ( process.env.IS_GUTENBERG_PLUGIN ) {
+				if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 					const objectId = entityConfig.getSyncObjectId( key );
 
 					// Loads the persisted document.
@@ -712,7 +712,8 @@ export const getDefaultTemplateId =
 		const template = await apiFetch( {
 			path: addQueryArgs( '/wp/v2/templates/lookup', query ),
 		} );
-		if ( template ) {
+		// Endpoint may return an empty object if no template is found.
+		if ( template?.id ) {
 			dispatch.receiveDefaultTemplateId( query, template.id );
 		}
 	};
diff --git a/packages/create-block-interactive-template/CHANGELOG.md b/packages/create-block-interactive-template/CHANGELOG.md
index e6e241cd31024..223f5de7796c6 100644
--- a/packages/create-block-interactive-template/CHANGELOG.md
+++ b/packages/create-block-interactive-template/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 2.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 1.21.0 (2024-05-16)
+
 ## 1.20.0 (2024-05-02)
 
 ## 1.19.0 (2024-04-19)
diff --git a/packages/create-block-interactive-template/package.json b/packages/create-block-interactive-template/package.json
index 8b42c28b7dbb0..0e11939d48402 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": "1.20.0",
+	"version": "2.0.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",
@@ -19,6 +19,10 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
 	"publishConfig": {
 		"access": "public"
 	}
diff --git a/packages/create-block-tutorial-template/CHANGELOG.md b/packages/create-block-tutorial-template/CHANGELOG.md
index d0c563e5ef5b2..00537097ff945 100644
--- a/packages/create-block-tutorial-template/CHANGELOG.md
+++ b/packages/create-block-tutorial-template/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.12.0 (2024-05-16)
+
 ## 3.11.0 (2024-05-02)
 
 ## 3.10.0 (2024-04-19)
diff --git a/packages/create-block-tutorial-template/package.json b/packages/create-block-tutorial-template/package.json
index f16c0a87e2c2f..1b2c920457641 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": "3.11.0",
+	"version": "4.0.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",
@@ -19,6 +19,10 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
 	"publishConfig": {
 		"access": "public"
 	}
diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md
index 120110f8a538e..0362b2a6f1341 100644
--- a/packages/create-block/CHANGELOG.md
+++ b/packages/create-block/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 4.43.0 (2024-05-31)
+
+## 4.42.0 (2024-05-16)
+
 ## 4.41.0 (2024-05-02)
 
 ## 4.40.0 (2024-04-19)
diff --git a/packages/create-block/README.md b/packages/create-block/README.md
index d78f8973b44ff..55cea45c9afe7 100644
--- a/packages/create-block/README.md
+++ b/packages/create-block/README.md
@@ -19,7 +19,7 @@ $ npm start
 The `slug` provided (`todo-list` in the example) defines the folder name for the scaffolded plugin and the internal block name. The WordPress plugin generated must [be installed manually](https://wordpress.org/documentation/article/manage-plugins/#manual-plugin-installation-1).
 
 
-_(requires `node` version `14.0.0` or above, and `npm` version `6.14.4` or above)_
+_(requires `node` version `20.10.0` or above, and `npm` version `10.2.3` or above)_
 
 
 > [Watch a video introduction to create-block on Learn.wordpress.org](https://learn.wordpress.org/tutorial/using-the-create-block-tool/)
diff --git a/packages/create-block/lib/init-wp-scripts.js b/packages/create-block/lib/init-wp-scripts.js
index ca0101957f47f..531eb970d8925 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 --save-dev', {
+	await command( 'npm install @wordpress/scripts@27 --save-dev', {
 		cwd,
 	} );
 
diff --git a/packages/create-block/package.json b/packages/create-block/package.json
index 4cd64aa8e3581..00acf80f0ac9d 100644
--- a/packages/create-block/package.json
+++ b/packages/create-block/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block",
-	"version": "4.41.0",
+	"version": "4.43.0",
 	"description": "Generates PHP, JS and CSS code for registering a block for a WordPress plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,8 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14",
-		"npm": ">=6.14.4"
+		"node": ">=20.10.0",
+		"npm": ">=10.2.3"
 	},
 	"files": [
 		"lib"
diff --git a/packages/customize-widgets/CHANGELOG.md b/packages/customize-widgets/CHANGELOG.md
index 5fe27f4eeb526..aec25853b2914 100644
--- a/packages/customize-widgets/CHANGELOG.md
+++ b/packages/customize-widgets/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.35.0 (2024-05-16)
+
 ## 4.34.0 (2024-05-02)
 
 ## 4.33.0 (2024-04-19)
diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
index d0ba3717ec287..ec320eee22a43 100644
--- a/packages/customize-widgets/package.json
+++ b/packages/customize-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/customize-widgets",
-	"version": "4.34.0",
+	"version": "5.0.0",
 	"description": "Widgets blocks in Customizer Module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -17,7 +17,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -44,7 +45,7 @@
 		"@wordpress/preferences": "file:../preferences",
 		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/widgets": "file:../widgets",
-		"classnames": "^2.3.1",
+		"clsx": "^2.1.1",
 		"fast-deep-equal": "^3.1.3"
 	},
 	"peerDependencies": {
diff --git a/packages/customize-widgets/src/components/header/index.js b/packages/customize-widgets/src/components/header/index.js
index 5bd0b2c2f4d47..dc8d435a55c27 100644
--- a/packages/customize-widgets/src/components/header/index.js
+++ b/packages/customize-widgets/src/components/header/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -44,7 +44,7 @@ function Header( {
 	return (
 		<>
 			<div
-				className={ classnames( 'customize-widgets-header', {
+				className={ clsx( 'customize-widgets-header', {
 					'is-fixed-toolbar-active': isFixedToolbarActive,
 				} ) }
 			>
diff --git a/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/index.js b/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/index.js
index f8467d31b52b4..b4c7a1bcd46d0 100644
--- a/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/index.js
+++ b/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -49,7 +49,7 @@ const ShortcutList = ( { shortcuts } ) => (
 
 const ShortcutSection = ( { title, shortcuts, className } ) => (
 	<section
-		className={ classnames(
+		className={ clsx(
 			'customize-widgets-keyboard-shortcut-help-modal__section',
 			className
 		) }
diff --git a/packages/customize-widgets/src/index.js b/packages/customize-widgets/src/index.js
index 5b438cac86f49..5de010fa8bd37 100644
--- a/packages/customize-widgets/src/index.js
+++ b/packages/customize-widgets/src/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createRoot } from '@wordpress/element';
+import { createRoot, StrictMode } from '@wordpress/element';
 import {
 	registerCoreBlocks,
 	__experimentalGetCoreBlocks,
@@ -61,7 +61,7 @@ export function initialize( editorName, blockEditorSettings ) {
 	} );
 	registerCoreBlocks( coreBlocks );
 	registerLegacyWidgetBlock();
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
 			enableFSEBlocks: ENABLE_EXPERIMENTAL_FSE_BLOCKS,
 		} );
@@ -92,11 +92,13 @@ export function initialize( editorName, blockEditorSettings ) {
 		} );
 
 		createRoot( container ).render(
-			<CustomizeWidgets
-				api={ wp.customize }
-				sidebarControls={ sidebarControls }
-				blockEditorSettings={ blockEditorSettings }
-			/>
+			<StrictMode>
+				<CustomizeWidgets
+					api={ wp.customize }
+					sidebarControls={ sidebarControls }
+					blockEditorSettings={ blockEditorSettings }
+				/>
+			</StrictMode>
 		);
 	} );
 }
diff --git a/packages/data-controls/CHANGELOG.md b/packages/data-controls/CHANGELOG.md
index 55fe476a3a9d4..6b94332e70db8 100644
--- a/packages/data-controls/CHANGELOG.md
+++ b/packages/data-controls/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.27.0 (2024-05-16)
+
 ## 3.26.0 (2024-05-02)
 
 ## 3.25.0 (2024-04-19)
diff --git a/packages/data-controls/package.json b/packages/data-controls/package.json
index 23cec23cfbba4..88fa9ae4faf26 100644
--- a/packages/data-controls/package.json
+++ b/packages/data-controls/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data-controls",
-	"version": "3.26.0",
+	"version": "4.0.0",
 	"description": "A set of common controls for the @wordpress/data api.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/data/CHANGELOG.md b/packages/data/CHANGELOG.md
index 3c354e0e52875..0e72225f04c80 100644
--- a/packages/data/CHANGELOG.md
+++ b/packages/data/CHANGELOG.md
@@ -2,17 +2,25 @@
 
 ## Unreleased
 
+## 10.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 9.28.0 (2024-05-16)
+
 ## 9.27.0 (2024-05-02)
 
 ## 9.26.0 (2024-04-19)
 
-- Add new `createSelector` function for creating memoized store selectors ([#60370](https://github.com/WordPress/gutenberg/pull/60370)).
+-   Add new `createSelector` function for creating memoized store selectors ([#60370](https://github.com/WordPress/gutenberg/pull/60370)).
 
 ## 9.25.0 (2024-04-03)
 
 ## 9.24.0 (2024-03-21)
 
--  Deprecate the `getIsResolved` meta-selector ([#59679](https://github.com/WordPress/gutenberg/pull/59679)).
+-   Deprecate the `getIsResolved` meta-selector ([#59679](https://github.com/WordPress/gutenberg/pull/59679)).
 
 ## 9.23.0 (2024-03-06)
 
@@ -38,13 +46,13 @@
 
 ### Bug Fix
 
--  Fix `combineReducers()` types ([#55321](https://github.com/WordPress/gutenberg/pull/55321)).
+-   Fix `combineReducers()` types ([#55321](https://github.com/WordPress/gutenberg/pull/55321)).
 
 ## 9.13.0 (2023-10-05)
 
 ### Enhancements
 
--  Change implementation of `combineReducers` so that it doesn't use `eval` internally, and can run with a CSP policy that doesn't allow `unsafe-eval` ([#54606](https://github.com/WordPress/gutenberg/pull/54606)).
+-   Change implementation of `combineReducers` so that it doesn't use `eval` internally, and can run with a CSP policy that doesn't allow `unsafe-eval` ([#54606](https://github.com/WordPress/gutenberg/pull/54606)).
 
 ## 9.12.0 (2023-09-20)
 
@@ -54,7 +62,7 @@
 
 ### Enhancements
 
--  Warn if the `useSelect` hook returns different values when called with the same state and parameters ([#53666](https://github.com/WordPress/gutenberg/pull/53666)).
+-   Warn if the `useSelect` hook returns different values when called with the same state and parameters ([#53666](https://github.com/WordPress/gutenberg/pull/53666)).
 
 ## 9.9.0 (2023-08-10)
 
diff --git a/packages/data/package.json b/packages/data/package.json
index 0827104788f09..3246870cbe52f 100644
--- a/packages/data/package.json
+++ b/packages/data/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data",
-	"version": "9.27.0",
+	"version": "10.0.0",
 	"description": "Data module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index 5b726e21f0f14..8b3b3656258c9 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -2,30 +2,52 @@
 
 ## Unreleased
 
+## 2.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Legacy support for `in` and `notIn` operators introduced in 0.8 .0 has been removed and they no longer work. Please, convert them to `is` and `isNot` respectively.
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+### Internal
+
+-   Remove some unused dependencies ([#62010](https://github.com/WordPress/gutenberg/pull/62010)).
+
+### Enhancement
+
+-   `label` prop in Actions API can be either a `string` value or a `function`, in case we want to use information from the selected items. ([#61942](https://github.com/WordPress/gutenberg/pull/61942)).
+
+## 1.2.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
 ## 1.1.0 (2024-05-02)
 
 ## 1.0.0 (2024-04-19)
 
 ### Breaking changes
 
-- Removed the `onDetailsChange` event only available for the list layout. We are looking into adding actions to the list layout, including primary ones.
+-   Removed the `onDetailsChange` event only available for the list layout. We are looking into adding actions to the list layout, including primary ones.
 
 ## 0.9.0 (2024-04-03)
 
 ### Enhancement
 
-- The `enumeration` type has been removed and we'll introduce new field types soon. The existing filters will still work as before given they checked for field.elements, which is still a condition filters should have.
+-   The `enumeration` type has been removed and we'll introduce new field types soon. The existing filters will still work as before given they checked for field.elements, which is still a condition filters should have.
 
 ## 0.8.0 (2024-03-21)
 
 ### Enhancement
 
-- Two new operators have been added: `isAll` and `isNotAll`. These are meant to represent `AND` operations. For example, `Category is all: Book, Review, Science Fiction` would represent all items that have all three categories selected.
-- DataViews now supports multi-selection. A new set of filter operators has been introduced: `is`, `isNot`, `isAny`, `isNone`. Single-selection operators are `is` and `isNot`, and multi-selection operators are `isAny` and `isNone`. If no operators are declared for a filter, it will support multi-selection. Additionally, the old filter operators `in` and `notIn` operators have been deprecated and will work as `is` and `isNot` respectively. Please, migrate to the new operators as they'll be removed soon.
+-   Two new operators have been added: `isAll` and `isNotAll`. These are meant to represent `AND` operations. For example, `Category is all: Book, Review, Science Fiction` would represent all items that have all three categories selected.
+-   DataViews now supports multi-selection. A new set of filter operators has been introduced: `is`, `isNot`, `isAny`, `isNone`. Single-selection operators are `is` and `isNot`, and multi-selection operators are `isAny` and `isNone`. If no operators are declared for a filter, it will support multi-selection. Additionally, the old filter operators `in` and `notIn` operators have been deprecated and will work as `is` and `isNot` respectively. Please, migrate to the new operators as they'll be removed soon.
 
 ### Breaking changes
 
-- Removed the `getPaginationResults` and `sortByTextFields` utils and replaced them with a unique `filterSortAndPaginate` function.
+-   Removed the `getPaginationResults` and `sortByTextFields` utils and replaced them with a unique `filterSortAndPaginate` function.
 
 ## 0.7.0 (2024-03-06)
 
diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
index d0eab0c46d059..41595b4d58adc 100644
--- a/packages/dataviews/README.md
+++ b/packages/dataviews/README.md
@@ -14,7 +14,6 @@ npm install @wordpress/dataviews --save
 
 ```jsx
 const Example = () => {
-
 	// Declare data, fields, etc.
 
 	return (
@@ -27,7 +26,7 @@ const Example = () => {
 			paginationInfo={ paginationInfo }
 		/>
 	);
-}
+};
 ```
 
 ## Properties
@@ -42,12 +41,14 @@ Example:
 const data = [
 	{
 		id: 1,
-		title: "Title",
-		author: "Admin",
-		date: "2012-04-23T18:25:43.511Z"
+		title: 'Title',
+		author: 'Admin',
+		date: '2012-04-23T18:25:43.511Z',
 	},
-	{ /* ... */ }
-]
+	{
+		/* ... */
+	},
+];
 ```
 
 By default, dataviews would use each record's `id` as an unique identifier. If it's not, the consumer should provide a `getItemId` function that returns one.
@@ -125,8 +126,8 @@ Each field is an object with the following properties:
 -   `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.
-    - `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.
+    -   `operators`: the list of 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`
 
@@ -140,7 +141,7 @@ const view = {
 	search: '',
 	filters: [
 		{ field: 'author', operator: 'is', value: 2 },
-		{ field: 'status', operator: 'isAny', value: [ 'publish', 'draft'] }
+		{ field: 'status', operator: 'isAny', value: [ 'publish', 'draft' ] },
 	],
 	page: 1,
 	perPage: 5,
@@ -150,7 +151,7 @@ const view = {
 	},
 	hiddenFields: [ 'date', 'featured-image' ],
 	layout: {},
-}
+};
 ```
 
 Properties:
@@ -164,8 +165,8 @@ 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`.
+    -   `field`: the field used for sorting the dataset.
+    -   `direction`: the direction to use for sorting, one of `asc` or `desc`.
 -   `hiddenFields`: the `id` of the fields that are hidden in the UI.
 -   `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.
@@ -192,7 +193,11 @@ function MyCustomPageTable() {
 		search: '',
 		filters: [
 			{ field: 'author', operator: 'is', value: 2 },
-			{ field: 'status', operator: 'isAny', value: [ 'publish', 'draft' ] }
+			{
+				field: 'status',
+				operator: 'isAny',
+				value: [ 'publish', 'draft' ],
+			},
 		],
 		hiddenFields: [ 'date', 'featured-image' ],
 		layout: {},
@@ -219,9 +224,7 @@ function MyCustomPageTable() {
 		};
 	}, [ view ] );
 
-	const {
-		records
-	} = useEntityRecords( 'postType', 'page', queryArgs );
+	const { records } = useEntityRecords( 'postType', 'page', queryArgs );
 
 	return (
 		<DataViews
@@ -241,7 +244,7 @@ Collection of operations that can be performed upon each record.
 Each action is an object with the following properties:
 
 -   `id`: string, required. Unique identifier of the action. For example, `move-to-trash`.
--   `label`: string, required. User facing description of the action. For example, `Move to Trash`.
+-   `label`: string|function, required. User facing description of the action. For example, `Move to Trash`. In case we want to adjust the label based on the selected items, a function which accepts the selected records as input can be provided. This function should always return a `string` value.
 -   `isPrimary`: boolean, optional. Whether the action should be listed inline (primary) or in hidden in the more actions menu (secondary).
 -   `icon`: icon to show for primary actions. It's required for a primary action, otherwise the action would be considered secondary.
 -   `isEligible`: function, optional. Whether the action can be performed for a given record. If not present, the action is considered to be eligible for all items. It takes the given record as input.
@@ -252,8 +255,8 @@ Each action is an object with the following properties:
 
 ### `paginationInfo`: `Object`
 
-- `totalItems`: the total number of items in the datasets.
-- `totalPages`: the total number of pages, taking into account the total items in the dataset and the number of items per page provided by the user.
+-   `totalItems`: the total number of items in the datasets.
+-   `totalPages`: the total number of pages, taking into account the total items in the dataset and the number of items per page provided by the user.
 
 ### `search`: `boolean`
 
@@ -283,9 +286,9 @@ Callback that signals the user selected one of more items, and takes them as par
 
 ### Layouts
 
-- `table`: the view uses a table layout.
-- `grid`: the view uses a grid layout.
-- `list`: the view uses a list layout.
+-   `table`: the view uses a table layout.
+-   `grid`: the view uses a grid layout.
+-   `list`: the view uses a list layout.
 
 ### Fields
 
@@ -295,13 +298,13 @@ Callback that signals the user selected one of more items, and takes them as par
 
 Allowed operators:
 
-| Operator | Selection | Description | Example |
-| --- | ---  | --- | --- |
-| `is` | Single item | `EQUAL TO`. The item's field is equal to a single value. | Author is Admin |
-| `isNot` | Single item | `NOT EQUAL TO`. The item's field is not equal to a single value. | Author is not Admin |
-| `isAny` | Multiple items | `OR`. The item's field is present in a list of values. | Author is any: Admin, Editor |
-| `isNone` | Multiple items | `NOT OR`. The item's field is not present in a list of values. | Author is none: Admin, Editor |
-| `isAll` | Multiple items | `AND`. The item's field has all of the values in the list. | Category is all: Book, Review, Science Fiction |
+| Operator   | Selection      | Description                                                             | Example                                            |
+| ---------- | -------------- | ----------------------------------------------------------------------- | -------------------------------------------------- |
+| `is`       | Single item    | `EQUAL TO`. The item's field is equal to a single value.                | Author is Admin                                    |
+| `isNot`    | Single item    | `NOT EQUAL TO`. The item's field is not equal to a single value.        | Author is not Admin                                |
+| `isAny`    | Multiple items | `OR`. The item's field is present in a list of values.                  | Author is any: Admin, Editor                       |
+| `isNone`   | Multiple items | `NOT OR`. The item's field is not present in a list of values.          | Author is none: Admin, Editor                      |
+| `isAll`    | Multiple items | `AND`. The item's field has all of the values in the list.              | Category is all: Book, Review, Science Fiction     |
 | `isNotAll` | Multiple items | `NOT AND`. The item's field doesn't have all of the values in the list. | Category is not all: Book, Review, Science Fiction |
 
 `is` and `isNot` are single-selection operators, while `isAny`, `isNone`, `isAll`, and `isNotALl` are multi-selection. By default, a filter with no operators declared will support the `isAny` and `isNone` multi-selection operators. A filter cannot mix single-selection & multi-selection operators; if a single-selection operator is present in the list of valid operators, the multi-selection ones will be discarded and the filter won't allow selecting more than one item.
diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json
index 818d5a82a8117..723441e0e8b81 100644
--- a/packages/dataviews/package.json
+++ b/packages/dataviews/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "1.1.0",
+	"version": "2.0.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",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -29,16 +30,14 @@
 	"dependencies": {
 		"@ariakit/react": "^0.3.12",
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/element": "file:../element",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
-		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/primitives": "file:../primitives",
 		"@wordpress/private-apis": "file:../private-apis",
-		"classnames": "^2.3.1",
+		"clsx": "^2.1.1",
 		"remove-accents": "^0.5.0"
 	},
 	"peerDependencies": {
diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.tsx
similarity index 79%
rename from packages/dataviews/src/add-filter.js
rename to packages/dataviews/src/add-filter.tsx
index 37c057201a616..b9fc6e9c504c8 100644
--- a/packages/dataviews/src/add-filter.js
+++ b/packages/dataviews/src/add-filter.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { Ref } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -12,6 +17,7 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
+import type { NormalizedFilter, View } from './types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -19,7 +25,17 @@ const {
 	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
 } = unlock( componentsPrivateApis );
 
-function AddFilter( { filters, view, onChangeView, setOpenedFilter }, ref ) {
+interface AddFilterProps {
+	filters: NormalizedFilter[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+	setOpenedFilter: ( filter: string | null ) => void;
+}
+
+function AddFilter(
+	{ filters, view, onChangeView, setOpenedFilter }: AddFilterProps,
+	ref: Ref< HTMLButtonElement >
+) {
 	if ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) {
 		return null;
 	}
diff --git a/packages/dataviews/src/bulk-actions-toolbar.tsx b/packages/dataviews/src/bulk-actions-toolbar.tsx
new file mode 100644
index 0000000000000..3cce31c513904
--- /dev/null
+++ b/packages/dataviews/src/bulk-actions-toolbar.tsx
@@ -0,0 +1,272 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ToolbarButton,
+	Toolbar,
+	ToolbarGroup,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
+import { useMemo, useState, useRef } from '@wordpress/element';
+import { _n, sprintf, __ } from '@wordpress/i18n';
+import { closeSmall } from '@wordpress/icons';
+import { useReducedMotion } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { ActionWithModal } from './item-actions';
+import type { Action, AnyItem } from './types';
+import type { ActionTriggerProps } from './item-actions';
+
+interface ActionButtonProps< Item extends AnyItem > {
+	action: Action< Item >;
+	selectedItems: Item[];
+	actionInProgress: string | null;
+	setActionInProgress: ( actionId: string | null ) => void;
+}
+
+interface ToolbarContentProps< Item extends AnyItem > {
+	selection: string[];
+	actionsToShow: Action< Item >[];
+	selectedItems: Item[];
+	onSelectionChange: ( selection: Item[] ) => void;
+}
+
+interface BulkActionsToolbarProps< Item extends AnyItem > {
+	data: Item[];
+	selection: string[];
+	actions: Action< Item >[];
+	onSelectionChange: ( selection: Item[] ) => void;
+	getItemId: ( item: Item ) => string;
+}
+
+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 extends AnyItem >( {
+	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 }
+			__experimentalIsFocusable
+			tooltipPosition="top"
+		/>
+	);
+}
+
+const EMPTY_ARRAY: [] = [];
+
+function ActionButton< Item extends AnyItem >( {
+	action,
+	selectedItems,
+	actionInProgress,
+	setActionInProgress,
+}: ActionButtonProps< Item > ) {
+	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 );
+			} }
+			items={ selectedEligibleItems }
+			isBusy={ actionInProgress === action.id }
+		/>
+	);
+}
+
+function renderToolbarContent< Item extends AnyItem >(
+	selection: string[],
+	actionsToShow: Action< Item >[],
+	selectedItems: Item[],
+	actionInProgress: string | null,
+	setActionInProgress: ( actionId: string | null ) => void,
+	onSelectionChange: ( selection: Item[] ) => void
+) {
+	return (
+		<>
+			<ToolbarGroup>
+				<div className="dataviews-bulk-actions__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={ () => {
+						onSelectionChange( EMPTY_ARRAY );
+					} }
+				/>
+			</ToolbarGroup>
+		</>
+	);
+}
+
+function ToolbarContent< Item extends AnyItem >( {
+	selection,
+	actionsToShow,
+	selectedItems,
+	onSelectionChange,
+}: 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,
+			onSelectionChange
+		);
+	} else if ( ! buttons.current ) {
+		buttons.current = renderToolbarContent(
+			selection,
+			actionsToShow,
+			selectedItems,
+			actionInProgress,
+			setActionInProgress,
+			onSelectionChange
+		);
+	}
+	return buttons.current;
+}
+
+export default function BulkActionsToolbar< Item extends AnyItem >( {
+	data,
+	selection,
+	actions = EMPTY_ARRAY,
+	onSelectionChange,
+	getItemId,
+}: BulkActionsToolbarProps< Item > ) {
+	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 label={ __( 'Bulk actions' ) }>
+					<div className="dataviews-bulk-actions-toolbar-wrapper">
+						<ToolbarContent
+							selection={ selection }
+							actionsToShow={ actionsToShow }
+							selectedItems={ selectedItems }
+							onSelectionChange={ onSelectionChange }
+						/>
+					</div>
+				</Toolbar>
+			</motion.div>
+		</AnimatePresence>
+	);
+}
diff --git a/packages/dataviews/src/bulk-actions.js b/packages/dataviews/src/bulk-actions.tsx
similarity index 67%
rename from packages/dataviews/src/bulk-actions.js
rename to packages/dataviews/src/bulk-actions.tsx
index 5e4139fe0622e..9be8f6b6d2d7f 100644
--- a/packages/dataviews/src/bulk-actions.js
+++ b/packages/dataviews/src/bulk-actions.tsx
@@ -13,6 +13,7 @@ import { useMemo, useState, useCallback, useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
+import type { Action, ActionModal, AnyItem } from './types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -21,40 +22,85 @@ const {
 	DropdownMenuSeparatorV2: DropdownMenuSeparator,
 } = unlock( componentsPrivateApis );
 
-export function useHasAPossibleBulkAction( actions, item ) {
+interface ActionWithModalProps< Item extends AnyItem > {
+	action: ActionModal< Item >;
+	selectedItems: Item[];
+	setActionWithModal: ( action?: ActionModal< Item > ) => void;
+	onMenuOpenChange: ( isOpen: boolean ) => void;
+}
+
+interface BulkActionsItemProps< Item extends AnyItem > {
+	action: Action< Item >;
+	selectedItems: Item[];
+	setActionWithModal: ( action?: ActionModal< Item > ) => void;
+}
+
+interface ActionsMenuGroupProps< Item extends AnyItem > {
+	actions: Action< Item >[];
+	selectedItems: Item[];
+	setActionWithModal: ( action?: ActionModal< Item > ) => void;
+}
+
+interface BulkActionsProps< Item extends AnyItem > {
+	data: Item[];
+	actions: Action< Item >[];
+	selection: string[];
+	onSelectionChange: ( selection: Item[] ) => void;
+	getItemId: ( item: Item ) => string;
+}
+
+export function useHasAPossibleBulkAction< Item extends AnyItem >(
+	actions: Action< Item >[],
+	item: Item
+) {
 	return useMemo( () => {
 		return actions.some( ( action ) => {
-			return action.supportsBulk && action.isEligible( item );
+			return (
+				action.supportsBulk &&
+				( ! action.isEligible || action.isEligible( item ) )
+			);
 		} );
 	}, [ actions, item ] );
 }
 
-export function useSomeItemHasAPossibleBulkAction( actions, data ) {
+export function useSomeItemHasAPossibleBulkAction< Item extends AnyItem >(
+	actions: Action< Item >[],
+	data: Item[]
+) {
 	return useMemo( () => {
 		return data.some( ( item ) => {
 			return actions.some( ( action ) => {
-				return action.supportsBulk && action.isEligible( item );
+				return (
+					action.supportsBulk &&
+					( ! action.isEligible || action.isEligible( item ) )
+				);
 			} );
 		} );
 	}, [ actions, data ] );
 }
 
-function ActionWithModal( {
+function ActionWithModal< Item extends AnyItem >( {
 	action,
 	selectedItems,
 	setActionWithModal,
 	onMenuOpenChange,
-} ) {
+}: ActionWithModalProps< Item > ) {
 	const eligibleItems = useMemo( () => {
-		return selectedItems.filter( ( item ) => action.isEligible( item ) );
+		return selectedItems.filter(
+			( item ) => ! action.isEligible || action.isEligible( item )
+		);
 	}, [ action, selectedItems ] );
 	const { RenderModal, hideModalHeader } = action;
 	const onCloseModal = useCallback( () => {
 		setActionWithModal( undefined );
 	}, [ setActionWithModal ] );
+	const label =
+		typeof action.label === 'string'
+			? action.label
+			: action.label( selectedItems );
 	return (
 		<Modal
-			title={ ! hideModalHeader && action.label }
+			title={ ! hideModalHeader ? label : undefined }
 			__experimentalHideHeader={ !! hideModalHeader }
 			onRequestClose={ onCloseModal }
 			overlayClassName="dataviews-action-modal"
@@ -62,18 +108,24 @@ function ActionWithModal( {
 			<RenderModal
 				items={ eligibleItems }
 				closeModal={ onCloseModal }
-				onPerform={ () => onMenuOpenChange( false ) }
+				onActionPerformed={ () => onMenuOpenChange( false ) }
 			/>
 		</Modal>
 	);
 }
 
-function BulkActionItem( { action, selectedItems, setActionWithModal } ) {
+function BulkActionItem< Item extends AnyItem >( {
+	action,
+	selectedItems,
+	setActionWithModal,
+}: BulkActionsItemProps< Item > ) {
 	const eligibleItems = useMemo( () => {
-		return selectedItems.filter( ( item ) => action.isEligible( item ) );
+		return selectedItems.filter(
+			( item ) => ! action.isEligible || action.isEligible( item )
+		);
 	}, [ action, selectedItems ] );
 
-	const shouldShowModal = !! action.RenderModal;
+	const shouldShowModal = 'RenderModal' in action;
 
 	return (
 		<DropdownMenuItem
@@ -96,7 +148,11 @@ function BulkActionItem( { action, selectedItems, setActionWithModal } ) {
 	);
 }
 
-function ActionsMenuGroup( { actions, selectedItems, setActionWithModal } ) {
+function ActionsMenuGroup< Item extends AnyItem >( {
+	actions,
+	selectedItems,
+	setActionWithModal,
+}: ActionsMenuGroupProps< Item > ) {
 	return (
 		<>
 			<DropdownMenuGroup>
@@ -114,22 +170,26 @@ function ActionsMenuGroup( { actions, selectedItems, setActionWithModal } ) {
 	);
 }
 
-export default function BulkActions( {
+export default function BulkActions< Item extends AnyItem >( {
 	data,
 	actions,
 	selection,
 	onSelectionChange,
 	getItemId,
-} ) {
+}: BulkActionsProps< Item > ) {
 	const bulkActions = useMemo(
 		() => actions.filter( ( action ) => action.supportsBulk ),
 		[ actions ]
 	);
 	const [ isMenuOpen, onMenuOpenChange ] = useState( false );
-	const [ actionWithModal, setActionWithModal ] = useState();
+	const [ actionWithModal, setActionWithModal ] = useState<
+		ActionModal< Item > | undefined
+	>();
 	const selectableItems = useMemo( () => {
 		return data.filter( ( item ) => {
-			return bulkActions.some( ( action ) => action.isEligible( item ) );
+			return bulkActions.some(
+				( action ) => ! action.isEligible || action.isEligible( item )
+			);
 		} );
 	}, [ data, bulkActions ] );
 
diff --git a/packages/dataviews/src/constants.ts b/packages/dataviews/src/constants.ts
index 9c045aef75326..48753470280d0 100644
--- a/packages/dataviews/src/constants.ts
+++ b/packages/dataviews/src/constants.ts
@@ -3,6 +3,11 @@
  */
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import type { Operator } from './types';
+
 // Filter operators.
 export const OPERATOR_IS = 'is';
 export const OPERATOR_IS_NOT = 'isNot';
@@ -19,7 +24,7 @@ export const ALL_OPERATORS = [
 	OPERATOR_IS_ALL,
 	OPERATOR_IS_NOT_ALL,
 ];
-export const OPERATORS = {
+export const OPERATORS: Record< Operator, { key: string; label: string } > = {
 	[ OPERATOR_IS ]: {
 		key: 'is-filter',
 		label: __( 'Is' ),
@@ -46,10 +51,12 @@ export const OPERATORS = {
 	},
 };
 
-// Sorting
-export const SORTING_DIRECTIONS = {
-	asc: { label: __( 'Sort ascending' ) },
-	desc: { label: __( 'Sort descending' ) },
+export const SORTING_DIRECTIONS = [ 'asc', 'desc' ] as const;
+export const sortArrows = { asc: '↑', desc: '↓' };
+export const sortValues = { asc: 'ascending', desc: 'descending' } as const;
+export const sortLabels = {
+	asc: __( 'Sort ascending' ),
+	desc: __( 'Sort descending' ),
 };
 
 // View layouts.
diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.tsx
similarity index 67%
rename from packages/dataviews/src/dataviews.js
rename to packages/dataviews/src/dataviews.tsx
index d8d6281af9498..875746ceb52c3 100644
--- a/packages/dataviews/src/dataviews.js
+++ b/packages/dataviews/src/dataviews.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentType } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -15,21 +20,47 @@ import { LAYOUT_TABLE, LAYOUT_GRID } from './constants';
 import { VIEW_LAYOUTS } from './layouts';
 import BulkActions from './bulk-actions';
 import { normalizeFields } from './normalize-fields';
+import BulkActionsToolbar from './bulk-actions-toolbar';
+import type { Action, AnyItem, Field, View, ViewBaseProps } from './types';
 
-const defaultGetItemId = ( item ) => item.id;
+interface DataViewsProps< Item extends AnyItem > {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	fields: Field< Item >[];
+	search?: boolean;
+	searchLabel?: string;
+	actions?: Action< Item >[];
+	data: Item[];
+	getItemId?: ( item: Item ) => string;
+	isLoading?: boolean;
+	paginationInfo: {
+		totalItems: number;
+		totalPages: number;
+	};
+	supportedLayouts: string[];
+	onSelectionChange?: ( items: Item[] ) => void;
+}
+
+const defaultGetItemId = ( item: AnyItem ) => item.id;
 const defaultOnSelectionChange = () => {};
 
-function useSomeItemHasAPossibleBulkAction( actions, data ) {
+function useSomeItemHasAPossibleBulkAction< Item extends AnyItem >(
+	actions: Action< Item >[],
+	data: Item[]
+) {
 	return useMemo( () => {
 		return data.some( ( item ) => {
 			return actions.some( ( action ) => {
-				return action.supportsBulk && action.isEligible( item );
+				return (
+					action.supportsBulk &&
+					( ! action.isEligible || action.isEligible( item ) )
+				);
 			} );
 		} );
 	}, [ actions, data ] );
 }
 
-export default function DataViews( {
+export default function DataViews< Item extends AnyItem >( {
 	view,
 	onChangeView,
 	fields,
@@ -42,9 +73,9 @@ export default function DataViews( {
 	paginationInfo,
 	supportedLayouts,
 	onSelectionChange = defaultOnSelectionChange,
-} ) {
-	const [ selection, setSelection ] = useState( [] );
-	const [ openedFilter, setOpenedFilter ] = useState( null );
+}: DataViewsProps< Item > ) {
+	const [ selection, setSelection ] = useState< string[] >( [] );
+	const [ openedFilter, setOpenedFilter ] = useState< string | null >( null );
 
 	useEffect( () => {
 		if (
@@ -66,16 +97,15 @@ export default function DataViews( {
 	}, [ selection, data, getItemId, onSelectionChange ] );
 
 	const onSetSelection = useCallback(
-		( items ) => {
+		( items: Item[] ) => {
 			setSelection( items.map( ( item ) => getItemId( item ) ) );
 			onSelectionChange( items );
 		},
 		[ setSelection, getItemId, onSelectionChange ]
 	);
 
-	const ViewComponent = VIEW_LAYOUTS.find(
-		( v ) => v.type === view.type
-	).component;
+	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
+		?.component as ComponentType< ViewBaseProps< Item > >;
 	const _fields = useMemo( () => normalizeFields( fields ), [ fields ] );
 
 	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
@@ -127,22 +157,32 @@ export default function DataViews( {
 				/>
 			</HStack>
 			<ViewComponent
-				fields={ _fields }
-				view={ view }
-				onChangeView={ onChangeView }
 				actions={ actions }
 				data={ data }
+				fields={ _fields }
 				getItemId={ getItemId }
 				isLoading={ isLoading }
+				onChangeView={ onChangeView }
 				onSelectionChange={ onSetSelection }
 				selection={ selection }
 				setOpenedFilter={ setOpenedFilter }
+				view={ view }
 			/>
 			<Pagination
 				view={ view }
 				onChangeView={ onChangeView }
 				paginationInfo={ paginationInfo }
 			/>
+			{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
+				hasPossibleBulkAction && (
+					<BulkActionsToolbar
+						data={ data }
+						actions={ actions }
+						selection={ selection }
+						onSelectionChange={ onSetSelection }
+						getItemId={ getItemId }
+					/>
+				) }
 		</div>
 	);
 }
diff --git a/packages/dataviews/src/dropdown-menu-helper.js b/packages/dataviews/src/dropdown-menu-helper.js
deleted file mode 100644
index ce0ace8f61e55..0000000000000
--- a/packages/dataviews/src/dropdown-menu-helper.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	Icon,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { forwardRef } from '@wordpress/element';
-import { SVG, Circle } from '@wordpress/primitives';
-
-/**
- * Internal dependencies
- */
-import { unlock } from './lock-unlock';
-
-const { DropdownMenuItemV2: DropdownMenuItem } = unlock(
-	componentsPrivateApis
-);
-
-const radioCheck = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>
-	</SVG>
-);
-
-/**
- * A custom implementation of a radio menu item using the standard menu item
- * component, which allows deselecting selected values.
- */
-export const DropdownMenuRadioItemCustom = forwardRef(
-	function DropdownMenuRadioItemCustom(
-		{ checked, name, value, hideOnClick, onChange, onClick, ...props },
-		ref
-	) {
-		const onClickHandler = ( e ) => {
-			onClick?.( e );
-			onChange?.( { ...e, target: { ...e.target, value } } );
-		};
-		return (
-			<DropdownMenuItem
-				ref={ ref }
-				role="menuitemradio"
-				name={ name }
-				aria-checked={ checked }
-				hideOnClick={ !! hideOnClick }
-				prefix={
-					checked ? (
-						<Icon icon={ radioCheck } />
-					) : (
-						<span
-							className="dataviews-filters__custom-menu-radio-item-prefix"
-							aria-hidden="true"
-						></span>
-					)
-				}
-				onClick={ onClickHandler }
-				{ ...props }
-			/>
-		);
-	}
-);
diff --git a/packages/dataviews/src/filter-and-sort-data-view.ts b/packages/dataviews/src/filter-and-sort-data-view.ts
index dcbff18045dc9..a2906fdc4869e 100644
--- a/packages/dataviews/src/filter-and-sort-data-view.ts
+++ b/packages/dataviews/src/filter-and-sort-data-view.ts
@@ -15,13 +15,13 @@ import {
 	OPERATOR_IS_NOT_ALL,
 } from './constants';
 import { normalizeFields } from './normalize-fields';
-import type { Data, Field, View } from './types';
+import type { Field, AnyItem, View } from './types';
 
 function normalizeSearchInput( input = '' ) {
 	return removeAccents( input.trim().toLowerCase() );
 }
 
-const EMPTY_ARRAY: Data = [];
+const EMPTY_ARRAY: [] = [];
 
 /**
  * Applies the filtering, sorting and pagination to the raw data based on the view configuration.
@@ -32,11 +32,14 @@ const EMPTY_ARRAY: Data = [];
  *
  * @return Filtered, sorted and paginated data.
  */
-export function filterSortAndPaginate(
-	data: Data,
+export function filterSortAndPaginate< Item extends AnyItem >(
+	data: Item[],
 	view: View,
-	fields: Field[]
-): { data: Data; paginationInfo: { totalItems: number; totalPages: number } } {
+	fields: Field< Item >[]
+): {
+	data: Item[];
+	paginationInfo: { totalItems: number; totalPages: number };
+} {
 	if ( ! data ) {
 		return {
 			data: EMPTY_ARRAY,
@@ -100,7 +103,9 @@ export function filterSortAndPaginate(
 				) {
 					filteredData = filteredData.filter( ( item ) => {
 						return filter.value.every( ( value: any ) => {
-							return field.getValue( { item } ).includes( value );
+							return field
+								.getValue( { item } )
+								?.includes( value );
 						} );
 					} );
 				} else if (
@@ -111,7 +116,7 @@ export function filterSortAndPaginate(
 						return filter.value.every( ( value: any ) => {
 							return ! field
 								.getValue( { item } )
-								.includes( value );
+								?.includes( value );
 						} );
 					} );
 				} else if ( filter.operator === OPERATOR_IS ) {
diff --git a/packages/dataviews/src/filter-summary.js b/packages/dataviews/src/filter-summary.tsx
similarity index 88%
rename from packages/dataviews/src/filter-summary.js
rename to packages/dataviews/src/filter-summary.tsx
index f97a3a703202b..da4b2e840a297 100644
--- a/packages/dataviews/src/filter-summary.js
+++ b/packages/dataviews/src/filter-summary.tsx
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
+import type { RefObject } from 'react';
 
 /**
  * WordPress dependencies
@@ -35,8 +36,30 @@ import {
 	OPERATOR_IS_ALL,
 	OPERATOR_IS_NOT_ALL,
 } from './constants';
+import type { Filter, NormalizedFilter, Operator, Option, View } from './types';
 
-const FilterText = ( { activeElements, filterInView, filter } ) => {
+interface FilterTextProps {
+	activeElements: Option[];
+	filterInView?: Filter;
+	filter: NormalizedFilter;
+}
+
+interface OperatorSelectorProps {
+	filter: NormalizedFilter;
+	view: View;
+	onChangeView: ( view: View ) => void;
+}
+
+interface FilterSummaryProps extends OperatorSelectorProps {
+	addFilterRef: RefObject< HTMLButtonElement >;
+	openedFilter: string | null;
+}
+
+const FilterText = ( {
+	activeElements,
+	filterInView,
+	filter,
+}: FilterTextProps ) => {
 	if ( activeElements === undefined || activeElements.length === 0 ) {
 		return filter.name;
 	}
@@ -125,7 +148,11 @@ const FilterText = ( { activeElements, filterInView, filter } ) => {
 	);
 };
 
-function OperatorSelector( { filter, view, onChangeView } ) {
+function OperatorSelector( {
+	filter,
+	view,
+	onChangeView,
+}: OperatorSelectorProps ) {
 	const operatorOptions = filter.operators?.map( ( operator ) => ( {
 		value: operator,
 		label: OPERATORS[ operator ]?.label,
@@ -150,13 +177,14 @@ function OperatorSelector( { filter, view, onChangeView } ) {
 					value={ value }
 					options={ operatorOptions }
 					onChange={ ( newValue ) => {
+						const operator = newValue as Operator;
 						const newFilters = currentFilter
 							? [
 									...view.filters.map( ( _filter ) => {
 										if ( _filter.field === filter.field ) {
 											return {
 												..._filter,
-												operator: newValue,
+												operator,
 											};
 										}
 										return _filter;
@@ -166,7 +194,8 @@ function OperatorSelector( { filter, view, onChangeView } ) {
 									...view.filters,
 									{
 										field: filter.field,
-										operator: newValue,
+										operator,
+										value: undefined,
 									},
 							  ];
 						onChangeView( {
@@ -188,8 +217,8 @@ export default function FilterSummary( {
 	addFilterRef,
 	openedFilter,
 	...commonProps
-} ) {
-	const toggleRef = useRef();
+}: FilterSummaryProps ) {
+	const toggleRef = useRef< HTMLDivElement >( null );
 	const { filter, view, onChangeView } = commonProps;
 	const filterInView = view.filters.find( ( f ) => f.field === filter.field );
 	const activeElements = filter.elements.filter( ( element ) => {
@@ -220,7 +249,7 @@ export default function FilterSummary( {
 						placement="top"
 					>
 						<div
-							className={ classnames(
+							className={ clsx(
 								'dataviews-filter-summary__chip',
 								{
 									'has-reset': canResetOrRemove,
@@ -253,7 +282,7 @@ export default function FilterSummary( {
 							placement="top"
 						>
 							<button
-								className={ classnames(
+								className={ clsx(
 									'dataviews-filter-summary__chip-remove',
 									{ 'has-values': hasValues }
 								) }
diff --git a/packages/dataviews/src/filters.js b/packages/dataviews/src/filters.tsx
similarity index 79%
rename from packages/dataviews/src/filters.js
rename to packages/dataviews/src/filters.tsx
index aae4d3871ab1e..0cf017fce191b 100644
--- a/packages/dataviews/src/filters.js
+++ b/packages/dataviews/src/filters.tsx
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { memo, useRef } from '@wordpress/element';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -11,17 +12,25 @@ import AddFilter from './add-filter';
 import ResetFilters from './reset-filters';
 import { sanitizeOperators } from './utils';
 import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from './constants';
-import { __experimentalHStack as HStack } from '@wordpress/components';
+import type { AnyItem, NormalizedField, NormalizedFilter, View } from './types';
 
-const Filters = memo( function Filters( {
+interface FiltersProps< Item extends AnyItem > {
+	fields: NormalizedField< Item >[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+	openedFilter: string | null;
+	setOpenedFilter: ( openedFilter: string | null ) => void;
+}
+
+function _Filters< Item extends AnyItem >( {
 	fields,
 	view,
 	onChangeView,
 	openedFilter,
 	setOpenedFilter,
-} ) {
-	const addFilterRef = useRef();
-	const filters = [];
+}: FiltersProps< Item > ) {
+	const addFilterRef = useRef< HTMLButtonElement >( null );
+	const filters: NormalizedFilter[] = [];
 	fields.forEach( ( field ) => {
 		if ( ! field.elements?.length ) {
 			return;
@@ -108,6 +117,9 @@ const Filters = memo( function Filters( {
 			{ filterComponents }
 		</HStack>
 	);
-} );
+}
+
+// A type assertion is used here to keep the type argument.
+const Filters = memo( _Filters ) as typeof _Filters;
 
 export default Filters;
diff --git a/packages/dataviews/src/index.js b/packages/dataviews/src/index.ts
similarity index 100%
rename from packages/dataviews/src/index.js
rename to packages/dataviews/src/index.ts
diff --git a/packages/dataviews/src/item-actions.js b/packages/dataviews/src/item-actions.js
deleted file mode 100644
index db4da0d492489..0000000000000
--- a/packages/dataviews/src/item-actions.js
+++ /dev/null
@@ -1,177 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	Button,
-	Modal,
-	__experimentalHStack as HStack,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useMemo, useState } from '@wordpress/element';
-import { moreVertical } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { unlock } from './lock-unlock';
-
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuGroupV2: DropdownMenuGroup,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-	kebabCase,
-} = unlock( componentsPrivateApis );
-
-function ButtonTrigger( { action, onClick } ) {
-	return (
-		<Button
-			label={ action.label }
-			icon={ action.icon }
-			isDestructive={ action.isDestructive }
-			size="compact"
-			onClick={ onClick }
-		/>
-	);
-}
-
-function DropdownMenuItemTrigger( { action, onClick } ) {
-	return (
-		<DropdownMenuItem
-			onClick={ onClick }
-			hideOnClick={ ! action.RenderModal }
-		>
-			<DropdownMenuItemLabel>{ action.label }</DropdownMenuItemLabel>
-		</DropdownMenuItem>
-	);
-}
-
-function ActionWithModal( { action, item, ActionTrigger } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const actionTriggerProps = {
-		action,
-		onClick: () => setIsModalOpen( true ),
-	};
-	const { RenderModal, hideModalHeader } = action;
-	return (
-		<>
-			<ActionTrigger { ...actionTriggerProps } />
-			{ isModalOpen && (
-				<Modal
-					title={ action.modalHeader || action.label }
-					__experimentalHideHeader={ !! hideModalHeader }
-					onRequestClose={ () => {
-						setIsModalOpen( false );
-					} }
-					overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
-						action.id
-					) }` }
-				>
-					<RenderModal
-						items={ [ item ] }
-						closeModal={ () => setIsModalOpen( false ) }
-					/>
-				</Modal>
-			) }
-		</>
-	);
-}
-
-function ActionsDropdownMenuGroup( { actions, item } ) {
-	return (
-		<DropdownMenuGroup>
-			{ actions.map( ( action ) => {
-				if ( !! action.RenderModal ) {
-					return (
-						<ActionWithModal
-							key={ action.id }
-							action={ action }
-							item={ item }
-							ActionTrigger={ DropdownMenuItemTrigger }
-						/>
-					);
-				}
-				return (
-					<DropdownMenuItemTrigger
-						key={ action.id }
-						action={ action }
-						onClick={ () => action.callback( [ item ] ) }
-					/>
-				);
-			} ) }
-		</DropdownMenuGroup>
-	);
-}
-
-export default function ItemActions( { item, actions, isCompact } ) {
-	const { primaryActions, eligibleActions } = useMemo( () => {
-		// If an action is eligible for all items, doesn't need
-		// to provide the `isEligible` function.
-		const _eligibleActions = actions.filter(
-			( action ) => ! action.isEligible || action.isEligible( item )
-		);
-		const _primaryActions = _eligibleActions.filter(
-			( action ) => action.isPrimary && !! action.icon
-		);
-		return {
-			primaryActions: _primaryActions,
-			eligibleActions: _eligibleActions,
-		};
-	}, [ actions, item ] );
-	if ( isCompact ) {
-		return <CompactItemActions item={ item } actions={ eligibleActions } />;
-	}
-	return (
-		<HStack
-			spacing={ 1 }
-			justify="flex-end"
-			className="dataviews-item-actions"
-			style={ {
-				flexShrink: '0',
-				width: 'auto',
-			} }
-		>
-			{ !! primaryActions.length &&
-				primaryActions.map( ( action ) => {
-					if ( !! action.RenderModal ) {
-						return (
-							<ActionWithModal
-								key={ action.id }
-								action={ action }
-								item={ item }
-								ActionTrigger={ ButtonTrigger }
-							/>
-						);
-					}
-					return (
-						<ButtonTrigger
-							key={ action.id }
-							action={ action }
-							onClick={ () => action.callback( [ item ] ) }
-						/>
-					);
-				} ) }
-			<CompactItemActions item={ item } actions={ eligibleActions } />
-		</HStack>
-	);
-}
-
-function CompactItemActions( { item, actions } ) {
-	return (
-		<DropdownMenu
-			trigger={
-				<Button
-					size="compact"
-					icon={ moreVertical }
-					label={ __( 'Actions' ) }
-					disabled={ ! actions.length }
-					className="dataviews-all-actions-button"
-				/>
-			}
-			placement="bottom-end"
-		>
-			<ActionsDropdownMenuGroup actions={ actions } item={ item } />
-		</DropdownMenu>
-	);
-}
diff --git a/packages/dataviews/src/item-actions.tsx b/packages/dataviews/src/item-actions.tsx
new file mode 100644
index 0000000000000..90ae74b5f74ea
--- /dev/null
+++ b/packages/dataviews/src/item-actions.tsx
@@ -0,0 +1,267 @@
+/**
+ * External dependencies
+ */
+import type { MouseEventHandler, ReactElement } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Modal,
+	__experimentalHStack as HStack,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useMemo, useState } from '@wordpress/element';
+import { moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+import type { Action, ActionModal as ActionModalType, AnyItem } from './types';
+
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuGroupV2: DropdownMenuGroup,
+	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+	kebabCase,
+} = unlock( componentsPrivateApis );
+
+export interface ActionTriggerProps< Item extends AnyItem > {
+	action: Action< Item >;
+	onClick: MouseEventHandler;
+	isBusy?: boolean;
+	items: Item[];
+}
+
+interface ActionModalProps< Item extends AnyItem > {
+	action: ActionModalType< Item >;
+	items: Item[];
+	closeModal?: () => void;
+}
+
+interface ActionWithModalProps< Item extends AnyItem >
+	extends ActionModalProps< Item > {
+	ActionTrigger: ( props: ActionTriggerProps< Item > ) => ReactElement;
+	isBusy?: boolean;
+}
+
+interface ActionsDropdownMenuGroupProps< Item extends AnyItem > {
+	actions: Action< Item >[];
+	item: Item;
+}
+
+interface ItemActionsProps< Item extends AnyItem > {
+	item: Item;
+	actions: Action< Item >[];
+	isCompact?: boolean;
+}
+
+interface CompactItemActionsProps< Item extends AnyItem > {
+	item: Item;
+	actions: Action< Item >[];
+}
+
+function ButtonTrigger< Item extends AnyItem >( {
+	action,
+	onClick,
+	items,
+}: ActionTriggerProps< Item > ) {
+	const label =
+		typeof action.label === 'string' ? action.label : action.label( items );
+	return (
+		<Button
+			label={ label }
+			icon={ action.icon }
+			isDestructive={ action.isDestructive }
+			size="compact"
+			onClick={ onClick }
+		/>
+	);
+}
+
+function DropdownMenuItemTrigger< Item extends AnyItem >( {
+	action,
+	onClick,
+	items,
+}: ActionTriggerProps< Item > ) {
+	const label =
+		typeof action.label === 'string' ? action.label : action.label( items );
+	return (
+		<DropdownMenuItem
+			onClick={ onClick }
+			hideOnClick={ ! ( 'RenderModal' in action ) }
+		>
+			<DropdownMenuItemLabel>{ label }</DropdownMenuItemLabel>
+		</DropdownMenuItem>
+	);
+}
+
+export function ActionModal< Item extends AnyItem >( {
+	action,
+	items,
+	closeModal,
+}: ActionModalProps< Item > ) {
+	const label =
+		typeof action.label === 'string' ? action.label : action.label( items );
+	return (
+		<Modal
+			title={ action.modalHeader || label }
+			__experimentalHideHeader={ !! action.hideModalHeader }
+			onRequestClose={ closeModal ?? ( () => {} ) }
+			overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
+				action.id
+			) }` }
+		>
+			<action.RenderModal
+				items={ items }
+				closeModal={ closeModal }
+				onActionStart={ action.onActionStart }
+				onActionPerformed={ action.onActionPerformed }
+			/>
+		</Modal>
+	);
+}
+
+export function ActionWithModal< Item extends AnyItem >( {
+	action,
+	items,
+	ActionTrigger,
+	isBusy,
+}: ActionWithModalProps< Item > ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const actionTriggerProps = {
+		action,
+		onClick: () => {
+			setIsModalOpen( true );
+		},
+		items,
+		isBusy,
+	};
+	return (
+		<>
+			<ActionTrigger { ...actionTriggerProps } />
+			{ isModalOpen && (
+				<ActionModal
+					action={ action }
+					items={ items }
+					closeModal={ () => setIsModalOpen( false ) }
+				/>
+			) }
+		</>
+	);
+}
+
+export function ActionsDropdownMenuGroup< Item extends AnyItem >( {
+	actions,
+	item,
+}: ActionsDropdownMenuGroupProps< Item > ) {
+	return (
+		<DropdownMenuGroup>
+			{ actions.map( ( action ) => {
+				if ( 'RenderModal' in action ) {
+					return (
+						<ActionWithModal
+							key={ action.id }
+							action={ action }
+							items={ [ item ] }
+							ActionTrigger={ DropdownMenuItemTrigger }
+						/>
+					);
+				}
+				return (
+					<DropdownMenuItemTrigger
+						key={ action.id }
+						action={ action }
+						onClick={ () => action.callback( [ item ] ) }
+						items={ [ item ] }
+					/>
+				);
+			} ) }
+		</DropdownMenuGroup>
+	);
+}
+
+export default function ItemActions< Item extends AnyItem >( {
+	item,
+	actions,
+	isCompact,
+}: ItemActionsProps< Item > ) {
+	const { primaryActions, eligibleActions } = useMemo( () => {
+		// If an action is eligible for all items, doesn't need
+		// to provide the `isEligible` function.
+		const _eligibleActions = actions.filter(
+			( action ) => ! action.isEligible || action.isEligible( item )
+		);
+		const _primaryActions = _eligibleActions.filter(
+			( action ) => action.isPrimary && !! action.icon
+		);
+		return {
+			primaryActions: _primaryActions,
+			eligibleActions: _eligibleActions,
+		};
+	}, [ actions, item ] );
+	if ( isCompact ) {
+		return <CompactItemActions item={ item } actions={ eligibleActions } />;
+	}
+	return (
+		<HStack
+			spacing={ 1 }
+			justify="flex-end"
+			className="dataviews-item-actions"
+			style={ {
+				flexShrink: '0',
+				width: 'auto',
+			} }
+		>
+			{ !! primaryActions.length &&
+				primaryActions.map( ( action ) => {
+					if ( 'RenderModal' in action ) {
+						return (
+							<ActionWithModal
+								key={ action.id }
+								action={ action }
+								items={ [ item ] }
+								ActionTrigger={ ButtonTrigger }
+							/>
+						);
+					}
+					return (
+						<ButtonTrigger
+							key={ action.id }
+							action={ action }
+							onClick={ () => action.callback( [ item ] ) }
+							items={ [ item ] }
+						/>
+					);
+				} ) }
+			<CompactItemActions item={ item } actions={ eligibleActions } />
+		</HStack>
+	);
+}
+
+function CompactItemActions< Item extends AnyItem >( {
+	item,
+	actions,
+}: CompactItemActionsProps< Item > ) {
+	return (
+		<DropdownMenu
+			trigger={
+				<Button
+					size="compact"
+					icon={ moreVertical }
+					label={ __( 'Actions' ) }
+					__experimentalIsFocusable
+					disabled={ ! actions.length }
+					className="dataviews-all-actions-button"
+				/>
+			}
+			placement="bottom-end"
+		>
+			<ActionsDropdownMenuGroup actions={ actions } item={ item } />
+		</DropdownMenu>
+	);
+}
diff --git a/packages/dataviews/src/layouts.js b/packages/dataviews/src/layouts.ts
similarity index 100%
rename from packages/dataviews/src/layouts.js
rename to packages/dataviews/src/layouts.ts
diff --git a/packages/dataviews/src/lock-unlock.js b/packages/dataviews/src/lock-unlock.ts
similarity index 100%
rename from packages/dataviews/src/lock-unlock.js
rename to packages/dataviews/src/lock-unlock.ts
diff --git a/packages/dataviews/src/normalize-fields.ts b/packages/dataviews/src/normalize-fields.ts
index 8745a1b3316bc..2c5edd91070c7 100644
--- a/packages/dataviews/src/normalize-fields.ts
+++ b/packages/dataviews/src/normalize-fields.ts
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import type { Field, NormalizedField } from './types';
+import type { Field, AnyItem, NormalizedField } from './types';
 
 /**
  * Apply default values and normalize the fields config.
@@ -9,7 +9,9 @@ import type { Field, NormalizedField } from './types';
  * @param fields Fields config.
  * @return Normalized fields config.
  */
-export function normalizeFields( fields: Field[] ): NormalizedField[] {
+export function normalizeFields< Item extends AnyItem >(
+	fields: Field< Item >[]
+): NormalizedField< Item >[] {
 	return fields.map( ( field ) => {
 		const getValue = field.getValue || ( ( { item } ) => item[ field.id ] );
 
diff --git a/packages/dataviews/src/pagination.js b/packages/dataviews/src/pagination.tsx
similarity index 74%
rename from packages/dataviews/src/pagination.js
rename to packages/dataviews/src/pagination.tsx
index a1e3c644cb5ba..4020e78525b98 100644
--- a/packages/dataviews/src/pagination.js
+++ b/packages/dataviews/src/pagination.tsx
@@ -10,14 +10,29 @@ import { createInterpolateElement, memo } from '@wordpress/element';
 import { sprintf, __, _x } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import type { View } from './types';
+
+interface PaginationProps {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	paginationInfo: {
+		totalItems: number;
+		totalPages: number;
+	};
+}
+
 const Pagination = memo( function Pagination( {
 	view,
 	onChangeView,
 	paginationInfo: { totalItems = 0, totalPages },
-} ) {
+}: PaginationProps ) {
 	if ( ! totalItems || ! totalPages ) {
 		return null;
 	}
+	const currentPage = view.page ?? 1;
 	return (
 		!! totalItems &&
 		totalPages !== 1 && (
@@ -43,12 +58,15 @@ const Pagination = memo( function Pagination( {
 							CurrentPageControl: (
 								<SelectControl
 									aria-label={ __( 'Current page' ) }
-									value={ view.page }
+									value={ view.page?.toString() }
 									options={ Array.from(
 										Array( totalPages )
 									).map( ( _, i ) => {
 										const page = i + 1;
-										return { value: page, label: page };
+										return {
+											value: page.toString(),
+											label: page.toString(),
+										};
 									} ) }
 									onChange={ ( newValue ) => {
 										onChangeView( {
@@ -56,7 +74,7 @@ const Pagination = memo( function Pagination( {
 											page: +newValue,
 										} );
 									} }
-									size={ 'compact' }
+									size="compact"
 									__nextHasNoMarginBottom
 								/>
 							),
@@ -66,9 +84,12 @@ const Pagination = memo( function Pagination( {
 				<HStack expanded={ false } spacing={ 1 }>
 					<Button
 						onClick={ () =>
-							onChangeView( { ...view, page: view.page - 1 } )
+							onChangeView( {
+								...view,
+								page: currentPage - 1,
+							} )
 						}
-						disabled={ view.page === 1 }
+						disabled={ currentPage === 1 }
 						__experimentalIsFocusable
 						label={ __( 'Previous page' ) }
 						icon={ chevronLeft }
@@ -78,9 +99,9 @@ const Pagination = memo( function Pagination( {
 					/>
 					<Button
 						onClick={ () =>
-							onChangeView( { ...view, page: view.page + 1 } )
+							onChangeView( { ...view, page: currentPage + 1 } )
 						}
-						disabled={ view.page >= totalPages }
+						disabled={ currentPage >= totalPages }
 						__experimentalIsFocusable
 						label={ __( 'Next page' ) }
 						icon={ chevronRight }
diff --git a/packages/dataviews/src/reset-filters.js b/packages/dataviews/src/reset-filters.tsx
similarity index 66%
rename from packages/dataviews/src/reset-filters.js
rename to packages/dataviews/src/reset-filters.tsx
index d7143599c443b..74570b49d9548 100644
--- a/packages/dataviews/src/reset-filters.js
+++ b/packages/dataviews/src/reset-filters.tsx
@@ -4,8 +4,23 @@
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-export default function ResetFilter( { filters, view, onChangeView } ) {
-	const isPrimary = ( field ) =>
+/**
+ * Internal dependencies
+ */
+import type { NormalizedFilter, View } from './types';
+
+interface ResetFilterProps {
+	filters: NormalizedFilter[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+}
+
+export default function ResetFilter( {
+	filters,
+	view,
+	onChangeView,
+}: ResetFilterProps ) {
+	const isPrimary = ( field: string ) =>
 		filters.some(
 			( _filter ) => _filter.field === field && _filter.isPrimary
 		);
diff --git a/packages/dataviews/src/search-widget.js b/packages/dataviews/src/search-widget.tsx
similarity index 91%
rename from packages/dataviews/src/search-widget.js
rename to packages/dataviews/src/search-widget.tsx
index 080859b15ff8e..6a5f4b6644f67 100644
--- a/packages/dataviews/src/search-widget.js
+++ b/packages/dataviews/src/search-widget.tsx
@@ -22,6 +22,7 @@ import { SVG, Circle } from '@wordpress/primitives';
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
+import type { Filter, NormalizedFilter, View } from './types';
 
 const {
 	CompositeV2: Composite,
@@ -29,6 +30,12 @@ const {
 	useCompositeStoreV2: useCompositeStore,
 } = unlock( componentsPrivateApis );
 
+interface SearchWidgetProps {
+	view: View;
+	filter: NormalizedFilter;
+	onChangeView: ( view: View ) => void;
+}
+
 const radioCheck = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>
@@ -39,8 +46,11 @@ function normalizeSearchInput( input = '' ) {
 	return removeAccents( input.trim().toLowerCase() );
 }
 
-const EMPTY_ARRAY = [];
-const getCurrentValue = ( filterDefinition, currentFilter ) => {
+const EMPTY_ARRAY: [] = [];
+const getCurrentValue = (
+	filterDefinition: NormalizedFilter,
+	currentFilter?: Filter
+) => {
 	if ( filterDefinition.singleSelection ) {
 		return currentFilter?.value;
 	}
@@ -56,7 +66,11 @@ const getCurrentValue = ( filterDefinition, currentFilter ) => {
 	return EMPTY_ARRAY;
 };
 
-const getNewValue = ( filterDefinition, currentFilter, value ) => {
+const getNewValue = (
+	filterDefinition: NormalizedFilter,
+	currentFilter: Filter | undefined,
+	value: any
+) => {
 	if ( filterDefinition.singleSelection ) {
 		return value;
 	}
@@ -70,7 +84,7 @@ const getNewValue = ( filterDefinition, currentFilter, value ) => {
 	return [ value ];
 };
 
-function ListBox( { view, filter, onChangeView } ) {
+function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 	const compositeStore = useCompositeStore( {
 		virtualFocus: true,
 		focusLoop: true,
@@ -184,7 +198,7 @@ function ListBox( { view, filter, onChangeView } ) {
 	);
 }
 
-function ComboboxList( { view, filter, onChangeView } ) {
+function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const deferredSearchValue = useDeferredValue( searchValue );
 	const currentFilter = view.filters.find(
@@ -234,7 +248,13 @@ function ComboboxList( { view, filter, onChangeView } ) {
 			setValue={ setSearchValue }
 		>
 			<div className="dataviews-search-widget-filter-combobox__wrapper">
-				<Ariakit.ComboboxLabel render={ <VisuallyHidden /> }>
+				<Ariakit.ComboboxLabel
+					render={
+						<VisuallyHidden>
+							{ __( 'Search items' ) }
+						</VisuallyHidden>
+					}
+				>
 					{ __( 'Search items' ) }
 				</Ariakit.ComboboxLabel>
 				<Ariakit.Combobox
@@ -290,7 +310,7 @@ function ComboboxList( { view, filter, onChangeView } ) {
 	);
 }
 
-export default function SearchWidget( props ) {
+export default function SearchWidget( props: SearchWidgetProps ) {
 	const Widget = props.filter.elements.length > 10 ? ComboboxList : ListBox;
 	return <Widget { ...props } />;
 }
diff --git a/packages/dataviews/src/search.js b/packages/dataviews/src/search.tsx
similarity index 65%
rename from packages/dataviews/src/search.js
rename to packages/dataviews/src/search.tsx
index 13a828c330575..7929a9bd0eb3c 100644
--- a/packages/dataviews/src/search.js
+++ b/packages/dataviews/src/search.tsx
@@ -6,20 +6,37 @@ import { useEffect, useRef, memo } from '@wordpress/element';
 import { SearchControl } from '@wordpress/components';
 import { useDebouncedInput } from '@wordpress/compose';
 
-const Search = memo( function Search( { label, view, onChangeView } ) {
+/**
+ * Internal dependencies
+ */
+import type { View } from './types';
+
+interface SearchProps {
+	label?: string;
+	view: View;
+	onChangeView: ( view: View ) => void;
+}
+
+const Search = memo( function Search( {
+	label,
+	view,
+	onChangeView,
+}: SearchProps ) {
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
 		view.search
 	);
 	useEffect( () => {
-		setSearch( view.search );
-	}, [ view ] );
+		setSearch( view.search ?? '' );
+	}, [ view.search, setSearch ] );
 	const onChangeViewRef = useRef( onChangeView );
+	const viewRef = useRef( view );
 	useEffect( () => {
 		onChangeViewRef.current = onChangeView;
-	}, [ onChangeView ] );
+		viewRef.current = view;
+	}, [ onChangeView, view ] );
 	useEffect( () => {
 		onChangeViewRef.current( {
-			...view,
+			...viewRef.current,
 			page: 1,
 			search: debouncedSearch,
 		} );
diff --git a/packages/dataviews/src/single-selection-checkbox.js b/packages/dataviews/src/single-selection-checkbox.tsx
similarity index 75%
rename from packages/dataviews/src/single-selection-checkbox.js
rename to packages/dataviews/src/single-selection-checkbox.tsx
index 482b5014b2e3f..1c87c7f7c52c1 100644
--- a/packages/dataviews/src/single-selection-checkbox.js
+++ b/packages/dataviews/src/single-selection-checkbox.tsx
@@ -4,7 +4,22 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { CheckboxControl } from '@wordpress/components';
 
-export default function SingleSelectionCheckbox( {
+/**
+ * Internal dependencies
+ */
+import type { Field, AnyItem } from './types';
+
+interface SingleSelectionCheckboxProps< Item extends AnyItem > {
+	selection: string[];
+	onSelectionChange: ( selection: Item[] ) => void;
+	item: Item;
+	data: Item[];
+	getItemId: ( item: Item ) => string;
+	primaryField?: Field< Item >;
+	disabled: boolean;
+}
+
+export default function SingleSelectionCheckbox< Item extends AnyItem >( {
 	selection,
 	onSelectionChange,
 	item,
@@ -12,7 +27,7 @@ export default function SingleSelectionCheckbox( {
 	getItemId,
 	primaryField,
 	disabled,
-} ) {
+}: SingleSelectionCheckboxProps< Item > ) {
 	const id = getItemId( item );
 	const isSelected = selection.includes( id );
 	let selectionLabel;
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 6efa7884c8adf..a2154790053d0 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -3,15 +3,20 @@
 	overflow: auto;
 	box-sizing: border-box;
 	scroll-padding-bottom: $grid-unit-80;
+	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
+	container: dataviews-wrapper / inline-size;
+	display: flex;
+	flex-direction: column;
 }
 
 .dataviews-filters__view-actions {
 	box-sizing: border-box;
-	padding: $grid-unit-15 $grid-unit-40 0;
-	margin-bottom: $grid-unit-15;
+	padding: $grid-unit-20 $grid-unit-60;
 	flex-shrink: 0;
 	position: sticky;
 	left: 0;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
 
 	.components-search-control {
 		.components-base-control__field {
@@ -21,8 +26,6 @@
 }
 
 .dataviews-filters__container {
-	padding-right: $grid-unit-40;
-
 	.dataviews-filters__reset-button[aria-disabled="true"] {
 		&,
 		&:hover {
@@ -44,10 +47,12 @@
 	bottom: 0;
 	left: 0;
 	background-color: $white;
-	padding: $grid-unit-15 $grid-unit-40;
+	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 {
@@ -68,6 +73,7 @@
 	border-collapse: collapse;
 	position: relative;
 	color: $gray-700;
+	margin-bottom: auto;
 
 	a {
 		text-decoration: none;
@@ -100,9 +106,18 @@
 			gap: $grid-unit-05;
 		}
 
+		th,
+		td {
+			&:first-child,
+			&:last-child {
+				transition: padding ease-out 0.1s;
+				@include reduce-motion("transition");
+			}
+		}
+
 		td:first-child,
 		th:first-child {
-			padding-left: $grid-unit-40;
+			padding-left: $grid-unit-60;
 
 			.dataviews-view-table-header-button,
 			.dataviews-view-table-header {
@@ -112,7 +127,7 @@
 
 		td:last-child,
 		th:last-child {
-			padding-right: $grid-unit-40;
+			padding-right: $grid-unit-60;
 		}
 
 		&:last-child {
@@ -278,10 +293,16 @@
 }
 
 .dataviews-view-grid {
-	margin-bottom: $grid-unit-30;
-	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+	margin-bottom: auto;
+	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
 	grid-template-rows: max-content;
-	padding: 0 $grid-unit-40;
+	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
@@ -349,8 +370,7 @@
 		line-height: 16px;
 
 		&:not(:empty) {
-			padding: $grid-unit-15 0;
-			padding-top: 0;
+			padding: 0 0 $grid-unit-15;
 		}
 
 		.dataviews-view-grid__field {
@@ -396,11 +416,12 @@
 }
 
 .dataviews-view-list {
-	margin: 0;
+	margin: 0 0 auto;
 
 	li {
 		margin: 0;
 		cursor: pointer;
+		border-top: 1px solid $gray-100;
 
 		.dataviews-view-list__item-wrapper {
 			position: relative;
@@ -411,6 +432,30 @@
 			}
 		}
 
+		.dataviews-view-list__item-actions {
+			.components-button {
+				opacity: 0;
+				position: fixed;
+			}
+		}
+
+		&.is-selected,
+		&.is-hovered,
+		&:focus-within {
+			.dataviews-view-list__item-actions {
+				padding-right: $grid-unit-40;
+
+				.components-button {
+					opacity: 1;
+					position: static;
+				}
+			}
+
+			.dataviews-view-list__item {
+				padding-right: 0;
+			}
+		}
+
 		&:not(.is-selected) {
 			.dataviews-view-list__primary-field {
 				color: $gray-900;
@@ -426,6 +471,7 @@
 				}
 			}
 		}
+
 	}
 
 	li.is-selected,
@@ -435,18 +481,16 @@
 			color: $gray-900;
 
 			.dataviews-view-list__primary-field,
-			.dataviews-view-list__fields,
-			.components-button {
+			.dataviews-view-list__fields {
 				color: var(--wp-admin-theme-color);
 			}
 		}
 	}
 
 	.dataviews-view-list__item {
-		padding: $grid-unit-20 $grid-unit-40;
+		padding: $grid-unit-20 0 $grid-unit-20 $grid-unit-30;
 		width: 100%;
 		scroll-margin: $grid-unit-10 0;
-		border-top: 1px solid $gray-100;
 
 		&:focus-visible {
 			&::before {
@@ -462,6 +506,7 @@
 		}
 		.dataviews-view-list__primary-field {
 			min-height: $grid-unit-05 * 5;
+			line-height: $grid-unit-05 * 5;
 			overflow: hidden;
 		}
 	}
@@ -505,13 +550,20 @@
 		gap: $grid-unit-10;
 		flex-wrap: wrap;
 		font-size: 12px;
-		line-height: $grid-unit-20;
 
 		.dataviews-view-list__field {
 			&:has(.dataviews-view-list__field-value:empty) {
 				display: none;
 			}
 		}
+
+		.dataviews-view-list__field-value {
+			line-height: $grid-unit-05 * 5;
+			display: inline-flex;
+		}
+	}
+	.dataviews-view-list__item-actions {
+		padding-right: $grid-unit-30;
 	}
 
 	& + .dataviews-pagination {
@@ -526,11 +578,13 @@
 
 .dataviews-no-results,
 .dataviews-loading {
-	padding: 0 $grid-unit-40;
+	padding: 0 $grid-unit-60;
 	flex-grow: 1;
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
 }
 
 .dataviews-view-table-selection-checkbox {
@@ -541,11 +595,11 @@
 	}
 
 	line-height: 0;
-}
+	flex-shrink: 0;
 
-.dataviews-filters__custom-menu-radio-item-prefix {
-	display: block;
-	width: 24px;
+	.components-checkbox-control__input-container {
+		margin: 0;
+	}
 }
 
 .dataviews-bulk-edit-button.components-button {
@@ -783,3 +837,80 @@
 		}
 	}
 }
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.dataviews-pagination,
+	.dataviews-filters__view-actions {
+		padding: $grid-unit-15 $grid-unit-30;
+	}
+
+	.dataviews-filters__view-actions {
+		.components-search-control {
+			.components-base-control__field {
+				max-width: 112px;
+			}
+		}
+	}
+
+	.dataviews-view-table tr td:first-child,
+	.dataviews-view-table tr th:first-child {
+		padding-left: $grid-unit-30;
+	}
+
+	.dataviews-view-table tr td:last-child,
+	.dataviews-view-table tr th:last-child {
+		padding-right: $grid-unit-30;
+	}
+
+	.dataviews-view-grid,
+	.dataviews-no-results,
+	.dataviews-loading {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+}
+
+.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;
+	}
+}
+
+.dataviews-bulk-actions {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	align-content: center;
+	flex-wrap: wrap;
+	width: 100%;
+	bottom: $grid-unit-30;
+	z-index: z-index(".dataviews-bulk-actions");
+
+	.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__selection-count {
+		display: flex;
+		align-items: center;
+		margin: 0 $grid-unit-10 0 $grid-unit-10;
+	}
+}
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index ef6b0773a2138..e3d6d2dd158ec 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -1,23 +1,48 @@
 /**
  * External dependencies
  */
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
-type Item = Record< string, any >;
+export type SortDirection = 'asc' | 'desc';
 
-interface Option {
-	value: any;
+/**
+ * Generic option type.
+ */
+export interface Option< Value extends any = any > {
+	value: Value;
 	label: string;
+	description?: string;
 }
 
-interface filterByConfig {
+interface FilterByConfig {
+	/**
+	 * The list of operators supported by the field.
+	 */
 	operators?: Operator[];
+
+	/**
+	 * Whether it is a primary filter.
+	 *
+	 * A primary filter is always visible and is not listed in the "Add filter" component,
+	 * except for the list layout where it behaves like a secondary filter.
+	 */
 	isPrimary?: boolean;
 }
 
-type Operator = 'is' | 'isNot' | 'isAny' | 'isNone' | 'isAll' | 'isNotAll';
+export type Operator =
+	| 'is'
+	| 'isNot'
+	| 'isAny'
+	| 'isNone'
+	| 'isAll'
+	| 'isNotAll';
+
+export type AnyItem = Record< string, any >;
 
-export interface Field {
+/**
+ * A dataview field for a specific property of a data type.
+ */
+export interface Field< Item extends AnyItem > {
 	/**
 	 * The unique identifier of the field.
 	 */
@@ -32,58 +57,67 @@ export interface Field {
 	 * Callback used to retrieve the value of the field from the item.
 	 * Defaults to `item[ field.id ]`.
 	 */
-	getValue?: ( { item }: { item: Item } ) => any;
+	getValue?: ( args: { item: Item } ) => any;
 
 	/**
 	 * Callback used to render the field. Defaults to `field.getValue`.
 	 */
-	render?: ( { item }: { item: Item } ) => ReactNode;
+	render?: ( args: { item: Item } ) => ReactNode;
 
 	/**
 	 * The width of the field column.
 	 */
-	width: string | number | undefined;
+	width?: string | number;
 
 	/**
 	 * The minimum width of the field column.
 	 */
-	maxWidth: string | number | undefined;
+	maxWidth?: string | number;
 
 	/**
 	 * The maximum width of the field column.
 	 */
-	minWidth: string | number | undefined;
+	minWidth?: string | number;
 
 	/**
 	 * Whether the field is sortable.
 	 */
-	enableSorting: boolean | undefined;
+	enableSorting?: boolean;
 
 	/**
 	 * Whether the field is searchable.
 	 */
-	enableGlobalSearch: boolean | undefined;
+	enableGlobalSearch?: boolean;
 
 	/**
 	 * Whether the field is filterable.
 	 */
-	enableHiding: boolean | undefined;
+	enableHiding?: boolean;
 
 	/**
 	 * The list of options to pick from when using the field as a filter.
 	 */
-	elements: Option[] | undefined;
+	elements?: Option[];
 
 	/**
 	 * Filter config for the field.
 	 */
-	filterBy: filterByConfig | undefined;
+	filterBy?: FilterByConfig | undefined;
 }
 
-export type NormalizedField = Required< Field >;
+export type NormalizedField< Item extends AnyItem > = Field< Item > &
+	Required< Pick< Field< Item >, 'header' | 'getValue' | 'render' > >;
+
+/**
+ * A collection of dataview fields for a data type.
+ */
+export type Fields< Item extends AnyItem > = Field< Item >[];
 
-export type Data = Item[];
+export type Data< Item extends AnyItem > = Item[];
 
+/**
+ * The filters applied to the dataset.
+ */
 export interface Filter {
 	/**
 	 * The field to filter by.
@@ -101,7 +135,44 @@ export interface Filter {
 	value: any;
 }
 
-export interface View {
+export interface NormalizedFilter {
+	/**
+	 * The field to filter by.
+	 */
+	field: string;
+
+	/**
+	 * The field name.
+	 */
+	name: string;
+
+	/**
+	 * The list of options to pick from when using the field as a filter.
+	 */
+	elements: Option[];
+
+	/**
+	 * Is a single selection filter.
+	 */
+	singleSelection: boolean;
+
+	/**
+	 * The list of operators supported by the field.
+	 */
+	operators: Operator[];
+
+	/**
+	 * Whether the filter is visible.
+	 */
+	isVisible: boolean;
+
+	/**
+	 * Whether it is a primary filter.
+	 */
+	isPrimary: boolean;
+}
+
+interface ViewBase {
 	/**
 	 * The layout of the view.
 	 */
@@ -129,7 +200,7 @@ export interface View {
 		/**
 		 * The direction to sort by.
 		 */
-		direction: string;
+		direction: SortDirection;
 	};
 
 	/**
@@ -141,4 +212,198 @@ export interface View {
 	 * The number of items per page
 	 */
 	perPage?: number;
+
+	/**
+	 * The hidden fields.
+	 */
+	hiddenFields: string[];
+}
+
+export interface ViewTable extends ViewBase {
+	type: 'table';
+
+	layout: {
+		/**
+		 * The field to use as the primary field.
+		 */
+		primaryField?: string;
+
+		/**
+		 * The field to use as the media field.
+		 */
+		mediaField?: string;
+	};
 }
+
+export interface ViewList extends ViewBase {
+	type: 'list';
+
+	layout: {
+		/**
+		 * The field to use as the primary field.
+		 */
+		primaryField?: string;
+
+		/**
+		 * The field to use as the media field.
+		 */
+		mediaField?: string;
+	};
+}
+
+export interface ViewGrid extends ViewBase {
+	type: 'grid';
+
+	layout: {
+		/**
+		 * The field to use as the primary field.
+		 */
+		primaryField?: string;
+
+		/**
+		 * The field to use as the media field.
+		 */
+		mediaField?: string;
+
+		/**
+		 * The fields to use as columns.
+		 */
+		columnFields?: string[];
+
+		/**
+		 * The fields to use as badge fields.
+		 */
+		badgeFields?: string[];
+	};
+}
+
+export type View = ViewList | ViewGrid | ViewTable;
+
+interface ActionBase< Item extends AnyItem > {
+	/**
+	 * The unique identifier of the action.
+	 */
+	id: string;
+
+	/**
+	 * The label of the action.
+	 * In case we want to adjust the label based on the selected items,
+	 * a function can be provided.
+	 */
+	label: string | ( ( items: Item[] ) => string );
+
+	/**
+	 * The icon of the action. (Either a string or an SVG element)
+	 * This should be IconType from the components package
+	 * but that import is breaking typescript build for the moment.
+	 */
+	icon?: any;
+
+	/**
+	 * Whether the action is disabled.
+	 */
+	disabled?: boolean;
+
+	/**
+	 * Whether the action is destructive.
+	 */
+	isDestructive?: boolean;
+
+	/**
+	 * Whether the action is a primary action.
+	 */
+	isPrimary?: boolean;
+
+	/**
+	 * Whether the item passed as an argument supports the current action.
+	 */
+	isEligible?: ( item: Item ) => boolean;
+
+	/**
+	 * Whether the action can be used as a bulk action.
+	 */
+	supportsBulk?: boolean;
+}
+
+export interface ActionModal< Item extends AnyItem >
+	extends ActionBase< Item > {
+	/**
+	 * The callback to execute when the action has finished.
+	 */
+	onActionPerformed: ( ( items: Item[] ) => void ) | undefined;
+
+	/**
+	 * The callback to execute when the action is triggered.
+	 */
+	onActionStart: ( ( items: Item[] ) => void ) | undefined;
+
+	/**
+	 * Modal to render when the action is triggered.
+	 */
+	RenderModal: ( {
+		items,
+		closeModal,
+		onActionStart,
+		onActionPerformed,
+	}: {
+		items: Item[];
+		closeModal?: () => void;
+		onActionStart?: ( items: Item[] ) => void;
+		onActionPerformed?: ( items: Item[] ) => void;
+	} ) => ReactElement;
+
+	/**
+	 * Whether to hide the modal header.
+	 */
+	hideModalHeader?: boolean;
+
+	/**
+	 * The header of the modal.
+	 */
+	modalHeader?: string;
+}
+
+export interface ActionButton< Item extends AnyItem >
+	extends ActionBase< AnyItem > {
+	/**
+	 * The callback to execute when the action is triggered.
+	 */
+	callback: ( items: Item[] ) => void;
+}
+
+export type Action< Item extends AnyItem > =
+	| ActionModal< Item >
+	| ActionButton< Item >;
+
+export interface ViewBaseProps< Item extends AnyItem > {
+	actions: Action< Item >[];
+	data: Item[];
+	fields: NormalizedField< Item >[];
+	getItemId: ( item: Item ) => string;
+	isLoading?: boolean;
+	onChangeView( view: View ): void;
+	onSelectionChange: ( items: Item[] ) => void;
+	selection: string[];
+	setOpenedFilter: ( fieldId: string ) => void;
+	view: View;
+}
+
+export interface ViewTableProps< Item extends AnyItem >
+	extends ViewBaseProps< Item > {
+	view: ViewTable;
+}
+
+export interface ViewListProps< Item extends AnyItem >
+	extends ViewBaseProps< Item > {
+	view: ViewList;
+}
+
+export interface ViewGridProps< Item extends AnyItem >
+	extends ViewBaseProps< Item > {
+	view: ViewGrid;
+}
+
+export type ViewProps< Item extends AnyItem > =
+	| ViewTableProps< Item >
+	| ViewGridProps< Item >
+	| ViewListProps< Item >;
diff --git a/packages/dataviews/src/utils.js b/packages/dataviews/src/utils.ts
similarity index 66%
rename from packages/dataviews/src/utils.js
rename to packages/dataviews/src/utils.ts
index cf861f36e06ac..d895289318da0 100644
--- a/packages/dataviews/src/utils.js
+++ b/packages/dataviews/src/utils.ts
@@ -8,8 +8,11 @@ import {
 	OPERATOR_IS_ANY,
 	OPERATOR_IS_NONE,
 } from './constants';
+import type { AnyItem, NormalizedField } from './types';
 
-export const sanitizeOperators = ( field ) => {
+export function sanitizeOperators< Item extends AnyItem >(
+	field: NormalizedField< Item >
+) {
 	let operators = field.filterBy?.operators;
 
 	// Assign default values.
@@ -17,17 +20,6 @@ export const sanitizeOperators = ( field ) => {
 		operators = [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ];
 	}
 
-	// Transform legacy in, notIn operators to is, isNot.
-	// To be removed in the future.
-	if ( operators.includes( 'in' ) ) {
-		operators = operators.filter( ( operator ) => operator !== 'is' );
-		operators.push( 'is' );
-	}
-	if ( operators.includes( 'notIn' ) ) {
-		operators = operators.filter( ( operator ) => operator !== 'notIn' );
-		operators.push( 'isNot' );
-	}
-
 	// Make sure only valid operators are used.
 	operators = operators.filter( ( operator ) =>
 		ALL_OPERATORS.includes( operator )
@@ -45,4 +37,4 @@ export const sanitizeOperators = ( field ) => {
 	}
 
 	return operators;
-};
+}
diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.tsx
similarity index 64%
rename from packages/dataviews/src/view-actions.js
rename to packages/dataviews/src/view-actions.tsx
index 6385936b94086..9009841757531 100644
--- a/packages/dataviews/src/view-actions.js
+++ b/packages/dataviews/src/view-actions.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ChangeEvent } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -13,8 +18,9 @@ import { settings } from '@wordpress/icons';
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
-import { SORTING_DIRECTIONS } from './constants';
+import { SORTING_DIRECTIONS, sortLabels } from './constants';
 import { VIEW_LAYOUTS } from './layouts';
+import type { AnyItem, NormalizedField, View } from './types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -25,7 +31,41 @@ const {
 	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
 } = unlock( componentsPrivateApis );
 
-function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
+interface ViewTypeMenuProps {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	supportedLayouts?: string[];
+}
+
+interface PageSizeMenuProps {
+	view: View;
+	onChangeView: ( view: View ) => void;
+}
+
+interface FieldsVisibilityMenuProps< Item extends AnyItem > {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	fields: NormalizedField< Item >[];
+}
+
+interface SortMenuProps< Item extends AnyItem > {
+	fields: NormalizedField< Item >[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+}
+
+interface ViewActionsProps< Item extends AnyItem > {
+	fields: NormalizedField< Item >[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+	supportedLayouts?: string[];
+}
+
+function ViewTypeMenu( {
+	view,
+	onChangeView,
+	supportedLayouts,
+}: ViewTypeMenuProps ) {
 	let _availableViews = VIEW_LAYOUTS;
 	if ( supportedLayouts ) {
 		_availableViews = _availableViews.filter( ( _view ) =>
@@ -41,7 +81,7 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 			trigger={
 				<DropdownMenuItem
 					suffix={
-						<span aria-hidden="true">{ activeView.label }</span>
+						<span aria-hidden="true">{ activeView?.label }</span>
 					}
 				>
 					<DropdownMenuItemLabel>
@@ -58,11 +98,18 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 						name="view-actions-available-view"
 						checked={ availableView.type === view.type }
 						hideOnClick
-						onChange={ ( e ) => {
-							onChangeView( {
-								...view,
-								type: e.target.value,
-							} );
+						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => {
+							switch ( e.target.value ) {
+								case 'list':
+								case 'grid':
+								case 'table':
+									return onChangeView( {
+										...view,
+										type: e.target.value,
+										layout: {},
+									} );
+							}
+							throw new Error( 'Invalid dataview' );
 						} }
 					>
 						<DropdownMenuItemLabel>
@@ -76,7 +123,7 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 }
 
 const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
-function PageSizeMenu( { view, onChangeView } ) {
+function PageSizeMenu( { view, onChangeView }: PageSizeMenuProps ) {
 	return (
 		<DropdownMenu
 			trigger={
@@ -114,7 +161,11 @@ function PageSizeMenu( { view, onChangeView } ) {
 	);
 }
 
-function FieldsVisibilityMenu( { view, onChangeView, fields } ) {
+function FieldsVisibilityMenu< Item extends AnyItem >( {
+	view,
+	onChangeView,
+	fields,
+}: FieldsVisibilityMenuProps< Item > ) {
 	const hidableFields = fields.filter(
 		( field ) =>
 			field.enableHiding !== false && field.id !== view.layout.mediaField
@@ -164,7 +215,11 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) {
 	);
 }
 
-function SortMenu( { fields, view, onChangeView } ) {
+function SortMenu< Item extends AnyItem >( {
+	fields,
+	view,
+	onChangeView,
+}: SortMenuProps< Item > ) {
 	const sortableFields = fields.filter(
 		( field ) => field.enableSorting !== false
 	);
@@ -206,43 +261,41 @@ function SortMenu( { fields, view, onChangeView } ) {
 							minWidth: '220px',
 						} }
 					>
-						{ Object.entries( SORTING_DIRECTIONS ).map(
-							( [ direction, info ] ) => {
-								const isChecked =
-									currentSortedField !== undefined &&
-									sortedDirection === direction &&
-									field.id === currentSortedField.id;
+						{ SORTING_DIRECTIONS.map( ( direction ) => {
+							const isChecked =
+								currentSortedField !== undefined &&
+								sortedDirection === direction &&
+								field.id === currentSortedField.id;
 
-								const value = `${ field.id }-${ direction }`;
+							const value = `${ field.id }-${ direction }`;
 
-								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>
-											{ info.label }
-										</DropdownMenuItemLabel>
-									</DropdownMenuRadioItem>
-								);
-							}
-						) }
+							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>
 				);
 			} ) }
@@ -250,12 +303,12 @@ function SortMenu( { fields, view, onChangeView } ) {
 	);
 }
 
-const ViewActions = memo( function ViewActions( {
+function _ViewActions< Item extends AnyItem >( {
 	fields,
 	view,
 	onChangeView,
 	supportedLayouts,
-} ) {
+}: ViewActionsProps< Item > ) {
 	return (
 		<DropdownMenu
 			trigger={
@@ -286,6 +339,9 @@ const ViewActions = memo( function ViewActions( {
 			</DropdownMenuGroup>
 		</DropdownMenu>
 	);
-} );
+}
+
+// A type assertion is used here to keep the type argument.
+const ViewActions = memo( _ViewActions ) as typeof _ViewActions;
 
 export default ViewActions;
diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.tsx
similarity index 85%
rename from packages/dataviews/src/view-grid.js
rename to packages/dataviews/src/view-grid.tsx
index fbb632f94632c..77ac3c9273852 100644
--- a/packages/dataviews/src/view-grid.js
+++ b/packages/dataviews/src/view-grid.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -21,10 +21,24 @@ import { __ } from '@wordpress/i18n';
  */
 import ItemActions from './item-actions';
 import SingleSelectionCheckbox from './single-selection-checkbox';
-
 import { useHasAPossibleBulkAction } from './bulk-actions';
+import type { Action, AnyItem, NormalizedField, ViewGridProps } from './types';
+
+interface GridItemProps< Item extends AnyItem > {
+	selection: string[];
+	data: Item[];
+	onSelectionChange: ( items: Item[] ) => void;
+	getItemId: ( item: Item ) => string;
+	item: Item;
+	actions: Action< Item >[];
+	mediaField?: NormalizedField< Item >;
+	primaryField?: NormalizedField< Item >;
+	visibleFields: NormalizedField< Item >[];
+	badgeFields: NormalizedField< Item >[];
+	columnFields?: string[];
+}
 
-function GridItem( {
+function GridItem< Item extends AnyItem >( {
 	selection,
 	data,
 	onSelectionChange,
@@ -36,7 +50,7 @@ function GridItem( {
 	visibleFields,
 	badgeFields,
 	columnFields,
-} ) {
+}: GridItemProps< Item > ) {
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
 	const isSelected = selection.includes( id );
@@ -44,7 +58,7 @@ function GridItem( {
 		<VStack
 			spacing={ 0 }
 			key={ id }
-			className={ classnames( 'dataviews-view-grid__card', {
+			className={ clsx( 'dataviews-view-grid__card', {
 				'is-selected': hasBulkAction && isSelected,
 			} ) }
 			onClickCapture={ ( event ) => {
@@ -86,7 +100,6 @@ function GridItem( {
 				className="dataviews-view-grid__title-actions"
 			>
 				<SingleSelectionCheckbox
-					id={ id }
 					item={ item }
 					selection={ selection }
 					onSelectionChange={ onSelectionChange }
@@ -105,7 +118,7 @@ function GridItem( {
 					className="dataviews-view-grid__badge-fields"
 					spacing={ 2 }
 					wrap
-					align="top"
+					alignment="top"
 					justify="flex-start"
 				>
 					{ badgeFields.map( ( field ) => {
@@ -118,7 +131,7 @@ function GridItem( {
 						return (
 							<FlexItem
 								key={ field.id }
-								className={ 'dataviews-view-grid__field-value' }
+								className="dataviews-view-grid__field-value"
 							>
 								{ renderedValue }
 							</FlexItem>
@@ -137,7 +150,7 @@ function GridItem( {
 						}
 						return (
 							<Flex
-								className={ classnames(
+								className={ clsx(
 									'dataviews-view-grid__field',
 									columnFields?.includes( field.id )
 										? 'is-column'
@@ -174,16 +187,16 @@ function GridItem( {
 	);
 }
 
-export default function ViewGrid( {
+export default function ViewGrid< Item extends AnyItem >( {
+	actions,
 	data,
 	fields,
-	view,
-	actions,
-	isLoading,
 	getItemId,
-	selection,
+	isLoading,
 	onSelectionChange,
-} ) {
+	selection,
+	view,
+}: ViewGridProps< Item > ) {
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout.mediaField
 	);
@@ -191,7 +204,7 @@ export default function ViewGrid( {
 		( field ) => field.id === view.layout.primaryField
 	);
 	const { visibleFields, badgeFields } = fields.reduce(
-		( accumulator, field ) => {
+		( accumulator: Record< string, NormalizedField< Item >[] >, field ) => {
 			if (
 				view.hiddenFields.includes( field.id ) ||
 				[ view.layout.mediaField, view.layout.primaryField ].includes(
@@ -215,7 +228,7 @@ export default function ViewGrid( {
 		<>
 			{ hasData && (
 				<Grid
-					gap={ 6 }
+					gap={ 8 }
 					columns={ 2 }
 					alignment="top"
 					className="dataviews-view-grid"
@@ -243,7 +256,7 @@ export default function ViewGrid( {
 			) }
 			{ ! hasData && (
 				<div
-					className={ classnames( {
+					className={ clsx( {
 						'dataviews-loading': isLoading,
 						'dataviews-no-results': ! isLoading,
 					} ) }
diff --git a/packages/dataviews/src/view-list.js b/packages/dataviews/src/view-list.js
deleted file mode 100644
index cc70aea91ec48..0000000000000
--- a/packages/dataviews/src/view-list.js
+++ /dev/null
@@ -1,207 +0,0 @@
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-import {
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	privateApis as componentsPrivateApis,
-	Spinner,
-	VisuallyHidden,
-} from '@wordpress/components';
-import { useCallback, useEffect, useRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { unlock } from './lock-unlock';
-
-const {
-	useCompositeStoreV2: useCompositeStore,
-	CompositeV2: Composite,
-	CompositeItemV2: CompositeItem,
-	CompositeRowV2: CompositeRow,
-} = unlock( componentsPrivateApis );
-
-function ListItem( {
-	id,
-	item,
-	isSelected,
-	onSelect,
-	mediaField,
-	primaryField,
-	visibleFields,
-} ) {
-	const itemRef = useRef( null );
-	const labelId = `${ id }-label`;
-	const descriptionId = `${ id }-description`;
-
-	useEffect( () => {
-		if ( isSelected ) {
-			itemRef.current?.scrollIntoView( {
-				behavior: 'auto',
-				block: 'nearest',
-				inline: 'nearest',
-			} );
-		}
-	}, [ isSelected ] );
-
-	return (
-		<CompositeRow
-			ref={ itemRef }
-			render={ <li /> }
-			role="row"
-			className={ classNames( {
-				'is-selected': isSelected,
-			} ) }
-		>
-			<HStack className="dataviews-view-list__item-wrapper">
-				<div role="gridcell">
-					<CompositeItem
-						render={ <div /> }
-						role="button"
-						id={ id }
-						aria-pressed={ isSelected }
-						aria-labelledby={ labelId }
-						aria-describedby={ descriptionId }
-						className="dataviews-view-list__item"
-						onClick={ () => onSelect( item ) }
-					>
-						<HStack
-							spacing={ 3 }
-							justify="start"
-							alignment="flex-start"
-						>
-							<div className="dataviews-view-list__media-wrapper">
-								{ mediaField?.render( { item } ) || (
-									<div className="dataviews-view-list__media-placeholder"></div>
-								) }
-							</div>
-							<VStack spacing={ 1 }>
-								<span
-									className="dataviews-view-list__primary-field"
-									id={ labelId }
-								>
-									{ primaryField?.render( { item } ) }
-								</span>
-								<div
-									className="dataviews-view-list__fields"
-									id={ descriptionId }
-								>
-									{ visibleFields.map( ( field ) => (
-										<div
-											key={ field.id }
-											className="dataviews-view-list__field"
-										>
-											<VisuallyHidden
-												as="span"
-												className="dataviews-view-list__field-label"
-											>
-												{ field.header }
-											</VisuallyHidden>
-											<span className="dataviews-view-list__field-value">
-												{ field.render( { item } ) }
-											</span>
-										</div>
-									) ) }
-								</div>
-							</VStack>
-						</HStack>
-					</CompositeItem>
-				</div>
-			</HStack>
-		</CompositeRow>
-	);
-}
-
-export default function ViewList( {
-	view,
-	fields,
-	data,
-	isLoading,
-	getItemId,
-	onSelectionChange,
-	selection,
-	id: preferredId,
-} ) {
-	const baseId = useInstanceId( ViewList, 'view-list', preferredId );
-	const selectedItem = data?.findLast( ( item ) =>
-		selection.includes( item.id )
-	);
-
-	const mediaField = fields.find(
-		( field ) => field.id === view.layout.mediaField
-	);
-	const primaryField = fields.find(
-		( field ) => field.id === view.layout.primaryField
-	);
-	const visibleFields = fields.filter(
-		( field ) =>
-			! view.hiddenFields.includes( field.id ) &&
-			! [ view.layout.primaryField, view.layout.mediaField ].includes(
-				field.id
-			)
-	);
-
-	const onSelect = useCallback(
-		( item ) => onSelectionChange( [ item ] ),
-		[ onSelectionChange ]
-	);
-
-	const getItemDomId = useCallback(
-		( item ) => ( item ? `${ baseId }-${ getItemId( item ) }` : undefined ),
-		[ baseId, getItemId ]
-	);
-
-	const store = useCompositeStore( {
-		defaultActiveId: getItemDomId( selectedItem ),
-	} );
-
-	const hasData = data?.length;
-	if ( ! hasData ) {
-		return (
-			<div
-				className={ classNames( {
-					'dataviews-loading': isLoading,
-					'dataviews-no-results': ! hasData && ! isLoading,
-				} ) }
-			>
-				{ ! hasData && (
-					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
-				) }
-			</div>
-		);
-	}
-
-	return (
-		<Composite
-			id={ baseId }
-			render={ <ul /> }
-			className="dataviews-view-list"
-			role="grid"
-			store={ store }
-		>
-			{ data.map( ( item ) => {
-				const id = getItemDomId( item );
-				return (
-					<ListItem
-						key={ id }
-						id={ id }
-						item={ item }
-						isSelected={ item === selectedItem }
-						onSelect={ onSelect }
-						mediaField={ mediaField }
-						primaryField={ primaryField }
-						visibleFields={ visibleFields }
-					/>
-				);
-			} ) }
-		</Composite>
-	);
-}
diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx
new file mode 100644
index 0000000000000..0721a9b5d8ffe
--- /dev/null
+++ b/packages/dataviews/src/view-list.tsx
@@ -0,0 +1,411 @@
+/**
+ * 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 {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+	privateApis as componentsPrivateApis,
+	Spinner,
+	VisuallyHidden,
+} from '@wordpress/components';
+import {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+import type { Action, AnyItem, NormalizedField, ViewListProps } from './types';
+
+import { ActionsDropdownMenuGroup, ActionModal } from './item-actions';
+
+interface ListViewItemProps< Item extends AnyItem > {
+	actions: Action< Item >[];
+	id?: string;
+	isSelected: boolean;
+	item: Item;
+	mediaField?: NormalizedField< Item >;
+	onSelect: ( item: Item ) => void;
+	primaryField?: NormalizedField< Item >;
+	store: CompositeStore;
+	visibleFields: NormalizedField< Item >[];
+}
+
+const {
+	useCompositeStoreV2: useCompositeStore,
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	CompositeRowV2: CompositeRow,
+	DropdownMenuV2: DropdownMenu,
+} = unlock( componentsPrivateApis );
+
+function ListItem< Item extends AnyItem >( {
+	actions,
+	id,
+	isSelected,
+	item,
+	mediaField,
+	onSelect,
+	primaryField,
+	store,
+	visibleFields,
+}: ListViewItemProps< Item > ) {
+	const itemRef = useRef< HTMLElement >( null );
+	const labelId = `${ id }-label`;
+	const descriptionId = `${ id }-description`;
+
+	const [ isHovered, setIsHovered ] = useState( false );
+	const handleMouseEnter = () => {
+		setIsHovered( true );
+	};
+	const handleMouseLeave = () => {
+		setIsHovered( false );
+	};
+
+	useEffect( () => {
+		if ( isSelected ) {
+			itemRef.current?.scrollIntoView( {
+				behavior: 'auto',
+				block: 'nearest',
+				inline: 'nearest',
+			} );
+		}
+	}, [ isSelected ] );
+
+	const { primaryAction, eligibleActions } = useMemo( () => {
+		// If an action is eligible for all items, doesn't need
+		// to provide the `isEligible` function.
+		const _eligibleActions = actions.filter(
+			( action ) => ! action.isEligible || action.isEligible( item )
+		);
+		const _primaryActions = _eligibleActions.filter(
+			( action ) => action.isPrimary && !! action.icon
+		);
+		return {
+			primaryAction: _primaryActions?.[ 0 ],
+			eligibleActions: _eligibleActions,
+		};
+	}, [ actions, item ] );
+
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const primaryActionLabel =
+		primaryAction &&
+		( typeof primaryAction.label === 'string'
+			? primaryAction.label
+			: primaryAction.label( [ item ] ) );
+
+	return (
+		<CompositeRow
+			ref={ itemRef }
+			render={ <li /> }
+			role="row"
+			className={ clsx( {
+				'is-selected': isSelected,
+				'is-hovered': isHovered,
+			} ) }
+			onMouseEnter={ handleMouseEnter }
+			onMouseLeave={ handleMouseLeave }
+		>
+			<HStack
+				className="dataviews-view-list__item-wrapper"
+				alignment="center"
+				spacing={ 0 }
+			>
+				<div role="gridcell">
+					<CompositeItem
+						store={ store }
+						render={ <div /> }
+						role="button"
+						id={ id }
+						aria-pressed={ isSelected }
+						aria-labelledby={ labelId }
+						aria-describedby={ descriptionId }
+						className="dataviews-view-list__item"
+						onClick={ () => onSelect( item ) }
+					>
+						<HStack
+							spacing={ 3 }
+							justify="start"
+							alignment="flex-start"
+						>
+							<div className="dataviews-view-list__media-wrapper">
+								{ mediaField?.render( { item } ) || (
+									<div className="dataviews-view-list__media-placeholder"></div>
+								) }
+							</div>
+							<VStack spacing={ 0 }>
+								<span
+									className="dataviews-view-list__primary-field"
+									id={ labelId }
+								>
+									{ primaryField?.render( { item } ) }
+								</span>
+								<div
+									className="dataviews-view-list__fields"
+									id={ descriptionId }
+								>
+									{ visibleFields.map( ( field ) => (
+										<div
+											key={ field.id }
+											className="dataviews-view-list__field"
+										>
+											<VisuallyHidden
+												as="span"
+												className="dataviews-view-list__field-label"
+											>
+												{ field.header }
+											</VisuallyHidden>
+											<span className="dataviews-view-list__field-value">
+												{ field.render( { item } ) }
+											</span>
+										</div>
+									) ) }
+								</div>
+							</VStack>
+						</HStack>
+					</CompositeItem>
+				</div>
+				{ actions?.length > 0 && (
+					<HStack
+						spacing={ 1 }
+						justify="flex-end"
+						className="dataviews-view-list__item-actions"
+						style={ {
+							flexShrink: '0',
+							width: 'auto',
+						} }
+					>
+						{ primaryAction && 'RenderModal' in primaryAction && (
+							<div role="gridcell">
+								<CompositeItem
+									store={ store }
+									render={
+										<Button
+											label={ primaryActionLabel }
+											icon={ primaryAction.icon }
+											isDestructive={
+												primaryAction.isDestructive
+											}
+											size="compact"
+											onClick={ () =>
+												setIsModalOpen( true )
+											}
+										/>
+									}
+								>
+									{ isModalOpen && (
+										<ActionModal< Item >
+											action={ primaryAction }
+											items={ [ item ] }
+											closeModal={ () =>
+												setIsModalOpen( false )
+											}
+										/>
+									) }
+								</CompositeItem>
+							</div>
+						) }
+						{ primaryAction &&
+							! ( 'RenderModal' in primaryAction ) && (
+								<div role="gridcell" key={ primaryAction.id }>
+									<CompositeItem
+										store={ store }
+										render={
+											<Button
+												label={ primaryActionLabel }
+												icon={ primaryAction.icon }
+												isDestructive={
+													primaryAction.isDestructive
+												}
+												size="compact"
+												onClick={ () =>
+													primaryAction.callback( [
+														item,
+													] )
+												}
+											/>
+										}
+									/>
+								</div>
+							) }
+						<div role="gridcell">
+							<DropdownMenu
+								trigger={
+									<CompositeItem
+										store={ store }
+										render={
+											<Button
+												size="compact"
+												icon={ moreVertical }
+												label={ __( 'Actions' ) }
+												__experimentalIsFocusable
+												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()
+														);
+													}
+												} }
+											/>
+										}
+									/>
+								}
+								placement="bottom-end"
+							>
+								<ActionsDropdownMenuGroup
+									actions={ eligibleActions }
+									item={ item }
+								/>
+							</DropdownMenu>
+						</div>
+					</HStack>
+				) }
+			</HStack>
+		</CompositeRow>
+	);
+}
+
+export default function ViewList< Item extends AnyItem >(
+	props: ViewListProps< Item >
+) {
+	const {
+		actions,
+		data,
+		fields,
+		getItemId,
+		isLoading,
+		onSelectionChange,
+		selection,
+		view,
+	} = props;
+	const baseId = useInstanceId( ViewList, 'view-list' );
+	const selectedItem = data?.findLast( ( item ) =>
+		selection.includes( item.id )
+	);
+
+	const mediaField = fields.find(
+		( field ) => field.id === view.layout.mediaField
+	);
+	const primaryField = fields.find(
+		( field ) => field.id === view.layout.primaryField
+	);
+	const visibleFields = fields.filter(
+		( field ) =>
+			! view.hiddenFields.includes( field.id ) &&
+			! [ view.layout.primaryField, view.layout.mediaField ].includes(
+				field.id
+			)
+	);
+
+	const onSelect = useCallback(
+		( item: Item ) => onSelectionChange( [ item ] ),
+		[ onSelectionChange ]
+	);
+
+	const getItemDomId = useCallback(
+		( item?: Item ) =>
+			item ? `${ baseId }-${ getItemId( item ) }` : undefined,
+		[ 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
+			)
+	);
+	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() );
+			}
+		}
+	}, [ isActiveIdInList ] );
+
+	const hasData = data?.length;
+	if ( ! hasData ) {
+		return (
+			<div
+				className={ clsx( {
+					'dataviews-loading': isLoading,
+					'dataviews-no-results': ! hasData && ! isLoading,
+				} ) }
+			>
+				{ ! hasData && (
+					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
+				) }
+			</div>
+		);
+	}
+
+	return (
+		<Composite
+			id={ baseId }
+			render={ <ul /> }
+			className="dataviews-view-list"
+			role="grid"
+			store={ store }
+		>
+			{ data.map( ( item ) => {
+				const id = getItemDomId( item );
+				return (
+					<ListItem
+						key={ id }
+						id={ id }
+						actions={ actions }
+						item={ item }
+						isSelected={ item === selectedItem }
+						onSelect={ onSelect }
+						mediaField={ mediaField }
+						primaryField={ primaryField }
+						store={ store }
+						visibleFields={ visibleFields }
+					/>
+				);
+			} ) }
+		</Composite>
+	);
+}
diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.tsx
similarity index 79%
rename from packages/dataviews/src/view-table.js
rename to packages/dataviews/src/view-table.tsx
index b6cb5fb979e05..075a60fccd129 100644
--- a/packages/dataviews/src/view-table.js
+++ b/packages/dataviews/src/view-table.tsx
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
+import type { ReactNode, Ref, PropsWithoutRef, RefAttributes } from 'react';
 
 /**
  * WordPress dependencies
@@ -33,11 +34,24 @@ import SingleSelectionCheckbox from './single-selection-checkbox';
 import { unlock } from './lock-unlock';
 import ItemActions from './item-actions';
 import { sanitizeOperators } from './utils';
-import { SORTING_DIRECTIONS } from './constants';
+import {
+	SORTING_DIRECTIONS,
+	sortArrows,
+	sortLabels,
+	sortValues,
+} from './constants';
 import {
 	useSomeItemHasAPossibleBulkAction,
 	useHasAPossibleBulkAction,
 } from './bulk-actions';
+import type {
+	Action,
+	AnyItem,
+	NormalizedField,
+	SortDirection,
+	ViewTable as ViewTableType,
+	ViewTableProps,
+} from './types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -48,7 +62,35 @@ const {
 	DropdownMenuSeparatorV2: DropdownMenuSeparator,
 } = unlock( componentsPrivateApis );
 
-function WithDropDownMenuSeparators( { children } ) {
+interface HeaderMenuProps< Item extends AnyItem > {
+	field: NormalizedField< Item >;
+	view: ViewTableType;
+	onChangeView: ( view: ViewTableType ) => void;
+	onHide: ( field: NormalizedField< Item > ) => void;
+	setOpenedFilter: ( fieldId: string ) => void;
+}
+
+interface BulkSelectionCheckboxProps< Item extends AnyItem > {
+	selection: string[];
+	onSelectionChange: ( items: Item[] ) => void;
+	data: Item[];
+	actions: Action< Item >[];
+}
+
+interface TableRowProps< Item extends AnyItem > {
+	hasBulkActions: boolean;
+	item: Item;
+	actions: Action< Item >[];
+	id: string;
+	visibleFields: NormalizedField< Item >[];
+	primaryField?: NormalizedField< Item >;
+	selection: string[];
+	getItemId: ( item: Item ) => string;
+	onSelectionChange: ( items: Item[] ) => void;
+	data: Item[];
+}
+
+function WithDropDownMenuSeparators( { children }: { children: ReactNode } ) {
 	return Children.toArray( children )
 		.filter( Boolean )
 		.map( ( child, i ) => (
@@ -59,11 +101,15 @@ function WithDropDownMenuSeparators( { children } ) {
 		) );
 }
 
-const sortArrows = { asc: '↑', desc: '↓' };
-
-const HeaderMenu = forwardRef( function HeaderMenu(
-	{ field, view, onChangeView, onHide, setOpenedFilter },
-	ref
+const _HeaderMenu = forwardRef( function HeaderMenu< Item extends AnyItem >(
+	{
+		field,
+		view,
+		onChangeView,
+		onHide,
+		setOpenedFilter,
+	}: HeaderMenuProps< Item >,
+	ref: Ref< HTMLButtonElement >
 ) {
 	const isHidable = field.enableHiding !== false;
 	const isSortable = field.enableSorting !== false;
@@ -92,9 +138,9 @@ const HeaderMenu = forwardRef( function HeaderMenu(
 					variant="tertiary"
 				>
 					{ field.header }
-					{ isSorted && (
+					{ view.sort && isSorted && (
 						<span aria-hidden="true">
-							{ isSorted && sortArrows[ view.sort.direction ] }
+							{ sortArrows[ view.sort.direction ] }
 						</span>
 					) }
 				</Button>
@@ -104,9 +150,10 @@ const HeaderMenu = forwardRef( function HeaderMenu(
 			<WithDropDownMenuSeparators>
 				{ isSortable && (
 					<DropdownMenuGroup>
-						{ Object.entries( SORTING_DIRECTIONS ).map(
-							( [ direction, info ] ) => {
+						{ SORTING_DIRECTIONS.map(
+							( direction: SortDirection ) => {
 								const isChecked =
+									view.sort &&
 									isSorted &&
 									view.sort.direction === direction;
 
@@ -134,7 +181,7 @@ const HeaderMenu = forwardRef( function HeaderMenu(
 										} }
 									>
 										<DropdownMenuItemLabel>
-											{ info.label }
+											{ sortLabels[ direction ] }
 										</DropdownMenuItemLabel>
 									</DropdownMenuRadioItem>
 								);
@@ -191,16 +238,24 @@ const HeaderMenu = forwardRef( function HeaderMenu(
 	);
 } );
 
-function BulkSelectionCheckbox( {
+// @ts-expect-error Lift the `Item` type argument through the forwardRef.
+const HeaderMenu: < Item extends AnyItem >(
+	props: PropsWithoutRef< HeaderMenuProps< Item > > &
+		RefAttributes< HTMLButtonElement >
+) => ReturnType< typeof _HeaderMenu > = _HeaderMenu;
+
+function BulkSelectionCheckbox< Item extends AnyItem >( {
 	selection,
 	onSelectionChange,
 	data,
 	actions,
-} ) {
+}: BulkSelectionCheckboxProps< Item > ) {
 	const selectableItems = useMemo( () => {
 		return data.filter( ( item ) => {
 			return actions.some(
-				( action ) => action.supportsBulk && action.isEligible( item )
+				( action ) =>
+					action.supportsBulk &&
+					( ! action.isEligible || action.isEligible( item ) )
 			);
 		} );
 	}, [ data, actions ] );
@@ -210,7 +265,7 @@ function BulkSelectionCheckbox( {
 			className="dataviews-view-table-selection-checkbox"
 			__nextHasNoMarginBottom
 			checked={ areAllSelected }
-			indeterminate={ ! areAllSelected && selection.length }
+			indeterminate={ ! areAllSelected && !! selection.length }
 			onChange={ () => {
 				if ( areAllSelected ) {
 					onSelectionChange( [] );
@@ -225,7 +280,7 @@ function BulkSelectionCheckbox( {
 	);
 }
 
-function TableRow( {
+function TableRow< Item extends AnyItem >( {
 	hasBulkActions,
 	item,
 	actions,
@@ -236,7 +291,7 @@ function TableRow( {
 	getItemId,
 	onSelectionChange,
 	data,
-} ) {
+}: TableRowProps< Item > ) {
 	const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );
 	const isSelected = selection.includes( id );
 
@@ -257,7 +312,7 @@ function TableRow( {
 
 	return (
 		<tr
-			className={ classnames( 'dataviews-view-table__row', {
+			className={ clsx( 'dataviews-view-table__row', {
 				'is-selected': hasPossibleBulkAction && isSelected,
 				'is-hovered': isHovered,
 				'has-bulk-actions': hasPossibleBulkAction,
@@ -270,7 +325,7 @@ function TableRow( {
 			onClick={ () => {
 				if (
 					! isTouchDevice.current &&
-					document.getSelection().type !== 'Range'
+					document.getSelection()?.type !== 'Range'
 				) {
 					if ( ! isSelected ) {
 						onSelectionChange(
@@ -305,7 +360,6 @@ function TableRow( {
 				>
 					<div className="dataviews-view-table__cell-content-wrapper">
 						<SingleSelectionCheckbox
-							id={ id }
 							item={ item }
 							selection={ selection }
 							onSelectionChange={ onSelectionChange }
@@ -327,7 +381,7 @@ function TableRow( {
 					} }
 				>
 					<div
-						className={ classnames(
+						className={ clsx(
 							'dataviews-view-table__cell-content-wrapper',
 							{
 								'dataviews-view-table__primary-field':
@@ -361,21 +415,24 @@ function TableRow( {
 	);
 }
 
-function ViewTable( {
-	view,
-	onChangeView,
-	fields,
+function ViewTable< Item extends AnyItem >( {
 	actions,
 	data,
+	fields,
 	getItemId,
 	isLoading = false,
-	selection,
+	onChangeView,
 	onSelectionChange,
+	selection,
 	setOpenedFilter,
-} ) {
-	const headerMenuRefs = useRef( new Map() );
-	const headerMenuToFocusRef = useRef();
-	const [ nextHeaderMenuToFocus, setNextHeaderMenuToFocus ] = useState();
+	view,
+}: ViewTableProps< Item > ) {
+	const headerMenuRefs = useRef<
+		Map< string, { node: HTMLButtonElement; fallback: string } >
+	>( new Map() );
+	const headerMenuToFocusRef = useRef< HTMLButtonElement >();
+	const [ nextHeaderMenuToFocus, setNextHeaderMenuToFocus ] =
+		useState< HTMLButtonElement >();
 	const hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );
 
 	useEffect( () => {
@@ -393,13 +450,15 @@ function ViewTable( {
 		// Clearing out the focus directive is necessary to make sure
 		// future renders don't cause unexpected focus jumps.
 		headerMenuToFocusRef.current = nextHeaderMenuToFocus;
-		setNextHeaderMenuToFocus();
+		setNextHeaderMenuToFocus( undefined );
 		return;
 	}
 
-	const onHide = ( field ) => {
+	const onHide = ( field: NormalizedField< Item > ) => {
 		const hidden = headerMenuRefs.current.get( field.id );
-		const fallback = headerMenuRefs.current.get( hidden.fallback );
+		const fallback = hidden
+			? headerMenuRefs.current.get( hidden.fallback )
+			: undefined;
 		setNextHeaderMenuToFocus( fallback?.node );
 	};
 	const visibleFields = fields.filter(
@@ -408,7 +467,6 @@ function ViewTable( {
 			! [ view.layout.mediaField ].includes( field.id )
 	);
 	const hasData = !! data?.length;
-	const sortValues = { asc: 'ascending', desc: 'descending' };
 
 	const primaryField = fields.find(
 		( field ) => field.id === view.layout.primaryField
@@ -450,8 +508,9 @@ function ViewTable( {
 								} }
 								data-field-id={ field.id }
 								aria-sort={
-									view.sort?.field === field.id &&
-									sortValues[ view.sort.direction ]
+									view.sort?.field === field.id
+										? sortValues[ view.sort.direction ]
+										: undefined
 								}
 								scope="col"
 							>
@@ -504,7 +563,7 @@ function ViewTable( {
 								item={ item }
 								hasBulkActions={ hasBulkActions }
 								actions={ actions }
-								id={ getItemId( item ) || index }
+								id={ getItemId( item ) || index.toString() }
 								visibleFields={ visibleFields }
 								primaryField={ primaryField }
 								selection={ selection }
@@ -516,7 +575,7 @@ function ViewTable( {
 				</tbody>
 			</table>
 			<div
-				className={ classnames( {
+				className={ clsx( {
 					'dataviews-loading': isLoading,
 					'dataviews-no-results': ! hasData && ! isLoading,
 				} ) }
diff --git a/packages/dataviews/tsconfig.json b/packages/dataviews/tsconfig.json
index 119035ffe7be3..3a944ae6e2d1d 100644
--- a/packages/dataviews/tsconfig.json
+++ b/packages/dataviews/tsconfig.json
@@ -3,18 +3,17 @@
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
-		"declarationDir": "build-types"
+		"declarationDir": "build-types",
+		"checkJs": false
 	},
 	"references": [
-		{ "path": "../a11y" },
 		{ "path": "../components" },
 		{ "path": "../compose" },
 		{ "path": "../element" },
 		{ "path": "../i18n" },
 		{ "path": "../icons" },
-		{ "path": "../keycodes" },
 		{ "path": "../primitives" },
 		{ "path": "../private-apis" }
 	],
-	"include": [ "src/**/*.ts", "src/**/*.tsx" ]
+	"include": [ "src" ]
 }
diff --git a/packages/date/CHANGELOG.md b/packages/date/CHANGELOG.md
index 2e698935d7ae3..b66b2983b20be 100644
--- a/packages/date/CHANGELOG.md
+++ b/packages/date/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.58.0 (2024-05-16)
+
 ## 4.57.0 (2024-05-02)
 
 ## 4.56.0 (2024-04-19)
diff --git a/packages/date/package.json b/packages/date/package.json
index 34195257555d2..23c66ba25823d 100644
--- a/packages/date/package.json
+++ b/packages/date/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/date",
-	"version": "4.57.0",
+	"version": "5.0.0",
 	"description": "Date module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
index c6b83f4c44545..2e152793334c0 100644
--- a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
+++ b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
@@ -2,6 +2,17 @@
 
 ## Unreleased
 
+## 6.0.0 (2024-05-31)
+
+### Breaking Changes
+
+**Note** If you're using @wordpress/scripts for building JS scripts to target WordPress 6.5 or earlier, you should not upgrade to this version and continue using @wordpress/dependency-extraction-webpack-plugin@5.
+
+-   Use React's automatic runtime to transform JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 5.9.0 (2024-05-16)
+
 ## 5.8.0 (2024-05-02)
 
 ## 5.7.0 (2024-04-19)
diff --git a/packages/dependency-extraction-webpack-plugin/README.md b/packages/dependency-extraction-webpack-plugin/README.md
index 168fb1cfab69d..9e6b183672f86 100644
--- a/packages/dependency-extraction-webpack-plugin/README.md
+++ b/packages/dependency-extraction-webpack-plugin/README.md
@@ -21,7 +21,7 @@ Install the module
 npm install @wordpress/dependency-extraction-webpack-plugin --save-dev
 ```
 
-**Note**: This package requires Node.js 18.0.0 or later. It also requires webpack 5.0.0 or newer. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It also requires webpack 5.0.0 or newer. It is not compatible with older versions.
 
 ## Usage
 
diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js
index 92fdcff11612e..55a908c31a7ab 100644
--- a/packages/dependency-extraction-webpack-plugin/lib/util.js
+++ b/packages/dependency-extraction-webpack-plugin/lib/util.js
@@ -42,6 +42,10 @@ function defaultRequestToExternal( request ) {
 
 		case 'react-dom':
 			return 'ReactDOM';
+
+		case 'react/jsx-runtime':
+		case 'react/jsx-dev-runtime':
+			return 'ReactJSXRuntime';
 	}
 
 	if ( request.includes( 'react-refresh/runtime' ) ) {
@@ -117,6 +121,9 @@ function defaultRequestToHandle( request ) {
 
 		case 'lodash-es':
 			return 'lodash';
+
+		case 'react/jsx-runtime':
+			return 'react-jsx-runtime';
 	}
 
 	if ( request.includes( 'react-refresh/runtime' ) ) {
diff --git a/packages/dependency-extraction-webpack-plugin/package.json b/packages/dependency-extraction-webpack-plugin/package.json
index b9c7813136b61..a551439c6caeb 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": "5.8.0",
+	"version": "6.0.0",
 	"description": "Extract WordPress script dependencies from webpack bundles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=18"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"lib",
diff --git a/packages/deprecated/CHANGELOG.md b/packages/deprecated/CHANGELOG.md
index 7437a99e22c68..99322e16983dc 100644
--- a/packages/deprecated/CHANGELOG.md
+++ b/packages/deprecated/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
 ## 3.57.0 (2024-05-02)
 
 ## 3.56.0 (2024-04-19)
diff --git a/packages/deprecated/package.json b/packages/deprecated/package.json
index 9ec79dcd8af1e..4ef4b23798002 100644
--- a/packages/deprecated/package.json
+++ b/packages/deprecated/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/deprecated",
-	"version": "3.57.0",
+	"version": "4.0.0",
 	"description": "Deprecation utility for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/docgen/CHANGELOG.md b/packages/docgen/CHANGELOG.md
index 80f28e6bfb07e..daffb59b72f5e 100644
--- a/packages/docgen/CHANGELOG.md
+++ b/packages/docgen/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 2.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 1.67.0 (2024-05-16)
+
 ## 1.66.0 (2024-05-02)
 
 ## 1.65.0 (2024-04-19)
@@ -86,7 +94,7 @@
 
 ### Bug Fixes
 
--	Fix getting param annotations for default exported functions. ([#31603](https://github.com/WordPress/gutenberg/pull/31603))
+-   Fix getting param annotations for default exported functions. ([#31603](https://github.com/WordPress/gutenberg/pull/31603))
 
 ## 1.17.0 (2021-04-29)
 
diff --git a/packages/docgen/README.md b/packages/docgen/README.md
index f54cd6b9e5773..4f60d0a3c7a26 100644
--- a/packages/docgen/README.md
+++ b/packages/docgen/README.md
@@ -16,6 +16,8 @@ Install the module
 npm install @wordpress/docgen --save-dev
 ```
 
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
+
 ## Usage
 
 ```bash
diff --git a/packages/docgen/package.json b/packages/docgen/package.json
index ddc00e794c9f1..832b0fb6a2a2a 100644
--- a/packages/docgen/package.json
+++ b/packages/docgen/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/docgen",
-	"version": "1.66.0",
+	"version": "2.0.0",
 	"description": "Autogenerate public API documentation from exports and JSDoc comments.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,6 +19,10 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
 	"files": [
 		"bin",
 		"lib"
diff --git a/packages/dom-ready/CHANGELOG.md b/packages/dom-ready/CHANGELOG.md
index fd6261e3fa002..b83d377c11db0 100644
--- a/packages/dom-ready/CHANGELOG.md
+++ b/packages/dom-ready/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
 ## 3.57.0 (2024-05-02)
 
 ## 3.56.0 (2024-04-19)
diff --git a/packages/dom-ready/package.json b/packages/dom-ready/package.json
index 73197d954a4fb..bc189f6e387b9 100644
--- a/packages/dom-ready/package.json
+++ b/packages/dom-ready/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dom-ready",
-	"version": "3.57.0",
+	"version": "4.0.0",
 	"description": "Execute callback after the DOM is loaded.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/dom/CHANGELOG.md b/packages/dom/CHANGELOG.md
index 58fabac10a406..878205fae89e9 100644
--- a/packages/dom/CHANGELOG.md
+++ b/packages/dom/CHANGELOG.md
@@ -2,13 +2,21 @@
 
 ## Unreleased
 
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
 ## 3.57.0 (2024-05-02)
 
 ## 3.56.0 (2024-04-19)
 
 ## 3.55.0 (2024-04-03)
 
-- fix return types of `focus.tabbable` methods to be `HTMLElement` instead of `Element`.
+-   fix return types of `focus.tabbable` methods to be `HTMLElement` instead of `Element`.
 
 ## 3.54.0 (2024-03-21)
 
@@ -92,7 +100,7 @@
 
 ## 3.14.0 (2022-07-27)
 
-- `getRectangleFromRange` may now return `null`.
+-   `getRectangleFromRange` may now return `null`.
 
 ## 3.13.0 (2022-07-13)
 
@@ -106,7 +114,7 @@
 
 ### Deprecation
 
-- Deprecate `isNumberInput`, as it is no longer used internally ([#40896](https://github.com/WordPress/gutenberg/pull/40896)).
+-   Deprecate `isNumberInput`, as it is no longer used internally ([#40896](https://github.com/WordPress/gutenberg/pull/40896)).
 
 ## 3.8.0 (2022-05-04)
 
diff --git a/packages/dom/package.json b/packages/dom/package.json
index 2a6ee1b787978..e059d757b2c5c 100644
--- a/packages/dom/package.json
+++ b/packages/dom/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dom",
-	"version": "3.57.0",
+	"version": "4.0.0",
 	"description": "DOM utilities module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/e2e-test-utils-playwright/CHANGELOG.md b/packages/e2e-test-utils-playwright/CHANGELOG.md
index 57271d70b0c4c..4fe11b5ea9501 100644
--- a/packages/e2e-test-utils-playwright/CHANGELOG.md
+++ b/packages/e2e-test-utils-playwright/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 1.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 0.26.0 (2024-05-16)
+
 ## 0.25.0 (2024-05-02)
 
 ## 0.24.0 (2024-04-19)
@@ -52,4 +60,4 @@
 
 ## 0.1.0 (2023-05-10)
 
-- Initial version of the package.
+-   Initial version of the package.
diff --git a/packages/e2e-test-utils-playwright/README.md b/packages/e2e-test-utils-playwright/README.md
index d03a6ced191f9..883bd87fb9c3c 100644
--- a/packages/e2e-test-utils-playwright/README.md
+++ b/packages/e2e-test-utils-playwright/README.md
@@ -16,7 +16,7 @@ Install the module
 npm install @wordpress/e2e-test-utils-playwright --save-dev
 ```
 
-**Note**: This package requires Node.js 12.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## API
 
@@ -42,6 +42,7 @@ await admin.visitAdminPage( 'options-general.php' );
 End to end test utilities for the WordPress Block Editor.
 
 To use these utilities, instantiate them within each test file:
+
 ```js
 test.use( {
 	editor: async ( { page }, use ) => {
@@ -53,7 +54,7 @@ test.use( {
 Within a test or test utility, use the `canvas` property to select elements within the iframe canvas:
 
 ```js
-await editor.canvas.locator( 'role=document[name="Paragraph block"i]' )
+await editor.canvas.locator( 'role=document[name="Paragraph block"i]' );
 ```
 
 ### PageUtils
diff --git a/packages/e2e-test-utils-playwright/package.json b/packages/e2e-test-utils-playwright/package.json
index 5cc9783029668..c630ac1869c7f 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": "0.25.0",
+	"version": "1.0.0",
 	"description": "End-To-End (E2E) test utils for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"build",
diff --git a/packages/e2e-test-utils-playwright/src/admin/create-new-post.ts b/packages/e2e-test-utils-playwright/src/admin/create-new-post.ts
index 5b06c6a2c53cb..a5d6617946ae3 100644
--- a/packages/e2e-test-utils-playwright/src/admin/create-new-post.ts
+++ b/packages/e2e-test-utils-playwright/src/admin/create-new-post.ts
@@ -9,6 +9,7 @@ interface NewPostOptions {
 	content?: string;
 	excerpt?: string;
 	showWelcomeGuide?: boolean;
+	fullscreenMode?: boolean;
 }
 
 /**
@@ -41,6 +42,6 @@ export async function createNewPost(
 
 	await this.editor.setPreferences( 'core/edit-post', {
 		welcomeGuide: options.showWelcomeGuide ?? false,
-		fullscreenMode: false,
+		fullscreenMode: options.fullscreenMode ?? false,
 	} );
 }
diff --git a/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts b/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts
index 251dae98cf203..f0a7db5ad966f 100644
--- a/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts
+++ b/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts
@@ -39,6 +39,31 @@ export async function visitSiteEditor(
 
 	await this.visitAdminPage( 'site-editor.php', query.toString() );
 
+	/**
+	 * @todo This is a workaround for the fact that the editor canvas is seen as
+	 * ready and visible before the loading spinner is hidden. Ideally, the
+	 * content underneath the loading overlay should be marked inert until the
+	 * loading is done.
+	 */
+	if ( ! query.size || postId || canvas === 'edit' ) {
+		const canvasLoader = this.page.locator(
+			// Spinner was used instead of the progress bar in an earlier
+			// version of the site editor.
+			'.edit-site-canvas-loader, .edit-site-canvas-spinner'
+		);
+
+		// Wait for the canvas loader to appear first, so that the locator that
+		// waits for the hidden state doesn't resolve prematurely.
+		await canvasLoader.waitFor( { state: 'visible' } );
+		await canvasLoader.waitFor( {
+			state: 'hidden',
+			// Bigger timeout is needed for larger entities, like the Large Post
+			// HTML fixture that we load for performance tests, which often
+			// doesn't make it under the default timeout value.
+			timeout: 60_000,
+		} );
+	}
+
 	if ( ! options.showWelcomeGuide ) {
 		await this.editor.setPreferences( 'core/edit-site', {
 			welcomeGuide: false,
@@ -47,19 +72,4 @@ export async function visitSiteEditor(
 			welcomeGuideTemplate: false,
 		} );
 	}
-
-	/**
-	 * @todo This is a workaround for the fact that the editor canvas is seen as
-	 * ready and visible before the loading spinner is hidden. Ideally, the
-	 * content underneath the loading overlay should be marked inert until the
-	 * loading is done.
-	 */
-	await this.page
-		// Spinner was used instead of the progress bar in an earlier version of
-		// the site editor.
-		.locator( '.edit-site-canvas-loader, .edit-site-canvas-spinner' )
-		// Bigger timeout is needed for larger entities, for example the large
-		// post html fixture that we load for performance tests, which often
-		// doesn't make it under the default 10 seconds.
-		.waitFor( { state: 'hidden', timeout: 60_000 } );
 }
diff --git a/packages/e2e-test-utils-playwright/src/editor/publish-post.ts b/packages/e2e-test-utils-playwright/src/editor/publish-post.ts
index bf4b240a3fd61..81451cd516f0e 100644
--- a/packages/e2e-test-utils-playwright/src/editor/publish-post.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/publish-post.ts
@@ -16,7 +16,7 @@ export async function publishPost( this: Editor ) {
 		.getByRole( 'button', { name: 'Save', exact: true } );
 	const publishButton = this.page
 		.getByRole( 'region', { name: 'Editor top bar' } )
-		.getByRole( 'button', { name: 'Publish' } );
+		.getByRole( 'button', { name: 'Publish', exact: true } );
 	const buttonToClick = ( await saveButton.isVisible() )
 		? saveButton
 		: publishButton;
diff --git a/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts b/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts
index 11bc11c43f603..886b35327fd4e 100644
--- a/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts
+++ b/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts
@@ -50,7 +50,7 @@ export function setClipboardData(
 }
 
 async function emulateClipboard( page: Page, type: 'copy' | 'cut' | 'paste' ) {
-	clipboardDataHolder = await page.evaluate(
+	const output = await page.evaluate(
 		( [ _type, _clipboardData ] ) => {
 			const canvasDoc =
 				// @ts-ignore
@@ -99,6 +99,10 @@ async function emulateClipboard( page: Page, type: 'copy' | 'cut' | 'paste' ) {
 
 			canvasDoc.activeElement.dispatchEvent( event );
 
+			if ( _type === 'paste' ) {
+				return event.defaultPrevented;
+			}
+
 			return {
 				'text/plain': event.clipboardData.getData( 'text/plain' ),
 				'text/html': event.clipboardData.getData( 'text/html' ),
@@ -107,6 +111,17 @@ async function emulateClipboard( page: Page, type: 'copy' | 'cut' | 'paste' ) {
 		},
 		[ type, clipboardDataHolder ] as const
 	);
+
+	if ( typeof output === 'object' ) {
+		clipboardDataHolder = output;
+	}
+
+	if ( output === false ) {
+		// Emulate paste by typing the clipboard content, which works across all
+		// elements and documents (keyboard.type does uses the nested active
+		// element automatically).
+		await page.keyboard.type( clipboardDataHolder[ 'text/plain' ] );
+	}
 }
 
 const isAppleOS = () => process.platform === 'darwin';
diff --git a/packages/e2e-test-utils-playwright/src/test.ts b/packages/e2e-test-utils-playwright/src/test.ts
index 677eff31955bd..6ef614024d7d9 100644
--- a/packages/e2e-test-utils-playwright/src/test.ts
+++ b/packages/e2e-test-utils-playwright/src/test.ts
@@ -60,7 +60,12 @@ function observeConsoleLogging( message: ConsoleMessage ) {
 	// See: https://core.trac.wordpress.org/ticket/37000
 	// See: https://www.chromestatus.com/feature/5088147346030592
 	// See: https://www.chromestatus.com/feature/5633521622188032
-	if ( text.includes( 'A cookie associated with a cross-site resource' ) ) {
+	if (
+		text.includes( 'A cookie associated with a cross-site resource' ) ||
+		text.includes(
+			'https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite'
+		)
+	) {
 		return;
 	}
 
@@ -93,6 +98,18 @@ function observeConsoleLogging( message: ConsoleMessage ) {
 		return;
 	}
 
+	// https://bugzilla.mozilla.org/show_bug.cgi?id=1404468
+	if (
+		text.includes( 'Layout was forced before the page was fully loaded' )
+	) {
+		return;
+	}
+
+	// Deprecated warnings coming from the third-party libraries.
+	if ( text.includes( 'MouseEvent.moz' ) ) {
+		return;
+	}
+
 	const logFunction =
 		type as ( typeof OBSERVED_CONSOLE_MESSAGE_TYPES )[ number ];
 
@@ -100,7 +117,6 @@ function observeConsoleLogging( message: ConsoleMessage ) {
 	// which, unless the test explicitly anticipates the logging via
 	// @wordpress/jest-console matchers, will cause the intended test
 	// failure.
-
 	// eslint-disable-next-line no-console
 	console[ logFunction ]( text );
 }
diff --git a/packages/e2e-test-utils/CHANGELOG.md b/packages/e2e-test-utils/CHANGELOG.md
index f99e338c900e7..696b6e56b02dd 100644
--- a/packages/e2e-test-utils/CHANGELOG.md
+++ b/packages/e2e-test-utils/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 11.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 10.29.0 (2024-05-16)
+
 ## 10.28.0 (2024-05-02)
 
 ## 10.27.0 (2024-04-19)
@@ -36,9 +44,9 @@
 
 ### Enhancement
 
--    Update promise order in `loginUser` to avoid any flakiness in the tests.
--    Update `activateTheme` to redirect to `themes.php` after theme activation, if theme redirects to some other page.
--    Update `activatePlugin` to redirect to `plugins.php` after plugin activation, if plugin redirects to some other page.
+-   Update promise order in `loginUser` to avoid any flakiness in the tests.
+-   Update `activateTheme` to redirect to `themes.php` after theme activation, if theme redirects to some other page.
+-   Update `activatePlugin` to redirect to `plugins.php` after plugin activation, if plugin redirects to some other page.
 
 ## 10.12.0 (2023-08-31)
 
@@ -68,7 +76,7 @@
 
 ### Breaking Changes
 
--  Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388))
+-   Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388))
 
 ## 9.5.0 (2023-03-01)
 
diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md
index bce7c84d73716..196768b0e2487 100644
--- a/packages/e2e-test-utils/README.md
+++ b/packages/e2e-test-utils/README.md
@@ -14,7 +14,7 @@ Install the module
 npm install @wordpress/e2e-test-utils --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## API
 
diff --git a/packages/e2e-test-utils/package.json b/packages/e2e-test-utils/package.json
index 2ecaf37a05222..d791e6e37d775 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": "10.28.0",
+	"version": "11.0.0",
 	"description": "End-To-End (E2E) test utils for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"build",
diff --git a/packages/e2e-test-utils/src/ensure-sidebar-opened.js b/packages/e2e-test-utils/src/ensure-sidebar-opened.js
index 5ea99c629c15e..95c674e980643 100644
--- a/packages/e2e-test-utils/src/ensure-sidebar-opened.js
+++ b/packages/e2e-test-utils/src/ensure-sidebar-opened.js
@@ -8,7 +8,8 @@ export async function ensureSidebarOpened() {
 		'.edit-post-header__settings [aria-label="Settings"][aria-expanded="false"],' +
 			'.edit-site-header__actions [aria-label="Settings"][aria-expanded="false"],' +
 			'.edit-widgets-header__actions [aria-label="Settings"][aria-expanded="false"],' +
-			'.edit-site-header-edit-mode__actions [aria-label="Settings"][aria-expanded="false"]'
+			'.edit-site-header-edit-mode__actions [aria-label="Settings"][aria-expanded="false"],' +
+			'.editor-header__settings [aria-label="Settings"][aria-expanded="false"]'
 	);
 
 	if ( toggleSidebarButton ) {
diff --git a/packages/e2e-test-utils/src/inserter.js b/packages/e2e-test-utils/src/inserter.js
index cf5d7c48c9dfd..5beab3c6205b6 100644
--- a/packages/e2e-test-utils/src/inserter.js
+++ b/packages/e2e-test-utils/src/inserter.js
@@ -53,7 +53,8 @@ async function isGlobalInserterOpen() {
 				'.edit-site-header [aria-label="Toggle block inserter"].is-pressed,' +
 				'.edit-widgets-header [aria-label="Toggle block inserter"].is-pressed,' +
 				'.edit-widgets-header [aria-label="Add block"].is-pressed,' +
-				'.edit-site-header-edit-mode__inserter-toggle.is-pressed'
+				'.edit-site-header-edit-mode__inserter-toggle.is-pressed,' +
+				'.editor-header [aria-label="Toggle block inserter"].is-pressed'
 		);
 	} );
 }
diff --git a/packages/e2e-test-utils/src/site-editor.js b/packages/e2e-test-utils/src/site-editor.js
index 4f6cf1773134f..98ba34f7db4f5 100644
--- a/packages/e2e-test-utils/src/site-editor.js
+++ b/packages/e2e-test-utils/src/site-editor.js
@@ -97,9 +97,7 @@ export async function visitSiteEditor( query, skipWelcomeGuide = true ) {
  * Toggles the global styles sidebar (opens it if closed and closes it if open).
  */
 export async function toggleGlobalStyles() {
-	await page.click(
-		'.edit-site-header-edit-mode__actions button[aria-label="Styles"]'
-	);
+	await page.click( '.editor-header__settings button[aria-label="Styles"]' );
 }
 
 /**
diff --git a/packages/e2e-tests/CHANGELOG.md b/packages/e2e-tests/CHANGELOG.md
index ff387f3afbdee..7dcde1e1cfefe 100644
--- a/packages/e2e-tests/CHANGELOG.md
+++ b/packages/e2e-tests/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 ## Unreleased
 
+## 8.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 7.29.0 (2024-05-16)
+
 ## 7.28.0 (2024-05-02)
 
 ## 7.27.0 (2024-04-19)
@@ -62,7 +71,7 @@
 
 ### Breaking Changes
 
--  Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388))
+-   Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388))
 
 ## 6.5.0 (2023-03-01)
 
diff --git a/packages/e2e-tests/README.md b/packages/e2e-tests/README.md
index 8629700263ebe..75283a3d9ecc8 100644
--- a/packages/e2e-tests/README.md
+++ b/packages/e2e-tests/README.md
@@ -80,7 +80,7 @@ Debugging in a Chrome browser can be replaced with `vscode`'s debugger by adding
 
 This will run jest, targetting the spec file currently open in the editor. `vscode`'s debugger can now be used to add breakpoints and inspect tests as you would in Chrome DevTools.
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Contributing to this package
 
diff --git a/packages/e2e-tests/config/is-gutenberg-plugin.js b/packages/e2e-tests/config/is-gutenberg-plugin.js
index d03b70b3ec11a..5cfe3ada705df 100644
--- a/packages/e2e-tests/config/is-gutenberg-plugin.js
+++ b/packages/e2e-tests/config/is-gutenberg-plugin.js
@@ -1,6 +1,3 @@
-global.process.env = {
-	...global.process.env,
-	// Inject the `IS_GUTENBERG_PLUGIN` global, used for feature flagging.
-	// eslint-disable-next-line @wordpress/is-gutenberg-plugin
-	IS_GUTENBERG_PLUGIN: process.env.npm_package_config_IS_GUTENBERG_PLUGIN,
-};
+// eslint-disable-next-line @wordpress/wp-global-usage
+globalThis.IS_GUTENBERG_PLUGIN =
+	process.env.npm_package_config_IS_GUTENBERG_PLUGIN === 'true';
diff --git a/packages/e2e-tests/mu-plugins/server-timing.php b/packages/e2e-tests/mu-plugins/server-timing.php
new file mode 100644
index 0000000000000..84771f980ff7f
--- /dev/null
+++ b/packages/e2e-tests/mu-plugins/server-timing.php
@@ -0,0 +1,91 @@
+<?php
+
+add_filter(
+	'template_include',
+	static function ( $template ) {
+
+		global $timestart, $wpdb;
+
+		$server_timing_values = array();
+		$template_start       = microtime( true );
+
+		$server_timing_values['wpBeforeTemplate'] = $template_start - $timestart;
+
+		ob_start();
+
+		add_action(
+			'shutdown',
+			static function () use ( $server_timing_values, $template_start, $wpdb ) {
+				$output = ob_get_clean();
+
+				$server_timing_values['wpTemplate'] = microtime( true ) - $template_start;
+
+				$server_timing_values['wpTotal'] = $server_timing_values['wpBeforeTemplate'] + $server_timing_values['wpTemplate'];
+
+				/*
+				 * While values passed via Server-Timing are intended to be durations,
+				 * any numeric value can actually be passed.
+				 * This is a nice little trick as it allows to easily get this information in JS.
+				 */
+				$server_timing_values['wpMemoryUsage'] = memory_get_usage();
+				$server_timing_values['wpDbQueries']   = $wpdb->num_queries;
+
+				$header_values = array();
+				foreach ( $server_timing_values as $slug => $value ) {
+					if ( is_float( $value ) ) {
+						$value = round( $value * 1000.0, 2 );
+					}
+					$header_values[] = sprintf( '%1$s;dur=%2$s', $slug, $value );
+				}
+				header( 'Server-Timing: ' . implode( ', ', $header_values ) );
+
+				echo $output;
+			},
+			PHP_INT_MIN
+		);
+
+		return $template;
+	},
+	PHP_INT_MAX
+);
+
+add_action(
+	'admin_init',
+	static function () {
+		global $timestart, $wpdb;
+
+		ob_start();
+
+		add_action(
+			'shutdown',
+			static function () use ( $wpdb, $timestart ) {
+				$output = ob_get_clean();
+
+				$server_timing_values = array();
+
+				$server_timing_values['wpTotal'] = microtime( true ) - $timestart;
+
+				/*
+				 * While values passed via Server-Timing are intended to be durations,
+				 * any numeric value can actually be passed.
+				 * This is a nice little trick as it allows to easily get this information in JS.
+				 */
+				$server_timing_values['wpMemoryUsage'] = memory_get_usage();
+				$server_timing_values['wpDbQueries']   = $wpdb->num_queries;
+
+				$header_values = array();
+				foreach ( $server_timing_values as $slug => $value ) {
+					if ( is_float( $value ) ) {
+						$value = round( $value * 1000.0, 2 );
+					}
+					$header_values[] = sprintf( '%1$s;dur=%2$s', $slug, $value );
+				}
+				header( 'Server-Timing: ' . implode( ', ', $header_values ) );
+
+				echo $output;
+			},
+			PHP_INT_MIN
+		);
+	},
+	PHP_INT_MAX
+);
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
index 97ce980f143da..312a60d670c66 100644
--- a/packages/e2e-tests/package.json
+++ b/packages/e2e-tests/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.28.0",
+	"version": "8.0.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"dependencies": {
 		"@wordpress/e2e-test-utils": "file:../e2e-test-utils",
diff --git a/packages/e2e-tests/plugins/hooks-api/index.js b/packages/e2e-tests/plugins/hooks-api/index.js
index 1ace5145e2688..3b25ad15fbcae 100644
--- a/packages/e2e-tests/plugins/hooks-api/index.js
+++ b/packages/e2e-tests/plugins/hooks-api/index.js
@@ -17,7 +17,6 @@
 				{
 					className: 'e2e-reset-block-button',
 					variant: "secondary",
-					isLarge: true,
 					onClick() {
 						const emptyBlock = createBlock( props.name );
 						props.onReplace( emptyBlock );
diff --git a/packages/e2e-tests/plugins/inner-blocks-templates/index.js b/packages/e2e-tests/plugins/inner-blocks-templates/index.js
index 5a49a0fa0aa05..b03b07e11e38a 100644
--- a/packages/e2e-tests/plugins/inner-blocks-templates/index.js
+++ b/packages/e2e-tests/plugins/inner-blocks-templates/index.js
@@ -92,7 +92,7 @@
 
 		edit: function InnerBlocksUpdateLockedTemplateEdit( props ) {
 			const hasUpdatedTemplated = props.attributes.hasUpdatedTemplate;
-			return el( 'div', null, [
+			return el( 'div', null,
 				el(
 					'button',
 					{
@@ -108,7 +108,7 @@
 						: TEMPLATE,
 					templateLock: 'all',
 				} ) ),
-			] );
+			);
 		},
 
 		save,
diff --git a/packages/e2e-tests/plugins/interactive-blocks.php b/packages/e2e-tests/plugins/interactive-blocks.php
index ab2f85156e3b3..54bd4325bb29b 100644
--- a/packages/e2e-tests/plugins/interactive-blocks.php
+++ b/packages/e2e-tests/plugins/interactive-blocks.php
@@ -29,11 +29,7 @@ function () {
 			// Ensure the interactivity API is loaded.
 			wp_interactivity();
 			// But remove the server directive processing.
-			remove_filter(
-				'render_block_data',
-				'wp_interactivity_process_directives_of_interactive_blocks',
-				100
-			);
+			add_filter( 'interactivity_process_directives', '__return_false' );
 		}
 	}
 );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/deferred-store/view.js b/packages/e2e-tests/plugins/interactive-blocks/deferred-store/view.js
index 8474757a0bd8b..121727dcc467c 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/deferred-store/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/deferred-store/view.js
@@ -16,5 +16,5 @@ document.addEventListener( 'DOMContentLoaded', () => {
 				},
 			},
 		} );
-	}, 50 );
+	}, 100 );
 } );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php
index 20f9313588046..c629e098b6e78 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php
@@ -93,6 +93,7 @@
 		<button
 			data-testid="toggle value"
 			data-wp-on--click="actions.toggleValue"
+			data-wp-bind--data-toggle-count="context.count"
 		>Toggle</button>
 	</div>
 	<?php endforeach; ?>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.js
index 0d93e93ba1450..47d1262f37ed2 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.js
@@ -32,6 +32,7 @@ const { state, foo } = store( 'directive-bind', {
 
 			context.previousValue = context.value;
 			context.value = previousValue;
+			context.count = ( context.count ?? 0 ) + 1;
 		},
 	},
 } );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/render.php
index 685e6dfc47582..a491a52161dfb 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/render.php
@@ -24,4 +24,8 @@
 			<p data-wp-text="state.counter" data-testid="counter">0</p>
 		</div>
 	</div>
+	<div data-wp-on-document--keydown="actions.keydownHandler" data-wp-on-document--keydown--second="actions.keydownSecondHandler">
+		<p data-wp-text="state.keydownHandler" data-testid="keydownHandler">no</p>
+		<p data-wp-text="state.keydownSecondHandler" data-testid="keydownSecondHandler">no</p>
+	</div>
 </div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/view.js
index c2a41832737ab..eb32d6e6e15f0 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/view.js
@@ -25,6 +25,8 @@ const { state } = store( 'directive-on-document', {
 		counter: 0,
 		isVisible: true,
 		isEventAttached: 'no',
+		keydownHandler: 'no',
+		keydownSecondHandler: 'no',
 	},
 	callbacks: {
 		keydownHandler() {
@@ -39,5 +41,11 @@ const { state } = store( 'directive-on-document', {
 			state.isEventAttached = 'no';
 			state.isVisible = ! state.isVisible;
 		},
+		keydownHandler: () => {
+			state.keydownHandler = 'yes';
+		},
+		keydownSecondHandler: () => {
+			state.keydownSecondHandler = 'yes';
+		}
 	}
 } );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/render.php
index 651b3298b64ed..c72d80e892b15 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/render.php
@@ -21,4 +21,8 @@
 			<p data-wp-text="state.counter" data-testid="counter">0</p>
 		</div>
 	</div>
+	<div data-wp-on-window--resize="actions.resizeHandler" data-wp-on-window--resize--second="actions.resizeSecondHandler">
+		<p data-wp-text="state.resizeHandler" data-testid="resizeHandler">no</p>
+		<p data-wp-text="state.resizeSecondHandler" data-testid="resizeSecondHandler">no</p>
+	</div>
 </div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/view.js
index b99f63b02517a..57c75e9c4cb63 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/view.js
@@ -25,6 +25,8 @@ const { state } = store( 'directive-on-window', {
 		counter: 0,
 		isVisible: true,
 		isEventAttached: 'no',
+		resizeHandler: 'no',
+		resizeSecondHandler: 'no',
 	},
 	callbacks: {
 		resizeHandler() {
@@ -39,5 +41,11 @@ const { state } = store( 'directive-on-window', {
 			state.isEventAttached = 'no';
 			state.isVisible = ! state.isVisible;
 		},
+		resizeHandler: () => {
+			state.resizeHandler = 'yes';
+		},
+		resizeSecondHandler: () => {
+			state.resizeSecondHandler = 'yes';
+		}
 	}
 } );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php
index a1541ebe4fb8c..127d6080f8f5b 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php
@@ -6,7 +6,8 @@
  */
 ?>
 
-<div data-wp-interactive="directive-on">
+<?php // A wrong directive name like "data-wp-on--" should not kill the interactivity. ?>
+<div data-wp-interactive="directive-on" data-wp-on--="">
 	<div>
 		<p data-wp-text="state.counter" data-testid="counter">0</p>
 		<button
diff --git a/packages/e2e-tests/plugins/interactive-blocks/namespace/block.json b/packages/e2e-tests/plugins/interactive-blocks/namespace/block.json
new file mode 100644
index 0000000000000..c0382286a1621
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/namespace/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test-namespace/directive-bind",
+	"title": "E2E Interactivity tests - directive bind",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/namespace/render.php b/packages/e2e-tests/plugins/interactive-blocks/namespace/render.php
new file mode 100644
index 0000000000000..0b7e40b6c1653
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/namespace/render.php
@@ -0,0 +1,45 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-bind`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div data-wp-interactive="">
+	<a data-wp-bind--href="state.url" data-testid="empty namespace"></a>
+</div>
+
+<div data-wp-interactive="namespace">
+	<a data-wp-bind--href="state.url" data-testid="correct namespace"></a>
+</div>
+
+<div data-wp-interactive="{}">
+	<a data-wp-bind--href="state.url" data-testid="object namespace"></a>
+</div>
+
+<div data-wp-interactive="null">
+	<a data-wp-bind--href="state.url" data-testid="null namespace"></a>
+</div>
+
+<div data-wp-interactive="2">
+	<a data-wp-bind--href="state.url" data-testid="number namespace"></a>
+</div>
+
+<div data-wp-interactive>
+	<a data-wp-bind--href="other::state.url" data-testid="other namespace"></a>
+</div>
+
+<div data-wp-interactive="true">
+	<a data-wp-bind--href="state.url" data-testid="true namespace"></a>
+</div>
+
+<div data-wp-interactive="false">
+	<a data-wp-bind--href="state.url" data-testid="false namespace"></a>
+</div>
+<div data-wp-interactive="[]">
+	<a data-wp-bind--href="state.url" data-testid="[] namespace"></a>
+</div>
+<div data-wp-interactive='"quoted string"'>
+	<a data-wp-bind--href="state.url" data-testid="quoted namespace"></a>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/namespace/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/namespace/view.asset.php
new file mode 100644
index 0000000000000..db23afdf657a1
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/namespace/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/namespace/view.js b/packages/e2e-tests/plugins/interactive-blocks/namespace/view.js
new file mode 100644
index 0000000000000..5717387395ff2
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/namespace/view.js
@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+
+store( '', {
+	state: {
+		url: '/empty-string-url',
+	},
+} );
+
+store( 'namespace', {
+	state: {
+		url: '/namespace-url',
+	},
+} );
+
+store( 'other', {
+	state: {
+		url: '/other-store-url',
+	},
+} );
+
+store( 'null', {
+	state: {
+		url: '/null-url',
+	},
+} );
+
+store( '2', {
+	state: {
+		url: '/number-url',
+	},
+} );
+
+store( '{}', {
+	state: {
+		url: '/object-url',
+	},
+} );
+
+store( 'true', {
+	state: {
+		url: '/true-url',
+	},
+} );
+
+store( 'false', {
+	state: {
+		url: '/false-url',
+	},
+} );
+
+store( '[]', {
+	state: {
+		url: '/array-url',
+	},
+} );
+
+store( '"quoted string"', {
+	state: {
+		url: '/quoted-url',
+	},
+} );
+
+
+
+
+
diff --git a/packages/e2e-tests/plugins/lightbox-allow-editing-false-enabled-false.php b/packages/e2e-tests/plugins/lightbox-allow-editing-false-enabled-false.php
new file mode 100644
index 0000000000000..c5197cc719896
--- /dev/null
+++ b/packages/e2e-tests/plugins/lightbox-allow-editing-false-enabled-false.php
@@ -0,0 +1,26 @@
+<?php
+/**
+ * Plugin Name: Lightbox Allow Editing False Enabled False
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-lightbox-allow-editing-false-enabled-false
+ */
+
+function filter_theme_json_theme( $theme_json ) {
+	$new_data = array(
+		'version'  => 2,
+		'settings' => array(
+			'blocks' => array(
+				'core/image' => array(
+					'lightbox' => array(
+						'allowEditing' => false,
+						'enabled'      => false,
+					),
+				),
+			),
+		),
+	);
+	return $theme_json->update_with( $new_data );
+}
+add_filter( 'wp_theme_json_data_theme', 'filter_theme_json_theme' );
diff --git a/packages/edit-post/CHANGELOG.md b/packages/edit-post/CHANGELOG.md
index 2d89bec8e1e3b..3934ab8cda884 100644
--- a/packages/edit-post/CHANGELOG.md
+++ b/packages/edit-post/CHANGELOG.md
@@ -2,6 +2,19 @@
 
 ## Unreleased
 
+## 8.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 7.35.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
 ## 7.34.0 (2024-05-02)
 
 ## 7.33.0 (2024-04-19)
@@ -148,8 +161,8 @@
 
 ### Breaking Changes
 
--   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/.
--   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/.
+-   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at <https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/>.
+-   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at <https://nodejs.org/en/about/releases/>.
 
 ## 3.27.0 (2021-03-17)
 
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index 414f54cbaf436..b3327218dfc87 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.34.0",
+	"version": "8.0.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -47,7 +48,6 @@
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",
-		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/notices": "file:../notices",
 		"@wordpress/plugins": "file:../plugins",
 		"@wordpress/preferences": "file:../preferences",
@@ -56,7 +56,7 @@
 		"@wordpress/viewport": "file:../viewport",
 		"@wordpress/warning": "file:../warning",
 		"@wordpress/widgets": "file:../widgets",
-		"classnames": "^2.3.1",
+		"clsx": "^2.1.1",
 		"memize": "^2.1.0"
 	},
 	"peerDependencies": {
diff --git a/packages/edit-post/src/commands/use-commands.js b/packages/edit-post/src/commands/use-commands.js
new file mode 100644
index 0000000000000..edd2a6a5b8404
--- /dev/null
+++ b/packages/edit-post/src/commands/use-commands.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { fullscreen } from '@wordpress/icons';
+import { useCommand } from '@wordpress/commands';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function useCommands() {
+	const { isFullscreen } = useSelect( ( select ) => {
+		const { get } = select( preferencesStore );
+
+		return {
+			isFullscreen: get( 'core/edit-post', 'fullscreenMode' ),
+		};
+	}, [] );
+	const { toggle } = useDispatch( preferencesStore );
+	const { createInfoNotice } = useDispatch( noticesStore );
+
+	useCommand( {
+		name: 'core/toggle-fullscreen-mode',
+		label: isFullscreen
+			? __( 'Exit fullscreen' )
+			: __( 'Enter fullscreen' ),
+		icon: fullscreen,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-post', 'fullscreenMode' );
+			close();
+			createInfoNotice(
+				isFullscreen ? __( 'Fullscreen off.' ) : __( 'Fullscreen on.' ),
+				{
+					id: 'core/edit-post/toggle-fullscreen-mode/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: () => {
+								toggle( 'core/edit-post', 'fullscreenMode' );
+							},
+						},
+					],
+				}
+			);
+		},
+	} );
+}
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js b/packages/edit-post/src/components/back-button/fullscreen-mode-close.js
similarity index 95%
rename from packages/edit-post/src/components/header/fullscreen-mode-close/index.js
rename to packages/edit-post/src/components/back-button/fullscreen-mode-close.js
index 0405439037479..59694de16cb92 100644
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js
+++ b/packages/edit-post/src/components/back-button/fullscreen-mode-close.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -22,7 +22,7 @@ import { useReducedMotion } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { store as editPostStore } from '../../../store';
+import { store as editPostStore } from '../../store';
 
 function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
 	const { isActive, isRequestingSiteIcon, postType, siteIconUrl } = useSelect(
@@ -83,7 +83,7 @@ function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
 		buttonIcon = <Icon size="36px" icon={ icon } />;
 	}
 
-	const classes = classnames( {
+	const classes = clsx( {
 		'edit-post-fullscreen-mode-close': true,
 		'has-icon': siteIconUrl,
 	} );
diff --git a/packages/edit-post/src/components/back-button/index.js b/packages/edit-post/src/components/back-button/index.js
new file mode 100644
index 0000000000000..ecce4623cea49
--- /dev/null
+++ b/packages/edit-post/src/components/back-button/index.js
@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { __unstableMotion as motion } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import FullscreenModeClose from './fullscreen-mode-close';
+import { unlock } from '../../lock-unlock';
+
+const { BackButton: BackButtonFill } = unlock( editorPrivateApis );
+
+const slideX = {
+	hidden: { x: '-100%' },
+	distractionFreeInactive: { x: 0 },
+	hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
+};
+
+function BackButton( { initialPost } ) {
+	return (
+		<BackButtonFill>
+			<motion.div
+				variants={ slideX }
+				transition={ { type: 'tween', delay: 0.8 } }
+			>
+				<FullscreenModeClose showTooltip initialPost={ initialPost } />
+			</motion.div>
+		</BackButtonFill>
+	);
+}
+
+export default BackButton;
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/back-button/style.scss
similarity index 87%
rename from packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
rename to packages/edit-post/src/components/back-button/style.scss
index 911445344febc..d6455c707fb1d 100644
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
+++ b/packages/edit-post/src/components/back-button/style.scss
@@ -14,10 +14,9 @@
 		background: $gray-900;
 		color: $white;
 		border-radius: 0;
-		height: $header-height + $border-width;
+		height: $header-height;
 		width: $header-height;
 		position: relative;
-		margin-bottom: - $border-width;
 
 		&:active {
 			color: $white;
@@ -65,3 +64,18 @@
 		margin-top: -($border-width);
 	}
 }
+
+/**
+ *  Show icon label overrides.
+ */
+.show-icon-labels .editor-header {
+	.edit-post-fullscreen-mode-close.has-icon {
+		width: $header-height;
+		svg {
+			display: block;
+		}
+		&::after {
+			content: none;
+		}
+	}
+}
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/back-button/test/__snapshots__/fullscreen-mode-close.js.snap
similarity index 100%
rename from packages/edit-post/src/components/header/fullscreen-mode-close/test/__snapshots__/index.js.snap
rename to packages/edit-post/src/components/back-button/test/__snapshots__/fullscreen-mode-close.js.snap
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/test/index.js b/packages/edit-post/src/components/back-button/test/fullscreen-mode-close.js
similarity index 97%
rename from packages/edit-post/src/components/header/fullscreen-mode-close/test/index.js
rename to packages/edit-post/src/components/back-button/test/fullscreen-mode-close.js
index b66d548045ad4..4a549370d0f05 100644
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/test/index.js
+++ b/packages/edit-post/src/components/back-button/test/fullscreen-mode-close.js
@@ -11,7 +11,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import FullscreenModeClose from '../';
+import FullscreenModeClose from '../fullscreen-mode-close';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => {
 	// This allows us to tweak the returned value on each test.
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
deleted file mode 100644
index ff21478307754..0000000000000
--- a/packages/edit-post/src/components/header/index.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import {
-	DocumentBar,
-	PostSavedState,
-	PostPreviewButton,
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { useSelect } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
-import { __unstableMotion as motion } from '@wordpress/components';
-import { store as preferencesStore } from '@wordpress/preferences';
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import FullscreenModeClose from './fullscreen-mode-close';
-import PostEditorMoreMenu from './more-menu';
-import MainDashboardButton from './main-dashboard-button';
-import { store as editPostStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-const {
-	CollapsableBlockToolbar,
-	DocumentTools,
-	PostViewLink,
-	PreviewDropdown,
-	PinnedItems,
-	MoreMenu,
-	PostPublishButtonOrToggle,
-} = unlock( editorPrivateApis );
-
-const slideY = {
-	hidden: { y: '-50px' },
-	distractionFreeInactive: { y: 0 },
-	hover: { y: 0, transition: { type: 'tween', delay: 0.2 } },
-};
-
-const slideX = {
-	hidden: { x: '-100%' },
-	distractionFreeInactive: { x: 0 },
-	hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
-};
-
-function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
-	const isWideViewport = useViewportMatch( 'large' );
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const {
-		isTextEditor,
-		hasActiveMetaboxes,
-		isPublishSidebarOpened,
-		showIconLabels,
-		hasHistory,
-		hasFixedToolbar,
-	} = useSelect( ( select ) => {
-		const { get: getPreference } = select( preferencesStore );
-		const { getEditorMode } = select( editorStore );
-
-		return {
-			isTextEditor: getEditorMode() === 'text',
-			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			hasHistory:
-				!! select( editorStore ).getEditorSettings()
-					.onNavigateToPreviousEntityRecord,
-			isPublishSidebarOpened:
-				select( editorStore ).isPublishSidebarOpened(),
-			showIconLabels: getPreference( 'core', 'showIconLabels' ),
-			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
-		};
-	}, [] );
-
-	const hasTopToolbar = isLargeViewport && hasFixedToolbar;
-
-	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
-		useState( true );
-
-	return (
-		<div className="edit-post-header">
-			<MainDashboardButton.Slot>
-				<motion.div
-					variants={ slideX }
-					transition={ { type: 'tween', delay: 0.8 } }
-				>
-					<FullscreenModeClose
-						showTooltip
-						initialPost={ initialPost }
-					/>
-				</motion.div>
-			</MainDashboardButton.Slot>
-			<motion.div
-				variants={ slideY }
-				transition={ { type: 'tween', delay: 0.8 } }
-				className="edit-post-header__toolbar"
-			>
-				<DocumentTools disableBlockTools={ isTextEditor } />
-				{ hasTopToolbar && (
-					<CollapsableBlockToolbar
-						isCollapsed={ isBlockToolsCollapsed }
-						onToggle={ setIsBlockToolsCollapsed }
-					/>
-				) }
-				<div
-					className={ classnames( 'edit-post-header__center', {
-						'is-collapsed':
-							hasHistory &&
-							! isBlockToolsCollapsed &&
-							hasTopToolbar,
-					} ) }
-				>
-					{ hasHistory && <DocumentBar /> }
-				</div>
-			</motion.div>
-			<motion.div
-				variants={ slideY }
-				transition={ { type: 'tween', delay: 0.8 } }
-				className="edit-post-header__settings"
-			>
-				{ ! isPublishSidebarOpened && (
-					// This button isn't completely hidden by the publish sidebar.
-					// We can't hide the whole toolbar when the publish sidebar is open because
-					// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
-					// We track that DOM node to return focus to the PostPublishButtonOrToggle
-					// when the publish sidebar has been closed.
-					<PostSavedState forceIsDirty={ hasActiveMetaboxes } />
-				) }
-				<PreviewDropdown forceIsAutosaveable={ hasActiveMetaboxes } />
-				<PostPreviewButton
-					className="edit-post-header__post-preview-button"
-					forceIsAutosaveable={ hasActiveMetaboxes }
-				/>
-				<PostViewLink />
-				<PostPublishButtonOrToggle
-					forceIsDirty={ hasActiveMetaboxes }
-					setEntitiesSavedStatesCallback={
-						setEntitiesSavedStatesCallback
-					}
-				/>
-				{ ( isWideViewport || ! showIconLabels ) && (
-					<PinnedItems.Slot scope="core" />
-				) }
-				<MoreMenu />
-				<PostEditorMoreMenu />
-			</motion.div>
-		</div>
-	);
-}
-
-export default Header;
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index ba64fc7321190..c152be045f129 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -10,84 +10,77 @@ import {
 	AutosaveMonitor,
 	LocalAutosaveMonitor,
 	UnsavedChangesWarning,
-	EditorNotices,
 	EditorKeyboardShortcutsRegister,
-	EditorKeyboardShortcuts,
 	EditorSnackbars,
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	BlockBreadcrumb,
-	BlockToolbar,
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { ScrollLock } from '@wordpress/components';
-import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { useState, useEffect, useCallback, useMemo } from '@wordpress/element';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { __, sprintf } from '@wordpress/i18n';
+import { useCallback, useMemo } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { privateApis as commandsPrivateApis } from '@wordpress/commands';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
-import TextEditor from '../text-editor';
-import VisualEditor from '../visual-editor';
+import BackButton from '../back-button';
 import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
 import InitPatternModal from '../init-pattern-modal';
 import BrowserURL from '../browser-url';
-import Header from '../header';
-import SettingsSidebar from '../sidebar/settings-sidebar';
 import MetaBoxes from '../meta-boxes';
+import PostEditorMoreMenu from '../more-menu';
 import WelcomeGuide from '../welcome-guide';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import useCommonCommands from '../../hooks/commands/use-common-commands';
+import useEditPostCommands from '../../commands/use-commands';
+import { usePaddingAppender } from './use-padding-appender';
+import { useShouldIframe } from './use-should-iframe';
 
 const { getLayoutStyles } = unlock( blockEditorPrivateApis );
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
-const {
-	InserterSidebar,
-	ListViewSidebar,
-	ComplementaryArea,
-	FullscreenMode,
-	SavePublishPanels,
-	InterfaceSkeleton,
-	interfaceStore,
-} = unlock( editorPrivateApis );
+const { EditorInterface, FullscreenMode, Sidebar } =
+	unlock( editorPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
-
-const interfaceLabels = {
-	/* translators: accessibility text for the editor top bar landmark region. */
-	header: __( 'Editor top bar' ),
-	/* translators: accessibility text for the editor content landmark region. */
-	body: __( 'Editor content' ),
-	/* translators: accessibility text for the editor settings landmark region. */
-	sidebar: __( 'Editor settings' ),
-	/* translators: accessibility text for the editor publish landmark region. */
-	actions: __( 'Editor publish' ),
-	/* translators: accessibility text for the editor footer landmark region. */
-	footer: __( 'Editor footer' ),
-};
+const DESIGN_POST_TYPES = [
+	'wp_template',
+	'wp_template_part',
+	'wp_block',
+	'wp_navigation',
+];
 
 function useEditorStyles() {
-	const { hasThemeStyleSupport, editorSettings } = useSelect(
-		( select ) => ( {
+	const {
+		hasThemeStyleSupport,
+		editorSettings,
+		isZoomedOutView,
+		hasMetaBoxes,
+		renderingMode,
+		postType,
+	} = useSelect( ( select ) => {
+		const { __unstableGetEditorMode } = select( blockEditorStore );
+		const { getCurrentPostType, getRenderingMode } = select( editorStore );
+		const _postType = getCurrentPostType();
+		return {
 			hasThemeStyleSupport:
 				select( editPostStore ).isFeatureActive( 'themeStyles' ),
 			editorSettings: select( editorStore ).getEditorSettings(),
-		} ),
-		[]
-	);
+			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
+			hasMetaBoxes: select( editPostStore ).hasMetaBoxes(),
+			renderingMode: getRenderingMode(),
+			postType: _postType,
+		};
+	}, [] );
 
 	// Compute the default styles.
 	return useMemo( () => {
@@ -121,7 +114,24 @@ function useEditorStyles() {
 			} );
 		}
 
-		return hasThemeStyles ? editorSettings.styles : defaultEditorStyles;
+		const baseStyles = hasThemeStyles
+			? editorSettings.styles ?? []
+			: defaultEditorStyles;
+
+		// Add a constant padding for the typewritter effect. When typing at the
+		// bottom, there needs to be room to scroll up.
+		if (
+			! isZoomedOutView &&
+			! hasMetaBoxes &&
+			renderingMode === 'post-only' &&
+			! DESIGN_POST_TYPES.includes( postType )
+		) {
+			baseStyles.push( {
+				css: 'body{padding-bottom: 40vh}',
+			} );
+		}
+
+		return baseStyles;
 	}, [
 		editorSettings.defaultEditorStyles,
 		editorSettings.disableLayoutStyles,
@@ -132,107 +142,52 @@ function useEditorStyles() {
 
 function Layout( { initialPost } ) {
 	useCommands();
-	useCommonCommands();
-
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isHugeViewport = useViewportMatch( 'huge', '>=' );
-	const isWideViewport = useViewportMatch( 'large' );
-	const isLargeViewport = useViewportMatch( 'medium' );
-
-	const { closeGeneralSidebar } = useDispatch( editPostStore );
+	useEditPostCommands();
+	const paddingAppenderRef = usePaddingAppender();
+	const shouldIframe = useShouldIframe();
 	const { createErrorNotice } = useDispatch( noticesStore );
-	const { setIsInserterOpened } = useDispatch( editorStore );
 	const {
 		mode,
 		isFullscreenActive,
-		isRichEditingEnabled,
-		sidebarIsOpened,
 		hasActiveMetaboxes,
-		previousShortcut,
-		nextShortcut,
 		hasBlockSelected,
-		isInserterOpened,
-		isListViewOpened,
 		showIconLabels,
 		isDistractionFree,
-		showBlockBreadcrumbs,
 		showMetaBoxes,
-		documentLabel,
 		hasHistory,
-		hasBlockBreadcrumbs,
+		isEditingTemplate,
+		isWelcomeGuideVisible,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
-		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
-		const editorSettings = getEditorSettings();
-		const postTypeLabel = getPostTypeLabel();
+		const { getEditorSettings } = select( editorStore );
+		const { isFeatureActive } = select( editPostStore );
 
 		return {
-			showMetaBoxes:
-				select( editorStore ).getRenderingMode() === 'post-only',
-			sidebarIsOpened: !! (
-				select( interfaceStore ).getActiveComplementaryArea( 'core' ) ||
-				select( editorStore ).isPublishSidebarOpened()
-			),
+			mode: select( editorStore ).getEditorMode(),
 			isFullscreenActive:
 				select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
-			isInserterOpened: select( editorStore ).isInserterOpened(),
-			isListViewOpened: select( editorStore ).isListViewOpened(),
-			mode: select( editorStore ).getEditorMode(),
-			isRichEditingEnabled: editorSettings.richEditingEnabled,
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			previousShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/editor/previous-region' ),
-			nextShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/editor/next-region' ),
-			showIconLabels: get( 'core', 'showIconLabels' ),
-			isDistractionFree: get( 'core', 'distractionFree' ),
-			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
-			// translators: Default label for the Document in the Block Breadcrumb.
-			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
 			hasBlockSelected:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
+			showIconLabels: get( 'core', 'showIconLabels' ),
+			isDistractionFree: get( 'core', 'distractionFree' ),
+			showMetaBoxes:
+				select( editorStore ).getRenderingMode() === 'post-only',
 			hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord,
-			hasBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
+			isEditingTemplate:
+				select( editorStore ).getCurrentPostType() === 'wp_template',
+			isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
 		};
 	}, [] );
 
 	// Set the right context for the command palette
 	const commandContext = hasBlockSelected
 		? 'block-selection-edit'
-		: 'post-editor-edit';
+		: 'entity-edit';
 	useCommandContext( commandContext );
 
 	const styles = useEditorStyles();
 
-	// Inserter and Sidebars are mutually exclusive
-	useEffect( () => {
-		if ( sidebarIsOpened && ! isHugeViewport ) {
-			setIsInserterOpened( false );
-		}
-	}, [ isHugeViewport, setIsInserterOpened, sidebarIsOpened ] );
-	useEffect( () => {
-		if ( isInserterOpened && ! isHugeViewport ) {
-			closeGeneralSidebar();
-		}
-	}, [ closeGeneralSidebar, isInserterOpened, isHugeViewport ] );
-
-	// Local state for save panel.
-	// Note 'truthy' callback implies an open panel.
-	const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
-		useState( false );
-
-	const closeEntitiesSavedStates = useCallback(
-		( arg ) => {
-			if ( typeof entitiesSavedStatesCallback === 'function' ) {
-				entitiesSavedStatesCallback( arg );
-			}
-			setEntitiesSavedStatesCallback( false );
-		},
-		[ entitiesSavedStatesCallback ]
-	);
-
 	// We need to add the show-icon-labels class to the body element so it is applied to modals.
 	if ( showIconLabels ) {
 		document.body.classList.add( 'show-icon-labels' );
@@ -240,35 +195,10 @@ function Layout( { initialPost } ) {
 		document.body.classList.remove( 'show-icon-labels' );
 	}
 
-	const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
-		'is-sidebar-opened': sidebarIsOpened,
+	const className = clsx( 'edit-post-layout', 'is-mode-' + mode, {
 		'has-metaboxes': hasActiveMetaboxes,
-		'is-distraction-free': isDistractionFree && isWideViewport,
-		'is-entity-save-view-open': !! entitiesSavedStatesCallback,
-		'has-block-breadcrumbs':
-			hasBlockBreadcrumbs && ! isDistractionFree && isWideViewport,
 	} );
 
-	const secondarySidebarLabel = isListViewOpened
-		? __( 'Document Overview' )
-		: __( 'Block Library' );
-
-	const secondarySidebar = () => {
-		if ( mode === 'visual' && isInserterOpened ) {
-			return (
-				<InserterSidebar
-					closeGeneralSidebar={ closeGeneralSidebar }
-					isRightSidebarOpen={ sidebarIsOpened }
-				/>
-			);
-		}
-		if ( mode === 'visual' && isListViewOpened ) {
-			return <ListViewSidebar />;
-		}
-
-		return null;
-	};
-
 	function onPluginAreaError( name ) {
 		createErrorNotice(
 			sprintf(
@@ -281,6 +211,58 @@ function Layout( { initialPost } ) {
 		);
 	}
 
+	const { createSuccessNotice } = useDispatch( noticesStore );
+
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			switch ( actionId ) {
+				case 'move-to-trash':
+					{
+						document.location.href = addQueryArgs( 'edit.php', {
+							trashed: 1,
+							post_type: items[ 0 ].type,
+							ids: items[ 0 ].id,
+						} );
+					}
+					break;
+				case 'duplicate-post':
+					{
+						const newItem = items[ 0 ];
+						const title =
+							typeof newItem.title === 'string'
+								? newItem.title
+								: newItem.title?.rendered;
+						createSuccessNotice(
+							sprintf(
+								// translators: %s: Title of the created post e.g: "Post 1".
+								__( '"%s" successfully created.' ),
+								title
+							),
+							{
+								type: 'snackbar',
+								id: 'duplicate-post-action',
+								actions: [
+									{
+										label: __( 'Edit' ),
+										onClick: () => {
+											const postId = newItem.id;
+											document.location.href =
+												addQueryArgs( 'post.php', {
+													post: postId,
+													action: 'edit',
+												} );
+										},
+									},
+								],
+							}
+						);
+					}
+					break;
+			}
+		},
+		[ createSuccessNotice ]
+	);
+
 	return (
 		<>
 			<FullscreenMode isActive={ isFullscreenActive } />
@@ -290,85 +272,38 @@ function Layout( { initialPost } ) {
 			<LocalAutosaveMonitor />
 			<EditPostKeyboardShortcuts />
 			<EditorKeyboardShortcutsRegister />
-			<EditorKeyboardShortcuts />
 			<BlockKeyboardShortcuts />
-
-			<InterfaceSkeleton
-				isDistractionFree={ isDistractionFree && isWideViewport }
-				className={ className }
-				labels={ {
-					...interfaceLabels,
-					secondarySidebar: secondarySidebarLabel,
-				} }
-				header={
-					<Header
-						setEntitiesSavedStatesCallback={
-							setEntitiesSavedStatesCallback
-						}
-						initialPost={ initialPost }
-					/>
-				}
-				editorNotices={ <EditorNotices /> }
-				secondarySidebar={ secondarySidebar() }
-				sidebar={
-					! isDistractionFree && (
-						<ComplementaryArea.Slot scope="core" />
-					)
-				}
-				notices={ <EditorSnackbars /> }
-				content={
-					<>
-						{ ! isDistractionFree && <EditorNotices /> }
-						{ ( mode === 'text' || ! isRichEditingEnabled ) && (
-							<TextEditor />
-						) }
-						{ ! isLargeViewport && <BlockToolbar hideDragHandle /> }
-						{ isRichEditingEnabled && mode === 'visual' && (
-							<VisualEditor styles={ styles } />
-						) }
-						{ ! isDistractionFree && showMetaBoxes && (
-							<div className="edit-post-layout__metaboxes">
-								<MetaBoxes location="normal" />
-								<MetaBoxes location="advanced" />
-							</div>
-						) }
-						{ isMobileViewport && sidebarIsOpened && (
-							<ScrollLock />
-						) }
-					</>
-				}
-				footer={
-					! isDistractionFree &&
-					! isMobileViewport &&
-					showBlockBreadcrumbs &&
-					isRichEditingEnabled &&
-					mode === 'visual' && (
-						<div className="edit-post-layout__footer">
-							<BlockBreadcrumb rootLabelText={ documentLabel } />
-						</div>
-					)
-				}
-				actions={
-					<SavePublishPanels
-						closeEntitiesSavedStates={ closeEntitiesSavedStates }
-						isEntitiesSavedStatesOpen={
-							entitiesSavedStatesCallback
-						}
-						setEntitiesSavedStatesCallback={
-							setEntitiesSavedStatesCallback
-						}
-						forceIsDirtyPublishPanel={ hasActiveMetaboxes }
-					/>
-				}
-				shortcuts={ {
-					previous: previousShortcut,
-					next: nextShortcut,
-				} }
-			/>
 			<WelcomeGuide />
 			<InitPatternModal />
 			<PluginArea onError={ onPluginAreaError } />
-			{ ! isDistractionFree && <SettingsSidebar /> }
+			{ ! isDistractionFree && (
+				<Sidebar
+					onActionPerformed={ onActionPerformed }
+					extraPanels={
+						! isEditingTemplate && <MetaBoxes location="side" />
+					}
+				/>
+			) }
+			<PostEditorMoreMenu />
+			<BackButton initialPost={ initialPost } />
+			<EditorSnackbars />
+			<EditorInterface
+				className={ className }
+				styles={ styles }
+				forceIsDirty={ hasActiveMetaboxes }
+				contentRef={ paddingAppenderRef }
+				disableIframe={ ! shouldIframe }
+				// We should auto-focus the canvas (title) on load.
+				// eslint-disable-next-line jsx-a11y/no-autofocus
+				autoFocus={ ! isWelcomeGuideVisible }
+			>
+				{ ! isDistractionFree && showMetaBoxes && (
+					<div className="edit-post-layout__metaboxes">
+						<MetaBoxes location="normal" />
+						<MetaBoxes location="advanced" />
+					</div>
+				) }
+			</EditorInterface>
 		</>
 	);
 }
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index b53b75bb5ec70..2c5a035cad144 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -1,28 +1,20 @@
+.editor-visual-editor {
+	flex: 1 0 auto;
+	height: auto;
+}
+
 .edit-post-layout__metaboxes {
 	flex-shrink: 0;
 	clear: both;
 }
 
 // Adjust the position of the notices
-.edit-post-layout .components-editor-notices__snackbar {
+.components-editor-notices__snackbar {
 	position: fixed;
 	right: 0;
-	bottom: 16px;
-	padding-left: 16px;
-	padding-right: 16px;
-}
-
-.is-distraction-free {
-	.components-editor-notices__snackbar {
-		bottom: 16px;
-	}
-}
-
-// Adjust the position of the notices when breadcrumbs are present
-.has-block-breadcrumbs {
-	.components-editor-notices__snackbar {
-		bottom: 40px;
-	}
+	bottom: 24px;
+	padding-left: 24px;
+	padding-right: 24px;
 }
 
 @include editor-left(".edit-post-layout .components-editor-notices__snackbar");
diff --git a/packages/edit-post/src/components/visual-editor/use-padding-appender.js b/packages/edit-post/src/components/layout/use-padding-appender.js
similarity index 90%
rename from packages/edit-post/src/components/visual-editor/use-padding-appender.js
rename to packages/edit-post/src/components/layout/use-padding-appender.js
index c091443495740..ff342ded90817 100644
--- a/packages/edit-post/src/components/visual-editor/use-padding-appender.js
+++ b/packages/edit-post/src/components/layout/use-padding-appender.js
@@ -27,7 +27,7 @@ export function usePaddingAppender() {
 					return;
 				}
 
-				// only handle clicks under the last child
+				// Only handle clicks under the last child.
 				const lastChild = node.lastElementChild;
 				if ( ! lastChild ) {
 					return;
@@ -44,6 +44,12 @@ export function usePaddingAppender() {
 					.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 );
diff --git a/packages/edit-post/src/components/layout/use-should-iframe.js b/packages/edit-post/src/components/layout/use-should-iframe.js
new file mode 100644
index 0000000000000..03efae92c72f7
--- /dev/null
+++ b/packages/edit-post/src/components/layout/use-should-iframe.js
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+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';
+
+const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false;
+
+export function useShouldIframe() {
+	const {
+		isBlockBasedTheme,
+		hasV3BlocksOnly,
+		isEditingTemplate,
+		hasMetaBoxes,
+	} = useSelect( ( select ) => {
+		const { getEditorSettings, getCurrentPostType } = select( editorStore );
+		const { getBlockTypes } = select( blocksStore );
+		const editorSettings = getEditorSettings();
+		return {
+			isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
+			hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
+				return type.apiVersion >= 3;
+			} ),
+			isEditingTemplate: getCurrentPostType() === 'wp_template',
+			hasMetaBoxes: select( editPostStore ).hasMetaBoxes(),
+		};
+	}, [] );
+
+	return (
+		( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) &&
+			! hasMetaBoxes ) ||
+		isEditingTemplate
+	);
+}
diff --git a/packages/edit-post/src/components/meta-boxes/meta-boxes-area/index.js b/packages/edit-post/src/components/meta-boxes/meta-boxes-area/index.js
index 6d66115923e7b..908c4b5a6f669 100644
--- a/packages/edit-post/src/components/meta-boxes/meta-boxes-area/index.js
+++ b/packages/edit-post/src/components/meta-boxes/meta-boxes-area/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -48,13 +48,9 @@ function MetaBoxesArea( { location } ) {
 		return select( editPostStore ).isSavingMetaBoxes();
 	}, [] );
 
-	const classes = classnames(
-		'edit-post-meta-boxes-area',
-		`is-${ location }`,
-		{
-			'is-loading': isSaving,
-		}
-	);
+	const classes = clsx( 'edit-post-meta-boxes-area', `is-${ location }`, {
+		'is-loading': isSaving,
+	} );
 
 	return (
 		<div className={ classes }>
diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/more-menu/index.js
similarity index 92%
rename from packages/edit-post/src/components/header/more-menu/index.js
rename to packages/edit-post/src/components/more-menu/index.js
index c9f1c50251ca2..136742a19dddd 100644
--- a/packages/edit-post/src/components/header/more-menu/index.js
+++ b/packages/edit-post/src/components/more-menu/index.js
@@ -10,10 +10,10 @@ import { displayShortcut } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../../lock-unlock';
+import { unlock } from '../../lock-unlock';
 import ManagePatternsMenuItem from './manage-patterns-menu-item';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
-import EditPostPreferencesModal from '../../preferences-modal';
+import EditPostPreferencesModal from '../preferences-modal';
 
 const { ToolsMoreMenuGroup, ViewMoreMenuGroup } = unlock( editorPrivateApis );
 
diff --git a/packages/edit-post/src/components/header/more-menu/manage-patterns-menu-item.js b/packages/edit-post/src/components/more-menu/manage-patterns-menu-item.js
similarity index 92%
rename from packages/edit-post/src/components/header/more-menu/manage-patterns-menu-item.js
rename to packages/edit-post/src/components/more-menu/manage-patterns-menu-item.js
index d12ffb88ae557..abb009cbc288e 100644
--- a/packages/edit-post/src/components/header/more-menu/manage-patterns-menu-item.js
+++ b/packages/edit-post/src/components/more-menu/manage-patterns-menu-item.js
@@ -20,7 +20,7 @@ function ManagePatternsMenuItem() {
 		// The site editor and templates both check whether the user has
 		// edit_theme_options capabilities. We can leverage that here and not
 		// display the manage patterns link if the user can't access it.
-		return canUser( 'read', 'templates' ) ? patternsUrl : defaultUrl;
+		return canUser( 'create', 'templates' ) ? patternsUrl : defaultUrl;
 	}, [] );
 
 	return (
diff --git a/packages/edit-post/src/components/header/more-menu/welcome-guide-menu-item.js b/packages/edit-post/src/components/more-menu/welcome-guide-menu-item.js
similarity index 100%
rename from packages/edit-post/src/components/header/more-menu/welcome-guide-menu-item.js
rename to packages/edit-post/src/components/more-menu/welcome-guide-menu-item.js
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 e3ba4a1568420..e655a7300c37e 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
@@ -42,6 +42,7 @@ export function CustomFieldsConfirmation( { willEnable } ) {
 				className="edit-post-preferences-modal__custom-fields-confirmation-button"
 				variant="secondary"
 				isBusy={ isReloading }
+				__experimentalIsFocusable
 				disabled={ isReloading }
 				onClick={ () => {
 					setIsReloading( true );
diff --git a/packages/edit-post/src/components/sidebar/post-format/index.js b/packages/edit-post/src/components/sidebar/post-format/index.js
deleted file mode 100644
index 5127fa0930f3f..0000000000000
--- a/packages/edit-post/src/components/sidebar/post-format/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { PanelRow } from '@wordpress/components';
-import {
-	PostFormat as PostFormatForm,
-	PostFormatCheck,
-} from '@wordpress/editor';
-
-export function PostFormat() {
-	return (
-		<PostFormatCheck>
-			<PanelRow className="edit-post-post-format">
-				<PostFormatForm />
-			</PanelRow>
-		</PostFormatCheck>
-	);
-}
-
-export default PostFormat;
diff --git a/packages/edit-post/src/components/sidebar/post-format/style.scss b/packages/edit-post/src/components/sidebar/post-format/style.scss
deleted file mode 100644
index 53d68ea219743..0000000000000
--- a/packages/edit-post/src/components/sidebar/post-format/style.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.edit-post-post-format {
-	display: flex;
-	flex-direction: column;
-	align-items: stretch;
-}
diff --git a/packages/edit-post/src/components/sidebar/post-pending-status/index.js b/packages/edit-post/src/components/sidebar/post-pending-status/index.js
deleted file mode 100644
index de1f02b00d746..0000000000000
--- a/packages/edit-post/src/components/sidebar/post-pending-status/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	PostPendingStatus as PostPendingStatusForm,
-	PostPendingStatusCheck,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../../lock-unlock';
-
-const { PostPanelRow } = unlock( editorPrivateApis );
-
-export function PostPendingStatus() {
-	return (
-		<PostPendingStatusCheck>
-			<PostPanelRow>
-				<PostPendingStatusForm />
-			</PostPanelRow>
-		</PostPendingStatusCheck>
-	);
-}
-
-export default PostPendingStatus;
diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js
deleted file mode 100644
index 99c202463162d..0000000000000
--- a/packages/edit-post/src/components/sidebar/post-status/index.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	PanelBody,
-} from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import {
-	PluginPostStatusInfo,
-	PostAuthorPanel,
-	PostSchedulePanel,
-	PostSyncStatus,
-	PostURLPanel,
-	PostTemplatePanel,
-	PostFeaturedImagePanel,
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import PostTrash from '../post-trash';
-import PostSticky from '../post-sticky';
-import PostSlug from '../post-slug';
-import PostFormat from '../post-format';
-import { unlock } from '../../../lock-unlock';
-
-const {
-	PostStatus: PostStatusPanel,
-	PrivatePostExcerptPanel,
-	PostContentInformation,
-	PostLastEditedPanel,
-} = unlock( editorPrivateApis );
-
-/**
- * Module Constants
- */
-const PANEL_NAME = 'post-status';
-
-export default function PostStatus() {
-	const { isOpened, isRemoved, showPostContentPanels } = 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,
-				isEditorPanelOpened,
-				getCurrentPostType,
-			} = select( editorStore );
-			const postType = getCurrentPostType();
-			return {
-				isRemoved: isEditorPanelRemoved( PANEL_NAME ),
-				isOpened: isEditorPanelOpened( PANEL_NAME ),
-				// Post excerpt panel is rendered in different place depending on the post type.
-				// So we cannot make this check inside the PostExcerpt component based on the current edited entity.
-				showPostContentPanels: ! [
-					'wp_template',
-					'wp_template_part',
-					'wp_block',
-				].includes( postType ),
-			};
-		},
-		[]
-	);
-	const { toggleEditorPanelOpened } = useDispatch( editorStore );
-
-	if ( isRemoved ) {
-		return null;
-	}
-
-	return (
-		<PanelBody
-			className="edit-post-post-status"
-			title={ __( 'Summary' ) }
-			opened={ isOpened }
-			onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
-		>
-			<PluginPostStatusInfo.Slot>
-				{ ( fills ) => (
-					<>
-						{ showPostContentPanels && (
-							<VStack
-								spacing={ 3 }
-								//  TODO: this needs to be consolidated with the panel in site editor, when we unify them.
-								style={ { marginBlockEnd: '24px' } }
-							>
-								<PostFeaturedImagePanel
-									withPanelBody={ false }
-								/>
-								<PrivatePostExcerptPanel />
-								<VStack spacing={ 1 }>
-									<PostContentInformation />
-									<PostLastEditedPanel />
-								</VStack>
-							</VStack>
-						) }
-						<VStack
-							spacing={ 1 }
-							style={ { marginBlockEnd: '12px' } }
-						>
-							<PostStatusPanel />
-							<PostSchedulePanel />
-							<PostTemplatePanel />
-							<PostURLPanel />
-							<PostSyncStatus />
-						</VStack>
-						<PostSticky />
-						<PostFormat />
-						<PostSlug />
-						<PostAuthorPanel />
-						{ fills }
-						<HStack
-							style={ {
-								marginTop: '16px',
-							} }
-						>
-							<PostTrash />
-						</HStack>
-					</>
-				) }
-			</PluginPostStatusInfo.Slot>
-		</PanelBody>
-	);
-}
diff --git a/packages/edit-post/src/components/sidebar/post-sticky/index.js b/packages/edit-post/src/components/sidebar/post-sticky/index.js
deleted file mode 100644
index 1b31297a41294..0000000000000
--- a/packages/edit-post/src/components/sidebar/post-sticky/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	PostSticky as PostStickyForm,
-	PostStickyCheck,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../../lock-unlock';
-
-const { PostPanelRow } = unlock( editorPrivateApis );
-
-export function PostSticky() {
-	return (
-		<PostStickyCheck>
-			<PostPanelRow>
-				<PostStickyForm />
-			</PostPanelRow>
-		</PostStickyCheck>
-	);
-}
-
-export default PostSticky;
diff --git a/packages/edit-post/src/components/sidebar/post-trash/index.js b/packages/edit-post/src/components/sidebar/post-trash/index.js
deleted file mode 100644
index d77c7a6d82988..0000000000000
--- a/packages/edit-post/src/components/sidebar/post-trash/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { PostTrash as PostTrashLink, PostTrashCheck } from '@wordpress/editor';
-
-export default function PostTrash() {
-	return (
-		<PostTrashCheck>
-			<PostTrashLink />
-		</PostTrashCheck>
-	);
-}
diff --git a/packages/edit-post/src/components/sidebar/post-visibility/index.js b/packages/edit-post/src/components/sidebar/post-visibility/index.js
deleted file mode 100644
index 8bffb1b563e1e..0000000000000
--- a/packages/edit-post/src/components/sidebar/post-visibility/index.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { Dropdown, Button } from '@wordpress/components';
-import {
-	PostVisibility as PostVisibilityForm,
-	PostVisibilityLabel,
-	PostVisibilityCheck,
-	usePostVisibilityLabel,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { useMemo, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../../lock-unlock';
-
-const { PostPanelRow } = unlock( editorPrivateApis );
-
-export function PostVisibility() {
-	// Use internal state instead of a ref to make sure that the component
-	// re-renders when the popover's anchor updates.
-	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
-	// Memoize popoverProps to avoid returning a new object every time.
-	const popoverProps = useMemo(
-		() => ( {
-			// Anchor the popover to the middle of the entire row so that it doesn't
-			// move around when the label changes.
-			anchor: popoverAnchor,
-			placement: 'bottom-end',
-		} ),
-		[ popoverAnchor ]
-	);
-
-	return (
-		<PostVisibilityCheck
-			render={ ( { canEdit } ) => (
-				<PostPanelRow
-					label={ __( 'Visibility' ) }
-					ref={ setPopoverAnchor }
-				>
-					{ ! canEdit && (
-						<span>
-							<PostVisibilityLabel />
-						</span>
-					) }
-					{ canEdit && (
-						<Dropdown
-							contentClassName="edit-post-post-visibility__dialog"
-							popoverProps={ popoverProps }
-							focusOnMount
-							renderToggle={ ( { isOpen, onToggle } ) => (
-								<PostVisibilityToggle
-									isOpen={ isOpen }
-									onClick={ onToggle }
-								/>
-							) }
-							renderContent={ ( { onClose } ) => (
-								<PostVisibilityForm onClose={ onClose } />
-							) }
-						/>
-					) }
-				</PostPanelRow>
-			) }
-		/>
-	);
-}
-
-function PostVisibilityToggle( { isOpen, onClick } ) {
-	const label = usePostVisibilityLabel();
-	return (
-		<Button
-			__next40pxDefaultSize
-			className="edit-post-post-visibility__toggle"
-			variant="tertiary"
-			aria-expanded={ isOpen }
-			// translators: %s: Current post visibility.
-			aria-label={ sprintf( __( 'Select visibility: %s' ), label ) }
-			onClick={ onClick }
-		>
-			{ label }
-		</Button>
-	);
-}
-
-export default PostVisibility;
diff --git a/packages/edit-post/src/components/sidebar/post-visibility/style.scss b/packages/edit-post/src/components/sidebar/post-visibility/style.scss
deleted file mode 100644
index 0dd9824e5bde7..0000000000000
--- a/packages/edit-post/src/components/sidebar/post-visibility/style.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.edit-post-post-visibility__dialog .editor-post-visibility {
-	// sidebar width - popover padding - form margin
-	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
-	margin: $grid-unit-10;
-}
diff --git a/packages/edit-post/src/components/text-editor/index.js b/packages/edit-post/src/components/text-editor/index.js
deleted file mode 100644
index af3818e177885..0000000000000
--- a/packages/edit-post/src/components/text-editor/index.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	PostTextEditor,
-	PostTitleRaw,
-	store as editorStore,
-} from '@wordpress/editor';
-import { Button } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { displayShortcut } from '@wordpress/keycodes';
-import { useEffect, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-
-export default function TextEditor() {
-	const isRichEditingEnabled = useSelect( ( select ) => {
-		return select( editorStore ).getEditorSettings().richEditingEnabled;
-	}, [] );
-	const { switchEditorMode } = useDispatch( editorStore );
-
-	const { isWelcomeGuideVisible } = useSelect( ( select ) => {
-		const { isFeatureActive } = select( editPostStore );
-
-		return {
-			isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
-		};
-	}, [] );
-
-	const titleRef = useRef();
-
-	useEffect( () => {
-		if ( isWelcomeGuideVisible ) {
-			return;
-		}
-		titleRef?.current?.focus();
-	}, [ isWelcomeGuideVisible ] );
-
-	return (
-		<div className="edit-post-text-editor">
-			{ isRichEditingEnabled && (
-				<div className="edit-post-text-editor__toolbar">
-					<h2>{ __( 'Editing code' ) }</h2>
-					<Button
-						variant="tertiary"
-						onClick={ () => switchEditorMode( 'visual' ) }
-						shortcut={ displayShortcut.secondary( 'm' ) }
-					>
-						{ __( 'Exit code editor' ) }
-					</Button>
-				</div>
-			) }
-			<div className="edit-post-text-editor__body">
-				<PostTitleRaw ref={ titleRef } />
-				<PostTextEditor />
-			</div>
-		</div>
-	);
-}
diff --git a/packages/edit-post/src/components/visual-editor/block-inspector-button.js b/packages/edit-post/src/components/visual-editor/block-inspector-button.js
deleted file mode 100644
index 87b55d4eb3fdc..0000000000000
--- a/packages/edit-post/src/components/visual-editor/block-inspector-button.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { MenuItem } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { speak } from '@wordpress/a11y';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-
-const noop = () => {};
-
-export function BlockInspectorButton( { onClick = noop, small = false } ) {
-	const { shortcut, areAdvancedSettingsOpened } = useSelect(
-		( select ) => ( {
-			shortcut: select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/editor/toggle-sidebar' ),
-			areAdvancedSettingsOpened:
-				select( editPostStore ).getActiveGeneralSidebarName() ===
-				'edit-post/block',
-		} ),
-		[]
-	);
-	const { openGeneralSidebar, closeGeneralSidebar } =
-		useDispatch( editPostStore );
-
-	const label = areAdvancedSettingsOpened
-		? __( 'Hide more settings' )
-		: __( 'Show more settings' );
-
-	return (
-		<MenuItem
-			onClick={ () => {
-				if ( areAdvancedSettingsOpened ) {
-					closeGeneralSidebar();
-					speak( __( 'Block settings closed' ) );
-				} else {
-					openGeneralSidebar( 'edit-post/block' );
-					speak(
-						__(
-							'Additional settings are now available in the Editor block settings sidebar'
-						)
-					);
-				}
-				onClick();
-			} }
-			shortcut={ shortcut }
-		>
-			{ ! small && label }
-		</MenuItem>
-	);
-}
-
-export default BlockInspectorButton;
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
deleted file mode 100644
index 0b36ef6da01d1..0000000000000
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import {
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { useMemo } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-import { usePaddingAppender } from './use-padding-appender';
-
-const { EditorCanvas } = unlock( editorPrivateApis );
-
-const isGutenbergPlugin = process.env.IS_GUTENBERG_PLUGIN ? true : false;
-
-export default function VisualEditor( { styles } ) {
-	const {
-		isWelcomeGuideVisible,
-		renderingMode,
-		isBlockBasedTheme,
-		hasV3BlocksOnly,
-		isEditingTemplate,
-	} = useSelect( ( select ) => {
-		const { isFeatureActive } = select( editPostStore );
-		const { getEditorSettings, getRenderingMode } = select( editorStore );
-		const { getBlockTypes } = select( blocksStore );
-		const editorSettings = getEditorSettings();
-
-		return {
-			isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
-			renderingMode: getRenderingMode(),
-			isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
-			hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
-				return type.apiVersion >= 3;
-			} ),
-			isEditingTemplate:
-				select( editorStore ).getCurrentPostType() === 'wp_template',
-		};
-	}, [] );
-	const hasMetaBoxes = useSelect(
-		( select ) => select( editPostStore ).hasMetaBoxes(),
-		[]
-	);
-
-	const paddingAppenderRef = usePaddingAppender();
-
-	let paddingBottom;
-
-	// Add a constant padding for the typewritter effect. When typing at the
-	// bottom, there needs to be room to scroll up.
-	if ( ! hasMetaBoxes && renderingMode === 'post-only' ) {
-		paddingBottom = '40vh';
-	}
-
-	styles = useMemo(
-		() => [
-			...styles,
-			{
-				// We should move this in to future to the body.
-				css: paddingBottom
-					? `body{padding-bottom:${ paddingBottom }}`
-					: '',
-			},
-		],
-		[ styles, paddingBottom ]
-	);
-
-	const isToBeIframed =
-		( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) &&
-			! hasMetaBoxes ) ||
-		isEditingTemplate;
-
-	return (
-		<div
-			className={ classnames( 'edit-post-visual-editor', {
-				'has-inline-canvas': ! isToBeIframed,
-			} ) }
-		>
-			<EditorCanvas
-				disableIframe={ ! isToBeIframed }
-				styles={ styles }
-				// We should auto-focus the canvas (title) on load.
-				// eslint-disable-next-line jsx-a11y/no-autofocus
-				autoFocus={ ! isWelcomeGuideVisible }
-				contentRef={ paddingAppenderRef }
-			/>
-		</div>
-	);
-}
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
deleted file mode 100644
index 8ad587d4e5a58..0000000000000
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-.edit-post-visual-editor {
-	position: relative;
-	display: flex;
-	flex-flow: column;
-	// In the iframed canvas this keeps extra scrollbars from appearing (when block toolbars overflow). In the
-	// legacy (non-iframed) canvas, overflow must not be hidden in order to maintain support for sticky positioning.
-	&:not(.has-inline-canvas) {
-		overflow: hidden;
-	}
-
-	// Gray preview overlay (desktop/tablet/mobile) is intentionally not set on an element with scrolling content like
-	// interface-interface-skeleton__content. This causes graphical glitches (flashes of the background color)
-	// when scrolling in Safari due to incorrect ordering of large compositing layers (GPU acceleration).
-	background-color: $gray-300;
-
-	// The button element easily inherits styles that are meant for the editor style.
-	// These rules enhance the specificity to reduce that inheritance.
-	// This is duplicated in edit-site.
-	& .components-button {
-		font-family: $default-font;
-		font-size: $default-font-size;
-		padding: 6px 12px;
-
-		&.has-icon {
-			padding: 6px;
-		}
-	}
-
-	// The following flex rule is important for the canvas layout, please be careful when refactoring,
-	// as older browser interpret flex height behavior differently. Be sure to test on Safari 13.
-	// The syntax is `flex: [flex-grow] [flex-shrink] [flex-basis];`
-	// We set the canvas to be allowed to grow (vertically), but not shrink.
-	flex: 1 0 auto;
-
-	// Since the parent container is also a flex container, a `flex-basis: 100%;` is not needed,
-	// as align-items: stretch is inherited by default.Additionally due to older browser's flex height
-	// interpretation, any percentage value is likely going to cause issues, such as metaboxes overlapping.
-	// See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property.
-}
-
-.edit-post-visual-editor__content-area {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	box-sizing: border-box;
-	display: flex;
-
-	// This is necessary for older browsers due to their flex height interpretation.
-	// These browsers (including Safari 13) ignore the percentage value entirely.
-	// By setting flex-grow, the element stretches to fill the parent.
-	// See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property
-	flex-grow: 1;
-}
diff --git a/packages/edit-post/src/hooks/commands/use-common-commands.js b/packages/edit-post/src/hooks/commands/use-common-commands.js
deleted file mode 100644
index bd2036eb85e74..0000000000000
--- a/packages/edit-post/src/hooks/commands/use-common-commands.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __, isRTL } from '@wordpress/i18n';
-import {
-	drawerLeft,
-	drawerRight,
-	blockDefault,
-	fullscreen,
-	formatListBullets,
-} from '@wordpress/icons';
-import { useCommand } from '@wordpress/commands';
-import { store as preferencesStore } from '@wordpress/preferences';
-import {
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-const { interfaceStore } = unlock( editorPrivateApis );
-
-export default function useCommonCommands() {
-	const { openGeneralSidebar, closeGeneralSidebar } =
-		useDispatch( editPostStore );
-	const { activeSidebar, isFullscreen, isPublishSidebarEnabled } = useSelect(
-		( select ) => {
-			const { get } = select( preferencesStore );
-
-			return {
-				activeSidebar:
-					select( interfaceStore ).getActiveComplementaryArea(
-						'core'
-					),
-				isPublishSidebarEnabled:
-					select( editorStore ).isPublishSidebarEnabled(),
-				isFullscreen: get( 'core/edit-post', 'fullscreenMode' ),
-			};
-		},
-		[]
-	);
-	const { toggle } = useDispatch( preferencesStore );
-	const { createInfoNotice } = useDispatch( noticesStore );
-
-	useCommand( {
-		name: 'core/open-settings-sidebar',
-		label: __( 'Toggle settings sidebar' ),
-		icon: isRTL() ? drawerLeft : drawerRight,
-		callback: ( { close } ) => {
-			close();
-			if ( activeSidebar === 'edit-post/document' ) {
-				closeGeneralSidebar();
-			} else {
-				openGeneralSidebar( 'edit-post/document' );
-			}
-		},
-	} );
-
-	useCommand( {
-		name: 'core/open-block-inspector',
-		label: __( 'Toggle block inspector' ),
-		icon: blockDefault,
-		callback: ( { close } ) => {
-			close();
-			if ( activeSidebar === 'edit-post/block' ) {
-				closeGeneralSidebar();
-			} else {
-				openGeneralSidebar( 'edit-post/block' );
-			}
-		},
-	} );
-
-	useCommand( {
-		name: 'core/toggle-fullscreen-mode',
-		label: isFullscreen
-			? __( 'Exit fullscreen' )
-			: __( 'Enter fullscreen' ),
-		icon: fullscreen,
-		callback: ( { close } ) => {
-			toggle( 'core/edit-post', 'fullscreenMode' );
-			close();
-			createInfoNotice(
-				isFullscreen ? __( 'Fullscreen off.' ) : __( 'Fullscreen on.' ),
-				{
-					id: 'core/edit-post/toggle-fullscreen-mode/notice',
-					type: 'snackbar',
-					actions: [
-						{
-							label: __( 'Undo' ),
-							onClick: () => {
-								toggle( 'core/edit-post', 'fullscreenMode' );
-							},
-						},
-					],
-				}
-			);
-		},
-	} );
-
-	useCommand( {
-		name: 'core/toggle-publish-sidebar',
-		label: isPublishSidebarEnabled
-			? __( 'Disable pre-publish checks' )
-			: __( 'Enable pre-publish checks' ),
-		icon: formatListBullets,
-		callback: ( { close } ) => {
-			close();
-			toggle( 'core', 'isPublishSidebarEnabled' );
-			createInfoNotice(
-				isPublishSidebarEnabled
-					? __( 'Pre-publish checks disabled.' )
-					: __( 'Pre-publish checks enabled.' ),
-				{
-					id: 'core/editor/publish-sidebar/notice',
-					type: 'snackbar',
-				}
-			);
-		},
-	} );
-}
diff --git a/packages/edit-post/src/hooks/components/index.js b/packages/edit-post/src/hooks/components/index.js
deleted file mode 100644
index 709d89d013ed5..0000000000000
--- a/packages/edit-post/src/hooks/components/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { addFilter } from '@wordpress/hooks';
-import { MediaUpload } from '@wordpress/media-utils';
-
-const replaceMediaUpload = () => MediaUpload;
-
-addFilter(
-	'editor.MediaUpload',
-	'core/edit-post/replace-media-upload',
-	replaceMediaUpload
-);
diff --git a/packages/edit-post/src/hooks/index.js b/packages/edit-post/src/hooks/index.js
deleted file mode 100644
index dc90f62760a7d..0000000000000
--- a/packages/edit-post/src/hooks/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-/**
- * Internal dependencies
- */
-import './components';
-import './validate-multiple-use';
diff --git a/packages/edit-post/src/hooks/validate-multiple-use/index.js b/packages/edit-post/src/hooks/validate-multiple-use/index.js
deleted file mode 100644
index bf771f4522036..0000000000000
--- a/packages/edit-post/src/hooks/validate-multiple-use/index.js
+++ /dev/null
@@ -1,163 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createBlock,
-	findTransform,
-	getBlockTransforms,
-	getBlockType,
-	hasBlockSupport,
-} from '@wordpress/blocks';
-import { Button } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { Warning, store as blockEditorStore } from '@wordpress/block-editor';
-import { addFilter } from '@wordpress/hooks';
-import { __ } from '@wordpress/i18n';
-import { compose, createHigherOrderComponent } from '@wordpress/compose';
-
-/**
- * Recursively find very first block of an specific block type.
- *
- * @param {Object[]} blocks List of blocks.
- * @param {string}   name   Block name to search.
- *
- * @return {Object|undefined} Return block object or undefined.
- */
-function findFirstOfSameType( blocks, name ) {
-	if ( ! Array.isArray( blocks ) || ! blocks.length ) {
-		return;
-	}
-
-	for ( const block of blocks ) {
-		if ( block.name === name ) {
-			return block;
-		}
-
-		// Search inside innerBlocks.
-		const firstBlock = findFirstOfSameType( block.innerBlocks, name );
-
-		if ( firstBlock ) {
-			return firstBlock;
-		}
-	}
-}
-
-const enhance = compose(
-	/**
-	 * For blocks whose block type doesn't support `multiple`, provides the
-	 * wrapped component with `originalBlockClientId` -- a reference to the
-	 * first block of the same type in the content -- if and only if that
-	 * "original" block is not the current one. Thus, an inexisting
-	 * `originalBlockClientId` prop signals that the block is valid.
-	 *
-	 * @param {Component} WrappedBlockEdit A filtered BlockEdit instance.
-	 *
-	 * @return {Component} Enhanced component with merged state data props.
-	 */
-	withSelect( ( select, block ) => {
-		const multiple = hasBlockSupport( block.name, 'multiple', true );
-
-		// For block types with `multiple` support, there is no "original
-		// block" to be found in the content, as the block itself is valid.
-		if ( multiple ) {
-			return {};
-		}
-
-		// Otherwise, only pass `originalBlockClientId` if it refers to a different
-		// block from the current one.
-		const blocks = select( blockEditorStore ).getBlocks();
-		const firstOfSameType = findFirstOfSameType( blocks, block.name );
-		const isInvalid =
-			firstOfSameType && firstOfSameType.clientId !== block.clientId;
-		return {
-			originalBlockClientId: isInvalid && firstOfSameType.clientId,
-		};
-	} ),
-	withDispatch( ( dispatch, { originalBlockClientId } ) => ( {
-		selectFirst: () =>
-			dispatch( blockEditorStore ).selectBlock( originalBlockClientId ),
-	} ) )
-);
-
-const withMultipleValidation = createHigherOrderComponent( ( BlockEdit ) => {
-	return enhance( ( { originalBlockClientId, selectFirst, ...props } ) => {
-		if ( ! originalBlockClientId ) {
-			return <BlockEdit { ...props } />;
-		}
-
-		const blockType = getBlockType( props.name );
-		const outboundType = getOutboundType( props.name );
-
-		return [
-			<div key="invalid-preview" style={ { minHeight: '60px' } }>
-				<BlockEdit key="block-edit" { ...props } />
-			</div>,
-			<Warning
-				key="multiple-use-warning"
-				actions={ [
-					<Button
-						key="find-original"
-						variant="secondary"
-						onClick={ selectFirst }
-					>
-						{ __( 'Find original' ) }
-					</Button>,
-					<Button
-						key="remove"
-						variant="secondary"
-						onClick={ () => props.onReplace( [] ) }
-					>
-						{ __( 'Remove' ) }
-					</Button>,
-					outboundType && (
-						<Button
-							key="transform"
-							variant="secondary"
-							onClick={ () =>
-								props.onReplace(
-									createBlock(
-										outboundType.name,
-										props.attributes
-									)
-								)
-							}
-						>
-							{ __( 'Transform into:' ) } { outboundType.title }
-						</Button>
-					),
-				] }
-			>
-				<strong>{ blockType?.title }: </strong>
-				{ __( 'This block can only be used once.' ) }
-			</Warning>,
-		];
-	} );
-}, 'withMultipleValidation' );
-
-/**
- * Given a base block name, returns the default block type to which to offer
- * transforms.
- *
- * @param {string} blockName Base block name.
- *
- * @return {?Object} The chosen default block type.
- */
-function getOutboundType( blockName ) {
-	// Grab the first outbound transform.
-	const transform = findTransform(
-		getBlockTransforms( 'to', blockName ),
-		( { type, blocks } ) => type === 'block' && blocks.length === 1 // What about when .length > 1?
-	);
-
-	if ( ! transform ) {
-		return null;
-	}
-
-	return getBlockType( transform.blocks[ 0 ] );
-}
-
-addFilter(
-	'editor.BlockEdit',
-	'core/edit-post/validate-multiple-use/with-multiple-validation',
-	withMultipleValidation
-);
diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
index 0a2d17a344e47..e7600831f11ba 100644
--- a/packages/edit-post/src/index.js
+++ b/packages/edit-post/src/index.js
@@ -7,20 +7,26 @@ import {
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
 import deprecated from '@wordpress/deprecated';
-import { createRoot } from '@wordpress/element';
+import { createRoot, StrictMode } from '@wordpress/element';
 import { dispatch, select } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	registerLegacyWidgetBlock,
 	registerWidgetGroupBlock,
 } from '@wordpress/widgets';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import './hooks';
 import Editor from './editor';
+import { unlock } from './lock-unlock';
+
+const { BackButton: __experimentalMainDashboardButton } =
+	unlock( editorPrivateApis );
 
 /**
  * Initializes and returns an instance of Editor.
@@ -80,7 +86,7 @@ export function initializeEditor(
 	registerCoreBlocks();
 	registerLegacyWidgetBlock( { inserter: false } );
 	registerWidgetGroupBlock( { inserter: false } );
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
 			enableFSEBlocks: settings.__unstableEnableFullSiteEditingBlocks,
 		} );
@@ -131,12 +137,14 @@ export function initializeEditor(
 	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
 
 	root.render(
-		<Editor
-			settings={ settings }
-			postId={ postId }
-			postType={ postType }
-			initialEdits={ initialEdits }
-		/>
+		<StrictMode>
+			<Editor
+				settings={ settings }
+				postId={ postId }
+				postType={ postType }
+				initialEdits={ initialEdits }
+			/>
+		</StrictMode>
 	);
 
 	return root;
@@ -152,8 +160,7 @@ export function reinitializeEditor() {
 	} );
 }
 
-export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close';
-export { default as __experimentalMainDashboardButton } from './components/header/main-dashboard-button';
-
+export { default as __experimentalFullscreenModeClose } from './components/back-button/fullscreen-mode-close';
+export { __experimentalMainDashboardButton };
 export { store } from './store';
 export * from './deprecated';
diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js
index 787fc2f1d78d3..8510cbb501955 100644
--- a/packages/edit-post/src/store/selectors.js
+++ b/packages/edit-post/src/store/selectors.js
@@ -609,10 +609,13 @@ export const getEditedPostTemplate = createRegistrySelector(
 		const defaultTemplateId = select( coreStore ).getDefaultTemplateId( {
 			slug: slugToCheck,
 		} );
-		return select( coreStore ).getEditedEntityRecord(
-			'postType',
-			'wp_template',
-			defaultTemplateId
-		);
+
+		return defaultTemplateId
+			? select( coreStore ).getEditedEntityRecord(
+					'postType',
+					'wp_template',
+					defaultTemplateId
+			  )
+			: null;
 	}
 );
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index d780f4257f25a..a95c02242644b 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -1,13 +1,6 @@
-@import "./components/header/style.scss";
-@import "./components/header/fullscreen-mode-close/style.scss";
+@import "./components/back-button/style.scss";
 @import "./components/layout/style.scss";
 @import "./components/meta-boxes/meta-boxes-area/style.scss";
-@import "./components/sidebar/style.scss";
-@import "./components/sidebar/post-format/style.scss";
-@import "./components/sidebar/post-slug/style.scss";
-@import "./components/sidebar/post-visibility/style.scss";
-@import "./components/text-editor/style.scss";
-@import "./components/visual-editor/style.scss";
 @import "./components/welcome-guide/style.scss";
 
 /**
@@ -39,8 +32,8 @@ body.js.block-editor-page {
 }
 
 // Target the editor UI excluding the visual editor contents, metaboxes and custom fields areas.
-.edit-post-header,
-.edit-post-text-editor,
+.editor-header,
+.editor-text-editor,
 .editor-sidebar,
 .editor-post-publish-panel {
 	@include reset;
diff --git a/packages/edit-post/src/test/__snapshots__/editor.native.js.snap b/packages/edit-post/src/test/__snapshots__/editor.native.js.snap
index 8b820cd38f11b..4a88b249a1db6 100644
--- a/packages/edit-post/src/test/__snapshots__/editor.native.js.snap
+++ b/packages/edit-post/src/test/__snapshots__/editor.native.js.snap
@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Editor adds empty image block when pasting unsupported HTML local image path 1`] = `
+"<!-- wp:image -->
+<figure class="wp-block-image"><img src="" alt=""/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Editor adds image block when pasting HTML local image path 1`] = `
+"<!-- wp:image -->
+<figure class="wp-block-image"><img src="file:///path/to/file.png" alt=""/></figure>
+<!-- /wp:image -->"
+`;
+
 exports[`Editor appends media correctly for allowed types 1`] = `
 "<!-- wp:image -->
 <figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt=""/></figure>
@@ -19,3 +31,75 @@ exports[`Editor appends media correctly for allowed types and skips unsupported
 <figure class="wp-block-video"><video controls src="file:///local-video-4.mp4"></video></figure>
 <!-- /wp:video -->"
 `;
+
+exports[`Editor on content update parses markdown into blocks 1`] = `
+"<!-- wp:paragraph -->
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing<br />elit.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Overview</h2>
+<!-- /wp:heading -->
+
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>Lorem ipsum dolor sit amet</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Consectetur adipiscing<br>elit</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Integer nec odio</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Details</h2>
+<!-- /wp:heading -->
+
+<!-- wp:list {"ordered":true} -->
+<ol class="wp-block-list"><!-- wp:list-item -->
+<li>Sed cursus ante dapibus diam</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Nulla quis sem at nibh elementum imperdiet</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Duis sagittis ipsum <code>## Mixed Lists</code></li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->
+
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>Key Points:</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
+
+<!-- wp:list {"ordered":true} -->
+<ol class="wp-block-list"><!-- wp:list-item -->
+<li>Lorem ipsum dolor sit amet</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li><br>Consectetur adipiscing elit</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Integer nec odio</li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->
+
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>Additional Info:<br>-<br>Sed cursus ante dapibus diam</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Nulla quis sem at nibh elementum imperdiet</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
diff --git a/packages/edit-post/src/test/editor.native.js b/packages/edit-post/src/test/editor.native.js
index 0de2c528b2452..8fe116758608b 100644
--- a/packages/edit-post/src/test/editor.native.js
+++ b/packages/edit-post/src/test/editor.native.js
@@ -7,9 +7,12 @@ import {
 	fireEvent,
 	getBlock,
 	getEditorHtml,
+	getEditorTitle,
 	initializeEditor,
+	pasteIntoRichText,
 	screen,
 	setupCoreBlocks,
+	within,
 } from 'test/helpers';
 import { BackHandler } from 'react-native';
 
@@ -20,6 +23,7 @@ import {
 	requestMediaImport,
 	subscribeMediaAppend,
 	subscribeParentToggleHTMLMode,
+	subscribeToContentUpdate,
 } from '@wordpress/react-native-bridge';
 
 setupCoreBlocks();
@@ -34,6 +38,11 @@ subscribeMediaAppend.mockImplementation( ( callback ) => {
 	mediaAppendCallback = callback;
 } );
 
+let onContentUpdateCallback;
+subscribeToContentUpdate.mockImplementation( ( callback ) => {
+	onContentUpdateCallback = callback;
+} );
+
 const MEDIA = [
 	{
 		localId: 1,
@@ -91,6 +100,38 @@ describe( 'Editor', () => {
 		} );
 	} );
 
+	it( 'adds empty image block when pasting unsupported HTML local image path', async () => {
+		await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+
+		pasteIntoRichText( paragraphTextInput, {
+			text: '<div><img src="file:LOW-RES.png"></div>',
+		} );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'adds image block when pasting HTML local image path', async () => {
+		await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+
+		pasteIntoRichText( paragraphTextInput, {
+			files: [ 'file:///path/to/file.png' ],
+		} );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
 	it( 'appends media correctly for allowed types', async () => {
 		// Arrange
 		requestMediaImport
@@ -149,4 +190,74 @@ describe( 'Editor', () => {
 			screen.queryAllByLabelText( 'Open Settings' );
 		expect( openBlockSettingsButton.length ).toBe( 0 );
 	} );
+
+	describe( 'on content update', () => {
+		const MARKDOWN = `# Sample Document\nLorem ipsum dolor sit amet, consectetur adipiscing 
+						elit.\n## Overview\n- Lorem ipsum dolor sit amet\n- Consectetur adipiscing
+						 elit\n- Integer nec odio\n## Details\n1. Sed cursus ante dapibus diam\n2. 
+						 Nulla quis sem at nibh elementum imperdiet\n3. Duis sagittis ipsum\n
+						 ## Mixed Lists\n- Key Points:\n 1. Lorem ipsum dolor sit amet\n 2. 
+						 Consectetur adipiscing elit\n 3. Integer nec odio\n- Additional Info:\n -
+						  Sed cursus ante dapibus diam\n - Nulla quis sem at nibh elementum imperdiet\n`;
+
+		it( 'parses markdown into blocks', async () => {
+			// Arrange
+			await initializeEditor( {
+				initialTitle: null,
+			} );
+
+			// Act
+			act( () => {
+				onContentUpdateCallback( {
+					content: MARKDOWN,
+				} );
+			} );
+
+			// Assert
+			// Needed to for the "Processed HTML piece" log.
+			expect( console ).toHaveLogged();
+			expect( getEditorTitle() ).toBe( 'Sample Document' );
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'parses a markdown heading into a title', async () => {
+			// Arrange
+			await initializeEditor( {
+				initialTitle: null,
+			} );
+
+			// Act
+			act( () => {
+				onContentUpdateCallback( {
+					content: `# Sample Document`,
+				} );
+			} );
+
+			// Assert
+			// Needed to for the "Processed HTML piece" log.
+			expect( console ).toHaveLogged();
+			expect( getEditorTitle() ).toBe( 'Sample Document' );
+			expect( getEditorHtml() ).toBe( '' );
+		} );
+
+		it( 'parses standard text into blocks', async () => {
+			// Arrange
+			await initializeEditor( {
+				initialTitle: null,
+			} );
+
+			// Act
+			act( () => {
+				onContentUpdateCallback( {
+					content: `Lorem ipsum dolor sit amet`,
+				} );
+			} );
+
+			// Assert
+			// Needed to for the "Processed HTML piece" log.
+			expect( console ).toHaveLogged();
+			expect( getEditorTitle() ).toBe( 'Lorem ipsum dolor sit amet' );
+			expect( getEditorHtml() ).toBe( '' );
+		} );
+	} );
 } );
diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md
index 9772a68da5cf5..67b5d055450f8 100644
--- a/packages/edit-site/CHANGELOG.md
+++ b/packages/edit-site/CHANGELOG.md
@@ -2,6 +2,19 @@
 
 ## Unreleased
 
+## 6.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 5.35.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
 ## 5.34.0 (2024-05-02)
 
 ## 5.33.0 (2024-04-19)
@@ -47,6 +60,7 @@
 ## 5.13.0 (2023-06-23)
 
 ### Enhancements
+
 -   Site editor sidebar: add home template details and controls [#51223](https://github.com/WordPress/gutenberg/pull/51223).
 -   Site editor sidebar: add footer to template part and ensure nested template areas display [#51669](https://github.com/WordPress/gutenberg/pull/51669).
 -   Global styles: split styles menus into revisions and other styles actions ([#51318](https://github.com/WordPress/gutenberg/pull/51318)).
@@ -94,7 +108,6 @@
 
 -   Don't show block inserter when the canvas is view mode ([#46763](https://github.com/WordPress/gutenberg/pull/46763)).
 
-
 ## 4.19.0 (2022-11-16)
 
 ## 4.18.0 (2022-11-02)
@@ -159,8 +172,8 @@
 
 ### Breaking Changes
 
--   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/.
--   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/.
+-   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at <https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/>.
+-   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at <https://nodejs.org/en/about/releases/>.
 
 ## 1.17.0 (2021-03-17)
 
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
index 45871a93c081f..784407cd3f12b 100644
--- a/packages/edit-site/package.json
+++ b/packages/edit-site/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.34.0",
+	"version": "6.0.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -53,7 +54,6 @@
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",
-		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/notices": "file:../notices",
 		"@wordpress/patterns": "file:../patterns",
 		"@wordpress/plugins": "file:../plugins",
@@ -69,12 +69,9 @@
 		"@wordpress/widgets": "file:../widgets",
 		"@wordpress/wordcount": "file:../wordcount",
 		"change-case": "^4.1.2",
-		"classnames": "^2.3.1",
-		"client-zip": "^2.4.4",
+		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
-		"deepmerge": "^4.3.0",
 		"fast-deep-equal": "^3.1.3",
-		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0"
 	},
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 ce0ad6bbbccf4..33d1b8cbca1c2 100644
--- a/packages/edit-site/src/components/add-new-pattern/index.js
+++ b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -4,7 +4,7 @@
 import { DropdownMenu } from '@wordpress/components';
 import { useState, useRef } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { plus, symbol, symbolFilled, upload } from '@wordpress/icons';
+import { symbol, symbolFilled, upload } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import {
@@ -13,12 +13,11 @@ import {
 } from '@wordpress/patterns';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import CreateTemplatePartModal from '../create-template-part-modal';
-import SidebarButton from '../sidebar-button';
 import { unlock } from '../../lock-unlock';
 import {
 	PATTERN_TYPES,
@@ -26,14 +25,14 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 } from '../../utils/constants';
 
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 const { CreatePatternModal, useAddPatternCategory } = unlock(
 	editPatternsPrivateApis
 );
+const { CreateTemplatePartModal } = unlock( editorPrivateApis );
 
 export default function AddNewPattern() {
 	const history = useHistory();
-	const { params } = useLocation();
 	const [ showPatternModal, setShowPatternModal ] = useState( false );
 	const [ showTemplatePartModal, setShowTemplatePartModal ] =
 		useState( false );
@@ -41,19 +40,24 @@ export default function AddNewPattern() {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 	const patternUploadInputRef = useRef();
-	const isBlockBasedTheme = useSelect(
-		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
-		[]
-	);
-
-	function handleCreatePattern( { pattern, categoryId } ) {
+	const { isBlockBasedTheme, addNewPatternLabel, addNewTemplatePartLabel } =
+		useSelect( ( select ) => {
+			const { getCurrentTheme, getPostType } = select( coreStore );
+			return {
+				isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
+				addNewPatternLabel: getPostType( PATTERN_TYPES.user )?.labels
+					?.add_new_item,
+				addNewTemplatePartLabel: getPostType( TEMPLATE_PART_POST_TYPE )
+					?.labels?.add_new_item,
+			};
+		}, [] );
+
+	function handleCreatePattern( { pattern } ) {
 		setShowPatternModal( false );
 
 		history.push( {
 			postId: pattern.id,
 			postType: PATTERN_TYPES.user,
-			categoryType: PATTERN_TYPES.theme,
-			categoryId,
 			canvas: 'edit',
 		} );
 	}
@@ -74,19 +78,19 @@ export default function AddNewPattern() {
 		setShowTemplatePartModal( false );
 	}
 
-	const controls = [];
-
-	controls.push( {
-		icon: symbol,
-		onClick: () => setShowPatternModal( true ),
-		title: __( 'Create pattern' ),
-	} );
+	const controls = [
+		{
+			icon: symbol,
+			onClick: () => setShowPatternModal( true ),
+			title: addNewPatternLabel,
+		},
+	];
 
 	if ( isBlockBasedTheme ) {
 		controls.push( {
 			icon: symbolFilled,
 			onClick: () => setShowTemplatePartModal( true ),
-			title: __( 'Create template part' ),
+			title: addNewTemplatePartLabel,
 		} );
 	}
 
@@ -101,14 +105,19 @@ export default function AddNewPattern() {
 	const { categoryMap, findOrCreateTerm } = useAddPatternCategory();
 	return (
 		<>
-			<DropdownMenu
-				controls={ controls }
-				toggleProps={ {
-					as: SidebarButton,
-				} }
-				icon={ plus }
-				label={ __( 'Create pattern' ) }
-			/>
+			{ addNewPatternLabel && (
+				<DropdownMenu
+					controls={ controls }
+					icon={ null }
+					toggleProps={ {
+						variant: 'primary',
+						showTooltip: false,
+						__next40pxDefaultSize: true,
+					} }
+					text={ addNewPatternLabel }
+					label={ addNewPatternLabel }
+				/>
+			) }
 			{ showPatternModal && (
 				<CreatePatternModal
 					onClose={ () => setShowPatternModal( false ) }
@@ -136,16 +145,17 @@ export default function AddNewPattern() {
 						return;
 					}
 					try {
+						const {
+							params: { postType, categoryId },
+						} = history.getLocationWithParams();
 						let currentCategoryId;
 						// When we're not handling template parts, we should
 						// add or create the proper pattern category.
-						if ( params.categoryType !== TEMPLATE_PART_POST_TYPE ) {
+						if ( postType !== TEMPLATE_PART_POST_TYPE ) {
 							const currentCategory = categoryMap
 								.values()
-								.find(
-									( term ) => term.name === params.categoryId
-								);
-							if ( !! currentCategory ) {
+								.find( ( term ) => term.name === categoryId );
+							if ( currentCategory ) {
 								currentCategoryId =
 									currentCategory.id ||
 									( await findOrCreateTerm(
@@ -165,11 +175,10 @@ export default function AddNewPattern() {
 						// category.
 						if (
 							! currentCategoryId &&
-							params.categoryId !== 'my-patterns'
+							categoryId !== 'my-patterns'
 						) {
 							history.push( {
-								path: `/patterns`,
-								categoryType: PATTERN_TYPES.theme,
+								postType: PATTERN_TYPES.user,
 								categoryId: PATTERN_DEFAULT_CATEGORY,
 							} );
 						}
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 700f9c17de6ed..3705010be4853 100644
--- a/packages/edit-site/src/components/add-new-template/index.js
+++ b/packages/edit-site/src/components/add-new-template/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -128,6 +128,7 @@ function TemplateListItem( {
 					spacing={ 0 }
 				>
 					<Text
+						align="center"
 						weight={ 500 }
 						lineHeight={ 1.53846153846 } // 20px
 					>
@@ -250,7 +251,7 @@ function NewTemplateModal( { onClose } ) {
 	return (
 		<Modal
 			title={ modalTitle }
-			className={ classnames( 'edit-site-add-new-template__modal', {
+			className={ clsx( 'edit-site-add-new-template__modal', {
 				'edit-site-add-new-template__modal_template_list':
 					modalContent === modalContentMap.templatesList,
 				'edit-site-custom-template-modal':
@@ -354,6 +355,7 @@ function NewTemplate() {
 				variant="primary"
 				onClick={ () => setShowModal( true ) }
 				label={ postType.labels.add_new_item }
+				__next40pxDefaultSize
 			>
 				{ postType.labels.add_new_item }
 			</Button>
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 9934d1c64307f..1e544aeaadfe1 100644
--- a/packages/edit-site/src/components/add-new-template/utils.js
+++ b/packages/edit-site/src/components/add-new-template/utils.js
@@ -100,7 +100,15 @@ const usePublicTaxonomies = () => {
 	}, [ taxonomies ] );
 };
 
-function usePostTypeNeedsUniqueIdentifier( publicPostTypes ) {
+export function usePostTypeArchiveMenuItems() {
+	const publicPostTypes = usePublicPostTypes();
+	const postTypesWithArchives = useMemo(
+		() => publicPostTypes?.filter( ( postType ) => postType.has_archive ),
+		[ publicPostTypes ]
+	);
+	const existingTemplates = useExistingTemplates();
+	// We need to keep track of naming conflicts. If a conflict
+	// occurs, we need to add slug.
 	const postTypeLabels = useMemo(
 		() =>
 			publicPostTypes?.reduce( ( accumulator, { labels } ) => {
@@ -111,25 +119,13 @@ function usePostTypeNeedsUniqueIdentifier( publicPostTypes ) {
 			}, {} ),
 		[ publicPostTypes ]
 	);
-	return useCallback(
+	const needsUniqueIdentifier = useCallback(
 		( { labels, slug } ) => {
 			const singularName = labels.singular_name.toLowerCase();
 			return postTypeLabels[ singularName ] > 1 && singularName !== slug;
 		},
 		[ postTypeLabels ]
 	);
-}
-
-export function usePostTypeArchiveMenuItems() {
-	const publicPostTypes = usePublicPostTypes();
-	const postTypesWithArchives = useMemo(
-		() => publicPostTypes?.filter( ( postType ) => postType.has_archive ),
-		[ publicPostTypes ]
-	);
-	const existingTemplates = useExistingTemplates();
-	const needsUniqueIdentifier = usePostTypeNeedsUniqueIdentifier(
-		postTypesWithArchives
-	);
 	return useMemo(
 		() =>
 			postTypesWithArchives
@@ -184,8 +180,30 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 	const publicPostTypes = usePublicPostTypes();
 	const existingTemplates = useExistingTemplates();
 	const defaultTemplateTypes = useDefaultTemplateTypes();
-	const needsUniqueIdentifier =
-		usePostTypeNeedsUniqueIdentifier( publicPostTypes );
+	// We need to keep track of naming conflicts. If a conflict
+	// occurs, we need to add slug.
+	const templateLabels = useMemo(
+		() =>
+			publicPostTypes?.reduce( ( accumulator, { labels } ) => {
+				const templateName = (
+					labels.template_name || labels.singular_name
+				).toLowerCase();
+				accumulator[ templateName ] =
+					( accumulator[ templateName ] || 0 ) + 1;
+				return accumulator;
+			}, {} ),
+		[ publicPostTypes ]
+	);
+	const needsUniqueIdentifier = useCallback(
+		( { labels, slug } ) => {
+			const templateName = (
+				labels.template_name || labels.singular_name
+			).toLowerCase();
+			return templateLabels[ templateName ] > 1 && templateName !== slug;
+		},
+		[ templateLabels ]
+	);
+
 	// `page`is a special case in template hierarchy.
 	const templatePrefixes = useMemo(
 		() =>
@@ -216,18 +234,27 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 			const hasGeneralTemplate =
 				existingTemplateSlugs?.includes( generalTemplateSlug );
 			const _needsUniqueIdentifier = needsUniqueIdentifier( postType );
-			let menuItemTitle = sprintf(
-				// translators: %s: Name of the post type e.g: "Post".
-				__( 'Single item: %s' ),
-				labels.singular_name
-			);
-			if ( _needsUniqueIdentifier ) {
-				menuItemTitle = sprintf(
-					// translators: %1s: Name of the post type e.g: "Post"; %2s: Slug of the post type e.g: "book".
-					__( 'Single item: %1$s (%2$s)' ),
-					labels.singular_name,
-					slug
+			let menuItemTitle =
+				labels.template_name ||
+				sprintf(
+					// translators: %s: Name of the post type e.g: "Post".
+					__( 'Single item: %s' ),
+					labels.singular_name
 				);
+			if ( _needsUniqueIdentifier ) {
+				menuItemTitle = labels.template_name
+					? sprintf(
+							// translators: %1s: Name of the template e.g: "Single Item: Post"; %2s: Slug of the post type e.g: "book".
+							__( '%1$s (%2$s)' ),
+							labels.template_name,
+							slug
+					  )
+					: sprintf(
+							// translators: %1s: Name of the post type e.g: "Post"; %2s: Slug of the post type e.g: "book".
+							__( 'Single item: %1$s (%2$s)' ),
+							labels.singular_name,
+							slug
+					  );
 			}
 			const menuItem = defaultTemplateType
 				? {
@@ -337,9 +364,11 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 	// occurs, we need to add slug.
 	const taxonomyLabels = publicTaxonomies?.reduce(
 		( accumulator, { labels } ) => {
-			const singularName = labels.singular_name.toLowerCase();
-			accumulator[ singularName ] =
-				( accumulator[ singularName ] || 0 ) + 1;
+			const templateName = (
+				labels.template_name || labels.singular_name
+			).toLowerCase();
+			accumulator[ templateName ] =
+				( accumulator[ templateName ] || 0 ) + 1;
 			return accumulator;
 		},
 		{}
@@ -348,8 +377,10 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 		if ( [ 'category', 'post_tag' ].includes( slug ) ) {
 			return false;
 		}
-		const singularName = labels.singular_name.toLowerCase();
-		return taxonomyLabels[ singularName ] > 1 && singularName !== slug;
+		const templateName = (
+			labels.template_name || labels.singular_name
+		).toLowerCase();
+		return taxonomyLabels[ templateName ] > 1 && templateName !== slug;
 	};
 	const taxonomiesInfo = useEntitiesInfo( 'taxonomy', templatePrefixes );
 	const existingTemplateSlugs = ( existingTemplates || [] ).map(
@@ -371,14 +402,21 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 				labels,
 				slug
 			);
-			let menuItemTitle = labels.singular_name;
+			let menuItemTitle = labels.template_name || labels.singular_name;
 			if ( _needsUniqueIdentifier ) {
-				menuItemTitle = sprintf(
-					// translators: %1s: Name of the taxonomy e.g: "Category"; %2s: Slug of the taxonomy e.g: "product_cat".
-					__( '%1$s (%2$s)' ),
-					labels.singular_name,
-					slug
-				);
+				menuItemTitle = labels.template_name
+					? sprintf(
+							// translators: %1s: Name of the template e.g: "Products by Category"; %2s: Slug of the taxonomy e.g: "product_cat".
+							__( '%1$s (%2$s)' ),
+							labels.template_name,
+							slug
+					  )
+					: sprintf(
+							// translators: %1s: Name of the taxonomy e.g: "Category"; %2s: Slug of the taxonomy e.g: "product_cat".
+							__( '%1$s (%2$s)' ),
+							labels.singular_name,
+							slug
+					  );
 			}
 			const menuItem = defaultTemplateType
 				? {
diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js
index cad76b3ea1fb8..764b188acf6a5 100644
--- a/packages/edit-site/src/components/app/index.js
+++ b/packages/edit-site/src/components/app/index.js
@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { SlotFillProvider } from '@wordpress/components';
-import { UnsavedChangesWarning } from '@wordpress/editor';
+import {
+	UnsavedChangesWarning,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
@@ -13,10 +16,10 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import Layout from '../layout';
-import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 import { unlock } from '../../lock-unlock';
 
 const { RouterProvider } = unlock( routerPrivateApis );
+const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
 export default function App() {
 	const { createErrorNotice } = useDispatch( noticesStore );
diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js
deleted file mode 100644
index acb136d226f02..0000000000000
--- a/packages/edit-site/src/components/block-editor/editor-canvas.js
+++ /dev/null
@@ -1,178 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { ENTER, SPACE } from '@wordpress/keycodes';
-import { useState, useEffect, useMemo } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import {
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-import {
-	FOCUSABLE_ENTITIES,
-	NAVIGATION_POST_TYPE,
-} from '../../utils/constants';
-import { computeIFrameScale } from '../../utils/math';
-
-const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );
-
-function EditorCanvas( {
-	enableResizing,
-	settings,
-	children,
-	onClick,
-	...props
-} ) {
-	const {
-		hasBlocks,
-		isFocusMode,
-		templateType,
-		canvasMode,
-		isZoomOutMode,
-		currentPostIsTrashed,
-	} = useSelect( ( select ) => {
-		const { getBlockCount, __unstableGetEditorMode } =
-			select( blockEditorStore );
-		const { getEditedPostType, getCanvasMode } = unlock(
-			select( editSiteStore )
-		);
-		const _templateType = getEditedPostType();
-
-		return {
-			templateType: _templateType,
-			isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
-			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
-			canvasMode: getCanvasMode(),
-			hasBlocks: !! getBlockCount(),
-			currentPostIsTrashed:
-				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
-				'trash',
-		};
-	}, [] );
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const [ isFocused, setIsFocused ] = useState( false );
-
-	useEffect( () => {
-		if ( canvasMode === 'edit' ) {
-			setIsFocused( false );
-		}
-	}, [ canvasMode ] );
-
-	// In view mode, make the canvas iframe be perceived and behave as a button
-	// to switch to edit mode, with a meaningful label and no title attribute.
-	const viewModeIframeProps = {
-		'aria-label': __( 'Edit' ),
-		'aria-disabled': currentPostIsTrashed,
-		title: null,
-		role: 'button',
-		tabIndex: 0,
-		onFocus: () => setIsFocused( true ),
-		onBlur: () => setIsFocused( false ),
-		onKeyDown: ( event ) => {
-			const { keyCode } = event;
-			if (
-				( keyCode === ENTER || keyCode === SPACE ) &&
-				! currentPostIsTrashed
-			) {
-				event.preventDefault();
-				setCanvasMode( 'edit' );
-			}
-		},
-		onClick: () => {
-			if ( !! onClick ) {
-				onClick();
-			} else {
-				setCanvasMode( 'edit' );
-			}
-		},
-		onClickCapture: ( event ) => {
-			if ( currentPostIsTrashed ) {
-				event.preventDefault();
-				event.stopPropagation();
-			}
-		},
-		readonly: true,
-	};
-	const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
-	const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
-	// Hide the appender when:
-	// - In navigation focus mode (should only allow the root Nav block).
-	// - In view mode (i.e. not editing).
-	const showBlockAppender =
-		( isNavigationFocusMode && hasBlocks ) || canvasMode === 'view'
-			? false
-			: undefined;
-
-	const styles = useMemo(
-		() => [
-			...settings.styles,
-			{
-				// Forming a "block formatting context" to prevent margin collapsing.
-				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-
-				css: `.is-root-container{display:flow-root;${
-					// Some themes will have `min-height: 100vh` for the root container,
-					// which isn't a requirement in auto resize mode.
-					enableResizing ? 'min-height:0!important;' : ''
-				}}body{position:relative; ${
-					canvasMode === 'view'
-						? `min-height: 100vh; ${
-								currentPostIsTrashed ? '' : 'cursor: pointer;'
-						  }`
-						: ''
-				}}}`,
-			},
-		],
-		[ settings.styles, enableResizing, canvasMode, currentPostIsTrashed ]
-	);
-
-	const frameSize = isZoomOutMode ? 20 : undefined;
-
-	const scale = isZoomOutMode
-		? ( contentWidth ) =>
-				computeIFrameScale(
-					{ width: 1000, scale: 0.55 },
-					{ width: 400, scale: 0.9 },
-					contentWidth
-				)
-		: undefined;
-
-	return (
-		<EditorCanvasRoot
-			className={ classnames( 'edit-site-editor-canvas__block-list', {
-				'is-navigation-block': isTemplateTypeNavigation,
-			} ) }
-			renderAppender={ showBlockAppender }
-			styles={ styles }
-			iframeProps={ {
-				scale,
-				frameSize,
-				className: classnames(
-					'edit-site-visual-editor__editor-canvas',
-					{
-						'is-focused': isFocused && canvasMode === 'view',
-					}
-				),
-				...props,
-				...( canvasMode === 'view' ? viewModeIframeProps : {} ),
-			} }
-		>
-			{ children }
-		</EditorCanvasRoot>
-	);
-}
-
-export default EditorCanvas;
diff --git a/packages/edit-site/src/components/block-editor/inserter-media-categories.js b/packages/edit-site/src/components/block-editor/inserter-media-categories.js
index af591d1fa2468..7ebc771126122 100644
--- a/packages/edit-site/src/components/block-editor/inserter-media-categories.js
+++ b/packages/edit-site/src/components/block-editor/inserter-media-categories.js
@@ -191,9 +191,7 @@ const inserterMediaCategories = [
 				per_page: 'page_size',
 				search: 'q',
 			};
-			const url = new URL(
-				'https://api.openverse.engineering/v1/images/'
-			);
+			const url = new URL( 'https://api.openverse.org/v1/images/' );
 			Object.entries( finalQuery ).forEach( ( [ key, value ] ) => {
 				const queryKey = mapFromInserterMediaRequest[ key ] || key;
 				url.searchParams.set( queryKey, value );
diff --git a/packages/edit-site/src/components/block-editor/site-editor-canvas.js b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
deleted file mode 100644
index 94845d160ea83..0000000000000
--- a/packages/edit-site/src/components/block-editor/site-editor-canvas.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ResizableEditor from './resizable-editor';
-import EditorCanvas from './editor-canvas';
-import EditorCanvasContainer from '../editor-canvas-container';
-import useSiteEditorSettings from './use-site-editor-settings';
-import { store as editSiteStore } from '../../store';
-import {
-	FOCUSABLE_ENTITIES,
-	NAVIGATION_POST_TYPE,
-	TEMPLATE_POST_TYPE,
-} from '../../utils/constants';
-import { unlock } from '../../lock-unlock';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-const { useLocation } = unlock( routerPrivateApis );
-
-export default function SiteEditorCanvas( { onClick } ) {
-	const location = useLocation();
-	const { templateType, isFocusableEntity, isViewMode, isZoomOutMode } =
-		useSelect( ( select ) => {
-			const { getEditedPostType, getCanvasMode } = unlock(
-				select( editSiteStore )
-			);
-			const { __unstableGetEditorMode } = select( blockEditorStore );
-			const _templateType = getEditedPostType();
-
-			return {
-				templateType: _templateType,
-				isFocusableEntity: FOCUSABLE_ENTITIES.includes( _templateType ),
-				isViewMode: getCanvasMode() === 'view',
-				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
-			};
-		}, [] );
-	const isFocusMode = location.params.focusMode || isFocusableEntity;
-	const [ resizeObserver, sizes ] = useResizeObserver();
-
-	const settings = useSiteEditorSettings();
-
-	const isMobileViewport = useViewportMatch( 'small', '<' );
-	const enableResizing =
-		isFocusMode &&
-		! isViewMode &&
-		// Disable resizing in mobile viewport.
-		! isMobileViewport &&
-		// Dsiable resizing in zoomed-out mode.
-		! isZoomOutMode &&
-		// Disable resizing when editing a template in focus mode.
-		templateType !== TEMPLATE_POST_TYPE;
-
-	const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
-	const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
-	const forceFullHeight = isNavigationFocusMode;
-
-	return (
-		<EditorCanvasContainer.Slot>
-			{ ( [ editorCanvasView ] ) =>
-				editorCanvasView ? (
-					<div className="edit-site-visual-editor is-focus-mode">
-						{ editorCanvasView }
-					</div>
-				) : (
-					<div
-						className={ classnames( 'edit-site-visual-editor', {
-							'is-focus-mode': isFocusMode || !! editorCanvasView,
-							'is-view-mode': isViewMode,
-						} ) }
-					>
-						<ResizableEditor
-							enableResizing={ enableResizing }
-							height={
-								sizes.height && ! forceFullHeight
-									? sizes.height
-									: '100%'
-							}
-						>
-							<EditorCanvas
-								enableResizing={ enableResizing }
-								settings={ settings }
-								onClick={ onClick }
-							>
-								{
-									// Avoid resize listeners when not needed,
-									// these will trigger unnecessary re-renders
-									// when animating the iframe width.
-									enableResizing && resizeObserver
-								}
-							</EditorCanvas>
-						</ResizableEditor>
-					</div>
-				)
-			}
-		</EditorCanvasContainer.Slot>
-	);
-}
diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
index a470308dbb700..3849eed24a4ea 100644
--- a/packages/edit-site/src/components/block-editor/style.scss
+++ b/packages/edit-site/src/components/block-editor/style.scss
@@ -1,141 +1,6 @@
-// The button element easily inherits styles that are meant for the editor style.
-// These rules enhance the specificity to reduce that inheritance.
-// This is duplicated in visual-editor.
-.edit-site-block-editor__editor-styles-wrapper  .components-button {
-	font-family: $default-font;
-	font-size: $default-font-size;
-	padding: 6px 12px;
-
-	&.is-tertiary,
-	&.has-icon {
-		padding: 6px;
-	}
-}
-
-// Navigation focus mode requires padding around the root Navigation block
-// for presentational purposes.
-.edit-site-editor-canvas__block-list.is-navigation-block {
-	padding: $grid-unit-30;
-}
-
-.edit-site-visual-editor {
-	position: relative;
-	height: 100%;
-	display: block;
-	background-color: $gray-300;
-	// Centralize the editor horizontally (flex-direction is column).
-	align-items: center;
-
-	// Controls height of editor and editor canvas container (style book, global styles revisions previews etc.)
-	iframe {
-		display: block;
-		width: 100%;
-		height: 100%;
-	}
-
-	.edit-site-visual-editor__editor-canvas {
-		&.is-focused {
-			outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
-			outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
-		}
-	}
-
-
-	&.is-focus-mode {
-		.edit-site-layout.is-full-canvas & {
-			padding: $grid-unit-30;
-		}
-
-		.edit-site-visual-editor__editor-canvas {
-			border-radius: $radius-block-ui;
-			max-height: 100%;
-		}
-
-		// To hide the horizontal scrollbar and show the drag handle on the
-		// left and right of the container.
-		.components-resizable-box__container {
-			overflow: visible;
-		}
-	}
-
-	.components-resizable-box__container {
-		margin: 0 auto;
-	}
-
-	&.is-view-mode {
-		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
-	}
-}
-
-.resizable-editor__drag-handle {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	padding: 0;
-	margin: auto 0;
-	width: $grid-unit-15;
-	appearance: none;
-	cursor: ew-resize;
-	outline: none;
-	background: none;
-	border-radius: $radius-block-ui;
-	border: 0;
-
-	&.is-variation-default {
-		height: 100px;
-	}
-
-	&.is-variation-separator {
-		height: 100%;
-		width: $grid-unit-30;
-		right: 0;
-
-		&::after {
-			width: 2px;
-			border-radius: 0;
-			background: transparent;
-			left: 50%;
-			transform: translateX(-1px);
-			right: 0;
-			transition: all ease 0.2s;
-			transition-delay: 0.1s;
-			@include reduce-motion;
-		}
-	}
-
-	&::after {
-		position: absolute;
-		top: $grid-unit-20;
-		left: $grid-unit-05;
-		right: 0;
-		bottom: $grid-unit-20;
-		content: "";
-		width: $grid-unit-05;
-		background-color: rgba($gray-700, 0.4);
-		border-radius: $radius-block-ui;
-	}
-
-	&.is-left {
-		// Subtract half of the handle width to properly center.
-		left: -$grid-unit-20 - math.div($grid-unit-05, 2);
-	}
-
-	&.is-right {
-		// Subtract half of the handle width to properly center.
-		right: -$grid-unit-20 - math.div($grid-unit-05, 2);
-	}
-
-	&:hover,
-	&:focus,
-	&:active {
-		opacity: 1;
-		&::after {
-			background-color: var(--wp-admin-theme-color);
-		}
-	}
-
-	&.is-variation-separator:focus::after {
-		border-radius: $radius-block-ui;
-		box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+.edit-site-visual-editor__editor-canvas {
+	&.is-focused {
+		outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
+		outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
 	}
 }
diff --git a/packages/edit-site/src/components/block-editor/use-editor-iframe-props.js b/packages/edit-site/src/components/block-editor/use-editor-iframe-props.js
new file mode 100644
index 0000000000000..3b5c9f7fe6572
--- /dev/null
+++ b/packages/edit-site/src/components/block-editor/use-editor-iframe-props.js
@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { ENTER, SPACE } from '@wordpress/keycodes';
+import { useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { store as editorStore } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+
+export default function useEditorIframeProps() {
+	const { canvasMode, currentPostIsTrashed } = useSelect( ( select ) => {
+		const { getCanvasMode } = unlock( select( editSiteStore ) );
+
+		return {
+			canvasMode: getCanvasMode(),
+			currentPostIsTrashed:
+				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
+				'trash',
+		};
+	}, [] );
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const [ isFocused, setIsFocused ] = useState( false );
+
+	useEffect( () => {
+		if ( canvasMode === 'edit' ) {
+			setIsFocused( false );
+		}
+	}, [ canvasMode ] );
+
+	// In view mode, make the canvas iframe be perceived and behave as a button
+	// to switch to edit mode, with a meaningful label and no title attribute.
+	const viewModeIframeProps = {
+		'aria-label': __( 'Edit' ),
+		'aria-disabled': currentPostIsTrashed,
+		title: null,
+		role: 'button',
+		tabIndex: 0,
+		onFocus: () => setIsFocused( true ),
+		onBlur: () => setIsFocused( false ),
+		onKeyDown: ( event ) => {
+			const { keyCode } = event;
+			if (
+				( keyCode === ENTER || keyCode === SPACE ) &&
+				! currentPostIsTrashed
+			) {
+				event.preventDefault();
+				setCanvasMode( 'edit' );
+			}
+		},
+		onClick: () => {
+			setCanvasMode( 'edit' );
+		},
+		onClickCapture: ( event ) => {
+			if ( currentPostIsTrashed ) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		},
+		readonly: true,
+	};
+
+	return {
+		className: clsx( 'edit-site-visual-editor__editor-canvas', {
+			'is-focused': isFocused && canvasMode === 'view',
+		} ),
+		...( canvasMode === 'view' ? viewModeIframeProps : {} ),
+	};
+}
diff --git a/packages/edit-site/src/components/canvas-loader/index.js b/packages/edit-site/src/components/canvas-loader/index.js
index 99d83c3ad69b3..95dd8f2461293 100644
--- a/packages/edit-site/src/components/canvas-loader/index.js
+++ b/packages/edit-site/src/components/canvas-loader/index.js
@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import {
+	privateApis as componentsPrivateApis,
+	ProgressBar,
+} from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
@@ -12,7 +15,7 @@ import { useSelect } from '@wordpress/data';
 import { unlock } from '../../lock-unlock';
 import { useStylesPreviewColors } from '../global-styles/hooks';
 
-const { ProgressBar, Theme } = unlock( componentsPrivateApis );
+const { Theme } = unlock( componentsPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 export default function CanvasLoader( { id } ) {
diff --git a/packages/edit-site/src/components/code-editor/index.js b/packages/edit-site/src/components/code-editor/index.js
deleted file mode 100644
index 8c27a48b01cec..0000000000000
--- a/packages/edit-site/src/components/code-editor/index.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * External dependencies
- */
-import Textarea from 'react-autosize-textarea';
-
-/**
- * WordPress dependencies
- */
-import { __unstableSerializeAndClean } from '@wordpress/blocks';
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { __ } from '@wordpress/i18n';
-import { Button, VisuallyHidden } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
-import { store as editorStore } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-
-export default function CodeEditor() {
-	const instanceId = useInstanceId( CodeEditor );
-	const { shortcut, content, blocks, type, id } = useSelect( ( select ) => {
-		const { getEditedEntityRecord } = select( coreStore );
-		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
-		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
-		const _type = getEditedPostType();
-		const _id = getEditedPostId();
-		const editedRecord = getEditedEntityRecord( 'postType', _type, _id );
-
-		return {
-			shortcut: getShortcutRepresentation( 'core/editor/toggle-mode' ),
-			content: editedRecord?.content,
-			blocks: editedRecord?.blocks,
-			type: _type,
-			id: _id,
-		};
-	}, [] );
-	const { editEntityRecord } = useDispatch( coreStore );
-	// Replicates the logic found in getEditedPostContent().
-	const realContent = useMemo( () => {
-		if ( content instanceof Function ) {
-			return content( { blocks } );
-		} else if ( blocks ) {
-			// If we have parsed blocks already, they should be our source of truth.
-			// Parsing applies block deprecations and legacy block conversions that
-			// unparsed content will not have.
-			return __unstableSerializeAndClean( blocks );
-		}
-		return content;
-	}, [ content, blocks ] );
-
-	const { switchEditorMode } = useDispatch( editorStore );
-	return (
-		<div className="edit-site-code-editor">
-			<div className="edit-site-code-editor__toolbar">
-				<h2>{ __( 'Editing code' ) }</h2>
-				<Button
-					variant="tertiary"
-					onClick={ () => switchEditorMode( 'visual' ) }
-					shortcut={ shortcut }
-				>
-					{ __( 'Exit code editor' ) }
-				</Button>
-			</div>
-			<div className="edit-site-code-editor__body">
-				<VisuallyHidden
-					as="label"
-					htmlFor={ `code-editor-text-area-${ instanceId }` }
-				>
-					{ __( 'Type text or HTML' ) }
-				</VisuallyHidden>
-				<Textarea
-					autoComplete="off"
-					dir="auto"
-					value={ realContent }
-					onChange={ ( event ) => {
-						editEntityRecord( 'postType', type, id, {
-							content: event.target.value,
-							blocks: undefined,
-							selection: undefined,
-						} );
-					} }
-					className="edit-site-code-editor-text-area"
-					id={ `code-editor-text-area-${ instanceId }` }
-					placeholder={ __( 'Start writing with text or HTML' ) }
-				/>
-			</div>
-		</div>
-	);
-}
diff --git a/packages/edit-site/src/components/code-editor/style.scss b/packages/edit-site/src/components/code-editor/style.scss
deleted file mode 100644
index 17431de27b896..0000000000000
--- a/packages/edit-site/src/components/code-editor/style.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-.edit-site-code-editor {
-	position: relative;
-	width: 100%;
-	min-height: 100%;
-	background-color: $white;
-
-	&__body {
-		width: 100%;
-		padding: $grid-unit-15;
-		max-width: $break-xlarge;
-		margin-left: auto;
-		margin-right: auto;
-
-		@include break-large() {
-			padding: $grid-unit-30;
-		}
-	}
-
-	// Exit code editor toolbar.
-	&__toolbar {
-		position: sticky;
-		z-index: z-index(".edit-site-code-editor__toolbar");
-		top: 0;
-		left: 0;
-		right: 0;
-		display: flex;
-		background: rgba($white, 0.8);
-		padding: $grid-unit-05 $grid-unit-15;
-
-		@include break-small() {
-			padding: $grid-unit-15;
-		}
-
-		@include break-large() {
-			padding: $grid-unit-15 $grid-unit-30;
-		}
-
-		h2 {
-			line-height: $button-size;
-			margin: 0 auto 0 0;
-			font-size: $default-font-size;
-			color: $gray-900;
-		}
-	}
-}
-
-textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
-	border: $border-width solid $gray-600;
-	border-radius: 0;
-	display: block;
-	margin: 0;
-	width: 100%;
-	box-shadow: none;
-	resize: none;
-	overflow: hidden;
-	font-family: $editor-html-font;
-	line-height: 2.4;
-	min-height: 200px;
-	transition: border 0.1s ease-out, box-shadow 0.1s linear;
-	@include reduce-motion("transition");
-
-	// Same padding as title.
-	padding: $grid-unit-20;
-	@include break-small() {
-		padding: $grid-unit-30;
-	}
-
-	/* Fonts smaller than 16px causes mobile safari to zoom. */
-	font-size: $mobile-text-min-font-size !important;
-	@include break-small {
-		font-size: $text-editor-font-size !important;
-	}
-
-	&:focus {
-		border-color: var(--wp-admin-theme-color);
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-		// Elevate the z-index on focus so the focus style is uncropped.
-		position: relative;
-	}
-
-	&::-webkit-input-placeholder {
-		color: $dark-gray-placeholder;
-	}
-
-	&::-moz-placeholder {
-		color: $dark-gray-placeholder;
-		// Override Firefox default.
-		opacity: 1;
-	}
-
-	&:-ms-input-placeholder {
-		color: $dark-gray-placeholder;
-	}
-}
diff --git a/packages/edit-site/src/components/dataviews-actions/index.js b/packages/edit-site/src/components/dataviews-actions/index.js
new file mode 100644
index 0000000000000..09b7597c6cb34
--- /dev/null
+++ b/packages/edit-site/src/components/dataviews-actions/index.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { edit } from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { PATTERN_TYPES } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export const useEditPostAction = () => {
+	const history = useHistory();
+	return useMemo(
+		() => ( {
+			id: 'edit-post',
+			label: __( 'Edit' ),
+			isPrimary: true,
+			icon: edit,
+			isEligible( post ) {
+				if ( post.status === 'trash' ) {
+					return false;
+				}
+				// It's eligible for all post types except theme patterns.
+				return post.type !== PATTERN_TYPES.theme;
+			},
+			callback( items ) {
+				const post = items[ 0 ];
+				history.push( {
+					postId: post.id,
+					postType: post.type,
+					canvas: 'edit',
+				} );
+			},
+		} ),
+		[ history ]
+	);
+};
diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js
index 0e9f7c3086ad7..baebc1bc1bc89 100644
--- a/packages/edit-site/src/components/editor-canvas-container/index.js
+++ b/packages/edit-site/src/components/editor-canvas-container/index.js
@@ -4,7 +4,6 @@
 import { Children, cloneElement, useState } from '@wordpress/element';
 import {
 	Button,
-	privateApis as componentsPrivateApis,
 	__experimentalUseSlotFills as useSlotFills,
 } from '@wordpress/components';
 import { ESCAPE } from '@wordpress/keycodes';
@@ -13,14 +12,18 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { closeSmall } from '@wordpress/icons';
 import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
-import ResizableEditor from '../block-editor/resizable-editor';
+
+const { EditorContentSlotFill, ResizableEditor } = unlock( editorPrivateApis );
 
 /**
  * Returns a translated string for the title of the editor canvas container.
@@ -41,15 +44,6 @@ function getEditorCanvasContainerTitle( view ) {
 	}
 }
 
-// Creates a private slot fill.
-const { createPrivateSlotFill } = unlock( componentsPrivateApis );
-const SLOT_FILL_NAME = 'EditSiteEditorCanvasContainerSlot';
-const {
-	privateKey,
-	Slot: EditorCanvasContainerSlot,
-	Fill: EditorCanvasContainerFill,
-} = createPrivateSlotFill( SLOT_FILL_NAME );
-
 function EditorCanvasContainer( {
 	children,
 	closeButtonLabel,
@@ -119,34 +113,35 @@ function EditorCanvasContainer( {
 	const shouldShowCloseButton = onClose || closeButtonLabel;
 
 	return (
-		<EditorCanvasContainerFill>
-			<ResizableEditor enableResizing={ enableResizing }>
-				{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
-				<section
-					className="edit-site-editor-canvas-container"
-					ref={ shouldShowCloseButton ? focusOnMountRef : null }
-					onKeyDown={ closeOnEscape }
-					aria-label={ title }
-				>
-					{ shouldShowCloseButton && (
-						<Button
-							className="edit-site-editor-canvas-container__close-button"
-							icon={ closeSmall }
-							label={ closeButtonLabel || __( 'Close' ) }
-							onClick={ onCloseContainer }
-						/>
-					) }
-					{ childrenWithProps }
-				</section>
-			</ResizableEditor>
-		</EditorCanvasContainerFill>
+		<EditorContentSlotFill.Fill>
+			<div className="edit-site-editor-canvas-container">
+				<ResizableEditor enableResizing={ enableResizing }>
+					{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
+					<section
+						className="edit-site-editor-canvas-container__section"
+						ref={ shouldShowCloseButton ? focusOnMountRef : null }
+						onKeyDown={ closeOnEscape }
+						aria-label={ title }
+					>
+						{ shouldShowCloseButton && (
+							<Button
+								className="edit-site-editor-canvas-container__close-button"
+								icon={ closeSmall }
+								label={ closeButtonLabel || __( 'Close' ) }
+								onClick={ onCloseContainer }
+							/>
+						) }
+						{ childrenWithProps }
+					</section>
+				</ResizableEditor>
+			</div>
+		</EditorContentSlotFill.Fill>
 	);
 }
 function useHasEditorCanvasContainer() {
-	const fills = useSlotFills( privateKey );
+	const fills = useSlotFills( EditorContentSlotFill.privateKey );
 	return !! fills?.length;
 }
 
-EditorCanvasContainer.Slot = EditorCanvasContainerSlot;
 export default EditorCanvasContainer;
 export { useHasEditorCanvasContainer, getEditorCanvasContainerTitle };
diff --git a/packages/edit-site/src/components/editor-canvas-container/style.scss b/packages/edit-site/src/components/editor-canvas-container/style.scss
index acc0e0872f0b4..fad566212e732 100644
--- a/packages/edit-site/src/components/editor-canvas-container/style.scss
+++ b/packages/edit-site/src/components/editor-canvas-container/style.scss
@@ -1,4 +1,20 @@
 .edit-site-editor-canvas-container {
+	height: 100%;
+	background-color: $gray-300;
+
+	// Controls height of editor and editor canvas container (style book, global styles revisions previews etc.)
+	iframe {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
+	.edit-site-layout.is-full-canvas & {
+		padding: $grid-unit-30 $grid-unit-30 0;
+	}
+}
+
+.edit-site-editor-canvas-container__section {
 	background: $white; // Fallback color, overridden by JavaScript.
 	border-radius: $radius-block-ui;
 	bottom: 0;
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 4cac473157136..6f61e01c1d7c6 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -1,131 +1,83 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import {
-	Notice,
-	__unstableAnimatePresence as AnimatePresence,
-	__unstableMotion as motion,
-} from '@wordpress/components';
-import {
-	useInstanceId,
-	useViewportMatch,
-	useReducedMotion,
-} from '@wordpress/compose';
-import { store as preferencesStore } from '@wordpress/preferences';
-import {
-	BlockBreadcrumb,
-	BlockToolbar,
-	store as blockEditorStore,
-	BlockInspector,
-} from '@wordpress/block-editor';
+import { Notice } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 import {
 	EditorKeyboardShortcutsRegister,
-	EditorKeyboardShortcuts,
-	EditorNotices,
-	EditorSnackbars,
 	privateApis as editorPrivateApis,
 	store as editorStore,
 } from '@wordpress/editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
-import { useState, useCallback } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
-import {
-	SidebarComplementaryAreaFills,
-	SidebarInspectorFill,
-} from '../sidebar-edit-mode';
-import CodeEditor from '../code-editor';
-import Header from '../header-edit-mode';
 import WelcomeGuide from '../welcome-guide';
-import StartTemplateOptions from '../start-template-options';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
 import useTitle from '../routes/use-title';
 import CanvasLoader from '../canvas-loader';
 import { unlock } from '../../lock-unlock';
 import useEditedEntityRecord from '../use-edited-entity-record';
-import PatternModal from '../pattern-modal';
 import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
-import SiteEditorCanvas from '../block-editor/site-editor-canvas';
 import TemplatePartConverter from '../template-part-converter';
 import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
+import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
+import GlobalStylesSidebar from '../global-styles-sidebar';
+import { isPreviewingTheme } from '../../utils/is-previewing-theme';
+import {
+	getEditorCanvasContainerTitle,
+	useHasEditorCanvasContainer,
+} from '../editor-canvas-container';
+import SaveButton from '../save-button';
+import SiteEditorMoreMenu from '../more-menu';
+import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
 
 const {
+	EditorInterface,
 	ExperimentalEditorProvider: EditorProvider,
-	InserterSidebar,
-	ListViewSidebar,
-	InterfaceSkeleton,
-	ComplementaryArea,
-	interfaceStore,
-	SavePublishPanels,
+	Sidebar,
 } = unlock( editorPrivateApis );
-
+const { useHistory } = unlock( routerPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
-const interfaceLabels = {
-	/* translators: accessibility text for the editor content landmark region. */
-	body: __( 'Editor content' ),
-	/* translators: accessibility text for the editor settings landmark region. */
-	sidebar: __( 'Editor settings' ),
-	/* translators: accessibility text for the editor publish landmark region. */
-	actions: __( 'Editor publish' ),
-	/* translators: accessibility text for the editor footer landmark region. */
-	footer: __( 'Editor footer' ),
-	/* translators: accessibility text for the editor header landmark region. */
-	header: __( 'Editor top bar' ),
-};
-
-const ANIMATION_DURATION = 0.25;
-
-export default function Editor( { isLoading, onClick } ) {
+export default function Editor( { isLoading } ) {
 	const {
 		record: editedPost,
 		getTitle,
 		isLoaded: hasLoadedPost,
 	} = useEditedEntityRecord();
-
 	const { type: editedPostType } = editedPost;
-
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const disableMotion = useReducedMotion();
-
 	const {
 		context,
 		contextPost,
 		editorMode,
 		canvasMode,
-		blockEditorMode,
-		isRightSidebarOpen,
-		isInserterOpen,
-		isListViewOpen,
-		isDistractionFree,
+		isEditingPage,
+		supportsGlobalStyles,
 		showIconLabels,
-		showBlockBreadcrumbs,
-		postTypeLabel,
+		editorCanvasView,
+		currentPostIsTrashed,
 	} = useSelect( ( select ) => {
-		const { get } = select( preferencesStore );
-		const { getEditedPostContext, getCanvasMode } = unlock(
+		const { getEditedPostContext, getCanvasMode, isPage } = unlock(
 			select( editSiteStore )
 		);
-		const { __unstableGetEditorMode } = select( blockEditorStore );
-		const { getActiveComplementaryArea } = select( interfaceStore );
-		const { getEntityRecord } = select( coreDataStore );
-		const {
-			isInserterOpened,
-			isListViewOpened,
-			getPostTypeLabel,
-			getEditorMode,
-		} = select( editorStore );
+		const { get } = select( preferencesStore );
+		const { getEntityRecord, getCurrentTheme } = select( coreDataStore );
+		const { getEditorMode } = select( editorStore );
 		const _context = getEditedPostContext();
 
 		// The currently selected entity to display.
@@ -141,31 +93,24 @@ export default function Editor( { isLoading, onClick } ) {
 				: undefined,
 			editorMode: getEditorMode(),
 			canvasMode: getCanvasMode(),
-			blockEditorMode: __unstableGetEditorMode(),
-			isInserterOpen: isInserterOpened(),
-			isListViewOpen: isListViewOpened(),
-			isRightSidebarOpen: getActiveComplementaryArea( 'core' ),
-			isDistractionFree: get( 'core', 'distractionFree' ),
-			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
+			isEditingPage: isPage(),
+			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
 			showIconLabels: get( 'core', 'showIconLabels' ),
-			postTypeLabel: getPostTypeLabel(),
+			editorCanvasView: unlock(
+				select( editSiteStore )
+			).getEditorCanvasContainerView(),
+			currentPostIsTrashed:
+				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
+				'trash',
 		};
 	}, [] );
+	const _isPreviewingTheme = isPreviewingTheme();
+	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
+	const iframeProps = useEditorIframeProps();
 
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
 	const showVisualEditor = isViewMode || editorMode === 'visual';
-	const shouldShowBlockBreadcrumbs =
-		! isDistractionFree &&
-		showBlockBreadcrumbs &&
-		isEditMode &&
-		showVisualEditor &&
-		blockEditorMode !== 'zoom-out';
-	const shouldShowInserter = isEditMode && showVisualEditor && isInserterOpen;
-	const shouldShowListView = isEditMode && showVisualEditor && isListViewOpen;
-	const secondarySidebarLabel = isListViewOpen
-		? __( 'List View' )
-		: __( 'Block Library' );
 	const postWithTemplate = !! context?.postId;
 
 	let title;
@@ -188,23 +133,73 @@ export default function Editor( { isLoading, onClick } ) {
 		'edit-site-editor__loading-progress'
 	);
 
-	const { closeGeneralSidebar } = useDispatch( editSiteStore );
-
 	const settings = useSpecificEditorSettings();
+	const styles = useMemo(
+		() => [
+			...settings.styles,
+			{
+				// Forming a "block formatting context" to prevent margin collapsing.
+				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
 
-	// Local state for save panel.
-	// Note 'truthy' callback implies an open panel.
-	const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
-		useState( false );
-
-	const closeEntitiesSavedStates = useCallback(
-		( arg ) => {
-			if ( typeof entitiesSavedStatesCallback === 'function' ) {
-				entitiesSavedStatesCallback( arg );
+				css: `body{${
+					canvasMode === 'view'
+						? `min-height: 100vh; ${
+								currentPostIsTrashed ? '' : 'cursor: pointer;'
+						  }`
+						: ''
+				}}}`,
+			},
+		],
+		[ settings.styles, canvasMode, currentPostIsTrashed ]
+	);
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const history = useHistory();
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			switch ( actionId ) {
+				case 'move-to-trash':
+				case 'delete-post':
+					{
+						history.push( {
+							postType: items[ 0 ].type,
+						} );
+					}
+					break;
+				case 'duplicate-post':
+					{
+						const newItem = items[ 0 ];
+						const _title =
+							typeof newItem.title === 'string'
+								? newItem.title
+								: newItem.title?.rendered;
+						createSuccessNotice(
+							sprintf(
+								// translators: %s: Title of the created post e.g: "Post 1".
+								__( '"%s" successfully created.' ),
+								_title
+							),
+							{
+								type: 'snackbar',
+								id: 'duplicate-post-action',
+								actions: [
+									{
+										label: __( 'Edit' ),
+										onClick: () => {
+											history.push( {
+												postId: newItem.id,
+												postType: newItem.type,
+												canvas: 'edit',
+											} );
+										},
+									},
+								],
+							}
+						);
+					}
+					break;
 			}
-			setEntitiesSavedStatesCallback( false );
 		},
-		[ entitiesSavedStatesCallback ]
+		[ history, createSuccessNotice ]
 	);
 
 	const isReady =
@@ -214,6 +209,10 @@ export default function Editor( { isLoading, onClick } ) {
 
 	return (
 		<>
+			<GlobalStylesRenderer />
+			<EditorKeyboardShortcutsRegister />
+			{ isEditMode && <BlockKeyboardShortcuts /> }
+			{ showVisualEditor && <TemplatePartConverter /> }
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
 			{ isEditMode && <WelcomeGuide /> }
 			{ hasLoadedPost && ! editedPost && (
@@ -232,123 +231,38 @@ export default function Editor( { isLoading, onClick } ) {
 					settings={ settings }
 					useSubRegistry={ false }
 				>
-					<SidebarComplementaryAreaFills />
-					{ isEditMode && <StartTemplateOptions /> }
-					<InterfaceSkeleton
-						isDistractionFree={ isDistractionFree }
-						enableRegionNavigation={ false }
-						className={ classnames(
-							'edit-site-editor__interface-skeleton',
+					<SiteEditorMoreMenu />
+					<EditorInterface
+						className={ clsx(
+							'edit-site-editor__editor-interface',
 							{
 								'show-icon-labels': showIconLabels,
-								'is-entity-save-view-open':
-									!! entitiesSavedStatesCallback,
 							}
 						) }
-						header={
-							<AnimatePresence initial={ false }>
-								{ canvasMode === 'edit' && (
-									<motion.div
-										initial={ {
-											marginTop: -60,
-										} }
-										animate={ {
-											marginTop: 0,
-										} }
-										exit={ {
-											marginTop: -60,
-										} }
-										transition={ {
-											type: 'tween',
-											duration:
-												// Disable transition in mobile to emulate a full page transition.
-												disableMotion ||
-												! isLargeViewport
-													? 0
-													: ANIMATION_DURATION,
-											ease: [ 0.6, 0, 0.4, 1 ],
-										} }
-									>
-										<Header
-											setEntitiesSavedStatesCallback={
-												setEntitiesSavedStatesCallback
-											}
-										/>
-									</motion.div>
-								) }
-							</AnimatePresence>
-						}
-						actions={
-							<SavePublishPanels
-								closeEntitiesSavedStates={
-									closeEntitiesSavedStates
-								}
-								isEntitiesSavedStatesOpen={
-									entitiesSavedStatesCallback
-								}
-								setEntitiesSavedStatesCallback={
-									setEntitiesSavedStatesCallback
-								}
-							/>
-						}
-						notices={ <EditorSnackbars /> }
-						content={
-							<>
-								<GlobalStylesRenderer />
-								{ isEditMode && <EditorNotices /> }
-								{ showVisualEditor && (
-									<>
-										<TemplatePartConverter />
-										<SidebarInspectorFill>
-											<BlockInspector />
-										</SidebarInspectorFill>
-										{ ! isLargeViewport && (
-											<BlockToolbar hideDragHandle />
-										) }
-										<SiteEditorCanvas onClick={ onClick } />
-										<PatternModal />
-									</>
-								) }
-								{ editorMode === 'text' && isEditMode && (
-									<CodeEditor />
-								) }
-								{ isEditMode && (
-									<>
-										<EditorKeyboardShortcutsRegister />
-										<EditorKeyboardShortcuts />
-										<BlockKeyboardShortcuts />
-									</>
-								) }
-							</>
-						}
-						secondarySidebar={
-							isEditMode &&
-							( ( shouldShowInserter && (
-								<InserterSidebar
-									closeGeneralSidebar={ closeGeneralSidebar }
-									isRightSidebarOpen={ isRightSidebarOpen }
-								/>
-							) ) ||
-								( shouldShowListView && <ListViewSidebar /> ) )
+						styles={ styles }
+						enableRegionNavigation={ false }
+						customSaveButton={
+							_isPreviewingTheme && <SaveButton size="compact" />
 						}
-						sidebar={
-							isEditMode &&
-							! isDistractionFree && (
-								<ComplementaryArea.Slot scope="core" />
-							)
+						forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
+						title={
+							! hasDefaultEditorCanvasView
+								? getEditorCanvasContainerTitle(
+										editorCanvasView
+								  )
+								: undefined
 						}
-						footer={
-							shouldShowBlockBreadcrumbs && (
-								<BlockBreadcrumb
-									rootLabelText={ postTypeLabel }
-								/>
+						iframeProps={ iframeProps }
+					/>
+					<Sidebar
+						onActionPerformed={ onActionPerformed }
+						extraPanels={
+							! isEditingPage && (
+								<PluginTemplateSettingPanel.Slot />
 							)
 						}
-						labels={ {
-							...interfaceLabels,
-							secondarySidebar: secondarySidebarLabel,
-						} }
 					/>
+					{ supportsGlobalStyles && <GlobalStylesSidebar /> }
 				</EditorProvider>
 			) }
 		</>
diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
index 8803c0c59ff5a..f44b5a6f02ce2 100644
--- a/packages/edit-site/src/components/editor/style.scss
+++ b/packages/edit-site/src/components/editor/style.scss
@@ -1,4 +1,4 @@
-.edit-site-editor__interface-skeleton {
+.edit-site-editor__editor-interface {
 	opacity: 1;
 	transition: opacity 0.1s ease-out;
 	@include reduce-motion("transition");
@@ -6,10 +6,6 @@
 	&.is-loading {
 		opacity: 0;
 	}
-
-	.interface-interface-skeleton__header {
-		border: 0;
-	}
 }
 
 .edit-site-editor__toggle-save-panel {
@@ -22,17 +18,6 @@
 	justify-content: center;
 }
 
-// Adjust the position of the notices when breadcrumbs are present
-.edit-site .has-block-breadcrumbs.is-full-canvas .components-editor-notices__snackbar {
-	bottom: 40px;
-}
-
-// Adjust the position of the notices
-.edit-site .components-editor-notices__snackbar {
-	position: absolute;
-	right: 0;
-	bottom: 16px;
-	padding-left: 16px;
-	padding-right: 16px;
+.editor-header {
+	padding-left: $header-height;
 }
-@include editor-left(".edit-site .components-editor-notices__snackbar")
diff --git a/packages/edit-site/src/components/global-styles-renderer/index.js b/packages/edit-site/src/components/global-styles-renderer/index.js
index 83c7c51bbe366..2e840a7acdc37 100644
--- a/packages/edit-site/src/components/global-styles-renderer/index.js
+++ b/packages/edit-site/src/components/global-styles-renderer/index.js
@@ -10,11 +10,17 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 const { useGlobalStylesOutput } = unlock( blockEditorPrivateApis );
 
 function useGlobalStylesRenderer() {
-	const [ styles, settings ] = useGlobalStylesOutput();
+	const postType = useSelect( ( select ) => {
+		return select( editSiteStore ).getEditedPostType();
+	} );
+	const [ styles, settings ] = useGlobalStylesOutput(
+		postType !== TEMPLATE_POST_TYPE
+	);
 	const { getSettings } = useSelect( editSiteStore );
 	const { updateSettings } = useDispatch( editSiteStore );
 
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js b/packages/edit-site/src/components/global-styles-sidebar/default-sidebar.js
similarity index 100%
rename from packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js
rename to packages/edit-site/src/components/global-styles-sidebar/default-sidebar.js
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js b/packages/edit-site/src/components/global-styles-sidebar/index.js
similarity index 96%
rename from packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js
rename to packages/edit-site/src/components/global-styles-sidebar/index.js
index f339b34784741..f57cc8c417f41 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js
+++ b/packages/edit-site/src/components/global-styles-sidebar/index.js
@@ -21,12 +21,12 @@ import {
 /**
  * Internal dependencies
  */
-import DefaultSidebar from './default-sidebar';
 import { GlobalStylesUI } from '../global-styles';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesMenuSlot } from '../global-styles/ui';
 import { unlock } from '../../lock-unlock';
 import { store as coreStore } from '@wordpress/core-data';
+import DefaultSidebar from './default-sidebar';
 
 const { interfaceStore } = unlock( editorPrivateApis );
 
@@ -136,7 +136,10 @@ export default function GlobalStylesSidebar() {
 			closeLabel={ __( 'Close Styles' ) }
 			panelClassName="edit-site-global-styles-sidebar__panel"
 			header={
-				<Flex className="edit-site-global-styles-sidebar__header">
+				<Flex
+					className="edit-site-global-styles-sidebar__header"
+					gap={ 1 }
+				>
 					<FlexBlock style={ { minWidth: 'min-content' } }>
 						<h2 className="edit-site-global-styles-sidebar__header-title">
 							{ __( 'Styles' ) }
@@ -149,8 +152,10 @@ export default function GlobalStylesSidebar() {
 							isPressed={
 								isStyleBookOpened || isRevisionsStyleBookOpened
 							}
+							__experimentalIsFocusable
 							disabled={ shouldClearCanvasContainerView }
 							onClick={ toggleStyleBook }
+							size="compact"
 						/>
 					</FlexItem>
 					<FlexItem>
@@ -158,10 +163,12 @@ export default function GlobalStylesSidebar() {
 							label={ __( 'Revisions' ) }
 							icon={ backup }
 							onClick={ toggleRevisions }
+							__experimentalIsFocusable
 							disabled={ ! hasRevisions }
 							isPressed={
 								isRevisionsOpened || isRevisionsStyleBookOpened
 							}
+							size="compact"
 						/>
 					</FlexItem>
 					<GlobalStylesMenuSlot />
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/style.scss b/packages/edit-site/src/components/global-styles-sidebar/style.scss
similarity index 88%
rename from packages/edit-site/src/components/sidebar-edit-mode/style.scss
rename to packages/edit-site/src/components/global-styles-sidebar/style.scss
index 186908c88a54b..1f631eb24057c 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/style.scss
+++ b/packages/edit-site/src/components/global-styles-sidebar/style.scss
@@ -38,14 +38,6 @@
 	margin: 0;
 }
 
-.edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
-	margin-left: 0;
-}
-
-.edit-site-global-styles-sidebar__reset-button.components-button {
-	margin-left: auto;
-}
-
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
 	font-size: $default-font-size * 1.2;
 	font-weight: 500;
@@ -104,6 +96,3 @@
 	}
 }
 
-.edit-site-sidebar__panel {
-	margin-top: -1px;
-}
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 2addf109873aa..8a372587bc66e 100644
--- a/packages/edit-site/src/components/global-styles/background-panel.js
+++ b/packages/edit-site/src/components/global-styles/background-panel.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -17,9 +16,25 @@ const BACKGROUND_DEFAULT_VALUES = {
 const {
 	useGlobalStyle,
 	useGlobalSetting,
+	useGlobalStyleLinks,
 	BackgroundPanel: StylesBackgroundPanel,
 } = unlock( blockEditorPrivateApis );
 
+/**
+ * Checks if there is a current value in the background image block support
+ * attributes.
+ *
+ * @param {Object} style Style attribute.
+ * @return {boolean}     Whether the block has a background image value set.
+ */
+export function hasBackgroundImageValue( style ) {
+	return (
+		!! style?.background?.backgroundImage?.id ||
+		!! style?.background?.backgroundImage?.url ||
+		typeof style?.background?.backgroundImage === 'string'
+	);
+}
+
 export default function BackgroundPanel() {
 	const [ style ] = useGlobalStyle( '', undefined, 'user', {
 		shouldDecodeEncode: false,
@@ -27,13 +42,14 @@ export default function BackgroundPanel() {
 	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
 		shouldDecodeEncode: false,
 	} );
+	const _links = useGlobalStyleLinks();
 	const [ settings ] = useGlobalSetting( '' );
 
 	const defaultControls = {
 		backgroundImage: true,
 		backgroundSize:
-			!! style?.background?.backgroundImage &&
-			!! inheritedStyle?.background?.backgroundImage,
+			hasBackgroundImageValue( style ) ||
+			hasBackgroundImageValue( inheritedStyle ),
 	};
 
 	return (
@@ -42,9 +58,9 @@ export default function BackgroundPanel() {
 			value={ style }
 			onChange={ setStyle }
 			settings={ settings }
-			headerLabel={ __( 'Image' ) }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
 			defaultControls={ defaultControls }
+			themeFileURIs={ _links?.[ 'wp:theme-file' ] }
 		/>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/color-indicator-wrapper.js b/packages/edit-site/src/components/global-styles/color-indicator-wrapper.js
index 9466b2d2282ec..242a5c7710268 100644
--- a/packages/edit-site/src/components/global-styles/color-indicator-wrapper.js
+++ b/packages/edit-site/src/components/global-styles/color-indicator-wrapper.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { Flex } from '@wordpress/components';
 function ColorIndicatorWrapper( { className, ...props } ) {
 	return (
 		<Flex
-			className={ classnames(
+			className={ clsx(
 				'edit-site-global-styles__color-indicator-wrapper',
 				className
 			) }
diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js
index e8c730fe5ca73..0b1d482c0a1b3 100644
--- a/packages/edit-site/src/components/global-styles/color-palette-panel.js
+++ b/packages/edit-site/src/components/global-styles/color-palette-panel.js
@@ -13,6 +13,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import ColorVariations from './variations/variations-color';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
@@ -51,7 +52,7 @@ export default function ColorPalettePanel( { name } ) {
 	return (
 		<VStack
 			className="edit-site-global-styles-color-palette-panel"
-			spacing={ 10 }
+			spacing={ 8 }
 		>
 			{ !! themeColors && !! themeColors.length && (
 				<PaletteEdit
@@ -82,12 +83,10 @@ export default function ColorPalettePanel( { name } ) {
 				onChange={ setCustomColors }
 				paletteLabel={ __( 'Custom' ) }
 				paletteLabelHeadingLevel={ 3 }
-				emptyMessage={ __(
-					'Custom colors are empty! Add some colors to create your own color palette.'
-				) }
 				slugPrefix="custom-"
 				popoverProps={ popoverProps }
 			/>
+			<ColorVariations title={ __( 'Palettes' ) } />
 		</VStack>
 	);
 }
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 9e6694d69b64c..7713b27e306ef 100644
--- a/packages/edit-site/src/components/global-styles/font-families.js
+++ b/packages/edit-site/src/components/global-styles/font-families.js
@@ -7,8 +7,8 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 	Button,
-	Tooltip,
 } from '@wordpress/components';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { settings } from '@wordpress/icons';
 import { useContext } from '@wordpress/element';
 
@@ -21,18 +21,31 @@ import FontLibraryProvider, {
 import FontLibraryModal from './font-library-modal';
 import FontFamilyItem from './font-family-item';
 import Subtitle from './subtitle';
+import { setUIValuesNeeded } from './font-library-modal/utils';
+import { unlock } from '../../lock-unlock';
 
-function FontFamilies() {
-	const { modalTabOpen, toggleModal, themeFonts, customFonts } =
-		useContext( FontLibraryContext );
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
+function FontFamilies() {
+	const { modalTabOpen, setModalTabOpen } = useContext( FontLibraryContext );
+	const [ fontFamilies ] = useGlobalSetting( 'typography.fontFamilies' );
+	const themeFonts = fontFamilies?.theme
+		? fontFamilies.theme
+				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
+				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		: [];
+	const customFonts = fontFamilies?.custom
+		? fontFamilies.custom
+				.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )
+				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		: [];
 	const hasFonts = 0 < customFonts.length || 0 < themeFonts.length;
 
 	return (
 		<>
 			{ !! modalTabOpen && (
 				<FontLibraryModal
-					onRequestClose={ () => toggleModal() }
+					onRequestClose={ () => setModalTabOpen( null ) }
 					defaultTabId={ modalTabOpen }
 				/>
 			) }
@@ -40,18 +53,12 @@ function FontFamilies() {
 			<VStack spacing={ 2 }>
 				<HStack justify="space-between">
 					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
-					<HStack justify="flex-end">
-						<Tooltip text={ __( 'Manage fonts' ) }>
-							<Button
-								onClick={ () =>
-									toggleModal( 'installed-fonts' )
-								}
-								aria-label={ __( 'Manage fonts' ) }
-								icon={ settings }
-								size={ 'small' }
-							/>
-						</Tooltip>
-					</HStack>
+					<Button
+						onClick={ () => setModalTabOpen( 'installed-fonts' ) }
+						label={ __( 'Manage fonts' ) }
+						icon={ settings }
+						size="small"
+					/>
 				</HStack>
 				{ hasFonts ? (
 					<ItemGroup isBordered isSeparated>
@@ -68,7 +75,7 @@ function FontFamilies() {
 						<Button
 							className="edit-site-global-styles-font-families__add-fonts"
 							variant="secondary"
-							onClick={ () => toggleModal( 'upload-fonts' ) }
+							onClick={ () => setModalTabOpen( 'upload-fonts' ) }
 						>
 							{ __( 'Add fonts' ) }
 						</Button>
diff --git a/packages/edit-site/src/components/global-styles/font-family-item.js b/packages/edit-site/src/components/global-styles/font-family-item.js
index fc5418d5c7eb1..b80865fd2e21a 100644
--- a/packages/edit-site/src/components/global-styles/font-family-item.js
+++ b/packages/edit-site/src/components/global-styles/font-family-item.js
@@ -16,14 +16,14 @@ import { FontLibraryContext } from './font-library-modal/context';
 import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
 
 function FontFamilyItem( { font } ) {
-	const { handleSetLibraryFontSelected, toggleModal } =
+	const { handleSetLibraryFontSelected, setModalTabOpen } =
 		useContext( FontLibraryContext );
 
 	const variantsCount = font?.fontFace?.length || 1;
 
 	const handleClick = () => {
 		handleSetLibraryFontSelected( font );
-		toggleModal( 'installed-fonts' );
+		setModalTabOpen( 'installed-fonts' );
 	};
 
 	const previewStyle = getFamilyPreviewStyle( font );
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
index 6cc56b0a542f3..0719cb873f8f7 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
@@ -14,6 +14,8 @@ import { getFontFaceVariantName } from './utils';
 import FontDemo from './font-demo';
 import { unlock } from '../../../lock-unlock';
 
+const { kebabCase } = unlock( componentsPrivateApis );
+
 function CollectionFontVariant( {
 	face,
 	font,
@@ -29,7 +31,6 @@ function CollectionFontVariant( {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
-	const { kebabCase } = unlock( componentsPrivateApis );
 	const checkboxId = kebabCase(
 		`${ font.slug }-${ getFontFaceVariantName( face ) }`
 	);
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 9eafabe9424fb..52a40d7dc9070 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
@@ -51,8 +51,6 @@ function FontLibraryProvider( { children } ) {
 		'globalStyles',
 		globalStylesId
 	);
-	const fontFamiliesHasChanges =
-		!! globalStyles?.edits?.settings?.typography?.fontFamilies;
 
 	const [ isInstalling, setIsInstalling ] = useState( false );
 	const [ refreshKey, setRefreshKey ] = useState( 0 );
@@ -62,14 +60,11 @@ function FontLibraryProvider( { children } ) {
 		setRefreshKey( Date.now() );
 	};
 
-	const {
-		records: libraryPosts = [],
-		isResolving: isResolvingLibrary,
-		hasResolved: hasResolvedLibrary,
-	} = useEntityRecords( 'postType', 'wp_font_family', {
-		refreshKey,
-		_embed: true,
-	} );
+	const { records: libraryPosts = [], isResolving: isResolvingLibrary } =
+		useEntityRecords( 'postType', 'wp_font_family', {
+			refreshKey,
+			_embed: true,
+		} );
 
 	const libraryFonts =
 		( libraryPosts || [] ).map( ( fontFamilyPost ) => {
@@ -87,12 +82,6 @@ function FontLibraryProvider( { children } ) {
 	const [ fontFamilies, setFontFamilies ] = useGlobalSetting(
 		'typography.fontFamilies'
 	);
-	// theme.json file font families
-	const [ baseFontFamilies ] = useGlobalSetting(
-		'typography.fontFamilies',
-		undefined,
-		'base'
-	);
 
 	/*
 	 * Save the font families to the database.
@@ -131,24 +120,6 @@ function FontLibraryProvider( { children } ) {
 				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
 		: [];
 
-	const themeFontsSlugs = new Set( themeFonts.map( ( f ) => f.slug ) );
-
-	/*
-	 * Base Theme Fonts are the fonts defined in the theme.json *file*.
-	 *
-	 * Uses the fonts from global styles + the ones from the theme.json file that hasn't repeated slugs.
-	 * Avoids inconsistencies with the fonts listed in the font library modal as base (inactivated).
-	 * These inconsistencies can happen when the active theme fonts in global styles aren't defined in theme.json file as when a theme style variation is applied.
-	 */
-	const baseThemeFonts = baseFontFamilies?.theme
-		? themeFonts.concat(
-				baseFontFamilies.theme
-					.filter( ( f ) => ! themeFontsSlugs.has( f.slug ) )
-					.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
-					.sort( ( a, b ) => a.name.localeCompare( b.name ) )
-		  )
-		: [];
-
 	const customFonts = fontFamilies?.custom
 		? fontFamilies.custom
 				.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )
@@ -187,10 +158,6 @@ function FontLibraryProvider( { children } ) {
 		} );
 	};
 
-	const toggleModal = ( tabName ) => {
-		setModalTabOpen( tabName || null );
-	};
-
 	// Demo
 	const [ loadedFontUrls ] = useState( new Set() );
 
@@ -549,9 +516,6 @@ function FontLibraryProvider( { children } ) {
 				libraryFontSelected,
 				handleSetLibraryFontSelected,
 				fontFamilies,
-				themeFonts,
-				baseThemeFonts,
-				customFonts,
 				baseCustomFonts,
 				isFontActivated,
 				getFontFacesActivated,
@@ -561,14 +525,12 @@ function FontLibraryProvider( { children } ) {
 				toggleActivateFont,
 				getAvailableFontsOutline,
 				modalTabOpen,
-				toggleModal,
+				setModalTabOpen,
 				refreshLibrary,
 				notice,
 				setNotice,
 				saveFontFamilies,
-				fontFamiliesHasChanges,
 				isResolvingLibrary,
-				hasResolvedLibrary,
 				isInstalling,
 				collections,
 				getFontCollection,
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 7d89a92cb44ba..db9e3cb402561 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
@@ -24,7 +24,7 @@ import {
 	Button,
 	DropdownMenu,
 	SearchControl,
-	privateApis as componentsPrivateApis,
+	ProgressBar,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x } from '@wordpress/i18n';
@@ -45,8 +45,6 @@ import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
 import { downloadFontFaceAssets } from './utils';
 import { sortFontFaces } from './utils/sort-font-faces';
 import CollectionFontVariant from './collection-font-variant';
-import { unlock } from '../../../lock-unlock';
-const { ProgressBar } = unlock( componentsPrivateApis );
 
 const DEFAULT_CATEGORY = {
 	slug: 'all',
@@ -352,7 +350,7 @@ function FontCollection( { slug } ) {
 												font={
 													font.font_family_settings
 												}
-												navigatorPath={ '/fontFamily' }
+												navigatorPath="/fontFamily"
 												onClick={ () => {
 													setSelectedFont(
 														font.font_family_settings
@@ -504,7 +502,7 @@ function FontCollection( { slug } ) {
 														parseInt( newPage )
 													)
 												}
-												size={ 'compact' }
+												size="compact"
 												__nextHasNoMarginBottom
 											/>
 										),
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 cdc81aa09b737..fd962618b510a 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
@@ -15,29 +15,31 @@ import {
 	__experimentalVStack as VStack,
 	Flex,
 	Notice,
-	privateApis as componentsPrivateApis,
+	ProgressBar,
 } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
+import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useContext, useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { chevronLeft } from '@wordpress/icons';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../../lock-unlock';
 import { FontLibraryContext } from './context';
 import FontCard from './font-card';
 import LibraryFontVariant from './library-font-variant';
 import { sortFontFaces } from './utils/sort-font-faces';
-const { ProgressBar } = unlock( componentsPrivateApis );
+import { setUIValuesNeeded } from './utils';
+import { unlock } from '../../../lock-unlock';
+
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
 function InstalledFonts() {
 	const {
 		baseCustomFonts,
 		libraryFontSelected,
-		baseThemeFonts,
 		handleSetLibraryFontSelected,
 		refreshLibrary,
 		uninstallFontFamily,
@@ -45,12 +47,44 @@ function InstalledFonts() {
 		isInstalling,
 		saveFontFamilies,
 		getFontFacesActivated,
-		fontFamiliesHasChanges,
 		notice,
 		setNotice,
 		fontFamilies,
 	} = useContext( FontLibraryContext );
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
+	const [ baseFontFamilies ] = useGlobalSetting(
+		'typography.fontFamilies',
+		undefined,
+		'base'
+	);
+	const globalStylesId = useSelect( ( select ) => {
+		const { __experimentalGetCurrentGlobalStylesId } = select( coreStore );
+		return __experimentalGetCurrentGlobalStylesId();
+	} );
+
+	const globalStyles = useEntityRecord(
+		'root',
+		'globalStyles',
+		globalStylesId
+	);
+	const fontFamiliesHasChanges =
+		!! globalStyles?.edits?.settings?.typography?.fontFamilies;
+
+	const themeFonts = fontFamilies?.theme
+		? fontFamilies.theme
+				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
+				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		: [];
+	const themeFontsSlugs = new Set( themeFonts.map( ( f ) => f.slug ) );
+	const baseThemeFonts = baseFontFamilies?.theme
+		? themeFonts.concat(
+				baseFontFamilies.theme
+					.filter( ( f ) => ! themeFontsSlugs.has( f.slug ) )
+					.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
+					.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		  )
+		: [];
+
 	const customFontFamilyId =
 		libraryFontSelected?.source === 'custom' && libraryFontSelected?.id;
 
@@ -156,9 +190,7 @@ function InstalledFonts() {
 												>
 													<FontCard
 														font={ font }
-														navigatorPath={
-															'/fontFamily'
-														}
+														navigatorPath="/fontFamily"
 														variantsText={ getFontCardVariantsText(
 															font
 														) }
@@ -195,9 +227,7 @@ function InstalledFonts() {
 												>
 													<FontCard
 														font={ font }
-														navigatorPath={
-															'/fontFamily'
-														}
+														navigatorPath="/fontFamily"
 														variantsText={ getFontCardVariantsText(
 															font
 														) }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
index b994d1f4c1e6b..2f84bd1f2c749 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
@@ -16,6 +16,8 @@ import { FontLibraryContext } from './context';
 import FontDemo from './font-demo';
 import { unlock } from '../../../lock-unlock';
 
+const { kebabCase } = unlock( componentsPrivateApis );
+
 function LibraryFontVariant( { face, font } ) {
 	const { isFontActivated, toggleActivateFont } =
 		useContext( FontLibraryContext );
@@ -39,7 +41,6 @@ function LibraryFontVariant( { face, font } ) {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
-	const { kebabCase } = unlock( componentsPrivateApis );
 	const checkboxId = kebabCase(
 		`${ font.slug }-${ getFontFaceVariantName( face ) }`
 	);
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 c8710c9111100..5e8cfdec21517 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
@@ -11,7 +11,7 @@ import {
 	Notice,
 	FormFileUpload,
 	FlexItem,
-	privateApis as componentsPrivateApis,
+	ProgressBar,
 } from '@wordpress/components';
 import { useContext, useState } from '@wordpress/element';
 
@@ -23,9 +23,6 @@ import { FontLibraryContext } from './context';
 import { Font } from '../../../../lib/lib-font.browser';
 import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
-import { unlock } from '../../../lock-unlock';
-
-const { ProgressBar } = unlock( componentsPrivateApis );
 
 function UploadFonts() {
 	const { installFonts, notice, setNotice } =
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js
index bd97b5b7fdcdd..1ca7bb68c87a0 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js
@@ -15,6 +15,7 @@ import { formatFontFaceName } from './preview-styles';
  * Browser dependencies
  */
 const { File } = window;
+const { kebabCase } = unlock( componentsPrivateApis );
 
 export function setUIValuesNeeded( font, extraValues = {} ) {
 	if ( ! font.name && ( font.fontFamily || font.slug ) ) {
@@ -184,7 +185,6 @@ export function getDisplaySrcFromFontFace( input ) {
 
 export function makeFontFamilyFormData( fontFamily ) {
 	const formData = new FormData();
-	const { kebabCase } = unlock( componentsPrivateApis );
 
 	const { fontFace, category, ...familyWithValidParameters } = fontFamily;
 	const fontFamilySettings = {
diff --git a/packages/edit-site/src/components/global-styles/gradients-palette-panel.js b/packages/edit-site/src/components/global-styles/gradients-palette-panel.js
index 9ebc66c87c347..00eb8db83578d 100644
--- a/packages/edit-site/src/components/global-styles/gradients-palette-panel.js
+++ b/packages/edit-site/src/components/global-styles/gradients-palette-panel.js
@@ -71,7 +71,7 @@ export default function GradientPalettePanel( { name } ) {
 	return (
 		<VStack
 			className="edit-site-global-styles-gradient-palette-panel"
-			spacing={ 10 }
+			spacing={ 8 }
 		>
 			{ !! themeGradients && !! themeGradients.length && (
 				<PaletteEdit
@@ -102,9 +102,6 @@ export default function GradientPalettePanel( { name } ) {
 				onChange={ setCustomGradients }
 				paletteLabel={ __( 'Custom' ) }
 				paletteLabelLevel={ 3 }
-				emptyMessage={ __(
-					'Custom gradients are empty! Add some gradients to create your own palette.'
-				) }
 				slugPrefix="custom-"
 				popoverProps={ popoverProps }
 			/>
diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
index 6ecb1de03a144..5bc823a81dbf7 100644
--- a/packages/edit-site/src/components/global-styles/hooks.js
+++ b/packages/edit-site/src/components/global-styles/hooks.js
@@ -9,21 +9,16 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { useContext } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from './global-styles-provider';
 import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
-import { getFontFamilies } from './utils';
 import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
 
-const { useGlobalSetting, useGlobalStyle, GlobalStylesContext } = unlock(
-	blockEditorPrivateApis
-);
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
@@ -141,38 +136,17 @@ export function useTypographyVariations() {
 		useCurrentMergeThemeStyleVariationsWithUserConfig( {
 			property: 'typography',
 		} );
-
-	const { base } = useContext( GlobalStylesContext );
 	/*
-	 * Filter duplicate variations based on whether the variaitons
-	 * have different heading and body font families.
+	 * Filter out variations with no settings or styles.
 	 */
 	return typographyVariations?.length
-		? Object.values(
-				typographyVariations.reduce( ( acc, variation ) => {
-					const [ bodyFontFamily, headingFontFamily ] =
-						getFontFamilies(
-							mergeBaseAndUserConfigs( base, variation )
-						);
-
-					// Always preseve the default variation.
-					if ( variation?.title === 'Default' ) {
-						acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						] = variation;
-					} else if (
-						headingFontFamily?.name &&
-						bodyFontFamily?.name &&
-						! acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						]
-					) {
-						acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						] = variation;
-					}
-					return acc;
-				}, {} )
-		  )
+		? typographyVariations.filter( ( variation ) => {
+				const { settings, styles, title } = variation;
+				return (
+					title === __( 'Default' ) || // Always preseve the default variation.
+					Object.keys( settings ).length > 0 ||
+					Object.keys( styles ).length > 0
+				);
+		  } )
 		: [];
 }
diff --git a/packages/edit-site/src/components/global-styles/icon-with-current-color.js b/packages/edit-site/src/components/global-styles/icon-with-current-color.js
index f20289d90363b..2c6f2245c8425 100644
--- a/packages/edit-site/src/components/global-styles/icon-with-current-color.js
+++ b/packages/edit-site/src/components/global-styles/icon-with-current-color.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { Icon } from '@wordpress/components';
 export function IconWithCurrentColor( { className, ...props } ) {
 	return (
 		<Icon
-			className={ classnames(
+			className={ clsx(
 				className,
 				'edit-site-global-styles-icon-with-current-color'
 			) }
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index 3d35397a63b0a..e85c0e9331402 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -10,8 +10,8 @@ import {
 	ColorIndicator,
 	Button,
 } from '@wordpress/components';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import { shuffle } from '@wordpress/icons';
+import { isRTL, __ } from '@wordpress/i18n';
+import { Icon, shuffle, chevronLeft, chevronRight } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -55,13 +55,7 @@ function Palette( { name } ) {
 		? '/colors/palette'
 		: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';
 	const paletteButtonText =
-		colors.length > 0
-			? sprintf(
-					// Translators: %d: Number of palette colors.
-					_n( '%d color', '%d colors', colors.length ),
-					colors.length
-			  )
-			: __( 'Add custom colors' );
+		colors.length > 0 ? __( 'Edit palette' ) : __( 'Add colors' );
 
 	return (
 		<VStack spacing={ 3 }>
@@ -69,13 +63,12 @@ function Palette( { name } ) {
 			<ItemGroup isBordered isSeparated>
 				<NavigationButtonAsItem
 					path={ screenPath }
-					aria-label={ __( 'Color palettes' ) }
+					aria-label={ paletteButtonText }
 				>
-					<HStack
-						direction={
-							colors.length === 0 ? 'row-reverse' : 'row'
-						}
-					>
+					<HStack direction="row">
+						{ colors.length <= 0 && (
+							<FlexItem>{ __( 'Add colors' ) }</FlexItem>
+						) }
 						<ZStack isLayered={ false } offset={ -8 }>
 							{ colors
 								.slice( 0, 5 )
@@ -87,9 +80,7 @@ function Palette( { name } ) {
 									</ColorIndicatorWrapper>
 								) ) }
 						</ZStack>
-						<FlexItem className="edit-site-global-styles-screen-colors__palette-count">
-							{ paletteButtonText }
-						</FlexItem>
+						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
 					</HStack>
 				</NavigationButtonAsItem>
 			</ItemGroup>
diff --git a/packages/edit-site/src/components/global-styles/preset-colors.js b/packages/edit-site/src/components/global-styles/preset-colors.js
new file mode 100644
index 0000000000000..c24b5ea3c75e0
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/preset-colors.js
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import { useStylesPreviewColors } from './hooks';
+
+export default function PresetColors() {
+	const { paletteColors } = useStylesPreviewColors();
+	return paletteColors.slice( 0, 5 ).map( ( { slug, color }, index ) => (
+		<div
+			key={ `${ slug }-${ index }` }
+			style={ {
+				flexGrow: 1,
+				height: '100%',
+				background: color,
+			} }
+		/>
+	) );
+}
diff --git a/packages/edit-site/src/components/global-styles/preview-colors.js b/packages/edit-site/src/components/global-styles/preview-colors.js
index 2bead7ad2460b..8c1008330ec06 100644
--- a/packages/edit-site/src/components/global-styles/preview-colors.js
+++ b/packages/edit-site/src/components/global-styles/preview-colors.js
@@ -9,7 +9,7 @@ import {
 /**
  * Internal dependencies
  */
-import HighlightedColors from './highlighted-colors';
+import PresetColors from './preset-colors';
 import PreviewIframe from './preview-iframe';
 
 const firstFrameVariants = {
@@ -30,7 +30,7 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
 			isFocused={ isFocused }
 			withHoverView={ withHoverView }
 		>
-			{ ( { ratio, key } ) => (
+			{ ( { key } ) => (
 				<motion.div
 					key={ key }
 					variants={ firstFrameVariants }
@@ -40,17 +40,14 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
 					} }
 				>
 					<HStack
-						spacing={ 5 * ratio }
+						spacing={ 0 }
 						justify="center"
 						style={ {
 							height: '100%',
 							overflow: 'hidden',
 						} }
 					>
-						<HighlightedColors
-							normalizedColorSwatchSize={ 56 }
-							ratio={ ratio }
-						/>
+						<PresetColors />
 					</HStack>
 				</motion.div>
 			) }
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 c747efee635d8..6db4621299f1e 100644
--- a/packages/edit-site/src/components/global-styles/root-menu.js
+++ b/packages/edit-site/src/components/global-styles/root-menu.js
@@ -2,7 +2,12 @@
  * WordPress dependencies
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { typography, color, layout, image } from '@wordpress/icons';
+import {
+	typography,
+	color,
+	layout,
+	shadow as shadowIcon,
+} from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -18,7 +23,6 @@ const {
 	useHasColorPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
-	useHasBackgroundPanel,
 } = unlock( blockEditorPrivateApis );
 
 function RootMenu() {
@@ -26,9 +30,9 @@ function RootMenu() {
 	const settings = useSettingsForBlockElement( rawSettings );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );
+	const hasShadowPanel = true; // useHasShadowPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasDimensionsPanel;
-	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 
 	return (
 		<>
@@ -51,6 +55,15 @@ function RootMenu() {
 						{ __( 'Colors' ) }
 					</NavigationButtonAsItem>
 				) }
+				{ hasShadowPanel && (
+					<NavigationButtonAsItem
+						icon={ shadowIcon }
+						path="/shadows"
+						aria-label={ __( 'Shadow styles' ) }
+					>
+						{ __( 'Shadows' ) }
+					</NavigationButtonAsItem>
+				) }
 				{ hasLayoutPanel && (
 					<NavigationButtonAsItem
 						icon={ layout }
@@ -60,15 +73,6 @@ function RootMenu() {
 						{ __( 'Layout' ) }
 					</NavigationButtonAsItem>
 				) }
-				{ hasBackgroundPanel && (
-					<NavigationButtonAsItem
-						icon={ image }
-						path="/background"
-						aria-label={ __( 'Background image styles' ) }
-					>
-						{ __( 'Background image' ) }
-					</NavigationButtonAsItem>
-				) }
 			</ItemGroup>
 		</>
 	);
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 9811f10b834da..2368f7499acbf 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -235,7 +235,7 @@ function ScreenBlock( { name, variation } ) {
 	return (
 		<>
 			<ScreenHeader
-				title={ variation ? currentBlockStyle.label : blockType.title }
+				title={ variation ? currentBlockStyle?.label : blockType.title }
 			/>
 			<BlockPreviewPanel name={ name } variation={ variation } />
 			{ hasVariationsPanel && (
diff --git a/packages/edit-site/src/components/global-styles/screen-color-palette.js b/packages/edit-site/src/components/global-styles/screen-color-palette.js
index f06db2eeae070..6d3bd6b2e130d 100644
--- a/packages/edit-site/src/components/global-styles/screen-color-palette.js
+++ b/packages/edit-site/src/components/global-styles/screen-color-palette.js
@@ -18,17 +18,17 @@ function ScreenColorPalette( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				title={ __( 'Palette' ) }
+				title={ __( 'Edit palette' ) }
 				description={ __(
-					'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'
+					'The combination of colors used across the site and in color pickers.'
 				) }
 			/>
 			<Tabs>
 				<Tabs.TabList>
-					<Tabs.Tab tabId="solid">{ __( 'Solid' ) }</Tabs.Tab>
+					<Tabs.Tab tabId="color">{ __( 'Color' ) }</Tabs.Tab>
 					<Tabs.Tab tabId="gradient">{ __( 'Gradient' ) }</Tabs.Tab>
 				</Tabs.TabList>
-				<Tabs.TabPanel tabId="solid" focusable={ false }>
+				<Tabs.TabPanel tabId="color" focusable={ false }>
 					<ColorPalettePanel name={ name } />
 				</Tabs.TabPanel>
 				<Tabs.TabPanel tabId="gradient" focusable={ false }>
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index 2083b5d708e09..2f0aaf2d70101 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -11,7 +11,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import ScreenHeader from './header';
 import Palette from './palette';
 import { unlock } from '../../lock-unlock';
-import ColorVariations from './variations/variations-color';
 
 const {
 	useGlobalStyle,
@@ -40,7 +39,6 @@ function ScreenColors() {
 			/>
 			<div className="edit-site-global-styles-screen">
 				<VStack spacing={ 7 }>
-					<ColorVariations title={ __( 'Presets' ) } />
 					<Palette />
 					<StylesColorPanel
 						inheritedValue={ inheritedStyle }
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 71d47a52a5027..e49207aaea224 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,7 @@ function ScreenCSS() {
 					<>
 						{ description }
 						<ExternalLink
-							href="https://wordpress.org/documentation/article/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 e7794985b7984..61c64b88f0e48 100644
--- a/packages/edit-site/src/components/global-styles/screen-layout.js
+++ b/packages/edit-site/src/components/global-styles/screen-layout.js
@@ -8,20 +8,27 @@ 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 { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =
-	unlock( blockEditorPrivateApis );
+const {
+	useHasBackgroundPanel,
+	useHasDimensionsPanel,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+} = unlock( blockEditorPrivateApis );
 
 function ScreenLayout() {
 	const [ rawSettings ] = useGlobalSetting( '' );
 	const settings = useSettingsForBlockElement( rawSettings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 	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 6a20e23c91674..e4ffb20996418 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
@@ -84,6 +84,7 @@ function ScreenRevisions() {
 		setUserConfig( () => ( {
 			styles: revision?.styles,
 			settings: revision?.settings,
+			_links: revision?._links,
 		} ) );
 		setIsLoadingRevisionWithUnsavedChanges( false );
 		onCloseRevisions();
@@ -91,8 +92,13 @@ function ScreenRevisions() {
 
 	const selectRevision = ( revision ) => {
 		setCurrentlySelectedRevision( {
+			/*
+			 * The default must be an empty object so that
+			 * `mergeBaseAndUserConfigs()` can merge them correctly.
+			 */
 			styles: revision?.styles || {},
 			settings: revision?.settings || {},
+			_links: revision?._links || {},
 			id: revision?.id,
 		} );
 	};
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 0670710de2e3b..7f4f9896344b4 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
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -150,7 +150,7 @@ function RevisionsButtons( {
 
 				return (
 					<li
-						className={ classnames(
+						className={ clsx(
 							'edit-site-global-styles-screen-revisions__revision-item',
 							{
 								'is-selected': isSelected,
@@ -163,6 +163,7 @@ function RevisionsButtons( {
 					>
 						<Button
 							className="edit-site-global-styles-screen-revisions__revision-button"
+							__experimentalIsFocusable
 							disabled={ isSelected }
 							onClick={ () => {
 								onChange( revision );
@@ -219,7 +220,6 @@ function RevisionsButtons( {
 								</p>
 							) : (
 								<Button
-									disabled={ areStylesEqual }
 									size="compact"
 									variant="primary"
 									className="edit-site-global-styles-screen-revisions__apply-button"
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 dfe30c9bee33d..e19876f98ee1f 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
@@ -180,7 +180,8 @@
 		margin-bottom: $grid-unit-05;
 		line-height: 1.2;
 	}
-	.components-button.is-tertiary:disabled {
+	.components-button.is-tertiary:disabled,
+	.components-button.is-tertiary[aria-disabled="true"] {
 		color: $gray-600;
 	}
 	.components-button.is-tertiary:hover {
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js b/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js
index 2cd0b3b7bdea6..024fb74ef97cf 100644
--- a/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js
@@ -119,6 +119,7 @@ export default function useGlobalStylesRevisions( { query } = {} ) {
 					id: 'unsaved',
 					styles: userConfig?.styles,
 					settings: userConfig?.settings,
+					_links: userConfig?._links,
 					author: {
 						name: currentUser?.name,
 						avatar_urls: currentUser?.avatar_urls,
diff --git a/packages/edit-site/src/components/global-styles/screen-shadows.js b/packages/edit-site/src/components/global-styles/screen-shadows.js
new file mode 100644
index 0000000000000..3645787f9a77f
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-shadows.js
@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import ShadowsPanel from './shadows-panel';
+import ShadowsEditPanel from './shadows-edit-panel';
+
+export function ScreenShadows() {
+	return <ShadowsPanel />;
+}
+
+export function ScreenShadowsEdit() {
+	return <ShadowsEditPanel />;
+}
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index c2a2776ac94d8..08472325ebc1f 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -31,10 +31,10 @@ function ScreenTypography() {
 			/>
 			<div className="edit-site-global-styles-screen">
 				<VStack spacing={ 7 }>
-					<TypographyVariations title={ __( 'Presets' ) } />
 					{ ! window.__experimentalDisableFontLibrary &&
 						fontLibraryEnabled && <FontFamilies /> }
 					<TypographyElements />
+					<TypographyVariations title={ __( 'Presets' ) } />
 				</VStack>
 			</div>
 		</>
diff --git a/packages/edit-site/src/components/global-styles/shadow-utils.js b/packages/edit-site/src/components/global-styles/shadow-utils.js
new file mode 100644
index 0000000000000..a98f6306bb3f3
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/shadow-utils.js
@@ -0,0 +1,158 @@
+export const CUSTOM_VALUE_SETTINGS = {
+	px: { max: 20, step: 1 },
+	'%': { max: 100, step: 1 },
+	vw: { max: 100, step: 1 },
+	vh: { max: 100, step: 1 },
+	em: { max: 10, step: 0.1 },
+	rm: { max: 10, step: 0.1 },
+	svw: { max: 100, step: 1 },
+	lvw: { max: 100, step: 1 },
+	dvw: { max: 100, step: 1 },
+	svh: { max: 100, step: 1 },
+	lvh: { max: 100, step: 1 },
+	dvh: { max: 100, step: 1 },
+	vi: { max: 100, step: 1 },
+	svi: { max: 100, step: 1 },
+	lvi: { max: 100, step: 1 },
+	dvi: { max: 100, step: 1 },
+	vb: { max: 100, step: 1 },
+	svb: { max: 100, step: 1 },
+	lvb: { max: 100, step: 1 },
+	dvb: { max: 100, step: 1 },
+	vmin: { max: 100, step: 1 },
+	svmin: { max: 100, step: 1 },
+	lvmin: { max: 100, step: 1 },
+	dvmin: { max: 100, step: 1 },
+	vmax: { max: 100, step: 1 },
+	svmax: { max: 100, step: 1 },
+	lvmax: { max: 100, step: 1 },
+	dvmax: { max: 100, step: 1 },
+};
+
+export function getShadowParts( shadow ) {
+	const shadowValues = shadow.match( /(?:[^,(]|\([^)]*\))+/g ) || [];
+	return shadowValues.map( ( value ) => value.trim() );
+}
+
+export function shadowStringToObject( shadowValue ) {
+	/*
+	 * Shadow spec: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+	 * Shadow string format: <offset-x> <offset-y> <blur-radius> <spread-radius> <color> [inset]
+	 *
+	 * A shadow to be valid it must satisfy the following.
+	 *
+	 * 1. Should not contain "none" keyword.
+	 * 2. Values x, y, blur, spread should be in the order. Color and inset can be anywhere in the string except in between x, y, blur, spread values.
+	 * 3. Should not contain more than one set of x, y, blur, spread values.
+	 * 4. Should contain at least x and y values. Others are optional.
+	 * 5. Should not contain more than one "inset" (case insensitive) keyword.
+	 * 6. Should not contain more than one color value.
+	 */
+
+	const defaultShadow = {
+		x: '0',
+		y: '0',
+		blur: '0',
+		spread: '0',
+		color: '#000',
+		inset: false,
+	};
+
+	if ( ! shadowValue ) {
+		return defaultShadow;
+	}
+
+	// Rule 1: Should not contain "none" keyword.
+	// if the shadow has "none" keyword, it is not a valid shadow string
+	if ( shadowValue.includes( 'none' ) ) {
+		return defaultShadow;
+	}
+
+	// Rule 2: Values x, y, blur, spread should be in the order.
+	//		   Color and inset can be anywhere in the string except in between x, y, blur, spread values.
+	// Extract length values (x, y, blur, spread) from shadow string
+	// Regex match groups of 1 to 4 length values.
+	const lengthsRegex =
+		/((?:^|\s+)(-?\d*\.?\d+(?:px|%|in|cm|mm|em|rem|ex|pt|pc|vh|vw|vmin|vmax|ch|lh)?)(?=\s|$)(?![^(]*\))){1,4}/g;
+	const matches = shadowValue.match( lengthsRegex ) || [];
+
+	// Rule 3: Should not contain more than one set of x, y, blur, spread values.
+	// if the string doesn't contain exactly 1 set of x, y, blur, spread values,
+	// it is not a valid shadow string
+	if ( matches.length !== 1 ) {
+		return defaultShadow;
+	}
+
+	// Extract length values (x, y, blur, spread) from shadow string
+	const lengths = matches[ 0 ]
+		.split( ' ' )
+		.map( ( value ) => value.trim() )
+		.filter( ( value ) => value );
+
+	// Rule 4: Should contain at least x and y values. Others are optional.
+	if ( lengths.length < 2 ) {
+		return defaultShadow;
+	}
+
+	// Rule 5: Should not contain more than one "inset" (case insensitive) keyword.
+	// check if the shadow string contains "inset" keyword
+	const insets = shadowValue.match( /inset/gi ) || [];
+	if ( insets.length > 1 ) {
+		return defaultShadow;
+	}
+
+	// Strip lengths and inset from shadow string, leaving just color.
+	const hasInset = insets.length === 1;
+	let colorString = shadowValue.replace( lengthsRegex, '' ).trim();
+	if ( hasInset ) {
+		colorString = colorString
+			.replace( 'inset', '' )
+			.replace( 'INSET', '' )
+			.trim();
+	}
+
+	// Rule 6: Should not contain more than one color value.
+	// validate color string with regular expression
+	// check if color has matching hex, rgb or hsl values
+	const colorRegex =
+		/^#([0-9a-f]{3}){1,2}$|^#([0-9a-f]{4}){1,2}$|^(?:rgb|hsl)a?\(?[\d*\.?\d+%?,?\/?\s]*\)$/gi;
+	let colorMatches = ( colorString.match( colorRegex ) || [] )
+		.map( ( value ) => value?.trim() )
+		.filter( ( value ) => value );
+
+	// If color string has more than one color values, it is not a valid
+	if ( colorMatches.length > 1 ) {
+		return defaultShadow;
+	} else if ( colorMatches.length === 0 ) {
+		// check if color string has multiple named color values separated by space
+		colorMatches = colorString
+			.trim()
+			.split( ' ' )
+			.filter( ( value ) => value );
+		// If color string has more than one color values, it is not a valid
+		if ( colorMatches.length > 1 ) {
+			return defaultShadow;
+		}
+	}
+
+	// Return parsed shadow object.
+	const [ x, y, blur, spread ] = lengths;
+	return {
+		x,
+		y,
+		blur: blur || defaultShadow.blur,
+		spread: spread || defaultShadow.spread,
+		inset: hasInset,
+		color: colorString || defaultShadow.color,
+	};
+}
+
+export function shadowObjectToString( shadowObj ) {
+	const shadowString = `${ shadowObj.x || '0px' } ${ shadowObj.y || '0px' } ${
+		shadowObj.blur || '0px'
+	} ${ shadowObj.spread || '0px' }`;
+
+	return `${ shadowObj.inset ? 'inset' : '' } ${ shadowString } ${
+		shadowObj.color || ''
+	}`.trim();
+}
diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
new file mode 100644
index 0000000000000..443d72deb9573
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
@@ -0,0 +1,555 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__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,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalConfirmDialog as ConfirmDialog,
+	Dropdown,
+	RangeControl,
+	Button,
+	Flex,
+	FlexItem,
+	ColorPalette,
+	Modal,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	plus,
+	shadow as shadowIcon,
+	reset,
+	settings,
+	moreVertical,
+} from '@wordpress/icons';
+import { useState, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import Subtitle from './subtitle';
+import ScreenHeader from './header';
+import { defaultShadow } from './shadows-panel';
+import {
+	getShadowParts,
+	shadowStringToObject,
+	shadowObjectToString,
+	CUSTOM_VALUE_SETTINGS,
+} from './shadow-utils';
+
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+} = unlock( componentsPrivateApis );
+
+const customShadowMenuItems = [
+	{
+		label: __( 'Rename' ),
+		action: 'rename',
+	},
+	{
+		label: __( 'Delete' ),
+		action: 'delete',
+	},
+];
+
+const presetShadowMenuItems = [
+	{
+		label: __( 'Reset' ),
+		action: 'reset',
+	},
+];
+
+export default function ShadowsEditPanel() {
+	const {
+		params: { category, slug },
+		goTo,
+	} = useNavigator();
+	const [ shadows, setShadows ] = useGlobalSetting(
+		`shadow.presets.${ category }`
+	);
+	const [ baseShadows ] = useGlobalSetting(
+		`shadow.presets.${ category }`,
+		undefined,
+		'base'
+	);
+	const [ selectedShadow, setSelectedShadow ] = useState( () =>
+		( shadows || [] ).find( ( shadow ) => shadow.slug === slug )
+	);
+	const baseSelectedShadow = useMemo(
+		() => ( baseShadows || [] ).find( ( b ) => b.slug === slug ),
+		[ baseShadows, slug ]
+	);
+	const [ isConfirmDialogVisible, setIsConfirmDialogVisible ] =
+		useState( false );
+	const [ isRenameModalVisible, setIsRenameModalVisible ] = useState( false );
+	const [ shadowName, setShadowName ] = useState( selectedShadow.name );
+
+	const onShadowChange = ( shadow ) => {
+		setSelectedShadow( { ...selectedShadow, shadow } );
+		const updatedShadows = shadows.map( ( s ) =>
+			s.slug === slug ? { ...selectedShadow, shadow } : s
+		);
+		setShadows( updatedShadows );
+	};
+
+	const onMenuClick = ( action ) => {
+		if ( action === 'reset' ) {
+			const updatedShadows = shadows.map( ( s ) =>
+				s.slug === slug ? baseSelectedShadow : s
+			);
+			setSelectedShadow( baseSelectedShadow );
+			setShadows( updatedShadows );
+		} else if ( action === 'delete' ) {
+			setIsConfirmDialogVisible( true );
+		} else if ( action === 'rename' ) {
+			setIsRenameModalVisible( true );
+		}
+	};
+
+	const handleShadowDelete = () => {
+		const updatedShadows = shadows.filter( ( s ) => s.slug !== slug );
+		setShadows( updatedShadows );
+		goTo( `/shadows` );
+	};
+
+	const handleShadowRename = ( newName ) => {
+		if ( ! newName ) {
+			return;
+		}
+		const updatedShadows = shadows.map( ( s ) =>
+			s.slug === slug ? { ...selectedShadow, name: newName } : s
+		);
+		setSelectedShadow( { ...selectedShadow, name: newName } );
+		setShadows( updatedShadows );
+	};
+
+	return ! selectedShadow ? (
+		<ScreenHeader title="" />
+	) : (
+		<>
+			<HStack justify="space-between">
+				<ScreenHeader title={ selectedShadow.name } />
+				<FlexItem>
+					<Spacer marginTop={ 2 } marginBottom={ 0 } paddingX={ 4 }>
+						<DropdownMenu
+							trigger={
+								<Button
+									size="small"
+									icon={ moreVertical }
+									label={ __( 'Menu' ) }
+								/>
+							}
+						>
+							{ ( category === 'custom'
+								? customShadowMenuItems
+								: presetShadowMenuItems
+							).map( ( item ) => (
+								<DropdownMenuItem
+									key={ item.action }
+									onClick={ () => onMenuClick( item.action ) }
+									disabled={
+										item.action === 'reset' &&
+										selectedShadow.shadow ===
+											baseSelectedShadow.shadow
+									}
+								>
+									<DropdownMenuItemLabel>
+										{ item.label }
+									</DropdownMenuItemLabel>
+								</DropdownMenuItem>
+							) ) }
+						</DropdownMenu>
+					</Spacer>
+				</FlexItem>
+			</HStack>
+			<div className="edit-site-global-styles-screen">
+				<ShadowsPreview shadow={ selectedShadow.shadow } />
+				<ShadowEditor
+					shadow={ selectedShadow.shadow }
+					onChange={ onShadowChange }
+				/>
+			</div>
+			{ isConfirmDialogVisible && (
+				<ConfirmDialog
+					isOpen
+					onConfirm={ () => {
+						handleShadowDelete();
+						setIsConfirmDialogVisible( false );
+					} }
+					onCancel={ () => {
+						setIsConfirmDialogVisible( false );
+					} }
+					confirmButtonText={ __( 'Delete' ) }
+				>
+					{ sprintf(
+						// translators: %s: name of the shadow
+						'Are you sure you want to delete "%s"?',
+						selectedShadow.name
+					) }
+				</ConfirmDialog>
+			) }
+			{ isRenameModalVisible && (
+				<Modal
+					title={ __( 'Rename' ) }
+					onRequestClose={ () => setIsRenameModalVisible( false ) }
+					size="small"
+				>
+					<form
+						onSubmit={ ( event ) => {
+							event.preventDefault();
+							handleShadowRename( shadowName );
+							setIsRenameModalVisible( false );
+						} }
+					>
+						<InputControl
+							autoComplete="off"
+							label={ __( 'Name' ) }
+							placeholder={ __( 'Shadow name' ) }
+							value={ shadowName }
+							onChange={ ( value ) => setShadowName( value ) }
+						/>
+						<Spacer marginBottom={ 6 } />
+						<Flex
+							className="block-editor-shadow-edit-modal__actions"
+							justify="flex-end"
+							expanded={ false }
+						>
+							<FlexItem>
+								<Button
+									variant="tertiary"
+									onClick={ () =>
+										setIsRenameModalVisible( false )
+									}
+								>
+									{ __( 'Cancel' ) }
+								</Button>
+							</FlexItem>
+							<FlexItem>
+								<Button variant="primary" type="submit">
+									{ __( 'Save' ) }
+								</Button>
+							</FlexItem>
+						</Flex>
+					</form>
+				</Modal>
+			) }
+		</>
+	);
+}
+
+function ShadowsPreview( { shadow } ) {
+	const shadowStyle = {
+		boxShadow: shadow,
+	};
+
+	return (
+		<Spacer marginBottom={ 4 } marginTop={ -2 }>
+			<HStack
+				align="center"
+				justify="center"
+				className="edit-site-global-styles__shadow-preview-panel"
+			>
+				<div
+					className="edit-site-global-styles__shadow-preview-block"
+					style={ shadowStyle }
+				/>
+			</HStack>
+		</Spacer>
+	);
+}
+
+function ShadowEditor( { shadow, onChange } ) {
+	const shadowParts = useMemo( () => getShadowParts( shadow ), [ shadow ] );
+
+	const onChangeShadowPart = ( index, part ) => {
+		shadowParts[ index ] = part;
+		onChange( shadowParts.join( ', ' ) );
+	};
+
+	const onAddShadowPart = () => {
+		shadowParts.push( defaultShadow );
+		onChange( shadowParts.join( ', ' ) );
+	};
+
+	const onRemoveShadowPart = ( index ) => {
+		shadowParts.splice( index, 1 );
+		onChange( shadowParts.join( ', ' ) );
+	};
+
+	return (
+		<>
+			<VStack spacing={ 2 }>
+				<HStack justify="space-between">
+					<Flex
+						align="center"
+						className="edit-site-global-styles__shadows-panel__title"
+					>
+						<Subtitle level={ 3 }>{ __( 'Shadows' ) }</Subtitle>
+					</Flex>
+					<FlexItem className="edit-site-global-styles__shadows-panel__options-container">
+						<Button
+							size="small"
+							icon={ plus }
+							label={ __( 'Add shadow' ) }
+							onClick={ () => {
+								onAddShadowPart();
+							} }
+						/>
+					</FlexItem>
+				</HStack>
+			</VStack>
+			<Spacer />
+			<ItemGroup isBordered isSeparated>
+				{ shadowParts.map( ( part, index ) => (
+					<ShadowItem
+						key={ index }
+						shadow={ part }
+						onChange={ ( value ) =>
+							onChangeShadowPart( index, value )
+						}
+						canRemove={ shadowParts.length > 1 }
+						onRemove={ () => onRemoveShadowPart( index ) }
+					/>
+				) ) }
+			</ItemGroup>
+		</>
+	);
+}
+
+function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
+	const popoverProps = {
+		placement: 'left-start',
+		offset: 36,
+		shift: true,
+	};
+	const shadowObj = useMemo(
+		() => shadowStringToObject( shadow ),
+		[ shadow ]
+	);
+	const onShadowChange = ( newShadow ) => {
+		onChange( shadowObjectToString( newShadow ) );
+	};
+
+	return (
+		<Dropdown
+			popoverProps={ popoverProps }
+			className="edit-site-global-styles__shadow-editor__dropdown"
+			renderToggle={ ( { onToggle, isOpen } ) => {
+				const toggleProps = {
+					onClick: onToggle,
+					className: clsx(
+						'edit-site-global-styles__shadow-editor__dropdown-toggle',
+						{ 'is-open': isOpen }
+					),
+					'aria-expanded': isOpen,
+				};
+				const removeButtonProps = {
+					onClick: onRemove,
+					className: clsx(
+						'edit-site-global-styles__shadow-editor__remove-button',
+						{ 'is-open': isOpen }
+					),
+					ariaLabel: __( 'Remove shadow' ),
+					tooltip: __( 'Remove shadow' ),
+				};
+
+				return (
+					<HStack align="center" justify="flex-start" spacing={ 0 }>
+						<FlexItem style={ { flexGrow: 1 } }>
+							<Button icon={ shadowIcon } { ...toggleProps }>
+								{ shadowObj.inset
+									? __( 'Inner shadow' )
+									: __( 'Drop shadow' ) }
+							</Button>
+						</FlexItem>
+						{ canRemove && (
+							<FlexItem>
+								<Button
+									icon={ reset }
+									{ ...removeButtonProps }
+								/>
+							</FlexItem>
+						) }
+					</HStack>
+				);
+			} }
+			renderContent={ () => (
+				<DropdownContentWrapper paddingSize="none">
+					<div className="edit-site-global-styles__shadow-editor__dropdown-content">
+						<ShadowPopover
+							shadowObj={ shadowObj }
+							onChange={ onShadowChange }
+						/>
+					</div>
+				</DropdownContentWrapper>
+			) }
+		/>
+	);
+}
+
+function ShadowPopover( { shadowObj, onChange } ) {
+	const __experimentalIsRenderedInSidebar = true;
+	const enableAlpha = true;
+
+	const onShadowChange = ( key, value ) => {
+		const newShadow = {
+			...shadowObj,
+			[ key ]: value,
+		};
+		onChange( newShadow );
+	};
+
+	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>
+	);
+}
+
+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'
+		);
+	};
+	const onValueChange = ( next ) => {
+		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
+		const nextValue = isNumeric ? next : '0px';
+		onChange( nextValue );
+	};
+
+	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>
+	);
+}
diff --git a/packages/edit-site/src/components/global-styles/shadows-panel.js b/packages/edit-site/src/components/global-styles/shadows-panel.js
new file mode 100644
index 0000000000000..18e15ef7dd6f2
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/shadows-panel.js
@@ -0,0 +1,147 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalItemGroup as ItemGroup,
+	Button,
+	Flex,
+	FlexItem,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { plus, shadow as shadowIcon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import Subtitle from './subtitle';
+import { NavigationButtonAsItem } from './navigation-button';
+import ScreenHeader from './header';
+import { getNewIndexFromPresets } from './utils';
+
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+
+export const defaultShadow = '6px 6px 9px rgba(0, 0, 0, 0.2)';
+
+export default function ShadowsPanel() {
+	const [ defaultShadows ] = useGlobalSetting( 'shadow.presets.default' );
+	const [ defaultShadowsEnabled ] = useGlobalSetting(
+		'shadow.defaultPresets'
+	);
+	const [ themeShadows ] = useGlobalSetting( 'shadow.presets.theme' );
+	const [ customShadows, setCustomShadows ] = useGlobalSetting(
+		'shadow.presets.custom'
+	);
+
+	const onCreateShadow = ( shadow ) => {
+		setCustomShadows( [ ...( customShadows || [] ), shadow ] );
+	};
+
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Shadows' ) }
+				description={ __(
+					'Manage and create shadow styles for use across the site.'
+				) }
+			/>
+			<div className="edit-site-global-styles-screen">
+				<VStack
+					className="edit-site-global-styles__shadows-panel"
+					spacing={ 7 }
+				>
+					{ defaultShadowsEnabled && (
+						<ShadowList
+							label={ __( 'Default' ) }
+							shadows={ defaultShadows || [] }
+							category="default"
+						/>
+					) }
+					{ themeShadows && themeShadows.length > 0 && (
+						<ShadowList
+							label={ __( 'Theme' ) }
+							shadows={ themeShadows || [] }
+							category="theme"
+						/>
+					) }
+					<ShadowList
+						label={ __( 'Custom' ) }
+						shadows={ customShadows || [] }
+						category="custom"
+						canCreate
+						onCreate={ onCreateShadow }
+					/>
+				</VStack>
+			</div>
+		</>
+	);
+}
+
+function ShadowList( { label, shadows, category, canCreate, onCreate } ) {
+	const handleAddShadow = () => {
+		const newIndex = getNewIndexFromPresets( shadows, 'shadow-' );
+		onCreate( {
+			name: sprintf(
+				/* translators: %s: is an index for a preset */
+				__( 'Shadow %s' ),
+				newIndex
+			),
+			shadow: defaultShadow,
+			slug: `shadow-${ newIndex }`,
+		} );
+	};
+
+	return (
+		<VStack spacing={ 2 }>
+			<HStack justify="space-between">
+				<Flex
+					align="center"
+					className="edit-site-global-styles__shadows-panel__title"
+				>
+					<Subtitle level={ 3 }>{ label }</Subtitle>
+				</Flex>
+				{ canCreate && (
+					<FlexItem className="edit-site-global-styles__shadows-panel__options-container">
+						<Button
+							size="small"
+							icon={ plus }
+							label={ __( 'Add shadow' ) }
+							onClick={ () => {
+								handleAddShadow();
+							} }
+						/>
+					</FlexItem>
+				) }
+			</HStack>
+			{ shadows.length > 0 && (
+				<ItemGroup isBordered isSeparated>
+					{ shadows.map( ( shadow ) => (
+						<ShadowItem
+							key={ shadow.slug }
+							shadow={ shadow }
+							category={ category }
+						/>
+					) ) }
+				</ItemGroup>
+			) }
+		</VStack>
+	);
+}
+
+function ShadowItem( { shadow, category } ) {
+	return (
+		<NavigationButtonAsItem
+			path={ `/shadows/edit/${ category }/${ shadow.slug }` }
+			aria-label={
+				// translators: %s: name of the shadow
+				sprintf( 'Edit shadow %s', shadow.name )
+			}
+			icon={ shadowIcon }
+		>
+			{ shadow.name }
+		</NavigationButtonAsItem>
+	);
+}
diff --git a/packages/edit-site/src/components/global-styles/stories/index.story.js b/packages/edit-site/src/components/global-styles/stories/index.story.js
index f04387295c458..66cf468d5e224 100644
--- a/packages/edit-site/src/components/global-styles/stories/index.story.js
+++ b/packages/edit-site/src/components/global-styles/stories/index.story.js
@@ -2,15 +2,16 @@
  * WordPress dependencies
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from '../global-styles-provider';
 import { default as GlobalStylesUIComponent } from '../ui';
 import { unlock } from '../../../lock-unlock';
 
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 const { GlobalStylesContext, ExperimentalBlockEditorProvider } = unlock(
 	blockEditorPrivateApis
 );
diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js
index 0d19bcedb174b..db567db52b325 100644
--- a/packages/edit-site/src/components/global-styles/style-variations-container.js
+++ b/packages/edit-site/src/components/global-styles/style-variations-container.js
@@ -3,9 +3,10 @@
  */
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
+import { useContext, useEffect, useMemo, useState } from '@wordpress/element';
 import { __experimentalGrid as Grid } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -13,8 +14,19 @@ import { __ } from '@wordpress/i18n';
 import PreviewStyles from './preview-styles';
 import Variation from './variations/variation';
 import { isVariationWithSingleProperty } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { unlock } from '../../lock-unlock';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 
 export default function StyleVariationsContainer( { gap = 2 } ) {
+	const { user } = useContext( GlobalStylesContext );
+	const [ currentUserStyles, setCurrentUserStyles ] = useState( user );
+	const userStyles = currentUserStyles?.styles;
+
+	useEffect( () => {
+		setCurrentUserStyles( user );
+	}, [ user ] );
+
 	const variations = useSelect( ( select ) => {
 		return select(
 			coreStore
@@ -29,20 +41,71 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 		);
 	} );
 
-	const withEmptyVariation = useMemo( () => {
-		return [
+	const themeVariations = useMemo( () => {
+		const withEmptyVariation = [
 			{
 				title: __( 'Default' ),
 				settings: {},
 				styles: {},
 			},
-			...( multiplePropertyVariations ?? [] ).map( ( variation ) => ( {
-				...variation,
-				settings: variation.settings ?? {},
-				styles: variation.styles ?? {},
-			} ) ),
+			...( multiplePropertyVariations ?? [] ),
+		];
+		return [
+			...withEmptyVariation.map( ( variation ) => {
+				const blockStyles = { ...variation?.styles?.blocks } || {};
+
+				// We need to copy any user custom CSS to the variation to prevent it being lost
+				// when switching variations.
+				if ( userStyles?.blocks ) {
+					Object.keys( userStyles.blocks ).forEach( ( blockName ) => {
+						// First get any block specific custom CSS from the current user styles and merge with any custom CSS for
+						// that block in the variation.
+						if ( userStyles.blocks[ blockName ].css ) {
+							const variationBlockStyles =
+								blockStyles[ blockName ] || {};
+							const customCSS = {
+								css: `${
+									blockStyles[ blockName ]?.css || ''
+								} ${
+									userStyles.blocks[ blockName ].css.trim() ||
+									''
+								}`,
+							};
+							blockStyles[ blockName ] = {
+								...variationBlockStyles,
+								...customCSS,
+							};
+						}
+					} );
+				}
+				// Now merge any global custom CSS from current user styles with global custom CSS in the variation.
+				const css =
+					userStyles?.css || variation.styles?.css
+						? {
+								css: `${ variation.styles?.css || '' } ${
+									userStyles?.css || ''
+								}`,
+						  }
+						: {};
+
+				const blocks =
+					Object.keys( blockStyles ).length > 0
+						? { blocks: blockStyles }
+						: {};
+
+				const styles = {
+					...variation.styles,
+					...css,
+					...blocks,
+				};
+				return {
+					...variation,
+					settings: variation.settings ?? {},
+					styles,
+				};
+			} ),
 		];
-	}, [ multiplePropertyVariations ] );
+	}, [ multiplePropertyVariations, userStyles?.blocks, userStyles?.css ] );
 
 	return (
 		<Grid
@@ -50,7 +113,7 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 			className="edit-site-global-styles-style-variations-container"
 			gap={ gap }
 		>
-			{ withEmptyVariation.map( ( variation, index ) => (
+			{ themeVariations.map( ( variation, index ) => (
 				<Variation key={ index } variation={ variation }>
 					{ ( isFocused ) => (
 						<PreviewStyles
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 5cd5c355fe0db..406152db28970 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -7,7 +7,6 @@
 }
 
 .edit-site-global-styles-preview__iframe {
-	border-radius: $radius-block-ui + 1px; // Visually resembles the $radius-block-ui.
 	max-width: 100%;
 	display: block;
 	width: 100%;
@@ -59,10 +58,6 @@
 	row-gap: calc(#{$grid-unit-05} * 3);
 }
 
-.edit-site-global-styles-screen-colors__palette-count {
-	color: $gray-700;
-}
-
 .edit-site-global-styles-header__description {
 	padding: 0 $grid-unit-20;
 }
@@ -89,8 +84,7 @@
 	color: $gray-800;
 	font-weight: 600;
 	line-height: 1.2;
-	padding: $grid-unit-20;
-	padding-bottom: 0;
+	padding: $grid-unit-20 $grid-unit-20 0;
 	margin: 0;
 }
 
@@ -104,6 +98,11 @@
 	flex-shrink: 0;
 }
 
+.edit-site-global-styles__shadows-panel__title,
+.edit-site-global-styles__shadows-panel__options-container {
+	height: $grid-unit * 3;
+}
+
 .edit-site-global-styles__block-preview-panel {
 	position: relative;
 	width: 100%;
@@ -112,6 +111,55 @@
 	border-radius: $radius-block-ui;
 }
 
+.edit-site-global-styles__shadow-preview-panel {
+	height: 150px;
+	border: $gray-200 $border-width solid;
+	border-radius: $radius-block-ui;
+	overflow: auto;
+	background-image: repeating-linear-gradient(45deg, #f5f5f5 25%, #0000 0, #0000 75%, #f5f5f5 0, #f5f5f5), repeating-linear-gradient(45deg, #f5f5f5 25%, #0000 0, #0000 75%, #f5f5f5 0, #f5f5f5);
+	background-position: 0 0, 8px 8px;
+	background-size: 16px 16px;
+
+	.edit-site-global-styles__shadow-preview-block {
+		border: $gray-200 $border-width solid;
+		border-radius: $radius-block-ui;
+		background-color: $white;
+		width: 60%;
+		height: 60px;
+	}
+}
+
+.edit-site-global-styles__shadow-editor-panel {
+	width: 280px;
+	padding: $grid-unit-20;
+	// 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 {
+	width: 100%;
+
+	.edit-site-global-styles__shadow-editor__dropdown-toggle,
+	.edit-site-global-styles__shadow-editor__remove-button {
+		width: 100%;
+		height: auto;
+		padding-top: $grid-unit;
+		padding-bottom: $grid-unit;
+		text-align: left;
+		border-radius: inherit;
+
+		&.is-open {
+			background: $gray-100;
+			color: var(--wp-admin-theme-color);
+		}
+	}
+}
+
 .edit-site-global-styles-screen-css {
 	flex: 1 1 auto;
 	display: flex;
diff --git a/packages/edit-site/src/components/global-styles/test/shadow-utils.spec.js b/packages/edit-site/src/components/global-styles/test/shadow-utils.spec.js
new file mode 100644
index 0000000000000..05521c7857542
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/test/shadow-utils.spec.js
@@ -0,0 +1,251 @@
+/**
+ * Internal dependencies
+ */
+import { getShadowParts, shadowStringToObject } from '../shadow-utils';
+
+const colorFormats = {
+	named: 'red',
+	hex: '#ff0000',
+	hexAlpha: '#ff000077',
+	rgb: 'rgb(255, 0, 0)',
+	rgbSpaced: 'rgb(255 0 0)',
+	rgbMultiSpaced: 'rgb(255  0   0)',
+	rgba: 'rgba(255, 0, 0, 0.5)',
+	rgbp: 'rgb(255 0 0 / 50%)',
+	hsl: 'hsl(0, 100%, 50%)',
+	hsla: 'hsla(0, 100%, 50%, 0.5)',
+	hslp: 'hsl(0 100% 50% / 50%)',
+	currentcolor: 'currentcolor',
+};
+const validShadowFormats = {
+	xy: '{x} {y}',
+	xyInset: '{x} {y} inset',
+	insetXY: 'inset {x} {y}',
+
+	xyColor: '{x} {y} {color}',
+	xyColorInset: '{x} {y} {color} inset',
+	xyInsetColor: '{x} {y} inset {color}',
+	insetXYColor: 'inset {x} {y} {color}',
+
+	colorXY: '{color} {x} {y}',
+	colorXYInset: '{color} {x} {y} inset',
+	colorInsetXY: '{color} inset {x} {y}',
+	insetColorXY: 'inset {color} {x} {y}',
+
+	xyBlur: '{x} {y} {blur}',
+	xyBlurInset: '{x} {y} {blur} inset',
+	insetXYBlur: 'inset {x} {y} {blur}',
+
+	xyBlurColor: '{x} {y} {blur} {color}',
+	xyBlurColorInset: '{x} {y} {blur} {color} inset',
+	xyBlurInsetColor: '{x} {y} {blur} inset {color}',
+	insetXYBlurColor: 'inset {x} {y} {blur} {color}',
+
+	colorXYBlur: '{color} {x} {y} {blur}',
+	colorXYBlurInset: '{color} {x} {y} {blur} inset',
+	colorInsetXYBlur: '{color} inset {x} {y} {blur}',
+	insetColorXYBlur: 'inset {color} {x} {y} {blur}',
+
+	xyBlurSpread: '{x} {y} {blur} {spread}',
+	xyBlurSpreadInset: '{x} {y} {blur} {spread} inset',
+	insetXYBlurSpread: 'inset {x} {y} {blur} {spread}',
+
+	xyBlurSpreadColor: '{x} {y} {blur} {spread} {color}',
+	xyBlurSpreadColorInset: '{x} {y} {blur} {spread} {color} inset',
+	xyBlurSpreadInsetColor: '{x} {y} {blur} {spread} inset {color}',
+	insetXYBlurSpreadColor: 'inset {x} {y} {blur} {spread} {color}',
+
+	colorXYBlurSpread: '{color} {x} {y} {blur} {spread}',
+	colorXYBlurSpreadInset: '{color} {x} {y} {blur} {spread} inset',
+	colorInsetXYBlurSpread: '{color} inset {x} {y} {blur} {spread}',
+	insetColorXYBlurSpread: 'inset {color} {x} {y} {blur} {spread}',
+
+	multipleSpaces: '{x}  {y}   {blur} {spread}',
+	upperInset: 'INSET {x} {y} {blur} {spread} {color}',
+};
+
+const invalidShadowFormats = {
+	oneLength: '{x}',
+	multipleLengthGroups1: '{x} {y} {color} {blur}',
+	multipleLengthGroups2: '{x} {y} {blur} {spread} {color} 5px',
+	multipleInsets: 'inset inset {x} {y} {blur} {spread} {color}',
+	multipleColors: '{x} {y} {blur} {spread} {color} {color}',
+};
+
+const combinedShadows = {
+	onePart: '{1}',
+	twoParts: '{1},{2}',
+	twoPartsSpaced: '{1}, {2}',
+	threeParts: '{1},{2},{3}',
+};
+
+const shadowUnits = {
+	px: '1px',
+	em: '1em',
+	rem: '1rem',
+	halfRem: '0.5rem',
+	percent: '1%',
+	halfPercent: '0.5%',
+	ex: '1ex',
+	inch: '1in',
+	cm: '1cm',
+	mm: '1mm',
+	pt: '1pt',
+	pc: '1pc',
+	vh: '1vh',
+	vw: '1vw',
+	vmin: '1vmin',
+	vmax: '1vmax',
+	ch: '1ch',
+	lh: '1lh',
+	zero: '0',
+};
+
+// Data helper functions
+function getShadowString( formatString, values ) {
+	return formatString.replace( /\{(\w+)\}/g, ( match, placeholder ) => {
+		if ( values.hasOwnProperty( placeholder ) ) {
+			return values[ placeholder ];
+		}
+		return match;
+	} );
+}
+function getCombinedShadowString( format, parts ) {
+	return format.replace( /{(\d+)}/g, ( _, index ) => parts[ index - 1 ] );
+}
+
+describe( 'getShadowParts', () => {
+	Object.entries( validShadowFormats ).forEach( ( [ shadowKey, shadow ] ) => {
+		describe( `test shadow format: ${ shadowKey }`, () => {
+			Object.entries( colorFormats ).forEach( ( [ colorKey, color ] ) => {
+				Object.entries( combinedShadows ).forEach(
+					( [ combinedShadowKey, combinedShadow ] ) => {
+						const shadowCount = combinedShadow.split( ',' ).length;
+						const shadowStrings = Array.from(
+							{ length: shadowCount },
+							() =>
+								getShadowString( shadow, {
+									x: '1px',
+									y: '2px',
+									blur: '3px',
+									spread: '4px',
+									color,
+								} )
+						);
+
+						const input = getCombinedShadowString(
+							combinedShadow,
+							shadowStrings
+						);
+						const output = shadowStrings;
+
+						it( `should return shadow parts for ${ colorKey } color and ${ combinedShadowKey } shadow`, () => {
+							const parts = getShadowParts( input );
+							expect( parts ).toEqual( output );
+						} );
+					}
+				);
+			} );
+		} );
+	} );
+} );
+
+describe( 'shadowStringToObject', () => {
+	const defaultShadow = {
+		x: '0',
+		y: '0',
+		blur: '0',
+		spread: '0',
+		color: '#000',
+		inset: false,
+	};
+
+	Object.entries( validShadowFormats ).forEach( ( [ shadowKey, shadow ] ) => {
+		describe( `test shadow format: ${ shadowKey }`, () => {
+			Object.entries( colorFormats ).forEach( ( [ colorKey, color ] ) => {
+				const hasX = shadow.includes( '{x}' );
+				const hasY = shadow.includes( '{y}' );
+				const hasBlur = shadow.includes( '{blur}' );
+				const hasSpread = shadow.includes( '{spread}' );
+				const hasColor = shadow.includes( '{color}' );
+				const hasInset = shadow.toLowerCase().includes( 'inset' );
+
+				const shadowString = getShadowString( shadow, {
+					x: '1px',
+					y: '2px',
+					blur: '3px',
+					spread: '4px',
+					color,
+				} );
+
+				const input = shadowString;
+				const output = {
+					x: hasX ? '1px' : defaultShadow.x,
+					y: hasY ? '2px' : defaultShadow.y,
+					blur: hasBlur ? '3px' : defaultShadow.blur,
+					spread: hasSpread ? '4px' : defaultShadow.spread,
+					color: hasColor ? color : defaultShadow.color,
+					inset: hasInset,
+				};
+
+				it( `should return shadow object for ${ colorKey } color`, () => {
+					const shadowObj = shadowStringToObject( input );
+					expect( shadowObj ).toEqual( output );
+				} );
+			} );
+		} );
+	} );
+
+	describe( `test invalid shadow formats`, () => {
+		const color = colorFormats.hex;
+		Object.entries( invalidShadowFormats ).forEach(
+			( [ shadowKey, shadow ] ) => {
+				const shadowString = getShadowString( shadow, {
+					x: '1px',
+					y: '2px',
+					blur: '3px',
+					spread: '4px',
+					color,
+				} );
+
+				const input = shadowString;
+				const output = defaultShadow;
+
+				it( `should return default shadow object for ${ shadowKey }`, () => {
+					const shadowObj = shadowStringToObject( input );
+					expect( shadowObj ).toEqual( output );
+				} );
+			}
+		);
+	} );
+
+	describe( `test shadow with all units`, () => {
+		const shadow = validShadowFormats.xyBlurSpreadColor;
+		const color = colorFormats.hex;
+
+		Object.entries( shadowUnits ).forEach( ( [ unitKey, unit ] ) => {
+			const shadowString = getShadowString( shadow, {
+				x: unit,
+				y: unit,
+				blur: unit,
+				spread: unit,
+				color,
+			} );
+
+			const input = shadowString;
+			const output = {
+				x: unit,
+				y: unit,
+				blur: unit,
+				spread: unit,
+				color,
+				inset: false,
+			};
+
+			it( `should return shadow object for the unit: ${ unitKey }`, () => {
+				const shadowObj = shadowStringToObject( input );
+				expect( shadowObj ).toEqual( output );
+			} );
+		} );
+	} );
+} );
diff --git a/packages/edit-site/src/components/global-styles/test/utils.spec.js b/packages/edit-site/src/components/global-styles/test/utils.spec.js
new file mode 100644
index 0000000000000..6b07fffbb955d
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/test/utils.spec.js
@@ -0,0 +1,59 @@
+/**
+ * Internal dependencies
+ */
+import { getNewIndexFromPresets } from '../utils';
+
+const validPresets = {
+	single: [ { slug: 'preset-1' } ],
+	multiple: [ { slug: 'preset-1' }, { slug: 'preset-2' } ],
+	withGaps: [ { slug: 'preset-1' }, { slug: 'preset-3' } ],
+	mixedPrefixes: [
+		{ slug: 'preset-1' },
+		{ slug: 'shadow-2' },
+		{ slug: 'preset-3' },
+	],
+	nonStringSlug: [ { slug: 'preset-1' }, { slug: 2 } ],
+	emptyArray: [],
+};
+
+const invalidPresets = {
+	noMatch: [ { slug: 'preset-alpha' }, { slug: 'preset-beta' } ],
+	emptySlug: [ { slug: '' } ],
+	nullSlug: [ { slug: null } ],
+	undefinedSlug: [ { slug: undefined } ],
+	nonObjectElements: [ 'preset-1' ],
+};
+
+const getExpectedIndex = ( presetKey, presets ) => {
+	if ( presetKey === 'withGaps' ) {
+		return 4;
+	}
+	if ( presetKey === 'mixedPrefixes' ) {
+		return 4;
+	}
+	if ( presetKey === 'nonStringSlug' ) {
+		return 2;
+	}
+	return presets.length + 1;
+};
+
+describe( 'getNewIndexFromPresets', () => {
+	Object.entries( validPresets ).forEach( ( [ presetKey, presets ] ) => {
+		describe( `test valid preset format: ${ presetKey }`, () => {
+			const newIndex = getNewIndexFromPresets( presets, 'preset-' );
+			it( `should return correct new index for ${ presetKey }`, () => {
+				const expectedIndex = getExpectedIndex( presetKey, presets );
+				expect( newIndex ).toBe( expectedIndex );
+			} );
+		} );
+	} );
+
+	Object.entries( invalidPresets ).forEach( ( [ presetKey, presets ] ) => {
+		describe( `test invalid preset format: ${ presetKey }`, () => {
+			const newIndex = getNewIndexFromPresets( presets, 'preset-' );
+			it( `should return 1 for ${ presetKey }`, () => {
+				expect( newIndex ).toBe( 1 );
+			} );
+		} );
+	} );
+} );
diff --git a/packages/edit-site/src/components/global-styles/typography-example.js b/packages/edit-site/src/components/global-styles/typography-example.js
index dfb8920fb5ea2..a491ca57bf5be 100644
--- a/packages/edit-site/src/components/global-styles/typography-example.js
+++ b/packages/edit-site/src/components/global-styles/typography-example.js
@@ -5,16 +5,17 @@ import { useContext } from '@wordpress/element';
 import { __unstableMotion as motion } from '@wordpress/components';
 import { _x } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from './global-styles-provider';
 import { unlock } from '../../lock-unlock';
 import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
 import { getFontFamilies } from './utils';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 export default function PreviewTypography( { fontSize, variation } ) {
 	const { base } = useContext( GlobalStylesContext );
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index b50e09550f707..08cd20e9aac6a 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -35,12 +35,12 @@ import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
+import { ScreenShadows, ScreenShadowsEdit } from './screen-shadows';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
 import ScreenRevisions from './screen-revisions';
-import ScreenBackground from './screen-background';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
@@ -76,7 +76,11 @@ function GlobalStylesActionMenu() {
 
 	return (
 		<GlobalStylesMenuFill>
-			<DropdownMenu icon={ moreVertical } label={ __( 'More' ) }>
+			<DropdownMenu
+				icon={ moreVertical }
+				label={ __( 'More' ) }
+				toggleProps={ { size: 'compact' } }
+			>
 				{ ( { onClose } ) => (
 					<>
 						<MenuGroup>
@@ -333,6 +337,14 @@ function GlobalStylesUI() {
 				<ScreenColors />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path="/shadows">
+				<ScreenShadows />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/shadows/edit/:category/:slug">
+				<ScreenShadowsEdit />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path="/layout">
 				<ScreenLayout />
 			</GlobalStylesNavigationScreen>
@@ -341,14 +353,10 @@ function GlobalStylesUI() {
 				<ScreenCSS />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ '/revisions' }>
+			<GlobalStylesNavigationScreen path="/revisions">
 				<ScreenRevisions />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ '/background' }>
-				<ScreenBackground />
-			</GlobalStylesNavigationScreen>
-
 			{ blocks.map( ( block ) => (
 				<GlobalStylesNavigationScreen
 					key={ 'menu-block-' + block.name }
diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
index 7e7948147b170..6096b381fb218 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -11,6 +11,33 @@ export function getVariationClassName( variation ) {
 	return `is-style-${ variation }`;
 }
 
+/**
+ * Iterates through the presets array and searches for slugs that start with the specified
+ * slugPrefix followed by a numerical suffix. It identifies the highest numerical suffix found
+ * and returns one greater than the highest found suffix, ensuring that the new index is unique.
+ *
+ * @param {Array}  presets    The array of preset objects, each potentially containing a slug property.
+ * @param {string} slugPrefix The prefix to look for in the preset slugs.
+ *
+ * @return {number} The next available index for a preset with the specified slug prefix, or 1 if no matching slugs are found.
+ */
+export function getNewIndexFromPresets( presets, slugPrefix ) {
+	const nameRegex = new RegExp( `^${ slugPrefix }([\\d]+)$` );
+	const highestPresetValue = presets.reduce( ( currentHighest, preset ) => {
+		if ( typeof preset?.slug === 'string' ) {
+			const matches = preset?.slug.match( nameRegex );
+			if ( matches ) {
+				const id = parseInt( matches[ 1 ], 10 );
+				if ( id > currentHighest ) {
+					return id;
+				}
+			}
+		}
+		return currentHighest;
+	}, 0 );
+	return highestPresetValue + 1;
+}
+
 function getFontFamilyFromSetting( fontFamilies, setting ) {
 	if ( ! Array.isArray( fontFamilies ) || ! setting ) {
 		return null;
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 a0e18c40cc69d..8d9b4238efa33 100644
--- a/packages/edit-site/src/components/global-styles/variations/style.scss
+++ b/packages/edit-site/src/components/global-styles/variations/style.scss
@@ -6,48 +6,35 @@
 
 	.edit-site-global-styles-variations_item-preview {
 		border-radius: $radius-block-ui;
-		// Shown in Windows 10 high contrast mode.
-		outline: 1px solid transparent;
+		outline: $border-width solid rgba($black, 0.1);
+		outline-offset: -$border-width;
+		overflow: hidden;
 		position: relative;
 		// Add the same transition that block style variations and other buttons have.
-		transition: box-shadow 0.1s linear;
+		transition: outline 0.1s linear;
 		@include reduce-motion("transition");
 
-		&::after {
-			content: "";
-			position: absolute;
-			top: -$border-width;
-			left: -$border-width;
-			bottom: -$border-width;
-			right: -$border-width;
-			// Visually resembles the $radius-block-ui.
-			border-radius: $radius-block-ui + $border-width;
-			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: $border-width solid transparent;
-			box-sizing: inherit;
-			// Add the same transition that block style variations and other buttons have.
-			transition: box-shadow 0.1s linear;
-			@include reduce-motion("transition");
-		}
+		&.is-pill {
+			height: $button-size-compact;
 
-		.edit-site-global-styles-color-variations & {
-			padding: $grid-unit-10;
+			.block-editor-iframe__scale-container {
+				overflow: hidden;
+			}
 		}
 	}
 
-	&:not(.is-active):hover .edit-site-global-styles-variations_item-preview::after {
-		box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.4);
+	&:not(.is-active):hover .edit-site-global-styles-variations_item-preview {
+		outline-color: rgba($black, 0.3);
 	}
 
 	&.is-active .edit-site-global-styles-variations_item-preview,
 	&:focus-visible .edit-site-global-styles-variations_item-preview {
-		box-shadow: inset 0 0 0 $border-width $white, 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
-		// Shown in Windows 10 high contrast mode.
-		outline-width: 3px;
+		outline-color: $gray-900;
+		outline-offset: $border-width;
+		outline-width: var(--wp-admin-border-width-focus);
+	}
 
-		&::after {
-			box-shadow: inset 0 0 0 1px $white;
-		}
+	&:focus-visible .edit-site-global-styles-variations_item-preview {
+		outline-color: var(--wp-admin-theme-color);
 	}
 }
diff --git a/packages/edit-site/src/components/global-styles/variations/variation.js b/packages/edit-site/src/components/global-styles/variations/variation.js
index dc531b4063525..a3214149edec3 100644
--- a/packages/edit-site/src/components/global-styles/variations/variation.js
+++ b/packages/edit-site/src/components/global-styles/variations/variation.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -10,18 +10,19 @@ import { useMemo, useContext, useState } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from '../global-styles-provider';
 import { unlock } from '../../../lock-unlock';
 
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 	blockEditorPrivateApis
 );
 
-export default function Variation( { variation, children } ) {
+export default function Variation( { variation, children, isPill } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
 	const context = useMemo(
@@ -29,6 +30,7 @@ export default function Variation( { variation, children } ) {
 			user: {
 				settings: variation.settings ?? {},
 				styles: variation.styles ?? {},
+				_links: variation._links ?? {},
 			},
 			base,
 			merged: mergeBaseAndUserConfigs( base, variation ),
@@ -41,6 +43,7 @@ export default function Variation( { variation, children } ) {
 		setUserConfig( () => ( {
 			settings: variation.settings,
 			styles: variation.styles,
+			_links: variation._links,
 		} ) );
 	};
 
@@ -69,12 +72,9 @@ export default function Variation( { variation, children } ) {
 	return (
 		<GlobalStylesContext.Provider value={ context }>
 			<div
-				className={ classnames(
-					'edit-site-global-styles-variations_item',
-					{
-						'is-active': isActive,
-					}
-				) }
+				className={ clsx( 'edit-site-global-styles-variations_item', {
+					'is-active': isActive,
+				} ) }
 				role="button"
 				onClick={ selectVariation }
 				onKeyDown={ selectOnEnter }
@@ -84,7 +84,12 @@ export default function Variation( { variation, children } ) {
 				onFocus={ () => setIsFocused( true ) }
 				onBlur={ () => setIsFocused( false ) }
 			>
-				<div className="edit-site-global-styles-variations_item-preview">
+				<div
+					className={ clsx(
+						'edit-site-global-styles-variations_item-preview',
+						{ 'is-pill': isPill }
+					) }
+				>
 					{ children( isFocused ) }
 				</div>
 			</div>
diff --git a/packages/edit-site/src/components/global-styles/variations/variations-color.js b/packages/edit-site/src/components/global-styles/variations/variations-color.js
index cd90872f20da8..2b3758e92a512 100644
--- a/packages/edit-site/src/components/global-styles/variations/variations-color.js
+++ b/packages/edit-site/src/components/global-styles/variations/variations-color.js
@@ -1,36 +1,34 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalGrid as Grid,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { __experimentalVStack as VStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import Variation from './variation';
 import StylesPreviewColors from '../preview-colors';
 import { useColorVariations } from '../hooks';
 import Subtitle from '../subtitle';
+import Variation from './variation';
 
 export default function ColorVariations( { title, gap = 2 } ) {
 	const colorVariations = useColorVariations();
 
-	if ( ! colorVariations?.length ) {
+	// Return null if there is only one variation (the default).
+	if ( colorVariations?.length <= 1 ) {
 		return null;
 	}
 
 	return (
 		<VStack spacing={ 3 }>
 			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
-			<Grid columns={ 3 } gap={ gap }>
+			<VStack spacing={ gap }>
 				{ colorVariations.map( ( variation, index ) => (
-					<Variation key={ index } variation={ variation }>
+					<Variation key={ index } variation={ variation } isPill>
 						{ () => <StylesPreviewColors /> }
 					</Variation>
 				) ) }
-			</Grid>
+			</VStack>
 		</VStack>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/variations/variations-panel.js b/packages/edit-site/src/components/global-styles/variations/variations-panel.js
index 7e52498e0a438..f98cc65e5c95b 100644
--- a/packages/edit-site/src/components/global-styles/variations/variations-panel.js
+++ b/packages/edit-site/src/components/global-styles/variations/variations-panel.js
@@ -2,16 +2,25 @@
  * WordPress dependencies
  */
 import { store as blocksStore } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
-
 import { NavigationButtonAsItem } from '../navigation-button';
+import { unlock } from '../../../lock-unlock';
+
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
-function getCoreBlockStyles( blockStyles ) {
-	return blockStyles?.filter( ( style ) => style.source === 'block' );
+// Only core block styles (source === block) or block styles with a matching
+// theme.json style variation will be configurable via Global Styles.
+function getFilteredBlockStyles( blockStyles, variations ) {
+	return blockStyles?.filter(
+		( style ) =>
+			style.source === 'block' || variations.includes( style.name )
+	);
 }
 
 export function useBlockVariations( name ) {
@@ -22,8 +31,10 @@ export function useBlockVariations( name ) {
 		},
 		[ name ]
 	);
-	const coreBlockStyles = getCoreBlockStyles( blockStyles );
-	return coreBlockStyles;
+	const [ variations ] = useGlobalStyle( 'variations', name );
+	const variationNames = Object.keys( variations ?? {} );
+
+	return getFilteredBlockStyles( blockStyles, variationNames );
 }
 
 export function VariationsPanel( { name } ) {
diff --git a/packages/edit-site/src/components/global-styles/variations/variations-typography.js b/packages/edit-site/src/components/global-styles/variations/variations-typography.js
index 6ee7be561e611..208ed822b5a6f 100644
--- a/packages/edit-site/src/components/global-styles/variations/variations-typography.js
+++ b/packages/edit-site/src/components/global-styles/variations/variations-typography.js
@@ -19,7 +19,8 @@ import Subtitle from '../subtitle';
 export default function TypographyVariations( { title, gap = 2 } ) {
 	const typographyVariations = useTypographyVariations();
 
-	if ( ! typographyVariations?.length ) {
+	// Return null if there is only one variation (the default).
+	if ( typographyVariations?.length <= 1 ) {
 		return null;
 	}
 
diff --git a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js b/packages/edit-site/src/components/header-edit-mode/document-tools/index.js
deleted file mode 100644
index cd7720a1a34f9..0000000000000
--- a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useViewportMatch } from '@wordpress/compose';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { chevronUpDown } from '@wordpress/icons';
-import { Button, ToolbarItem } from '@wordpress/components';
-import {
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../../lock-unlock';
-
-const { DocumentTools: EditorDocumentTools } = unlock( editorPrivateApis );
-
-export default function DocumentTools( {
-	blockEditorMode,
-	hasFixedToolbar,
-	isDistractionFree,
-} ) {
-	const { isVisualMode } = useSelect( ( select ) => {
-		const { getEditorMode } = select( editorStore );
-
-		return {
-			isVisualMode: getEditorMode() === 'visual',
-		};
-	}, [] );
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
-	const { setDeviceType } = useDispatch( editorStore );
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const isZoomedOutViewExperimentEnabled =
-		window?.__experimentalEnableZoomedOutView && isVisualMode;
-	const isZoomedOutView = blockEditorMode === 'zoom-out';
-
-	return (
-		<EditorDocumentTools
-			disableBlockTools={ ! isVisualMode }
-			listViewLabel={ __( 'List View' ) }
-		>
-			{ isZoomedOutViewExperimentEnabled &&
-				isLargeViewport &&
-				! isDistractionFree &&
-				! hasFixedToolbar && (
-					<ToolbarItem
-						as={ Button }
-						className="edit-site-header-edit-mode__zoom-out-view-toggle"
-						icon={ chevronUpDown }
-						isPressed={ isZoomedOutView }
-						/* translators: button label text should, if possible, be under 16 characters. */
-						label={ __( 'Zoom-out View' ) }
-						onClick={ () => {
-							setDeviceType( 'Desktop' );
-							__unstableSetEditorMode(
-								isZoomedOutView ? 'edit' : 'zoom-out'
-							);
-						} }
-						size="compact"
-					/>
-				) }
-		</EditorDocumentTools>
-	);
-}
diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
deleted file mode 100644
index 486c6e0e1046c..0000000000000
--- a/packages/edit-site/src/components/header-edit-mode/index.js
+++ /dev/null
@@ -1,190 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useViewportMatch, useReducedMotion } from '@wordpress/compose';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { __unstableMotion as motion } from '@wordpress/components';
-import { store as preferencesStore } from '@wordpress/preferences';
-import {
-	DocumentBar,
-	PostSavedState,
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import SiteEditorMoreMenuItems from './more-menu';
-import SaveButton from '../save-button';
-import DocumentTools from './document-tools';
-import { store as editSiteStore } from '../../store';
-import {
-	getEditorCanvasContainerTitle,
-	useHasEditorCanvasContainer,
-} from '../editor-canvas-container';
-import { unlock } from '../../lock-unlock';
-import { FOCUSABLE_ENTITIES } from '../../utils/constants';
-import { isPreviewingTheme } from '../../utils/is-previewing-theme';
-
-const {
-	CollapsableBlockToolbar,
-	MoreMenu,
-	PostViewLink,
-	PreviewDropdown,
-	PinnedItems,
-	PostPublishButtonOrToggle,
-} = unlock( editorPrivateApis );
-
-export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) {
-	const {
-		templateType,
-		isDistractionFree,
-		blockEditorMode,
-		showIconLabels,
-		editorCanvasView,
-		isFixedToolbar,
-		isPublishSidebarOpened,
-	} = useSelect( ( select ) => {
-		const { getEditedPostType } = select( editSiteStore );
-		const { __unstableGetEditorMode } = select( blockEditorStore );
-		const { get: getPreference } = select( preferencesStore );
-		const { getDeviceType } = select( editorStore );
-
-		return {
-			deviceType: getDeviceType(),
-			templateType: getEditedPostType(),
-			blockEditorMode: __unstableGetEditorMode(),
-			showIconLabels: getPreference( 'core', 'showIconLabels' ),
-			editorCanvasView: unlock(
-				select( editSiteStore )
-			).getEditorCanvasContainerView(),
-			isDistractionFree: getPreference( 'core', 'distractionFree' ),
-			isFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
-			isPublishSidebarOpened:
-				select( editorStore ).isPublishSidebarOpened(),
-		};
-	}, [] );
-
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const showTopToolbar =
-		isLargeViewport && isFixedToolbar && blockEditorMode !== 'zoom-out';
-	const disableMotion = useReducedMotion();
-
-	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
-
-	const isFocusMode = FOCUSABLE_ENTITIES.includes( templateType );
-
-	const isZoomedOutView = blockEditorMode === 'zoom-out';
-
-	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
-		useState( true );
-
-	const toolbarVariants = {
-		isDistractionFree: { y: '-50px' },
-		isDistractionFreeHovering: { y: 0 },
-		view: { y: 0 },
-		edit: { y: 0 },
-	};
-
-	const toolbarTransition = {
-		type: 'tween',
-		duration: disableMotion ? 0 : 0.2,
-		ease: 'easeOut',
-	};
-
-	const _isPreviewingTheme = isPreviewingTheme();
-	return (
-		<div
-			className={ classnames( 'edit-site-header-edit-mode', {
-				'show-icon-labels': showIconLabels,
-				'show-block-toolbar': ! isBlockToolsCollapsed && showTopToolbar,
-			} ) }
-		>
-			{ hasDefaultEditorCanvasView && (
-				<motion.div
-					className="edit-site-header-edit-mode__start"
-					variants={ toolbarVariants }
-					transition={ toolbarTransition }
-				>
-					<DocumentTools
-						blockEditorMode={ blockEditorMode }
-						isDistractionFree={ isDistractionFree }
-					/>
-					{ showTopToolbar && (
-						<CollapsableBlockToolbar
-							isCollapsed={ isBlockToolsCollapsed }
-							onToggle={ setIsBlockToolsCollapsed }
-						/>
-					) }
-				</motion.div>
-			) }
-
-			{ ! isDistractionFree && (
-				<div className="edit-site-header-edit-mode__center">
-					{ ! hasDefaultEditorCanvasView ? (
-						getEditorCanvasContainerTitle( editorCanvasView )
-					) : (
-						<DocumentBar />
-					) }
-				</div>
-			) }
-
-			<div className="edit-site-header-edit-mode__end">
-				<motion.div
-					className="edit-site-header-edit-mode__actions"
-					variants={ toolbarVariants }
-					transition={ toolbarTransition }
-				>
-					{ isLargeViewport && (
-						<div
-							className={ classnames(
-								'edit-site-header-edit-mode__preview-options',
-								{ 'is-zoomed-out': isZoomedOutView }
-							) }
-						>
-							<PreviewDropdown
-								disabled={
-									isFocusMode || ! hasDefaultEditorCanvasView
-								}
-							/>
-						</div>
-					) }
-					<PostViewLink />
-					{
-						// TODO: For now we conditionally render the Save/Publish buttons based on
-						// some specific site editor extra handling. Examples are when we're previewing
-						// a theme, handling of global styles changes or when we're in 'view' mode,
-						// which opens the save panel in a Modal.
-					 }
-					{ ! _isPreviewingTheme && ! isPublishSidebarOpened && (
-						// This button isn't completely hidden by the publish sidebar.
-						// We can't hide the whole toolbar when the publish sidebar is open because
-						// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
-						// We track that DOM node to return focus to the PostPublishButtonOrToggle
-						// when the publish sidebar has been closed.
-						<PostSavedState />
-					) }
-					{ ! _isPreviewingTheme && (
-						<PostPublishButtonOrToggle
-							setEntitiesSavedStatesCallback={
-								setEntitiesSavedStatesCallback
-							}
-						/>
-					) }
-					{ _isPreviewingTheme && <SaveButton size="compact" /> }
-					{ ! isDistractionFree && <PinnedItems.Slot scope="core" /> }
-					<MoreMenu />
-					<SiteEditorMoreMenuItems />
-				</motion.div>
-			</div>
-		</div>
-	);
-}
diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
deleted file mode 100644
index 5963a1c815141..0000000000000
--- a/packages/edit-site/src/components/header-edit-mode/style.scss
+++ /dev/null
@@ -1,201 +0,0 @@
-.edit-site-header-edit-mode {
-	height: $header-height;
-	align-items: center;
-	background-color: $white;
-	color: $gray-900;
-	display: flex;
-	box-sizing: border-box;
-	width: 100%;
-	justify-content: space-between;
-	border-bottom: $border-width solid $gray-200;
-	padding-left: $header-height;
-
-	// When top toolbar is engaged and should expand fully.
-	&.show-block-toolbar {
-
-		.edit-site-header-edit-mode__start,
-		.edit-site-header-edit-mode__end {
-			flex-basis: auto;
-		}
-
-		.edit-site-header-edit-mode__center {
-			display: none;
-		}
-	}
-
-	.edit-site-header-edit-mode__start {
-		display: flex;
-		border: none;
-		align-items: center;
-		flex-grow: 1;
-		flex-shrink: 2;
-		// Take up the full height of the header so the border focus
-		// is visible on toolbar buttons.
-		height: 100%;
-		// Allow focus ring to be fully visible on furthest right button.
-		@include break-medium() {
-			padding-right: var(--wp-admin-border-width-focus);
-			// Account for the site hub, which is 60x60px.
-			flex-basis: calc(37.5% - 60px);
-			// We need this to be overflow hidden so the block toolbar can
-			// overflow scroll. If the overflow is visible, flexbox allows
-			// the toolbar to grow outside of the allowed container space.
-			overflow: hidden;
-		}
-	}
-
-	.edit-site-header-edit-mode__end {
-		display: flex;
-		justify-content: flex-end;
-		height: 100%;
-		flex-grow: 1;
-		flex-shrink: 1;
-
-		@include break-medium() {
-			flex-basis: 37.5%;
-		}
-	}
-
-	.edit-site-header-edit-mode__center {
-		align-items: center;
-		display: flex;
-		flex-basis: 100%;
-		flex-grow: 1;
-		flex-shrink: 2;
-		height: 100%;
-		justify-content: center;
-
-		// Flex items will, by default, refuse to shrink below a minimum
-		// intrinsic width. In order to shrink this flexbox item, and
-		// subsequently truncate child text, we set an explicit min-width.
-		// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
-		min-width: 0;
-
-		@include break-medium() {
-			flex-basis: 25%;
-		}
-	}
-
-}
-
-.edit-site-header-edit-mode__toolbar {
-	align-items: center;
-	display: flex;
-	gap: $grid-unit-10;
-	padding-left: $grid-unit-20;
-
-	@include break-medium() {
-		padding-left: $grid-unit-50 * 0.5;
-	}
-
-	@include break-wide() {
-		padding-right: $grid-unit-10;
-	}
-
-	.edit-site-header-edit-mode__inserter-toggle {
-		svg {
-			transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
-			@include reduce-motion("transition");
-		}
-
-		&.is-pressed {
-			svg {
-				transform: rotate(45deg);
-			}
-		}
-	}
-}
-
-/**
- * Buttons on the right side
- */
-
-.edit-site-header-edit-mode__actions {
-	display: inline-flex;
-	align-items: center;
-	flex-wrap: nowrap;
-	// Ensure actions do not press against .edit-site-header-edit-mode__center.
-	padding-left: $grid-unit-10;
-	padding-right: $grid-unit-10;
-	gap: $grid-unit-10;
-}
-
-.edit-site-header-edit-mode__preview-options {
-	opacity: 1;
-	transition: opacity 0.3s;
-
-	&.is-zoomed-out {
-		opacity: 0;
-	}
-}
-
-// Button text label styles
-
-.edit-site-header-edit-mode.show-icon-labels {
-	.components-button.has-icon {
-		width: auto;
-
-		// Hide the button icons when labels are set to display...
-		svg {
-			display: none;
-		}
-		// ... and display labels.
-		&::after {
-			content: attr(aria-label);
-		}
-		&[aria-disabled="true"] {
-			background-color: transparent;
-		}
-	}
-	.is-tertiary {
-		&:active {
-			box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
-			background-color: transparent;
-		}
-	}
-	// Some margins and padding have to be adjusted so the buttons can still fit on smaller screens.
-	.edit-site-save-button__button {
-		padding-left: 6px;
-		padding-right: 6px;
-	}
-
-	// The template details toggle has a custom label, different from its aria-label, so we don't want to display both.
-	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
-		&::after {
-			content: none;
-		}
-	}
-
-	.edit-site-header-edit-mode__inserter-toggle.edit-site-header-edit-mode__inserter-toggle,
-	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
-		height: 36px;
-		padding: 0 $grid-unit-10;
-	}
-
-	.block-editor-block-mover {
-		// Modified group borders.
-		border-left: none;
-
-		&::before {
-			content: "";
-			width: $border-width;
-			height: $grid-unit-30;
-			background-color: $gray-300;
-			margin-top: $grid-unit-05;
-			margin-left: $grid-unit;
-		}
-
-		// Modified block movers horizontal separator.
-		.block-editor-block-mover__move-button-container {
-			&::before {
-				width: calc(100% - #{$grid-unit-30});
-				background: $gray-300;
-				left: calc(50% + 1px);
-			}
-		}
-	}
-}
-
-.components-popover.more-menu-dropdown__content {
-	z-index: z-index(".components-popover.more-menu__content");
-}
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index 77c057bde2468..4bbf29cced39e 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -30,7 +30,10 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import {
+	EditorSnackbars,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -72,13 +75,11 @@ export default function Layout() {
 
 	const {
 		isDistractionFree,
-		isZoomOutMode,
 		hasFixedToolbar,
 		hasBlockSelected,
 		canvasMode,
 		previousShortcut,
 		nextShortcut,
-		hasBlockBreadcrumbs,
 	} = useSelect( ( select ) => {
 		const { getAllShortcutKeyCombinations } = select(
 			keyboardShortcutsStore
@@ -100,13 +101,6 @@ export default function Layout() {
 				'core',
 				'distractionFree'
 			),
-			hasBlockBreadcrumbs: select( preferencesStore ).get(
-				'core',
-				'showBlockBreadcrumbs'
-			),
-			isZoomOutMode:
-				select( blockEditorStore ).__unstableGetEditorMode() ===
-				'zoom-out',
 			hasBlockSelected:
 				select( blockEditorStore ).getBlockSelectionStart(),
 		};
@@ -151,7 +145,7 @@ export default function Layout() {
 	let commandContext = 'site-editor';
 
 	if ( canvasMode === 'edit' ) {
-		commandContext = 'site-editor-edit';
+		commandContext = 'entity-edit';
 	}
 	if ( hasBlockSelected ) {
 		commandContext = 'block-selection-edit';
@@ -177,7 +171,7 @@ export default function Layout() {
 			<div
 				{ ...navigateRegionsProps }
 				ref={ navigateRegionsProps.ref }
-				className={ classnames(
+				className={ clsx(
 					'edit-site-layout',
 					navigateRegionsProps.className,
 					{
@@ -186,11 +180,6 @@ export default function Layout() {
 						'is-full-canvas': canvasMode === 'edit',
 						'has-fixed-toolbar': hasFixedToolbar,
 						'is-block-toolbar-visible': hasBlockSelected,
-						'is-zoom-out': isZoomOutMode,
-						'has-block-breadcrumbs':
-							hasBlockBreadcrumbs &&
-							! isDistractionFree &&
-							canvasMode === 'edit',
 					}
 				) }
 			>
@@ -267,6 +256,8 @@ export default function Layout() {
 						</NavigableRegion>
 					) }
 
+					<EditorSnackbars />
+
 					{ isMobileViewport && areas.mobile && (
 						<div className="edit-site-layout__mobile">
 							{ areas.mobile }
@@ -291,7 +282,7 @@ export default function Layout() {
 							{ canvasResizer }
 							{ !! canvasSize.width && (
 								<div
-									className={ classnames(
+									className={ clsx(
 										'edit-site-layout__canvas',
 										{
 											'is-right-aligned':
diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
index 0c1e0d1d103a3..25ab81d9a173c 100644
--- a/packages/edit-site/src/components/layout/router.js
+++ b/packages/edit-site/src/components/layout/router.js
@@ -3,7 +3,7 @@
  */
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { __ } from '@wordpress/i18n';
-
+import { useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -17,49 +17,84 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
-import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
-import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
-import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
 import DataViewsSidebarContent from '../sidebar-dataviews';
+import {
+	NAVIGATION_POST_TYPE,
+	PATTERN_TYPES,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+} from '../../utils/constants';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
-export default function useLayoutAreas() {
-	const isSiteEditorLoading = useIsSiteEditorLoading();
+function useRedirectOldPaths() {
 	const history = useHistory();
 	const { params } = useLocation();
-	const { postType, postId, path, layout, isCustom, canvas } = params ?? {};
+	useEffect( () => {
+		const { postType, path, categoryType, ...rest } = params;
+
+		if ( path === '/wp_template_part/all' ) {
+			history.replace( { postType: TEMPLATE_PART_POST_TYPE } );
+		}
+
+		if ( path === '/page' ) {
+			history.replace( {
+				postType: 'page',
+				...rest,
+			} );
+		}
+
+		if ( path === '/wp_template' ) {
+			history.replace( {
+				postType: TEMPLATE_POST_TYPE,
+				...rest,
+			} );
+		}
+
+		if ( path === '/patterns' ) {
+			history.replace( {
+				postType:
+					categoryType === TEMPLATE_PART_POST_TYPE
+						? TEMPLATE_PART_POST_TYPE
+						: PATTERN_TYPES.user,
+				...rest,
+			} );
+		}
 
-	// Note: Since "sidebar" is not yet supported here,
-	// returning undefined from "mobile" means show the sidebar.
+		if ( path === '/navigation' ) {
+			history.replace( {
+				postType: NAVIGATION_POST_TYPE,
+				...rest,
+			} );
+		}
+	}, [ history, params ] );
+}
+
+export default function useLayoutAreas() {
+	const isSiteEditorLoading = useIsSiteEditorLoading();
+	const { params } = useLocation();
+	const { postType, postId, path, layout, isCustom, canvas } = params;
+	useRedirectOldPaths();
 
 	// Page list
-	if ( path === '/page' ) {
+	if ( postType === 'page' ) {
 		const isListLayout = layout === 'list' || ! layout;
 		return {
-			key: 'pages-list',
+			key: 'pages',
 			areas: {
 				sidebar: (
 					<SidebarNavigationScreen
-						title={ __( 'Manage pages' ) }
+						title={ __( 'Pages' ) }
+						backPath={ {} }
 						content={ <DataViewsSidebarContent /> }
 					/>
 				),
 				content: <PagePages />,
-				preview: isListLayout && (
-					<Editor
-						isLoading={ isSiteEditorLoading }
-						onClick={ () =>
-							history.push( {
-								postType: 'page',
-								postId,
-								canvas: 'edit',
-							} )
-						}
-					/>
+				preview: ( isListLayout || canvas === 'edit' ) && (
+					<Editor isLoading={ isSiteEditorLoading } />
 				),
 				mobile:
 					canvas === 'edit' ? (
@@ -74,39 +109,17 @@ export default function useLayoutAreas() {
 		};
 	}
 
-	// Regular other post types
-	if ( postType && postId ) {
-		let sidebar;
-		if ( postType === 'wp_template_part' || postType === 'wp_block' ) {
-			sidebar = <SidebarNavigationScreenPattern />;
-		} else if ( postType === 'wp_template' ) {
-			sidebar = <SidebarNavigationScreenTemplate />;
-		} else if ( postType === 'page' ) {
-			sidebar = <SidebarNavigationScreenPage />;
-		} else {
-			sidebar = <SidebarNavigationScreenNavigationMenu />;
-		}
-		return {
-			key: 'page',
-			areas: {
-				sidebar,
-				preview: <Editor isLoading={ isSiteEditorLoading } />,
-				mobile: canvas === 'edit' && (
-					<Editor isLoading={ isSiteEditorLoading } />
-				),
-			},
-		};
-	}
-
 	// Templates
-	if ( path === '/wp_template' ) {
+	if ( postType === TEMPLATE_POST_TYPE ) {
 		const isListLayout = isCustom !== 'true' && layout === 'list';
 		return {
-			key: 'templates-list',
+			key: 'templates',
 			areas: {
-				sidebar: <SidebarNavigationScreenTemplatesBrowse />,
+				sidebar: (
+					<SidebarNavigationScreenTemplatesBrowse backPath={ {} } />
+				),
 				content: <PageTemplates />,
-				preview: isListLayout && (
+				preview: ( isListLayout || canvas === 'edit' ) && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
 				mobile: <PageTemplates />,
@@ -117,17 +130,19 @@ export default function useLayoutAreas() {
 		};
 	}
 
-	/* Patterns and Template Parts
-	 * `/wp_template_part/all` path is no longer used, but uses Patterns page screens for
-	 * backwards compatibility.
-	 */
-	if ( path === '/patterns' || path === '/wp_template_part/all' ) {
+	// Patterns
+	if (
+		[ TEMPLATE_PART_POST_TYPE, PATTERN_TYPES.user ].includes( postType )
+	) {
 		return {
 			key: 'patterns',
 			areas: {
-				sidebar: <SidebarNavigationScreenPatterns />,
+				sidebar: <SidebarNavigationScreenPatterns backPath={ {} } />,
 				content: <PagePatterns />,
 				mobile: <PagePatterns />,
+				preview: canvas === 'edit' && (
+					<Editor isLoading={ isSiteEditorLoading } />
+				),
 			},
 		};
 	}
@@ -137,7 +152,9 @@ export default function useLayoutAreas() {
 		return {
 			key: 'styles',
 			areas: {
-				sidebar: <SidebarNavigationScreenGlobalStyles />,
+				sidebar: (
+					<SidebarNavigationScreenGlobalStyles backPath={ {} } />
+				),
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
 				mobile: canvas === 'edit' && (
 					<Editor isLoading={ isSiteEditorLoading } />
@@ -147,11 +164,29 @@ export default function useLayoutAreas() {
 	}
 
 	// Navigation
-	if ( path === '/navigation' ) {
+	if ( postType === NAVIGATION_POST_TYPE ) {
+		if ( postId ) {
+			return {
+				key: 'navigation',
+				areas: {
+					sidebar: (
+						<SidebarNavigationScreenNavigationMenu
+							backPath={ { postType: NAVIGATION_POST_TYPE } }
+						/>
+					),
+					preview: <Editor isLoading={ isSiteEditorLoading } />,
+					mobile: canvas === 'edit' && (
+						<Editor isLoading={ isSiteEditorLoading } />
+					),
+				},
+			};
+		}
 		return {
-			key: 'styles',
+			key: 'navigation',
 			areas: {
-				sidebar: <SidebarNavigationScreenNavigationMenus />,
+				sidebar: (
+					<SidebarNavigationScreenNavigationMenus backPath={ {} } />
+				),
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
 				mobile: canvas === 'edit' && (
 					<Editor isLoading={ isSiteEditorLoading } />
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 00b67f00f6f23..8c15cdae33881 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -118,7 +118,7 @@
 		justify-content: flex-end;
 	}
 
-	& > div {
+	.edit-site-resizable-frame__inner {
 		color: $gray-900;
 	}
 
@@ -128,6 +128,7 @@
 		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;
 			// This ensure the radius work properly.
 			overflow: hidden;
@@ -142,10 +143,6 @@
 		top: 0;
 		bottom: 0;
 		width: 100%;
-
-		& > div {
-			border-radius: 0;
-		}
 	}
 }
 
@@ -172,7 +169,6 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border-bottom: 1px solid transparent;
 
 	&:hover,
 	&:active {
@@ -279,3 +275,11 @@
 		margin: $canvas-padding $canvas-padding $canvas-padding 0;
 	}
 }
+
+.edit-site .components-editor-notices__snackbar {
+	position: fixed;
+	right: 0;
+	bottom: 16px;
+	padding-left: 16px;
+	padding-right: 16px;
+}
diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/index.js b/packages/edit-site/src/components/more-menu/index.js
similarity index 94%
rename from packages/edit-site/src/components/header-edit-mode/more-menu/index.js
rename to packages/edit-site/src/components/more-menu/index.js
index f0df5cf57fe6f..4c4e9bb45c093 100644
--- a/packages/edit-site/src/components/header-edit-mode/more-menu/index.js
+++ b/packages/edit-site/src/components/more-menu/index.js
@@ -10,7 +10,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
  */
 import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
-import { unlock } from '../../../lock-unlock';
+import { unlock } from '../../lock-unlock';
 
 const { ToolsMoreMenuGroup, PreferencesModal } = unlock( editorPrivateApis );
 
diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/site-export.js b/packages/edit-site/src/components/more-menu/site-export.js
similarity index 100%
rename from packages/edit-site/src/components/header-edit-mode/more-menu/site-export.js
rename to packages/edit-site/src/components/more-menu/site-export.js
diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/welcome-guide-menu-item.js b/packages/edit-site/src/components/more-menu/welcome-guide-menu-item.js
similarity index 100%
rename from packages/edit-site/src/components/header-edit-mode/more-menu/welcome-guide-menu-item.js
rename to packages/edit-site/src/components/more-menu/welcome-guide-menu-item.js
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index 8ac080c0ac97f..c20fff8851c82 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -1,11 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { Button, __experimentalHStack as HStack } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
+import {
+	createInterpolateElement,
+	useState,
+	useMemo,
+	useCallback,
+	useEffect,
+} from '@wordpress/element';
 import { dateI18n, getDate, getSettings } from '@wordpress/date';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -32,16 +38,22 @@ import {
 import AddNewPageModal from '../add-new-page';
 import Media from '../media';
 import { unlock } from '../../lock-unlock';
+import { useEditPostAction } from '../dataviews-actions';
 
 const { usePostActions } = unlock( editorPrivateApis );
-
 const { useLocation, useHistory } = unlock( routerPrivateApis );
-
 const EMPTY_ARRAY = [];
 
+const getFormattedDate = ( dateToDisplay ) =>
+	dateI18n(
+		getSettings().formats.datetimeAbbreviated,
+		getDate( dateToDisplay )
+	);
+
 function useView( postType ) {
-	const { params } = useLocation();
-	const { activeView = 'all', isCustom = 'false', layout } = params;
+	const {
+		params: { activeView = 'all', isCustom = 'false', layout },
+	} = useLocation();
 	const history = useHistory();
 	const selectedDefaultView = useMemo( () => {
 		const defaultView =
@@ -117,6 +129,7 @@ function useView( postType ) {
 	const setDefaultViewAndUpdateUrl = useCallback(
 		( viewToSet ) => {
 			if ( viewToSet.type !== view?.type ) {
+				const { params } = history.getLocationWithParams();
 				history.push( {
 					...params,
 					layout: viewToSet.type,
@@ -124,7 +137,7 @@ function useView( postType ) {
 			}
 			setView( viewToSet );
 		},
-		[ params, view?.type, history ]
+		[ history, view?.type ]
 	);
 
 	if ( isCustom === 'false' ) {
@@ -188,46 +201,25 @@ function FeaturedImage( { item, viewType } ) {
 	);
 }
 
-let PAGE_ACTIONS = [
-	'edit-post',
-	'view-post',
-	'restore',
-	'permanently-delete',
-	'view-post-revisions',
-	'rename-post',
-	'move-to-trash',
-];
-
-if ( process.env.IS_GUTENBERG_PLUGIN ) {
-	PAGE_ACTIONS = [
-		'edit-post',
-		'view-post',
-		'restore',
-		'permanently-delete',
-		'view-post-revisions',
-		'duplicate-post',
-		'rename-post',
-		'move-to-trash',
-	];
-}
-
 export default function PagePages() {
 	const postType = 'page';
 	const [ view, setView ] = useView( postType );
 	const history = useHistory();
-	const { params } = useLocation();
-	const { isCustom = 'false' } = params;
 
 	const onSelectionChange = useCallback(
 		( items ) => {
-			if ( isCustom === 'false' && view?.type === LAYOUT_LIST ) {
+			const { params } = history.getLocationWithParams();
+			if (
+				( params.isCustom ?? 'false' ) === 'false' &&
+				view?.type === LAYOUT_LIST
+			) {
 				history.push( {
 					...params,
 					postId: items.length === 1 ? items[ 0 ].id : undefined,
 				} );
 			}
 		},
-		[ history, params, view?.type, isCustom ]
+		[ history, view?.type ]
 	);
 
 	const queryArgs = useMemo( () => {
@@ -285,6 +277,16 @@ export default function PagePages() {
 		[ totalItems, totalPages ]
 	);
 
+	const { frontPageId, postsPageId, addNewLabel } = useSelect( ( select ) => {
+		const { getEntityRecord, getPostType } = select( coreStore );
+		const siteSettings = getEntityRecord( 'root', 'site' );
+		return {
+			frontPageId: siteSettings?.page_on_front,
+			postsPageId: siteSettings?.page_for_posts,
+			addNewLabel: getPostType( 'page' )?.labels?.add_new_item,
+		};
+	} );
+
 	const fields = useMemo(
 		() => [
 			{
@@ -305,7 +307,7 @@ export default function PagePages() {
 					const addLink =
 						[ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
 						item.status !== 'trash';
-					return addLink ? (
+					const title = addLink ? (
 						<Link
 							params={ {
 								postId: item.id,
@@ -317,8 +319,36 @@ export default function PagePages() {
 								__( '(no title)' ) }
 						</Link>
 					) : (
-						decodeEntities( item.title?.rendered ) ||
-							__( '(no title)' )
+						<span>
+							{ decodeEntities( item.title?.rendered ) ||
+								__( '(no title)' ) }
+						</span>
+					);
+
+					let suffix = '';
+					if ( item.id === frontPageId ) {
+						suffix = (
+							<span className="edit-site-page-pages__title-badge">
+								{ __( 'Front Page' ) }
+							</span>
+						);
+					} else if ( item.id === postsPageId ) {
+						suffix = (
+							<span className="edit-site-page-pages__title-badge">
+								{ __( 'Posts Page' ) }
+							</span>
+						);
+					}
+
+					return (
+						<HStack
+							className="edit-site-page-pages-title"
+							alignment="center"
+							justify="flex-start"
+						>
+							{ title }
+							{ suffix }
+						</HStack>
 					);
 				},
 				maxWidth: 300,
@@ -350,30 +380,89 @@ export default function PagePages() {
 				header: __( 'Date' ),
 				id: 'date',
 				render: ( { item } ) => {
-					const formattedDate = dateI18n(
-						getSettings().formats.datetimeAbbreviated,
-						getDate( item.date )
+					const isDraftOrPrivate = [ 'draft', 'private' ].includes(
+						item.status
 					);
-					return <time>{ formattedDate }</time>;
+					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 ]
+		[ authors, view.type, frontPageId, postsPageId ]
 	);
-	const onActionPerformed = useCallback(
-		( actionId, items ) => {
-			if ( actionId === 'edit-post' ) {
-				const post = items[ 0 ];
-				history.push( {
-					postId: post.id,
-					postType: post.type,
-					canvas: 'edit',
-				} );
-			}
-		},
-		[ history ]
+
+	const postTypeActions = usePostActions( 'page' );
+	const editAction = useEditPostAction();
+	const actions = useMemo(
+		() => [ editAction, ...postTypeActions ],
+		[ postTypeActions, editAction ]
 	);
-	const actions = usePostActions( onActionPerformed, PAGE_ACTIONS );
+
 	const onChangeView = useCallback(
 		( newView ) => {
 			if ( newView.type !== view.type ) {
@@ -403,22 +492,27 @@ export default function PagePages() {
 		closeModal();
 	};
 
-	// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
 	return (
 		<Page
 			title={ __( 'Pages' ) }
 			actions={
-				<>
-					<Button variant="primary" onClick={ openModal }>
-						{ __( 'Add new page' ) }
-					</Button>
-					{ showAddPageModal && (
-						<AddNewPageModal
-							onSave={ handleNewPage }
-							onClose={ closeModal }
-						/>
-					) }
-				</>
+				addNewLabel && (
+					<>
+						<Button
+							variant="primary"
+							onClick={ openModal }
+							__next40pxDefaultSize
+						>
+							{ addNewLabel }
+						</Button>
+						{ showAddPageModal && (
+							<AddNewPageModal
+								onSave={ handleNewPage }
+								onClose={ closeModal }
+							/>
+						) }
+					</>
+				)
 			}
 		>
 			<DataViews
diff --git a/packages/edit-site/src/components/page-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss
index 9fcc5571d19d9..41dcac76e27b5 100644
--- a/packages/edit-site/src/components/page-pages/style.scss
+++ b/packages/edit-site/src/components/page-pages/style.scss
@@ -51,3 +51,18 @@
 		outline: 2px solid transparent;
 	}
 }
+
+.edit-site-page-pages-title span {
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.edit-site-page-pages__title-badge {
+	background: $gray-100;
+	color: $gray-700;
+	padding: 0 $grid-unit-05;
+	border-radius: $radius-block-ui;
+	font-size: 12px;
+	font-weight: 400;
+	flex-shrink: 0;
+}
diff --git a/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js b/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js
deleted file mode 100644
index 12a2b99e7dbcb..0000000000000
--- a/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js
+++ /dev/null
@@ -1,439 +0,0 @@
-/**
- * External dependencies
- */
-import { paramCase as kebabCase } from 'change-case';
-import { downloadZip } from 'client-zip';
-
-/**
- * WordPress dependencies
- */
-import { downloadBlob } from '@wordpress/blob';
-import { __, _x, sprintf } from '@wordpress/i18n';
-import {
-	Button,
-	TextControl,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	__experimentalText as Text,
-} from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { store as noticesStore } from '@wordpress/notices';
-import { decodeEntities } from '@wordpress/html-entities';
-import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
-import { store as editorStore } from '@wordpress/editor';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-import {
-	PATTERN_TYPES,
-	TEMPLATE_PART_POST_TYPE,
-	PATTERN_DEFAULT_CATEGORY,
-} from '../../utils/constants';
-import { CreateTemplatePartModalContents } from '../create-template-part-modal';
-
-const { useHistory, useLocation } = unlock( routerPrivateApis );
-const { CreatePatternModalContents, useDuplicatePatternProps } =
-	unlock( patternsPrivateApis );
-
-function getJsonFromItem( item ) {
-	return JSON.stringify(
-		{
-			__file: item.type,
-			title: item.title || item.name,
-			content: item.patternPost.content.raw,
-			syncStatus: item.patternPost.wp_pattern_sync_status,
-		},
-		null,
-		2
-	);
-}
-
-export const exportJSONaction = {
-	id: 'export-pattern',
-	label: __( 'Export as JSON' ),
-	supportsBulk: true,
-	isEligible: ( item ) => item.type === PATTERN_TYPES.user,
-	callback: async ( items ) => {
-		if ( items.length === 1 ) {
-			return downloadBlob(
-				`${ kebabCase( items[ 0 ].title || items[ 0 ].name ) }.json`,
-				getJsonFromItem( items[ 0 ] ),
-				'application/json'
-			);
-		}
-		const nameCount = {};
-		const filesToZip = items.map( ( item ) => {
-			const name = kebabCase( item.title || item.name );
-			nameCount[ name ] = ( nameCount[ name ] || 0 ) + 1;
-			return {
-				name: `${
-					name +
-					( nameCount[ name ] > 1
-						? '-' + ( nameCount[ name ] - 1 )
-						: '' )
-				}.json`,
-				lastModified: new Date(),
-				input: getJsonFromItem( item ),
-			};
-		} );
-		return downloadBlob(
-			__( 'patterns-export' ) + '.zip',
-			await downloadZip( filesToZip ).blob(),
-			'application/zip'
-		);
-	},
-};
-
-export const renameAction = {
-	id: 'rename-pattern',
-	label: __( 'Rename' ),
-	isEligible: ( item ) => {
-		const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-		const isUserPattern = item.type === PATTERN_TYPES.user;
-		const isCustomPattern =
-			isUserPattern || ( isTemplatePart && item.isCustom );
-		const hasThemeFile = isTemplatePart && item.templatePart.has_theme_file;
-		return isCustomPattern && ! hasThemeFile;
-	},
-	RenderModal: ( { items, closeModal } ) => {
-		const [ item ] = items;
-		const [ title, setTitle ] = useState( () => item.title );
-		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(
-					item.type === TEMPLATE_PART_POST_TYPE
-						? __( 'Template part renamed.' )
-						: __( 'Pattern renamed.' ),
-					{ type: 'snackbar' }
-				);
-			} catch ( error ) {
-				const fallbackErrorMessage =
-					item.type === TEMPLATE_PART_POST_TYPE
-						? __(
-								'An error occurred while renaming the template part.'
-						  )
-						: __( 'An error occurred while renaming the pattern.' );
-				const errorMessage =
-					error.message && error.code !== 'unknown_error'
-						? error.message
-						: fallbackErrorMessage;
-				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>
-		);
-	},
-};
-
-const canDeleteOrReset = ( item ) => {
-	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-	const isUserPattern = item.type === PATTERN_TYPES.user;
-	return isUserPattern || ( isTemplatePart && item.isCustom );
-};
-
-export const deleteAction = {
-	id: 'delete-pattern',
-	label: __( 'Delete' ),
-	isEligible: ( item ) => {
-		const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-		const hasThemeFile = isTemplatePart && item.templatePart.has_theme_file;
-		return canDeleteOrReset( item ) && ! hasThemeFile;
-	},
-	hideModalHeader: true,
-	supportsBulk: true,
-	RenderModal: ( { items, closeModal, onPerform } ) => {
-		const { __experimentalDeleteReusableBlock } =
-			useDispatch( reusableBlocksStore );
-		const { createErrorNotice, createSuccessNotice } =
-			useDispatch( noticesStore );
-		const { removeTemplates } = unlock( useDispatch( editorStore ) );
-
-		const deletePattern = async () => {
-			const promiseResult = await Promise.allSettled(
-				items.map( ( item ) => {
-					return __experimentalDeleteReusableBlock( item.id );
-				} )
-			);
-			// 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" deleted.' ),
-						items[ 0 ].title
-					);
-				} else {
-					successMessage = __( 'The patterns were deleted.' );
-				}
-				createSuccessNotice( successMessage, {
-					type: 'snackbar',
-					id: 'edit-site-page-trashed',
-				} );
-			} else {
-				// If there was at lease one failure.
-				let errorMessage;
-				// If we were trying to delete a single pattern.
-				if ( promiseResult.length === 1 ) {
-					if ( promiseResult[ 0 ].reason?.message ) {
-						errorMessage = promiseResult[ 0 ].reason.message;
-					} else {
-						errorMessage = __(
-							'An error occurred while deleting the pattern.'
-						);
-					}
-					// If we were trying to delete multiple patterns.
-				} else {
-					const errorMessages = new Set();
-					const failedPromises = promiseResult.filter(
-						( { status } ) => status === 'rejected'
-					);
-					for ( const failedPromise of failedPromises ) {
-						if ( failedPromise.reason?.message ) {
-							errorMessages.add( failedPromise.reason.message );
-						}
-					}
-					if ( errorMessages.size === 0 ) {
-						errorMessage = __(
-							'An error occurred while deleting the patterns.'
-						);
-					} else if ( errorMessages.size === 1 ) {
-						errorMessage = sprintf(
-							/* translators: %s: an error message */
-							__(
-								'An error occurred while deleting the patterns: %s'
-							),
-							[ ...errorMessages ][ 0 ]
-						);
-					} else {
-						errorMessage = sprintf(
-							/* translators: %s: a list of comma separated error messages */
-							__(
-								'Some errors occurred while deleting the patterns: %s'
-							),
-							[ ...errorMessages ].join( ',' )
-						);
-					}
-					createErrorNotice( errorMessage, {
-						type: 'snackbar',
-					} );
-				}
-			}
-		};
-		const deleteItem = () => {
-			if ( items[ 0 ].type === TEMPLATE_PART_POST_TYPE ) {
-				removeTemplates( items );
-			} else {
-				deletePattern();
-			}
-			if ( onPerform ) {
-				onPerform();
-			}
-			closeModal();
-		};
-		let questionMessage;
-		if ( items.length === 1 ) {
-			questionMessage = sprintf(
-				// translators: %s: The page's title.
-				__( 'Are you sure you want to delete "%s"?' ),
-				decodeEntities( items[ 0 ].title || items[ 0 ].name )
-			);
-		} else if (
-			items.length > 1 &&
-			items[ 0 ].type === TEMPLATE_PART_POST_TYPE
-		) {
-			questionMessage = sprintf(
-				// translators: %d: The number of template parts (2 or more).
-				__( 'Are you sure you want to delete %d template parts?' ),
-				items.length
-			);
-		} else {
-			questionMessage = sprintf(
-				// translators: %d: The number of patterns (2 or more).
-				__( 'Are you sure you want to delete %d patterns?' ),
-				items.length
-			);
-		}
-		return (
-			<VStack spacing="5">
-				<Text>{ questionMessage }</Text>
-				<HStack justify="right">
-					<Button variant="tertiary" onClick={ closeModal }>
-						{ __( 'Cancel' ) }
-					</Button>
-					<Button variant="primary" onClick={ deleteItem }>
-						{ __( 'Delete' ) }
-					</Button>
-				</HStack>
-			</VStack>
-		);
-	},
-};
-
-export const resetAction = {
-	id: 'reset-action',
-	label: __( 'Reset' ),
-	isEligible: ( item ) => {
-		const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-		const hasThemeFile = isTemplatePart && item.templatePart.has_theme_file;
-		return canDeleteOrReset( item ) && hasThemeFile;
-	},
-	hideModalHeader: true,
-	RenderModal: ( { items, closeModal } ) => {
-		const [ item ] = items;
-		const { removeTemplate } = useDispatch( editSiteStore );
-		return (
-			<VStack spacing="5">
-				<Text>
-					{ __( 'Reset to default and clear all customizations?' ) }
-				</Text>
-				<HStack justify="right">
-					<Button variant="tertiary" onClick={ closeModal }>
-						{ __( 'Cancel' ) }
-					</Button>
-					<Button
-						variant="primary"
-						onClick={ () => removeTemplate( item ) }
-					>
-						{ __( 'Reset' ) }
-					</Button>
-				</HStack>
-			</VStack>
-		);
-	},
-};
-
-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 {
-			params: { categoryId = PATTERN_DEFAULT_CATEGORY },
-		} = useLocation();
-		const isThemePattern = item.type === PATTERN_TYPES.theme;
-		const history = useHistory();
-		function onPatternSuccess( { pattern } ) {
-			history.push( {
-				categoryType: PATTERN_TYPES.theme,
-				categoryId,
-				postType: PATTERN_TYPES.user,
-				postId: pattern.id,
-			} );
-			closeModal();
-		}
-		const duplicatedProps = useDuplicatePatternProps( {
-			pattern: isThemePattern ? item : item.patternPost,
-			onSuccess: onPatternSuccess,
-		} );
-		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 { createSuccessNotice } = useDispatch( noticesStore );
-		const {
-			params: { categoryId = PATTERN_DEFAULT_CATEGORY },
-		} = useLocation();
-		const history = useHistory();
-		function onTemplatePartSuccess( templatePart ) {
-			createSuccessNotice(
-				sprintf(
-					// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
-					__( '"%s" duplicated.' ),
-					item.title
-				),
-				{ type: 'snackbar', id: 'edit-site-patterns-success' }
-			);
-			history.push( {
-				postType: TEMPLATE_PART_POST_TYPE,
-				postId: templatePart?.id,
-				categoryType: TEMPLATE_PART_POST_TYPE,
-				categoryId,
-			} );
-			closeModal();
-		}
-		return (
-			<CreateTemplatePartModalContents
-				blocks={ item.blocks }
-				defaultArea={ item.templatePart.area }
-				defaultTitle={ sprintf(
-					/* translators: %s: Existing template part title */
-					__( '%s (Copy)' ),
-					item.title
-				) }
-				onCreate={ onTemplatePartSuccess }
-				onError={ closeModal }
-				confirmLabel={ _x( 'Duplicate', 'action label' ) }
-			/>
-		);
-	},
-};
diff --git a/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js b/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js
index adb33e71816e5..d366ed6fb3a0e 100644
--- a/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js
+++ b/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js
@@ -60,8 +60,7 @@ export default function DeleteCategoryMenuItem( { category, onClose } ) {
 
 			onClose?.();
 			history.push( {
-				path: `/patterns`,
-				categoryType: PATTERN_TYPES.theme,
+				postType: PATTERN_TYPES.user,
 				categoryId: PATTERN_DEFAULT_CATEGORY,
 			} );
 		} catch ( error ) {
diff --git a/packages/edit-site/src/components/page-patterns/header.js b/packages/edit-site/src/components/page-patterns/header.js
index 85ca443cff3b5..a128daa6ed58f 100644
--- a/packages/edit-site/src/components/page-patterns/header.js
+++ b/packages/edit-site/src/components/page-patterns/header.js
@@ -17,6 +17,7 @@ import { moreVertical } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import AddNewPattern from '../add-new-pattern';
 import RenameCategoryMenuItem from './rename-category-menu-item';
 import DeleteCategoryMenuItem from './delete-category-menu-item';
 import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
@@ -44,7 +45,7 @@ export default function PatternsHeader( {
 		description =
 			templatePartArea?.description ||
 			__( 'Includes every template part defined for any area.' );
-	} else if ( type === PATTERN_TYPES.theme ) {
+	} else if ( type === PATTERN_TYPES.user && !! categoryId ) {
 		patternCategory = patternCategories.find(
 			( category ) => category.name === categoryId
 		);
@@ -57,42 +58,53 @@ export default function PatternsHeader( {
 	}
 
 	return (
-		<VStack className="edit-site-patterns__section-header">
-			<HStack justify="space-between">
-				<Heading as="h2" level={ 4 } id={ titleId }>
+		<VStack className="edit-site-patterns__section-header" spacing={ 0 }>
+			<HStack
+				justify="space-between"
+				className="edit-site-patterns__title"
+			>
+				<Heading as="h2" level={ 3 } id={ titleId } weight={ 500 }>
 					{ title }
 				</Heading>
-				{ !! patternCategory?.id && (
-					<DropdownMenu
-						icon={ moreVertical }
-						label={ __( 'Actions' ) }
-						toggleProps={ {
-							className: 'edit-site-patterns__button',
-							describedBy: sprintf(
-								/* translators: %s: pattern category name */
-								__( 'Action menu for %s pattern category' ),
-								title
-							),
-							size: 'compact',
-						} }
-					>
-						{ ( { onClose } ) => (
-							<MenuGroup>
-								<RenameCategoryMenuItem
-									category={ patternCategory }
-									onClose={ onClose }
-								/>
-								<DeleteCategoryMenuItem
-									category={ patternCategory }
-									onClose={ onClose }
-								/>
-							</MenuGroup>
-						) }
-					</DropdownMenu>
-				) }
+				<HStack expanded={ false }>
+					<AddNewPattern />
+					{ !! patternCategory?.id && (
+						<DropdownMenu
+							icon={ moreVertical }
+							label={ __( 'Actions' ) }
+							toggleProps={ {
+								className: 'edit-site-patterns__button',
+								describedBy: sprintf(
+									/* translators: %s: pattern category name */
+									__( 'Action menu for %s pattern category' ),
+									title
+								),
+								size: 'compact',
+							} }
+						>
+							{ ( { onClose } ) => (
+								<MenuGroup>
+									<RenameCategoryMenuItem
+										category={ patternCategory }
+										onClose={ onClose }
+									/>
+									<DeleteCategoryMenuItem
+										category={ patternCategory }
+										onClose={ onClose }
+									/>
+								</MenuGroup>
+							) }
+						</DropdownMenu>
+					) }
+				</HStack>
 			</HStack>
 			{ description ? (
-				<Text variant="muted" as="p" id={ descriptionId }>
+				<Text
+					variant="muted"
+					as="p"
+					id={ descriptionId }
+					className="edit-site-patterns__sub-title"
+				>
 					{ description }
 				</Text>
 			) : null }
diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js
index 2b45bdc3ebc54..223ede9ac1d98 100644
--- a/packages/edit-site/src/components/page-patterns/index.js
+++ b/packages/edit-site/src/components/page-patterns/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -46,26 +46,19 @@ import {
 	PATTERN_DEFAULT_CATEGORY,
 	OPERATOR_IS,
 } from '../../utils/constants';
-import {
-	exportJSONaction,
-	renameAction,
-	resetAction,
-	deleteAction,
-	duplicatePatternAction,
-	duplicateTemplatePartAction,
-} from './dataviews-pattern-actions';
 import usePatternSettings from './use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 import usePatterns from './use-patterns';
 import PatternsHeader from './header';
 import { useLink } from '../routes/link';
 import { useAddedBy } from '../page-templates/hooks';
+import { useEditPostAction } from '../dataviews-actions';
 
 const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 	blockEditorPrivateApis
 );
 const { usePostActions } = unlock( editorPrivateApis );
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useLocation } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 const defaultConfigPerViewType = {
@@ -123,7 +116,7 @@ function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
 	);
 }
 
-function Preview( { item, categoryId, viewType } ) {
+function Preview( { item, viewType } ) {
 	const descriptionId = useId();
 	const isUserPattern = item.type === PATTERN_TYPES.user;
 	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
@@ -133,8 +126,6 @@ function Preview( { item, categoryId, viewType } ) {
 	const { onClick } = useLink( {
 		postType: item.type,
 		postId: isUserPattern ? item.id : item.name,
-		categoryId,
-		categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme,
 		canvas: 'edit',
 	} );
 
@@ -177,12 +168,9 @@ function Author( { item, viewType } ) {
 		<HStack alignment="left" spacing={ 1 }>
 			{ withIcon && imageUrl && (
 				<div
-					className={ classnames(
-						'page-templates-author-field__avatar',
-						{
-							'is-loaded': isImageLoaded,
-						}
-					) }
+					className={ clsx( 'page-templates-author-field__avatar', {
+						'is-loaded': isImageLoaded,
+					} ) }
 				>
 					<img
 						onLoad={ () => setIsImageLoaded( true ) }
@@ -201,14 +189,11 @@ function Author( { item, viewType } ) {
 	);
 }
 
-function Title( { item, categoryId } ) {
+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 ? item.id : item.name,
-		categoryId,
-		categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme,
 		canvas: 'edit',
 	} );
 	return (
@@ -251,25 +236,19 @@ function Title( { item, categoryId } ) {
 
 export default function DataviewsPatterns() {
 	const {
-		params: { categoryType, categoryId: categoryIdFromURL },
+		params: { postType, categoryId: categoryIdFromURL },
 	} = useLocation();
-	const type = categoryType || PATTERN_TYPES.theme;
+	const type = postType || PATTERN_TYPES.user;
 	const categoryId = categoryIdFromURL || PATTERN_DEFAULT_CATEGORY;
 	const [ view, setView ] = useState( DEFAULT_VIEW );
-	const isUncategorizedThemePatterns =
-		type === PATTERN_TYPES.theme && categoryId === 'uncategorized';
 	const previousCategoryId = usePrevious( categoryId );
 	const viewSyncStatus = view.filters?.find(
 		( { field } ) => field === 'sync-status'
 	)?.value;
-	const { patterns, isResolving } = usePatterns(
-		type,
-		isUncategorizedThemePatterns ? '' : categoryId,
-		{
-			search: view.search,
-			syncStatus: viewSyncStatus,
-		}
-	);
+	const { patterns, isResolving } = usePatterns( type, categoryId, {
+		search: view.search,
+		syncStatus: viewSyncStatus,
+	} );
 
 	const { records } = useEntityRecords( 'postType', TEMPLATE_PART_POST_TYPE, {
 		per_page: -1,
@@ -294,11 +273,7 @@ export default function DataviewsPatterns() {
 				header: __( 'Preview' ),
 				id: 'preview',
 				render: ( { item } ) => (
-					<Preview
-						item={ item }
-						categoryId={ categoryId }
-						viewType={ view.type }
-					/>
+					<Preview item={ item } viewType={ view.type } />
 				),
 				enableSorting: false,
 				enableHiding: false,
@@ -307,14 +282,12 @@ export default function DataviewsPatterns() {
 			{
 				header: __( 'Title' ),
 				id: 'title',
-				render: ( { item } ) => (
-					<Title item={ item } categoryId={ categoryId } />
-				),
+				render: ( { item } ) => <Title item={ item } />,
 				enableHiding: false,
 			},
 		];
 
-		if ( type === PATTERN_TYPES.theme ) {
+		if ( type === PATTERN_TYPES.user ) {
 			_fields.push( {
 				header: __( 'Sync status' ),
 				id: 'sync-status',
@@ -359,7 +332,7 @@ export default function DataviewsPatterns() {
 		}
 
 		return _fields;
-	}, [ view.type, categoryId, type, authors ] );
+	}, [ view.type, type, authors ] );
 
 	// Reset the page number when the category changes.
 	useEffect( () => {
@@ -378,45 +351,16 @@ export default function DataviewsPatterns() {
 		return filterSortAndPaginate( patterns, viewWithoutFilters, fields );
 	}, [ patterns, view, fields, type ] );
 
-	const history = useHistory();
-	const onActionPerformed = useCallback(
-		( actionId, items ) => {
-			if ( actionId === 'edit-post' ) {
-				const post = items[ 0 ];
-				history.push( {
-					postId: post.id,
-					postType: post.type,
-					categoryId,
-					categoryType: type,
-					canvas: 'edit',
-				} );
-			}
-		},
-		[ history, categoryId, type ]
-	);
-	const [ editAction, viewRevisionsAction ] = usePostActions(
-		onActionPerformed,
-		[ 'edit-post', 'view-post-revisions' ]
-	);
+	const templatePartActions = usePostActions( TEMPLATE_PART_POST_TYPE );
+	const patternActions = usePostActions( PATTERN_TYPES.user );
+	const editAction = useEditPostAction();
+
 	const actions = useMemo( () => {
 		if ( type === TEMPLATE_PART_POST_TYPE ) {
-			return [
-				editAction,
-				renameAction,
-				duplicateTemplatePartAction,
-				viewRevisionsAction,
-				resetAction,
-				deleteAction,
-			];
+			return [ editAction, ...templatePartActions ].filter( Boolean );
 		}
-		return [
-			renameAction,
-			duplicatePatternAction,
-			exportJSONaction,
-			resetAction,
-			deleteAction,
-		];
-	}, [ type, editAction, viewRevisionsAction ] );
+		return [ editAction, ...patternActions ].filter( Boolean );
+	}, [ editAction, type, templatePartActions, patternActions ] );
 	const onChangeView = useCallback(
 		( newView ) => {
 			if ( newView.type !== view.type ) {
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index 5492ae494b6c7..6de771389a73d 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -1,15 +1,3 @@
-.edit-site-patterns__header {
-	position: sticky;
-	top: 0;
-	background: $gray-900;
-	padding: $grid-unit-40 $grid-unit-40 $grid-unit-20;
-	z-index: z-index(".edit-site-patterns__header");
-
-	.edit-site-patterns__button {
-		color: $gray-600;
-	}
-}
-
 .edit-site-patterns__section-header {
 	.screen-reader-shortcut:focus {
 		top: 0;
@@ -99,11 +87,22 @@
 
 	.edit-site-patterns__section-header {
 		border-bottom: 1px solid #f0f0f0;
-		min-height: 72px;
-		padding: $grid-unit-20 $grid-unit-40;
+		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;
+		}
+
+		.edit-site-patterns__sub-title {
+			margin-bottom: $grid-unit-10;
+		}
 	}
 
 	.edit-site-patterns__pattern-title {
@@ -160,3 +159,11 @@
 		}
 	}
 }
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.edit-site-page-patterns-dataviews .edit-site-patterns__section-header {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+}
diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js
index 68c70d9447be8..32377edcd9684 100644
--- a/packages/edit-site/src/components/page-patterns/use-patterns.js
+++ b/packages/edit-site/src/components/page-patterns/use-patterns.js
@@ -291,21 +291,28 @@ const selectUserPatterns = createSelector(
 );
 
 export const usePatterns = (
-	categoryType,
+	postType,
 	categoryId,
 	{ search = '', syncStatus } = {}
 ) => {
 	return useSelect(
 		( select ) => {
-			if ( categoryType === TEMPLATE_PART_POST_TYPE ) {
+			if ( postType === TEMPLATE_PART_POST_TYPE ) {
 				return selectTemplatePartsAsPatterns(
 					select,
 					categoryId,
 					search
 				);
-			} else if ( categoryType === PATTERN_TYPES.theme ) {
-				return selectPatterns( select, categoryId, syncStatus, search );
-			} else if ( categoryType === PATTERN_TYPES.user ) {
+			} else if ( postType === PATTERN_TYPES.user && !! categoryId ) {
+				const appliedCategory =
+					categoryId === 'uncategorized' ? '' : categoryId;
+				return selectPatterns(
+					select,
+					appliedCategory,
+					syncStatus,
+					search
+				);
+			} else if ( postType === PATTERN_TYPES.user ) {
 				return selectUserPatterns( select, syncStatus, search );
 			}
 			return {
@@ -313,7 +320,7 @@ export const usePatterns = (
 				isResolving: false,
 			};
 		},
-		[ categoryId, categoryType, search, syncStatus ]
+		[ categoryId, postType, search, syncStatus ]
 	);
 };
 
diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
index bec62a292ada6..fc9326a219105 100644
--- a/packages/edit-site/src/components/page-templates/index.js
+++ b/packages/edit-site/src/components/page-templates/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -43,6 +43,7 @@ import {
 
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
+import { useEditPostAction } from '../dataviews-actions';
 
 const { usePostActions } = unlock( editorPrivateApis );
 
@@ -111,12 +112,9 @@ function AuthorField( { item, viewType } ) {
 		<HStack alignment="left" spacing={ 1 }>
 			{ withIcon && imageUrl && (
 				<div
-					className={ classnames(
-						'page-templates-author-field__avatar',
-						{
-							'is-loaded': isImageLoaded,
-						}
-					) }
+					className={ clsx( 'page-templates-author-field__avatar', {
+						'is-loaded': isImageLoaded,
+					} ) }
 				>
 					<img
 						onLoad={ () => setIsImageLoaded( true ) }
@@ -186,14 +184,6 @@ function Preview( { item, viewType } ) {
 	);
 }
 
-const TEMPLATE_ACTIONS = [
-	'edit-post',
-	'reset-template',
-	'rename-template',
-	'view-post-revisions',
-	'delete-template',
-];
-
 export default function PageTemplates() {
 	const { params } = useLocation();
 	const { activeView = 'all', layout } = params;
@@ -333,22 +323,13 @@ export default function PageTemplates() {
 		return filterSortAndPaginate( records, view, fields );
 	}, [ records, view, fields ] );
 
-	const onActionPerformed = useCallback(
-		( actionId, items ) => {
-			if ( actionId === 'edit-post' ) {
-				const post = items[ 0 ];
-				history.push( {
-					postId: post.id,
-					postType: post.type,
-					canvas: 'edit',
-				} );
-			}
-		},
-		[ history ]
+	const postTypeActions = usePostActions( TEMPLATE_POST_TYPE );
+	const editAction = useEditPostAction();
+	const actions = useMemo(
+		() => [ editAction, ...postTypeActions ],
+		[ postTypeActions, editAction ]
 	);
 
-	const actions = usePostActions( onActionPerformed, TEMPLATE_ACTIONS );
-
 	const onChangeView = useCallback(
 		( newView ) => {
 			if ( newView.type !== view.type ) {
diff --git a/packages/edit-site/src/components/page/header.js b/packages/edit-site/src/components/page/header.js
index 274fd395a16f1..f138fa8fae09d 100644
--- a/packages/edit-site/src/components/page/header.js
+++ b/packages/edit-site/src/components/page/header.js
@@ -5,7 +5,7 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
-	FlexBlock,
+	__experimentalVStack as VStack,
 	FlexItem,
 } from '@wordpress/components';
 
@@ -15,8 +15,8 @@ import {
 
 export default function Header( { title, subTitle, actions } ) {
 	return (
-		<HStack as="header" alignment="left" className="edit-site-page-header">
-			<FlexBlock className="edit-site-page-header__page-title">
+		<VStack className="edit-site-page-header" as="header" spacing={ 0 }>
+			<HStack className="edit-site-page-header__page-title">
 				<Heading
 					as="h2"
 					level={ 3 }
@@ -25,15 +25,19 @@ export default function Header( { title, subTitle, actions } ) {
 				>
 					{ title }
 				</Heading>
-				{ subTitle && (
-					<Text as="p" className="edit-site-page-header__sub-title">
-						{ subTitle }
-					</Text>
-				) }
-			</FlexBlock>
-			<FlexItem className="edit-site-page-header__actions">
-				{ actions }
-			</FlexItem>
-		</HStack>
+				<FlexItem className="edit-site-page-header__actions">
+					{ actions }
+				</FlexItem>
+			</HStack>
+			{ subTitle && (
+				<Text
+					variant="muted"
+					as="p"
+					className="edit-site-page-header__sub-title"
+				>
+					{ subTitle }
+				</Text>
+			) }
+		</VStack>
 	);
 }
diff --git a/packages/edit-site/src/components/page/index.js b/packages/edit-site/src/components/page/index.js
index db3e1ad366430..6609abb8f5244 100644
--- a/packages/edit-site/src/components/page/index.js
+++ b/packages/edit-site/src/components/page/index.js
@@ -1,15 +1,12 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import {
-	EditorSnackbars,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -27,7 +24,7 @@ export default function Page( {
 	className,
 	hideTitleFromUI = false,
 } ) {
-	const classes = classnames( 'edit-site-page', className );
+	const classes = clsx( 'edit-site-page', className );
 
 	return (
 		<NavigableRegion className={ classes } ariaLabel={ title }>
@@ -41,7 +38,6 @@ export default function Page( {
 				) }
 				{ children }
 			</div>
-			<EditorSnackbars />
 		</NavigableRegion>
 	);
 }
diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss
index 4f7f60967df45..b2ec2b2f17844 100644
--- a/packages/edit-site/src/components/page/style.scss
+++ b/packages/edit-site/src/components/page/style.scss
@@ -2,25 +2,39 @@
 	color: $gray-800;
 	background: $white;
 	height: 100%;
+	/* 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");
 }
 
 .edit-site-page-header {
-	padding: $grid-unit-20 $grid-unit-40;
-	min-height: $grid-unit * 9;
+	padding: $grid-unit-20 $grid-unit-60;
 	border-bottom: 1px solid $gray-100;
 	background: $white;
 	position: sticky;
 	top: 0;
 	z-index: z-index(".edit-site-page-header");
-	.components-text {
-		color: $gray-800;
-	}
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+
 	.components-heading {
 		color: $gray-900;
 	}
+
+	.edit-site-page-header__page-title {
+		min-height: $grid-unit-50;
+	}
+
 	.edit-site-page-header__sub-title {
-		margin-top: $grid-unit-10;
-		color: $gray-700;
+		margin-bottom: $grid-unit-10;
+	}
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.edit-site-page-header {
+		padding: $grid-unit-20 $grid-unit-30;
 	}
 }
 
diff --git a/packages/edit-site/src/components/pagination/index.js b/packages/edit-site/src/components/pagination/index.js
index fa347d2caaad3..450ff2a17d5b5 100644
--- a/packages/edit-site/src/components/pagination/index.js
+++ b/packages/edit-site/src/components/pagination/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -30,7 +30,7 @@ export default function Pagination( {
 			aria-label={ label }
 			spacing={ 3 }
 			justify="flex-start"
-			className={ classnames( 'edit-site-pagination', className ) }
+			className={ clsx( 'edit-site-pagination', className ) }
 		>
 			<Text variant="muted" className="edit-site-pagination__total">
 				{
@@ -46,6 +46,7 @@ export default function Pagination( {
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( 1 ) }
+					__experimentalIsFocusable
 					disabled={ disabled || currentPage === 1 }
 					aria-label={ __( 'First page' ) }
 				>
@@ -54,6 +55,7 @@ export default function Pagination( {
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( currentPage - 1 ) }
+					__experimentalIsFocusable
 					disabled={ disabled || currentPage === 1 }
 					aria-label={ __( 'Previous page' ) }
 				>
@@ -72,6 +74,7 @@ export default function Pagination( {
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( currentPage + 1 ) }
+					__experimentalIsFocusable
 					disabled={ disabled || currentPage === numPages }
 					aria-label={ __( 'Next page' ) }
 				>
@@ -80,6 +83,7 @@ export default function Pagination( {
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( numPages ) }
+					__experimentalIsFocusable
 					disabled={ disabled || currentPage === numPages }
 					aria-label={ __( 'Last page' ) }
 				>
diff --git a/packages/edit-site/src/components/pattern-modal/duplicate.js b/packages/edit-site/src/components/pattern-modal/duplicate.js
deleted file mode 100644
index 18cef4a613380..0000000000000
--- a/packages/edit-site/src/components/pattern-modal/duplicate.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { PATTERN_MODALS } from './';
-import { PATTERN_TYPES } from '../../utils/constants';
-import { unlock } from '../../lock-unlock';
-import useEditedEntityRecord from '../use-edited-entity-record';
-
-const { DuplicatePatternModal } = unlock( patternsPrivateApis );
-const { useHistory, useLocation } = unlock( routerPrivateApis );
-const { interfaceStore } = unlock( editorPrivateApis );
-
-export default function PatternDuplicateModal() {
-	const { record } = useEditedEntityRecord();
-	const {
-		params: { categoryType, categoryId },
-	} = useLocation();
-	const { closeModal } = useDispatch( interfaceStore );
-	const history = useHistory();
-
-	const isActive = useSelect( ( select ) =>
-		select( interfaceStore ).isModalActive( PATTERN_MODALS.duplicate )
-	);
-
-	if ( ! isActive ) {
-		return null;
-	}
-
-	function onSuccess( { pattern: newPattern } ) {
-		history.push( {
-			categoryType,
-			categoryId,
-			postType: PATTERN_TYPES.user,
-			postId: newPattern.id,
-		} );
-
-		closeModal();
-	}
-
-	return (
-		<DuplicatePatternModal
-			onClose={ closeModal }
-			onSuccess={ onSuccess }
-			pattern={ record }
-		/>
-	);
-}
diff --git a/packages/edit-site/src/components/pattern-modal/index.js b/packages/edit-site/src/components/pattern-modal/index.js
deleted file mode 100644
index 95d08a058b3f8..0000000000000
--- a/packages/edit-site/src/components/pattern-modal/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Internal dependencies
- */
-import PatternRenameModal from './rename';
-import PatternDuplicateModal from './duplicate';
-
-export const PATTERN_MODALS = {
-	rename: 'edit-site/pattern-rename',
-	duplicate: 'edit-site/pattern-duplicate',
-};
-
-export default function PatternModal() {
-	return (
-		<>
-			<PatternDuplicateModal />
-			<PatternRenameModal />
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/pattern-modal/rename.js b/packages/edit-site/src/components/pattern-modal/rename.js
deleted file mode 100644
index 8c817172cc209..0000000000000
--- a/packages/edit-site/src/components/pattern-modal/rename.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { PATTERN_MODALS } from './';
-import { unlock } from '../../lock-unlock';
-import useEditedEntityRecord from '../use-edited-entity-record';
-
-const { RenamePatternModal } = unlock( patternsPrivateApis );
-const { interfaceStore } = unlock( editorPrivateApis );
-
-export default function PatternRenameModal() {
-	const { record: pattern } = useEditedEntityRecord();
-	const { closeModal } = useDispatch( interfaceStore );
-	const isActive = useSelect( ( select ) =>
-		select( interfaceStore ).isModalActive( PATTERN_MODALS.rename )
-	);
-
-	if ( ! isActive ) {
-		return null;
-	}
-
-	return <RenamePatternModal onClose={ closeModal } pattern={ pattern } />;
-}
diff --git a/packages/edit-site/src/components/rename-post-menu-item/index.js b/packages/edit-site/src/components/rename-post-menu-item/index.js
deleted file mode 100644
index 59b3fd55123ee..0000000000000
--- a/packages/edit-site/src/components/rename-post-menu-item/index.js
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-import {
-	Button,
-	MenuItem,
-	Modal,
-	TextControl,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as noticesStore } from '@wordpress/notices';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
-
-export default function RenamePostMenuItem( { post } ) {
-	const title = decodeEntities(
-		typeof post.title === 'string' ? post.title : post.title.rendered
-	);
-	const [ editedTitle, setEditedTitle ] = useState( title );
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-
-	const {
-		editEntityRecord,
-		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
-	} = useDispatch( coreStore );
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
-
-	if ( post.type === TEMPLATE_POST_TYPE && ! post.is_custom ) {
-		return null;
-	}
-
-	async function onRename( event ) {
-		event.preventDefault();
-
-		if ( editedTitle === title ) {
-			return;
-		}
-
-		try {
-			await editEntityRecord( 'postType', post.type, post.id, {
-				title: editedTitle,
-			} );
-
-			// Update state before saving rerenders the list.
-			setEditedTitle( '' );
-			setIsModalOpen( false );
-
-			// Persist edited entity.
-			await saveSpecifiedEntityEdits(
-				'postType',
-				post.type,
-				post.id,
-				[ 'title' ], // Only save title to avoid persisting other edits.
-				{
-					throwOnError: true,
-				}
-			);
-
-			createSuccessNotice( __( 'Name updated.' ), {
-				id: 'template-update',
-				type: 'snackbar',
-			} );
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while updating the name.' );
-
-			createErrorNotice( errorMessage, { type: 'snackbar' } );
-		}
-	}
-
-	return (
-		<>
-			<MenuItem
-				onClick={ () => {
-					setIsModalOpen( true );
-					setEditedTitle( title );
-				} }
-			>
-				{ __( 'Rename' ) }
-			</MenuItem>
-			{ isModalOpen && (
-				<Modal
-					title={ __( 'Rename' ) }
-					onRequestClose={ () => {
-						setIsModalOpen( false );
-					} }
-					overlayClassName="edit-site-list__rename-modal"
-					focusOnMount="firstContentElement"
-				>
-					<form onSubmit={ onRename }>
-						<VStack spacing="5">
-							<TextControl
-								__nextHasNoMarginBottom
-								__next40pxDefaultSize
-								label={ __( 'Name' ) }
-								value={ editedTitle }
-								onChange={ setEditedTitle }
-								required
-							/>
-
-							<HStack justify="right">
-								<Button
-									__next40pxDefaultSize
-									variant="tertiary"
-									onClick={ () => {
-										setIsModalOpen( false );
-									} }
-								>
-									{ __( 'Cancel' ) }
-								</Button>
-
-								<Button
-									__next40pxDefaultSize
-									variant="primary"
-									type="submit"
-								>
-									{ __( 'Save' ) }
-								</Button>
-							</HStack>
-						</VStack>
-					</form>
-				</Modal>
-			) }
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/resizable-frame/index.js b/packages/edit-site/src/components/resizable-frame/index.js
index 3fc45bcbdbf0e..b589a3861c75d 100644
--- a/packages/edit-site/src/components/resizable-frame/index.js
+++ b/packages/edit-site/src/components/resizable-frame/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,7 +12,7 @@ import {
 	Tooltip,
 	__unstableMotion as motion,
 } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useReducedMotion } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -86,6 +86,7 @@ function ResizableFrame( {
 	defaultSize,
 	innerContentStyle,
 } ) {
+	const disableMotion = useReducedMotion();
 	const [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE );
 	// The width of the resizable frame when a new resize gesture starts.
 	const [ startingWidth, setStartingWidth ] = useState();
@@ -230,6 +231,17 @@ function ResizableFrame( {
 					setFrameSize( { width: '100%', height: '100%' } );
 				}
 			} }
+			whileHover={
+				canvasMode === 'view'
+					? {
+							scale: 1.005,
+							transition: {
+								duration: disableMotion ? 0 : 0.5,
+								ease: 'easeOut',
+							},
+					  }
+					: {}
+			}
 			transition={ FRAME_TRANSITION }
 			size={ frameSize }
 			enable={ {
@@ -251,7 +263,7 @@ function ResizableFrame( {
 			} }
 			minWidth={ FRAME_MIN_WIDTH }
 			maxWidth={ isFullWidth ? '100%' : '150%' }
-			maxHeight={ '100%' }
+			maxHeight="100%"
 			onFocus={ () => setShouldShowHandle( true ) }
 			onBlur={ () => setShouldShowHandle( false ) }
 			onMouseOver={ () => setShouldShowHandle( true ) }
@@ -266,7 +278,7 @@ function ResizableFrame( {
 								key="handle"
 								role="separator"
 								aria-orientation="vertical"
-								className={ classnames(
+								className={ clsx(
 									'edit-site-resizable-frame__handle',
 									{ 'is-resizing': isResizing }
 								) }
@@ -298,7 +310,7 @@ function ResizableFrame( {
 			onResizeStart={ handleResizeStart }
 			onResize={ handleResize }
 			onResizeStop={ handleResizeStop }
-			className={ classnames( 'edit-site-resizable-frame__inner', {
+			className={ clsx( 'edit-site-resizable-frame__inner', {
 				'is-resizing': isResizing,
 			} ) }
 			showHandle={ false } // Do not show the default handle, as we're using a custom one.
diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js
index 2d4f332703585..b726e79b15f2f 100644
--- a/packages/edit-site/src/components/revisions/index.js
+++ b/packages/edit-site/src/components/revisions/index.js
@@ -10,6 +10,7 @@ import {
 	__unstableEditorStyles as EditorStyles,
 	__unstableIframe as Iframe,
 } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
 import { useContext, useMemo } from '@wordpress/element';
 
@@ -18,7 +19,6 @@ import { useContext, useMemo } from '@wordpress/element';
  */
 
 import { unlock } from '../../lock-unlock';
-import { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider';
 import EditorCanvasContainer from '../editor-canvas-container';
 
 const {
@@ -26,6 +26,7 @@ const {
 	GlobalStylesContext,
 	useGlobalStylesOutputWithConfig,
 } = unlock( blockEditorPrivateApis );
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 function isObjectEmpty( object ) {
 	return ! object || Object.keys( object ).length === 0;
diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js
index b3545e0566fca..1422014b08ccc 100644
--- a/packages/edit-site/src/components/save-panel/index.js
+++ b/packages/edit-site/src/components/save-panel/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -139,23 +139,21 @@ export default function SavePanel() {
 	const disabled = isSaving || ! activateSaveEnabled;
 	return (
 		<NavigableRegion
-			className={ classnames( 'edit-site-layout__actions', {
+			className={ clsx( 'edit-site-layout__actions', {
 				'is-entity-save-view-open': isSaveViewOpen,
 			} ) }
 			ariaLabel={ __( 'Save panel' ) }
 		>
 			<div
-				className={ classnames( 'edit-site-editor__toggle-save-panel', {
+				className={ clsx( 'edit-site-editor__toggle-save-panel', {
 					'screen-reader-text': isSaveViewOpen,
 				} ) }
 			>
 				<Button
 					variant="secondary"
-					className={ classnames(
-						'edit-site-editor__toggle-save-panel-button'
-					) }
+					className="edit-site-editor__toggle-save-panel-button"
 					onClick={ () => setIsSaveViewOpened( true ) }
-					aria-haspopup={ 'dialog' }
+					aria-haspopup="dialog"
 					disabled={ disabled }
 					__experimentalIsFocusable
 				>
diff --git a/packages/edit-site/src/components/sidebar-button/index.js b/packages/edit-site/src/components/sidebar-button/index.js
index 9da8492c37c79..9329515b21c7d 100644
--- a/packages/edit-site/src/components/sidebar-button/index.js
+++ b/packages/edit-site/src/components/sidebar-button/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,10 +12,7 @@ export default function SidebarButton( props ) {
 	return (
 		<Button
 			{ ...props }
-			className={ classnames(
-				'edit-site-sidebar-button',
-				props.className
-			) }
+			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 4bf7a173525c9..ffddddb9cad29 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
@@ -22,12 +22,9 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import { DEFAULT_VIEWS } from './default-views';
 import { unlock } from '../../lock-unlock';
 
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 function AddNewItemModalContent( { type, setIsAdding } ) {
-	const {
-		params: { path },
-	} = useLocation();
 	const history = useHistory();
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const [ title, setTitle ] = useState( '' );
@@ -68,8 +65,11 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 						),
 					}
 				);
+				const {
+					params: { postType },
+				} = history.getLocationWithParams();
 				history.push( {
-					path,
+					postType,
 					activeView: savedRecord.id,
 					isCustom: 'true',
 				} );
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 ebc2f43d2e4a1..5b8ccb4b69e6d 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
@@ -27,7 +27,7 @@ import DataViewItem from './dataview-item';
 import AddNewItem from './add-new-view';
 import { unlock } from '../../lock-unlock';
 
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 
@@ -81,9 +81,6 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
 }
 
 function CustomDataViewItem( { dataviewId, isActive } ) {
-	const {
-		params: { path },
-	} = useLocation();
 	const history = useHistory();
 	const { dataview } = useSelect(
 		( select ) => {
@@ -145,9 +142,10 @@ function CustomDataViewItem( { dataviewId, isActive } ) {
 											}
 										);
 										if ( isActive ) {
-											history.replace( {
-												path,
-											} );
+											const {
+												params: { postType },
+											} = history.getLocationWithParams();
+											history.replace( { postType } );
 										}
 										onClose();
 									} }
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 3812c7822d2a8..e6ebd5b1f8ee8 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -29,14 +29,14 @@ export default function DataViewItem( {
 	suffix,
 } ) {
 	const {
-		params: { path, layout },
+		params: { postType, layout },
 	} = useLocation();
 
 	const iconToUse =
 		icon || VIEW_LAYOUTS.find( ( v ) => v.type === type ).icon;
 
 	const linkInfo = useLink( {
-		path,
+		postType,
 		layout,
 		activeView: isCustom ? customViewId : slug,
 		isCustom: isCustom ? 'true' : 'false',
@@ -44,12 +44,9 @@ export default function DataViewItem( {
 	return (
 		<HStack
 			justify="flex-start"
-			className={ classnames(
-				'edit-site-sidebar-dataviews-dataview-item',
-				{
-					'is-selected': isActive,
-				}
-			) }
+			className={ clsx( 'edit-site-sidebar-dataviews-dataview-item', {
+				'is-selected': isActive,
+			} ) }
 		>
 			<SidebarNavigationItem
 				icon={ iconToUse }
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 7610adb006509..e75faa60b92e9 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { trash, pages, drafts } from '@wordpress/icons';
+import { trash, pages, drafts, unseen, inbox } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -54,6 +54,36 @@ export const DEFAULT_VIEWS = {
 			icon: pages,
 			view: DEFAULT_PAGE_BASE,
 		},
+		{
+			title: __( 'Published' ),
+			slug: 'published',
+			icon: pages,
+			view: {
+				...DEFAULT_PAGE_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'publish',
+					},
+				],
+			},
+		},
+		{
+			title: __( 'Scheduled' ),
+			slug: 'future',
+			icon: pages,
+			view: {
+				...DEFAULT_PAGE_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'future',
+					},
+				],
+			},
+		},
 		{
 			title: __( 'Drafts' ),
 			slug: 'drafts',
@@ -69,6 +99,36 @@ export const DEFAULT_VIEWS = {
 				],
 			},
 		},
+		{
+			title: __( 'Pending' ),
+			slug: 'pending',
+			icon: inbox,
+			view: {
+				...DEFAULT_PAGE_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'pending',
+					},
+				],
+			},
+		},
+		{
+			title: __( 'Private' ),
+			slug: 'private',
+			icon: unseen,
+			view: {
+				...DEFAULT_PAGE_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'private',
+					},
+				],
+			},
+		},
 		{
 			title: __( 'Trash' ),
 			slug: 'trash',
diff --git a/packages/edit-site/src/components/sidebar-dataviews/index.js b/packages/edit-site/src/components/sidebar-dataviews/index.js
index 73d7b56b80d00..9362308172f89 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/index.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/index.js
@@ -14,24 +14,19 @@ const { useLocation } = unlock( routerPrivateApis );
 import DataViewItem from './dataview-item';
 import CustomDataViewsList from './custom-dataviews-list';
 
-const PATH_TO_TYPE = {
-	'/page': 'page',
-};
-
 export default function DataViewsSidebarContent() {
 	const {
-		params: { path, activeView = 'all', isCustom = 'false' },
+		params: { postType, activeView = 'all', isCustom = 'false' },
 	} = useLocation();
-	if ( ! path || ! PATH_TO_TYPE[ path ] ) {
+	if ( ! postType ) {
 		return null;
 	}
 	const isCustomBoolean = isCustom === 'true';
-	const type = PATH_TO_TYPE[ path ];
 
 	return (
 		<>
 			<ItemGroup>
-				{ DEFAULT_VIEWS[ type ].map( ( dataview ) => {
+				{ DEFAULT_VIEWS[ postType ].map( ( dataview ) => {
 					return (
 						<DataViewItem
 							key={ dataview.slug }
@@ -51,7 +46,7 @@ export default function DataViewsSidebarContent() {
 			{ window?.__experimentalCustomViews && (
 				<CustomDataViewsList
 					activeView={ activeView }
-					type={ type }
+					type={ postType }
 					isCustom
 				/>
 			) }
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js
deleted file mode 100644
index 8541f952abbf4..0000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/index.js
+++ /dev/null
@@ -1,173 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createSlotFill,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { isRTL, __ } from '@wordpress/i18n';
-import { drawerLeft, drawerRight } from '@wordpress/icons';
-import { useCallback, useContext, useEffect, useRef } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
-import {
-	PageAttributesPanel,
-	PostDiscussionPanel,
-	PostLastRevisionPanel,
-	PostTaxonomiesPanel,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import DefaultSidebar from './default-sidebar';
-import GlobalStylesSidebar from './global-styles-sidebar';
-import SettingsHeader from './settings-header';
-import PagePanels from './page-panels';
-import TemplatePanel from './template-panel';
-import { store as editSiteStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-const { Tabs } = unlock( componentsPrivateApis );
-const { interfaceStore, useAutoSwitchEditorSidebars, PatternOverridesPanel } =
-	unlock( editorPrivateApis );
-const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
-	'EditSiteSidebarInspector'
-);
-export const SidebarInspectorFill = InspectorFill;
-
-const FillContents = ( { tabName, isEditingPage, supportsGlobalStyles } ) => {
-	const tabListRef = useRef( null );
-	// Because `DefaultSidebar` renders a `ComplementaryArea`, we
-	// need to forward the `Tabs` context so it can be passed through the
-	// underlying slot/fill.
-	const tabsContextValue = useContext( Tabs.Context );
-
-	// This effect addresses a race condition caused by tabbing from the last
-	// block in the editor into the settings sidebar. Without this effect, the
-	// selected tab and browser focus can become separated in an unexpected way.
-	// (e.g the "block" tab is focused, but the "post" tab is selected).
-	useEffect( () => {
-		const tabsElements = Array.from(
-			tabListRef.current?.querySelectorAll( '[role="tab"]' ) || []
-		);
-		const selectedTabElement = tabsElements.find(
-			// We are purposefully using a custom `data-tab-id` attribute here
-			// because we don't want rely on any assumptions about `Tabs`
-			// component internals.
-			( element ) => element.getAttribute( 'data-tab-id' ) === tabName
-		);
-		const activeElement = selectedTabElement?.ownerDocument.activeElement;
-		const tabsHasFocus = tabsElements.some( ( element ) => {
-			return activeElement && activeElement.id === element.id;
-		} );
-		if (
-			tabsHasFocus &&
-			selectedTabElement &&
-			selectedTabElement.id !== activeElement?.id
-		) {
-			selectedTabElement?.focus();
-		}
-	}, [ tabName ] );
-
-	return (
-		<>
-			<DefaultSidebar
-				identifier={ tabName }
-				title={ __( 'Settings' ) }
-				icon={ isRTL() ? drawerLeft : drawerRight }
-				closeLabel={ __( 'Close Settings' ) }
-				header={
-					<Tabs.Context.Provider value={ tabsContextValue }>
-						<SettingsHeader ref={ tabListRef } />
-					</Tabs.Context.Provider>
-				}
-				headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
-				// This classname is added so we can apply a corrective negative
-				// margin to the panel.
-				// see https://github.com/WordPress/gutenberg/pull/55360#pullrequestreview-1737671049
-				className="edit-site-sidebar__panel"
-				isActiveByDefault
-			>
-				<Tabs.Context.Provider value={ tabsContextValue }>
-					<Tabs.TabPanel
-						tabId="edit-post/document"
-						focusable={ false }
-					>
-						{ isEditingPage ? <PagePanels /> : <TemplatePanel /> }
-						<PostLastRevisionPanel />
-						<PostTaxonomiesPanel />
-						<PostDiscussionPanel />
-						<PageAttributesPanel />
-						<PatternOverridesPanel />
-					</Tabs.TabPanel>
-					<Tabs.TabPanel tabId="edit-post/block" focusable={ false }>
-						<InspectorSlot bubblesVirtually />
-					</Tabs.TabPanel>
-				</Tabs.Context.Provider>
-			</DefaultSidebar>
-			{ supportsGlobalStyles && <GlobalStylesSidebar /> }
-		</>
-	);
-};
-
-export function SidebarComplementaryAreaFills() {
-	useAutoSwitchEditorSidebars();
-	const { tabName, supportsGlobalStyles, isEditingPage } = useSelect(
-		( select ) => {
-			const sidebar =
-				select( interfaceStore ).getActiveComplementaryArea( 'core' );
-
-			const _isEditorSidebarOpened = [
-				'edit-post/block',
-				'edit-post/document',
-			].includes( sidebar );
-			let _tabName = sidebar;
-			if ( ! _isEditorSidebarOpened ) {
-				_tabName = !! select(
-					blockEditorStore
-				).getBlockSelectionStart()
-					? 'edit-post/block'
-					: 'edit-post/document';
-			}
-
-			return {
-				tabName: _tabName,
-				supportsGlobalStyles:
-					select( coreStore ).getCurrentTheme()?.is_block_theme,
-				isEditingPage: select( editSiteStore ).isPage(),
-			};
-		},
-		[]
-	);
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
-
-	// `newSelectedTabId` could technically be falsey 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.
-	const onTabSelect = useCallback(
-		( newSelectedTabId ) => {
-			if ( !! newSelectedTabId ) {
-				enableComplementaryArea( 'core', newSelectedTabId );
-			}
-		},
-		[ enableComplementaryArea ]
-	);
-
-	return (
-		<Tabs
-			selectedTabId={ tabName }
-			onSelect={ onTabSelect }
-			selectOnMove={ false }
-		>
-			<FillContents
-				tabName={ tabName }
-				isEditingPage={ isEditingPage }
-				supportsGlobalStyles={ supportsGlobalStyles }
-			/>
-		</Tabs>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js
deleted file mode 100644
index f4fc2af178e08..0000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { PanelBody } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import {
-	PluginDocumentSettingPanel,
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useCallback } from '@wordpress/element';
-import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-import PageContent from './page-content';
-import PageSummary from './page-summary';
-
-import { unlock } from '../../../lock-unlock';
-
-const { PostCardPanel, PostActions } = unlock( editorPrivateApis );
-const { useHistory } = unlock( routerPrivateApis );
-
-export default function PagePanels() {
-	const { id, type, hasResolved, status, date, password, renderingMode } =
-		useSelect( ( select ) => {
-			const { getEditedPostContext } = select( editSiteStore );
-			const { getEditedEntityRecord, hasFinishedResolution } =
-				select( coreStore );
-			const { getRenderingMode } = select( editorStore );
-			const context = getEditedPostContext();
-			const queryArgs = [ 'postType', context.postType, context.postId ];
-			const page = getEditedEntityRecord( ...queryArgs );
-			return {
-				hasResolved: hasFinishedResolution(
-					'getEditedEntityRecord',
-					queryArgs
-				),
-				id: page?.id,
-				type: page?.type,
-				status: page?.status,
-				date: page?.date,
-				password: page?.password,
-				renderingMode: getRenderingMode(),
-			};
-		}, [] );
-	const { createSuccessNotice } = useDispatch( noticesStore );
-	const history = useHistory();
-	const onActionPerformed = useCallback(
-		( actionId, items ) => {
-			switch ( actionId ) {
-				case 'move-to-trash':
-					{
-						history.push( {
-							path: '/' + items[ 0 ].type,
-							postId: undefined,
-							postType: undefined,
-							canvas: 'view',
-						} );
-					}
-					break;
-				case 'duplicate-post':
-					{
-						const newItem = items[ 0 ];
-						const title =
-							typeof newItem.title === 'string'
-								? newItem.title
-								: newItem.title?.rendered;
-						createSuccessNotice(
-							sprintf(
-								// translators: %s: Title of the created post e.g: "Post 1".
-								__( '"%s" successfully created.' ),
-								title
-							),
-							{
-								type: 'snackbar',
-								id: 'duplicate-post-action',
-								actions: [
-									{
-										label: __( 'Edit' ),
-										onClick: () => {
-											history.push( {
-												path: undefined,
-												postId: newItem.id,
-												postType: newItem.type,
-												canvas: 'edit',
-											} );
-										},
-									},
-								],
-							}
-						);
-					}
-					break;
-			}
-		},
-		[ history, createSuccessNotice ]
-	);
-
-	if ( ! hasResolved ) {
-		return null;
-	}
-
-	return (
-		<>
-			<PostCardPanel
-				actions={
-					<PostActions onActionPerformed={ onActionPerformed } />
-				}
-			/>
-			<PanelBody title={ __( 'Summary' ) }>
-				<PageSummary
-					status={ status }
-					date={ date }
-					password={ password }
-					postId={ id }
-					postType={ type }
-				/>
-			</PanelBody>
-			<PluginDocumentSettingPanel.Slot />
-			{ renderingMode !== 'post-only' && (
-				<PanelBody title={ __( 'Content' ) }>
-					<PageContent />
-				</PanelBody>
-			) }
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js
deleted file mode 100644
index 0830ff8364c8a..0000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalVStack as VStack } from '@wordpress/components';
-import {
-	PluginPostStatusInfo,
-	PostAuthorPanel,
-	PostURLPanel,
-	PostSchedulePanel,
-	PostTemplatePanel,
-	PostFeaturedImagePanel,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../../lock-unlock';
-
-const {
-	PrivatePostExcerptPanel,
-	PostStatus,
-	PostContentInformation,
-	PostLastEditedPanel,
-} = unlock( editorPrivateApis );
-
-export default function PageSummary() {
-	return (
-		<VStack spacing={ 0 }>
-			<PluginPostStatusInfo.Slot>
-				{ ( fills ) => (
-					<>
-						<VStack
-							spacing={ 3 }
-							//  TODO: this needs to be consolidated with the panel in post editor, when we unify them.
-							style={ { marginBlockEnd: '24px' } }
-						>
-							<PostFeaturedImagePanel withPanelBody={ false } />
-							<PrivatePostExcerptPanel />
-							<VStack spacing={ 1 }>
-								<PostContentInformation />
-								<PostLastEditedPanel />
-							</VStack>
-						</VStack>
-						<VStack
-							spacing={ 1 }
-							style={ { marginBlockEnd: '12px' } }
-						>
-							<PostStatus />
-							<PostSchedulePanel />
-							<PostTemplatePanel />
-							<PostURLPanel />
-						</VStack>
-						<PostAuthorPanel />
-						{ fills }
-					</>
-				) }
-			</PluginPostStatusInfo.Slot>
-		</VStack>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js
deleted file mode 100644
index 054952077a491..0000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../../lock-unlock';
-
-const { Tabs } = unlock( componentsPrivateApis );
-
-const SettingsHeader = ( _, ref ) => {
-	const postTypeLabel = useSelect(
-		( select ) => select( editorStore ).getPostTypeLabel(),
-		[]
-	);
-
-	return (
-		<Tabs.TabList ref={ ref }>
-			<Tabs.Tab
-				tabId="edit-post/document"
-				// Used for focus management in the SettingsSidebar component.
-				data-tab-id="edit-post/document"
-			>
-				{ postTypeLabel }
-			</Tabs.Tab>
-			<Tabs.Tab
-				tabId="edit-post/block"
-				// Used for focus management in the SettingsSidebar component.
-				data-tab-id="edit-post/block"
-			>
-				{ __( 'Block' ) }
-			</Tabs.Tab>
-		</Tabs.TabList>
-	);
-};
-
-export default forwardRef( SettingsHeader );
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss
deleted file mode 100644
index d74432451e1d4..0000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
-	padding-left: 0;
-	padding-right: $grid-unit-20;
-
-	.components-button.has-icon {
-		padding: 0;
-		min-width: $icon-size;
-		height: $icon-size;
-
-		@include break-medium() {
-			display: flex;
-		}
-	}
-}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js
deleted file mode 100644
index f0abc9aed09d0..0000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { PanelBody, PanelRow } from '@wordpress/components';
-import {
-	PluginDocumentSettingPanel,
-	privateApis as editorPrivateApis,
-	store as editorStore,
-} from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
-import { useAsyncList } from '@wordpress/compose';
-import { serialize } from '@wordpress/blocks';
-import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-import TemplateActions from '../../template-actions';
-import PluginTemplateSettingPanel from '../../plugin-template-setting-panel';
-import { useAvailablePatterns } from './hooks';
-import { TEMPLATE_PART_POST_TYPE } from '../../../utils/constants';
-import { unlock } from '../../../lock-unlock';
-
-const { PostCardPanel } = unlock( editorPrivateApis );
-const { useHistory } = unlock( routerPrivateApis );
-
-function TemplatesList( { availableTemplates, onSelect } ) {
-	const shownTemplates = useAsyncList( availableTemplates );
-	if ( ! availableTemplates || availableTemplates?.length === 0 ) {
-		return null;
-	}
-
-	return (
-		<BlockPatternsList
-			label={ __( 'Templates' ) }
-			blockPatterns={ availableTemplates }
-			shownPatterns={ shownTemplates }
-			onClickPattern={ onSelect }
-			showTitlesAsTooltip
-		/>
-	);
-}
-
-const POST_TYPE_PATH = {
-	wp_template: '/wp_template',
-	wp_template_part: '/patterns',
-};
-
-export default function TemplatePanel() {
-	const { title, description, record, postType, postId } = useSelect(
-		( select ) => {
-			const { getEditedPostType, getEditedPostId } =
-				select( editSiteStore );
-			const { getEditedEntityRecord } = select( coreStore );
-			const { __experimentalGetTemplateInfo: getTemplateInfo } =
-				select( editorStore );
-
-			const type = getEditedPostType();
-			const _postId = getEditedPostId();
-			const _record = getEditedEntityRecord( 'postType', type, _postId );
-			const info = getTemplateInfo( _record );
-
-			return {
-				title: info.title,
-				description: info.description,
-				icon: info.icon,
-				record: _record,
-				postType: type,
-				postId: _postId,
-			};
-		},
-		[]
-	);
-	const history = useHistory();
-	const availablePatterns = useAvailablePatterns( record );
-	const { editEntityRecord } = useDispatch( coreStore );
-
-	if ( ! title && ! description ) {
-		return null;
-	}
-
-	const onTemplateSelect = async ( selectedTemplate ) => {
-		await editEntityRecord( 'postType', postType, postId, {
-			blocks: selectedTemplate.blocks,
-			content: serialize( selectedTemplate.blocks ),
-		} );
-	};
-
-	return (
-		<>
-			<PostCardPanel
-				className="edit-site-template-card"
-				actions={
-					<TemplateActions
-						postType={ postType }
-						postId={ postId }
-						className="edit-site-template-card__actions"
-						toggleProps={ { size: 'small' } }
-						onRemove={ () => {
-							history.push( {
-								path: POST_TYPE_PATH[ postType ],
-							} );
-						} }
-					/>
-				}
-			/>
-			<PluginTemplateSettingPanel.Slot />
-			<PluginDocumentSettingPanel.Slot />
-			{ availablePatterns?.length > 0 && (
-				<PanelBody
-					title={ __( 'Transform into:' ) }
-					initialOpen={ postType === TEMPLATE_PART_POST_TYPE }
-				>
-					<PanelRow>
-						<p>
-							{ __(
-								'Choose a predefined pattern to switch up the look of your template.' // TODO - make this dynamic?
-							) }
-						</p>
-					</PanelRow>
-
-					<TemplatesList
-						availableTemplates={ availablePatterns }
-						onSelect={ onTemplateSelect }
-					/>
-				</PanelBody>
-			) }
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss
deleted file mode 100644
index 15a0541672b1d..0000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.edit-site-template-card {
-	&__actions {
-		line-height: 0;
-		> .components-button.is-small.has-icon {
-			padding: 0;
-			min-width: auto;
-		}
-		flex-shrink: 0;
-	}
-}
-
-
-.edit-site-template-panel .block-editor-block-preview__container {
-	border-radius: 2px;
-	box-shadow: none;
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-item/index.js b/packages/edit-site/src/components/sidebar-navigation-item/index.js
index bbac07c42de0d..80f06d7e93133 100644
--- a/packages/edit-site/src/components/sidebar-navigation-item/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-item/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -29,35 +29,35 @@ export default function SidebarNavigationItem( {
 	icon,
 	withChevron = false,
 	suffix,
-	path,
+	uid,
+	params,
 	onClick,
 	children,
 	...props
 } ) {
 	const history = useHistory();
-	const navigate = useContext( SidebarNavigationContext );
-
-	// If there is no custom click handler, create one that navigates to `path`.
+	const { navigate } = useContext( SidebarNavigationContext );
+	// If there is no custom click handler, create one that navigates to `params`.
 	function handleClick( e ) {
 		if ( onClick ) {
 			onClick( e );
 			navigate( 'forward' );
-		} else if ( path ) {
+		} else if ( params ) {
 			e.preventDefault();
-			history.push( { path } );
-			navigate( 'forward', `[id="${ path }"]` );
+			history.push( params );
+			navigate( 'forward', `[id="${ uid }"]` );
 		}
 	}
 
 	return (
 		<Item
-			className={ classnames(
+			className={ clsx(
 				'edit-site-sidebar-navigation-item',
 				{ 'with-suffix': ! withChevron && suffix },
 				className
 			) }
 			onClick={ handleClick }
-			id={ path }
+			id={ uid }
 			{ ...props }
 		>
 			<HStack justify="flex-start">
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js
index 501829b511bc3..1c7f9abafdf50 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -19,7 +19,7 @@ export default function SidebarNavigationScreenDetailsPanelRow( {
 			key={ label }
 			spacing={ 5 }
 			alignment="left"
-			className={ classnames(
+			className={ clsx(
 				'edit-site-sidebar-navigation-details-screen-panel__row',
 				className
 			) }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
index f0585b410e40d..29ce24cfb3b7b 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
@@ -45,7 +45,13 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 		[]
 	);
 	if ( hasGlobalStyleVariations ) {
-		return <SidebarNavigationItem { ...props } path="/wp_global_styles" />;
+		return (
+			<SidebarNavigationItem
+				{ ...props }
+				params={ { path: '/wp_global_styles' } }
+				uid="global-styles-navigation-item"
+			/>
+		);
 	}
 	return (
 		<SidebarNavigationItem
@@ -90,7 +96,7 @@ function SidebarNavigationScreenGlobalStylesContent() {
 			>
 				<StyleVariationsContainer gap={ gap } />
 				{ colorVariations?.length && (
-					<ColorVariations title={ __( 'Colors' ) } gap={ gap } />
+					<ColorVariations title={ __( 'Palettes' ) } gap={ gap } />
 				) }
 				{ typographyVariations?.length && (
 					<TypographyVariations
@@ -103,7 +109,7 @@ function SidebarNavigationScreenGlobalStylesContent() {
 	);
 }
 
-export default function SidebarNavigationScreenGlobalStyles() {
+export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 	const { revisions, isLoading: isLoadingRevisions } =
 		useGlobalStylesRevisions();
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
@@ -179,6 +185,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 				description={ __(
 					'Choose a different style combination for the theme styles.'
 				) }
+				backPath={ backPath }
 				content={ <SidebarNavigationScreenGlobalStylesContent /> }
 				footer={
 					shouldShowGlobalStylesFooter && (
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
index 0859d64aa1a1c..bdfb6ac93b51c 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -15,6 +15,11 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
+import {
+	NAVIGATION_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+	PATTERN_TYPES,
+} from '../../utils/constants';
 
 export default function SidebarNavigationScreenMain() {
 	const { setEditorCanvasContainerView } = unlock(
@@ -37,34 +42,39 @@ export default function SidebarNavigationScreenMain() {
 				<>
 					<ItemGroup>
 						<SidebarNavigationItem
-							path="/navigation"
+							uid="navigation-navigation-item"
+							params={ { postType: NAVIGATION_POST_TYPE } }
 							withChevron
 							icon={ navigation }
 						>
 							{ __( 'Navigation' ) }
 						</SidebarNavigationItem>
 						<SidebarNavigationItemGlobalStyles
+							uid="styles-navigation-item"
 							withChevron
 							icon={ styles }
 						>
 							{ __( 'Styles' ) }
 						</SidebarNavigationItemGlobalStyles>
 						<SidebarNavigationItem
-							path="/page"
+							uid="page-navigation-item"
+							params={ { postType: 'page' } }
 							withChevron
 							icon={ page }
 						>
 							{ __( 'Pages' ) }
 						</SidebarNavigationItem>
 						<SidebarNavigationItem
-							path="/wp_template"
+							uid="template-navigation-item"
+							params={ { postType: TEMPLATE_POST_TYPE } }
 							withChevron
 							icon={ layout }
 						>
 							{ __( 'Templates' ) }
 						</SidebarNavigationItem>
 						<SidebarNavigationItem
-							path="/patterns"
+							uid="patterns-navigation-item"
+							params={ { postType: PATTERN_TYPES.user } }
 							withChevron
 							icon={ symbol }
 						>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js
index b795c686e77aa..24fb9372b4fff 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js
@@ -22,7 +22,7 @@ const { useLocation } = unlock( routerPrivateApis );
 
 export const postType = `wp_navigation`;
 
-export default function SidebarNavigationScreenNavigationMenu() {
+export default function SidebarNavigationScreenNavigationMenu( { backPath } ) {
 	const {
 		params: { postId },
 	} = useLocation();
@@ -67,6 +67,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 				description={ __(
 					'Navigation Menus are a curated collection of blocks that allow visitors to get around your site.'
 				) }
+				backPath={ backPath }
 			>
 				<Spinner className="edit-site-sidebar-navigation-screen-navigation-menus__loading" />
 			</SidebarNavigationScreenWrapper>
@@ -77,6 +78,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 		return (
 			<SidebarNavigationScreenWrapper
 				description={ __( 'Navigation Menu missing.' ) }
+				backPath={ backPath }
 			/>
 		);
 	}
@@ -86,12 +88,14 @@ export default function SidebarNavigationScreenNavigationMenu() {
 			<SidebarNavigationScreenWrapper
 				actions={
 					<ScreenNavigationMoreMenu
+						menuId={ navigationMenu?.id }
 						menuTitle={ decodeEntities( menuTitle ) }
 						onDelete={ _handleDelete }
 						onSave={ _handleSave }
 						onDuplicate={ _handleDuplicate }
 					/>
 				}
+				backPath={ backPath }
 				title={ buildNavigationLabel(
 					navigationMenu?.title,
 					navigationMenu?.id,
@@ -105,6 +109,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 	return (
 		<SingleNavigationMenu
 			navigationMenu={ navigationMenu }
+			backPath={ backPath }
 			handleDelete={ _handleDelete }
 			handleSave={ _handleSave }
 			handleDuplicate={ _handleDuplicate }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js
index 737c742f71f6c..6b85e088817ed 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js
@@ -5,24 +5,30 @@ import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import RenameModal from './rename-modal';
 import DeleteConfirmDialog from './delete-confirm-dialog';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
 
 const POPOVER_PROPS = {
 	position: 'bottom right',
 };
 
 export default function ScreenNavigationMoreMenu( props ) {
-	const { onDelete, onSave, onDuplicate, menuTitle } = props;
+	const { onDelete, onSave, onDuplicate, menuTitle, menuId } = props;
 
 	const [ renameModalOpen, setRenameModalOpen ] = useState( false );
 	const [ deleteConfirmDialogOpen, setDeleteConfirmDialogOpen ] =
 		useState( false );
 
+	const history = useHistory();
+
 	const closeModals = () => {
 		setRenameModalOpen( false );
 		setDeleteConfirmDialogOpen( false );
@@ -50,6 +56,17 @@ export default function ScreenNavigationMoreMenu( props ) {
 							>
 								{ __( 'Rename' ) }
 							</MenuItem>
+							<MenuItem
+								onClick={ () => {
+									history.push( {
+										postId: menuId,
+										postType: 'wp_navigation',
+										canvas: 'edit',
+									} );
+								} }
+							>
+								{ __( 'Edit' ) }
+							</MenuItem>
 							<MenuItem
 								onClick={ () => {
 									onDuplicate();
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js
index a2281804bcb72..d290a40516bf0 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js
@@ -43,6 +43,7 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) {
 
 						<Button
 							__next40pxDefaultSize
+							__experimentalIsFocusable
 							disabled={ ! isEditedMenuTitleValid }
 							variant="primary"
 							type="submit"
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js
index 3b700212ca1f1..d503869c8d874 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js
@@ -13,6 +13,7 @@ import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/
 
 export default function SingleNavigationMenu( {
 	navigationMenu,
+	backPath,
 	handleDelete,
 	handleDuplicate,
 	handleSave,
@@ -24,6 +25,7 @@ export default function SingleNavigationMenu( {
 			actions={
 				<>
 					<ScreenNavigationMoreMenu
+						menuId={ navigationMenu?.id }
 						menuTitle={ decodeEntities( menuTitle ) }
 						onDelete={ handleDelete }
 						onSave={ handleSave }
@@ -31,6 +33,7 @@ export default function SingleNavigationMenu( {
 					/>
 				</>
 			}
+			backPath={ backPath }
 			title={ buildNavigationLabel(
 				navigationMenu?.title,
 				navigationMenu?.id,
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js
index ce75f3155f33e..7009ddc6fc927 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js
@@ -42,7 +42,7 @@ function useDeleteNavigationMenu() {
 					type: 'snackbar',
 				}
 			);
-			history.push( { path: '/navigation' } );
+			history.push( { postType: 'wp_navigation' } );
 		} catch ( error ) {
 			createErrorNotice(
 				sprintf(
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
index e0d272ef21528..bc32b0a9061c1 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
@@ -46,7 +46,7 @@ function buildMenuLabel( title, id, status ) {
 // Save a boolean to prevent us creating a fallback more than once per session.
 let hasCreatedFallback = false;
 
-export default function SidebarNavigationScreenNavigationMenus() {
+export default function SidebarNavigationScreenNavigationMenus( { backPath } ) {
 	const {
 		records: navigationMenus,
 		isResolving: isResolvingNavigationMenus,
@@ -87,7 +87,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 
 	if ( isLoading ) {
 		return (
-			<SidebarNavigationScreenWrapper>
+			<SidebarNavigationScreenWrapper backPath={ backPath }>
 				<Spinner className="edit-site-sidebar-navigation-screen-navigation-menus__loading" />
 			</SidebarNavigationScreenWrapper>
 		);
@@ -97,6 +97,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 		return (
 			<SidebarNavigationScreenWrapper
 				description={ __( 'No Navigation Menus found.' ) }
+				backPath={ backPath }
 			/>
 		);
 	}
@@ -106,6 +107,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 		return (
 			<SingleNavigationMenu
 				navigationMenu={ firstNavigationMenu }
+				backPath={ backPath }
 				handleDelete={ () => handleDelete( firstNavigationMenu ) }
 				handleDuplicate={ () => handleDuplicate( firstNavigationMenu ) }
 				handleSave={ ( edits ) =>
@@ -116,7 +118,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 	}
 
 	return (
-		<SidebarNavigationScreenWrapper>
+		<SidebarNavigationScreenWrapper backPath={ backPath }>
 			<ItemGroup>
 				{ navigationMenus?.map( ( { id, title, status }, index ) => (
 					<NavMenuItem
@@ -138,12 +140,14 @@ export function SidebarNavigationScreenWrapper( {
 	actions,
 	title,
 	description,
+	backPath,
 } ) {
 	return (
 		<SidebarNavigationScreen
 			title={ title || __( 'Navigation' ) }
 			actions={ actions }
 			description={ description || __( 'Manage your Navigation Menus.' ) }
+			backPath={ backPath }
 			content={ children }
 		/>
 	);
@@ -152,7 +156,7 @@ export function SidebarNavigationScreenWrapper( {
 const NavMenuItem = ( { postId, ...props } ) => {
 	const linkInfo = useLink( {
 		postId,
-		postType: NAVIGATION_POST_TYPE,
+		postType: 'wp_navigation',
 	} );
 	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
 };
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js
index 1e63225641895..568ec291f9ed1 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js
@@ -18,16 +18,11 @@ const POPOVER_PROPS = {
 /**
  * Internal dependencies
  */
-import {
-	isPreviewingTheme,
-	currentlyPreviewingTheme,
-} from '../../utils/is-previewing-theme';
 import { unlock } from '../../lock-unlock';
 
-const { useLocation, useHistory } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 export default function LeafMoreMenu( props ) {
-	const { params } = useLocation();
 	const history = useHistory();
 	const { block } = props;
 	const { clientId } = block;
@@ -64,13 +59,12 @@ export default function LeafMoreMenu( props ) {
 				attributes.type &&
 				history
 			) {
+				const { params } = history.getLocationWithParams();
 				history.push(
 					{
 						postType: attributes.type,
 						postId: attributes.id,
-						...( isPreviewingTheme() && {
-							wp_theme_preview: currentlyPreviewingTheme(),
-						} ),
+						canvas: 'edit',
 					},
 					{
 						backPath: params,
@@ -78,13 +72,12 @@ export default function LeafMoreMenu( props ) {
 				);
 			}
 			if ( name === 'core/page-list-item' && attributes.id && history ) {
+				const { params } = history.getLocationWithParams();
 				history.push(
 					{
 						postType: 'page',
 						postId: attributes.id,
-						...( isPreviewingTheme() && {
-							wp_theme_preview: currentlyPreviewingTheme(),
-						} ),
+						canvas: 'edit',
 					},
 					{
 						backPath: params,
@@ -92,7 +85,7 @@ export default function LeafMoreMenu( props ) {
 				);
 			}
 		},
-		[ history, params ]
+		[ history ]
 	);
 
 	return (
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
index 525dd68d3b9f7..3667db2d9331d 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
@@ -3,67 +3,6 @@
 }
 
 .edit-site-sidebar-navigation-screen-navigation-menus__content {
-	.offcanvas-editor-list-view-leaf {
-		max-width: calc(100% - #{ $grid-unit-05 });
-		border-radius: $radius-block-ui;
-		&:hover,
-		&:focus,
-		&[aria-current] {
-			background: $gray-800;
-		}
-		.block-editor-list-view-block__menu {
-			margin-left: -$grid-unit-10;
-		}
-		&.is-selected {
-			> td {
-				background: transparent;
-			}
-
-			.block-editor-list-view-block-contents {
-				color: inherit;
-			}
-
-			&:not(:hover) {
-				.block-editor-list-view-block__menu {
-					opacity: 0;
-				}
-			}
-
-			&:hover,
-			&:focus {
-				color: $white;
-
-				.block-editor-list-view-block__menu-cell {
-					opacity: 1;
-				}
-			}
-
-			.block-editor-list-view-block__menu {
-				opacity: 1;
-
-				&:focus {
-					box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				}
-			}
-		}
-
-		.block-editor-list-view-block-contents {
-			&:focus {
-				&::after {
-					box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				}
-			}
-		}
-
-		&.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
-			background: transparent;
-
-			&:hover {
-				background: $gray-800;
-			}
-		}
-	}
-
 	.block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
 		width: 100%;
 	}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
deleted file mode 100644
index 51251dcf846e6..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
+++ /dev/null
@@ -1,204 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
-import {
-	__experimentalVStack as VStack,
-	ExternalLink,
-	__experimentalTruncate as Truncate,
-} from '@wordpress/components';
-import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { pencil } from '@wordpress/icons';
-import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-import { escapeAttribute } from '@wordpress/escape-html';
-import { safeDecodeURIComponent, filterURLForDisplay } from '@wordpress/url';
-import { useEffect, useCallback } from '@wordpress/element';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
-import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-import SidebarButton from '../sidebar-button';
-import PageDetails from './page-details';
-import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
-
-const { useLocation, useHistory } = unlock( routerPrivateApis );
-const { PostActions } = unlock( editorPrivateApis );
-
-export default function SidebarNavigationScreenPage( { backPath } ) {
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const history = useHistory();
-	const { createSuccessNotice } = useDispatch( noticesStore );
-	const {
-		params: { postId },
-	} = useLocation();
-	const { record, hasResolved } = useEntityRecord(
-		'postType',
-		'page',
-		postId
-	);
-
-	const { featuredMediaAltText, featuredMediaSourceUrl } = useSelect(
-		( select ) => {
-			const { getEntityRecord } = select( coreStore );
-			// Featured image.
-			const attachedMedia = record?.featured_media
-				? getEntityRecord(
-						'postType',
-						'attachment',
-						record?.featured_media
-				  )
-				: null;
-
-			return {
-				featuredMediaSourceUrl:
-					attachedMedia?.media_details.sizes?.medium?.source_url ||
-					attachedMedia?.source_url,
-				featuredMediaAltText: escapeAttribute(
-					attachedMedia?.alt_text ||
-						attachedMedia?.description?.raw ||
-						''
-				),
-			};
-		},
-		[ record ]
-	);
-
-	// Redirect to the main pages navigation screen if the page is not found or has been deleted.
-	useEffect( () => {
-		if ( hasResolved && ! record ) {
-			history.push( {
-				path: '/page',
-				postId: undefined,
-				postType: undefined,
-				canvas: 'view',
-			} );
-		}
-	}, [ hasResolved, record, history ] );
-
-	const onActionPerformed = useCallback(
-		( actionId, items ) => {
-			switch ( actionId ) {
-				case 'move-to-trash':
-					{
-						history.push( {
-							path: '/' + items[ 0 ].type,
-							postId: undefined,
-							postType: undefined,
-							canvas: 'view',
-						} );
-					}
-					break;
-				case 'duplicate-post':
-					{
-						const newItem = items[ 0 ];
-						const title =
-							typeof newItem.title === 'string'
-								? newItem.title
-								: newItem.title?.rendered;
-						createSuccessNotice(
-							sprintf(
-								// translators: %s: Title of the created post e.g: "Post 1".
-								__( '"%s" successfully created.' ),
-								title
-							),
-							{
-								type: 'snackbar',
-								id: 'duplicate-post-action',
-								actions: [
-									{
-										label: __( 'Edit' ),
-										onClick: () => {
-											history.push( {
-												path: undefined,
-												postId: newItem.id,
-												postType: newItem.type,
-												canvas: 'edit',
-											} );
-										},
-									},
-								],
-							}
-						);
-					}
-					break;
-			}
-		},
-		[ history, createSuccessNotice ]
-	);
-
-	const featureImageAltText = featuredMediaAltText
-		? decodeEntities( featuredMediaAltText )
-		: decodeEntities( record?.title?.rendered || __( 'Featured image' ) );
-
-	return record ? (
-		<SidebarNavigationScreen
-			backPath={ backPath }
-			title={ decodeEntities(
-				record?.title?.rendered || __( '(no title)' )
-			) }
-			actions={
-				<>
-					<PostActions
-						onActionPerformed={ onActionPerformed }
-						buttonProps={ { size: 'default' } }
-					/>
-					<SidebarButton
-						onClick={ () => setCanvasMode( 'edit' ) }
-						label={ __( 'Edit' ) }
-						icon={ pencil }
-					/>
-				</>
-			}
-			meta={
-				<ExternalLink
-					className="edit-site-sidebar-navigation-screen__page-link"
-					href={ record.link }
-				>
-					{ filterURLForDisplay(
-						safeDecodeURIComponent( record.link )
-					) }
-				</ExternalLink>
-			}
-			content={
-				<>
-					{ !! featuredMediaSourceUrl && (
-						<VStack
-							className="edit-site-sidebar-navigation-screen-page__featured-image-wrapper"
-							alignment="left"
-							spacing={ 2 }
-						>
-							<div className="edit-site-sidebar-navigation-screen-page__featured-image has-image">
-								<img
-									alt={ featureImageAltText }
-									src={ featuredMediaSourceUrl }
-								/>
-							</div>
-						</VStack>
-					) }
-					{ !! record?.excerpt?.rendered && (
-						<Truncate
-							className="edit-site-sidebar-navigation-screen-page__excerpt"
-							numberOfLines={ 3 }
-						>
-							{ stripHTML( record.excerpt.rendered ) }
-						</Truncate>
-					) }
-					<PageDetails id={ postId } />
-				</>
-			}
-			footer={
-				record?.modified ? (
-					<SidebarNavigationScreenDetailsFooter record={ record } />
-				) : null
-			}
-		/>
-	) : null;
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
deleted file mode 100644
index 7fcedcf40ce13..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
+++ /dev/null
@@ -1,161 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { __experimentalTruncate as Truncate } from '@wordpress/components';
-import { count as wordCount } from '@wordpress/wordcount';
-import { useSelect } from '@wordpress/data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
-import { safeDecodeURIComponent } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
-import StatusLabel from './status-label';
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-import {
-	SidebarNavigationScreenDetailsPanel,
-	SidebarNavigationScreenDetailsPanelRow,
-	SidebarNavigationScreenDetailsPanelLabel,
-	SidebarNavigationScreenDetailsPanelValue,
-} from '../sidebar-navigation-screen-details-panel';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
-
-// Taken from packages/editor/src/components/time-to-read/index.js.
-const AVERAGE_READING_RATE = 189;
-
-function getPageDetails( page ) {
-	if ( ! page ) {
-		return [];
-	}
-
-	const details = [
-		{
-			label: __( 'Status' ),
-			value: (
-				<StatusLabel
-					status={ page?.password ? 'protected' : page.status }
-					date={ page?.date }
-					short
-				/>
-			),
-		},
-		{
-			label: __( 'Slug' ),
-			value: (
-				<Truncate numberOfLines={ 1 }>
-					{ safeDecodeURIComponent(
-						page.slug || page.generated_slug
-					) }
-				</Truncate>
-			),
-		},
-	];
-
-	if ( page?.templateTitle ) {
-		details.push( {
-			label: __( 'Template' ),
-			value: decodeEntities( page.templateTitle ),
-		} );
-	}
-
-	if ( page?.parentTitle ) {
-		details.push( {
-			label: __( 'Parent' ),
-			value: decodeEntities( page.parentTitle || __( '(no title)' ) ),
-		} );
-	}
-
-	/*
-	 * translators: If your word count is based on single characters (e.g. East Asian characters),
-	 * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.
-	 * Do not translate into your own language.
-	 */
-	const wordCountType = _x( 'words', 'Word count type. Do not translate!' );
-	const wordsCounted = page?.content?.rendered
-		? wordCount( page.content.rendered, wordCountType )
-		: 0;
-	const readingTime = Math.round( wordsCounted / AVERAGE_READING_RATE );
-
-	if ( wordsCounted && ! page?.isPostsPage ) {
-		details.push(
-			{
-				label: __( 'Words' ),
-				value: wordsCounted.toLocaleString() || __( 'Unknown' ),
-			},
-			{
-				label: __( 'Time to read' ),
-				value:
-					readingTime > 1
-						? sprintf(
-								/* translators: %s: is the number of minutes. */
-								__( '%s mins' ),
-								readingTime.toLocaleString()
-						  )
-						: __( '< 1 min' ),
-			}
-		);
-	}
-	return details;
-}
-
-export default function PageDetails( { id } ) {
-	const { record } = useEntityRecord( 'postType', 'page', id );
-	const { parentTitle, templateTitle, isPostsPage } = useSelect(
-		( select ) => {
-			const { getEditedPostId } = unlock( select( editSiteStore ) );
-			const template = select( coreStore ).getEntityRecord(
-				'postType',
-				TEMPLATE_POST_TYPE,
-				getEditedPostId()
-			);
-			const _templateTitle = template?.title?.rendered;
-
-			// Parent page title.
-			const _parentTitle = record?.parent
-				? select( coreStore ).getEntityRecord(
-						'postType',
-						'page',
-						record.parent,
-						{
-							_fields: [ 'title' ],
-						}
-				  )?.title?.rendered
-				: null;
-
-			const { getEntityRecord } = select( coreStore );
-			const siteSettings = getEntityRecord( 'root', 'site' );
-
-			return {
-				parentTitle: _parentTitle,
-				templateTitle: _templateTitle,
-				isPostsPage: record?.id === siteSettings?.page_for_posts,
-			};
-		},
-		[ record?.parent, record?.id ]
-	);
-	return (
-		<SidebarNavigationScreenDetailsPanel
-			spacing={ 5 }
-			title={ __( 'Details' ) }
-		>
-			{ getPageDetails( {
-				parentTitle,
-				templateTitle,
-				isPostsPage,
-				...record,
-			} ).map( ( { label, value } ) => (
-				<SidebarNavigationScreenDetailsPanelRow key={ label }>
-					<SidebarNavigationScreenDetailsPanelLabel>
-						{ label }
-					</SidebarNavigationScreenDetailsPanelLabel>
-					<SidebarNavigationScreenDetailsPanelValue>
-						{ value }
-					</SidebarNavigationScreenDetailsPanelValue>
-				</SidebarNavigationScreenDetailsPanelRow>
-			) ) }
-		</SidebarNavigationScreenDetailsPanel>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
deleted file mode 100644
index f864d48de3383..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { dateI18n, getDate, humanTimeDiff } from '@wordpress/date';
-import { createInterpolateElement } from '@wordpress/element';
-
-export default function StatusLabel( { status, date, short } ) {
-	const relateToNow = humanTimeDiff( date );
-	let statusLabel = status;
-	switch ( status ) {
-		case 'publish':
-			statusLabel = date
-				? createInterpolateElement(
-						sprintf(
-							/* translators: %s: is the relative time when the post was published. */
-							__( 'Published <time>%s</time>' ),
-							relateToNow
-						),
-						{ time: <time dateTime={ date } /> }
-				  )
-				: __( 'Published' );
-			break;
-		case 'future':
-			const formattedDate = dateI18n(
-				short ? 'M j' : 'F j',
-				getDate( date )
-			);
-			statusLabel = date
-				? createInterpolateElement(
-						sprintf(
-							/* translators: %s: is the formatted date and time on which the post is scheduled to be published. */
-							__( 'Scheduled: <time>%s</time>' ),
-							formattedDate
-						),
-						{ time: <time dateTime={ date } /> }
-				  )
-				: __( 'Scheduled' );
-			break;
-		case 'draft':
-			statusLabel = __( 'Draft' );
-			break;
-		case 'pending':
-			statusLabel = __( 'Pending' );
-			break;
-		case 'private':
-			statusLabel = __( 'Private' );
-			break;
-		case 'protected':
-			statusLabel = __( 'Password protected' );
-			break;
-	}
-
-	return (
-		<div
-			className={ classnames(
-				'edit-site-sidebar-navigation-screen-page__status',
-				{
-					[ `has-status has-${ status }-status` ]: !! status,
-				}
-			) }
-		>
-			{ statusLabel }
-		</div>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss
deleted file mode 100644
index 0daf52740c649..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-.edit-site-sidebar-navigation-screen-page__featured-image-wrapper {
-	background-color: $gray-800;
-	margin-bottom: $grid-unit-20;
-	min-height: 128px;
-	border-radius: $grid-unit-05;
-}
-
-.edit-site-sidebar-navigation-screen-page__featured-image {
-	border-radius: 2px;
-	height: 128px;
-	overflow: hidden;
-	width: 100%;
-	background-size: cover;
-	background-position: 50% 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: $gray-600;
-	img {
-		object-fit: cover;
-		height: 100%;
-		width: 100%;
-		object-position: 50% 50%;
-	}
-}
-
-.edit-site-sidebar-navigation-screen-page__featured-image-description {
-	font-size: $helptext-font-size;
-}
-
-.edit-site-sidebar-navigation-screen-page__excerpt {
-	font-size: $helptext-font-size;
-	margin-bottom: $grid-unit-30;
-}
-
-.edit-site-sidebar-navigation-screen-page__modified {
-	margin: 0 0 $grid-unit-20 $grid-unit-20;
-	color: $gray-600;
-	.components-text {
-		color: $gray-600;
-	}
-}
-
-.edit-site-sidebar-navigation-screen-page__status {
-	display: inline-flex;
-
-	time {
-		display: contents;
-	}
-
-	svg {
-		height: 16px;
-		width: 16px;
-		margin-right: $grid-unit-10;
-		fill: $alert-yellow;
-	}
-
-	&.has-publish-status svg,
-	&.has-future-status svg {
-		fill: $alert-green;
-	}
-}
-
-.edit-site-sidebar-navigation-screen__actions .editor-all-actions-button {
-	color: inherit;
-	&:active {
-		color: inherit;
-	}
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
deleted file mode 100644
index 6058b7d907d82..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { pencil } from '@wordpress/icons';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import SidebarButton from '../sidebar-button';
-import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
-import usePatternDetails from './use-pattern-details';
-import { store as editSiteStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-import TemplateActions from '../template-actions';
-
-const { useLocation, useHistory } = unlock( routerPrivateApis );
-
-export default function SidebarNavigationScreenPattern() {
-	const history = useHistory();
-	const location = useLocation();
-	const {
-		params: { postType, postId, categoryId, categoryType },
-	} = location;
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-
-	useInitEditedEntityFromURL();
-
-	const patternDetails = usePatternDetails( postType, postId );
-
-	const backPath = {
-		categoryId,
-		categoryType,
-		path: '/patterns',
-	};
-
-	return (
-		<SidebarNavigationScreen
-			actions={
-				<>
-					<TemplateActions
-						postType={ postType }
-						postId={ postId }
-						toggleProps={ { as: SidebarButton } }
-						onRemove={ () => {
-							history.push( backPath );
-						} }
-					/>
-					<SidebarButton
-						onClick={ () => setCanvasMode( 'edit' ) }
-						label={ __( 'Edit' ) }
-						icon={ pencil }
-					/>
-				</>
-			}
-			backPath={ backPath }
-			{ ...patternDetails }
-		/>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss
deleted file mode 100644
index 95a27ba5aa5fa..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.edit-site-sidebar-navigation-screen-pattern__added-by-description {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-top: $grid-unit-30;
-}
-
-.edit-site-sidebar-navigation-screen-pattern__added-by-description-author {
-	display: inline-flex;
-	align-items: center;
-
-	img {
-		border-radius: $grid-unit-15;
-	}
-
-	svg {
-		fill: $gray-600;
-	}
-}
-
-.edit-site-sidebar-navigation-screen-pattern__added-by-description-author-icon {
-	width: 24px;
-	height: 24px;
-	margin-right: $grid-unit-10;
-}
-
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js
deleted file mode 100644
index 22d9d841dc6fd..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import SidebarNavigationItem from '../sidebar-navigation-item';
-import useNavigationMenuTitle from './use-navigation-menu-title';
-import { useLink } from '../routes/link';
-import { NAVIGATION_POST_TYPE } from '../../utils/constants';
-
-export default function TemplatePartNavigationMenuListItem( { id } ) {
-	const title = useNavigationMenuTitle( id );
-
-	const linkInfo = useLink( {
-		postId: id,
-		postType: NAVIGATION_POST_TYPE,
-	} );
-
-	if ( ! id || title === undefined ) {
-		return null;
-	}
-
-	return (
-		<SidebarNavigationItem withChevron { ...linkInfo }>
-			{ title || __( '(no title)' ) }
-		</SidebarNavigationItem>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list.js
deleted file mode 100644
index 4171b1e782575..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import TemplatePartNavigationMenuListItem from './template-part-navigation-menu-list-item';
-
-export default function TemplatePartNavigationMenuList( { menus } ) {
-	return (
-		<ItemGroup className="edit-site-sidebar-navigation-screen-template-part-navigation-menu-list">
-			{ menus.map( ( menuId ) => (
-				<TemplatePartNavigationMenuListItem
-					key={ menuId }
-					id={ menuId }
-				/>
-			) ) }
-		</ItemGroup>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js
deleted file mode 100644
index 3d770cc4f7c26..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalHeading as Heading } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import NavigationMenuEditor from '../sidebar-navigation-screen-navigation-menu/navigation-menu-editor';
-import useNavigationMenuTitle from './use-navigation-menu-title';
-
-export default function TemplatePartNavigationMenu( { id } ) {
-	const title = useNavigationMenuTitle( id );
-
-	if ( ! id || title === undefined ) {
-		return null;
-	}
-
-	return (
-		<>
-			<Heading
-				className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title"
-				size="11"
-				upperCase
-				weight={ 500 }
-			>
-				{ title || __( 'Navigation' ) }
-			</Heading>
-			<NavigationMenuEditor navigationMenuId={ id } />
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menus.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menus.js
deleted file mode 100644
index d766d04b132ca..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menus.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalHeading as Heading } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import TemplatePartNavigationMenu from './template-part-navigation-menu';
-import TemplatePartNavigationMenuList from './template-part-navigation-menu-list';
-
-export default function TemplatePartNavigationMenus( { menus } ) {
-	if ( ! menus.length ) {
-		return null;
-	}
-
-	// if there is a single menu then render TemplatePartNavigationMenu
-	if ( menus.length === 1 ) {
-		return <TemplatePartNavigationMenu id={ menus[ 0 ] } />;
-	}
-
-	// if there are multiple menus then render TemplatePartNavigationMenuList
-	return (
-		<>
-			<Heading
-				className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title"
-				size="11"
-				upperCase
-				weight={ 500 }
-			>
-				{ __( 'Navigation' ) }
-			</Heading>
-			<TemplatePartNavigationMenuList menus={ menus } />
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-content.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-content.js
deleted file mode 100644
index 249124b1054ce..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-content.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { parse } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import TemplatePartNavigationMenus from './template-part-navigation-menus';
-import useEditedEntityRecord from '../use-edited-entity-record';
-import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
-
-function getBlocksFromRecord( record ) {
-	if ( record?.blocks ) {
-		return record?.blocks;
-	}
-
-	return record?.content && typeof record.content !== 'function'
-		? parse( record.content )
-		: [];
-}
-
-/**
- * Retrieves a list of specific blocks from a given tree of blocks.
- *
- * @param {string} targetBlockType The name of the block type to find.
- * @param {Array}  blocks          A list of blocks from a template part entity.
- *
- * @return {Array} A list of any navigation blocks found in the blocks.
- */
-function getBlocksOfTypeFromBlocks( targetBlockType, blocks ) {
-	if ( ! targetBlockType || ! blocks?.length ) {
-		return [];
-	}
-
-	const findInBlocks = ( _blocks ) => {
-		if ( ! _blocks ) {
-			return [];
-		}
-
-		const navigationBlocks = [];
-
-		for ( const block of _blocks ) {
-			if ( block.name === targetBlockType ) {
-				navigationBlocks.push( block );
-			}
-
-			if ( block?.innerBlocks ) {
-				const innerNavigationBlocks = findInBlocks( block.innerBlocks );
-
-				if ( innerNavigationBlocks.length ) {
-					navigationBlocks.push( ...innerNavigationBlocks );
-				}
-			}
-		}
-
-		return navigationBlocks;
-	};
-
-	return findInBlocks( blocks );
-}
-
-export default function useNavigationMenuContent( postType, postId ) {
-	const { record } = useEditedEntityRecord( postType, postId );
-
-	// Only managing navigation menus in template parts is supported
-	// to match previous behaviour. This could potentially be expanded
-	// to patterns as well.
-	if ( postType !== TEMPLATE_PART_POST_TYPE ) {
-		return;
-	}
-
-	const blocks = getBlocksFromRecord( record );
-	const navigationBlocks = getBlocksOfTypeFromBlocks(
-		'core/navigation',
-		blocks
-	);
-
-	if ( ! navigationBlocks.length ) {
-		return;
-	}
-
-	const navigationMenuIds = navigationBlocks?.map(
-		( block ) => block.attributes.ref
-	);
-
-	// Dedupe the Navigation blocks, as you can have multiple navigation blocks in the template.
-	// Also, filter out undefined values, as blocks don't have an id when initially added.
-	const uniqueNavigationMenuIds = [ ...new Set( navigationMenuIds ) ].filter(
-		( menuId ) => menuId
-	);
-
-	if ( ! uniqueNavigationMenuIds?.length ) {
-		return;
-	}
-
-	return <TemplatePartNavigationMenus menus={ uniqueNavigationMenuIds } />;
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-title.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-title.js
deleted file mode 100644
index 4585c98ce3e1f..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-title.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { NAVIGATION_POST_TYPE } from '../../utils/constants';
-
-export default function useNavigationMenuTitle( id ) {
-	return useSelect(
-		( select ) => {
-			if ( ! id ) {
-				return undefined;
-			}
-
-			const editedRecord = select( coreStore ).getEditedEntityRecord(
-				'postType',
-				NAVIGATION_POST_TYPE,
-				id
-			);
-
-			// Do not display a 'trashed' navigation menu.
-			return editedRecord.status === 'trash'
-				? undefined
-				: editedRecord.title;
-		},
-		[ id ]
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js
deleted file mode 100644
index dfdfbd87d2200..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js
+++ /dev/null
@@ -1,205 +0,0 @@
-/**
- * External dependencies
- */
-import { sentenceCase } from 'change-case';
-
-/**
- * WordPress dependencies
- */
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { useAddedBy } from '../page-templates/hooks';
-import useEditedEntityRecord from '../use-edited-entity-record';
-import useNavigationMenuContent from './use-navigation-menu-content';
-import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
-import {
-	SidebarNavigationScreenDetailsPanel,
-	SidebarNavigationScreenDetailsPanelRow,
-	SidebarNavigationScreenDetailsPanelLabel,
-	SidebarNavigationScreenDetailsPanelValue,
-} from '../sidebar-navigation-screen-details-panel';
-import {
-	PATTERN_TYPES,
-	TEMPLATE_PART_POST_TYPE,
-	PATTERN_SYNC_TYPES,
-	TEMPLATE_ORIGINS,
-} from '../../utils/constants';
-
-export default function usePatternDetails( postType, postId ) {
-	const { getDescription, getTitle, record } = useEditedEntityRecord(
-		postType,
-		postId
-	);
-	const templatePartAreas = useSelect(
-		( select ) =>
-			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
-		[]
-	);
-	const { currentTheme, userPatternCategories } = useSelect( ( select ) => {
-		const { getCurrentTheme, getUserPatternCategories } =
-			select( coreStore );
-
-		return {
-			currentTheme: getCurrentTheme(),
-			userPatternCategories: getUserPatternCategories(),
-		};
-	}, [] );
-
-	const addedBy = useAddedBy( postType, postId );
-	const isAddedByActiveTheme =
-		addedBy.type === 'theme' && record.theme === currentTheme?.stylesheet;
-	const title = getTitle();
-	let description = getDescription();
-
-	if ( ! description && addedBy.text ) {
-		description =
-			postType === PATTERN_TYPES.user
-				? sprintf(
-						// translators: %s: pattern title e.g: "Header".
-						__( 'This is the %s pattern.' ),
-						getTitle()
-				  )
-				: sprintf(
-						// translators: %s: template part title e.g: "Header".
-						__( 'This is the %s template part.' ),
-						getTitle()
-				  );
-	}
-
-	if ( ! description && postType === PATTERN_TYPES.user && record?.title ) {
-		description = sprintf(
-			// translators: %s: user created pattern title e.g. "Footer".
-			__( 'This is the %s pattern.' ),
-			record.title
-		);
-	}
-
-	const footer = record?.modified ? (
-		<SidebarNavigationScreenDetailsFooter record={ record } />
-	) : null;
-
-	const details = [];
-
-	if (
-		postType === PATTERN_TYPES.user ||
-		postType === TEMPLATE_PART_POST_TYPE
-	) {
-		details.push( {
-			label: __( 'Syncing' ),
-			value:
-				record.wp_pattern_sync_status === PATTERN_SYNC_TYPES.unsynced
-					? _x(
-							'Not synced',
-							'Text that indicates that the pattern is not synchronized'
-					  )
-					: _x(
-							'Synced',
-							'Text that indicates that the pattern is synchronized'
-					  ),
-		} );
-
-		if ( record.wp_pattern_category?.length === 0 ) {
-			details.push( {
-				label: __( 'Categories' ),
-				value: __( 'Uncategorized' ),
-			} );
-		}
-		if ( record.wp_pattern_category?.length > 0 ) {
-			const patternCategories = new Map();
-			userPatternCategories.forEach( ( userCategory ) =>
-				patternCategories.set( userCategory.id, userCategory )
-			);
-
-			const categories = record.wp_pattern_category
-				.filter( ( category ) => patternCategories.get( category ) )
-				.map( ( category ) => patternCategories.get( category ).label );
-
-			details.push( {
-				label: __( 'Categories' ),
-				value: categories.length > 0 ? categories.join( ', ' ) : '',
-			} );
-		}
-	}
-
-	if ( postType === TEMPLATE_PART_POST_TYPE ) {
-		const templatePartArea = templatePartAreas.find(
-			( area ) => area.area === record.area
-		);
-
-		let areaDetailValue = templatePartArea?.label;
-
-		if ( ! areaDetailValue ) {
-			areaDetailValue = record.area
-				? sprintf(
-						// translators: %s: Sentenced cased template part area e.g: "My custom area".
-						__( '%s (removed)' ),
-						sentenceCase( record.area )
-				  )
-				: __( 'None' );
-		}
-
-		details.push( { label: __( 'Area' ), value: areaDetailValue } );
-	}
-
-	if (
-		postType === TEMPLATE_PART_POST_TYPE &&
-		addedBy.text &&
-		! isAddedByActiveTheme
-	) {
-		details.push( {
-			label: __( 'Added by' ),
-			value: (
-				<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-author">
-					{ addedBy.text }
-				</span>
-			),
-		} );
-	}
-
-	if (
-		postType === TEMPLATE_PART_POST_TYPE &&
-		addedBy.text &&
-		( record.origin === TEMPLATE_ORIGINS.plugin ||
-			record.has_theme_file === true )
-	) {
-		details.push( {
-			label: __( 'Customized' ),
-			value: (
-				<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-customized">
-					{ addedBy.isCustomized ? __( 'Yes' ) : __( 'No' ) }
-				</span>
-			),
-		} );
-	}
-
-	const content = (
-		<>
-			{ useNavigationMenuContent( postType, postId ) }
-			{ !! details.length && (
-				<SidebarNavigationScreenDetailsPanel
-					spacing={ 5 }
-					title={ __( 'Details' ) }
-				>
-					{ details.map( ( { label, value } ) => (
-						<SidebarNavigationScreenDetailsPanelRow key={ label }>
-							<SidebarNavigationScreenDetailsPanelLabel>
-								{ label }
-							</SidebarNavigationScreenDetailsPanelLabel>
-							<SidebarNavigationScreenDetailsPanelValue>
-								{ value }
-							</SidebarNavigationScreenDetailsPanelValue>
-						</SidebarNavigationScreenDetailsPanelRow>
-					) ) }
-				</SidebarNavigationScreenDetailsPanel>
-			) }
-		</>
-	);
-
-	return { title, description, content, footer };
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/category-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/category-item.js
index 49274a0435baf..092f090e3c152 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/category-item.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/category-item.js
@@ -3,6 +3,7 @@
  */
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { useLink } from '../routes/link';
+import { TEMPLATE_PART_POST_TYPE, PATTERN_TYPES } from '../../utils/constants';
 
 export default function CategoryItem( {
 	count,
@@ -11,12 +12,13 @@ export default function CategoryItem( {
 	isActive,
 	label,
 	type,
-	path = '/patterns',
 } ) {
 	const linkInfo = useLink( {
-		path,
-		categoryType: type,
 		categoryId: id,
+		postType:
+			type === TEMPLATE_PART_POST_TYPE
+				? TEMPLATE_PART_POST_TYPE
+				: PATTERN_TYPES.user,
 	} );
 
 	if ( ! count ) {
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
index 352c0c4c455ec..e0d085812ba53 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
@@ -15,7 +15,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import AddNewPattern from '../add-new-pattern';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import CategoryItem from './category-item';
 import {
@@ -31,7 +30,6 @@ import { unlock } from '../../lock-unlock';
 const { useLocation } = unlock( routerPrivateApis );
 
 function CategoriesGroup( {
-	path,
 	templatePartAreas,
 	patternCategories,
 	currentCategory,
@@ -43,7 +41,6 @@ function CategoriesGroup( {
 		<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
 			<CategoryItem
 				key="all"
-				path={ path }
 				count={ Object.values( templatePartAreas )
 					.map( ( { templateParts } ) => templateParts?.length || 0 )
 					.reduce( ( acc, val ) => acc + val, 0 ) }
@@ -60,7 +57,6 @@ function CategoriesGroup( {
 				( [ area, { label, templateParts } ] ) => (
 					<CategoryItem
 						key={ area }
-						path={ path }
 						count={ templateParts?.length }
 						icon={ getTemplatePartIcon( area ) }
 						label={ label }
@@ -77,32 +73,28 @@ function CategoriesGroup( {
 			{ allPatterns && (
 				<CategoryItem
 					key={ allPatterns.name }
-					path={ path }
 					count={ allPatterns.count }
 					label={ allPatterns.label }
 					icon={ file }
 					id={ allPatterns.name }
-					type="pattern"
+					type={ PATTERN_TYPES.user }
 					isActive={
 						currentCategory === `${ allPatterns.name }` &&
-						( currentType === PATTERN_TYPES.theme ||
-							currentType === PATTERN_TYPES.user )
+						currentType === PATTERN_TYPES.user
 					}
 				/>
 			) }
 			{ otherPatterns.map( ( category ) => (
 				<CategoryItem
 					key={ category.name }
-					path={ path }
 					count={ category.count }
 					label={ category.label }
 					icon={ file }
 					id={ category.name }
-					type="pattern"
+					type={ PATTERN_TYPES.user }
 					isActive={
 						currentCategory === `${ category.name }` &&
-						( currentType === PATTERN_TYPES.theme ||
-							currentType === PATTERN_TYPES.user )
+						currentType === PATTERN_TYPES.user
 					}
 				/>
 			) ) }
@@ -110,12 +102,12 @@ function CategoriesGroup( {
 	);
 }
 
-export default function SidebarNavigationScreenPatterns() {
+export default function SidebarNavigationScreenPatterns( { backPath } ) {
 	const {
-		params: { categoryType, categoryId, path },
+		params: { postType, categoryId },
 	} = useLocation();
 	const currentCategory = categoryId || PATTERN_DEFAULT_CATEGORY;
-	const currentType = categoryType || PATTERN_TYPES.theme;
+	const currentType = postType || PATTERN_TYPES.user;
 
 	const { templatePartAreas, hasTemplateParts, isLoading } =
 		useTemplatePartAreas();
@@ -125,18 +117,6 @@ export default function SidebarNavigationScreenPatterns() {
 		[]
 	);
 
-	/**
-	 * This sidebar needs to temporarily accomodate two different "URLs":
-	 *
-	 * 1. path = /patterns
-	 *    Block based themes. Also classic themes can access this URL, though it's not linked anywhere.
-	 *
-	 * 2. path = /wp_template_part/all
-	 *    Classic themes with support for block-template-parts. We need to list only Template Parts in this case.
-	 *    The URL is accessible from the Appearance > Template Parts menu.
-	 *
-	 * This is temporary. We aim to consolidate to /patterns.
-	 */
 	return (
 		<SidebarNavigationScreen
 			isRoot={ ! isBlockBasedTheme }
@@ -144,7 +124,7 @@ export default function SidebarNavigationScreenPatterns() {
 			description={ __(
 				'Manage what patterns are available when editing the site.'
 			) }
-			actions={ <AddNewPattern /> }
+			backPath={ backPath }
 			content={
 				<>
 					{ isLoading && __( 'Loading items…' ) }
@@ -156,7 +136,6 @@ export default function SidebarNavigationScreenPatterns() {
 								</ItemGroup>
 							) }
 							<CategoriesGroup
-								path={ path }
 								templatePartAreas={ templatePartAreas }
 								patternCategories={ patternCategories }
 								currentCategory={ currentCategory }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js
deleted file mode 100644
index 57a1337761753..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { debounce } from '@wordpress/compose';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import {
-	CheckboxControl,
-	__experimentalInputControl as InputControl,
-	__experimentalNumberControl as NumberControl,
-} from '@wordpress/components';
-import { useState, useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import {
-	SidebarNavigationScreenDetailsPanel,
-	SidebarNavigationScreenDetailsPanelRow,
-} from '../sidebar-navigation-screen-details-panel';
-
-const EMPTY_OBJECT = {};
-
-export default function HomeTemplateDetails() {
-	const { editEntityRecord } = useDispatch( coreStore );
-
-	const {
-		allowCommentsOnNewPosts,
-		postsPerPage,
-		postsPageTitle,
-		postsPageId,
-	} = useSelect( ( select ) => {
-		const { getEntityRecord } = select( coreStore );
-		const siteSettings = getEntityRecord( 'root', 'site' );
-		const _postsPageRecord = siteSettings?.page_for_posts
-			? getEntityRecord(
-					'postType',
-					'page',
-					siteSettings?.page_for_posts
-			  )
-			: EMPTY_OBJECT;
-
-		return {
-			allowCommentsOnNewPosts:
-				siteSettings?.default_comment_status === 'open',
-			postsPageTitle: _postsPageRecord?.title?.rendered,
-			postsPageId: _postsPageRecord?.id,
-			postsPerPage: siteSettings?.posts_per_page,
-		};
-	}, [] );
-
-	const [ commentsOnNewPostsValue, setCommentsOnNewPostsValue ] =
-		useState( '' );
-	const [ postsCountValue, setPostsCountValue ] = useState( 1 );
-	const [ postsPageTitleValue, setPostsPageTitleValue ] = useState( '' );
-
-	/*
-	 * This hook serves to set the server-retrieved values,
-	 * postsPageTitle, allowCommentsOnNewPosts, postsPerPage,
-	 * to local state.
-	 */
-	useEffect( () => {
-		setCommentsOnNewPostsValue( allowCommentsOnNewPosts );
-		setPostsPageTitleValue( postsPageTitle );
-		setPostsCountValue( postsPerPage );
-	}, [ postsPageTitle, allowCommentsOnNewPosts, postsPerPage ] );
-
-	const setAllowCommentsOnNewPosts = ( newValue ) => {
-		setCommentsOnNewPostsValue( newValue );
-		editEntityRecord( 'root', 'site', undefined, {
-			default_comment_status: newValue ? 'open' : null,
-		} );
-	};
-
-	const setPostsPageTitle = ( newValue ) => {
-		setPostsPageTitleValue( newValue );
-		editEntityRecord( 'postType', 'page', postsPageId, {
-			title: newValue,
-		} );
-	};
-
-	const setPostsPerPage = ( newValue ) => {
-		setPostsCountValue( newValue );
-		editEntityRecord( 'root', 'site', undefined, {
-			posts_per_page: newValue,
-		} );
-	};
-
-	return (
-		<>
-			<SidebarNavigationScreenDetailsPanel spacing={ 6 }>
-				{ postsPageId && (
-					<SidebarNavigationScreenDetailsPanelRow>
-						<InputControl
-							className="edit-site-sidebar-navigation-screen__input-control"
-							placeholder={ __( 'No Title' ) }
-							size={ '__unstable-large' }
-							value={ postsPageTitleValue }
-							onChange={ debounce( setPostsPageTitle, 300 ) }
-							label={ __( 'Blog title' ) }
-							help={ __(
-								'Set the Posts Page title. Appears in search results, and when the page is shared on social media.'
-							) }
-						/>
-					</SidebarNavigationScreenDetailsPanelRow>
-				) }
-				<SidebarNavigationScreenDetailsPanelRow>
-					<NumberControl
-						className="edit-site-sidebar-navigation-screen__input-control"
-						placeholder={ 0 }
-						value={ postsCountValue }
-						size={ '__unstable-large' }
-						spinControls="custom"
-						step="1"
-						min="1"
-						onChange={ setPostsPerPage }
-						label={ __( 'Posts per page' ) }
-						help={ __(
-							'Set the default number of posts to display on blog pages, including categories and tags. Some templates may override this setting.'
-						) }
-					/>
-				</SidebarNavigationScreenDetailsPanelRow>
-			</SidebarNavigationScreenDetailsPanel>
-
-			<SidebarNavigationScreenDetailsPanel
-				title={ __( 'Discussion' ) }
-				spacing={ 3 }
-			>
-				<SidebarNavigationScreenDetailsPanelRow>
-					<CheckboxControl
-						className="edit-site-sidebar-navigation-screen__input-control"
-						label={ __( 'Allow comments on new posts' ) }
-						help={ __(
-							'Changes will apply to new posts only. Individual posts may override these settings.'
-						) }
-						checked={ commentsOnNewPostsValue }
-						onChange={ setAllowCommentsOnNewPosts }
-					/>
-				</SidebarNavigationScreenDetailsPanelRow>
-			</SidebarNavigationScreenDetailsPanel>
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
deleted file mode 100644
index ff12434b27895..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, _x } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { pencil } from '@wordpress/icons';
-import { Icon } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import TemplateAreas from './template-areas';
-import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import useEditedEntityRecord from '../use-edited-entity-record';
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-import SidebarButton from '../sidebar-button';
-import { useAddedBy } from '../page-templates/hooks';
-import TemplateActions from '../template-actions';
-import HomeTemplateDetails from './home-template-details';
-import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
-
-const { useHistory, useLocation } = unlock( routerPrivateApis );
-
-function useTemplateDetails( postType, postId ) {
-	const { getDescription, getTitle, record } = useEditedEntityRecord(
-		postType,
-		postId
-	);
-	const currentTheme = useSelect(
-		( select ) => select( coreStore ).getCurrentTheme(),
-		[]
-	);
-	const addedBy = useAddedBy( postType, postId );
-	const isAddedByActiveTheme =
-		addedBy.type === 'theme' && record.theme === currentTheme?.stylesheet;
-	const title = getTitle();
-	let descriptionText = getDescription();
-
-	if ( ! descriptionText && addedBy.text ) {
-		descriptionText = __(
-			'This is a custom template that can be applied manually to any Post or Page.'
-		);
-	}
-
-	const content =
-		record?.slug === 'home' || record?.slug === 'index' ? (
-			<>
-				<HomeTemplateDetails />
-				<TemplateAreas />
-			</>
-		) : (
-			<TemplateAreas />
-		);
-
-	const footer = record?.modified ? (
-		<SidebarNavigationScreenDetailsFooter record={ record } />
-	) : null;
-
-	const description = (
-		<>
-			{ descriptionText }
-
-			{ addedBy.text && ! isAddedByActiveTheme && (
-				<span className="edit-site-sidebar-navigation-screen-template__added-by-description">
-					<span className="edit-site-sidebar-navigation-screen-template__added-by-description-author">
-						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-author-icon">
-							{ addedBy.imageUrl ? (
-								<img
-									src={ addedBy.imageUrl }
-									alt=""
-									width="24"
-									height="24"
-								/>
-							) : (
-								<Icon icon={ addedBy.icon } />
-							) }
-						</span>
-						{ addedBy.text }
-					</span>
-
-					{ addedBy.isCustomized && (
-						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-customized">
-							{ _x( '(Customized)', 'template' ) }
-						</span>
-					) }
-				</span>
-			) }
-		</>
-	);
-
-	return { title, description, content, footer };
-}
-
-export default function SidebarNavigationScreenTemplate() {
-	const history = useHistory();
-	const {
-		params: { postType, postId },
-	} = useLocation();
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const { title, content, description, footer } = useTemplateDetails(
-		postType,
-		postId
-	);
-
-	return (
-		<SidebarNavigationScreen
-			title={ title }
-			actions={
-				<>
-					<TemplateActions
-						postType={ postType }
-						postId={ postId }
-						toggleProps={ { as: SidebarButton } }
-						onRemove={ () => {
-							history.push( { path: '/' + postType } );
-						} }
-					/>
-					<SidebarButton
-						onClick={ () => setCanvasMode( 'edit' ) }
-						label={ __( 'Edit' ) }
-						icon={ pencil }
-					/>
-				</>
-			}
-			description={ description }
-			content={ content }
-			footer={ footer }
-		/>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss
deleted file mode 100644
index 4e6fcc3700fc4..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-.edit-site-sidebar-navigation-screen-template__added-by-description {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-top: $grid-unit-30;
-}
-
-.edit-site-sidebar-navigation-screen-template__added-by-description-author {
-	display: inline-flex;
-	align-items: center;
-
-	img {
-		border-radius: $grid-unit-15;
-		width: 20px;
-		height: 20px;
-	}
-
-	svg {
-		fill: $gray-600;
-	}
-}
-
-.edit-site-sidebar-navigation-screen-template__added-by-description-author-icon {
-	width: 24px;
-	height: 24px;
-	margin-right: $grid-unit-05;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.edit-site-sidebar-navigation-screen-template__template-area-button {
-	color: $white;
-	display: flex;
-	align-items: center;
-	width: 100%;
-	flex-wrap: nowrap;
-	border-radius: 4px;
-	&:hover,
-	&:focus {
-		background: $gray-800;
-		color: $white;
-	}
-}
-
-.edit-site-sidebar-navigation-screen-template__template-area-label-text {
-	margin: 0 $grid-unit-20 0 $grid-unit-05;
-	flex-grow: 1;
-}
-
-.edit-site-sidebar-navigation-screen-template__template-icon {
-	display: flex;
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/template-areas.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/template-areas.js
deleted file mode 100644
index db59f6886124b..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template/template-areas.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import {
-	__experimentalTruncate as Truncate,
-	__experimentalItemGroup as ItemGroup,
-} from '@wordpress/components';
-import { store as editorStore } from '@wordpress/editor';
-import { useMemo } from '@wordpress/element';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import {
-	SidebarNavigationScreenDetailsPanel,
-	SidebarNavigationScreenDetailsPanelRow,
-} from '../sidebar-navigation-screen-details-panel';
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-import { useLink } from '../routes/link';
-import SidebarNavigationItem from '../sidebar-navigation-item';
-import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
-
-function TemplateAreaButton( { postId, area, title } ) {
-	const templatePartArea = useSelect(
-		( select ) => {
-			const defaultAreas =
-				select(
-					editorStore
-				).__experimentalGetDefaultTemplatePartAreas();
-
-			return defaultAreas.find(
-				( defaultArea ) => defaultArea.area === area
-			);
-		},
-		[ area ]
-	);
-	const linkInfo = useLink( {
-		postType: TEMPLATE_PART_POST_TYPE,
-		postId,
-	} );
-
-	return (
-		<SidebarNavigationItem
-			className="edit-site-sidebar-navigation-screen-template__template-area-button"
-			{ ...linkInfo }
-			icon={ templatePartArea?.icon }
-			withChevron
-		>
-			<Truncate
-				limit={ 20 }
-				ellipsizeMode="tail"
-				numberOfLines={ 1 }
-				className="edit-site-sidebar-navigation-screen-template__template-area-label-text"
-			>
-				{ decodeEntities( title ) }
-			</Truncate>
-		</SidebarNavigationItem>
-	);
-}
-
-export default function TemplateAreas() {
-	const { templatePartAreas, currentTemplateParts } = useSelect(
-		( select ) => {
-			const { getSettings, getCurrentTemplateTemplateParts } = unlock(
-				select( editSiteStore )
-			);
-			return {
-				templatePartAreas: getSettings()?.defaultTemplatePartAreas,
-				currentTemplateParts: getCurrentTemplateTemplateParts(),
-			};
-		},
-		[]
-	);
-
-	/*
-	 * Merge data in currentTemplateParts with templatePartAreas,
-	 * which contains the template icon and fallback labels
-	 */
-	const templateAreas = useMemo( () => {
-		// Keep track of template part IDs that have already been added to the array.
-		const templatePartIds = new Set();
-		const filterOutDuplicateTemplateParts = ( currentTemplatePart ) => {
-			// If the template part has already been added to the array, skip it.
-			if ( templatePartIds.has( currentTemplatePart.templatePart.id ) ) {
-				return;
-			}
-			// Add to the array of template part IDs.
-			templatePartIds.add( currentTemplatePart.templatePart.id );
-			return currentTemplatePart;
-		};
-
-		return currentTemplateParts.length && templatePartAreas
-			? currentTemplateParts
-					.filter( filterOutDuplicateTemplateParts )
-					.map( ( { templatePart, block } ) => ( {
-						...templatePartAreas?.find(
-							( { area } ) => area === templatePart?.area
-						),
-						...templatePart,
-						clientId: block.clientId,
-					} ) )
-			: [];
-	}, [ currentTemplateParts, templatePartAreas ] );
-
-	if ( ! templateAreas.length ) {
-		return null;
-	}
-
-	return (
-		<SidebarNavigationScreenDetailsPanel
-			title={ __( 'Areas' ) }
-			spacing={ 3 }
-		>
-			<ItemGroup>
-				{ templateAreas.map(
-					( { clientId, label, area, theme, slug, title } ) => (
-						<SidebarNavigationScreenDetailsPanelRow
-							key={ clientId }
-						>
-							<TemplateAreaButton
-								postId={ `${ theme }//${ slug }` }
-								title={ title?.rendered || label }
-								area={ area }
-							/>
-						</SidebarNavigationScreenDetailsPanelRow>
-					)
-				) }
-			</ItemGroup>
-		</SidebarNavigationScreenDetailsPanel>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js
index e7f11f07e82a2..5a07adf62d9b3 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js
@@ -53,7 +53,7 @@ export default function DataviewsTemplatesSidebarContent( {
 	return (
 		<ItemGroup>
 			<DataViewItem
-				slug={ 'all' }
+				slug="all"
 				title={ title }
 				icon={ layout }
 				isActive={ activeView === 'all' }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
index d48314d1f36e6..8e7946390a364 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
@@ -13,17 +13,18 @@ import DataviewsTemplatesSidebarContent from './content';
 
 const { useLocation } = unlock( routerPrivateApis );
 
-export default function SidebarNavigationScreenTemplatesBrowse() {
+export default function SidebarNavigationScreenTemplatesBrowse( { backPath } ) {
 	const {
 		params: { activeView = 'all' },
 	} = useLocation();
 
 	return (
 		<SidebarNavigationScreen
-			title={ __( 'Manage templates' ) }
+			title={ __( 'Templates' ) }
 			description={ __(
 				'Create new templates, or reset any customizations made to the templates supplied by your theme.'
 			) }
+			backPath={ backPath }
 			content={
 				<DataviewsTemplatesSidebarContent
 					activeView={ activeView }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
index a65c177cecfee..417e643bb8b04 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,25 +32,6 @@ import { SidebarNavigationContext } from '../sidebar';
 
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 
-function getBackPath( params ) {
-	// From a data view path we navigate back to root
-	if ( params.path ) {
-		return {};
-	}
-
-	// From edit screen for a post we navigate back to post-type specific data view
-	if ( params.postType === 'page' ) {
-		return { path: '/page', postId: params.postId };
-	} else if ( params.postType === 'wp_template' ) {
-		return { path: '/wp_template', postId: params.postId };
-	} else if ( params.postType === 'wp_navigation' ) {
-		return { path: '/navigation', postId: params.postId };
-	}
-
-	// Go back to root by default
-	return {};
-}
-
 export default function SidebarNavigationScreen( {
 	isRoot,
 	title,
@@ -81,32 +62,27 @@ export default function SidebarNavigationScreen( {
 	);
 	const location = useLocation();
 	const history = useHistory();
-	const navigate = useContext( SidebarNavigationContext );
+	const { navigate } = useContext( SidebarNavigationContext );
+	const backPath = backPathProp ?? location.state?.backPath;
 	const icon = isRTL() ? chevronRight : chevronLeft;
+
 	return (
 		<>
 			<VStack
-				className={ classnames(
-					'edit-site-sidebar-navigation-screen__main',
-					{
-						'has-footer': !! footer,
-					}
-				) }
+				className={ clsx( 'edit-site-sidebar-navigation-screen__main', {
+					'has-footer': !! footer,
+				} ) }
 				spacing={ 0 }
 				justify="flex-start"
 			>
 				<HStack
-					spacing={ 4 }
+					spacing={ 3 }
 					alignment="flex-start"
 					className="edit-site-sidebar-navigation-screen__title-icon"
 				>
 					{ ! isRoot && (
 						<SidebarButton
 							onClick={ () => {
-								const backPath =
-									backPathProp ??
-									location.state?.backPath ??
-									getBackPath( location.params );
 								history.push( backPath );
 								navigate( 'back' );
 							} }
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 0b1b1bd4b0aa2..7691f9ba2cdb0 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -67,8 +67,8 @@
 
 .edit-site-sidebar-navigation-screen__title {
 	flex-grow: 1;
-	padding: $grid-unit-15 * 0.5 0 0 0;
 	overflow-wrap: break-word;
+	padding: $grid-unit-05 * 0.5 0 0 0;
 }
 
 .edit-site-sidebar-navigation-screen__actions {
@@ -99,20 +99,22 @@
 }
 
 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variations_item {
+
+	// Use a white outline to provide contrast with the dark background.
 	.edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 $border-width $gray-900;
+		outline-color: rgba($white, 0.05);
 	}
 
-	&:focus .edit-site-global-styles-variations_item-preview,
-	&.is-active .edit-site-global-styles-variations_item-preview {
-		box-shadow: inset 0 0 0 $border-width $gray-900, 0 0 0 var(--wp-admin-border-width-focus) $white;
+	&:not(.is-active):hover .edit-site-global-styles-variations_item-preview {
+		outline-color: rgba($white, 0.15);
+	}
 
-		// Shown in Windows 10 high contrast mode.
-		outline-width: 3px;
+	&.is-active .edit-site-global-styles-variations_item-preview {
+		outline-color: $white;
+	}
 
-		&::after {
-			box-shadow: inset 0 0 0 1px $gray-900;
-		}
+	&:focus-visible .edit-site-global-styles-variations_item-preview {
+		outline-color: var(--wp-admin-theme-color);
 	}
 }
 
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
index 90fd1258cf780..84820952e1b62 100644
--- a/packages/edit-site/src/components/sidebar/index.js
+++ b/packages/edit-site/src/components/sidebar/index.js
@@ -1,68 +1,92 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import {
-	useCallback,
 	createContext,
+	useContext,
 	useState,
 	useRef,
-	useEffect,
+	useLayoutEffect,
 } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
 
 export const SidebarNavigationContext = createContext( () => {} );
+// Focus a sidebar element after a navigation. The element to focus is either
+// specified by `focusSelector` (when navigating back) or it is the first
+// tabbable element (usually the "Back" button).
+function focusSidebarElement( el, direction, focusSelector ) {
+	let elementToFocus;
+	if ( direction === 'back' && focusSelector ) {
+		elementToFocus = el.querySelector( focusSelector );
+	}
+	if ( direction !== null && ! elementToFocus ) {
+		const [ firstTabbable ] = focus.tabbable.find( el );
+		elementToFocus = firstTabbable ?? el;
+	}
+	elementToFocus?.focus();
+}
 
-export default function SidebarContent( { routeKey, children } ) {
-	const [ navState, setNavState ] = useState( {
+// Navigation state that is updated when navigating back or forward. Helps us
+// manage the animations and also focus.
+function createNavState() {
+	let state = {
 		direction: null,
 		focusSelector: null,
-	} );
+	};
 
-	const navigate = useCallback( ( direction, focusSelector = null ) => {
-		setNavState( ( prevState ) => ( {
-			direction,
-			focusSelector:
-				direction === 'forward' && focusSelector
-					? focusSelector
-					: prevState.focusSelector,
-		} ) );
-	}, [] );
+	return {
+		get() {
+			return state;
+		},
+		navigate( direction, focusSelector = null ) {
+			state = {
+				direction,
+				focusSelector:
+					direction === 'forward' && focusSelector
+						? focusSelector
+						: state.focusSelector,
+			};
+		},
+	};
+}
 
+function SidebarContentWrapper( { children } ) {
+	const navState = useContext( SidebarNavigationContext );
 	const wrapperRef = useRef();
-	useEffect( () => {
-		let elementToFocus;
-		if ( navState.direction === 'back' && navState.focusSelector ) {
-			elementToFocus = wrapperRef.current.querySelector(
-				navState.focusSelector
-			);
-		}
-		if ( navState.direction !== null && ! elementToFocus ) {
-			const [ firstTabbable ] = focus.tabbable.find( wrapperRef.current );
-			elementToFocus = firstTabbable ?? wrapperRef.current;
-		}
-		elementToFocus?.focus();
+	const [ navAnimation, setNavAnimation ] = useState( null );
+
+	useLayoutEffect( () => {
+		const { direction, focusSelector } = navState.get();
+		focusSidebarElement( wrapperRef.current, direction, focusSelector );
+		setNavAnimation( direction );
 	}, [ navState ] );
 
-	const wrapperCls = classnames( 'edit-site-sidebar__screen-wrapper', {
-		'slide-from-left': navState.direction === 'back',
-		'slide-from-right': navState.direction === 'forward',
+	const wrapperCls = clsx( 'edit-site-sidebar__screen-wrapper', {
+		'slide-from-left': navAnimation === 'back',
+		'slide-from-right': navAnimation === 'forward',
 	} );
 
 	return (
-		<SidebarNavigationContext.Provider value={ navigate }>
+		<div ref={ wrapperRef } className={ wrapperCls }>
+			{ children }
+		</div>
+	);
+}
+
+export default function SidebarContent( { routeKey, children } ) {
+	const [ navState ] = useState( createNavState );
+
+	return (
+		<SidebarNavigationContext.Provider value={ navState }>
 			<div className="edit-site-sidebar__content">
-				<div
-					ref={ wrapperRef }
-					key={ routeKey }
-					className={ wrapperCls }
-				>
+				<SidebarContentWrapper key={ routeKey }>
 					{ children }
-				</div>
+				</SidebarContentWrapper>
 			</div>
 		</SidebarNavigationContext.Provider>
 	);
diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
index 8fa310b65aa9c..160015a4bf3b1 100644
--- a/packages/edit-site/src/components/site-hub/index.js
+++ b/packages/edit-site/src/components/site-hub/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
 import { memo } from '@wordpress/element';
-import { search, external } from '@wordpress/icons';
+import { search } from '@wordpress/icons';
 import { store as commandsStore } from '@wordpress/commands';
 import { displayShortcut } from '@wordpress/keycodes';
 import { filterURLForDisplay } from '@wordpress/url';
@@ -87,7 +87,7 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 
 	return (
 		<motion.div
-			className={ classnames( 'edit-site-site-hub', className ) }
+			className={ clsx( 'edit-site-site-hub', className ) }
 			variants={ {
 				isDistractionFree: { x: '-100%' },
 				isDistractionFreeHovering: { x: 0 },
@@ -103,7 +103,7 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 		>
 			<HStack justify="flex-start" spacing="0">
 				<motion.div
-					className={ classnames(
+					className={ clsx(
 						'edit-site-site-hub__view-mode-toggle-container',
 						{
 							'has-transparent-background': isTransparent,
@@ -158,14 +158,8 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 							} }
 						>
 							<div className="edit-site-site-hub__title">
-								{ decodeEntities( siteTitle ) }
-							</div>
-							<HStack
-								spacing={ 0 }
-								expanded={ false }
-								className="edit-site-site-hub__actions"
-							>
 								<Button
+									variant="link"
 									href={ homeUrl }
 									target="_blank"
 									label={ __(
@@ -174,10 +168,15 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 									aria-label={ __(
 										'View site (opens in a new tab)'
 									) }
-									icon={ external }
-									className="edit-site-site-hub__site-view-link"
-								/>
-
+								>
+									{ decodeEntities( siteTitle ) }
+								</Button>
+							</div>
+							<HStack
+								spacing={ 0 }
+								expanded={ false }
+								className="edit-site-site-hub__actions"
+							>
 								<Button
 									className="edit-site-site-hub_toggle-command-center"
 									icon={ search }
diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
index 9cb62bbe05641..072dcbeb94f26 100644
--- a/packages/edit-site/src/components/site-hub/style.scss
+++ b/packages/edit-site/src/components/site-hub/style.scss
@@ -23,18 +23,55 @@
 	}
 }
 
-.edit-site-site-hub__title {
+.edit-site-site-hub__title .components-button {
+	color: $gray-200;
+	display: block;
+	flex-grow: 1;
+	font-size: 15px;
+	font-weight: 500;
+	overflow: hidden;
+	// Add space for the ↗ to render.
+	padding-right: $grid-unit-20;
+	position: relative;
+	text-decoration: none;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	overflow: hidden;
-	flex-grow: 1;
-	color: $gray-200;
-}
 
-.edit-site-site-hub__site-view-link {
-	margin-right: var(--wp-admin-border-width-focus);
-	svg {
-		fill: $gray-200;
+	&:hover,
+	&:focus,
+	&:active {
+		color: $gray-200;
+	}
+
+	&:focus {
+		// Defer to :focus-visible below.
+		box-shadow: none;
+		outline: none;
+	}
+
+	&:focus-visible {
+		// Push the shadow away from the title.
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $gray-900, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
+
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent;
+		outline-offset: 2px;
+	}
+
+	&::after {
+		content: "\2197";
+		font-weight: 400;
+		opacity: 0;
+		position: absolute;
+		right: 0;
+		transition: opacity 0.1s linear;
+		@include reduce-motion("transition");
+	}
+
+	&:hover::after,
+	&:focus::after,
+	&:active::after {
+		opacity: 1;
 	}
 }
 
diff --git a/packages/edit-site/src/components/site-icon/index.js b/packages/edit-site/src/components/site-icon/index.js
index 1957e99b77dbe..bd1fe63a50897 100644
--- a/packages/edit-site/src/components/site-icon/index.js
+++ b/packages/edit-site/src/components/site-icon/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -42,7 +42,7 @@ function SiteIcon( { className } ) {
 	);
 
 	return (
-		<div className={ classnames( className, 'edit-site-site-icon' ) }>
+		<div className={ clsx( className, 'edit-site-site-icon' ) }>
 			{ icon }
 		</div>
 	);
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index f960f3a86f7c0..0d69954461320 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -24,6 +24,7 @@ import {
 	__unstableEditorStyles as EditorStyles,
 	__unstableIframe as Iframe,
 } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
 import { useResizeObserver } from '@wordpress/compose';
 import { useMemo, useState, memo, useContext } from '@wordpress/element';
@@ -34,7 +35,6 @@ import { ENTER, SPACE } from '@wordpress/keycodes';
  */
 import { unlock } from '../../lock-unlock';
 import EditorCanvasContainer from '../editor-canvas-container';
-import { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider';
 
 const {
 	ExperimentalBlockEditorProvider,
@@ -42,6 +42,7 @@ const {
 	GlobalStylesContext,
 	useGlobalStylesOutputWithConfig,
 } = unlock( blockEditorPrivateApis );
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 const {
 	CompositeV2: Composite,
@@ -189,7 +190,7 @@ function StyleBook( {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const [ textColor ] = useGlobalStyle( 'color.text' );
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
-	const examples = useMemo( getExamples, [] );
+	const [ examples ] = useState( getExamples );
 	const tabs = useMemo(
 		() =>
 			getCategories()
@@ -240,7 +241,7 @@ function StyleBook( {
 			closeButtonLabel={ showCloseButton ? __( 'Close' ) : null }
 		>
 			<div
-				className={ classnames( 'edit-site-style-book', {
+				className={ clsx( 'edit-site-style-book', {
 					'is-wide': sizes.width > 600,
 					'is-button': !! onClick,
 				} ) }
@@ -343,7 +344,7 @@ const StyleBookBody = ( {
 
 	return (
 		<Iframe
-			className={ classnames( 'edit-site-style-book__iframe', {
+			className={ clsx( 'edit-site-style-book__iframe', {
 				'is-focused': isFocused && !! onClick,
 				'is-button': !! onClick,
 			} ) }
@@ -363,7 +364,7 @@ const StyleBookBody = ( {
 				}
 			</style>
 			<Examples
-				className={ classnames( 'edit-site-style-book__examples', {
+				className={ clsx( 'edit-site-style-book__examples', {
 					'is-wide': sizes.width > 600,
 				} ) }
 				examples={ examples }
@@ -441,7 +442,7 @@ const Example = ( { id, title, blocks, isSelected, onClick } ) => {
 		<div role="row">
 			<div role="gridcell">
 				<CompositeItem
-					className={ classnames( 'edit-site-style-book__example', {
+					className={ clsx( 'edit-site-style-book__example', {
 						'is-selected': isSelected,
 					} ) }
 					id={ id }
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 1f9d71945f76c..0b3eb14752787 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
@@ -27,7 +27,9 @@ const postTypesWithoutParentTemplate = [
 	PATTERN_TYPES.user,
 ];
 
-function useResolveEditedEntityAndContext( { path, postId, postType } ) {
+const authorizedPostTypes = [ 'page' ];
+
+function useResolveEditedEntityAndContext( { postId, postType } ) {
 	const {
 		hasLoadedAllDependencies,
 		homepageId,
@@ -81,7 +83,10 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 		( select ) => {
 			// If we're rendering a post type that doesn't have a template
 			// no need to resolve its template.
-			if ( postTypesWithoutParentTemplate.includes( postType ) ) {
+			if (
+				postTypesWithoutParentTemplate.includes( postType ) &&
+				postId
+			) {
 				return undefined;
 			}
 
@@ -168,16 +173,16 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 				return undefined;
 			}
 
-			// If we're rendering a specific page, post... we need to resolve its template.
-			if ( postType && postId ) {
+			// If we're rendering a specific page, we need to resolve its template.
+			// The site editor only supports pages for now, not other CPTs.
+			if (
+				postType &&
+				postId &&
+				authorizedPostTypes.includes( postType )
+			) {
 				return resolveTemplateForPostTypeAndId( postType, postId );
 			}
 
-			// Some URLs in list views are different
-			if ( path === '/page' && postId ) {
-				return resolveTemplateForPostTypeAndId( 'page', postId );
-			}
-
 			// If we're rendering the home page, and we have a static home page, resolve its template.
 			if ( homepageId ) {
 				return resolveTemplateForPostTypeAndId( 'page', homepageId );
@@ -196,37 +201,27 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 			url,
 			postId,
 			postType,
-			path,
 			frontPageTemplateId,
 		]
 	);
 
 	const context = useMemo( () => {
-		if ( postTypesWithoutParentTemplate.includes( postType ) ) {
+		if ( postTypesWithoutParentTemplate.includes( postType ) && postId ) {
 			return {};
 		}
 
-		if ( postType && postId ) {
+		if ( postType && postId && authorizedPostTypes.includes( postType ) ) {
 			return { postType, postId };
 		}
 
-		// Some URLs in list views are different
-		if ( path === '/page' && postId ) {
-			return { postType: 'page', postId };
-		}
-
 		if ( homepageId ) {
 			return { postType: 'page', postId: homepageId };
 		}
 
 		return {};
-	}, [ homepageId, postType, postId, path ] );
-
-	if ( path === '/wp_template' && postId ) {
-		return { isReady: true, postType: 'wp_template', postId, context };
-	}
+	}, [ homepageId, postType, postId ] );
 
-	if ( postTypesWithoutParentTemplate.includes( postType ) ) {
+	if ( postTypesWithoutParentTemplate.includes( postType ) && postId ) {
 		return { isReady: true, postType, postId, context };
 	}
 
diff --git a/packages/edit-site/src/components/template-actions/index.js b/packages/edit-site/src/components/template-actions/index.js
deleted file mode 100644
index c5bbe553bb9fb..0000000000000
--- a/packages/edit-site/src/components/template-actions/index.js
+++ /dev/null
@@ -1,165 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import {
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-	__experimentalConfirmDialog as ConfirmDialog,
-} from '@wordpress/components';
-import { moreVertical } from '@wordpress/icons';
-import { store as noticesStore } from '@wordpress/notices';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import isTemplateRemovable from '../../utils/is-template-removable';
-import isTemplateRevertable from '../../utils/is-template-revertable';
-import RenamePostMenuItem from '../rename-post-menu-item';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
-
-export default function TemplateActions( {
-	postType,
-	postId,
-	className,
-	toggleProps,
-	onRemove,
-} ) {
-	const template = useSelect(
-		( select ) =>
-			select( coreStore ).getEntityRecord( 'postType', postType, postId ),
-		[ postType, postId ]
-	);
-	const { removeTemplate } = useDispatch( editSiteStore );
-	const isRemovable = isTemplateRemovable( template );
-	const isRevertable = isTemplateRevertable( template );
-
-	if ( ! isRemovable && ! isRevertable ) {
-		return null;
-	}
-
-	return (
-		<DropdownMenu
-			icon={ moreVertical }
-			label={ __( 'Actions' ) }
-			className={ className }
-			toggleProps={ toggleProps }
-		>
-			{ ( { onClose } ) => (
-				<MenuGroup>
-					{ isRemovable && (
-						<>
-							<RenamePostMenuItem
-								post={ template }
-								onClose={ onClose }
-							/>
-							<DeleteMenuItem
-								onRemove={ () => {
-									removeTemplate( template );
-									onRemove?.();
-									onClose();
-								} }
-								title={ template.title.rendered }
-							/>
-						</>
-					) }
-					{ isRevertable && (
-						<ResetMenuItem
-							template={ template }
-							onClose={ onClose }
-						/>
-					) }
-				</MenuGroup>
-			) }
-		</DropdownMenu>
-	);
-}
-
-function ResetMenuItem( { template, onClose } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const { revertTemplate } = useDispatch( editSiteStore );
-	const { saveEditedEntityRecord } = useDispatch( coreStore );
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
-	async function revertAndSaveTemplate() {
-		try {
-			await revertTemplate( template, { allowUndo: false } );
-			await saveEditedEntityRecord(
-				'postType',
-				template.type,
-				template.id
-			);
-			createSuccessNotice(
-				sprintf(
-					/* translators: The template/part's name. */
-					__( '"%s" reset.' ),
-					decodeEntities( template.title.rendered )
-				),
-				{
-					type: 'snackbar',
-					id: 'edit-site-template-reverted',
-				}
-			);
-		} catch ( error ) {
-			const fallbackErrorMessage =
-				template.type === TEMPLATE_POST_TYPE
-					? __( 'An error occurred while reverting the template.' )
-					: __(
-							'An error occurred while reverting the template part.'
-					  );
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: fallbackErrorMessage;
-
-			createErrorNotice( errorMessage, { type: 'snackbar' } );
-		}
-	}
-	return (
-		<>
-			<MenuItem onClick={ () => setIsModalOpen( true ) }>
-				{ __( 'Reset' ) }
-			</MenuItem>
-			<ConfirmDialog
-				isOpen={ isModalOpen }
-				onConfirm={ () => {
-					revertAndSaveTemplate();
-					onClose();
-				} }
-				onCancel={ () => setIsModalOpen( false ) }
-				confirmButtonText={ __( 'Reset' ) }
-			>
-				{ __( 'Reset to default and clear all customizations?' ) }
-			</ConfirmDialog>
-		</>
-	);
-}
-
-function DeleteMenuItem( { onRemove, title } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	return (
-		<>
-			<MenuItem isDestructive onClick={ () => setIsModalOpen( true ) }>
-				{ __( 'Delete' ) }
-			</MenuItem>
-			<ConfirmDialog
-				isOpen={ isModalOpen }
-				onConfirm={ onRemove }
-				onCancel={ () => setIsModalOpen( false ) }
-				confirmButtonText={ __( 'Delete' ) }
-			>
-				{ sprintf(
-					// translators: %s: The template or template part's title.
-					__( 'Are you sure you want to delete "%s"?' ),
-					decodeEntities( title )
-				) }
-			</ConfirmDialog>
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js b/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js
index e8a80ee4e299a..5dc68e07c85f3 100644
--- a/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js
+++ b/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js
@@ -9,13 +9,16 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { symbolFilled } from '@wordpress/icons';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import CreateTemplatePartModal from '../create-template-part-modal';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
+const { CreateTemplatePartModal } = unlock( editorPrivateApis );
+
 export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
diff --git a/packages/edit-site/src/components/template-part-converter/index.js b/packages/edit-site/src/components/template-part-converter/index.js
index 7694735cbb302..de47eb6ae26f4 100644
--- a/packages/edit-site/src/components/template-part-converter/index.js
+++ b/packages/edit-site/src/components/template-part-converter/index.js
@@ -27,12 +27,25 @@ export default function TemplatePartConverter() {
 }
 
 function TemplatePartConverterMenuItem( { clientIds, onClose } ) {
-	const blocks = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlocksByClientId( clientIds ),
+	const { isContentOnly, blocks } = useSelect(
+		( select ) => {
+			const { getBlocksByClientId, getBlockEditingMode } =
+				select( blockEditorStore );
+			return {
+				blocks: getBlocksByClientId( clientIds ),
+				isContentOnly:
+					clientIds.length === 1 &&
+					getBlockEditingMode( clientIds[ 0 ] ) === 'contentOnly',
+			};
+		},
 		[ clientIds ]
 	);
 
+	// Do not show the convert button if the block is in content-only mode.
+	if ( isContentOnly ) {
+		return null;
+	}
+
 	// Allow converting a single template part to standard blocks.
 	if ( blocks.length === 1 && blocks[ 0 ]?.name === 'core/template-part' ) {
 		return (
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 fdea50d8afbdd..2b5d0d8614c95 100644
--- a/packages/edit-site/src/hooks/commands/use-common-commands.js
+++ b/packages/edit-site/src/hooks/commands/use-common-commands.js
@@ -18,14 +18,12 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as coreStore } from '@wordpress/core-data';
-import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
-import getIsListPage from '../../utils/get-is-list-page';
 
 const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -35,8 +33,6 @@ function useGlobalStylesOpenStylesCommands() {
 		useDispatch( editSiteStore )
 	);
 	const { params } = useLocation();
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isEditorPage = ! getIsListPage( params, isMobileViewport );
 	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
 	const history = useHistory();
 
@@ -55,13 +51,13 @@ function useGlobalStylesOpenStylesCommands() {
 				label: __( 'Open styles' ),
 				callback: ( { close } ) => {
 					close();
-					if ( ! isEditorPage ) {
+					if ( ! params.postId ) {
 						history.push( {
 							path: '/wp_global_styles',
 							canvas: 'edit',
 						} );
 					}
-					if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+					if ( params.postId && getCanvasMode() !== 'edit' ) {
 						setCanvasMode( 'edit' );
 					}
 					openGeneralSidebar( 'edit-site/global-styles' );
@@ -73,9 +69,9 @@ function useGlobalStylesOpenStylesCommands() {
 		history,
 		openGeneralSidebar,
 		setCanvasMode,
-		isEditorPage,
 		getCanvasMode,
 		isBlockBasedTheme,
+		params.postId,
 	] );
 
 	return {
@@ -89,8 +85,6 @@ function useGlobalStylesToggleWelcomeGuideCommands() {
 		useDispatch( editSiteStore )
 	);
 	const { params } = useLocation();
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isEditorPage = ! getIsListPage( params, isMobileViewport );
 	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
 	const { set } = useDispatch( preferencesStore );
 
@@ -110,13 +104,13 @@ function useGlobalStylesToggleWelcomeGuideCommands() {
 				label: __( 'Learn about styles' ),
 				callback: ( { close } ) => {
 					close();
-					if ( ! isEditorPage ) {
+					if ( ! params.postId ) {
 						history.push( {
 							path: '/wp_global_styles',
 							canvas: 'edit',
 						} );
 					}
-					if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+					if ( params.postId && getCanvasMode() !== 'edit' ) {
 						setCanvasMode( 'edit' );
 					}
 					openGeneralSidebar( 'edit-site/global-styles' );
@@ -134,10 +128,10 @@ function useGlobalStylesToggleWelcomeGuideCommands() {
 		history,
 		openGeneralSidebar,
 		setCanvasMode,
-		isEditorPage,
 		getCanvasMode,
 		isBlockBasedTheme,
 		set,
+		params.postId,
 	] );
 
 	return {
@@ -176,9 +170,6 @@ function useGlobalStylesOpenCssCommands() {
 	const { openGeneralSidebar, setEditorCanvasContainerView, setCanvasMode } =
 		unlock( useDispatch( editSiteStore ) );
 	const { params } = useLocation();
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isListPage = getIsListPage( params, isMobileViewport );
-	const isEditorPage = ! isListPage;
 	const history = useHistory();
 	const { canEditCSS } = useSelect( ( select ) => {
 		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
@@ -207,13 +198,13 @@ function useGlobalStylesOpenCssCommands() {
 				icon: brush,
 				callback: ( { close } ) => {
 					close();
-					if ( ! isEditorPage ) {
+					if ( ! params.postId ) {
 						history.push( {
 							path: '/wp_global_styles',
 							canvas: 'edit',
 						} );
 					}
-					if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+					if ( params.postId && getCanvasMode() !== 'edit' ) {
 						setCanvasMode( 'edit' );
 					}
 					openGeneralSidebar( 'edit-site/global-styles' );
@@ -226,9 +217,9 @@ function useGlobalStylesOpenCssCommands() {
 		openGeneralSidebar,
 		setEditorCanvasContainerView,
 		canEditCSS,
-		isEditorPage,
 		getCanvasMode,
 		setCanvasMode,
+		params.postId,
 	] );
 	return {
 		isLoading: false,
@@ -241,8 +232,6 @@ function useGlobalStylesOpenRevisionsCommands() {
 		unlock( useDispatch( editSiteStore ) );
 	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
 	const { params } = useLocation();
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isEditorPage = ! getIsListPage( params, isMobileViewport );
 	const history = useHistory();
 	const hasRevisions = useSelect( ( select ) => {
 		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
@@ -266,13 +255,13 @@ function useGlobalStylesOpenRevisionsCommands() {
 				icon: backup,
 				callback: ( { close } ) => {
 					close();
-					if ( ! isEditorPage ) {
+					if ( ! params.postId ) {
 						history.push( {
 							path: '/wp_global_styles',
 							canvas: 'edit',
 						} );
 					}
-					if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+					if ( params.postId && getCanvasMode() !== 'edit' ) {
 						setCanvasMode( 'edit' );
 					}
 					openGeneralSidebar( 'edit-site/global-styles' );
@@ -285,9 +274,9 @@ function useGlobalStylesOpenRevisionsCommands() {
 		history,
 		openGeneralSidebar,
 		setEditorCanvasContainerView,
-		isEditorPage,
 		getCanvasMode,
 		setCanvasMode,
+		params.postId,
 	] );
 
 	return {
diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
index 6afe4dcaa7ea9..d0064a947001a 100644
--- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
+++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
@@ -3,25 +3,11 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
-import {
-	edit,
-	trash,
-	rotateLeft,
-	rotateRight,
-	layout,
-	page,
-	drawerLeft,
-	drawerRight,
-	blockDefault,
-	symbol,
-} from '@wordpress/icons';
+import { trash, rotateLeft, rotateRight, layout, page } from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { decodeEntities } from '@wordpress/html-entities';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import {
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -30,12 +16,10 @@ import { store as editSiteStore } from '../../store';
 import useEditedEntityRecord from '../../components/use-edited-entity-record';
 import isTemplateRemovable from '../../utils/is-template-removable';
 import isTemplateRevertable from '../../utils/is-template-revertable';
-import { PATTERN_MODALS } from '../../components/pattern-modal';
 import { unlock } from '../../lock-unlock';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 import { useLink } from '../../components/routes/link';
 
-const { interfaceStore } = unlock( editorPrivateApis );
 const { useHistory } = unlock( routerPrivateApis );
 
 function usePageContentFocusCommands() {
@@ -153,8 +137,6 @@ function useManipulateDocumentCommands() {
 						__( 'Delete template part: %s' ),
 						decodeEntities( template.title )
 				  );
-		const path =
-			template.type === TEMPLATE_POST_TYPE ? '/wp_template' : '/patterns';
 		commands.push( {
 			name: 'core/remove-template',
 			label,
@@ -163,7 +145,7 @@ function useManipulateDocumentCommands() {
 				removeTemplate( template );
 				// Navigate to the template list
 				history.push( {
-					path,
+					postType: template.type,
 				} );
 				close();
 			},
@@ -176,111 +158,15 @@ function useManipulateDocumentCommands() {
 	};
 }
 
-function useEditUICommands() {
-	const { openGeneralSidebar, closeGeneralSidebar } =
-		useDispatch( editSiteStore );
-	const { canvasMode, activeSidebar } = useSelect( ( select ) => {
-		return {
-			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
-			activeSidebar:
-				select( interfaceStore ).getActiveComplementaryArea( 'core' ),
-		};
-	}, [] );
-
-	if ( canvasMode !== 'edit' ) {
-		return { isLoading: false, commands: [] };
-	}
-
-	const commands = [];
-
-	commands.push( {
-		name: 'core/open-settings-sidebar',
-		label: __( 'Toggle settings sidebar' ),
-		icon: isRTL() ? drawerLeft : drawerRight,
-		callback: ( { close } ) => {
-			close();
-			if ( activeSidebar === 'edit-post/document' ) {
-				closeGeneralSidebar();
-			} else {
-				openGeneralSidebar( 'edit-post/document' );
-			}
-		},
-	} );
-
-	commands.push( {
-		name: 'core/open-block-inspector',
-		label: __( 'Toggle block inspector' ),
-		icon: blockDefault,
-		callback: ( { close } ) => {
-			close();
-			if ( activeSidebar === 'edit-site/block' ) {
-				closeGeneralSidebar();
-			} else {
-				openGeneralSidebar( 'edit-site/block' );
-			}
-		},
-	} );
-
-	return {
-		isLoading: false,
-		commands,
-	};
-}
-
-function usePatternCommands() {
-	const { isLoaded, record: pattern } = useEditedEntityRecord();
-	const { openModal } = useDispatch( interfaceStore );
-
-	if ( ! isLoaded ) {
-		return { isLoading: true, commands: [] };
-	}
-
-	const commands = [];
-
-	if ( pattern?.type === 'wp_block' ) {
-		commands.push( {
-			name: 'core/rename-pattern',
-			label: __( 'Rename pattern' ),
-			icon: edit,
-			callback: ( { close } ) => {
-				openModal( PATTERN_MODALS.rename );
-				close();
-			},
-		} );
-		commands.push( {
-			name: 'core/duplicate-pattern',
-			label: __( 'Duplicate pattern' ),
-			icon: symbol,
-			callback: ( { close } ) => {
-				openModal( PATTERN_MODALS.duplicate );
-				close();
-			},
-		} );
-	}
-
-	return { isLoading: false, commands };
-}
-
 export function useEditModeCommands() {
 	useCommandLoader( {
 		name: 'core/edit-site/page-content-focus',
 		hook: usePageContentFocusCommands,
-		context: 'site-editor-edit',
+		context: 'entity-edit',
 	} );
 
 	useCommandLoader( {
 		name: 'core/edit-site/manipulate-document',
 		hook: useManipulateDocumentCommands,
 	} );
-
-	useCommandLoader( {
-		name: 'core/edit-site/patterns',
-		hook: usePatternCommands,
-		context: 'site-editor-edit',
-	} );
-
-	useCommandLoader( {
-		name: 'core/edit-site/edit-ui',
-		hook: useEditUICommands,
-	} );
 }
diff --git a/packages/edit-site/src/hooks/index.js b/packages/edit-site/src/hooks/index.js
index 185d069f78479..66f1b6e17eb0c 100644
--- a/packages/edit-site/src/hooks/index.js
+++ b/packages/edit-site/src/hooks/index.js
@@ -1,5 +1,4 @@
 /**
  * Internal dependencies
  */
-import './components';
 import './push-changes-to-global-styles';
diff --git a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
index a49c7ec5efab5..9e876d39d7340 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
@@ -337,7 +337,9 @@ function PushChangesToGlobalStylesControl( {
 				{ __( 'Styles' ) }
 			</BaseControl.VisualLabel>
 			<Button
-				variant="primary"
+				__next40pxDefaultSize
+				variant="secondary"
+				__experimentalIsFocusable
 				disabled={ changes.length === 0 }
 				onClick={ pushChanges }
 			>
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 27c3adf438ad6..2a914efc6ee52 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
@@ -5,16 +5,17 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useContext, useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from '../../components/global-styles/global-styles-provider';
 import cloneDeep from '../../utils/clone-deep';
 import { unlock } from '../../lock-unlock';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 /**
  * Removes all instances of a property from an object.
@@ -159,8 +160,12 @@ export default function useThemeStyleVariationsByProperty( {
 					cloneDeep( variation ),
 					property
 				);
+
 				// Remove variations that are empty once the property is filtered out.
-				if ( Object.keys( variationFilteredByProperty ).length === 0 ) {
+				if (
+					variation.title !== __( 'Default' ) &&
+					Object.keys( variationFilteredByProperty ).length === 0
+				) {
 					return accumulator;
 				}
 
diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
index f42842f504e54..f7ef09f81ce7e 100644
--- a/packages/edit-site/src/index.js
+++ b/packages/edit-site/src/index.js
@@ -9,7 +9,7 @@ import {
 } from '@wordpress/block-library';
 import { dispatch } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
-import { createRoot } from '@wordpress/element';
+import { createRoot, StrictMode } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
@@ -42,7 +42,7 @@ export function initializeEditor( id, settings ) {
 	dispatch( blocksStore ).setFreeformFallbackBlockName( 'core/html' );
 	registerLegacyWidgetBlock( { inserter: false } );
 	registerWidgetGroupBlock( { inserter: false } );
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
 			enableFSEBlocks: true,
 		} );
@@ -85,7 +85,11 @@ export function initializeEditor( id, settings ) {
 	window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
 	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
 
-	root.render( <App /> );
+	root.render(
+		<StrictMode>
+			<App />
+		</StrictMode>
+	);
 
 	return root;
 }
diff --git a/packages/edit-site/src/store/private-actions.js b/packages/edit-site/src/store/private-actions.js
index 0aaee3def948c..c40e1c5fc366a 100644
--- a/packages/edit-site/src/store/private-actions.js
+++ b/packages/edit-site/src/store/private-actions.js
@@ -16,16 +16,24 @@ export const setCanvasMode =
 		const isMediumOrBigger =
 			window.matchMedia( '(min-width: 782px)' ).matches;
 		registry.dispatch( blockEditorStore ).__unstableSetEditorMode( 'edit' );
+		const isPublishSidebarOpened = registry
+			.select( editorStore )
+			.isPublishSidebarOpened();
 		dispatch( {
 			type: 'SET_CANVAS_MODE',
 			mode,
 		} );
+		const isEditMode = mode === 'edit';
+		if ( isPublishSidebarOpened && ! isEditMode ) {
+			registry.dispatch( editorStore ).closePublishSidebar();
+		}
+
 		// Check if the block list view should be open by default.
 		// If `distractionFree` mode is enabled, the block list view should not be open.
 		// This behavior is disabled for small viewports.
 		if (
 			isMediumOrBigger &&
-			mode === 'edit' &&
+			isEditMode &&
 			registry
 				.select( preferencesStore )
 				.get( 'core', 'showListViewByDefault' ) &&
diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js
index 0690b9d685915..7dc47a992db3e 100644
--- a/packages/edit-site/src/store/selectors.js
+++ b/packages/edit-site/src/store/selectors.js
@@ -126,7 +126,7 @@ export function getHomeTemplateId() {
  *
  * @param {Object} state Global application state.
  *
- * @return {TemplateType?} Template type.
+ * @return {?TemplateType} Template type.
  */
 export function getEditedPostType( state ) {
 	return state.editedPost.postType;
@@ -137,7 +137,7 @@ export function getEditedPostType( state ) {
  *
  * @param {Object} state Global application state.
  *
- * @return {string?} Post ID.
+ * @return {?string} Post ID.
  */
 export function getEditedPostId( state ) {
 	return state.editedPost.id;
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index d0002e1070ce3..6203c24196592 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -3,22 +3,16 @@
 @import "./components/add-new-template/style.scss";
 @import "./components/block-editor/style.scss";
 @import "./components/canvas-loader/style.scss";
-@import "./components/code-editor/style.scss";
 @import "./components/global-styles/style.scss";
 @import "./components/global-styles/screen-revisions/style.scss";
-@import "./components/header-edit-mode/style.scss";
+@import "./components/global-styles-sidebar/style.scss";
 @import "./components/page/style.scss";
 @import "./components/page-pages/style.scss";
 @import "./components/page-patterns/style.scss";
 @import "./components/page-templates/style.scss";
 @import "./components/table/style.scss";
-@import "./components/sidebar-edit-mode/style.scss";
-@import "./components/sidebar-edit-mode/settings-header/style.scss";
-@import "./components/sidebar-edit-mode/template-panel/style.scss";
 @import "./components/editor/style.scss";
-@import "./components/create-template-part-modal/style.scss";
 @import "./components/welcome-guide/style.scss";
-@import "./components/start-template-options/style.scss";
 @import "./components/layout/style.scss";
 @import "./components/save-hub/style.scss";
 @import "./components/save-panel/style.scss";
@@ -28,11 +22,8 @@
 @import "./components/sidebar-navigation-screen/style.scss";
 @import "./components/sidebar-navigation-screen-details-footer/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menu/style.scss";
-@import "./components/sidebar-navigation-screen-page/style.scss";
 @import "components/sidebar-navigation-screen-details-panel/style.scss";
-@import "./components/sidebar-navigation-screen-pattern/style.scss";
 @import "./components/sidebar-navigation-screen-patterns/style.scss";
-@import "./components/sidebar-navigation-screen-template/style.scss";
 @import "./components/sidebar-dataviews/style.scss";
 @import "./components/site-hub/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menus/style.scss";
@@ -85,13 +76,6 @@ body.js.site-editor-php {
 	.interface-interface-skeleton {
 		top: 0;
 	}
-
-	// Todo: Remove this rule when edit site gets support
-	// for opening unpinned sidebar items.
-	.interface-complementary-area__pin-unpin-item.components-button {
-		display: none;
-	}
-
 }
 
 /**
diff --git a/packages/edit-site/src/utils/get-is-list-page.js b/packages/edit-site/src/utils/get-is-list-page.js
deleted file mode 100644
index 0fa818c28cb51..0000000000000
--- a/packages/edit-site/src/utils/get-is-list-page.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Returns if the params match the list page route.
- *
- * @param {Object}  params                The url params.
- * @param {string}  params.path           The current path.
- * @param {string}  [params.categoryType] The current category type.
- * @param {string}  [params.categoryId]   The current category id.
- * @param {boolean} isMobileViewport      Is mobile viewport.
- *
- * @return {boolean} Is list page or not.
- */
-export default function getIsListPage(
-	{ path, categoryType, categoryId },
-	isMobileViewport
-) {
-	return (
-		[ '/wp_template', '/wp_template_part/all', '/pages' ].includes(
-			path
-		) ||
-		( path === '/patterns' &&
-			// Don't treat "/patterns" without categoryType and categoryId as a
-			// list page in mobile because the sidebar covers the whole page.
-			( ! isMobileViewport || ( !! categoryType && !! categoryId ) ) )
-	);
-}
diff --git a/packages/edit-site/src/utils/math.js b/packages/edit-site/src/utils/math.js
deleted file mode 100644
index 8c4cca4f5e111..0000000000000
--- a/packages/edit-site/src/utils/math.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * @typedef  {Object} WPPoint
- * @property {number} x The horizontal coordinate.
- * @property {number} y The vertical coordinate.
- */
-
-/**
- * Clamps a value to a range. Uses the CSS `clamp()` ordering for arguments.
- *
- * @param {number} min   Minimum range.
- * @param {number} value Value to clamp.
- * @param {number} max   Maximum range.
- *
- * @return {number} Clamped value.
- */
-function clamp( min, value, max ) {
-	return Math.max( min, Math.min( value, max ) );
-}
-
-/**
- * Evaluates a linear function passing through two points at the given x value.
- *
- * Example:
- * f(x)
- *  │   ╲
- *  │    * (p0)
- *  │     ╲
- *  │      ╲
- *  │  (p1) *
- *  │        ╲
- *  └──────────── x
- *
- * @param {WPPoint} p0 First point.
- * @param {WPPoint} p1 Second point.
- * @param {number}  x  Value to evaluate at.
- *
- * @return {number} Result of the two-point linear function at x.
- */
-function twoPointLinearFn( p0, p1, x ) {
-	return ( ( p1.y - p0.y ) / ( p1.x - p0.x ) ) * ( x - p0.x ) + p0.y;
-}
-
-/**
- * Evaluates a two-point linear function at a given x value, clamped to the range of the points.
- *
- * Example:
- * f(x)
- *  │ ───* (p0)
- *  │     ╲
- *  │      ╲
- *  │  (p1) *───
- *  └──────────── x
- *
- * @param {WPPoint} p0 First point.
- * @param {WPPoint} p1 Second point.
- * @param {number}  x  Value to evaluate at.
- *
- * @return {number} Result of the two-point linear function clamped to the range of the points.
- */
-function clampedTwoPointLinearFn( p0, p1, x ) {
-	return clamp(
-		Math.min( p0.y, p1.y ),
-		twoPointLinearFn( p0, p1, x ),
-		Math.max( p0.y, p1.y )
-	);
-}
-
-/**
- * Computes the iframe scale using a start and end width/scale pair and the current width.
- *
- * The scale is clamped outside the points and is linearly interpolated between.
- *
- * Example:
- * scale
- *  │ ───* (start)
- *  │     ╲
- *  │      ╲
- *  │ (end) *───
- *  └──────────── width
- *
- * @param {Object} start        First width and scale pair.
- * @param {Object} end          Second width and scale pair.
- * @param {number} currentWidth Current width.
- *
- * @return {number} The scale of the current width between the two points.
- */
-export function computeIFrameScale( start, end, currentWidth ) {
-	return clampedTwoPointLinearFn(
-		{ x: start.width, y: start.scale },
-		{ x: end.width, y: end.scale },
-		currentWidth
-	);
-}
diff --git a/packages/edit-site/src/utils/template-part-create.js b/packages/edit-site/src/utils/template-part-create.js
index 955519a91a234..e69de29bb2d1d 100644
--- a/packages/edit-site/src/utils/template-part-create.js
+++ b/packages/edit-site/src/utils/template-part-create.js
@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-import { paramCase as kebabCase } from 'change-case';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { TEMPLATE_PART_POST_TYPE } from './constants';
-
-export const useExistingTemplateParts = () => {
-	return useSelect(
-		( select ) =>
-			select( coreStore ).getEntityRecords(
-				'postType',
-				TEMPLATE_PART_POST_TYPE,
-				{
-					per_page: -1,
-				}
-			),
-		[]
-	);
-};
-
-/**
- * Return a unique template part title based on
- * the given title and existing template parts.
- *
- * @param {string} title         The original template part title.
- * @param {Object} templateParts The array of template part entities.
- * @return {string} A unique template part title.
- */
-export const getUniqueTemplatePartTitle = ( title, templateParts ) => {
-	const lowercaseTitle = title.toLowerCase();
-	const existingTitles = templateParts.map( ( templatePart ) =>
-		templatePart.title.rendered.toLowerCase()
-	);
-
-	if ( ! existingTitles.includes( lowercaseTitle ) ) {
-		return title;
-	}
-
-	let suffix = 2;
-	while ( existingTitles.includes( `${ lowercaseTitle } ${ suffix }` ) ) {
-		suffix++;
-	}
-
-	return `${ title } ${ suffix }`;
-};
-
-/**
- * Get a valid slug for a template part.
- * Currently template parts only allow latin chars.
- * The fallback slug will receive suffix by default.
- *
- * @param {string} title The template part title.
- * @return {string} A valid template part slug.
- */
-export const getCleanTemplatePartSlug = ( title ) => {
-	return kebabCase( title ).replace( /[^\w-]+/g, '' ) || 'wp-custom-part';
-};
diff --git a/packages/edit-site/src/utils/use-activate-theme.js b/packages/edit-site/src/utils/use-activate-theme.js
index d201f630fd6dc..0dafd88340ba7 100644
--- a/packages/edit-site/src/utils/use-activate-theme.js
+++ b/packages/edit-site/src/utils/use-activate-theme.js
@@ -14,7 +14,7 @@ import {
 	currentlyPreviewingTheme,
 } from './is-previewing-theme';
 
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 /**
  * This should be refactored to use the REST API, once the REST API can activate themes.
@@ -23,7 +23,6 @@ const { useHistory, useLocation } = unlock( routerPrivateApis );
  */
 export function useActivateTheme() {
 	const history = useHistory();
-	const location = useLocation();
 	const { startResolution, finishResolution } = useDispatch( coreStore );
 
 	return async () => {
@@ -36,9 +35,10 @@ export function useActivateTheme() {
 			startResolution( 'activateTheme' );
 			await window.fetch( activationURL );
 			finishResolution( 'activateTheme' );
-			const { wp_theme_preview: themePreview, ...params } =
-				location.params;
-			history.replace( params );
+			// Remove the wp_theme_preview query param: we've finished activating
+			// the queue and are switching to normal Site Editor.
+			const { params } = history.getLocationWithParams();
+			history.replace( { ...params, wp_theme_preview: undefined } );
 		}
 	};
 }
diff --git a/packages/edit-widgets/CHANGELOG.md b/packages/edit-widgets/CHANGELOG.md
index d55710c426fcd..c2551dfbe9df9 100644
--- a/packages/edit-widgets/CHANGELOG.md
+++ b/packages/edit-widgets/CHANGELOG.md
@@ -2,6 +2,19 @@
 
 ## Unreleased
 
+## 6.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 5.35.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
 ## 5.34.0 (2024-05-02)
 
 ## 5.33.0 (2024-04-19)
@@ -146,8 +159,8 @@
 
 ### Breaking Changes
 
--   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/.
--   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/.
+-   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at <https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/>.
+-   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at <https://nodejs.org/en/about/releases/>.
 
 ## 1.3.0 (2021-03-17)
 
diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json
index 41290155c84b5..a11cfbf56273d 100644
--- a/packages/edit-widgets/package.json
+++ b/packages/edit-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-widgets",
-	"version": "5.34.0",
+	"version": "6.0.0",
 	"description": "Widgets Page module for WordPress..",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -53,7 +54,7 @@
 		"@wordpress/reusable-blocks": "file:../reusable-blocks",
 		"@wordpress/url": "file:../url",
 		"@wordpress/widgets": "file:../widgets",
-		"classnames": "^2.3.1"
+		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
diff --git a/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js b/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js
index be76548fe6eab..6de76d2bb068e 100644
--- a/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js
+++ b/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -38,7 +38,7 @@ export default function WidgetAreaInnerBlocks( { id } ) {
 	return (
 		<div
 			data-widget-area-id={ id }
-			className={ classnames(
+			className={ clsx(
 				'wp-block-widget-area__inner-blocks block-editor-inner-blocks editor-styles-wrapper',
 				{
 					'wp-block-widget-area__highlight-drop-zone':
diff --git a/packages/edit-widgets/src/components/header/document-tools/index.js b/packages/edit-widgets/src/components/header/document-tools/index.js
index bd1b8fc7adae7..a0d69cde376cf 100644
--- a/packages/edit-widgets/src/components/header/document-tools/index.js
+++ b/packages/edit-widgets/src/components/header/document-tools/index.js
@@ -4,12 +4,9 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
 import { Button, ToolbarItem } from '@wordpress/components';
-import {
-	NavigableToolbar,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { NavigableToolbar } from '@wordpress/block-editor';
 import { listView, plus } from '@wordpress/icons';
-import { useCallback, useRef } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 
 /**
@@ -17,61 +14,44 @@ import { useViewportMatch } from '@wordpress/compose';
  */
 import UndoButton from '../undo-redo/undo';
 import RedoButton from '../undo-redo/redo';
-import useLastSelectedWidgetArea from '../../../hooks/use-last-selected-widget-area';
 import { store as editWidgetsStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
 function DocumentTools() {
 	const isMediumViewport = useViewportMatch( 'medium' );
-	const inserterButton = useRef();
-	const widgetAreaClientId = useLastSelectedWidgetArea();
-	const isLastSelectedWidgetAreaOpen = useSelect(
-		( select ) =>
-			select( editWidgetsStore ).getIsWidgetAreaOpen(
-				widgetAreaClientId
-			),
-		[ widgetAreaClientId ]
-	);
-	const { isInserterOpen, isListViewOpen, listViewToggleRef } = useSelect(
-		( select ) => {
-			const { isInserterOpened, isListViewOpened, getListViewToggleRef } =
-				unlock( select( editWidgetsStore ) );
-			return {
-				isInserterOpen: isInserterOpened(),
-				isListViewOpen: isListViewOpened(),
-				listViewToggleRef: getListViewToggleRef(),
-			};
-		},
-		[]
-	);
-	const { setIsWidgetAreaOpen, setIsInserterOpened, setIsListViewOpened } =
+
+	const {
+		isInserterOpen,
+		isListViewOpen,
+		inserterSidebarToggleRef,
+		listViewToggleRef,
+	} = useSelect( ( select ) => {
+		const {
+			isInserterOpened,
+			getInserterSidebarToggleRef,
+			isListViewOpened,
+			getListViewToggleRef,
+		} = unlock( select( editWidgetsStore ) );
+		return {
+			isInserterOpen: isInserterOpened(),
+			isListViewOpen: isListViewOpened(),
+			inserterSidebarToggleRef: getInserterSidebarToggleRef(),
+			listViewToggleRef: getListViewToggleRef(),
+		};
+	}, [] );
+	const { setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editWidgetsStore );
-	const { selectBlock } = useDispatch( blockEditorStore );
-	const handleClick = () => {
-		if ( isInserterOpen ) {
-			// Focusing the inserter button closes the inserter popover.
-			setIsInserterOpened( false );
-		} else {
-			if ( ! isLastSelectedWidgetAreaOpen ) {
-				// Select the last selected block if hasn't already.
-				selectBlock( widgetAreaClientId );
-				// Open the last selected widget area when opening the inserter.
-				setIsWidgetAreaOpen( widgetAreaClientId, true );
-			}
-			// The DOM updates resulting from selectBlock() and setIsInserterOpened() calls are applied the
-			// same tick and pretty much in a random order. The inserter is closed if any other part of the
-			// app receives focus. If selectBlock() happens to take effect after setIsInserterOpened() then
-			// the inserter is visible for a brief moment and then gets auto-closed due to focus moving to
-			// the selected block.
-			window.requestAnimationFrame( () => setIsInserterOpened( true ) );
-		}
-	};
 
 	const toggleListView = useCallback(
 		() => setIsListViewOpened( ! isListViewOpen ),
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
+	const toggleInserterSidebar = useCallback(
+		() => setIsInserterOpened( ! isInserterOpen ),
+		[ setIsInserterOpened, isInserterOpen ]
+	);
+
 	return (
 		<NavigableToolbar
 			className="edit-widgets-header-toolbar"
@@ -79,7 +59,7 @@ function DocumentTools() {
 			variant="unstyled"
 		>
 			<ToolbarItem
-				ref={ inserterButton }
+				ref={ inserterSidebarToggleRef }
 				as={ Button }
 				className="edit-widgets-header-toolbar__inserter-toggle"
 				variant="primary"
@@ -87,7 +67,7 @@ function DocumentTools() {
 				onMouseDown={ ( event ) => {
 					event.preventDefault();
 				} }
-				onClick={ handleClick }
+				onClick={ toggleInserterSidebar }
 				icon={ plus }
 				/* translators: button label text should, if possible, be under 16
 					characters. */
diff --git a/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/index.js b/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/index.js
index 91da16b995fa1..bbddd7c97edc7 100644
--- a/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/index.js
+++ b/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -49,7 +49,7 @@ const ShortcutList = ( { shortcuts } ) => (
 
 const ShortcutSection = ( { title, shortcuts, className } ) => (
 	<section
-		className={ classnames(
+		className={ clsx(
 			'edit-widgets-keyboard-shortcut-help-modal__section',
 			className
 		) }
diff --git a/packages/edit-widgets/src/components/layout/style.scss b/packages/edit-widgets/src/components/layout/style.scss
index a10665f7cafe7..14d74e4db9248 100644
--- a/packages/edit-widgets/src/components/layout/style.scss
+++ b/packages/edit-widgets/src/components/layout/style.scss
@@ -18,7 +18,7 @@
 	// Leave space for the close button
 	height: calc(100% - #{$button-size} - #{$grid-unit-10});
 
-	.block-editor-inserter__tab {
+	.block-editor-inserter__tablist-and-close {
 		display: none;
 	}
 
diff --git a/packages/edit-widgets/src/index.js b/packages/edit-widgets/src/index.js
index eb87d22fefef9..f8247d733f1a1 100644
--- a/packages/edit-widgets/src/index.js
+++ b/packages/edit-widgets/src/index.js
@@ -9,7 +9,7 @@ import {
 } from '@wordpress/blocks';
 import { dispatch } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
-import { createRoot } from '@wordpress/element';
+import { StrictMode, createRoot } from '@wordpress/element';
 import {
 	registerCoreBlocks,
 	__experimentalGetCoreBlocks,
@@ -73,7 +73,7 @@ export function initializeEditor( id, settings ) {
 	dispatch( blocksStore ).reapplyBlockTypeFilters();
 	registerCoreBlocks( coreBlocks );
 	registerLegacyWidgetBlock();
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
 			enableFSEBlocks: ENABLE_EXPERIMENTAL_FSE_BLOCKS,
 		} );
@@ -91,7 +91,11 @@ export function initializeEditor( id, settings ) {
 	// see: https://github.com/WordPress/gutenberg/issues/33097
 	setFreeformContentHandlerName( 'core/html' );
 
-	root.render( <Layout blockEditorSettings={ settings } /> );
+	root.render(
+		<StrictMode>
+			<Layout blockEditorSettings={ settings } />
+		</StrictMode>
+	);
 
 	return root;
 }
diff --git a/packages/edit-widgets/src/store/private-selectors.js b/packages/edit-widgets/src/store/private-selectors.js
index fca6aa5ddb759..ee2000ac12844 100644
--- a/packages/edit-widgets/src/store/private-selectors.js
+++ b/packages/edit-widgets/src/store/private-selectors.js
@@ -1,3 +1,7 @@
 export function getListViewToggleRef( state ) {
 	return state.listViewToggleRef;
 }
+
+export function getInserterSidebarToggleRef( state ) {
+	return state.inserterSidebarToggleRef;
+}
diff --git a/packages/edit-widgets/src/store/reducer.js b/packages/edit-widgets/src/store/reducer.js
index 64bd6b4e0400e..3dbc95123a382 100644
--- a/packages/edit-widgets/src/store/reducer.js
+++ b/packages/edit-widgets/src/store/reducer.js
@@ -79,8 +79,21 @@ export function listViewToggleRef( state = { current: null } ) {
 	return state;
 }
 
+/**
+ * This reducer does nothing aside initializing a ref to the inserter sidebar toggle.
+ * We will have a unique ref per "editor" instance.
+ *
+ * @param {Object} state
+ * @return {Object} Reference to the inserter sidebar toggle button.
+ */
+export function inserterSidebarToggleRef( state = { current: null } ) {
+	return state;
+}
+
 export default combineReducers( {
 	blockInserterPanel,
+	inserterSidebarToggleRef,
 	listViewPanel,
+	listViewToggleRef,
 	widgetAreasOpenState,
 } );
diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md
index 0946bb21deec3..41ab4c4b5ca26 100644
--- a/packages/editor/CHANGELOG.md
+++ b/packages/editor/CHANGELOG.md
@@ -2,6 +2,19 @@
 
 ## Unreleased
 
+## 14.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 13.35.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
 ## 13.34.0 (2024-05-02)
 
 ## 13.33.0 (2024-04-19)
@@ -124,7 +137,7 @@
 
 ### Deprecations
 
-- Deprecated `cleanForSlug` that is now part of `@wordpress/url`.
+-   Deprecated `cleanForSlug` that is now part of `@wordpress/url`.
 
 ## 12.2.0 (2022-02-10)
 
@@ -138,7 +151,7 @@
 
 ### Deprecations
 
-- the `createUndoLevel` and `refreshPost` actions were marked as deprecated. They were already defunct and acting as noops.
+-   the `createUndoLevel` and `refreshPost` actions were marked as deprecated. They were already defunct and acting as noops.
 
 ## 12.1.0 (2022-01-27)
 
@@ -163,8 +176,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/>.
 
 ## 9.26.0 (2021-03-17)
 
diff --git a/packages/editor/README.md b/packages/editor/README.md
index 48a5e52cc47aa..d4161f9bac626 100644
--- a/packages/editor/README.md
+++ b/packages/editor/README.md
@@ -254,7 +254,17 @@ _Returns_
 
 ### DocumentBar
 
-Undocumented declaration.
+This component renders a navigation bar at the top of the editor. It displays the title of the current document, a back button (if applicable), and a command center button. It also handles different states of the document, such as "not found" or "unsynced".
+
+_Usage_
+
+```jsx
+<DocumentBar />
+```
+
+_Returns_
+
+-   `JSX.Element`: The rendered DocumentBar component.
 
 ### DocumentOutline
 
@@ -326,11 +336,49 @@ _Returns_
 
 ### EditorNotices
 
-Undocumented declaration.
+This component renders the notices displayed in the editor. It displays pinned notices first, followed by dismissible
+
+_Usage_
+
+```jsx
+<EditorNotices />
+```
+
+_Returns_
+
+-   `JSX.Element`: The rendered EditorNotices component.
 
 ### EditorProvider
 
-Undocumented declaration.
+This component establishes a new post editing context, and serves as the entry point for a new post editor (or post with template editor).
+
+It supports a large number of post types, including post, page, templates, custom post types, patterns, template parts.
+
+All modification and changes are performed to the `@wordpress/core-data` store.
+
+_Usage_
+
+```jsx
+<EditorProvider
+	post={ post }
+	settings={ settings }
+	__unstableTemplate={ template }
+>
+	{ children }
+</EditorProvider>
+```
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.post_ `[Object]`: The post object to edit. This is required.
+-   _props.\_\_unstableTemplate_ `[Object]`: The template object wrapper the edited post. This is optional and can only be used when the post type supports templates (like posts and pages).
+-   _props.settings_ `[Object]`: The settings object to use for the editor. This is optional and can be used to override the default settings.
+-   _props.children_ `[Element]`: Children elements for which the BlockEditorProvider context should apply. This is optional.
+
+_Returns_
+
+-   `JSX.Element`: The rendered EditorProvider component.
 
 ### EditorSnackbars
 
@@ -346,7 +394,11 @@ Undocumented declaration.
 
 ### ErrorBoundary
 
-Undocumented declaration.
+ErrorBoundary is used to catch JavaScript errors anywhere in a child component tree, log those errors, and display a fallback UI.
+
+It uses the lifecycle methods getDerivedStateFromError and componentDidCatch to catch errors in a child component tree.
+
+getDerivedStateFromError is used to render a fallback UI after an error has been thrown, and componentDidCatch is used to log error information.
 
 ### FontSizePicker
 
@@ -402,7 +454,14 @@ _Returns_
 
 ### LocalAutosaveMonitor
 
-Undocumented declaration.
+Monitors local autosaves of a post in the editor. It uses several hooks and functions to manage autosave behavior:
+
+-   `useAutosaveNotice` hook: Manages the creation of a notice prompting the user to restore a local autosave, if one exists.
+-   `useAutosavePurge` hook: Ejects a local autosave after a successful save occurs.
+-   `hasSessionStorageSupport` function: Checks if the current environment supports browser sessionStorage.
+-   `LocalAutosaveMonitor` component: Uses the `AutosaveMonitor` component to perform autosaves at a specified interval.
+
+The module also checks for sessionStorage support and conditionally exports the `LocalAutosaveMonitor` component based on that.
 
 ### MediaPlaceholder
 
@@ -481,7 +540,13 @@ _Returns_
 
 ### PageTemplate
 
-Undocumented declaration.
+Provides a dropdown menu for selecting and managing post templates.
+
+The dropdown menu includes a button for toggling the menu, a list of available templates, and options for creating and editing templates.
+
+_Returns_
+
+-   `JSX.Element`: The rendered ClassicThemeControl component.
 
 ### PanelColorSettings
 
@@ -919,11 +984,19 @@ _Returns_
 
 ### PostComments
 
-Undocumented declaration.
+A form for managing comment status.
+
+_Returns_
+
+-   `JSX.Element`: The rendered PostComments component.
 
 ### PostDiscussionPanel
 
-Undocumented declaration.
+This component allows to update comment and pingback settings for the current post. Internally there are checks whether the current post has support for the above and if the `discussion-panel` panel is enabled.
+
+_Returns_
+
+-   `JSX.Element|null`: The rendered PostDiscussionPanel component.
 
 ### PostExcerpt
 
@@ -950,59 +1023,163 @@ _Returns_
 
 ### PostExcerptPanel
 
-Undocumented declaration.
+Is rendered if the post type supports excerpts and allows editing the excerpt.
+
+_Returns_
+
+-   `JSX.Element`: The rendered PostExcerptPanel component.
 
 ### PostFeaturedImage
 
-Undocumented declaration.
+Renders the component for managing the featured image of a post.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.currentPostId_ `number`: ID of the current post.
+-   _props.featuredImageId_ `number`: ID of the featured image.
+-   _props.onUpdateImage_ `Function`: Function to call when the image is updated.
+-   _props.onRemoveImage_ `Function`: Function to call when the image is removed.
+-   _props.media_ `Object`: The media object representing the featured image.
+-   _props.postType_ `string`: Post type.
+-   _props.noticeUI_ `Element`: UI for displaying notices.
+-   _props.noticeOperations_ `Object`: Operations for managing notices.
+
+_Returns_
+
+-   `Element`: Component to be rendered .
 
 ### PostFeaturedImageCheck
 
-Undocumented declaration.
+Wrapper component that renders its children only if the post type supports a featured image and the theme supports post thumbnails.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.children_ `Element`: Children to be rendered.
+
+_Returns_
+
+-   `Component`: The component to be rendered.
 
 ### PostFeaturedImagePanel
 
-Undocumented declaration.
+Renders the panel for the post featured image.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.withPanelBody_ `boolean`: Whether to include the panel body. Default true.
+
+_Returns_
+
+-   `Component|null`: The component to be rendered. Return Null if the editor panel is disabled for featured image.
 
 ### PostFormat
 
-Undocumented declaration.
+`PostFormat` a component that allows changing the post format while also providing a suggestion for the current post.
+
+_Usage_
+
+```jsx
+<PostFormat />
+```
+
+_Returns_
+
+-   `JSX.Element`: The rendered PostFormat component.
 
 ### PostFormatCheck
 
-Undocumented declaration.
+Component check if there are any post formats.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.children_ `Element`: The child elements to render.
+
+_Returns_
+
+-   `Component|null`: The rendered component or null if post formats are disabled.
 
 ### PostLastRevision
 
-Undocumented declaration.
+Renders the component for displaying the last revision of a post.
+
+_Returns_
+
+-   `Component`: The component to be rendered.
 
 ### PostLastRevisionCheck
 
-Undocumented declaration.
+Wrapper component that renders its children if the post has more than one revision.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.children_ `Element`: Children to be rendered.
+
+_Returns_
+
+-   `Component|null`: Rendered child components if post has more than one revision, otherwise null.
 
 ### PostLastRevisionPanel
 
-Undocumented declaration.
+Renders the panel for displaying the last revision of a post.
+
+_Returns_
+
+-   `Component`: The component to be rendered.
 
 ### PostLockedModal
 
-Undocumented declaration.
+A modal component that is displayed when a post is locked for editing by another user. The modal provides information about the lock status and options to take over or exit the editor.
+
+_Returns_
+
+-   `JSX.Element|null`: The rendered PostLockedModal component.
 
 ### PostPendingStatus
 
-Undocumented declaration.
+A component for displaying and toggling the pending status of a post.
+
+_Returns_
+
+-   `JSX.Element`: The rendered component.
 
 ### PostPendingStatusCheck
 
-Undocumented declaration.
+This component checks the publishing status of the current post. If the post is already published or the user doesn't have the capability to publish, it returns null.
+
+_Parameters_
+
+-   _props_ `Object`: Component properties.
+-   _props.children_ `Element`: Children to be rendered.
+
+_Returns_
+
+-   `JSX.Element|null`: The rendered child elements or null if the post is already published or the user doesn't have the capability to publish.
 
 ### PostPingbacks
 
-Undocumented declaration.
+Renders a control for enabling or disabling pingbacks and trackbacks in a WordPress post.
 
 ### PostPreviewButton
 
-Undocumented declaration.
+Renders a button that opens a new window or tab for the preview, writes the interstitial message to this window, and then navigates to the actual preview link. The button is not rendered if the post is not viewable and disabled if the post is not saveable.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.className_ `string`: The class name for the button.
+-   _props.textContent_ `string`: The text content for the button.
+-   _props.forceIsAutosaveable_ `boolean`: Whether to force autosave.
+-   _props.role_ `string`: The role attribute for the button.
+-   _props.onPreview_ `Function`: The callback function for preview event.
+
+_Returns_
+
+-   `JSX.Element|null`: The rendered button component.
 
 ### PostPublishButton
 
@@ -1031,19 +1208,49 @@ _Returns_
 
 ### PostSchedule
 
-Undocumented declaration.
+Renders the PostSchedule component. It allows the user to schedule a post.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.onClose_ `Function`: Function to close the component.
+
+_Returns_
+
+-   `Component`: The component to be rendered.
 
 ### PostScheduleCheck
 
-Undocumented declaration.
+Wrapper component that renders its children only if post has a publish action.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.children_ `Element`: Children to be rendered.
+
+_Returns_
+
+-   `Component`: - The component to be rendered or null if there is no publish action.
 
 ### PostScheduleLabel
 
-Undocumented declaration.
+Renders the PostScheduleLabel component.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+
+_Returns_
+
+-   `Component`: The component to be rendered.
 
 ### PostSchedulePanel
 
-Undocumented declaration.
+Renders the Post Schedule Panel component.
+
+_Returns_
+
+-   `Component`: The component to be rendered.
 
 ### PostSlug
 
@@ -1100,15 +1307,32 @@ Undocumented declaration.
 
 ### PostTemplatePanel
 
-Undocumented declaration.
+Displays the template controls based on the current editor settings and user permissions.
+
+_Returns_
+
+-   `JSX.Element|null`: The rendered PostTemplatePanel component.
 
 ### PostTextEditor
 
-Undocumented declaration.
+Displays the Post Text Editor along with content in Visual and Text mode.
+
+_Returns_
+
+-   `JSX.Element|null`: The rendered PostTextEditor component.
 
 ### PostTitle
 
-Undocumented declaration.
+Renders the `PostTitle` component.
+
+_Parameters_
+
+-   \_\_\_ `Object`: Unused parameter.
+-   _forwardedRef_ `Element`: Forwarded ref for the component.
+
+_Returns_
+
+-   `Component`: The rendered PostTitle component.
 
 ### PostTitleRaw
 
@@ -1138,31 +1362,84 @@ _Returns_
 
 ### PostURL
 
-Undocumented declaration.
+Renders the `PostURL` component.
+
+_Usage_
+
+```jsx
+<PostURL />
+```
+
+_Parameters_
+
+-   _onClose_ `Function`: Callback function to be executed when the popover is closed.
+
+_Returns_
+
+-   `Component`: The rendered PostURL component.
 
 ### PostURLCheck
 
-Undocumented declaration.
+Check if the post URL is valid and visible.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.children_ `Element`: The child components.
+
+_Returns_
+
+-   `Component|null`: The child components if the post URL is valid and visible, otherwise null.
 
 ### PostURLLabel
 
-Undocumented declaration.
+Represents a label component for a post URL.
+
+_Returns_
+
+-   `Component`: The PostURLLabel component.
 
 ### PostURLPanel
 
-Undocumented declaration.
+Renders the `PostURLPanel` component.
+
+_Returns_
+
+-   `JSX.Element`: The rendered PostURLPanel component.
 
 ### PostVisibility
 
-Undocumented declaration.
+Allows users to set the visibility of a post.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.onClose_ `Function`: Function to call when the popover is closed.
+
+_Returns_
+
+-   `JSX.Element`: The rendered component.
 
 ### PostVisibilityCheck
 
-Undocumented declaration.
+Determines if the current post can be edited (published) and passes this information to the provided render function.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.render_ `Function`: Function to render the component. Receives an object with a `canEdit` property.
+
+_Returns_
+
+-   `JSX.Element`: The rendered component.
 
 ### PostVisibilityLabel
 
-Undocumented declaration.
+Returns the label for the current post visibility setting.
+
+_Returns_
+
+-   `string`: Post visibility label.
 
 ### privateApis
 
@@ -1258,15 +1535,32 @@ Undocumented declaration.
 
 ### usePostScheduleLabel
 
-Undocumented declaration.
+Custom hook to get the label for post schedule.
+
+_Parameters_
+
+-   _options_ `Object`: Options for the hook.
+-   _options.full_ `boolean`: Whether to get the full label or not. Default is false.
+
+_Returns_
+
+-   `string`: The label for post schedule.
 
 ### usePostURLLabel
 
-Undocumented declaration.
+Custom hook to get the label for the post URL.
+
+_Returns_
+
+-   `string`: The filtered and decoded post URL label.
 
 ### usePostVisibilityLabel
 
-Undocumented declaration.
+Get the label for the current post visibility setting.
+
+_Returns_
+
+-   `string`: Post visibility label.
 
 ### userAutocompleter
 
@@ -1298,7 +1592,11 @@ Undocumented declaration.
 
 ### WordCount
 
-Undocumented declaration.
+Renders the word count of the post content.
+
+_Returns_
+
+-   `JSX.Element|null`: The rendered WordCount component.
 
 ### WritingFlow
 
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 5c3e456fc17cb..24461df036931 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.34.0",
+	"version": "14.0.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -64,8 +65,13 @@
 		"@wordpress/url": "file:../url",
 		"@wordpress/warning": "file:../warning",
 		"@wordpress/wordcount": "file:../wordcount",
-		"classnames": "^2.3.1",
+		"change-case": "^4.1.2",
+		"client-zip": "^2.4.5",
+		"clsx": "^2.1.1",
 		"date-fns": "^3.6.0",
+		"deepmerge": "^4.3.0",
+		"fast-deep-equal": "^3.1.3",
+		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0",
 		"remove-accents": "^0.5.0"
diff --git a/packages/editor/src/bindings/index.js b/packages/editor/src/bindings/index.js
index ce77b87ebc7a5..182edc621453e 100644
--- a/packages/editor/src/bindings/index.js
+++ b/packages/editor/src/bindings/index.js
@@ -12,7 +12,4 @@ import postMeta from './post-meta';
 
 const { registerBlockBindingsSource } = unlock( dispatch( blocksStore ) );
 registerBlockBindingsSource( postMeta );
-
-if ( process.env.IS_GUTENBERG_PLUGIN ) {
-	registerBlockBindingsSource( patternOverrides );
-}
+registerBlockBindingsSource( patternOverrides );
diff --git a/packages/editor/src/bindings/pattern-overrides.js b/packages/editor/src/bindings/pattern-overrides.js
index 5f7f475a649a3..107ed72e722ba 100644
--- a/packages/editor/src/bindings/pattern-overrides.js
+++ b/packages/editor/src/bindings/pattern-overrides.js
@@ -2,10 +2,92 @@
  * WordPress dependencies
  */
 import { _x } from '@wordpress/i18n';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+const CONTENT = 'content';
 
 export default {
 	name: 'core/pattern-overrides',
 	label: _x( 'Pattern Overrides', 'block bindings source' ),
-	useSource: null,
-	lockAttributesEditing: false,
+	getValue( { registry, clientId, attributeName } ) {
+		const { getBlockAttributes, getBlockParentsByBlockName } =
+			registry.select( blockEditorStore );
+		const currentBlockAttributes = getBlockAttributes( clientId );
+		const [ patternClientId ] = getBlockParentsByBlockName(
+			clientId,
+			'core/block',
+			true
+		);
+
+		const overridableValue =
+			getBlockAttributes( patternClientId )?.[ CONTENT ]?.[
+				currentBlockAttributes?.metadata?.name
+			]?.[ attributeName ];
+
+		// If there is no pattern client ID, or it is not overwritten, return the default value.
+		if ( ! patternClientId || overridableValue === undefined ) {
+			return currentBlockAttributes[ attributeName ];
+		}
+
+		return overridableValue === '' ? undefined : overridableValue;
+	},
+	setValues( { registry, clientId, attributes } ) {
+		const { getBlockAttributes, getBlockParentsByBlockName, getBlocks } =
+			registry.select( blockEditorStore );
+		const currentBlockAttributes = getBlockAttributes( clientId );
+		const blockName = currentBlockAttributes?.metadata?.name;
+		if ( ! blockName ) {
+			return;
+		}
+
+		const [ patternClientId ] = getBlockParentsByBlockName(
+			clientId,
+			'core/block',
+			true
+		);
+
+		// If there is no pattern client ID, sync blocks with the same name and same attributes.
+		if ( ! patternClientId ) {
+			const syncBlocksWithSameName = ( blocks ) => {
+				for ( const block of blocks ) {
+					if ( block.attributes?.metadata?.name === blockName ) {
+						registry
+							.dispatch( blockEditorStore )
+							.updateBlockAttributes(
+								block.clientId,
+								attributes
+							);
+					}
+					syncBlocksWithSameName( block.innerBlocks );
+				}
+			};
+
+			syncBlocksWithSameName( getBlocks() );
+			return;
+		}
+		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;
+							},
+							{}
+						),
+					},
+				},
+			} );
+	},
+	canUserEditValue: () => true,
 };
diff --git a/packages/editor/src/bindings/post-meta.js b/packages/editor/src/bindings/post-meta.js
index f5b3b526dbfd4..aec890c5ceff8 100644
--- a/packages/editor/src/bindings/post-meta.js
+++ b/packages/editor/src/bindings/post-meta.js
@@ -16,13 +16,53 @@ export default {
 		return args.key;
 	},
 	getValue( { registry, context, args } ) {
-		const postType = context.postType
-			? context.postType
-			: registry.select( editorStore ).getCurrentPostType();
-
 		return registry
 			.select( coreDataStore )
-			.getEditedEntityRecord( 'postType', postType, context.postId )
-			.meta?.[ args.key ];
+			.getEditedEntityRecord(
+				'postType',
+				context?.postType,
+				context?.postId
+			).meta?.[ args.key ];
+	},
+	setValue( { registry, context, args, value } ) {
+		registry
+			.dispatch( coreDataStore )
+			.editEntityRecord( 'postType', context?.postType, context?.postId, {
+				meta: {
+					[ args.key ]: value,
+				},
+			} );
+	},
+	canUserEditValue( { select, context, args } ) {
+		const postType =
+			context?.postType || select( editorStore ).getCurrentPostType();
+
+		// Check that editing is happening in the post editor and not a template.
+		if ( postType === 'wp_template' ) {
+			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 ) {
+			return false;
+		}
+
+		// Check that the user has the capability to edit post meta.
+		const canUserEdit = select( coreDataStore ).canUserEditEntityRecord(
+			'postType',
+			context?.postType,
+			context?.postId
+		);
+		if ( ! canUserEdit ) {
+			return false;
+		}
+
+		return true;
 	},
 };
diff --git a/packages/editor/src/components/autocompleters/style.scss b/packages/editor/src/components/autocompleters/style.scss
index 009079a9a3173..ca3159ee4ac82 100644
--- a/packages/editor/src/components/autocompleters/style.scss
+++ b/packages/editor/src/components/autocompleters/style.scss
@@ -1,8 +1,7 @@
 .editor-autocompleters__user {
 	.editor-autocompleters__no-avatar::before {
-		/* stylelint-disable */
+		/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
 		font: normal 20px/1 dashicons;
-		/* stylelint-enable */
 		content: "\f110";
 		margin-right: 5px;
 		vertical-align: middle;
diff --git a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js
new file mode 100644
index 0000000000000..4683dd38593a5
--- /dev/null
+++ b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js
@@ -0,0 +1,175 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockSettingsMenuControls,
+	__unstableBlockSettingsMenuFirstItem as BlockSettingsMenuFirstItem,
+	store as blockEditorStore,
+	useBlockDisplayInformation,
+} from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalText as Text, MenuItem } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
+	const { entity, onNavigateToEntityRecord } = useSelect(
+		( select ) => {
+			const {
+				getBlockEditingMode,
+				getBlockParentsByBlockName,
+				getSettings,
+				getBlockAttributes,
+			} = select( blockEditorStore );
+			const contentOnly =
+				getBlockEditingMode( clientId ) === 'contentOnly';
+			if ( ! contentOnly ) {
+				return {};
+			}
+			const patternParent = getBlockParentsByBlockName(
+				clientId,
+				'core/block',
+				true
+			)[ 0 ];
+
+			let record;
+			if ( patternParent ) {
+				record = select( coreStore ).getEntityRecord(
+					'postType',
+					'wp_block',
+					getBlockAttributes( patternParent ).ref
+				);
+			} else {
+				const { getCurrentPostType, getCurrentTemplateId } =
+					select( editorStore );
+				const currentPostType = getCurrentPostType();
+				const templateId = getCurrentTemplateId();
+				if ( currentPostType === 'page' && templateId ) {
+					record = select( coreStore ).getEntityRecord(
+						'postType',
+						'wp_template',
+						templateId
+					);
+				}
+			}
+			return {
+				entity: record,
+				onNavigateToEntityRecord:
+					getSettings().onNavigateToEntityRecord,
+			};
+		},
+		[ clientId ]
+	);
+
+	if ( ! entity ) {
+		return (
+			<TemplateLockContentOnlyMenuItems
+				clientId={ clientId }
+				onClose={ onClose }
+			/>
+		);
+	}
+
+	const isPattern = entity.type === 'wp_block';
+
+	return (
+		<>
+			<BlockSettingsMenuFirstItem>
+				<MenuItem
+					onClick={ () => {
+						onNavigateToEntityRecord( {
+							postId: entity.id,
+							postType: entity.type,
+						} );
+					} }
+				>
+					{ isPattern ? __( 'Edit pattern' ) : __( 'Edit template' ) }
+				</MenuItem>
+			</BlockSettingsMenuFirstItem>
+			<Text
+				variant="muted"
+				as="p"
+				className="editor-content-only-settings-menu__description"
+			>
+				{ isPattern
+					? __(
+							'Edit the pattern to move, delete, or make further changes to this block.'
+					  )
+					: __(
+							'Edit the template to move, delete, or make further changes to this block.'
+					  ) }
+			</Text>
+		</>
+	);
+}
+
+function TemplateLockContentOnlyMenuItems( { clientId, onClose } ) {
+	const { contentLockingParent } = useSelect(
+		( select ) => {
+			const { getContentLockingParent } = unlock(
+				select( blockEditorStore )
+			);
+			return {
+				contentLockingParent: getContentLockingParent( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+	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 )
+	);
+
+	if ( ! blockDisplayInformation?.title ) {
+		return null;
+	}
+
+	return (
+		<>
+			<BlockSettingsMenuFirstItem>
+				<MenuItem
+					onClick={ () => {
+						selectBlock( contentLockingParent );
+						modifyContentLockBlock( contentLockingParent );
+						onClose();
+					} }
+				>
+					{ __( 'Unlock' ) }
+				</MenuItem>
+			</BlockSettingsMenuFirstItem>
+			<Text
+				variant="muted"
+				as="p"
+				className="editor-content-only-settings-menu__description"
+			>
+				{ __(
+					'Temporarily unlock the parent block to edit, delete or make further changes to this block.'
+				) }
+			</Text>
+		</>
+	);
+}
+
+export default function ContentOnlySettingsMenu() {
+	return (
+		<BlockSettingsMenuControls>
+			{ ( { selectedClientIds, onClose } ) =>
+				selectedClientIds.length === 1 && (
+					<ContentOnlySettingsMenuItems
+						clientId={ selectedClientIds[ 0 ] }
+						onClose={ onClose }
+					/>
+				)
+			}
+		</BlockSettingsMenuControls>
+	);
+}
diff --git a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.native.js b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.native.js
new file mode 100644
index 0000000000000..11cebce87bbba
--- /dev/null
+++ b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.native.js
@@ -0,0 +1,4 @@
+// Render nothing in native for now.
+export default function ContentOnlySettingsMenu() {
+	return null;
+}
diff --git a/packages/editor/src/components/block-settings-menu/style.scss b/packages/editor/src/components/block-settings-menu/style.scss
new file mode 100644
index 0000000000000..53fa391d28ef0
--- /dev/null
+++ b/packages/editor/src/components/block-settings-menu/style.scss
@@ -0,0 +1,4 @@
+.editor-content-only-settings-menu__description {
+	padding: $grid-unit;
+	min-width: 235px;
+}
diff --git a/packages/editor/src/components/blog-title/index.js b/packages/editor/src/components/blog-title/index.js
new file mode 100644
index 0000000000000..4964ac3a0ec04
--- /dev/null
+++ b/packages/editor/src/components/blog-title/index.js
@@ -0,0 +1,124 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { debounce } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import {
+	Button,
+	Dropdown,
+	__experimentalInputControl as InputControl,
+} from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
+
+const EMPTY_OBJECT = {};
+
+export default function BlogTitle() {
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { postsPageTitle, postsPageId, isTemplate, postSlug } = useSelect(
+		( select ) => {
+			const { getEntityRecord, getEditedEntityRecord } =
+				select( coreStore );
+			const siteSettings = getEntityRecord( 'root', 'site' );
+			const _postsPageRecord = siteSettings?.page_for_posts
+				? getEditedEntityRecord(
+						'postType',
+						'page',
+						siteSettings?.page_for_posts
+				  )
+				: EMPTY_OBJECT;
+			const { getEditedPostAttribute, getCurrentPostType } =
+				select( editorStore );
+			return {
+				postsPageId: _postsPageRecord?.id,
+				postsPageTitle: _postsPageRecord?.title,
+				isTemplate: getCurrentPostType() === TEMPLATE_POST_TYPE,
+				postSlug: getEditedPostAttribute( 'slug' ),
+			};
+		},
+		[]
+	);
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	if (
+		! isTemplate ||
+		! [ 'home', 'index' ].includes( postSlug ) ||
+		! postsPageId
+	) {
+		return null;
+	}
+
+	const setPostsPageTitle = ( newValue ) => {
+		editEntityRecord( 'postType', 'page', postsPageId, {
+			title: newValue,
+		} );
+	};
+	const decodedTitle = decodeEntities( postsPageTitle );
+	return (
+		<PostPanelRow label={ __( 'Blog title' ) } ref={ setPopoverAnchor }>
+			<Dropdown
+				popoverProps={ popoverProps }
+				contentClassName="editor-blog-title-dropdown__content"
+				focusOnMount
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<Button
+						size="compact"
+						variant="tertiary"
+						aria-expanded={ isOpen }
+						aria-label={ sprintf(
+							// translators: %s: Current post link.
+							__( 'Change blog title: %s' ),
+							decodedTitle
+						) }
+						onClick={ onToggle }
+					>
+						{ decodedTitle }
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<>
+						<InspectorPopoverHeader
+							title={ __( 'Blog title' ) }
+							onClose={ onClose }
+						/>
+						<InputControl
+							placeholder={ __( 'No Title' ) }
+							size="__unstable-large"
+							value={ postsPageTitle }
+							onChange={ debounce( setPostsPageTitle, 300 ) }
+							label={ __( 'Blog title' ) }
+							help={ __(
+								'Set the Posts Page title. Appears in search results, and when the page is shared on social media.'
+							) }
+							hideLabelFromVision
+						/>
+					</>
+				) }
+			/>
+		</PostPanelRow>
+	);
+}
diff --git a/packages/editor/src/components/blog-title/style.scss b/packages/editor/src/components/blog-title/style.scss
new file mode 100644
index 0000000000000..164e82979e0b3
--- /dev/null
+++ b/packages/editor/src/components/blog-title/style.scss
@@ -0,0 +1,4 @@
+.editor-blog-title-dropdown__content .components-popover__content {
+	min-width: 320px;
+	padding: $grid-unit-20;
+}
diff --git a/packages/editor/src/components/collapsible-block-toolbar/index.js b/packages/editor/src/components/collapsible-block-toolbar/index.js
index 496fe356988aa..87d9b6473d8b6 100644
--- a/packages/editor/src/components/collapsible-block-toolbar/index.js
+++ b/packages/editor/src/components/collapsible-block-toolbar/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -49,7 +49,7 @@ function CollapsableBlockToolbar( { isCollapsed, onToggle } ) {
 	return (
 		<>
 			<div
-				className={ classnames( 'editor-collapsible-block-toolbar', {
+				className={ clsx( 'editor-collapsible-block-toolbar', {
 					'is-collapsed': isCollapsed || ! hasBlockSelection,
 				} ) }
 			>
diff --git a/packages/editor/src/components/collapsible-block-toolbar/style.scss b/packages/editor/src/components/collapsible-block-toolbar/style.scss
index 701d6fa7c5ecc..80d25da1a3e28 100644
--- a/packages/editor/src/components/collapsible-block-toolbar/style.scss
+++ b/packages/editor/src/components/collapsible-block-toolbar/style.scss
@@ -64,8 +64,9 @@
 		// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
 		@include break-small() {
 			&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+				height: $grid-unit-50;
 				position: relative;
-				top: -10px;
+				top: -5px; // Should be -4px, but that causes scrolling when focus lands on the movers, in a 60px header.
 			}
 		}
 	}
diff --git a/packages/editor/src/components/commands/index.js b/packages/editor/src/components/commands/index.js
index c79dc8cd1daa4..460a595234e59 100644
--- a/packages/editor/src/components/commands/index.js
+++ b/packages/editor/src/components/commands/index.js
@@ -2,8 +2,19 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { code, listView, external, keyboard } from '@wordpress/icons';
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	blockDefault,
+	code,
+	drawerLeft,
+	drawerRight,
+	edit,
+	formatListBullets,
+	listView,
+	external,
+	keyboard,
+	symbol,
+} from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as noticesStore } from '@wordpress/notices';
@@ -15,6 +26,9 @@ import { store as interfaceStore } from '@wordpress/interface';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { PATTERN_POST_TYPE } from '../../store/constants';
+import { modalName as patternRenameModalName } from '../pattern-rename-modal';
+import { modalName as patternDuplicateModalName } from '../pattern-duplicate-modal';
 
 function useEditorCommandLoader() {
 	const {
@@ -28,6 +42,7 @@ function useEditorCommandLoader() {
 		isViewable,
 		isCodeEditingEnabled,
 		isRichEditingEnabled,
+		isPublishSidebarEnabled,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { isListViewOpened, getCurrentPostType, getEditorSettings } =
@@ -46,8 +61,11 @@ function useEditorCommandLoader() {
 			isViewable: getPostType( getCurrentPostType() )?.viewable ?? false,
 			isCodeEditingEnabled: getEditorSettings().codeEditingEnabled,
 			isRichEditingEnabled: getEditorSettings().richEditingEnabled,
+			isPublishSidebarEnabled:
+				select( editorStore ).isPublishSidebarEnabled(),
 		};
 	}, [] );
+	const { getActiveComplementaryArea } = useSelect( interfaceStore );
 	const { toggle } = useDispatch( preferencesStore );
 	const { createInfoNotice } = useDispatch( noticesStore );
 	const {
@@ -56,7 +74,8 @@ function useEditorCommandLoader() {
 		switchEditorMode,
 		toggleDistractionFree,
 	} = useDispatch( editorStore );
-	const { openModal } = useDispatch( interfaceStore );
+	const { openModal, enableComplementaryArea, disableComplementaryArea } =
+		useDispatch( interfaceStore );
 	const { getCurrentPostId } = useSelect( editorStore );
 	const allowSwitchEditorMode = isCodeEditingEnabled && isRichEditingEnabled;
 
@@ -201,6 +220,57 @@ function useEditorCommandLoader() {
 		},
 	} );
 
+	commands.push( {
+		name: 'core/open-settings-sidebar',
+		label: __( 'Toggle settings sidebar' ),
+		icon: isRTL() ? drawerLeft : drawerRight,
+		callback: ( { close } ) => {
+			const activeSidebar = getActiveComplementaryArea( 'core' );
+			close();
+			if ( activeSidebar === 'edit-post/document' ) {
+				disableComplementaryArea( 'core' );
+			} else {
+				enableComplementaryArea( 'core', 'edit-post/document' );
+			}
+		},
+	} );
+
+	commands.push( {
+		name: 'core/open-block-inspector',
+		label: __( 'Toggle block inspector' ),
+		icon: blockDefault,
+		callback: ( { close } ) => {
+			const activeSidebar = getActiveComplementaryArea( 'core' );
+			close();
+			if ( activeSidebar === 'edit-post/block' ) {
+				disableComplementaryArea( 'core' );
+			} else {
+				enableComplementaryArea( 'core', 'edit-post/block' );
+			}
+		},
+	} );
+
+	commands.push( {
+		name: 'core/toggle-publish-sidebar',
+		label: isPublishSidebarEnabled
+			? __( 'Disable pre-publish checks' )
+			: __( 'Enable pre-publish checks' ),
+		icon: formatListBullets,
+		callback: ( { close } ) => {
+			close();
+			toggle( 'core', 'isPublishSidebarEnabled' );
+			createInfoNotice(
+				isPublishSidebarEnabled
+					? __( 'Pre-publish checks disabled.' )
+					: __( 'Pre-publish checks enabled.' ),
+				{
+					id: 'core/editor/publish-sidebar/notice',
+					type: 'snackbar',
+				}
+			);
+		},
+	} );
+
 	if ( isViewable ) {
 		commands.push( {
 			name: 'core/preview-link',
@@ -221,9 +291,49 @@ function useEditorCommandLoader() {
 	};
 }
 
+function useEditedEntityContextualCommands() {
+	const { postType } = useSelect( ( select ) => {
+		const { getCurrentPostType } = select( editorStore );
+		return {
+			postType: getCurrentPostType(),
+		};
+	}, [] );
+	const { openModal } = useDispatch( interfaceStore );
+	const commands = [];
+
+	if ( postType === PATTERN_POST_TYPE ) {
+		commands.push( {
+			name: 'core/rename-pattern',
+			label: __( 'Rename pattern' ),
+			icon: edit,
+			callback: ( { close } ) => {
+				openModal( patternRenameModalName );
+				close();
+			},
+		} );
+		commands.push( {
+			name: 'core/duplicate-pattern',
+			label: __( 'Duplicate pattern' ),
+			icon: symbol,
+			callback: ( { close } ) => {
+				openModal( patternDuplicateModalName );
+				close();
+			},
+		} );
+	}
+
+	return { isLoading: false, commands };
+}
+
 export default function useCommands() {
 	useCommandLoader( {
 		name: 'core/editor/edit-ui',
 		hook: useEditorCommandLoader,
 	} );
+
+	useCommandLoader( {
+		name: 'core/editor/contextual-commands',
+		hook: useEditedEntityContextualCommands,
+		context: 'entity-edit',
+	} );
 }
diff --git a/packages/edit-site/src/components/create-template-part-modal/index.js b/packages/editor/src/components/create-template-part-modal/index.js
similarity index 82%
rename from packages/edit-site/src/components/create-template-part-modal/index.js
rename to packages/editor/src/components/create-template-part-modal/index.js
index 376deae9d7321..276ca200d39d0 100644
--- a/packages/edit-site/src/components/create-template-part-modal/index.js
+++ b/packages/editor/src/components/create-template-part-modal/index.js
@@ -19,7 +19,6 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
-import { store as editorStore } from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
@@ -28,25 +27,32 @@ import { serialize } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
+import { store as editorStore } from '../../store';
 import {
 	TEMPLATE_PART_POST_TYPE,
 	TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
-} from '../../utils/constants';
+} from '../../store/constants';
 import {
 	useExistingTemplateParts,
 	getUniqueTemplatePartTitle,
 	getCleanTemplatePartSlug,
-} from '../../utils/template-part-create';
+} from './utils';
 
 export default function CreateTemplatePartModal( {
-	modalTitle = __( 'Create template part' ),
+	modalTitle,
 	...restProps
 } ) {
+	const defaultModalTitle = useSelect(
+		( select ) =>
+			select( coreStore ).getPostType( TEMPLATE_PART_POST_TYPE )?.labels
+				?.add_new_item,
+		[]
+	);
 	return (
 		<Modal
-			title={ modalTitle }
+			title={ modalTitle || defaultModalTitle }
 			onRequestClose={ restProps.closeModal }
-			overlayClassName="edit-site-create-template-part-modal"
+			overlayClassName="editor-create-template-part-modal"
 		>
 			<CreateTemplatePartModalContents { ...restProps } />
 		</Modal>
@@ -56,7 +62,7 @@ export default function CreateTemplatePartModal( {
 export function CreateTemplatePartModalContents( {
 	defaultArea = TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
 	blocks = [],
-	confirmLabel = __( 'Create' ),
+	confirmLabel = __( 'Add' ),
 	closeModal,
 	onCreate,
 	onError,
@@ -136,13 +142,13 @@ export function CreateTemplatePartModalContents( {
 				/>
 				<BaseControl
 					label={ __( 'Area' ) }
-					id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
-					className="edit-site-create-template-part-modal__area-base-control"
+					id={ `editor-create-template-part-modal__area-selection-${ instanceId }` }
+					className="editor-create-template-part-modal__area-base-control"
 				>
 					<RadioGroup
 						label={ __( 'Area' ) }
-						className="edit-site-create-template-part-modal__area-radio-group"
-						id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
+						className="editor-create-template-part-modal__area-radio-group"
+						id={ `editor-create-template-part-modal__area-selection-${ instanceId }` }
 						onChange={ setArea }
 						checked={ area }
 					>
@@ -151,18 +157,18 @@ export function CreateTemplatePartModalContents( {
 								<Radio
 									key={ label }
 									value={ value }
-									className="edit-site-create-template-part-modal__area-radio"
+									className="editor-create-template-part-modal__area-radio"
 								>
 									<Flex align="start" justify="start">
 										<FlexItem>
 											<Icon icon={ icon } />
 										</FlexItem>
-										<FlexBlock className="edit-site-create-template-part-modal__option-label">
+										<FlexBlock className="editor-create-template-part-modal__option-label">
 											{ label }
 											<div>{ description }</div>
 										</FlexBlock>
 
-										<FlexItem className="edit-site-create-template-part-modal__checkbox">
+										<FlexItem className="editor-create-template-part-modal__checkbox">
 											{ area === value && (
 												<Icon icon={ check } />
 											) }
diff --git a/packages/edit-site/src/components/create-template-part-modal/style.scss b/packages/editor/src/components/create-template-part-modal/style.scss
similarity index 69%
rename from packages/edit-site/src/components/create-template-part-modal/style.scss
rename to packages/editor/src/components/create-template-part-modal/style.scss
index 1dba3be142cea..907e42bf52ea4 100644
--- a/packages/edit-site/src/components/create-template-part-modal/style.scss
+++ b/packages/editor/src/components/create-template-part-modal/style.scss
@@ -1,5 +1,5 @@
-.edit-site-create-template-part-modal {
-	z-index: z-index(".edit-site-create-template-part-modal");
+.editor-create-template-part-modal {
+	z-index: z-index(".editor-create-template-part-modal");
 
 	.components-modal__frame {
 		@include break-small {
@@ -8,12 +8,12 @@
 	}
 }
 
-.edit-site-create-template-part-modal__area-radio-group {
+.editor-create-template-part-modal__area-radio-group {
 	width: 100%;
 	border: $border-width solid $gray-700;
 	border-radius: 2px;
 
-	.components-button.edit-site-create-template-part-modal__area-radio {
+	.components-button.editor-create-template-part-modal__area-radio {
 		display: block;
 		width: 100%;
 		height: 100%;
@@ -46,12 +46,12 @@
 			color: $gray-900;
 			cursor: auto;
 
-			.edit-site-create-template-part-modal__option-label div {
+			.editor-create-template-part-modal__option-label div {
 				color: $gray-600;
 			}
 		}
 
-		.edit-site-create-template-part-modal__option-label {
+		.editor-create-template-part-modal__option-label {
 			padding-top: $grid-unit-05;
 			white-space: normal;
 
@@ -61,7 +61,7 @@
 			}
 		}
 
-		.edit-site-create-template-part-modal__checkbox {
+		.editor-create-template-part-modal__checkbox {
 			margin-left: auto;
 			min-width: $grid-unit-30;
 		}
diff --git a/packages/edit-site/src/utils/test/template-part-create.js b/packages/editor/src/components/create-template-part-modal/test/utils.js
similarity index 93%
rename from packages/edit-site/src/utils/test/template-part-create.js
rename to packages/editor/src/components/create-template-part-modal/test/utils.js
index e39513ccf7e4f..7e33c16f46d8e 100644
--- a/packages/edit-site/src/utils/test/template-part-create.js
+++ b/packages/editor/src/components/create-template-part-modal/test/utils.js
@@ -1,10 +1,7 @@
 /**
  * Internal dependencies
  */
-import {
-	getUniqueTemplatePartTitle,
-	getCleanTemplatePartSlug,
-} from '../template-part-create';
+import { getUniqueTemplatePartTitle, getCleanTemplatePartSlug } from '../utils';
 
 describe( 'getUniqueTemplatePartTitle', () => {
 	it( 'should return the title if it is unique', () => {
diff --git a/packages/editor/src/components/create-template-part-modal/utils.js b/packages/editor/src/components/create-template-part-modal/utils.js
new file mode 100644
index 0000000000000..02f24cf17d2be
--- /dev/null
+++ b/packages/editor/src/components/create-template-part-modal/utils.js
@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import { paramCase as kebabCase } from 'change-case';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_PART_POST_TYPE } from '../../store/constants';
+
+export const useExistingTemplateParts = () => {
+	return useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecords(
+				'postType',
+				TEMPLATE_PART_POST_TYPE,
+				{
+					per_page: -1,
+				}
+			),
+		[]
+	);
+};
+
+/**
+ * Return a unique template part title based on
+ * the given title and existing template parts.
+ *
+ * @param {string} title         The original template part title.
+ * @param {Object} templateParts The array of template part entities.
+ * @return {string} A unique template part title.
+ */
+export const getUniqueTemplatePartTitle = ( title, templateParts ) => {
+	const lowercaseTitle = title.toLowerCase();
+	const existingTitles = templateParts.map( ( templatePart ) =>
+		templatePart.title.rendered.toLowerCase()
+	);
+
+	if ( ! existingTitles.includes( lowercaseTitle ) ) {
+		return title;
+	}
+
+	let suffix = 2;
+	while ( existingTitles.includes( `${ lowercaseTitle } ${ suffix }` ) ) {
+		suffix++;
+	}
+
+	return `${ title } ${ suffix }`;
+};
+
+/**
+ * Get a valid slug for a template part.
+ * Currently template parts only allow latin chars.
+ * The fallback slug will receive suffix by default.
+ *
+ * @param {string} title The template part title.
+ * @return {string} A valid template part slug.
+ */
+export const getCleanTemplatePartSlug = ( title ) => {
+	return kebabCase( title ).replace( /[^\w-]+/g, '' ) || 'wp-custom-part';
+};
diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js
index b0a6cbce70fff..82603bb1c7193 100644
--- a/packages/editor/src/components/document-bar/index.js
+++ b/packages/editor/src/components/document-bar/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -21,10 +21,12 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as commandsStore } from '@wordpress/commands';
 import { useRef, useEffect } from '@wordpress/element';
 import { useReducedMotion } from '@wordpress/compose';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
  */
+import { TEMPLATE_POST_TYPES, GLOBAL_POST_TYPES } from '../../store/constants';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
@@ -39,21 +41,26 @@ const TYPE_LABELS = {
 	wp_template_part: __( 'Editing template part: %s' ),
 };
 
-const TEMPLATE_POST_TYPES = [ 'wp_template', 'wp_template_part' ];
-
-const GLOBAL_POST_TYPES = [
-	...TEMPLATE_POST_TYPES,
-	'wp_block',
-	'wp_navigation',
-];
-
 const MotionButton = motion( Button );
 
+/**
+ * This component renders a navigation bar at the top of the editor. It displays the title of the current document,
+ * a back button (if applicable), and a command center button. It also handles different states of the document,
+ * such as "not found" or "unsynced".
+ *
+ * @example
+ * ```jsx
+ * <DocumentBar />
+ * ```
+ *
+ * @return {JSX.Element} The rendered DocumentBar component.
+ */
 export default function DocumentBar() {
 	const {
 		postType,
-		document,
-		isResolving,
+		documentTitle,
+		isNotFound,
+		isUnsyncedPattern,
 		templateIcon,
 		templateTitle,
 		onNavigateToPreviousEntityRecord,
@@ -76,13 +83,16 @@ export default function DocumentBar() {
 		const _templateInfo = getTemplateInfo( _document );
 		return {
 			postType: _postType,
-			document: _document,
-			isResolving: isResolvingSelector(
-				'getEditedEntityRecord',
-				'postType',
-				_postType,
-				_postId
-			),
+			documentTitle: _document.title,
+			isNotFound:
+				! _document &&
+				! isResolvingSelector(
+					'getEditedEntityRecord',
+					'postType',
+					_postType,
+					_postId
+				),
+			isUnsyncedPattern: _document?.wp_pattern_sync_status === 'unsynced',
 			templateIcon: unlock( select( editorStore ) ).getPostIcon(
 				_postType,
 				{
@@ -98,11 +108,10 @@ export default function DocumentBar() {
 	const { open: openCommandCenter } = useDispatch( commandsStore );
 	const isReducedMotion = useReducedMotion();
 
-	const isNotFound = ! document && ! isResolving;
 	const isTemplate = TEMPLATE_POST_TYPES.includes( postType );
 	const isGlobalEntity = GLOBAL_POST_TYPES.includes( postType );
 	const hasBackButton = !! onNavigateToPreviousEntityRecord;
-	const title = isTemplate ? templateTitle : document.title;
+	const title = isTemplate ? templateTitle : documentTitle;
 
 	const mounted = useRef( false );
 	useEffect( () => {
@@ -111,9 +120,9 @@ export default function DocumentBar() {
 
 	return (
 		<div
-			className={ classnames( 'editor-document-bar', {
+			className={ clsx( 'editor-document-bar', {
 				'has-back-button': hasBackButton,
-				'is-global': isGlobalEntity,
+				'is-global': isGlobalEntity && ! isUnsyncedPattern,
 			} ) }
 		>
 			<AnimatePresence>
@@ -182,7 +191,9 @@ export default function DocumentBar() {
 									: undefined
 							}
 						>
-							{ title }
+							{ title
+								? decodeEntities( title )
+								: __( 'No Title' ) }
 						</Text>
 					</motion.div>
 					<span className="editor-document-bar__shortcut">
diff --git a/packages/editor/src/components/document-outline/item.js b/packages/editor/src/components/document-outline/item.js
index 57ad25bfe7439..d202a2f6212a7 100644
--- a/packages/editor/src/components/document-outline/item.js
+++ b/packages/editor/src/components/document-outline/item.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 const TableOfContentsItem = ( {
 	children,
@@ -11,7 +11,7 @@ const TableOfContentsItem = ( {
 	onSelect,
 } ) => (
 	<li
-		className={ classnames(
+		className={ clsx(
 			'document-outline__item',
 			`is-${ level.toLowerCase() }`,
 			{
diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js
index 13359cd61a8f1..6ec999bd04801 100644
--- a/packages/editor/src/components/document-tools/index.js
+++ b/packages/editor/src/components/document-tools/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,7 @@ import {
 } from '@wordpress/block-editor';
 import { Button, ToolbarItem } from '@wordpress/components';
 import { listView, plus } from '@wordpress/icons';
-import { useRef, useCallback } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as preferencesStore } from '@wordpress/preferences';
 
@@ -32,14 +32,7 @@ const preventDefault = ( event ) => {
 	event.preventDefault();
 };
 
-function DocumentTools( {
-	className,
-	disableBlockTools = false,
-	children,
-	// This is a temporary prop until the list view is fully unified between post and site editors.
-	listViewLabel = __( 'Document Overview' ),
-} ) {
-	const inserterButton = useRef();
+function DocumentTools( { className, disableBlockTools = false } ) {
 	const { setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editorStore );
 	const {
@@ -47,16 +40,21 @@ function DocumentTools( {
 		isInserterOpened,
 		isListViewOpen,
 		listViewShortcut,
+		inserterSidebarToggleRef,
 		listViewToggleRef,
 		hasFixedToolbar,
 		showIconLabels,
 	} = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		const { get } = select( preferencesStore );
-		const { isListViewOpened, getListViewToggleRef } = unlock(
-			select( editorStore )
-		);
+		const {
+			isListViewOpened,
+			getEditorMode,
+			getInserterSidebarToggleRef,
+			getListViewToggleRef,
+		} = unlock( select( editorStore ) );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+		const { __unstableGetEditorMode } = select( blockEditorStore );
 
 		return {
 			isInserterOpened: select( editorStore ).isInserterOpened(),
@@ -64,10 +62,13 @@ function DocumentTools( {
 			listViewShortcut: getShortcutRepresentation(
 				'core/editor/toggle-list-view'
 			),
+			inserterSidebarToggleRef: getInserterSidebarToggleRef(),
 			listViewToggleRef: getListViewToggleRef(),
 			hasFixedToolbar: getSettings().hasFixedToolbar,
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			isDistractionFree: get( 'core', 'distractionFree' ),
+			isVisualMode: getEditorMode() === 'visual',
+			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 
@@ -82,17 +83,10 @@ function DocumentTools( {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
-	const toggleInserter = useCallback( () => {
-		if ( isInserterOpened ) {
-			// Focusing the inserter button should close the inserter popover.
-			// However, there are some cases it won't close when the focus is lost.
-			// See https://github.com/WordPress/gutenberg/issues/43090 for more details.
-			inserterButton.current.focus();
-			setIsInserterOpened( false );
-		} else {
-			setIsInserterOpened( true );
-		}
-	}, [ isInserterOpened, setIsInserterOpened ] );
+	const toggleInserter = useCallback(
+		() => setIsInserterOpened( ! isInserterOpened ),
+		[ isInserterOpened, setIsInserterOpened ]
+	);
 
 	/* translators: button label text should, if possible, be under 16 characters. */
 	const longLabel = _x(
@@ -107,7 +101,7 @@ function DocumentTools( {
 		// supported, but we're keeping it in the list of class names for backwards
 		// compatibility.
 		<NavigableToolbar
-			className={ classnames(
+			className={ clsx(
 				'editor-document-tools',
 				'edit-post-header-toolbar',
 				className
@@ -118,7 +112,7 @@ function DocumentTools( {
 			<div className="editor-document-tools__left">
 				{ ! isDistractionFree && (
 					<ToolbarItem
-						ref={ inserterButton }
+						ref={ inserterSidebarToggleRef }
 						as={ Button }
 						className="editor-document-tools__inserter-toggle"
 						variant="primary"
@@ -165,7 +159,7 @@ function DocumentTools( {
 								disabled={ disableBlockTools }
 								isPressed={ isListViewOpen }
 								/* translators: button label text should, if possible, be under 16 characters. */
-								label={ listViewLabel }
+								label={ __( 'Document Overview' ) }
 								onClick={ toggleListView }
 								shortcut={ listViewShortcut }
 								showTooltip={ ! showIconLabels }
@@ -179,7 +173,6 @@ function DocumentTools( {
 						) }
 					</>
 				) }
-				{ children }
 			</div>
 		</NavigableToolbar>
 	);
diff --git a/packages/editor/src/components/editor-help/help-get-support-button.native.js b/packages/editor/src/components/editor-help/help-get-support-button.native.js
index 35802379fe9e4..5d6ad0a9dc4d3 100644
--- a/packages/editor/src/components/editor-help/help-get-support-button.native.js
+++ b/packages/editor/src/components/editor-help/help-get-support-button.native.js
@@ -28,7 +28,7 @@ const HelpGetSupportButton = ( { onPress, title } ) => {
 		<Pressable
 			style={ buttonStyle }
 			onPress={ onPress }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 		>
 			<Text style={ textStyle }>{ title }</Text>
 		</Pressable>
diff --git a/packages/editor/src/components/editor-interface/content-slot-fill.js b/packages/editor/src/components/editor-interface/content-slot-fill.js
new file mode 100644
index 0000000000000..1aab394e87230
--- /dev/null
+++ b/packages/editor/src/components/editor-interface/content-slot-fill.js
@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { createPrivateSlotFill } = unlock( componentsPrivateApis );
+const SLOT_FILL_NAME = 'EditCanvasContainerSlot';
+const EditorContentSlotFill = createPrivateSlotFill( SLOT_FILL_NAME );
+
+export default EditorContentSlotFill;
diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js
new file mode 100644
index 0000000000000..8d4bdfc00344a
--- /dev/null
+++ b/packages/editor/src/components/editor-interface/index.js
@@ -0,0 +1,230 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { InterfaceSkeleton, ComplementaryArea } from '@wordpress/interface';
+import { useSelect } from '@wordpress/data';
+import { __, _x } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+import {
+	store as blockEditorStore,
+	BlockBreadcrumb,
+	BlockToolbar,
+} from '@wordpress/block-editor';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useViewportMatch } from '@wordpress/compose';
+import { useState, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import EditorNotices from '../editor-notices';
+import Header from '../header';
+import InserterSidebar from '../inserter-sidebar';
+import ListViewSidebar from '../list-view-sidebar';
+import SavePublishPanels from '../save-publish-panels';
+import TextEditor from '../text-editor';
+import VisualEditor from '../visual-editor';
+import EditorContentSlotFill from './content-slot-fill';
+
+const interfaceLabels = {
+	/* translators: accessibility text for the editor top bar landmark region. */
+	header: __( 'Editor top bar' ),
+	/* translators: accessibility text for the editor content landmark region. */
+	body: __( 'Editor content' ),
+	/* translators: accessibility text for the editor settings landmark region. */
+	sidebar: __( 'Editor settings' ),
+	/* translators: accessibility text for the editor publish landmark region. */
+	actions: __( 'Editor publish' ),
+	/* translators: accessibility text for the editor footer landmark region. */
+	footer: __( 'Editor footer' ),
+};
+
+export default function EditorInterface( {
+	className,
+	enableRegionNavigation,
+	styles,
+	children,
+	forceIsDirty,
+	contentRef,
+	disableIframe,
+	autoFocus,
+	customSaveButton,
+	forceDisableBlockTools,
+	title,
+	iframeProps,
+} ) {
+	const {
+		mode,
+		isRichEditingEnabled,
+		isInserterOpened,
+		isListViewOpened,
+		isDistractionFree,
+		isPreviewMode,
+		previousShortcut,
+		nextShortcut,
+		showBlockBreadcrumbs,
+		documentLabel,
+		blockEditorMode,
+	} = useSelect( ( select ) => {
+		const { get } = select( preferencesStore );
+		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
+		const editorSettings = getEditorSettings();
+		const postTypeLabel = getPostTypeLabel();
+
+		return {
+			mode: select( editorStore ).getEditorMode(),
+			isRichEditingEnabled: editorSettings.richEditingEnabled,
+			isInserterOpened: select( editorStore ).isInserterOpened(),
+			isListViewOpened: select( editorStore ).isListViewOpened(),
+			isDistractionFree: get( 'core', 'distractionFree' ),
+			isPreviewMode: editorSettings.__unstableIsPreviewMode,
+			previousShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/editor/previous-region' ),
+			nextShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/editor/next-region' ),
+			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
+			// translators: Default label for the Document in the Block Breadcrumb.
+			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
+			blockEditorMode:
+				select( blockEditorStore ).__unstableGetEditorMode(),
+		};
+	}, [] );
+	const isWideViewport = useViewportMatch( 'large' );
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const secondarySidebarLabel = isListViewOpened
+		? __( 'Document Overview' )
+		: __( 'Block Library' );
+
+	// Local state for save panel.
+	// Note 'truthy' callback implies an open panel.
+	const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
+		useState( false );
+	const closeEntitiesSavedStates = useCallback(
+		( arg ) => {
+			if ( typeof entitiesSavedStatesCallback === 'function' ) {
+				entitiesSavedStatesCallback( arg );
+			}
+			setEntitiesSavedStatesCallback( false );
+		},
+		[ entitiesSavedStatesCallback ]
+	);
+
+	return (
+		<InterfaceSkeleton
+			enableRegionNavigation={ enableRegionNavigation }
+			isDistractionFree={ isDistractionFree && isWideViewport }
+			className={ clsx( 'editor-editor-interface', className, {
+				'is-entity-save-view-open': !! entitiesSavedStatesCallback,
+				'is-distraction-free':
+					isDistractionFree && isWideViewport && ! isPreviewMode,
+			} ) }
+			labels={ {
+				...interfaceLabels,
+				secondarySidebar: secondarySidebarLabel,
+			} }
+			header={
+				! isPreviewMode && (
+					<Header
+						forceIsDirty={ forceIsDirty }
+						setEntitiesSavedStatesCallback={
+							setEntitiesSavedStatesCallback
+						}
+						customSaveButton={ customSaveButton }
+						forceDisableBlockTools={ forceDisableBlockTools }
+						title={ title }
+					/>
+				)
+			}
+			editorNotices={ <EditorNotices /> }
+			secondarySidebar={
+				! isPreviewMode &&
+				mode === 'visual' &&
+				( ( isInserterOpened && <InserterSidebar /> ) ||
+					( isListViewOpened && <ListViewSidebar /> ) )
+			}
+			sidebar={
+				! isPreviewMode &&
+				! isDistractionFree && <ComplementaryArea.Slot scope="core" />
+			}
+			content={
+				<>
+					{ ! isDistractionFree && ! isPreviewMode && (
+						<EditorNotices />
+					) }
+
+					<EditorContentSlotFill.Slot>
+						{ ( [ editorCanvasView ] ) =>
+							editorCanvasView ? (
+								editorCanvasView
+							) : (
+								<>
+									{ ! isPreviewMode &&
+										( mode === 'text' ||
+											! isRichEditingEnabled ) && (
+											<TextEditor
+												// We should auto-focus the canvas (title) on load.
+												// eslint-disable-next-line jsx-a11y/no-autofocus
+												autoFocus={ autoFocus }
+											/>
+										) }
+									{ ! isPreviewMode &&
+										! isLargeViewport &&
+										mode === 'visual' && (
+											<BlockToolbar hideDragHandle />
+										) }
+									{ ( isPreviewMode ||
+										( isRichEditingEnabled &&
+											mode === 'visual' ) ) && (
+										<VisualEditor
+											styles={ styles }
+											contentRef={ contentRef }
+											disableIframe={ disableIframe }
+											// We should auto-focus the canvas (title) on load.
+											// eslint-disable-next-line jsx-a11y/no-autofocus
+											autoFocus={ autoFocus }
+											iframeProps={ iframeProps }
+										/>
+									) }
+									{ children }
+								</>
+							)
+						}
+					</EditorContentSlotFill.Slot>
+				</>
+			}
+			footer={
+				! isPreviewMode &&
+				! isDistractionFree &&
+				isLargeViewport &&
+				showBlockBreadcrumbs &&
+				isRichEditingEnabled &&
+				blockEditorMode !== 'zoom-out' &&
+				mode === 'visual' && (
+					<BlockBreadcrumb rootLabelText={ documentLabel } />
+				)
+			}
+			actions={
+				<SavePublishPanels
+					closeEntitiesSavedStates={ closeEntitiesSavedStates }
+					isEntitiesSavedStatesOpen={ entitiesSavedStatesCallback }
+					setEntitiesSavedStatesCallback={
+						setEntitiesSavedStatesCallback
+					}
+					forceIsDirtyPublishPanel={ forceIsDirty }
+				/>
+			}
+			shortcuts={ {
+				previous: previousShortcut,
+				next: nextShortcut,
+			} }
+		/>
+	);
+}
diff --git a/packages/editor/src/components/editor-interface/style.scss b/packages/editor/src/components/editor-interface/style.scss
new file mode 100644
index 0000000000000..e7e0a93af2090
--- /dev/null
+++ b/packages/editor/src/components/editor-interface/style.scss
@@ -0,0 +1,3 @@
+.editor-editor-interface .entities-saved-states__panel-header {
+	height: $header-height + $border-width;
+}
diff --git a/packages/editor/src/components/editor-notices/index.js b/packages/editor/src/components/editor-notices/index.js
index a25d3fa40a204..28341bfda3f23 100644
--- a/packages/editor/src/components/editor-notices/index.js
+++ b/packages/editor/src/components/editor-notices/index.js
@@ -10,6 +10,16 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import TemplateValidationNotice from '../template-validation-notice';
 
+/**
+ * This component renders the notices displayed in the editor. It displays pinned notices first, followed by dismissible
+ *
+ * @example
+ * ```jsx
+ * <EditorNotices />
+ * ```
+ *
+ * @return {JSX.Element} The rendered EditorNotices component.
+ */
 export function EditorNotices() {
 	const { notices } = useSelect(
 		( select ) => ( {
diff --git a/packages/editor/src/components/entities-saved-states/entity-record-item.js b/packages/editor/src/components/entities-saved-states/entity-record-item.js
index 15bdc8c2f2284..49733489b0a11 100644
--- a/packages/editor/src/components/entities-saved-states/entity-record-item.js
+++ b/packages/editor/src/components/entities-saved-states/entity-record-item.js
@@ -1,25 +1,32 @@
 /**
  * WordPress dependencies
  */
-import { CheckboxControl, PanelRow } from '@wordpress/components';
+import { Icon, CheckboxControl, Flex, PanelRow } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { connection } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 export default function EntityRecordItem( { record, checked, onChange } ) {
 	const { name, kind, title, key } = record;
 
 	// Handle templates that might use default descriptive titles.
-	const entityRecordTitle = useSelect(
+	const { entityRecordTitle, hasPostMetaChanges } = useSelect(
 		( select ) => {
 			if ( 'postType' !== kind || 'wp_template' !== name ) {
-				return title;
+				return {
+					entityRecordTitle: title,
+					hasPostMetaChanges: unlock(
+						select( editorStore )
+					).hasPostMetaChanges( name, key ),
+				};
 			}
 
 			const template = select( coreStore ).getEditedEntityRecord(
@@ -27,23 +34,45 @@ export default function EntityRecordItem( { record, checked, onChange } ) {
 				name,
 				key
 			);
-			return select( editorStore ).__experimentalGetTemplateInfo(
-				template
-			).title;
+			return {
+				entityRecordTitle:
+					select( editorStore ).__experimentalGetTemplateInfo(
+						template
+					).title,
+				hasPostMetaChanges: unlock(
+					select( editorStore )
+				).hasPostMetaChanges( name, key ),
+			};
 		},
 		[ name, kind, title, key ]
 	);
 
 	return (
-		<PanelRow>
-			<CheckboxControl
-				__nextHasNoMarginBottom
-				label={
-					decodeEntities( entityRecordTitle ) || __( 'Untitled' )
-				}
-				checked={ checked }
-				onChange={ onChange }
-			/>
-		</PanelRow>
+		<>
+			<PanelRow>
+				<CheckboxControl
+					__nextHasNoMarginBottom
+					label={
+						decodeEntities( entityRecordTitle ) || __( 'Untitled' )
+					}
+					checked={ checked }
+					onChange={ onChange }
+				/>
+			</PanelRow>
+			{ hasPostMetaChanges && (
+				<PanelRow>
+					<Flex className="entities-saved-states__post-meta">
+						<Icon
+							className="entities-saved-states__connections-icon"
+							icon={ connection }
+							size={ 24 }
+						/>
+						<span className="entities-saved-states__bindings-text">
+							{ __( 'Post Meta.' ) }
+						</span>
+					</Flex>
+				</PanelRow>
+			) }
+		</>
 	);
 }
diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss
index f4e0c9f814c24..8f0d8f53ca9cb 100644
--- a/packages/editor/src/components/entities-saved-states/style.scss
+++ b/packages/editor/src/components/entities-saved-states/style.scss
@@ -31,9 +31,15 @@
 	}
 }
 
-.edit-post-layout,
-.edit-site-editor__interface-skeleton {
-	.entities-saved-states__panel-header {
-		height: $header-height + $border-width;
-	}
+.entities-saved-states__post-meta {
+	margin-left: $grid-unit-30;
+	align-items: center;
+}
+
+.entities-saved-states__connections-icon {
+	flex-grow: 0;
+}
+
+.entities-saved-states__bindings-text {
+	flex-grow: 1;
 }
diff --git a/packages/editor/src/components/error-boundary/index.js b/packages/editor/src/components/error-boundary/index.js
index 0b5158ff7b9e5..966ea433c0d64 100644
--- a/packages/editor/src/components/error-boundary/index.js
+++ b/packages/editor/src/components/error-boundary/index.js
@@ -75,4 +75,14 @@ class ErrorBoundary extends Component {
 	}
 }
 
+/**
+ * ErrorBoundary is used to catch JavaScript errors anywhere in a child component tree, log those errors, and display a fallback UI.
+ *
+ * It uses the lifecycle methods getDerivedStateFromError and componentDidCatch to catch errors in a child component tree.
+ *
+ * getDerivedStateFromError is used to render a fallback UI after an error has been thrown, and componentDidCatch is used to log error information.
+ *
+ * @class ErrorBoundary
+ * @augments Component
+ */
 export default ErrorBoundary;
diff --git a/packages/editor/src/components/error-boundary/index.native.js b/packages/editor/src/components/error-boundary/index.native.js
index d627bfa0e7893..0de048e811445 100644
--- a/packages/editor/src/components/error-boundary/index.native.js
+++ b/packages/editor/src/components/error-boundary/index.native.js
@@ -69,7 +69,7 @@ function CopyButton( {
 			activeOpacity={ 0.5 }
 			accessibilityLabel={ accessibilityLabel }
 			style={ [ containerStyle, secondary && containerSecondaryStyle ] }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 			accessibilityHint={ accessibilityHint }
 			onPress={ () => {
 				Clipboard.setString(
diff --git a/packages/editor/src/components/global-keyboard-shortcuts/register-shortcuts.js b/packages/editor/src/components/global-keyboard-shortcuts/register-shortcuts.js
index 90101c5a0a2f0..26a07166c106c 100644
--- a/packages/editor/src/components/global-keyboard-shortcuts/register-shortcuts.js
+++ b/packages/editor/src/components/global-keyboard-shortcuts/register-shortcuts.js
@@ -72,7 +72,7 @@ function EditorKeyboardShortcutsRegister() {
 		registerShortcut( {
 			name: 'core/editor/toggle-list-view',
 			category: 'global',
-			description: __( 'Open the block list view.' ),
+			description: __( 'Open the List View.' ),
 			keyCombination: {
 				modifier: 'access',
 				character: 'o',
diff --git a/packages/edit-site/src/components/global-styles/global-styles-provider.js b/packages/editor/src/components/global-styles-provider/index.js
similarity index 53%
rename from packages/edit-site/src/components/global-styles/global-styles-provider.js
rename to packages/editor/src/components/global-styles-provider/index.js
index 1e2d43e267a2d..04a42ab7af819 100644
--- a/packages/edit-site/src/components/global-styles/global-styles-provider.js
+++ b/packages/editor/src/components/global-styles-provider/index.js
@@ -7,15 +7,17 @@ import { isPlainObject } from 'is-plain-object';
 /**
  * WordPress dependencies
  */
-import { useMemo, useCallback } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import { registerBlockStyle, store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useMemo, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import setNestedValue from '../../utils/set-nested-value';
 
 const { GlobalStylesContext, cleanEmptyObject } = unlock(
 	blockEditorPrivateApis
@@ -30,8 +32,87 @@ export function mergeBaseAndUserConfigs( base, user ) {
 	} );
 }
 
+/**
+ * Resolves shared block style variation definitions from the user origin
+ * under their respective block types and registers the block style if required.
+ *
+ * @param {Object} userConfig Current user origin global styles data.
+ * @return {Object} Updated global styles data.
+ */
+function useResolvedBlockStyleVariationsConfig( userConfig ) {
+	const { getBlockStyles } = useSelect( blocksStore );
+	const sharedVariations = userConfig?.styles?.blocks?.variations;
+
+	// Collect block style variation definitions to merge and unregistered
+	// block styles for automatic registration.
+	const [ userConfigToMerge, unregisteredStyles ] = useMemo( () => {
+		if ( ! sharedVariations ) {
+			return [];
+		}
+
+		const variationsConfigToMerge = {};
+		const unregisteredBlockStyles = [];
+
+		Object.entries( sharedVariations ).forEach(
+			( [ variationName, variation ] ) => {
+				if ( ! variation?.blockTypes?.length ) {
+					return;
+				}
+
+				variation.blockTypes.forEach( ( blockName ) => {
+					const blockStyles = getBlockStyles( blockName );
+					const registeredBlockStyle = blockStyles.find(
+						( { name } ) => name === variationName
+					);
+
+					if ( ! registeredBlockStyle ) {
+						unregisteredBlockStyles.push( [
+							blockName,
+							{
+								name: variationName,
+								label: variationName,
+							},
+						] );
+					}
+
+					const path = [
+						'styles',
+						'blocks',
+						blockName,
+						'variations',
+						variationName,
+					];
+					setNestedValue( variationsConfigToMerge, path, variation );
+				} );
+			}
+		);
+
+		return [ variationsConfigToMerge, unregisteredBlockStyles ];
+	}, [ sharedVariations, getBlockStyles ] );
+
+	// Automatically register missing block styles from variations.
+	useEffect(
+		() =>
+			unregisteredStyles?.forEach( ( unregisteredStyle ) =>
+				registerBlockStyle( ...unregisteredStyle )
+			),
+		[ unregisteredStyles ]
+	);
+
+	// Merge shared block style variation definitions into overall user config.
+	const updatedConfig = useMemo( () => {
+		if ( ! userConfigToMerge ) {
+			return userConfig;
+		}
+
+		return deepmerge( userConfigToMerge, userConfig );
+	}, [ userConfigToMerge, userConfig ] );
+
+	return updatedConfig;
+}
+
 function useGlobalStylesUserConfig() {
-	const { globalStylesId, isReady, settings, styles } = useSelect(
+	const { globalStylesId, isReady, settings, styles, _links } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, hasFinishedResolution } =
 				select( coreStore );
@@ -65,6 +146,7 @@ function useGlobalStylesUserConfig() {
 				isReady: hasResolved,
 				settings: record?.settings,
 				styles: record?.styles,
+				_links: record?._links,
 			};
 		},
 		[]
@@ -76,8 +158,9 @@ function useGlobalStylesUserConfig() {
 		return {
 			settings: settings ?? {},
 			styles: styles ?? {},
+			_links: _links ?? {},
 		};
-	}, [ settings, styles ] );
+	}, [ settings, styles, _links ] );
 
 	const setConfig = useCallback(
 		( callback, options = {} ) => {
@@ -86,11 +169,14 @@ function useGlobalStylesUserConfig() {
 				'globalStyles',
 				globalStylesId
 			);
+
 			const currentConfig = {
 				styles: record?.styles ?? {},
 				settings: record?.settings ?? {},
+				_links: record?._links ?? {},
 			};
 			const updatedConfig = callback( currentConfig );
+
 			editEntityRecord(
 				'root',
 				'globalStyles',
@@ -98,6 +184,7 @@ function useGlobalStylesUserConfig() {
 				{
 					styles: cleanEmptyObject( updatedConfig.styles ) || {},
 					settings: cleanEmptyObject( updatedConfig.settings ) || {},
+					_links: cleanEmptyObject( updatedConfig._links ) || {},
 				},
 				options
 			);
@@ -118,27 +205,32 @@ function useGlobalStylesBaseConfig() {
 	return [ !! baseConfig, baseConfig ];
 }
 
-function useGlobalStylesContext() {
+export function useGlobalStylesContext() {
 	const [ isUserConfigReady, userConfig, setUserConfig ] =
 		useGlobalStylesUserConfig();
 	const [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();
+	const userConfigWithVariations =
+		useResolvedBlockStyleVariationsConfig( userConfig );
+
 	const mergedConfig = useMemo( () => {
-		if ( ! baseConfig || ! userConfig ) {
+		if ( ! baseConfig || ! userConfigWithVariations ) {
 			return {};
 		}
-		return mergeBaseAndUserConfigs( baseConfig, userConfig );
-	}, [ userConfig, baseConfig ] );
+
+		return mergeBaseAndUserConfigs( baseConfig, userConfigWithVariations );
+	}, [ userConfigWithVariations, baseConfig ] );
+
 	const context = useMemo( () => {
 		return {
 			isReady: isUserConfigReady && isBaseConfigReady,
-			user: userConfig,
+			user: userConfigWithVariations,
 			base: baseConfig,
 			merged: mergedConfig,
 			setUserConfig,
 		};
 	}, [
 		mergedConfig,
-		userConfig,
+		userConfigWithVariations,
 		baseConfig,
 		setUserConfig,
 		isUserConfigReady,
diff --git a/packages/edit-post/src/components/header/main-dashboard-button/index.js b/packages/editor/src/components/header/back-button.js
similarity index 55%
rename from packages/edit-post/src/components/header/main-dashboard-button/index.js
rename to packages/editor/src/components/header/back-button.js
index 0878a7cce4901..7b775d11cd7a8 100644
--- a/packages/edit-post/src/components/header/main-dashboard-button/index.js
+++ b/packages/editor/src/components/header/back-button.js
@@ -6,13 +6,13 @@ import {
 	createSlotFill,
 } from '@wordpress/components';
 
+// Keeping an old name for backward compatibility.
 const slotName = '__experimentalMainDashboardButton';
 
-const { Fill, Slot: MainDashboardButtonSlot } = createSlotFill( slotName );
+const { Fill, Slot } = createSlotFill( slotName );
 
-const MainDashboardButton = Fill;
-
-const Slot = ( { children } ) => {
+const BackButton = Fill;
+const BackButtonSlot = ( { children } ) => {
 	const fills = useSlotFills( slotName );
 	const hasFills = Boolean( fills && fills.length );
 
@@ -20,9 +20,8 @@ const Slot = ( { children } ) => {
 		return children;
 	}
 
-	return <MainDashboardButtonSlot bubblesVirtually />;
+	return <Slot bubblesVirtually />;
 };
+BackButton.Slot = BackButtonSlot;
 
-MainDashboardButton.Slot = Slot;
-
-export default MainDashboardButton;
+export default BackButton;
diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
new file mode 100644
index 0000000000000..14b62def0cfa7
--- /dev/null
+++ b/packages/editor/src/components/header/index.js
@@ -0,0 +1,162 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { 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 DocumentBar from '../document-bar';
+import DocumentTools from '../document-tools';
+import MoreMenu from '../more-menu';
+import PostPreviewButton from '../post-preview-button';
+import PostPublishButtonOrToggle from '../post-publish-button/post-publish-button-or-toggle';
+import PostSavedState from '../post-saved-state';
+import PostViewLink from '../post-view-link';
+import PreviewDropdown from '../preview-dropdown';
+import { store as editorStore } from '../../store';
+
+const toolbarVariations = {
+	distractionFreeDisabled: { y: '-50px' },
+	distractionFreeHover: { y: 0 },
+	distractionFreeHidden: { y: '-50px' },
+	visible: { y: 0 },
+	hidden: { y: 0 },
+};
+
+const backButtonVariations = {
+	distractionFreeDisabled: { x: '-100%' },
+	distractionFreeHover: { x: 0 },
+	distractionFreeHidden: { x: '-100%' },
+	visible: { x: 0 },
+	hidden: { x: 0 },
+};
+
+function Header( {
+	customSaveButton,
+	forceIsDirty,
+	forceDisableBlockTools,
+	setEntitiesSavedStatesCallback,
+	title,
+} ) {
+	const isWideViewport = useViewportMatch( 'large' );
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const {
+		isTextEditor,
+		isPublishSidebarOpened,
+		showIconLabels,
+		hasFixedToolbar,
+		isNestedEntity,
+		isZoomedOutView,
+	} = useSelect( ( select ) => {
+		const { get: getPreference } = select( preferencesStore );
+		const {
+			getEditorMode,
+			getEditorSettings,
+			isPublishSidebarOpened: _isPublishSidebarOpened,
+		} = select( editorStore );
+		const { __unstableGetEditorMode } = select( blockEditorStore );
+
+		return {
+			isTextEditor: getEditorMode() === 'text',
+			isPublishSidebarOpened: _isPublishSidebarOpened(),
+			showIconLabels: getPreference( 'core', 'showIconLabels' ),
+			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
+			isNestedEntity:
+				!! getEditorSettings().onNavigateToPreviousEntityRecord,
+			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
+		};
+	}, [] );
+
+	const hasTopToolbar = isLargeViewport && hasFixedToolbar;
+
+	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.
+	return (
+		<div className="editor-header edit-post-header">
+			<motion.div
+				variants={ backButtonVariations }
+				transition={ { type: 'tween' } }
+			>
+				<BackButton.Slot />
+			</motion.div>
+			<motion.div
+				variants={ toolbarVariations }
+				className="editor-header__toolbar"
+				transition={ { type: 'tween' } }
+			>
+				<DocumentTools
+					disableBlockTools={ forceDisableBlockTools || isTextEditor }
+				/>
+				{ hasTopToolbar && (
+					<CollapsableBlockToolbar
+						isCollapsed={ isBlockToolsCollapsed }
+						onToggle={ setIsBlockToolsCollapsed }
+					/>
+				) }
+				<div
+					className={ clsx( 'editor-header__center', {
+						'is-collapsed':
+							! isBlockToolsCollapsed && hasTopToolbar,
+					} ) }
+				>
+					{ ! title ? <DocumentBar /> : title }
+				</div>
+			</motion.div>
+			<motion.div
+				variants={ toolbarVariations }
+				transition={ { type: 'tween' } }
+				className="editor-header__settings"
+			>
+				{ ! customSaveButton && ! isPublishSidebarOpened && (
+					// This button isn't completely hidden by the publish sidebar.
+					// We can't hide the whole toolbar when the publish sidebar is open because
+					// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
+					// We track that DOM node to return focus to the PostPublishButtonOrToggle
+					// when the publish sidebar has been closed.
+					<PostSavedState forceIsDirty={ forceIsDirty } />
+				) }
+				<PreviewDropdown
+					forceIsAutosaveable={ forceIsDirty }
+					disabled={ isNestedEntity || isZoomedOutView }
+				/>
+				<PostPreviewButton
+					className="editor-header__post-preview-button"
+					forceIsAutosaveable={ forceIsDirty }
+				/>
+				<PostViewLink />
+				{ ! customSaveButton && (
+					<PostPublishButtonOrToggle
+						forceIsDirty={ forceIsDirty }
+						setEntitiesSavedStatesCallback={
+							setEntitiesSavedStatesCallback
+						}
+					/>
+				) }
+				{ customSaveButton }
+				{ ( isWideViewport || ! showIconLabels ) && (
+					<PinnedItems.Slot scope="core" />
+				) }
+				<MoreMenu />
+			</motion.div>
+		</div>
+	);
+}
+
+export default Header;
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/editor/src/components/header/style.scss
similarity index 79%
rename from packages/edit-post/src/components/header/style.scss
rename to packages/editor/src/components/header/style.scss
index 93c1461774cbd..e2efba2e9375a 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/editor/src/components/header/style.scss
@@ -1,4 +1,4 @@
-.edit-post-header {
+.editor-header {
 	height: $header-height;
 	background: $white;
 	display: flex;
@@ -14,7 +14,7 @@
 	}
 }
 
-.edit-post-header__toolbar {
+.editor-header__toolbar {
 	display: flex;
 	// Allow this area to shrink to fit the toolbar buttons.
 	flex-shrink: 8;
@@ -39,10 +39,15 @@
 	}
 }
 
-.edit-post-header__center {
+.editor-header__center {
 	flex-grow: 1;
 	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
+	min-width: 0;
 
 	&.is-collapsed {
 		display: none;
@@ -53,7 +58,7 @@
  * Buttons on the right side
  */
 
-.edit-post-header__settings {
+.editor-header__settings {
 	display: inline-flex;
 	align-items: center;
 	flex-wrap: nowrap;
@@ -71,8 +76,7 @@
  */
 
 .show-icon-labels.interface-pinned-items,
-.show-icon-labels .edit-post-header,
-.edit-post-header__dropdown {
+.show-icon-labels .editor-header {
 	.components-button.has-icon {
 		width: auto;
 
@@ -95,8 +99,6 @@
 		}
 	}
 	// Exception for drodpdown toggle buttons.
-	// Exception for the fullscreen mode button.
-	.edit-post-fullscreen-mode-close.has-icon,
 	.components-button.has-icon.button-toggle {
 		svg {
 			display: block;
@@ -105,10 +107,7 @@
 			content: none;
 		}
 	}
-	// Undo the width override for fullscreen mode button.
-	.edit-post-fullscreen-mode-close.has-icon {
-		width: $header-height;
-	}
+
 	// Don't hide MenuItemsChoice check icons
 	.components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon {
 		display: block;
@@ -133,7 +132,7 @@
 }
 
 .show-icon-labels {
-	.edit-post-header__toolbar .block-editor-block-mover {
+	.editor-header__toolbar .block-editor-block-mover {
 		// Modified group borders.
 		border-left: none;
 
@@ -157,20 +156,6 @@
 	}
 }
 
-.edit-post-header__dropdown {
-	.components-menu-item__button.components-menu-item__button,
-	.components-button.editor-history__undo,
-	.components-button.editor-history__redo,
-	.table-of-contents .components-button,
-	.components-button.block-editor-list-view {
-		margin: 0;
-		padding: 6px 6px 6px $grid-unit-50;
-		width: 14.625rem;
-		text-align: left;
-		justify-content: flex-start;
-	}
-}
-
 .show-icon-labels.interface-pinned-items {
 	padding: 6px $grid-unit-15 $grid-unit-15;
 	margin-top: 0;
@@ -199,18 +184,18 @@
 	}
 }
 
-.edit-post-header__post-preview-button {
+.editor-header__post-preview-button {
 	@include break-small {
 		display: none;
 	}
 }
 
-.is-distraction-free {
+.editor-editor-interface.is-distraction-free {
 	.interface-interface-skeleton__header {
 		border-bottom: none;
 	}
 
-	.edit-post-header {
+	.editor-header {
 		background-color: $white;
 		border-bottom: 1px solid #e0e0e0;
 		position: absolute;
@@ -222,9 +207,9 @@
 			visibility: hidden;
 		}
 
-		& > .edit-post-header__toolbar .editor-document-tools__document-overview-toggle,
-		& > .edit-post-header__settings > .editor-preview-dropdown,
-		& > .edit-post-header__settings > .interface-pinned-items {
+		& > .editor-header__toolbar .editor-document-tools__document-overview-toggle,
+		& > .editor-header__settings > .editor-preview-dropdown,
+		& > .editor-header__settings > .interface-pinned-items {
 			display: none;
 		}
 
diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
index 1611ea8909683..11510c21e4300 100644
--- a/packages/editor/src/components/inserter-sidebar/index.js
+++ b/packages/editor/src/components/inserter-sidebar/index.js
@@ -2,16 +2,18 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Button, VisuallyHidden } from '@wordpress/components';
-import { __experimentalLibrary as Library } from '@wordpress/block-editor';
-import { close } from '@wordpress/icons';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-import { useRef } from '@wordpress/element';
+import { useCallback, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { ESCAPE } from '@wordpress/keycodes';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -19,58 +21,112 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 
-export default function InserterSidebar( {
-	closeGeneralSidebar,
-	isRightSidebarOpen,
-} ) {
-	const { insertionPoint, showMostUsedBlocks } = useSelect( ( select ) => {
-		const { getInsertionPoint } = unlock( select( editorStore ) );
+const { PrivateInserterLibrary } = unlock( blockEditorPrivateApis );
+
+export default function InserterSidebar() {
+	const {
+		blockSectionRootClientId,
+		inserterSidebarToggleRef,
+		insertionPoint,
+		showMostUsedBlocks,
+		sidebarIsOpened,
+	} = useSelect( ( select ) => {
+		const {
+			getInserterSidebarToggleRef,
+			getInsertionPoint,
+			isPublishSidebarOpened,
+		} = unlock( select( editorStore ) );
+		const { getBlockRootClientId, __unstableGetEditorMode, getSettings } =
+			select( blockEditorStore );
 		const { get } = select( preferencesStore );
+		const { getActiveComplementaryArea } = select( interfaceStore );
+		const getBlockSectionRootClientId = () => {
+			if ( __unstableGetEditorMode() === 'zoom-out' ) {
+				const { sectionRootClientId } = unlock( getSettings() );
+				if ( sectionRootClientId ) {
+					return sectionRootClientId;
+				}
+			}
+			return getBlockRootClientId();
+		};
 		return {
+			inserterSidebarToggleRef: getInserterSidebarToggleRef(),
 			insertionPoint: getInsertionPoint(),
 			showMostUsedBlocks: get( 'core', 'mostUsedBlocks' ),
+			blockSectionRootClientId: getBlockSectionRootClientId(),
+			sidebarIsOpened: !! (
+				getActiveComplementaryArea( 'core' ) || isPublishSidebarOpened()
+			),
 		};
 	}, [] );
 	const { setIsInserterOpened } = useDispatch( editorStore );
+	const { disableComplementaryArea } = useDispatch( interfaceStore );
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
 		focusOnMount: true,
 	} );
-
 	const libraryRef = useRef();
 
+	// When closing the inserter, focus should return to the toggle button.
+	const closeInserterSidebar = useCallback( () => {
+		setIsInserterOpened( false );
+		inserterSidebarToggleRef.current?.focus();
+	}, [ inserterSidebarToggleRef, setIsInserterOpened ] );
+
+	const closeOnEscape = useCallback(
+		( event ) => {
+			if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+				event.preventDefault();
+				closeInserterSidebar();
+			}
+		},
+		[ closeInserterSidebar ]
+	);
+
+	const inserterContents = (
+		<div className="editor-inserter-sidebar__content">
+			<PrivateInserterLibrary
+				showMostUsedBlocks={ showMostUsedBlocks }
+				showInserterHelpPanel
+				shouldFocusBlock={ isMobileViewport }
+				rootClientId={
+					blockSectionRootClientId ?? insertionPoint.rootClientId
+				}
+				__experimentalInsertionIndex={ insertionPoint.insertionIndex }
+				__experimentalInitialTab={ insertionPoint.tab }
+				__experimentalInitialCategory={ insertionPoint.category }
+				__experimentalFilterValue={ insertionPoint.filterValue }
+				onPatternCategorySelection={
+					sidebarIsOpened
+						? () => disableComplementaryArea( 'core' )
+						: undefined
+				}
+				ref={ libraryRef }
+				onClose={ closeInserterSidebar }
+			/>
+		</div>
+	);
+
+	if ( window.__experimentalEnableZoomedOutPatternsTab ) {
+		return (
+			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+			<div
+				onKeyDown={ closeOnEscape }
+				className="editor-inserter-sidebar"
+			>
+				{ inserterContents }
+			</div>
+		);
+	}
 	return (
 		<div
 			ref={ inserterDialogRef }
 			{ ...inserterDialogProps }
 			className="editor-inserter-sidebar"
 		>
-			<TagName className="editor-inserter-sidebar__header">
-				<Button
-					icon={ close }
-					label={ __( 'Close block inserter' ) }
-					onClick={ () => setIsInserterOpened( false ) }
-				/>
-			</TagName>
-			<div className="editor-inserter-sidebar__content">
-				<Library
-					showMostUsedBlocks={ showMostUsedBlocks }
-					showInserterHelpPanel
-					shouldFocusBlock={ isMobileViewport }
-					rootClientId={ insertionPoint.rootClientId }
-					__experimentalInsertionIndex={
-						insertionPoint.insertionIndex
-					}
-					__experimentalFilterValue={ insertionPoint.filterValue }
-					__experimentalOnPatternCategorySelection={
-						isRightSidebarOpen ? closeGeneralSidebar : undefined
-					}
-					ref={ libraryRef }
-				/>
-			</div>
+			{ inserterContents }
 		</div>
 	);
 }
diff --git a/packages/editor/src/components/inserter-sidebar/style.scss b/packages/editor/src/components/inserter-sidebar/style.scss
index 817c8e4d32814..796bdebe221a6 100644
--- a/packages/editor/src/components/inserter-sidebar/style.scss
+++ b/packages/editor/src/components/inserter-sidebar/style.scss
@@ -6,16 +6,10 @@
 	flex-direction: column;
 }
 
-.editor-inserter-sidebar__header {
-	padding-top: $grid-unit-10;
-	padding-right: $grid-unit-10;
-	display: flex;
-	justify-content: flex-end;
-}
-
 .editor-inserter-sidebar__content {
 	// Leave space for the close button
 	height: calc(100% - #{$button-size} - #{$grid-unit-10});
+
 	@include break-medium() {
 		height: 100%;
 	}
diff --git a/packages/editor/src/components/keyboard-shortcut-help-modal/index.js b/packages/editor/src/components/keyboard-shortcut-help-modal/index.js
index ca7861bf54697..81a821c778383 100644
--- a/packages/editor/src/components/keyboard-shortcut-help-modal/index.js
+++ b/packages/editor/src/components/keyboard-shortcut-help-modal/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -52,7 +52,7 @@ const ShortcutList = ( { shortcuts } ) => (
 
 const ShortcutSection = ( { title, shortcuts, className } ) => (
 	<section
-		className={ classnames(
+		className={ clsx(
 			'editor-keyboard-shortcut-help-modal__section',
 			className
 		) }
diff --git a/packages/editor/src/components/list-view-sidebar/style.scss b/packages/editor/src/components/list-view-sidebar/style.scss
index 18cd5014c9456..973defca41f1c 100644
--- a/packages/editor/src/components/list-view-sidebar/style.scss
+++ b/packages/editor/src/components/list-view-sidebar/style.scss
@@ -14,6 +14,7 @@
 	}
 	.editor-list-view-sidebar__close-button {
 		background: $white;
+		/* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/59013 is fixed. */
 		order: 1;
 		align-self: center;
 		margin-right: $grid-unit-15;
diff --git a/packages/editor/src/components/local-autosave-monitor/index.js b/packages/editor/src/components/local-autosave-monitor/index.js
index 185497710f35f..f999cf9ef8534 100644
--- a/packages/editor/src/components/local-autosave-monitor/index.js
+++ b/packages/editor/src/components/local-autosave-monitor/index.js
@@ -192,4 +192,16 @@ function LocalAutosaveMonitor() {
 	);
 }
 
+/**
+ * Monitors local autosaves of a post in the editor.
+ * It uses several hooks and functions to manage autosave behavior:
+ * - `useAutosaveNotice` hook: Manages the creation of a notice prompting the user to restore a local autosave, if one exists.
+ * - `useAutosavePurge` hook: Ejects a local autosave after a successful save occurs.
+ * - `hasSessionStorageSupport` function: Checks if the current environment supports browser sessionStorage.
+ * - `LocalAutosaveMonitor` component: Uses the `AutosaveMonitor` component to perform autosaves at a specified interval.
+ *
+ * The module also checks for sessionStorage support and conditionally exports the `LocalAutosaveMonitor` component based on that.
+ *
+ * @module LocalAutosaveMonitor
+ */
 export default ifCondition( hasSessionStorageSupport )( LocalAutosaveMonitor );
diff --git a/packages/editor/src/components/media-categories/index.js b/packages/editor/src/components/media-categories/index.js
index 345f5c5c86e2c..be1b2bdc2d672 100644
--- a/packages/editor/src/components/media-categories/index.js
+++ b/packages/editor/src/components/media-categories/index.js
@@ -191,9 +191,7 @@ const inserterMediaCategories = [
 				per_page: 'page_size',
 				search: 'q',
 			};
-			const url = new URL(
-				'https://api.openverse.engineering/v1/images/'
-			);
+			const url = new URL( 'https://api.openverse.org/v1/images/' );
 			Object.entries( finalQuery ).forEach( ( [ key, value ] ) => {
 				const queryKey = mapFromInserterMediaRequest[ key ] || key;
 				url.searchParams.set( queryKey, value );
diff --git a/packages/editor/src/components/page-attributes/order.js b/packages/editor/src/components/page-attributes/order.js
index d8a22f0cc949f..17746ca8237d6 100644
--- a/packages/editor/src/components/page-attributes/order.js
+++ b/packages/editor/src/components/page-attributes/order.js
@@ -1,18 +1,22 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
+	Button,
+	Dropdown,
 	Flex,
 	FlexBlock,
 	__experimentalNumberControl as NumberControl,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
+import PostPanelRow from '../post-panel-row';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 
@@ -41,9 +45,10 @@ function PageAttributesOrder() {
 				<NumberControl
 					__next40pxDefaultSize
 					label={ __( 'Order' ) }
+					help={ __( 'Set the page order.' ) }
 					value={ value }
 					onChange={ setUpdatedOrder }
-					labelPosition="side"
+					hideLabelFromVision
 					onBlur={ () => {
 						setOrderInput( null );
 					} }
@@ -66,3 +71,74 @@ export default function PageAttributesOrderWithChecks() {
 		</PostTypeSupportCheck>
 	);
 }
+
+function PostOrderToggle( { isOpen, onClick } ) {
+	const order = useSelect(
+		( select ) =>
+			select( editorStore ).getEditedPostAttribute( 'menu_order' ) ?? 0,
+		[]
+	);
+	return (
+		<Button
+			size="compact"
+			className="editor-post-order__panel-toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			// translators: %s: Current post parent.
+			aria-label={ sprintf( __( 'Change order: %s' ), order ) }
+			onClick={ onClick }
+		>
+			{ order }
+		</Button>
+	);
+}
+
+export function OrderRow() {
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+	return (
+		<PostPanelRow label={ __( 'Order' ) } ref={ setPopoverAnchor }>
+			<Dropdown
+				popoverProps={ popoverProps }
+				className="editor-post-order__panel-dropdown"
+				contentClassName="editor-post-order__panel-dialog"
+				focusOnMount
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<PostOrderToggle isOpen={ isOpen } onClick={ onToggle } />
+				) }
+				renderContent={ ( { onClose } ) => (
+					<div className="editor-post-order">
+						<InspectorPopoverHeader
+							title={ __( 'Order' ) }
+							onClose={ onClose }
+						/>
+						<div>
+							{ __(
+								'This attribute determines the order of pages in the Pages List block.'
+							) }
+							<p>
+								{ __(
+									'Pages with the same order value will sorted alphabetically. Negative order values are also supported.'
+								) }
+							</p>
+						</div>
+						<PageAttributesOrder />
+					</div>
+				) }
+			/>
+		</PostPanelRow>
+	);
+}
diff --git a/packages/editor/src/components/page-attributes/panel.js b/packages/editor/src/components/page-attributes/panel.js
index 5fb2638b51731..69bbf96206547 100644
--- a/packages/editor/src/components/page-attributes/panel.js
+++ b/packages/editor/src/components/page-attributes/panel.js
@@ -1,54 +1,38 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { PanelBody, PanelRow } from '@wordpress/components';
-
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 import PageAttributesCheck from './check';
-import PageAttributesOrder from './order';
-import PageAttributesParent from './parent';
+import { OrderRow } from './order';
+import { ParentRow } from './parent';
 
 const PANEL_NAME = 'page-attributes';
 
 function AttributesPanel() {
-	const { isEnabled, isOpened, postType } = useSelect( ( select ) => {
-		const {
-			getEditedPostAttribute,
-			isEditorPanelEnabled,
-			isEditorPanelOpened,
-		} = select( editorStore );
+	const { isEnabled, postType } = useSelect( ( select ) => {
+		const { getEditedPostAttribute, isEditorPanelEnabled } =
+			select( editorStore );
 		const { getPostType } = select( coreStore );
 		return {
 			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
-			isOpened: isEditorPanelOpened( PANEL_NAME ),
 			postType: getPostType( getEditedPostAttribute( 'type' ) ),
 		};
 	}, [] );
 
-	const { toggleEditorPanelOpened } = useDispatch( editorStore );
-
 	if ( ! isEnabled || ! postType ) {
 		return null;
 	}
 
 	return (
-		<PanelBody
-			title={ postType?.labels?.attributes ?? __( 'Page attributes' ) }
-			opened={ isOpened }
-			onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
-		>
-			<PageAttributesParent />
-			<PanelRow>
-				<PageAttributesOrder />
-			</PanelRow>
-		</PanelBody>
+		<>
+			<ParentRow />
+			<OrderRow />
+		</>
 	);
 }
 
diff --git a/packages/editor/src/components/page-attributes/parent.js b/packages/editor/src/components/page-attributes/parent.js
index 900f6f8a7c66b..ab52ca21a76ea 100644
--- a/packages/editor/src/components/page-attributes/parent.js
+++ b/packages/editor/src/components/page-attributes/parent.js
@@ -6,17 +6,24 @@ import removeAccents from 'remove-accents';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { ComboboxControl } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	Button,
+	Dropdown,
+	ComboboxControl,
+	ExternalLink,
+} from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { useState, useMemo } from '@wordpress/element';
 import { 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';
 
 /**
  * Internal dependencies
  */
+import PostPanelRow from '../post-panel-row';
 import { buildTermsTree } from '../../utils/terms';
 import { store as editorStore } from '../../store';
 
@@ -169,12 +176,101 @@ export function PageAttributesParent() {
 			__next40pxDefaultSize
 			className="editor-page-attributes__parent"
 			label={ __( 'Parent' ) }
+			help={ __( 'Choose a parent page.' ) }
 			value={ parentPostId }
 			options={ parentOptions }
 			onFilterValueChange={ debounce( handleKeydown, 300 ) }
 			onChange={ handleChange }
+			hideLabelFromVision
 		/>
 	);
 }
 
+function PostParentToggle( { isOpen, onClick } ) {
+	const parentPost = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const parentPostId = getEditedPostAttribute( 'parent' );
+		if ( ! parentPostId ) {
+			return null;
+		}
+		const { getEntityRecord } = select( coreStore );
+		const postTypeSlug = getEditedPostAttribute( 'type' );
+		return getEntityRecord( 'postType', postTypeSlug, parentPostId );
+	}, [] );
+	const parentTitle = useMemo(
+		() => ( ! parentPost ? __( 'None' ) : getTitle( parentPost ) ),
+		[ parentPost ]
+	);
+	return (
+		<Button
+			size="compact"
+			className="editor-post-parent__panel-toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			// translators: %s: Current post parent.
+			aria-label={ sprintf( __( 'Change parent: %s' ), parentTitle ) }
+			onClick={ onClick }
+		>
+			{ parentTitle }
+		</Button>
+	);
+}
+
+export function ParentRow() {
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+	return (
+		<PostPanelRow label={ __( 'Parent' ) } ref={ setPopoverAnchor }>
+			<Dropdown
+				popoverProps={ popoverProps }
+				className="editor-post-parent__panel-dropdown"
+				contentClassName="editor-post-parent__panel-dialog"
+				focusOnMount
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<PostParentToggle isOpen={ isOpen } onClick={ onToggle } />
+				) }
+				renderContent={ ( { onClose } ) => (
+					<div className="editor-post-parent">
+						<InspectorPopoverHeader
+							title={ __( 'Parent' ) }
+							onClose={ onClose }
+						/>
+						<div>
+							{ __(
+								"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 mysite.com/services/web-design."
+							) }
+							<p>
+								{ __(
+									'They also show up as sub-items in the default navigation menu. '
+								) }
+								<ExternalLink
+									href={ __(
+										'https://wordpress.org/documentation/article/page-post-settings-sidebar/#page-attributes'
+									) }
+								>
+									{ __( 'Learn more' ) }
+								</ExternalLink>
+							</p>
+						</div>
+						<PageAttributesParent />
+					</div>
+				) }
+			/>
+		</PostPanelRow>
+	);
+}
+
 export default PageAttributesParent;
diff --git a/packages/editor/src/components/page-attributes/style.scss b/packages/editor/src/components/page-attributes/style.scss
new file mode 100644
index 0000000000000..6563462a65bc2
--- /dev/null
+++ b/packages/editor/src/components/page-attributes/style.scss
@@ -0,0 +1,19 @@
+.editor-post-parent__panel,
+.editor-post-order__panel {
+	padding-top: $grid-unit-10;
+	.editor-post-panel__row-control > div {
+		width: 100%;
+	}
+}
+
+.editor-post-parent__panel-dialog,
+.editor-post-order__panel-dialog {
+	.editor-post-parent,
+	.editor-post-order {
+		margin: $grid-unit-10;
+	}
+
+	.components-popover__content {
+		min-width: 320px;
+	}
+}
diff --git a/packages/editor/src/components/page-attributes/test/order.js b/packages/editor/src/components/page-attributes/test/order.js
index 245cbbb8fc71d..fcb836bbfef0d 100644
--- a/packages/editor/src/components/page-attributes/test/order.js
+++ b/packages/editor/src/components/page-attributes/test/order.js
@@ -22,7 +22,11 @@ jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
 function setupDataMock( order = 0 ) {
 	useSelect.mockImplementation( ( mapSelect ) =>
 		mapSelect( () => ( {
-			getPostType: () => null,
+			getPostType: () => ( {
+				supports: {
+					'page-attributes': true,
+				},
+			} ),
 			getEditedPostAttribute: ( attr ) => {
 				switch ( attr ) {
 					case 'menu_order':
diff --git a/packages/editor/src/components/pattern-duplicate-modal/index.js b/packages/editor/src/components/pattern-duplicate-modal/index.js
new file mode 100644
index 0000000000000..2e5593536d183
--- /dev/null
+++ b/packages/editor/src/components/pattern-duplicate-modal/index.js
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+import { PATTERN_POST_TYPE } from '../../store/constants';
+
+const { DuplicatePatternModal } = unlock( patternsPrivateApis );
+export const modalName = 'editor/pattern-duplicate';
+
+export default function PatternDuplicateModal() {
+	const { record, postType } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const _postType = getCurrentPostType();
+		return {
+			record: getEditedEntityRecord(
+				'postType',
+				_postType,
+				getCurrentPostId()
+			),
+			postType: _postType,
+		};
+	}, [] );
+	const { closeModal } = useDispatch( interfaceStore );
+
+	const isActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive( modalName )
+	);
+
+	if ( ! isActive || postType !== PATTERN_POST_TYPE ) {
+		return null;
+	}
+
+	return (
+		<DuplicatePatternModal
+			onClose={ closeModal }
+			onSuccess={ () => closeModal() }
+			pattern={ record }
+		/>
+	);
+}
diff --git a/packages/editor/src/components/pattern-rename-modal/index.js b/packages/editor/src/components/pattern-rename-modal/index.js
new file mode 100644
index 0000000000000..ea9a46e977b24
--- /dev/null
+++ b/packages/editor/src/components/pattern-rename-modal/index.js
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+import { PATTERN_POST_TYPE } from '../../store/constants';
+
+const { RenamePatternModal } = unlock( patternsPrivateApis );
+export const modalName = 'editor/pattern-rename';
+
+export default function PatternRenameModal() {
+	const { record, postType } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const _postType = getCurrentPostType();
+		return {
+			record: getEditedEntityRecord(
+				'postType',
+				_postType,
+				getCurrentPostId()
+			),
+			postType: _postType,
+		};
+	}, [] );
+	const { closeModal } = useDispatch( interfaceStore );
+
+	const isActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive( modalName )
+	);
+
+	if ( ! isActive || postType !== PATTERN_POST_TYPE ) {
+		return null;
+	}
+
+	return <RenamePatternModal onClose={ closeModal } pattern={ record } />;
+}
diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
index 763b354010bf1..e12195e63c0df 100644
--- a/packages/editor/src/components/post-actions/actions.js
+++ b/packages/editor/src/components/post-actions/actions.js
@@ -1,14 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { external, trash, edit, backup } from '@wordpress/icons';
+import { external, trash, backup } from '@wordpress/icons';
 import { addQueryArgs } from '@wordpress/url';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } 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 {
 	Button,
@@ -21,10 +22,48 @@ import {
 /**
  * Internal dependencies
  */
-import { TEMPLATE_ORIGINS, TEMPLATE_POST_TYPE } from '../../store/constants';
+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 isTemplateRevertable from '../../store/utils/is-template-revertable';
+import { exportPatternAsJSONAction } from './export-pattern-action';
+import { CreateTemplatePartModalContents } from '../create-template-part-modal';
+
+// Patterns.
+const { PATTERN_TYPES, CreatePatternModalContents, useDuplicatePatternProps } =
+	unlock( patternsPrivateApis );
+
+/**
+ * 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.templatePart?.source ].includes(
+			TEMPLATE_ORIGINS.custom
+		) &&
+		! template.has_theme_file &&
+		! template.templatePart?.has_theme_file
+	);
+}
+const canDeleteOrReset = ( item ) => {
+	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
+	const isUserPattern = item.type === PATTERN_TYPES.user;
+	return isUserPattern || ( isTemplatePart && item.isCustom );
+};
 
 function getItemTitle( item ) {
 	if ( typeof item.title === 'string' ) {
@@ -33,56 +72,156 @@ function getItemTitle( item ) {
 	return decodeEntities( item.title?.rendered || '' );
 }
 
+// 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 = {
+	id: 'delete-post',
+	label: __( 'Delete' ),
+	isPrimary: true,
+	icon: trash,
+	isEligible( post ) {
+		if (
+			[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes(
+				post.type
+			)
+		) {
+			return isTemplateRemovable( post );
+		}
+		// We can only remove user patterns.
+		return post.type === PATTERN_TYPES.user;
+	},
+	supportsBulk: true,
+	hideModalHeader: true,
+	RenderModal: ( {
+		items,
+		closeModal,
+		onActionStart,
+		onActionPerformed,
+	} ) => {
+		const [ isBusy, setIsBusy ] = useState( false );
+		const { removeTemplates } = unlock( useDispatch( editorStore ) );
+		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 }
+						__experimentalIsFocusable
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						onClick={ async () => {
+							setIsBusy( true );
+							if ( onActionStart ) {
+								onActionStart( items );
+							}
+							await removeTemplates( items, {
+								allowUndo: false,
+							} );
+							onActionPerformed?.( items );
+							setIsBusy( false );
+							closeModal();
+						} }
+						isBusy={ isBusy }
+						disabled={ isBusy }
+						__experimentalIsFocusable
+					>
+						{ __( 'Delete' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		);
+	},
+};
+
 const trashPostAction = {
 	id: 'move-to-trash',
 	label: __( 'Move to Trash' ),
 	isPrimary: true,
 	icon: trash,
-	isEligible( { status } ) {
-		return status !== 'trash';
+	isEligible( item ) {
+		return ! [ 'auto-draft', 'trash' ].includes( item.status );
 	},
 	supportsBulk: true,
 	hideModalHeader: true,
-	RenderModal: ( { items: posts, closeModal, onActionPerformed } ) => {
+	RenderModal: ( {
+		items,
+		closeModal,
+		onActionStart,
+		onActionPerformed,
+	} ) => {
+		const [ isBusy, setIsBusy ] = useState( false );
 		const { createSuccessNotice, createErrorNotice } =
 			useDispatch( noticesStore );
 		const { deleteEntityRecord } = useDispatch( coreStore );
 		return (
 			<VStack spacing="5">
 				<Text>
-					{ posts.length === 1
+					{ items.length === 1
 						? sprintf(
-								// translators: %s: The page's title.
-								__( 'Are you sure you want to delete "%s"?' ),
-								getItemTitle( posts[ 0 ] )
+								// 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 pages (2 or more).
+								// translators: %d: The number of items (2 or more).
 								_n(
-									'Are you sure you want to delete %d page?',
-									'Are you sure you want to delete %d pages?',
-									posts.length
+									'Are you sure you want to move to trash %d item?',
+									'Are you sure you want to move to trash %d items?',
+									items.length
 								),
-								posts.length
+								items.length
 						  ) }
 				</Text>
 				<HStack justify="right">
-					<Button variant="tertiary" onClick={ closeModal }>
+					<Button
+						variant="tertiary"
+						onClick={ closeModal }
+						disabled={ isBusy }
+						__experimentalIsFocusable
+					>
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
 						variant="primary"
 						onClick={ async () => {
+							setIsBusy( true );
+							if ( onActionStart ) {
+								onActionStart( items );
+							}
 							const promiseResult = await Promise.allSettled(
-								posts.map( ( post ) => {
-									return deleteEntityRecord(
+								items.map( ( item ) =>
+									deleteEntityRecord(
 										'postType',
-										post.type,
-										post.id,
+										item.type,
+										item.id,
 										{},
 										{ throwOnError: true }
-									);
-								} )
+									)
+								)
 							);
 							// If all the promises were fulfilled with success.
 							if (
@@ -93,33 +232,41 @@ const trashPostAction = {
 								let successMessage;
 								if ( promiseResult.length === 1 ) {
 									successMessage = sprintf(
-										/* translators: The posts's title. */
-										__( '"%s" moved to the Trash.' ),
-										getItemTitle( posts[ 0 ] )
+										/* translators: The item's title. */
+										__( '"%s" moved to trash.' ),
+										getItemTitle( items[ 0 ] )
+									);
+								} else if ( items[ 0 ].type === 'page' ) {
+									successMessage = sprintf(
+										/* translators: The number of items. */
+										__( '%s items moved to trash.' ),
+										items.length
 									);
 								} else {
-									successMessage = __(
-										'Pages moved to the Trash.'
+									successMessage = sprintf(
+										/* translators: The number of posts. */
+										__( '%s items move to trash.' ),
+										items.length
 									);
 								}
 								createSuccessNotice( successMessage, {
 									type: 'snackbar',
-									id: 'trash-post-action',
+									id: 'move-to-trash-action',
 								} );
 							} else {
-								// If there was at lease one failure.
+								// If there was at least one failure.
 								let errorMessage;
-								// If we were trying to move a single post to the trash.
+								// 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 the post to the trash.'
+											'An error occurred while moving to trash the item.'
 										);
 									}
-									// If we were trying to move multiple posts to the trash
+									// If we were trying to delete multiple items.
 								} else {
 									const errorMessages = new Set();
 									const failedPromises = promiseResult.filter(
@@ -134,13 +281,13 @@ const trashPostAction = {
 									}
 									if ( errorMessages.size === 0 ) {
 										errorMessage = __(
-											'An error occurred while moving the posts to the trash.'
+											'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 the posts to the trash: %s'
+												'An error occurred while moving to trash the item: %s'
 											),
 											[ ...errorMessages ][ 0 ]
 										);
@@ -148,7 +295,7 @@ const trashPostAction = {
 										errorMessage = sprintf(
 											/* translators: %s: a list of comma separated error messages */
 											__(
-												'Some errors occurred while moving the pages to the trash: %s'
+												'Some errors occurred while moving to trash the items: %s'
 											),
 											[ ...errorMessages ].join( ',' )
 										);
@@ -159,12 +306,16 @@ const trashPostAction = {
 								} );
 							}
 							if ( onActionPerformed ) {
-								onActionPerformed( posts );
+								onActionPerformed( items );
 							}
+							setIsBusy( false );
 							closeModal();
 						} }
+						isBusy={ isBusy }
+						disabled={ isBusy }
+						__experimentalIsFocusable
 					>
-						{ __( 'Delete' ) }
+						{ __( 'Trash' ) }
 					</Button>
 				</HStack>
 			</VStack>
@@ -296,9 +447,9 @@ function useRestorePostAction() {
 				return status === 'trash';
 			},
 			async callback( posts, onActionPerformed ) {
-				try {
-					for ( const post of posts ) {
-						await editEntityRecord(
+				await Promise.allSettled(
+					posts.map( ( post ) => {
+						return editEntityRecord(
 							'postType',
 							post.type,
 							post.id,
@@ -306,53 +457,101 @@ function useRestorePostAction() {
 								status: 'draft',
 							}
 						);
-						await saveEditedEntityRecord(
+					} )
+				);
+				const promiseResult = await Promise.allSettled(
+					posts.map( ( post ) => {
+						return saveEditedEntityRecord(
 							'postType',
 							post.type,
 							post.id,
 							{ throwOnError: true }
 						);
-					}
+					} )
+				);
 
-					createSuccessNotice(
-						posts.length > 1
-							? sprintf(
-									/* translators: The number of posts. */
-									__( '%d posts have been restored.' ),
-									posts.length
-							  )
-							: sprintf(
-									/* translators: The number of posts. */
-									__( '"%s" has been restored.' ),
-									getItemTitle( posts[ 0 ] )
-							  ),
-						{
-							type: 'snackbar',
-							id: 'restore-post-action',
-						}
-					);
+				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 );
 					}
-				} catch ( error ) {
+				} else {
+					// If there was at lease one failure.
 					let errorMessage;
-					if (
-						error.message &&
-						error.code !== 'unknown_error' &&
-						error.message
-					) {
-						errorMessage = error.message;
-					} else if ( posts.length > 1 ) {
-						errorMessage = __(
-							'An error occurred while restoring the posts.'
-						);
+					// 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 {
-						errorMessage = __(
-							'An error occurred while restoring the post.'
+						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' } );
+					createErrorNotice( errorMessage, {
+						type: 'snackbar',
+					} );
 				}
 			},
 		} ),
@@ -382,24 +581,17 @@ const viewPostAction = {
 	},
 };
 
-const editPostAction = {
-	id: 'edit-post',
-	label: __( 'Edit' ),
-	isPrimary: true,
-	icon: edit,
-	isEligible( { status } ) {
-		return status !== 'trash';
-	},
-	callback( posts, onActionPerformed ) {
-		if ( onActionPerformed ) {
-			onActionPerformed( posts );
-		}
-	},
-};
 const postRevisionsAction = {
 	id: 'view-post-revisions',
-	label: __( 'View revisions' ),
-	isPrimary: false,
+	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;
@@ -426,7 +618,37 @@ const renamePostAction = {
 	id: 'rename-post',
 	label: __( 'Rename' ),
 	isEligible( post ) {
-		return post.status !== 'trash';
+		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.isCustom || post.source === TEMPLATE_ORIGINS.custom ) );
+		const hasThemeFile =
+			isTemplatePart &&
+			( post.templatePart?.has_theme_file || post.has_theme_file );
+		return isCustomPattern && ! hasThemeFile;
 	},
 	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
 		const [ item ] = items;
@@ -500,7 +722,7 @@ const renamePostAction = {
 	},
 };
 
-export const duplicatePostAction = {
+const duplicatePostAction = {
 	id: 'duplicate-post',
 	label: _x( 'Duplicate', 'action label' ),
 	isEligible( { status } ) {
@@ -614,47 +836,73 @@ export const duplicatePostAction = {
 	},
 };
 
+const isTemplatePartRevertable = ( item ) => {
+	if ( ! item ) {
+		return false;
+	}
+	const hasThemeFile = item.templatePart?.has_theme_file;
+	return canDeleteOrReset( item ) && hasThemeFile;
+};
+
 const resetTemplateAction = {
 	id: 'reset-template',
 	label: __( 'Reset' ),
-	isEligible: isTemplateRevertable,
+	isEligible: ( item ) => {
+		return item.type === TEMPLATE_PART_POST_TYPE
+			? isTemplatePartRevertable( item )
+			: isTemplateRevertable( item );
+	},
+	icon: backup,
 	supportsBulk: true,
 	hideModalHeader: true,
-	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
-		const { revertTemplate } = unlock( useDispatch( editorStore ) );
+	RenderModal: ( {
+		items,
+		closeModal,
+		onActionStart,
+		onActionPerformed,
+	} ) => {
+		const [ isBusy, setIsBusy ] = useState( false );
+		const { revertTemplate, removeTemplates } = unlock(
+			useDispatch( editorStore )
+		);
 		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
+				if ( items[ 0 ].type === TEMPLATE_PART_POST_TYPE ) {
+					await removeTemplates( items );
+				} else {
+					for ( const template of items ) {
+						if ( template.type === TEMPLATE_POST_TYPE ) {
+							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.' ),
+									decodeEntities( getItemTitle( items[ 0 ] ) )
+							  ),
+						{
+							type: 'snackbar',
+							id: 'revert-template-action',
+						}
 					);
 				}
-
-				createSuccessNotice(
-					items.length > 1
-						? sprintf(
-								/* translators: The number of items. */
-								__( '%s items reset.' ),
-								items.length
-						  )
-						: sprintf(
-								/* translators: The template/part's name. */
-								__( '"%s" reset.' ),
-								decodeEntities( items[ 0 ].title.rendered )
-						  ),
-					{
-						type: 'snackbar',
-						id: 'revert-template-action',
-					}
-				);
 			} catch ( error ) {
 				let fallbackErrorMessage;
 				if ( items[ 0 ].type === TEMPLATE_POST_TYPE ) {
@@ -690,16 +938,29 @@ const resetTemplateAction = {
 					{ __( 'Reset to default and clear all customizations?' ) }
 				</Text>
 				<HStack justify="right">
-					<Button variant="tertiary" onClick={ closeModal }>
+					<Button
+						variant="tertiary"
+						onClick={ closeModal }
+						disabled={ isBusy }
+						__experimentalIsFocusable
+					>
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
 						variant="primary"
 						onClick={ async () => {
+							setIsBusy( true );
+							if ( onActionStart ) {
+								onActionStart( items );
+							}
 							await onConfirm( items );
 							onActionPerformed?.( items );
+							setIsBusy( false );
 							closeModal();
 						} }
+						isBusy={ isBusy }
+						disabled={ isBusy }
+						__experimentalIsFocusable
 					>
 						{ __( 'Reset' ) }
 					</Button>
@@ -709,269 +970,159 @@ const resetTemplateAction = {
 	},
 };
 
-/**
- * Check if a template is removable.
- * Copy from packages/edit-site/src/utils/is-template-removable.js.
- *
- * @param {Object} template The template entity to check.
- * @return {boolean} Whether the template is revertable.
- */
-function isTemplateRemovable( template ) {
-	if ( ! template ) {
-		return false;
-	}
-
-	return (
-		template.source === TEMPLATE_ORIGINS.custom && ! template.has_theme_file
-	);
-}
-
-const deleteTemplateAction = {
-	id: 'delete-template',
-	label: __( 'Delete' ),
-	isEligible: isTemplateRemovable,
-	supportsBulk: true,
-	hideModalHeader: true,
-	RenderModal: ( { items: templates, closeModal, onActionPerformed } ) => {
-		const { removeTemplates } = unlock( useDispatch( editorStore ) );
+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 isThemePattern = item.type === PATTERN_TYPES.theme;
+		const duplicatedProps = useDuplicatePatternProps( {
+			pattern:
+				isThemePattern || ! item.patternPost ? item : item.patternPost,
+			onSuccess: () => closeModal(),
+		} );
 		return (
-			<VStack spacing="5">
-				<Text>
-					{ templates.length > 1
-						? sprintf(
-								// translators: %d: number of items to delete.
-								_n(
-									'Delete %d item?',
-									'Delete %d items?',
-									templates.length
-								),
-								templates.length
-						  )
-						: sprintf(
-								// translators: %s: The template or template part's titles
-								__( 'Delete "%s"?' ),
-								decodeEntities(
-									templates?.[ 0 ]?.title?.rendered
-								)
-						  ) }
-				</Text>
-				<HStack justify="right">
-					<Button variant="tertiary" onClick={ closeModal }>
-						{ __( 'Cancel' ) }
-					</Button>
-					<Button
-						variant="primary"
-						onClick={ async () => {
-							await removeTemplates( templates, {
-								allowUndo: false,
-							} );
-							onActionPerformed?.( templates );
-							closeModal();
-						} }
-					>
-						{ __( 'Delete' ) }
-					</Button>
-				</HStack>
-			</VStack>
+			<CreatePatternModalContents
+				onClose={ closeModal }
+				confirmLabel={ _x( 'Duplicate', 'action label' ) }
+				{ ...duplicatedProps }
+			/>
 		);
 	},
 };
 
-const renameTemplateAction = {
-	id: 'rename-template',
-	label: __( 'Rename' ),
-	isEligible: ( template ) => {
-		// We can only remove templates or template parts that can be removed.
-		// Additionally in the case of templates, we can only remove custom templates.
-		if (
-			! isTemplateRemovable( template ) ||
-			( template.type === TEMPLATE_POST_TYPE && ! template.is_custom )
-		) {
-			return false;
-		}
-		return true;
-	},
-	RenderModal: ( { items: templates, closeModal, onActionPerformed } ) => {
-		const template = templates[ 0 ];
-		const title = decodeEntities( template.title.rendered );
-		const [ editedTitle, setEditedTitle ] = useState( title );
-		const {
-			editEntityRecord,
-			__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
-		} = useDispatch( coreStore );
-		const { createSuccessNotice, createErrorNotice } =
-			useDispatch( noticesStore );
-		async function onTemplateRename( event ) {
-			event.preventDefault();
-			try {
-				await editEntityRecord(
-					'postType',
-					template.type,
-					template.id,
-					{
-						title: editedTitle,
-					}
-				);
-				// Update state before saving rerenders the list.
-				setEditedTitle( '' );
-				closeModal();
-				// Persist edited entity.
-				await saveSpecifiedEntityEdits(
-					'postType',
-					template.type,
-					template.id,
-					[ 'title' ], // Only save title to avoid persisting other edits.
-					{
-						throwOnError: true,
-					}
-				);
-				createSuccessNotice(
-					template.type === TEMPLATE_POST_TYPE
-						? __( 'Template renamed.' )
-						: __( 'Template part renamed.' ),
-					{
-						type: 'snackbar',
-					}
-				);
-				onActionPerformed?.( templates );
-			} catch ( error ) {
-				const fallbackErrorMessage =
-					template.type === TEMPLATE_POST_TYPE
-						? __( 'An error occurred while renaming the template.' )
-						: __(
-								'An error occurred while renaming the template part.'
-						  );
-				const errorMessage =
-					error.message && error.code !== 'unknown_error'
-						? error.message
-						: fallbackErrorMessage;
-
-				createErrorNotice( errorMessage, { type: 'snackbar' } );
-			}
+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 { createSuccessNotice } = useDispatch( noticesStore );
+		function onTemplatePartSuccess() {
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
+					__( '"%s" duplicated.' ),
+					item.title
+				),
+				{ type: 'snackbar', id: 'edit-site-patterns-success' }
+			);
+			closeModal();
 		}
 		return (
-			<form onSubmit={ onTemplateRename }>
-				<VStack spacing="5">
-					<TextControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						label={ __( 'Name' ) }
-						value={ editedTitle }
-						onChange={ setEditedTitle }
-						required
-					/>
-					<HStack justify="right">
-						<Button
-							variant="tertiary"
-							onClick={ closeModal }
-							__next40pxDefaultSize
-						>
-							{ __( 'Cancel' ) }
-						</Button>
-						<Button
-							variant="primary"
-							type="submit"
-							__next40pxDefaultSize
-						>
-							{ __( 'Save' ) }
-						</Button>
-					</HStack>
-				</VStack>
-			</form>
+			<CreateTemplatePartModalContents
+				blocks={ item.blocks }
+				defaultArea={ item.templatePart?.area || item.area }
+				defaultTitle={ sprintf(
+					/* translators: %s: Existing template part title */
+					__( '%s (Copy)' ),
+					item.title
+				) }
+				onCreate={ onTemplatePartSuccess }
+				onError={ closeModal }
+				confirmLabel={ _x( 'Duplicate', 'action label' ) }
+			/>
 		);
 	},
 };
 
-export function usePostActions( onActionPerformed, actionIds = null ) {
+export function usePostActions( postType, onActionPerformed ) {
+	const { postTypeObject } = useSelect(
+		( select ) => {
+			const { getPostType } = select( coreStore );
+			return {
+				postTypeObject: getPostType( postType ),
+			};
+		},
+		[ postType ]
+	);
+
 	const permanentlyDeletePostAction = usePermanentlyDeletePostAction();
 	const restorePostAction = useRestorePostAction();
-	return useMemo(
-		() => {
-			// By default, return all actions...
-			const defaultActions = [
-				editPostAction,
-				resetTemplateAction,
-				viewPostAction,
-				restorePostAction,
-				deleteTemplateAction,
-				permanentlyDeletePostAction,
-				postRevisionsAction,
-				duplicatePostAction,
-				renamePostAction,
-				renameTemplateAction,
-				trashPostAction,
-			];
-
-			// ... unless `actionIds` was specified, in which case we find the
-			// actions matching the given IDs.
-			const actions = actionIds
-				? actionIds.map( ( actionId ) =>
-						defaultActions.find( ( { id } ) => actionId === id )
-				  )
-				: defaultActions;
-
-			if ( onActionPerformed ) {
-				for ( let i = 0; i < actions.length; ++i ) {
-					if ( actions[ i ].callback ) {
-						const existingCallback = actions[ i ].callback;
-						actions[ i ] = {
-							...actions[ i ],
-							callback: ( items, _onActionPerformed ) => {
-								existingCallback( items, ( _items ) => {
-									if ( _onActionPerformed ) {
-										_onActionPerformed( _items );
-									}
-									onActionPerformed(
-										actions[ i ].id,
-										_items
-									);
-								} );
-							},
-						};
-					}
-					if ( actions[ i ].RenderModal ) {
-						const ExistingRenderModal = actions[ i ].RenderModal;
-						actions[ i ] = {
-							...actions[ i ],
-							RenderModal: ( props ) => {
-								return (
-									<ExistingRenderModal
-										items={ props.items }
-										closeModal={ props.closeModal }
-										onActionPerformed={ ( _items ) => {
-											if ( props.onActionPerformed ) {
-												props.onActionPerformed(
-													_items
-												);
-											}
-											onActionPerformed(
-												actions[ i ].id,
-												_items
-											);
-										} }
-									/>
-								);
-							},
-						};
-					}
+	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;
+	return useMemo( () => {
+		if ( ! isLoaded ) {
+			return [];
+		}
+
+		const actions = [
+			postTypeObject?.viewable && viewPostAction,
+			supportsRevisions && postRevisionsAction,
+			globalThis.IS_GUTENBERG_PLUGIN
+				? ! isTemplateOrTemplatePart &&
+				  ! isPattern &&
+				  duplicatePostAction
+				: false,
+			isTemplateOrTemplatePart && duplicateTemplatePartAction,
+			isPattern && duplicatePatternAction,
+			renamePostAction,
+			isPattern && exportPatternAsJSONAction,
+			isTemplateOrTemplatePart ? resetTemplateAction : restorePostAction,
+			isTemplateOrTemplatePart || isPattern
+				? deletePostAction
+				: trashPostAction,
+			! isTemplateOrTemplatePart && permanentlyDeletePostAction,
+		].filter( Boolean );
+
+		if ( onActionPerformed ) {
+			for ( let i = 0; i < actions.length; ++i ) {
+				if ( actions[ i ].callback ) {
+					const existingCallback = actions[ i ].callback;
+					actions[ i ] = {
+						...actions[ i ],
+						callback: ( items, _onActionPerformed ) => {
+							existingCallback( items, ( _items ) => {
+								if ( _onActionPerformed ) {
+									_onActionPerformed( _items );
+								}
+								onActionPerformed( actions[ i ].id, _items );
+							} );
+						},
+					};
+				}
+				if ( actions[ i ].RenderModal ) {
+					const ExistingRenderModal = actions[ i ].RenderModal;
+					actions[ i ] = {
+						...actions[ i ],
+						RenderModal: ( props ) => {
+							return (
+								<ExistingRenderModal
+									{ ...props }
+									onActionPerformed={ ( _items ) => {
+										if ( props.onActionPerformed ) {
+											props.onActionPerformed( _items );
+										}
+										onActionPerformed(
+											actions[ i ].id,
+											_items
+										);
+									} }
+								/>
+							);
+						},
+					};
 				}
 			}
-			return actions;
-		},
+		}
 
-		// Disable reason: if provided, `actionIds` is a shallow array of
-		// strings, and the strings themselves should be part of the useMemo
-		// dependencies. Two different disable statements are needed, as the
-		// first flags what it thinks are missing dependencies, and the second
-		// flags the array spread operation.
-		//
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[
-			// eslint-disable-next-line react-hooks/exhaustive-deps
-			...( actionIds || [] ),
-			permanentlyDeletePostAction,
-			restorePostAction,
-			onActionPerformed,
-		]
-	);
+		return actions;
+	}, [
+		isTemplateOrTemplatePart,
+		isPattern,
+		postTypeObject?.viewable,
+		permanentlyDeletePostAction,
+		restorePostAction,
+		onActionPerformed,
+		isLoaded,
+		supportsRevisions,
+	] );
 }
diff --git a/packages/editor/src/components/post-actions/export-pattern-action.js b/packages/editor/src/components/post-actions/export-pattern-action.js
new file mode 100644
index 0000000000000..deeac4314f653
--- /dev/null
+++ b/packages/editor/src/components/post-actions/export-pattern-action.js
@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import { paramCase as kebabCase } from 'change-case';
+import { downloadZip } from 'client-zip';
+
+/**
+ * WordPress dependencies
+ */
+import { downloadBlob } from '@wordpress/blob';
+import { __ } from '@wordpress/i18n';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+// Patterns.
+const { PATTERN_TYPES } = unlock( patternsPrivateApis );
+
+function getJsonFromItem( item ) {
+	return JSON.stringify(
+		{
+			__file: item.type,
+			title: item.title || item.name,
+			content: item.patternPost.content.raw,
+			syncStatus: item.patternPost.wp_pattern_sync_status,
+		},
+		null,
+		2
+	);
+}
+
+export const exportPatternAsJSONAction = {
+	id: 'export-pattern',
+	label: __( 'Export as JSON' ),
+	supportsBulk: true,
+	isEligible: ( item ) => {
+		if ( ! item.type ) {
+			return false;
+		}
+		return item.type === PATTERN_TYPES.user;
+	},
+	callback: async ( items ) => {
+		if ( items.length === 1 ) {
+			return downloadBlob(
+				`${ kebabCase( items[ 0 ].title || items[ 0 ].name ) }.json`,
+				getJsonFromItem( items[ 0 ] ),
+				'application/json'
+			);
+		}
+		const nameCount = {};
+		const filesToZip = items.map( ( item ) => {
+			const name = kebabCase( item.title || item.name );
+			nameCount[ name ] = ( nameCount[ name ] || 0 ) + 1;
+			return {
+				name: `${
+					name +
+					( nameCount[ name ] > 1
+						? '-' + ( nameCount[ name ] - 1 )
+						: '' )
+				}.json`,
+				lastModified: new Date(),
+				input: getJsonFromItem( item ),
+			};
+		} );
+		return downloadBlob(
+			__( 'patterns-export' ) + '.zip',
+			await downloadZip( filesToZip ).blob(),
+			'application/zip'
+		);
+	},
+};
diff --git a/packages/editor/src/components/post-actions/export-pattern-action.native.js b/packages/editor/src/components/post-actions/export-pattern-action.native.js
new file mode 100644
index 0000000000000..b09f5a034a552
--- /dev/null
+++ b/packages/editor/src/components/post-actions/export-pattern-action.native.js
@@ -0,0 +1,4 @@
+// Client-zip is meant to be used in a browser and is therefore released as an ES6 module only,
+// in order for the native build to succeed we are importing a null action and avoiding importing
+// the non working in native context client-zip module.
+export const exportPatternAsJSONAction = null;
diff --git a/packages/editor/src/components/post-actions/index.js b/packages/editor/src/components/post-actions/index.js
index 24d74c3f0d97f..ad6ccd5518296 100644
--- a/packages/editor/src/components/post-actions/index.js
+++ b/packages/editor/src/components/post-actions/index.js
@@ -10,6 +10,7 @@ import {
 	Modal,
 } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -17,11 +18,6 @@ import { moreVertical } from '@wordpress/icons';
 import { unlock } from '../../lock-unlock';
 import { usePostActions } from './actions';
 import { store as editorStore } from '../../store';
-import {
-	TEMPLATE_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-	PATTERN_POST_TYPE,
-} from '../../store/constants';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -31,36 +27,22 @@ const {
 	kebabCase,
 } = unlock( componentsPrivateApis );
 
-let POST_ACTIONS_WHILE_EDITING = [
-	'view-post',
-	'view-post-revisions',
-	'rename-post',
-	'move-to-trash',
-];
-
-if ( process.env.IS_GUTENBERG_PLUGIN ) {
-	POST_ACTIONS_WHILE_EDITING = [
-		'view-post',
-		'view-post-revisions',
-		'duplicate-post',
-		'rename-post',
-		'move-to-trash',
-	];
-}
-
 export default function PostActions( { onActionPerformed, buttonProps } ) {
 	const [ isActionsMenuOpen, setIsActionsMenuOpen ] = useState( false );
-	const { postType, item } = useSelect( ( select ) => {
-		const { getCurrentPostType, getCurrentPost } = select( editorStore );
+	const { item, postType } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const _postType = getCurrentPostType();
 		return {
-			postType: getCurrentPostType(),
-			item: getCurrentPost(),
+			item: getEditedEntityRecord(
+				'postType',
+				_postType,
+				getCurrentPostId()
+			),
+			postType: _postType,
 		};
-	} );
-	const allActions = usePostActions(
-		onActionPerformed,
-		POST_ACTIONS_WHILE_EDITING
-	);
+	}, [] );
+	const allActions = usePostActions( postType, onActionPerformed );
 
 	const actions = useMemo( () => {
 		return allActions.filter( ( action ) => {
@@ -68,15 +50,6 @@ export default function PostActions( { onActionPerformed, buttonProps } ) {
 		} );
 	}, [ allActions, item ] );
 
-	if (
-		[
-			TEMPLATE_POST_TYPE,
-			TEMPLATE_PART_POST_TYPE,
-			PATTERN_POST_TYPE,
-		].includes( postType )
-	) {
-		return null;
-	}
 	return (
 		<DropdownMenu
 			open={ isActionsMenuOpen }
@@ -86,6 +59,7 @@ export default function PostActions( { onActionPerformed, buttonProps } ) {
 					icon={ moreVertical }
 					label={ __( 'Actions' ) }
 					disabled={ ! actions.length }
+					__experimentalIsFocusable
 					className="editor-all-actions-button"
 					onClick={ () =>
 						setIsActionsMenuOpen( ! isActionsMenuOpen )
@@ -113,13 +87,15 @@ export default function PostActions( { onActionPerformed, buttonProps } ) {
 // so duplicating the code here seems like the least bad option.
 
 // Copied as is from packages/dataviews/src/item-actions.js
-function DropdownMenuItemTrigger( { action, onClick } ) {
+function DropdownMenuItemTrigger( { action, onClick, items } ) {
+	const label =
+		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
 		<DropdownMenuItem
 			onClick={ onClick }
 			hideOnClick={ ! action.RenderModal }
 		>
-			<DropdownMenuItemLabel>{ action.label }</DropdownMenuItemLabel>
+			<DropdownMenuItemLabel>{ label }</DropdownMenuItemLabel>
 		</DropdownMenuItem>
 	);
 }
@@ -131,6 +107,7 @@ function ActionWithModal( { action, item, ActionTrigger, onClose } ) {
 	const actionTriggerProps = {
 		action,
 		onClick: () => setIsModalOpen( true ),
+		items: [ item ],
 	};
 	const { RenderModal, hideModalHeader } = action;
 	return (
@@ -182,6 +159,7 @@ function ActionsDropdownMenuGroup( { actions, item, onClose } ) {
 						key={ action.id }
 						action={ action }
 						onClick={ () => action.callback( [ item ] ) }
+						items={ [ item ] }
 					/>
 				);
 			} ) }
diff --git a/packages/editor/src/components/post-author/combobox.js b/packages/editor/src/components/post-author/combobox.js
index 0ba74b072d395..867eca7947976 100644
--- a/packages/editor/src/components/post-author/combobox.js
+++ b/packages/editor/src/components/post-author/combobox.js
@@ -50,6 +50,7 @@ export default function PostAuthorCombobox() {
 			onFilterValueChange={ debounce( handleKeydown, 300 ) }
 			onChange={ handleSelect }
 			allowReset={ false }
+			hideLabelFromVision
 		/>
 	);
 }
diff --git a/packages/editor/src/components/post-author/hook.js b/packages/editor/src/components/post-author/hook.js
index 9189736f21502..116c354669ca8 100644
--- a/packages/editor/src/components/post-author/hook.js
+++ b/packages/editor/src/components/post-author/hook.js
@@ -59,5 +59,5 @@ export function useAuthorsQuery( search ) {
 		return fetchedAuthors;
 	}, [ authors, postAuthor ] );
 
-	return { authorId, authorOptions };
+	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 ad2aa01dee3ab..5c162cfa50377 100644
--- a/packages/editor/src/components/post-author/panel.js
+++ b/packages/editor/src/components/post-author/panel.js
@@ -1,9 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Button, Dropdown } from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+
 /**
  * Internal dependencies
  */
 import PostAuthorCheck from './check';
 import PostAuthorForm from './index';
 import PostPanelRow from '../post-panel-row';
+import { useAuthorsQuery } from './hook';
+
+function PostAuthorToggle( { isOpen, onClick } ) {
+	const { postAuthor } = useAuthorsQuery();
+	const authorName = postAuthor?.name || '';
+	return (
+		<Button
+			size="compact"
+			className="editor-post-author__panel-toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			// translators: %s: Current post link.
+			aria-label={ sprintf( __( 'Change author: %s' ), authorName ) }
+			onClick={ onClick }
+		>
+			{ authorName }
+		</Button>
+	);
+}
 
 /**
  * Renders the Post Author Panel component.
@@ -11,10 +38,44 @@ import PostPanelRow from '../post-panel-row';
  * @return {Component} The component to be rendered.
  */
 export function PostAuthor() {
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
 	return (
 		<PostAuthorCheck>
-			<PostPanelRow className="editor-post-author__panel">
-				<PostAuthorForm />
+			<PostPanelRow label={ __( 'Author' ) } ref={ setPopoverAnchor }>
+				<Dropdown
+					popoverProps={ popoverProps }
+					contentClassName="editor-post-author__panel-dialog"
+					focusOnMount
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<PostAuthorToggle
+							isOpen={ isOpen }
+							onClick={ onToggle }
+						/>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<div className="editor-post-author">
+							<InspectorPopoverHeader
+								title={ __( 'Author' ) }
+								onClose={ onClose }
+							/>
+							<PostAuthorForm onClose={ onClose } />
+						</div>
+					) }
+				/>
 			</PostPanelRow>
 		</PostAuthorCheck>
 	);
diff --git a/packages/editor/src/components/post-author/select.js b/packages/editor/src/components/post-author/select.js
index 03bb9be23060f..e51cc288cc453 100644
--- a/packages/editor/src/components/post-author/select.js
+++ b/packages/editor/src/components/post-author/select.js
@@ -29,6 +29,7 @@ export default function PostAuthorSelect() {
 			options={ authorOptions }
 			onChange={ setAuthorId }
 			value={ authorId }
+			hideLabelFromVision
 		/>
 	);
 }
diff --git a/packages/editor/src/components/post-author/style.scss b/packages/editor/src/components/post-author/style.scss
index 349ad712334c8..548f781241b0a 100644
--- a/packages/editor/src/components/post-author/style.scss
+++ b/packages/editor/src/components/post-author/style.scss
@@ -5,3 +5,9 @@
 .editor-post-author__panel .editor-post-panel__row-control > div {
 	width: 100%;
 }
+
+.editor-post-author__panel-dialog .editor-post-author {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
+}
diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js
index 811c53ec05cb8..5aebfb650bfdb 100644
--- a/packages/editor/src/components/post-card-panel/index.js
+++ b/packages/editor/src/components/post-card-panel/index.js
@@ -1,17 +1,14 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
 import {
 	Icon,
 	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
 	__experimentalText as Text,
-	PanelBody,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
@@ -26,14 +23,12 @@ import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
 	PATTERN_POST_TYPE,
+	GLOBAL_POST_TYPES,
 } from '../../store/constants';
-import { PrivatePostExcerptPanel } from '../post-excerpt/panel';
-import PostLastEditedPanel from '../post-last-edited-panel';
 import { unlock } from '../../lock-unlock';
-import TemplateAreas from '../template-areas';
 
-export default function PostCardPanel( { className, actions } ) {
-	const { title, showPostContentPanels, icon, postType } = useSelect(
+export default function PostCardPanel( { actions } ) {
+	const { isFrontPage, isPostsPage, title, icon, isSync } = useSelect(
 		( select ) => {
 			const {
 				getEditedPostAttribute,
@@ -42,6 +37,7 @@ export default function PostCardPanel( { className, actions } ) {
 				__experimentalGetTemplateInfo,
 			} = select( editorStore );
 			const { getEditedEntityRecord } = select( coreStore );
+			const siteSettings = getEditedEntityRecord( 'root', 'site' );
 			const _type = getCurrentPostType();
 			const _id = getCurrentPostId();
 			const _record = getEditedEntityRecord( 'postType', _type, _id );
@@ -49,65 +45,70 @@ export default function PostCardPanel( { className, actions } ) {
 				[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes(
 					_type
 				) && __experimentalGetTemplateInfo( _record );
+			let _isSync = false;
+			if ( GLOBAL_POST_TYPES.includes( _type ) ) {
+				if ( PATTERN_POST_TYPE === _type ) {
+					// 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'
+							? 'unsynced'
+							: getEditedPostAttribute(
+									'wp_pattern_sync_status'
+							  );
+					_isSync = currentSyncStatus !== 'unsynced';
+				} else {
+					_isSync = true;
+				}
+			}
 			return {
 				title:
 					_templateInfo?.title || getEditedPostAttribute( 'title' ),
-				id: _id,
-				postType: _type,
 				icon: unlock( select( editorStore ) ).getPostIcon( _type, {
 					area: _record?.area,
 				} ),
-				// Post excerpt panel and Last Edited info are rendered in different place depending on the post type.
-				// So we cannot make this check inside the PostExcerpt or PostLastEditedPanel component based on the current edited entity.
-				showPostContentPanels: [
-					TEMPLATE_POST_TYPE,
-					TEMPLATE_PART_POST_TYPE,
-					PATTERN_POST_TYPE,
-				].includes( _type ),
+				isSync: _isSync,
+				isFrontPage: siteSettings?.page_on_front === _id,
+				isPostsPage: siteSettings?.page_for_posts === _id,
 			};
 		},
 		[]
 	);
 	return (
-		<PanelBody>
-			<div
-				className={ classnames( 'editor-post-card-panel', className, {
-					'has-description': showPostContentPanels,
-				} ) }
+		<div className="editor-post-card-panel">
+			<HStack
+				spacing={ 2 }
+				className="editor-post-card-panel__header"
+				align="flex-start"
 			>
-				<HStack
-					spacing={ 2 }
-					className="editor-post-card-panel__header"
-					align="flex-start"
+				<Icon
+					className={ clsx( 'editor-post-card-panel__icon', {
+						'is-sync': isSync,
+					} ) }
+					icon={ icon }
+				/>
+				<Text
+					numberOfLines={ 2 }
+					truncate
+					className="editor-post-card-panel__title"
+					weight={ 500 }
+					as="h2"
+					lineHeight="20px"
 				>
-					<Icon
-						className="editor-post-card-panel__icon"
-						icon={ icon }
-					/>
-					<Text
-						numberOfLines={ 2 }
-						truncate
-						className="editor-post-card-panel__title"
-						weight={ 500 }
-						as="h2"
-					>
-						{ title ? decodeEntities( title ) : __( 'No Title' ) }
-					</Text>
-					{ actions }
-				</HStack>
-				<VStack className="editor-post-card-panel__content">
-					{ showPostContentPanels && (
-						<VStack
-							className="editor-post-card-panel__description"
-							spacing={ 2 }
-						>
-							<PrivatePostExcerptPanel />
-							<PostLastEditedPanel />
-						</VStack>
+					{ title ? decodeEntities( title ) : __( 'No Title' ) }
+					{ isFrontPage && (
+						<span className="editor-post-card-panel__title-badge">
+							{ __( 'Front Page' ) }
+						</span>
+					) }
+					{ isPostsPage && (
+						<span className="editor-post-card-panel__title-badge">
+							{ __( 'Posts Page' ) }
+						</span>
 					) }
-					{ postType === TEMPLATE_POST_TYPE && <TemplateAreas /> }
-				</VStack>
-			</div>
-		</PanelBody>
+				</Text>
+				{ actions }
+			</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 a6928a6efb1e3..82d10eb85b693 100644
--- a/packages/editor/src/components/post-card-panel/style.scss
+++ b/packages/editor/src/components/post-card-panel/style.scss
@@ -7,7 +7,13 @@
 		width: 100%;
 
 		&.editor-post-card-panel__title {
-			margin: 3px 0 0 0;
+			margin: 0;
+			padding: 2px 0;
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			column-gap: $grid-unit-10;
+			row-gap: $grid-unit-05;
 		}
 	}
 
@@ -26,3 +32,19 @@
 		margin-bottom: $grid-unit-10;
 	}
 }
+
+.editor-post-card-panel__icon.is-sync {
+	fill: var(--wp-block-synced-color);
+}
+
+.editor-post-card-panel__title-badge {
+	background: $gray-100;
+	color: $gray-700;
+	padding: 0 $grid-unit-05;
+	border-radius: $radius-block-ui;
+	font-size: 12px;
+	font-weight: 400;
+	flex-shrink: 0;
+	line-height: $grid-unit-05 * 5;
+	display: inline-block;
+}
diff --git a/packages/editor/src/components/post-comments/index.js b/packages/editor/src/components/post-comments/index.js
index 85d9948575d05..75ca1ec0ee016 100644
--- a/packages/editor/src/components/post-comments/index.js
+++ b/packages/editor/src/components/post-comments/index.js
@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
+import {
+	RadioControl,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
@@ -10,6 +14,34 @@ import { useDispatch, useSelect } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+const COMMENT_OPTIONS = [
+	{
+		label: (
+			<>
+				{ __( 'Open' ) }
+				<Text variant="muted" size={ 12 }>
+					{ __( 'Visitors can add new comments and replies.' ) }
+				</Text>
+			</>
+		),
+		value: 'open',
+	},
+	{
+		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>
+			</>
+		),
+		value: 'closed',
+	},
+];
+
 function PostComments() {
 	const commentStatus = useSelect(
 		( select ) =>
@@ -18,19 +50,30 @@ function PostComments() {
 		[]
 	);
 	const { editPost } = useDispatch( editorStore );
-	const onToggleComments = () =>
+	const handleStatus = ( newCommentStatus ) =>
 		editPost( {
-			comment_status: commentStatus === 'open' ? 'closed' : 'open',
+			comment_status: newCommentStatus,
 		} );
 
 	return (
-		<CheckboxControl
-			__nextHasNoMarginBottom
-			label={ __( 'Allow comments' ) }
-			checked={ commentStatus === 'open' }
-			onChange={ onToggleComments }
-		/>
+		<form>
+			<VStack spacing={ 4 }>
+				<RadioControl
+					className="editor-change-status__options"
+					hideLabelFromVision
+					label={ __( 'Comment status' ) }
+					options={ COMMENT_OPTIONS }
+					onChange={ handleStatus }
+					selected={ commentStatus }
+				/>
+			</VStack>
+		</form>
 	);
 }
 
+/**
+ * A form for managing comment status.
+ *
+ * @return {JSX.Element} The rendered PostComments component.
+ */
 export default PostComments;
diff --git a/packages/editor/src/components/post-discussion/panel.js b/packages/editor/src/components/post-discussion/panel.js
index 6ff022a2b8b52..718754d56857a 100644
--- a/packages/editor/src/components/post-discussion/panel.js
+++ b/packages/editor/src/components/post-discussion/panel.js
@@ -2,8 +2,15 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody, PanelRow } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	Dropdown,
+	Button,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -12,50 +19,127 @@ import { store as editorStore } from '../../store';
 import PostTypeSupportCheck from '../post-type-support-check';
 import PostComments from '../post-comments';
 import PostPingbacks from '../post-pingbacks';
+import PostPanelRow from '../post-panel-row';
 
 const PANEL_NAME = 'discussion-panel';
 
-function DiscussionPanel() {
-	const { isEnabled, isOpened } = useSelect( ( select ) => {
-		const { isEditorPanelEnabled, isEditorPanelOpened } =
-			select( editorStore );
+function ModalContents( { onClose } ) {
+	return (
+		<div className="editor-post-discussion">
+			<InspectorPopoverHeader
+				title={ __( 'Discussion' ) }
+				onClose={ onClose }
+			/>
+			<VStack spacing={ 4 }>
+				<PostTypeSupportCheck supportKeys="comments">
+					<PostComments />
+				</PostTypeSupportCheck>
+				<PostTypeSupportCheck supportKeys="trackbacks">
+					<PostPingbacks />
+				</PostTypeSupportCheck>
+			</VStack>
+		</div>
+	);
+}
+
+function PostDiscussionToggle( { isOpen, onClick } ) {
+	const {
+		commentStatus,
+		pingStatus,
+		commentsSupported,
+		trackbacksSupported,
+	} = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const { getPostType } = select( coreStore );
+		const postType = getPostType( getEditedPostAttribute( 'type' ) );
 		return {
-			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
-			isOpened: isEditorPanelOpened( PANEL_NAME ),
+			commentStatus: getEditedPostAttribute( 'comment_status' ) ?? 'open',
+			pingStatus: getEditedPostAttribute( 'ping_status' ) ?? 'open',
+			commentsSupported: !! postType.supports.comments,
+			trackbacksSupported: !! postType.supports.trackbacks,
 		};
 	}, [] );
-
-	const { toggleEditorPanelOpened } = useDispatch( editorStore );
-
-	if ( ! isEnabled ) {
-		return null;
+	let label;
+	if ( commentStatus === 'open' ) {
+		if ( pingStatus === 'open' ) {
+			label = __( 'Open' );
+		} else {
+			label = trackbacksSupported ? __( 'Comments only' ) : __( 'Open' );
+		}
+	} else if ( pingStatus === 'open' ) {
+		label = commentsSupported ? __( 'Pings only' ) : __( 'Pings enabled' );
+	} else {
+		label = __( 'Closed' );
 	}
-
 	return (
-		<PanelBody
-			title={ __( 'Discussion' ) }
-			opened={ isOpened }
-			onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
+		<Button
+			size="compact"
+			className="editor-post-discussion__panel-toggle"
+			variant="tertiary"
+			aria-label={ __( 'Change discussion options' ) }
+			aria-expanded={ isOpen }
+			onClick={ onClick }
 		>
-			<PostTypeSupportCheck supportKeys="comments">
-				<PanelRow>
-					<PostComments />
-				</PanelRow>
-			</PostTypeSupportCheck>
-
-			<PostTypeSupportCheck supportKeys="trackbacks">
-				<PanelRow>
-					<PostPingbacks />
-				</PanelRow>
-			</PostTypeSupportCheck>
-		</PanelBody>
+			{ label }
+		</Button>
 	);
 }
 
+/**
+ * This component allows to update comment and pingback
+ * settings for the current post. Internally there are
+ * checks whether the current post has support for the
+ * above and if the `discussion-panel` panel is enabled.
+ *
+ * @return {JSX.Element|null} The rendered PostDiscussionPanel component.
+ */
 export default function PostDiscussionPanel() {
+	const { isEnabled } = useSelect( ( select ) => {
+		const { isEditorPanelEnabled } = select( editorStore );
+		return {
+			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
+		};
+	}, [] );
+
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	if ( ! isEnabled ) {
+		return null;
+	}
+
 	return (
 		<PostTypeSupportCheck supportKeys={ [ 'comments', 'trackbacks' ] }>
-			<DiscussionPanel />
+			<PostPanelRow label={ __( 'Discussion' ) } ref={ setPopoverAnchor }>
+				<Dropdown
+					popoverProps={ popoverProps }
+					className="editor-post-discussion__panel-dropdown"
+					contentClassName="editor-post-discussion__panel-dialog"
+					focusOnMount
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<PostDiscussionToggle
+							isOpen={ isOpen }
+							onClick={ onToggle }
+						/>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<ModalContents onClose={ onClose } />
+					) }
+				/>
+			</PostPanelRow>
 		</PostTypeSupportCheck>
 	);
 }
diff --git a/packages/editor/src/components/post-discussion/style.scss b/packages/editor/src/components/post-discussion/style.scss
new file mode 100644
index 0000000000000..b2d65c9aa7cf3
--- /dev/null
+++ b/packages/editor/src/components/post-discussion/style.scss
@@ -0,0 +1,24 @@
+.editor-post-discussion__panel-dialog .editor-post-discussion {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
+
+	.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 {
+
+	.components-text {
+		color: inherit;
+	}
+}
+
+.editor-post-discussion__panel-dialog .components-popover__content {
+	min-width: 320px;
+}
diff --git a/packages/editor/src/components/post-excerpt/panel.js b/packages/editor/src/components/post-excerpt/panel.js
index 36646e07b4ce8..55952278d2247 100644
--- a/packages/editor/src/components/post-excerpt/panel.js
+++ b/packages/editor/src/components/post-excerpt/panel.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -84,6 +79,11 @@ function ExcerptPanel() {
 	);
 }
 
+/**
+ * Is rendered if the post type supports excerpts and allows editing the excerpt.
+ *
+ * @return {JSX.Element} The rendered PostExcerptPanel component.
+ */
 export default function PostExcerptPanel() {
 	return (
 		<PostExcerptCheck>
@@ -186,49 +186,46 @@ function PrivateExcerpt() {
 		? __( 'Edit description' )
 		: __( 'Edit excerpt' );
 	return (
-		<Dropdown
-			className="editor-post-excerpt__dropdown"
-			contentClassName="editor-post-excerpt__dropdown__content"
-			popoverProps={ popoverProps }
-			focusOnMount
-			ref={ setPopoverAnchor }
-			renderToggle={ ( { onToggle } ) => (
-				<Button
-					className={ classnames(
-						'editor-post-excerpt__dropdown__trigger',
-						{ 'has-excerpt': !! excerpt }
-					) }
-					onClick={ onToggle }
-					label={
-						!! excerptText ? triggerEditLabel : excerptPlaceholder
-					}
-					showTooltip={ !! excerptText }
-				>
-					{ excerptText || excerptPlaceholder }
-				</Button>
-			) }
-			renderContent={ ( { onClose } ) => (
-				<>
-					<InspectorPopoverHeader
-						title={ label }
-						onClose={ onClose }
-					/>
+		<VStack>
+			{ excerptText }
+			<Dropdown
+				className="editor-post-excerpt__dropdown"
+				contentClassName="editor-post-excerpt__dropdown__content"
+				popoverProps={ popoverProps }
+				focusOnMount
+				ref={ setPopoverAnchor }
+				renderToggle={ ( { onToggle } ) => (
+					<Button
+						className="editor-post-excerpt__dropdown__trigger"
+						onClick={ onToggle }
+						variant="link"
+					>
+						{ excerptText ? triggerEditLabel : excerptPlaceholder }
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<>
+						<InspectorPopoverHeader
+							title={ label }
+							onClose={ onClose }
+						/>
 
-					<VStack spacing={ 4 }>
-						<PluginPostExcerpt.Slot>
-							{ ( fills ) => (
-								<>
-									<PostExcerptForm
-										hideLabelFromVision
-										updateOnBlur
-									/>
-									{ fills }
-								</>
-							) }
-						</PluginPostExcerpt.Slot>
-					</VStack>
-				</>
-			) }
-		/>
+						<VStack spacing={ 4 }>
+							<PluginPostExcerpt.Slot>
+								{ ( fills ) => (
+									<>
+										<PostExcerptForm
+											hideLabelFromVision
+											updateOnBlur
+										/>
+										{ fills }
+									</>
+								) }
+							</PluginPostExcerpt.Slot>
+						</VStack>
+					</>
+				) }
+			/>
+		</VStack>
 	);
 }
diff --git a/packages/editor/src/components/post-excerpt/style.scss b/packages/editor/src/components/post-excerpt/style.scss
index f5499c3423d19..9a8f1553fed2c 100644
--- a/packages/editor/src/components/post-excerpt/style.scss
+++ b/packages/editor/src/components/post-excerpt/style.scss
@@ -3,23 +3,6 @@
 	margin-bottom: 10px;
 }
 
-.editor-post-excerpt__dropdown__trigger {
-	height: auto;
-	padding: 0;
-
-	&:not(.has-excerpt) {
-		color: $gray-700;
-	}
-
-	&:hover {
-		color: $gray-900;
-	}
-}
-
-.editor-post-excerpt__dropdown {
-	display: block;
-}
-
 .editor-post-excerpt__dropdown__content {
 	.components-popover__content {
 		min-width: 320px;
diff --git a/packages/editor/src/components/post-featured-image/check.js b/packages/editor/src/components/post-featured-image/check.js
index 24a9f80058ddc..823559f766bc3 100644
--- a/packages/editor/src/components/post-featured-image/check.js
+++ b/packages/editor/src/components/post-featured-image/check.js
@@ -4,6 +4,15 @@
 import PostTypeSupportCheck from '../post-type-support-check';
 import ThemeSupportCheck from '../theme-support-check';
 
+/**
+ * Wrapper component that renders its children only if the post type supports a featured image
+ * and the theme supports post thumbnails.
+ *
+ * @param {Object}  props          Props.
+ * @param {Element} props.children Children to be rendered.
+ *
+ * @return {Component} The component to be rendered.
+ */
 function PostFeaturedImageCheck( { children } ) {
 	return (
 		<ThemeSupportCheck supportKeys="post-thumbnails">
diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js
index 5407cac15b542..63c89669435d5 100644
--- a/packages/editor/src/components/post-featured-image/index.js
+++ b/packages/editor/src/components/post-featured-image/index.js
@@ -266,6 +266,21 @@ const applyWithDispatch = withDispatch(
 	}
 );
 
+/**
+ * Renders the component for managing the featured image of a post.
+ *
+ * @param {Object}   props                  Props.
+ * @param {number}   props.currentPostId    ID of the current post.
+ * @param {number}   props.featuredImageId  ID of the featured image.
+ * @param {Function} props.onUpdateImage    Function to call when the image is updated.
+ * @param {Function} props.onRemoveImage    Function to call when the image is removed.
+ * @param {Object}   props.media            The media object representing the featured image.
+ * @param {string}   props.postType         Post type.
+ * @param {Element}  props.noticeUI         UI for displaying notices.
+ * @param {Object}   props.noticeOperations Operations for managing notices.
+ *
+ * @return {Element} Component to be rendered .
+ */
 export default compose(
 	withNotices,
 	applyWithSelect,
diff --git a/packages/editor/src/components/post-featured-image/panel.js b/packages/editor/src/components/post-featured-image/panel.js
index 87d80dda4a7c1..dd2a1527152dd 100644
--- a/packages/editor/src/components/post-featured-image/panel.js
+++ b/packages/editor/src/components/post-featured-image/panel.js
@@ -15,6 +15,15 @@ import PostFeaturedImageCheck from './check';
 
 const PANEL_NAME = 'featured-image';
 
+/**
+ * Renders the panel for the post featured image.
+ *
+ * @param {Object}  props               Props.
+ * @param {boolean} props.withPanelBody Whether to include the panel body. Default true.
+ *
+ * @return {Component|null} The component to be rendered.
+ * Return Null if the editor panel is disabled for featured image.
+ */
 export default function PostFeaturedImagePanel( { withPanelBody = true } ) {
 	const { postType, isEnabled, isOpened } = useSelect( ( select ) => {
 		const {
diff --git a/packages/editor/src/components/post-format/check.js b/packages/editor/src/components/post-format/check.js
index 0810c9d613aae..35729770b93c4 100644
--- a/packages/editor/src/components/post-format/check.js
+++ b/packages/editor/src/components/post-format/check.js
@@ -27,4 +27,12 @@ function PostFormatCheck( { children } ) {
 	);
 }
 
+/**
+ * Component check if there are any post formats.
+ *
+ * @param {Object}  props          The component props.
+ * @param {Element} props.children The child elements to render.
+ *
+ * @return {Component|null} The rendered component or null if post formats are disabled.
+ */
 export default PostFormatCheck;
diff --git a/packages/editor/src/components/post-format/index.js b/packages/editor/src/components/post-format/index.js
index 2b422ccebbaa8..a61d230a00119 100644
--- a/packages/editor/src/components/post-format/index.js
+++ b/packages/editor/src/components/post-format/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Button, SelectControl } from '@wordpress/components';
+import { Button, RadioControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
@@ -38,6 +38,16 @@ export const POST_FORMATS = [
 	return 0;
 } );
 
+/**
+ * `PostFormat` a component that allows changing the post format while also providing a suggestion for the current post.
+ *
+ * @example
+ * ```jsx
+ * <PostFormat />
+ * ```
+ *
+ * @return {JSX.Element} The rendered PostFormat component.
+ */
 export default function PostFormat() {
 	const instanceId = useInstanceId( PostFormat );
 	const postFormatSelectorId = `post-format-selector-${ instanceId }`;
@@ -75,16 +85,17 @@ export default function PostFormat() {
 	return (
 		<PostFormatCheck>
 			<div className="editor-post-format">
-				<SelectControl
-					__nextHasNoMarginBottom
+				<RadioControl
+					className="editor-post-format__options"
 					label={ __( 'Post Format' ) }
-					value={ postFormat }
+					selected={ postFormat }
 					onChange={ ( format ) => onUpdatePostFormat( format ) }
 					id={ postFormatSelectorId }
 					options={ formats.map( ( format ) => ( {
 						label: format.caption,
 						value: format.id,
 					} ) ) }
+					hideLabelFromVision
 				/>
 				{ suggestion && suggestion.id !== postFormat && (
 					<p className="editor-post-format__suggestion">
diff --git a/packages/editor/src/components/post-format/panel.js b/packages/editor/src/components/post-format/panel.js
new file mode 100644
index 0000000000000..faaf88b785a4b
--- /dev/null
+++ b/packages/editor/src/components/post-format/panel.js
@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Dropdown } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { default as PostFormatForm, POST_FORMATS } from './';
+import PostFormatCheck from './check';
+import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
+
+/**
+ * Renders the Post Author Panel component.
+ *
+ * @return {Component} The component to be rendered.
+ */
+function PostFormat() {
+	const { postFormat } = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const _postFormat = getEditedPostAttribute( 'format' );
+		return {
+			postFormat: _postFormat ?? 'standard',
+		};
+	}, [] );
+	const activeFormat = POST_FORMATS.find(
+		( format ) => format.id === postFormat
+	);
+
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+	return (
+		<PostFormatCheck>
+			<PostPanelRow label={ __( 'Format' ) } ref={ setPopoverAnchor }>
+				<Dropdown
+					popoverProps={ popoverProps }
+					contentClassName="editor-post-format__dialog"
+					focusOnMount
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button
+							size="compact"
+							variant="tertiary"
+							aria-expanded={ isOpen }
+							aria-label={ sprintf(
+								// translators: %s: Current post format.
+								__( 'Change format: %s' ),
+								activeFormat?.caption
+							) }
+							onClick={ onToggle }
+						>
+							{ activeFormat?.caption }
+						</Button>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<div className="editor-post-format__dialog-content">
+							<InspectorPopoverHeader
+								title={ __( 'Format' ) }
+								onClose={ onClose }
+							/>
+							<PostFormatForm />
+						</div>
+					) }
+				/>
+			</PostPanelRow>
+		</PostFormatCheck>
+	);
+}
+
+export default PostFormat;
diff --git a/packages/editor/src/components/post-format/style.scss b/packages/editor/src/components/post-format/style.scss
index 09fb0f11b9f94..ec3a8b1626b54 100644
--- a/packages/editor/src/components/post-format/style.scss
+++ b/packages/editor/src/components/post-format/style.scss
@@ -1,3 +1,15 @@
 [class].editor-post-format__suggestion {
 	margin: $grid-unit-05 0 0 0;
 }
+
+.editor-post-format__dialog .editor-post-format__dialog-content {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
+}
+
+.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/check.js b/packages/editor/src/components/post-last-revision/check.js
index 44f96b9cf7acb..c570f5e42cdc3 100644
--- a/packages/editor/src/components/post-last-revision/check.js
+++ b/packages/editor/src/components/post-last-revision/check.js
@@ -9,6 +9,14 @@ import { useSelect } from '@wordpress/data';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 
+/**
+ * Wrapper component that renders its children if the post has more than one revision.
+ *
+ * @param {Object}  props          Props.
+ * @param {Element} props.children Children to be rendered.
+ *
+ * @return {Component|null} Rendered child components if post has more than one revision, otherwise null.
+ */
 function PostLastRevisionCheck( { children } ) {
 	const { lastRevisionId, revisionsCount } = useSelect( ( select ) => {
 		const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
diff --git a/packages/editor/src/components/post-last-revision/index.js b/packages/editor/src/components/post-last-revision/index.js
index e747befefe44e..97031106772ad 100644
--- a/packages/editor/src/components/post-last-revision/index.js
+++ b/packages/editor/src/components/post-last-revision/index.js
@@ -13,7 +13,12 @@ import { addQueryArgs } from '@wordpress/url';
 import PostLastRevisionCheck from './check';
 import { store as editorStore } from '../../store';
 
-function LastRevision() {
+/**
+ * Renders the component for displaying the last revision of a post.
+ *
+ * @return {Component} The component to be rendered.
+ */
+function PostLastRevision() {
 	const { lastRevisionId, revisionsCount } = useSelect( ( select ) => {
 		const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
 			select( editorStore );
@@ -42,4 +47,4 @@ function LastRevision() {
 	);
 }
 
-export default LastRevision;
+export default PostLastRevision;
diff --git a/packages/editor/src/components/post-last-revision/panel.js b/packages/editor/src/components/post-last-revision/panel.js
index de0aee0ab7750..e87475cc2b34e 100644
--- a/packages/editor/src/components/post-last-revision/panel.js
+++ b/packages/editor/src/components/post-last-revision/panel.js
@@ -9,6 +9,11 @@ import { PanelBody } from '@wordpress/components';
 import PostLastRevision from './';
 import PostLastRevisionCheck from './check';
 
+/**
+ * Renders the panel for displaying the last revision of a post.
+ *
+ * @return {Component} The component to be rendered.
+ */
 function PostLastRevisionPanel() {
 	return (
 		<PostLastRevisionCheck>
diff --git a/packages/editor/src/components/post-last-revision/test/check.js b/packages/editor/src/components/post-last-revision/test/check.js
index 6e5210e8ed6bf..0c3e680992a2e 100644
--- a/packages/editor/src/components/post-last-revision/test/check.js
+++ b/packages/editor/src/components/post-last-revision/test/check.js
@@ -21,7 +21,11 @@ function setupDataMock( id, count ) {
 			getCurrentPostLastRevisionId: () => id,
 			getCurrentPostRevisionsCount: () => count,
 			getEditedPostAttribute: () => null,
-			getPostType: () => null,
+			getPostType: () => ( {
+				supports: {
+					revisions: true,
+				},
+			} ),
 		} ) )
 	);
 }
diff --git a/packages/editor/src/components/post-locked-modal/index.js b/packages/editor/src/components/post-locked-modal/index.js
index d2399929f0b11..6f858c13722a2 100644
--- a/packages/editor/src/components/post-locked-modal/index.js
+++ b/packages/editor/src/components/post-locked-modal/index.js
@@ -20,6 +20,12 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * A modal component that is displayed when a post is locked for editing by another user.
+ * The modal provides information about the lock status and options to take over or exit the editor.
+ *
+ * @return {JSX.Element|null} The rendered PostLockedModal component.
+ */
 export default function PostLockedModal() {
 	const instanceId = useInstanceId( PostLockedModal );
 	const hookName = 'core/editor/post-locked-modal-' + instanceId;
diff --git a/packages/editor/src/components/post-panel-row/index.js b/packages/editor/src/components/post-panel-row/index.js
index f6f0c658cd724..71dd63d3c0d95 100644
--- a/packages/editor/src/components/post-panel-row/index.js
+++ b/packages/editor/src/components/post-panel-row/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,7 +12,7 @@ import { forwardRef } from '@wordpress/element';
 const PostPanelRow = forwardRef( ( { className, label, children }, ref ) => {
 	return (
 		<HStack
-			className={ classnames( 'editor-post-panel__row', className ) }
+			className={ clsx( 'editor-post-panel__row', className ) }
 			ref={ ref }
 		>
 			{ label && (
diff --git a/packages/editor/src/components/post-panel-row/style.scss b/packages/editor/src/components/post-panel-row/style.scss
index 22d0cbbb644d8..024394c3aaf33 100644
--- a/packages/editor/src/components/post-panel-row/style.scss
+++ b/packages/editor/src/components/post-panel-row/style.scss
@@ -11,6 +11,9 @@
 	min-height: $grid-unit-40;
 	display: flex;
 	align-items: center;
+	padding: 6px 0; // Matches button to ensure alignment
+	line-height: $grid-unit-05 * 5;
+	hyphens: auto;
 }
 
 .editor-post-panel__row-control {
@@ -18,4 +21,17 @@
 	min-height: $grid-unit-40;
 	display: flex;
 	align-items: center;
+
+	.components-button {
+		max-width: 100%;
+		text-align: left;
+		text-wrap: balance; // Fallback for Safari.
+		text-wrap: pretty;
+		height: auto;
+		min-height: $button-size-compact;
+	}
+
+	.components-dropdown {
+		max-width: 100%;
+	}
 }
diff --git a/packages/editor/src/components/post-panel-section/index.js b/packages/editor/src/components/post-panel-section/index.js
new file mode 100644
index 0000000000000..3b27da874844b
--- /dev/null
+++ b/packages/editor/src/components/post-panel-section/index.js
@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+
+function PostPanelSection( { className, children } ) {
+	return (
+		<VStack className={ clsx( 'editor-post-panel__section', className ) }>
+			{ children }
+		</VStack>
+	);
+}
+
+export default PostPanelSection;
diff --git a/packages/editor/src/components/post-panel-section/style.scss b/packages/editor/src/components/post-panel-section/style.scss
new file mode 100644
index 0000000000000..6343386b0cfc1
--- /dev/null
+++ b/packages/editor/src/components/post-panel-section/style.scss
@@ -0,0 +1,3 @@
+.editor-post-panel__section {
+	padding: $grid-unit-20;
+}
diff --git a/packages/editor/src/components/post-pending-status/check.js b/packages/editor/src/components/post-pending-status/check.js
index 347cb6d727227..7a4ff5195041c 100644
--- a/packages/editor/src/components/post-pending-status/check.js
+++ b/packages/editor/src/components/post-pending-status/check.js
@@ -8,6 +8,16 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * This component checks the publishing status of the current post.
+ * If the post is already published or the user doesn't have the
+ * capability to publish, it returns null.
+ *
+ * @param {Object}  props          Component properties.
+ * @param {Element} props.children Children to be rendered.
+ *
+ * @return {JSX.Element|null} The rendered child elements or null if the post is already published or the user doesn't have the capability to publish.
+ */
 export function PostPendingStatusCheck( { children } ) {
 	const { hasPublishAction, isPublished } = useSelect( ( select ) => {
 		const { isCurrentPostPublished, getCurrentPost } =
diff --git a/packages/editor/src/components/post-pending-status/index.js b/packages/editor/src/components/post-pending-status/index.js
index 85557517da6a1..8363ebc715891 100644
--- a/packages/editor/src/components/post-pending-status/index.js
+++ b/packages/editor/src/components/post-pending-status/index.js
@@ -11,6 +11,11 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import PostPendingStatusCheck from './check';
 import { store as editorStore } from '../../store';
 
+/**
+ * A component for displaying and toggling the pending status of a post.
+ *
+ * @return {JSX.Element} The rendered component.
+ */
 export function PostPendingStatus() {
 	const status = useSelect(
 		( select ) => select( editorStore ).getEditedPostAttribute( 'status' ),
diff --git a/packages/editor/src/components/post-pingbacks/index.js b/packages/editor/src/components/post-pingbacks/index.js
index d6e1c419ee6f9..2ec9a4a78c54d 100644
--- a/packages/editor/src/components/post-pingbacks/index.js
+++ b/packages/editor/src/components/post-pingbacks/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
+import { CheckboxControl, ExternalLink } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
@@ -26,11 +26,26 @@ function PostPingbacks() {
 	return (
 		<CheckboxControl
 			__nextHasNoMarginBottom
-			label={ __( 'Allow pingbacks & trackbacks' ) }
+			label={ __( 'Enable pingbacks & trackbacks' ) }
 			checked={ pingStatus === 'open' }
 			onChange={ onTogglePingback }
+			help={
+				<ExternalLink
+					href={ __(
+						'https://wordpress.org/documentation/article/trackbacks-and-pingbacks/'
+					) }
+				>
+					{ __( 'Learn more about pingbacks & trackbacks' ) }
+				</ExternalLink>
+			}
 		/>
 	);
 }
 
+/**
+ * Renders a control for enabling or disabling pingbacks and trackbacks
+ * in a WordPress post.
+ *
+ * @module PostPingbacks
+ */
 export default PostPingbacks;
diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js
index 578cd78351d23..e517ac0e8a0fb 100644
--- a/packages/editor/src/components/post-preview-button/index.js
+++ b/packages/editor/src/components/post-preview-button/index.js
@@ -99,6 +99,21 @@ function writeInterstitialMessage( targetDocument ) {
 	targetDocument.close();
 }
 
+/**
+ * Renders a button that opens a new window or tab for the preview,
+ * writes the interstitial message to this window, and then navigates
+ * to the actual preview link. The button is not rendered if the post
+ * is not viewable and disabled if the post is not saveable.
+ *
+ * @param {Object}   props                     The component props.
+ * @param {string}   props.className           The class name for the button.
+ * @param {string}   props.textContent         The text content for the button.
+ * @param {boolean}  props.forceIsAutosaveable Whether to force autosave.
+ * @param {string}   props.role                The role attribute for the button.
+ * @param {Function} props.onPreview           The callback function for preview event.
+ *
+ * @return {JSX.Element|null} The rendered button component.
+ */
 export default function PostPreviewButton( {
 	className,
 	textContent,
@@ -168,6 +183,7 @@ export default function PostPreviewButton( {
 			className={ className || 'editor-post-preview' }
 			href={ href }
 			target={ targetId }
+			__experimentalIsFocusable
 			disabled={ ! isSaveable }
 			onClick={ openPreviewWindow }
 			role={ role }
diff --git a/packages/editor/src/components/post-preview-button/test/index.js b/packages/editor/src/components/post-preview-button/test/index.js
index e34c05caa178b..bb51f302edf50 100644
--- a/packages/editor/src/components/post-preview-button/test/index.js
+++ b/packages/editor/src/components/post-preview-button/test/index.js
@@ -139,12 +139,16 @@ describe( 'PostPreviewButton', () => {
 		).toBeInTheDocument();
 	} );
 
-	it( 'should be disabled if post is not saveable.', () => {
+	it( 'should be accessibly disabled if post is not saveable.', () => {
 		mockUseSelect( { isEditedPostSaveable: () => false } );
 
 		render( <PostPreviewButton /> );
 
-		expect( screen.getByRole( 'button' ) ).toBeDisabled();
+		expect( screen.getByRole( 'button' ) ).toBeEnabled();
+		expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
 	} );
 
 	it( 'should not be disabled if post is saveable.', () => {
@@ -153,6 +157,10 @@ describe( 'PostPreviewButton', () => {
 		render( <PostPreviewButton /> );
 
 		expect( screen.getByRole( 'button' ) ).toBeEnabled();
+		expect( screen.getByRole( 'button' ) ).not.toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
 	} );
 
 	it( 'should set `href` to edited post preview link if specified.', () => {
diff --git a/packages/editor/src/components/post-publish-button/index.js b/packages/editor/src/components/post-publish-button/index.js
index 355986fdf509d..8797c9d142825 100644
--- a/packages/editor/src/components/post-publish-button/index.js
+++ b/packages/editor/src/components/post-publish-button/index.js
@@ -11,6 +11,7 @@ import { compose } from '@wordpress/compose';
  */
 import PublishButtonLabel from './label';
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 const noop = () => {};
 
@@ -45,14 +46,24 @@ export class PostPublishButton extends Component {
 
 	createOnClick( callback ) {
 		return ( ...args ) => {
-			const { hasNonPostEntityChanges, setEntitiesSavedStatesCallback } =
-				this.props;
+			const {
+				hasNonPostEntityChanges,
+				hasPostMetaChanges,
+				setEntitiesSavedStatesCallback,
+				isPublished,
+			} = this.props;
 			// If a post with non-post entities is published, but the user
 			// elects to not save changes to the non-post entities, those
 			// entities will still be dirty when the Publish button is clicked.
 			// We also need to check that the `setEntitiesSavedStatesCallback`
 			// prop was passed. See https://github.com/WordPress/gutenberg/pull/37383
-			if ( hasNonPostEntityChanges && setEntitiesSavedStatesCallback ) {
+			//
+			// TODO: Explore how to manage `hasPostMetaChanges` and pre-publish workflow properly.
+			if (
+				( hasNonPostEntityChanges ||
+					( hasPostMetaChanges && isPublished ) ) &&
+				setEntitiesSavedStatesCallback
+			) {
 				// The modal for multiple entity saving will open,
 				// hold the callback for saving/publishing the post
 				// so that we can call it if the post entity is checked.
@@ -212,7 +223,8 @@ export default compose( [
 			isSavingNonPostEntityChanges,
 			getEditedPostAttribute,
 			getPostEdits,
-		} = select( editorStore );
+			hasPostMetaChanges,
+		} = unlock( select( editorStore ) );
 		return {
 			isSaving: isSavingPost(),
 			isAutoSaving: isAutosavingPost(),
@@ -229,6 +241,7 @@ export default compose( [
 			postStatus: getEditedPostAttribute( 'status' ),
 			postStatusHasChanged: getPostEdits()?.status,
 			hasNonPostEntityChanges: hasNonPostEntityChanges(),
+			hasPostMetaChanges: hasPostMetaChanges(),
 			isSavingNonPostEntityChanges: isSavingNonPostEntityChanges(),
 		};
 	} ),
diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js
index d9c158ab429a9..31e838575c087 100644
--- a/packages/editor/src/components/post-publish-panel/index.js
+++ b/packages/editor/src/components/post-publish-panel/index.js
@@ -93,9 +93,11 @@ export class PostPublishPanel extends Component {
 							</div>
 							<div className="editor-post-publish-panel__header-cancel-button">
 								<Button
+									__experimentalIsFocusable
 									disabled={ isSavingNonPostEntityChanges }
 									onClick={ onClose }
 									variant="secondary"
+									size="compact"
 								>
 									{ __( 'Cancel' ) }
 								</Button>
diff --git a/packages/editor/src/components/post-publish-panel/maybe-tags-panel.js b/packages/editor/src/components/post-publish-panel/maybe-tags-panel.js
index adf02af313455..ce4ac1713d638 100644
--- a/packages/editor/src/components/post-publish-panel/maybe-tags-panel.js
+++ b/packages/editor/src/components/post-publish-panel/maybe-tags-panel.js
@@ -28,7 +28,7 @@ const TagsPanel = () => {
 					'Tags help users and search engines navigate your site and find your content. Add a few keywords to describe your post.'
 				) }
 			</p>
-			<FlatTermSelector slug={ 'post_tag' } />
+			<FlatTermSelector slug="post_tag" />
 		</PanelBody>
 	);
 };
diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
index 037980074ce0a..ca5639aa96912 100644
--- a/packages/editor/src/components/post-publish-panel/style.scss
+++ b/packages/editor/src/components/post-publish-panel/style.scss
@@ -1,7 +1,3 @@
-.editor-post-publish-panel {
-	background: $white;
-}
-
 .editor-post-publish-panel__content {
 	// Ensure the post-publish panel accounts for the header and footer height.
 	min-height: calc(100% - #{$header-height + 84px});
@@ -71,6 +67,7 @@
 
 .editor-post-publish-panel__header-publish-button {
 	padding-right: $grid-unit-05;
+	justify-content: center;
 }
 
 .editor-post-publish-panel__header-cancel-button {
@@ -119,6 +116,12 @@
 	.editor-post-visibility__dialog-legend {
 		display: none;
 	}
+
+	.components-panel__body-title .components-button {
+		align-items: flex-start;
+		text-wrap: balance; // Fallback for Safari.
+		text-wrap: pretty;
+	}
 }
 
 .post-publish-panel__postpublish .components-panel__body {
@@ -189,40 +192,34 @@
 	}
 }
 
-.edit-post-layout,
-.edit-site-editor__interface-skeleton {
-	.editor-post-publish-panel {
-		position: fixed;
-		z-index: z-index(".edit-post-layout .edit-post-post-publish-panel");
-		top: $admin-bar-height-big;
-		bottom: 0;
-		right: 0;
-		left: 0;
-		overflow: auto;
-
-		@include break-medium() {
-			z-index: z-index(".edit-post-layout .edit-post-post-publish-panel {greater than small}");
-			top: $admin-bar-height;
-			left: auto;
-			width: $sidebar-width + $border-width;
-			border-left: $border-width solid $gray-300;
-			transform: translateX(+100%);
-			animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
-			@include reduce-motion("animation");
-
-			body.is-fullscreen-mode & {
-				top: 0;
-			}
-
-			// Keep it open on focus to avoid conflict with navigate-regions animation.
-			[role="region"]:focus & {
-				transform: translateX(0%);
-			}
+.editor-post-publish-panel {
+	position: fixed;
+	z-index: z-index(".editor-post-publish-panel");
+	background: $white;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	overflow: auto;
+
+	@include break-medium() {
+		z-index: z-index(".editor-post-publish-panel {greater than small}");
+		top: $admin-bar-height;
+		left: auto;
+		width: $sidebar-width + $border-width;
+		border-left: $border-width solid $gray-300;
+		transform: translateX(+100%);
+		animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
+		@include reduce-motion("animation");
+
+		body.is-fullscreen-mode & {
+			top: 0;
 		}
-	}
 
-	.editor-post-publish-panel__header-publish-button {
-		justify-content: center;
+		// Keep it open on focus to avoid conflict with navigate-regions animation.
+		[role="region"]:focus & {
+			transform: translateX(0%);
+		}
 	}
 }
 
diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
index 470fadec4be2b..7f31c97018d09 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
@@ -447,7 +447,7 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
         class="editor-post-publish-panel__header-cancel-button"
       >
         <button
-          class="components-button is-secondary"
+          class="components-button is-secondary is-compact"
           type="button"
         >
           Cancel
@@ -600,7 +600,7 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
         class="editor-post-publish-panel__header-cancel-button"
       >
         <button
-          class="components-button is-secondary"
+          class="components-button is-secondary is-compact"
           type="button"
         >
           Cancel
@@ -797,7 +797,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
         class="editor-post-publish-panel__header-cancel-button"
       >
         <button
-          class="components-button is-secondary"
+          class="components-button is-secondary is-compact"
           type="button"
         >
           Cancel
diff --git a/packages/editor/src/components/post-saved-state/index.js b/packages/editor/src/components/post-saved-state/index.js
index 9df87989ea380..f953ed8095b91 100644
--- a/packages/editor/src/components/post-saved-state/index.js
+++ b/packages/editor/src/components/post-saved-state/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -141,7 +141,7 @@ export default function PostSavedState( { forceIsDirty } ) {
 		<Button
 			className={
 				isSaveable || isSaving
-					? classnames( {
+					? clsx( {
 							'editor-post-save-draft': ! isSavedState,
 							'editor-post-saved-state': isSavedState,
 							'is-saving': isSaving,
diff --git a/packages/editor/src/components/post-schedule/check.js b/packages/editor/src/components/post-schedule/check.js
index 716d75efc9d40..28456b90371cc 100644
--- a/packages/editor/src/components/post-schedule/check.js
+++ b/packages/editor/src/components/post-schedule/check.js
@@ -8,6 +8,14 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Wrapper component that renders its children only if post has a publish action.
+ *
+ * @param {Object}  props          Props.
+ * @param {Element} props.children Children to be rendered.
+ *
+ * @return {Component} - The component to be rendered or null if there is no publish action.
+ */
 export default function PostScheduleCheck( { children } ) {
 	const hasPublishAction = useSelect( ( select ) => {
 		return (
diff --git a/packages/editor/src/components/post-schedule/index.js b/packages/editor/src/components/post-schedule/index.js
index 98a22a992113d..87a6e4649f921 100644
--- a/packages/editor/src/components/post-schedule/index.js
+++ b/packages/editor/src/components/post-schedule/index.js
@@ -8,7 +8,7 @@ import { parseISO, endOfMonth, startOfMonth } from 'date-fns';
  */
 import { getSettings } from '@wordpress/date';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { __experimentalPublishDateTimePicker as PublishDateTimePicker } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useState, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -16,8 +16,33 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
-export default function PostSchedule( { onClose } ) {
+const { PrivatePublishDateTimePicker } = unlock( blockEditorPrivateApis );
+
+/**
+ * Renders the PostSchedule component. It allows the user to schedule a post.
+ *
+ * @param {Object}   props         Props.
+ * @param {Function} props.onClose Function to close the component.
+ *
+ * @return {Component} The component to be rendered.
+ */
+export default function PostSchedule( props ) {
+	return (
+		<PrivatePostSchedule
+			{ ...props }
+			showPopoverHeaderActions
+			isCompact={ false }
+		/>
+	);
+}
+
+export function PrivatePostSchedule( {
+	onClose,
+	showPopoverHeaderActions,
+	isCompact,
+} ) {
 	const { postDate, postType } = useSelect(
 		( select ) => ( {
 			postDate: select( editorStore ).getEditedPostAttribute( 'date' ),
@@ -69,7 +94,7 @@ export default function PostSchedule( { onClose } ) {
 	);
 
 	return (
-		<PublishDateTimePicker
+		<PrivatePublishDateTimePicker
 			currentDate={ postDate }
 			onChange={ onUpdateDate }
 			is12Hour={ is12HourTime }
@@ -78,6 +103,8 @@ export default function PostSchedule( { onClose } ) {
 				setPreviewedMonth( parseISO( date ) )
 			}
 			onClose={ onClose }
+			isCompact={ isCompact }
+			showPopoverHeaderActions={ showPopoverHeaderActions }
 		/>
 	);
 }
diff --git a/packages/editor/src/components/post-schedule/label.js b/packages/editor/src/components/post-schedule/label.js
index 223eaaca06343..89e7d02d69ce7 100644
--- a/packages/editor/src/components/post-schedule/label.js
+++ b/packages/editor/src/components/post-schedule/label.js
@@ -10,10 +10,25 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the PostScheduleLabel component.
+ *
+ * @param {Object} props Props.
+ *
+ * @return {Component} The component to be rendered.
+ */
 export default function PostScheduleLabel( props ) {
 	return usePostScheduleLabel( props );
 }
 
+/**
+ * Custom hook to get the label for post schedule.
+ *
+ * @param {Object}  options      Options for the hook.
+ * @param {boolean} options.full Whether to get the full label or not. Default is false.
+ *
+ * @return {string} The label for post schedule.
+ */
 export function usePostScheduleLabel( { full = false } = {} ) {
 	const { date, isFloating } = useSelect(
 		( select ) => ( {
diff --git a/packages/editor/src/components/post-schedule/panel.js b/packages/editor/src/components/post-schedule/panel.js
index af7488561a1de..5d63da5e30c91 100644
--- a/packages/editor/src/components/post-schedule/panel.js
+++ b/packages/editor/src/components/post-schedule/panel.js
@@ -28,6 +28,11 @@ const DESIGN_POST_TYPES = [
 	NAVIGATION_POST_TYPE,
 ];
 
+/**
+ * Renders the Post Schedule Panel component.
+ *
+ * @return {Component} The component to be rendered.
+ */
 export default function PostSchedulePanel() {
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
 	const postType = useSelect(
@@ -41,7 +46,9 @@ export default function PostSchedulePanel() {
 			// move around when the label changes.
 			anchor: popoverAnchor,
 			'aria-label': __( 'Change publish date' ),
-			placement: 'bottom-end',
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
 		} ),
 		[ popoverAnchor ]
 	);
@@ -65,6 +72,7 @@ export default function PostSchedulePanel() {
 							size="compact"
 							className="editor-post-schedule__dialog-toggle"
 							variant="tertiary"
+							tooltipPosition="middle left"
 							onClick={ onToggle }
 							aria-label={ sprintf(
 								// translators: %s: Current post date.
diff --git a/packages/editor/src/components/post-schedule/style.scss b/packages/editor/src/components/post-schedule/style.scss
index 0b9d64a9ce140..02ea48016f969 100644
--- a/packages/editor/src/components/post-schedule/style.scss
+++ b/packages/editor/src/components/post-schedule/style.scss
@@ -8,14 +8,3 @@
 		padding: $grid-unit-20;
 	}
 }
-
-.editor-post-schedule__dialog-toggle.components-button {
-	overflow: hidden;
-	text-align: left;
-	white-space: unset;
-	height: auto;
-	min-height: $button-size-compact;
-
-	// The line height + the padding should be the same as the button size.
-	line-height: inherit;
-}
diff --git a/packages/edit-post/src/components/sidebar/post-slug/index.js b/packages/editor/src/components/post-slug/panel.js
similarity index 61%
rename from packages/edit-post/src/components/sidebar/post-slug/index.js
rename to packages/editor/src/components/post-slug/panel.js
index 8b52f94bd33f5..6ab97a28b251c 100644
--- a/packages/edit-post/src/components/sidebar/post-slug/index.js
+++ b/packages/editor/src/components/post-slug/panel.js
@@ -2,12 +2,17 @@
  * WordPress dependencies
  */
 import { PanelRow } from '@wordpress/components';
-import { PostSlug as PostSlugForm, PostSlugCheck } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import PostSlugForm from './';
+import PostSlugCheck from './check';
 
 export function PostSlug() {
 	return (
 		<PostSlugCheck>
-			<PanelRow className="edit-post-post-slug">
+			<PanelRow className="editor-post-slug">
 				<PostSlugForm />
 			</PanelRow>
 		</PostSlugCheck>
diff --git a/packages/edit-post/src/components/sidebar/post-slug/style.scss b/packages/editor/src/components/post-slug/style.scss
similarity index 74%
rename from packages/edit-post/src/components/sidebar/post-slug/style.scss
rename to packages/editor/src/components/post-slug/style.scss
index 067dfcb08d6f0..551450582128e 100644
--- a/packages/edit-post/src/components/sidebar/post-slug/style.scss
+++ b/packages/editor/src/components/post-slug/style.scss
@@ -1,4 +1,4 @@
-.edit-post-post-slug {
+.editor-post-slug {
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
diff --git a/packages/editor/src/components/post-slug/test/check.js b/packages/editor/src/components/post-slug/test/check.js
deleted file mode 100644
index 5b5b4ce8a440f..0000000000000
--- a/packages/editor/src/components/post-slug/test/check.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import PostSlugCheck from '../check';
-
-describe( 'PostSlugCheck', () => {
-	it( 'should render control', () => {
-		render( <PostSlugCheck>slug</PostSlugCheck> );
-
-		expect( screen.getByText( 'slug' ) ).toBeVisible();
-	} );
-} );
diff --git a/packages/editor/src/components/post-slug/test/index.js b/packages/editor/src/components/post-slug/test/index.js
index 81f254ba6363f..fb40055111b77 100644
--- a/packages/editor/src/components/post-slug/test/index.js
+++ b/packages/editor/src/components/post-slug/test/index.js
@@ -26,7 +26,11 @@ describe( 'PostSlug', () => {
 
 		useSelect.mockImplementation( ( mapSelect ) =>
 			mapSelect( () => ( {
-				getPostType: () => null,
+				getPostType: () => ( {
+					supports: {
+						slug: true,
+					},
+				} ),
 				getEditedPostAttribute: () => 'post',
 				getEditedPostSlug: () => '1',
 			} ) )
diff --git a/packages/editor/src/components/post-status/index.js b/packages/editor/src/components/post-status/index.js
index b645d8c820bc2..571898779c531 100644
--- a/packages/editor/src/components/post-status/index.js
+++ b/packages/editor/src/components/post-status/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -15,13 +10,12 @@ import {
 	TextControl,
 	RadioControl,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useState, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 import { useInstanceId } from '@wordpress/compose';
-import { Icon, chevronDownSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -33,44 +27,17 @@ import {
 	NAVIGATION_POST_TYPE,
 } from '../../store/constants';
 import PostPanelRow from '../post-panel-row';
+import { PrivatePostSchedule } from '../post-schedule';
 import { store as editorStore } from '../../store';
 
-function PostStatusLabel( { canEdit } ) {
-	const status = useSelect(
-		( select ) => select( editorStore ).getEditedPostAttribute( 'status' ),
-		[]
-	);
-	let statusLabel;
-	switch ( status ) {
-		case 'publish':
-			statusLabel = __( 'Published' );
-			break;
-		case 'future':
-			statusLabel = __( 'Scheduled' );
-			break;
-		case 'draft':
-		case 'auto-draft':
-			statusLabel = __( 'Draft' );
-			break;
-		case 'pending':
-			statusLabel = __( 'Pending review' );
-			break;
-		case 'private':
-			statusLabel = __( 'Published privately' );
-			break;
-	}
-	return (
-		<Text
-			className={ classnames( 'editor-post-status-label', {
-				[ ` has-status-${ status }` ]: !! status,
-				'has-icon': canEdit,
-			} ) }
-		>
-			{ statusLabel }
-			{ canEdit && <Icon icon={ chevronDownSmall } /> }
-		</Text>
-	);
-}
+const labels = {
+	'auto-draft': __( 'Draft' ),
+	draft: __( 'Draft' ),
+	pending: __( 'Pending' ),
+	private: __( 'Private' ),
+	future: __( 'Scheduled' ),
+	publish: __( 'Published' ),
+};
 
 const STATUS_OPTIONS = [
 	{
@@ -208,11 +175,6 @@ export default function PostStatus() {
 		let newPassword = password;
 		if ( status === 'future' && new Date( date ) > new Date() ) {
 			newDate = null;
-		} else if ( value === 'future' ) {
-			if ( ! date || new Date( date ) < new Date() ) {
-				newDate = new Date();
-				newDate.setDate( newDate.getDate() + 7 );
-			}
 		}
 		if ( value === 'private' && password ) {
 			newPassword = '';
@@ -234,10 +196,16 @@ export default function PostStatus() {
 					focusOnMount
 					renderToggle={ ( { onToggle } ) => (
 						<Button
-							className="editor-post-status-trigger"
+							variant="tertiary"
+							size="compact"
 							onClick={ onToggle }
+							aria-label={ sprintf(
+								// translators: %s: Current post status.
+								__( 'Change post status: %s' ),
+								labels[ status ]
+							) }
 						>
-							<PostStatusLabel canEdit={ canEdit } />
+							{ labels[ status ] }
 						</Button>
 					) }
 					renderContent={ ( { onClose } ) => (
@@ -260,6 +228,16 @@ export default function PostStatus() {
 												: status
 										}
 									/>
+									{ status === 'future' && (
+										<div className="editor-change-status__publish-date-wrapper">
+											<PrivatePostSchedule
+												showPopoverHeaderActions={
+													false
+												}
+												isCompact
+											/>
+										</div>
+									) }
 									{ status !== 'private' && (
 										<VStack
 											as="fieldset"
@@ -309,8 +287,8 @@ export default function PostStatus() {
 					) }
 				/>
 			) : (
-				<div className="editor-post-status">
-					<PostStatusLabel />
+				<div className="editor-post-status is-read-only">
+					{ labels[ status ] }
 				</div>
 			) }
 		</PostPanelRow>
diff --git a/packages/editor/src/components/post-status/style.scss b/packages/editor/src/components/post-status/style.scss
index 5c4e3f9758bcd..bd921218ebbb8 100644
--- a/packages/editor/src/components/post-status/style.scss
+++ b/packages/editor/src/components/post-status/style.scss
@@ -1,43 +1,13 @@
 .editor-post-status {
 	max-width: 100%;
 
-	.editor-post-status-trigger {
-		padding: 1px;
-		height: auto;
-		border-radius: $grid-unit-20;
-	}
-
-	.editor-post-status-label {
-		border-radius: $grid-unit-20;
-		display: inline-flex;
-		padding: 0 $grid-unit-15 0 $grid-unit-15;
-		background: rgba($gray-900, 0.04);
-		height: $button-size-compact;
-		align-items: center;
-		color: $gray-900;
-
-		&.has-icon {
-			padding: 0 $grid-unit-10 0 $grid-unit-15;
-
-			&:hover {
-				background: rgba($gray-900, 0.08);
-			}
-		}
-
-		&.has-status-publish,
-		&.has-status-private,
-		&.has-status-future {
-			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-			color: var(--wp-admin-theme-color);
-
-			&:hover {
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
-			}
-		}
+	&.is-read-only {
+		padding: 6px 12px;
 	}
 }
 
-.editor-change-status__password-fieldset {
+.editor-change-status__password-fieldset,
+.editor-change-status__publish-date-wrapper {
 	border-top: $border-width solid $gray-200;
 	padding-top: $grid-unit-20;
 }
diff --git a/packages/editor/src/components/post-sticky/index.js b/packages/editor/src/components/post-sticky/index.js
index fe8820243962b..f3d3085da7fd6 100644
--- a/packages/editor/src/components/post-sticky/index.js
+++ b/packages/editor/src/components/post-sticky/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
+import { ToggleControl, VisuallyHidden } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
@@ -10,6 +10,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
  */
 import PostStickyCheck from './check';
 import { store as editorStore } from '../../store';
+import PostPanelRow from '../post-panel-row';
 
 export default function PostSticky() {
 	const postSticky = useSelect( ( select ) => {
@@ -21,12 +22,16 @@ export default function PostSticky() {
 
 	return (
 		<PostStickyCheck>
-			<CheckboxControl
-				__nextHasNoMarginBottom
-				label={ __( 'Stick to the top of the blog' ) }
-				checked={ postSticky }
-				onChange={ () => editPost( { sticky: ! postSticky } ) }
-			/>
+			<PostPanelRow label={ __( 'Sticky' ) }>
+				<ToggleControl
+					className="editor-post-sticky__toggle-control"
+					label={
+						<VisuallyHidden>{ __( 'Sticky' ) }</VisuallyHidden>
+					}
+					checked={ postSticky }
+					onChange={ () => editPost( { sticky: ! postSticky } ) }
+				/>
+			</PostPanelRow>
 		</PostStickyCheck>
 	);
 }
diff --git a/packages/editor/src/components/post-sticky/panel.js b/packages/editor/src/components/post-sticky/panel.js
new file mode 100644
index 0000000000000..b5ede0c1ab882
--- /dev/null
+++ b/packages/editor/src/components/post-sticky/panel.js
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import PostPanelRow from '../post-panel-row';
+import PostStickyForm from './';
+import PostStickyCheck from './check';
+
+export function PostStickyPanel() {
+	return (
+		<PostStickyCheck>
+			<PostPanelRow>
+				<PostStickyForm />
+			</PostPanelRow>
+		</PostStickyCheck>
+	);
+}
+
+export default PostStickyPanel;
diff --git a/packages/editor/src/components/post-sticky/style.scss b/packages/editor/src/components/post-sticky/style.scss
new file mode 100644
index 0000000000000..bc610c7f3ca0d
--- /dev/null
+++ b/packages/editor/src/components/post-sticky/style.scss
@@ -0,0 +1,3 @@
+.editor-post-sticky__toggle-control {
+	padding: 6px 12px;
+}
diff --git a/packages/editor/src/components/post-template/block-theme.js b/packages/editor/src/components/post-template/block-theme.js
index 9abacc0de3a7f..189b967e2cd1c 100644
--- a/packages/editor/src/components/post-template/block-theme.js
+++ b/packages/editor/src/components/post-template/block-theme.js
@@ -78,6 +78,7 @@ export default function BlockThemeControl( { id } ) {
 			toggleProps={ {
 				size: 'compact',
 				variant: 'tertiary',
+				tooltipPosition: 'middle left',
 			} }
 			label={ __( 'Template options' ) }
 			text={ decodeEntities( template.title ) }
diff --git a/packages/editor/src/components/post-template/classic-theme.js b/packages/editor/src/components/post-template/classic-theme.js
index fb8835c720321..877b3bc3c53dc 100644
--- a/packages/editor/src/components/post-template/classic-theme.js
+++ b/packages/editor/src/components/post-template/classic-theme.js
@@ -55,6 +55,14 @@ function PostTemplateToggle( { isOpen, onClick } ) {
 	);
 }
 
+/**
+ * Renders the dropdown content for selecting a post template.
+ *
+ * @param {Object}   props         The component props.
+ * @param {Function} props.onClose The function to close the dropdown.
+ *
+ * @return {JSX.Element} The rendered dropdown content.
+ */
 function PostTemplateDropdownContent( { onClose } ) {
 	const allowSwitchingTemplate = useAllowSwitchingTemplates();
 	const {
@@ -216,4 +224,11 @@ function ClassicThemeControl() {
 	);
 }
 
+/**
+ * Provides a dropdown menu for selecting and managing post templates.
+ *
+ * The dropdown menu includes a button for toggling the menu, a list of available templates, and options for creating and editing templates.
+ *
+ * @return {JSX.Element} The rendered ClassicThemeControl component.
+ */
 export default ClassicThemeControl;
diff --git a/packages/editor/src/components/post-template/panel.js b/packages/editor/src/components/post-template/panel.js
index 1a0df3995ede7..3986ff43afb0e 100644
--- a/packages/editor/src/components/post-template/panel.js
+++ b/packages/editor/src/components/post-template/panel.js
@@ -13,6 +13,11 @@ import ClassicThemeControl from './classic-theme';
 import BlockThemeControl from './block-theme';
 import PostPanelRow from '../post-panel-row';
 
+/**
+ * Displays the template controls based on the current editor settings and user permissions.
+ *
+ * @return {JSX.Element|null} The rendered PostTemplatePanel component.
+ */
 export default function PostTemplatePanel() {
 	const { templateId, isBlockTheme } = useSelect( ( select ) => {
 		const { getCurrentTemplateId, getEditorSettings } =
diff --git a/packages/editor/src/components/post-template/style.scss b/packages/editor/src/components/post-template/style.scss
index c969654a53265..749dfcf4c3183 100644
--- a/packages/editor/src/components/post-template/style.scss
+++ b/packages/editor/src/components/post-template/style.scss
@@ -20,14 +20,6 @@
 	.block-editor-block-patterns-list__list-item {
 		break-inside: avoid-column;
 	}
-
-	.block-editor-block-patterns-list__item {
-		// Avoid to override the BlockPatternList component
-		// default hover and focus styles.
-		&:not(:focus):not(:hover) .block-editor-block-preview__container {
-			box-shadow: 0 0 0 1px $gray-300;
-		}
-	}
 }
 
 .editor-post-template__dropdown {
diff --git a/packages/editor/src/components/post-text-editor/index.js b/packages/editor/src/components/post-text-editor/index.js
index c07d72f15c4a9..c3dc61a0b4a2e 100644
--- a/packages/editor/src/components/post-text-editor/index.js
+++ b/packages/editor/src/components/post-text-editor/index.js
@@ -19,6 +19,11 @@ import { VisuallyHidden } from '@wordpress/components';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Displays the Post Text Editor along with content in Visual and Text mode.
+ *
+ * @return {JSX.Element|null} The rendered PostTextEditor component.
+ */
 export default function PostTextEditor() {
 	const instanceId = useInstanceId( PostTextEditor );
 	const { content, blocks, type, id } = useSelect( ( select ) => {
diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js
index cbb2d10eff661..57ab39f006161 100644
--- a/packages/editor/src/components/post-title/index.js
+++ b/packages/editor/src/components/post-title/index.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -185,7 +184,7 @@ function PostTitle( _, forwardedRef ) {
 
 	// The wp-block className is important for editor styles.
 	// This same block is used in both the visual and the code editor.
-	const className = classnames( DEFAULT_CLASSNAMES, {
+	const className = clsx( DEFAULT_CLASSNAMES, {
 		'is-selected': isSelected,
 		'has-fixed-toolbar': hasFixedToolbar,
 	} );
@@ -211,4 +210,12 @@ function PostTitle( _, forwardedRef ) {
 	);
 }
 
+/**
+ * Renders the `PostTitle` component.
+ *
+ * @param {Object}  _            Unused parameter.
+ * @param {Element} forwardedRef Forwarded ref for the component.
+ *
+ * @return {Component} The rendered PostTitle component.
+ */
 export default forwardRef( PostTitle );
diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js
index dc7534c28a79f..751f1009ff25e 100644
--- a/packages/editor/src/components/post-title/index.native.js
+++ b/packages/editor/src/components/post-title/index.native.js
@@ -18,11 +18,67 @@ import { store as blockEditorStore, RichText } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
+/** @typedef {import('./types').RichTextValue} RichTextValue */
+
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
+/**
+ * Inserts content with title
+ *
+ * This function processes the given content and title, updating the title
+ * and content based on certain conditions. If the content is an array of
+ * blocks, it will check the first block for a heading or paragraph to use
+ * as the title. If the content is a string, it will strip HTML and update
+ * the title and content accordingly.
+ *
+ * @param {string}         title           The post title.
+ * @param {Array | string} content         The content to be processed. It can be an array of blocks or a string.
+ * @param {Function}       onUpdateTitle   Callback function to update the title.
+ * @param {Function}       onUpdateContent Callback function to update the content.
+ * @param {RichTextValue}  value           The initial value object, default is an object with empty text.
+ */
+export function insertContentWithTitle(
+	title,
+	content,
+	onUpdateTitle,
+	onUpdateContent,
+	value = create( { text: '' } )
+) {
+	if ( ! content.length ) {
+		return;
+	}
+
+	if ( typeof content !== 'string' ) {
+		const [ firstBlock ] = content;
+
+		if (
+			! title &&
+			( firstBlock.name === 'core/heading' ||
+				firstBlock.name === 'core/paragraph' )
+		) {
+			// Strip HTML to avoid unwanted HTML being added to the title.
+			// In the majority of cases it is assumed that HTML in the title
+			// is undesirable.
+			const contentNoHTML = stripHTML( firstBlock.attributes.content );
+			onUpdateTitle( contentNoHTML );
+			onUpdateContent( content.slice( 1 ) );
+		} else {
+			onUpdateContent( content );
+		}
+	} else {
+		// Strip HTML to avoid unwanted HTML being added to the title.
+		// In the majority of cases it is assumed that HTML in the title
+		// is undesirable.
+		const contentNoHTML = stripHTML( content );
+
+		const newValue = insert( value, create( { html: contentNoHTML } ) );
+		onUpdateTitle( toHTMLString( { value: newValue } ) );
+	}
+}
+
 class PostTitle extends Component {
 	constructor( props ) {
 		super( props );
@@ -59,45 +115,24 @@ class PostTitle extends Component {
 	}
 
 	onPaste( { value, plainText, html } ) {
-		const { title, onInsertBlockAfter, onUpdate } = this.props;
+		const {
+			title,
+			onInsertBlockAfter: onInsertBlocks,
+			onUpdate,
+		} = this.props;
 
 		const content = pasteHandler( {
 			HTML: html,
 			plainText,
 		} );
 
-		if ( ! content.length ) {
-			return;
-		}
-
-		if ( typeof content !== 'string' ) {
-			const [ firstBlock ] = content;
-
-			if (
-				! title &&
-				( firstBlock.name === 'core/heading' ||
-					firstBlock.name === 'core/paragraph' )
-			) {
-				// Strip HTML to avoid unwanted HTML being added to the title.
-				// In the majority of cases it is assumed that HTML in the title
-				// is undesirable.
-				const contentNoHTML = stripHTML(
-					firstBlock.attributes.content
-				);
-				onUpdate( contentNoHTML );
-				onInsertBlockAfter( content.slice( 1 ) );
-			} else {
-				onInsertBlockAfter( content );
-			}
-		} else {
-			// Strip HTML to avoid unwanted HTML being added to the title.
-			// In the majority of cases it is assumed that HTML in the title
-			// is undesirable.
-			const contentNoHTML = stripHTML( content );
-
-			const newValue = insert( value, create( { html: contentNoHTML } ) );
-			onUpdate( toHTMLString( { value: newValue } ) );
-		}
+		insertContentWithTitle(
+			title,
+			content,
+			onUpdate,
+			onInsertBlocks,
+			value
+		);
 	}
 
 	setRef( richText ) {
@@ -166,7 +201,7 @@ class PostTitle extends Component {
 				<RichText.Raw
 					ref={ this.setRef }
 					accessibilityLabel={ this.getTitle( title, postType ) }
-					tagName={ 'p' }
+					tagName="p"
 					tagsToEliminate={ [ 'strong' ] }
 					unstableOnFocus={ this.props.onSelect }
 					onBlur={ this.props.onBlur } // Always assign onBlur as a props.
@@ -174,7 +209,7 @@ class PostTitle extends Component {
 					styles={ styles }
 					fontSize={ 24 }
 					lineHeight={ 1 }
-					fontWeight={ 'bold' }
+					fontWeight="bold"
 					deleteEnter
 					onChange={ ( value ) => {
 						this.props.onUpdate( value );
diff --git a/packages/editor/src/components/post-title/post-title-raw.js b/packages/editor/src/components/post-title/post-title-raw.js
index 9a1b11b95415e..a4c9713a09492 100644
--- a/packages/editor/src/components/post-title/post-title-raw.js
+++ b/packages/editor/src/components/post-title/post-title-raw.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -20,6 +20,14 @@ import { DEFAULT_CLASSNAMES, REGEXP_NEWLINES } from './constants';
 import usePostTitleFocus from './use-post-title-focus';
 import usePostTitle from './use-post-title';
 
+/**
+ * Renders a raw post title input field.
+ *
+ * @param {Object}  _            Unused parameter.
+ * @param {Element} forwardedRef Reference to the component's DOM node.
+ *
+ * @return {Component} The rendered component.
+ */
 function PostTitleRaw( _, forwardedRef ) {
 	const { placeholder, hasFixedToolbar } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -51,7 +59,7 @@ function PostTitleRaw( _, forwardedRef ) {
 
 	// The wp-block className is important for editor styles.
 	// This same block is used in both the visual and the code editor.
-	const className = classnames( DEFAULT_CLASSNAMES, {
+	const className = clsx( DEFAULT_CLASSNAMES, {
 		'is-selected': isSelected,
 		'has-fixed-toolbar': hasFixedToolbar,
 		'is-raw-text': true,
diff --git a/packages/editor/src/components/post-title/use-post-title-focus.js b/packages/editor/src/components/post-title/use-post-title-focus.js
index effac53f2670a..127b7661462ba 100644
--- a/packages/editor/src/components/post-title/use-post-title-focus.js
+++ b/packages/editor/src/components/post-title/use-post-title-focus.js
@@ -9,6 +9,13 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Custom hook that manages the focus behavior of the post title input field.
+ *
+ * @param {Element} forwardedRef - The forwarded ref for the input field.
+ *
+ * @return {Object} - The ref object.
+ */
 export default function usePostTitleFocus( forwardedRef ) {
 	const ref = useRef();
 
diff --git a/packages/editor/src/components/post-title/use-post-title.js b/packages/editor/src/components/post-title/use-post-title.js
index 65bd67af6fb4c..d335064a52354 100644
--- a/packages/editor/src/components/post-title/use-post-title.js
+++ b/packages/editor/src/components/post-title/use-post-title.js
@@ -7,6 +7,11 @@ import { useSelect, useDispatch } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Custom hook for managing the post title in the editor.
+ *
+ * @return {Object} An object containing the current title and a function to update the title.
+ */
 export default function usePostTitle() {
 	const { editPost } = useDispatch( editorStore );
 	const { title } = useSelect( ( select ) => {
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/hooks.js b/packages/editor/src/components/post-transform-panel/hooks.js
similarity index 88%
rename from packages/edit-site/src/components/sidebar-edit-mode/template-panel/hooks.js
rename to packages/editor/src/components/post-transform-panel/hooks.js
index 128a74da39070..0f1ef74f0efff 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/hooks.js
+++ b/packages/editor/src/components/post-transform-panel/hooks.js
@@ -5,16 +5,16 @@ import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { parse } from '@wordpress/blocks';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
 
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../../store';
-import {
-	EXCLUDED_PATTERN_SOURCES,
-	PATTERN_TYPES,
-} from '../../../utils/constants';
-import { unlock } from '../../../lock-unlock';
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+const { EXCLUDED_PATTERN_SOURCES, PATTERN_TYPES } =
+	unlock( patternsPrivateApis );
 
 function injectThemeAttributeInBlockTemplateContent(
 	block,
@@ -67,7 +67,7 @@ function filterPatterns( patterns, template ) {
 	} );
 }
 
-function preparePatterns( patterns, template, currentThemeStylesheet ) {
+function preparePatterns( patterns, currentThemeStylesheet ) {
 	return patterns.map( ( pattern ) => ( {
 		...pattern,
 		keywords: pattern.keywords || [],
@@ -86,8 +86,8 @@ function preparePatterns( patterns, template, currentThemeStylesheet ) {
 export function useAvailablePatterns( template ) {
 	const { blockPatterns, restBlockPatterns, currentThemeStylesheet } =
 		useSelect( ( select ) => {
-			const { getSettings } = unlock( select( editSiteStore ) );
-			const settings = getSettings();
+			const { getEditorSettings } = select( editorStore );
+			const settings = getEditorSettings();
 
 			return {
 				blockPatterns:
diff --git a/packages/editor/src/components/post-transform-panel/index.js b/packages/editor/src/components/post-transform-panel/index.js
new file mode 100644
index 0000000000000..08139c2c3c664
--- /dev/null
+++ b/packages/editor/src/components/post-transform-panel/index.js
@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useAsyncList } from '@wordpress/compose';
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import { serialize } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { useAvailablePatterns } from './hooks';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+} from '../../store/constants';
+
+function TemplatesList( { availableTemplates, onSelect } ) {
+	const shownTemplates = useAsyncList( availableTemplates );
+	if ( ! availableTemplates || availableTemplates?.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<BlockPatternsList
+			label={ __( 'Templates' ) }
+			blockPatterns={ availableTemplates }
+			shownPatterns={ shownTemplates }
+			onClickPattern={ onSelect }
+			showTitlesAsTooltip
+		/>
+	);
+}
+
+function PostTransform() {
+	const { record, postType, postId } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const type = getCurrentPostType();
+		const id = getCurrentPostId();
+		return {
+			postType: type,
+			postId: id,
+			record: getEditedEntityRecord( 'postType', type, id ),
+		};
+	}, [] );
+	const { editEntityRecord } = useDispatch( coreStore );
+	const availablePatterns = useAvailablePatterns( record );
+	const onTemplateSelect = async ( selectedTemplate ) => {
+		await editEntityRecord( 'postType', postType, postId, {
+			blocks: selectedTemplate.blocks,
+			content: serialize( selectedTemplate.blocks ),
+		} );
+	};
+	if ( ! availablePatterns?.length ) {
+		return null;
+	}
+
+	return (
+		<PanelBody
+			title={ __( 'Design' ) }
+			initialOpen={ record.type === TEMPLATE_PART_POST_TYPE }
+		>
+			<TemplatesList
+				availableTemplates={ availablePatterns }
+				onSelect={ onTemplateSelect }
+			/>
+		</PanelBody>
+	);
+}
+
+export default function PostTransformPanel() {
+	const { postType } = useSelect( ( select ) => {
+		const { getCurrentPostType } = select( editorStore );
+		return {
+			postType: getCurrentPostType(),
+		};
+	}, [] );
+
+	if (
+		! [ TEMPLATE_PART_POST_TYPE, TEMPLATE_POST_TYPE ].includes( postType )
+	) {
+		return null;
+	}
+
+	return <PostTransform />;
+}
diff --git a/packages/editor/src/components/post-type-support-check/index.js b/packages/editor/src/components/post-type-support-check/index.js
index c716593f458f1..613fda8eb82da 100644
--- a/packages/editor/src/components/post-type-support-check/index.js
+++ b/packages/editor/src/components/post-type-support-check/index.js
@@ -27,7 +27,7 @@ function PostTypeSupportCheck( { children, supportKeys } ) {
 		const { getPostType } = select( coreStore );
 		return getPostType( getEditedPostAttribute( 'type' ) );
 	}, [] );
-	let isSupported = true;
+	let isSupported = !! postType;
 	if ( postType ) {
 		isSupported = (
 			Array.isArray( supportKeys ) ? supportKeys : [ supportKeys ]
diff --git a/packages/editor/src/components/post-type-support-check/test/index.js b/packages/editor/src/components/post-type-support-check/test/index.js
index 8acef8abacb6b..71b9f083a74a2 100644
--- a/packages/editor/src/components/post-type-support-check/test/index.js
+++ b/packages/editor/src/components/post-type-support-check/test/index.js
@@ -29,7 +29,7 @@ function setupUseSelectMock( postType ) {
 }
 
 describe( 'PostTypeSupportCheck', () => {
-	it( 'renders its children when post type is not known', () => {
+	it( 'does not render its children when post type is not known', () => {
 		setupUseSelectMock( undefined );
 
 		const { container } = render(
@@ -38,7 +38,7 @@ describe( 'PostTypeSupportCheck', () => {
 			</PostTypeSupportCheck>
 		);
 
-		expect( container ).toHaveTextContent( 'Supported' );
+		expect( container ).not.toHaveTextContent( 'Supported' );
 	} );
 
 	it( 'does not render its children when post type is known and not supports', () => {
diff --git a/packages/editor/src/components/post-url/check.js b/packages/editor/src/components/post-url/check.js
index 65c54846a702b..7eb390472bdd7 100644
--- a/packages/editor/src/components/post-url/check.js
+++ b/packages/editor/src/components/post-url/check.js
@@ -9,6 +9,14 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Check if the post URL is valid and visible.
+ *
+ * @param {Object}  props          The component props.
+ * @param {Element} props.children The child components.
+ *
+ * @return {Component|null} The child components if the post URL is valid and visible, otherwise null.
+ */
 export default function PostURLCheck( { children } ) {
 	const isVisible = useSelect( ( select ) => {
 		const postTypeSlug = select( editorStore ).getCurrentPostType();
diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js
index cf55e30473329..c2b2ac8826b20 100644
--- a/packages/editor/src/components/post-url/index.js
+++ b/packages/editor/src/components/post-url/index.js
@@ -21,37 +21,54 @@ import { useCopyToClipboard } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { usePostURLLabel } from './label';
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the `PostURL` component.
+ *
+ * @example
+ * ```jsx
+ * <PostURL />
+ * ```
+ *
+ * @param {Function} onClose Callback function to be executed when the popover is closed.
+ *
+ * @return {Component} The rendered PostURL component.
+ */
 export default function PostURL( { onClose } ) {
-	const { isEditable, postSlug, postLink, permalinkPrefix, permalinkSuffix } =
-		useSelect( ( select ) => {
-			const post = select( editorStore ).getCurrentPost();
-			const postTypeSlug = select( editorStore ).getCurrentPostType();
-			const postType = select( coreStore ).getPostType( postTypeSlug );
-			const permalinkParts = select( editorStore ).getPermalinkParts();
-			const hasPublishAction =
-				post?._links?.[ 'wp:action-publish' ] ?? false;
+	const {
+		isEditable,
+		postSlug,
+		postLink,
+		permalinkPrefix,
+		permalinkSuffix,
+		permalink,
+	} = useSelect( ( select ) => {
+		const post = select( editorStore ).getCurrentPost();
+		const postTypeSlug = select( editorStore ).getCurrentPostType();
+		const postType = select( coreStore ).getPostType( postTypeSlug );
+		const permalinkParts = select( editorStore ).getPermalinkParts();
+		const hasPublishAction = post?._links?.[ 'wp:action-publish' ] ?? false;
 
-			return {
-				isEditable:
-					select( editorStore ).isPermalinkEditable() &&
-					hasPublishAction,
-				postSlug: safeDecodeURIComponent(
-					select( editorStore ).getEditedPostSlug()
-				),
-				viewPostLabel: postType?.labels.view_item,
-				postLink: post.link,
-				permalinkPrefix: permalinkParts?.prefix,
-				permalinkSuffix: permalinkParts?.suffix,
-			};
-		}, [] );
+		return {
+			isEditable:
+				select( editorStore ).isPermalinkEditable() && hasPublishAction,
+			postSlug: safeDecodeURIComponent(
+				select( editorStore ).getEditedPostSlug()
+			),
+			viewPostLabel: postType?.labels.view_item,
+			postLink: post.link,
+			permalinkPrefix: permalinkParts?.prefix,
+			permalinkSuffix: permalinkParts?.suffix,
+			permalink: safeDecodeURIComponent(
+				select( editorStore ).getPermalink()
+			),
+		};
+	}, [] );
 	const { editPost } = useDispatch( editorStore );
 	const { createNotice } = useDispatch( noticesStore );
 	const [ forceEmptyField, setForceEmptyField ] = useState( false );
-	const postUrlLabel = usePostURLLabel();
-	const copyButtonRef = useCopyToClipboard( postUrlLabel, () => {
+	const copyButtonRef = useCopyToClipboard( permalink, () => {
 		createNotice( 'info', __( 'Copied URL to clipboard.' ), {
 			isDismissible: true,
 			type: 'snackbar',
diff --git a/packages/editor/src/components/post-url/label.js b/packages/editor/src/components/post-url/label.js
index 5c233dfd54946..4f03e2bce0d05 100644
--- a/packages/editor/src/components/post-url/label.js
+++ b/packages/editor/src/components/post-url/label.js
@@ -9,10 +9,20 @@ import { filterURLForDisplay, safeDecodeURIComponent } from '@wordpress/url';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Represents a label component for a post URL.
+ *
+ * @return {Component} The PostURLLabel component.
+ */
 export default function PostURLLabel() {
 	return usePostURLLabel();
 }
 
+/**
+ * Custom hook to get the label for the post URL.
+ *
+ * @return {string} The filtered and decoded post URL label.
+ */
 export function usePostURLLabel() {
 	const postLink = useSelect(
 		( select ) => select( editorStore ).getPermalink(),
diff --git a/packages/editor/src/components/post-url/panel.js b/packages/editor/src/components/post-url/panel.js
index c4a1cbba935c7..57294a983a375 100644
--- a/packages/editor/src/components/post-url/panel.js
+++ b/packages/editor/src/components/post-url/panel.js
@@ -15,6 +15,11 @@ import PostURL from './index';
 import PostPanelRow from '../post-panel-row';
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the `PostURLPanel` component.
+ *
+ * @return {JSX.Element} The rendered PostURLPanel component.
+ */
 export default function PostURLPanel() {
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
@@ -68,7 +73,7 @@ function PostURLToggle( { isOpen, onClick } ) {
 			aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
 			onClick={ onClick }
 		>
-			{ decodedSlug }
+			/{ decodedSlug }
 		</Button>
 	);
 }
diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss
index c622cfce33f90..a711402f1a82e 100644
--- a/packages/editor/src/components/post-url/style.scss
+++ b/packages/editor/src/components/post-url/style.scss
@@ -2,15 +2,6 @@
 	width: 100%;
 }
 
-.components-button.editor-post-url__panel-toggle {
-	display: block;
-	max-width: 100%;
-	overflow: hidden;
-	text-align: left;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
 .editor-post-url__panel-dialog .editor-post-url {
 	// sidebar width - popover padding - form margin
 	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
diff --git a/packages/editor/src/components/post-visibility/check.js b/packages/editor/src/components/post-visibility/check.js
index 116db0f546de2..19a241ae1110a 100644
--- a/packages/editor/src/components/post-visibility/check.js
+++ b/packages/editor/src/components/post-visibility/check.js
@@ -8,6 +8,15 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Determines if the current post can be edited (published)
+ * and passes this information to the provided render function.
+ *
+ * @param {Object}   props        The component props.
+ * @param {Function} props.render Function to render the component.
+ *                                Receives an object with a `canEdit` property.
+ * @return {JSX.Element} The rendered component.
+ */
 export default function PostVisibilityCheck( { render } ) {
 	const canEdit = useSelect( ( select ) => {
 		return (
diff --git a/packages/editor/src/components/post-visibility/index.js b/packages/editor/src/components/post-visibility/index.js
index 0dde8905cbb36..fef07d0033d36 100644
--- a/packages/editor/src/components/post-visibility/index.js
+++ b/packages/editor/src/components/post-visibility/index.js
@@ -17,6 +17,13 @@ import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '
 import { visibilityOptions } from './utils';
 import { store as editorStore } from '../../store';
 
+/**
+ * Allows users to set the visibility of a post.
+ *
+ * @param {Object}   props         The component props.
+ * @param {Function} props.onClose Function to call when the popover is closed.
+ * @return {JSX.Element} The rendered component.
+ */
 export default function PostVisibility( { onClose } ) {
 	const instanceId = useInstanceId( PostVisibility );
 
diff --git a/packages/editor/src/components/post-visibility/label.js b/packages/editor/src/components/post-visibility/label.js
index 580eed75620b4..50a6e14aa1a14 100644
--- a/packages/editor/src/components/post-visibility/label.js
+++ b/packages/editor/src/components/post-visibility/label.js
@@ -9,10 +9,20 @@ import { useSelect } from '@wordpress/data';
 import { visibilityOptions } from './utils';
 import { store as editorStore } from '../../store';
 
+/**
+ * Returns the label for the current post visibility setting.
+ *
+ * @return {string} Post visibility label.
+ */
 export default function PostVisibilityLabel() {
 	return usePostVisibilityLabel();
 }
 
+/**
+ * Get the label for the current post visibility setting.
+ *
+ * @return {string} Post visibility label.
+ */
 export function usePostVisibilityLabel() {
 	const visibility = useSelect( ( select ) =>
 		select( editorStore ).getEditedPostVisibility()
diff --git a/packages/editor/src/components/posts-per-page/index.js b/packages/editor/src/components/posts-per-page/index.js
new file mode 100644
index 0000000000000..d62d250d9f3d3
--- /dev/null
+++ b/packages/editor/src/components/posts-per-page/index.js
@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	Button,
+	Dropdown,
+	__experimentalNumberControl as NumberControl,
+} from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+import { store as editorStore } from '../../store';
+import PostPanelRow from '../post-panel-row';
+
+export default function PostsPerPage() {
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { postsPerPage, isTemplate, postSlug } = useSelect( ( select ) => {
+		const { getEditedPostAttribute, getCurrentPostType } =
+			select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const siteSettings = getEditedEntityRecord( 'root', 'site' );
+		return {
+			isTemplate: getCurrentPostType() === TEMPLATE_POST_TYPE,
+			postSlug: getEditedPostAttribute( 'slug' ),
+			postsPerPage: siteSettings?.posts_per_page || 1,
+		};
+	}, [] );
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	if ( ! isTemplate || ! [ 'home', 'index' ].includes( postSlug ) ) {
+		return null;
+	}
+	const setPostsPerPage = ( newValue ) => {
+		editEntityRecord( 'root', 'site', undefined, {
+			posts_per_page: newValue,
+		} );
+	};
+	return (
+		<PostPanelRow label={ __( 'Posts per page' ) } ref={ setPopoverAnchor }>
+			<Dropdown
+				popoverProps={ popoverProps }
+				contentClassName="editor-posts-per-page-dropdown__content"
+				focusOnMount
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<Button
+						size="compact"
+						variant="tertiary"
+						aria-expanded={ isOpen }
+						aria-label={ __( 'Change posts per page' ) }
+						onClick={ onToggle }
+					>
+						{ postsPerPage }
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<>
+						<InspectorPopoverHeader
+							title={ __( 'Posts per page' ) }
+							onClose={ onClose }
+						/>
+						<NumberControl
+							placeholder={ 0 }
+							value={ postsPerPage }
+							size="__unstable-large"
+							spinControls="custom"
+							step="1"
+							min="1"
+							onChange={ setPostsPerPage }
+							label={ __( 'Posts per page' ) }
+							help={ __(
+								'Set the default number of posts to display on blog pages, including categories and tags. Some templates may override this setting.'
+							) }
+							hideLabelFromVision
+						/>
+					</>
+				) }
+			/>
+		</PostPanelRow>
+	);
+}
diff --git a/packages/editor/src/components/posts-per-page/style.scss b/packages/editor/src/components/posts-per-page/style.scss
new file mode 100644
index 0000000000000..e77e9b3320632
--- /dev/null
+++ b/packages/editor/src/components/posts-per-page/style.scss
@@ -0,0 +1,4 @@
+.editor-posts-per-page-dropdown__content .components-popover__content {
+	min-width: 320px;
+	padding: $grid-unit-20;
+}
diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js
index 46e0f9e9a5a56..f3378d76d994b 100644
--- a/packages/editor/src/components/preferences-modal/index.js
+++ b/packages/editor/src/components/preferences-modal/index.js
@@ -70,9 +70,9 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 								scope="core"
 								featureName="showListViewByDefault"
 								help={ __(
-									'Opens the block list view sidebar by default.'
+									'Opens the List View sidebar by default.'
 								) }
-								label={ __( 'Always open list view' ) }
+								label={ __( 'Always open List View' ) }
 							/>
 							{ showBlockBreadcrumbsOption && (
 								<PreferenceToggleControl
@@ -88,7 +88,7 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 								scope="core"
 								featureName="allowRightClickOverrides"
 								help={ __(
-									'Allows contextual list view menus via right-click, overriding browser defaults.'
+									'Allows contextual List View menus via right-click, overriding browser defaults.'
 								) }
 								label={ __(
 									'Allow right-click contextual menus'
diff --git a/packages/editor/src/components/provider/README.md b/packages/editor/src/components/provider/README.md
deleted file mode 100644
index deaa9375bba74..0000000000000
--- a/packages/editor/src/components/provider/README.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# EditorProvider
-
-EditorProvider is a component which establishes a new post editing context, and serves as the entry point for a new post editor (or post with template editor). 
-
-It supports a big number of post types, including post, page, templates, custom post types, patterns, template parts.
-
-All modification and changes are performed to the `@wordpress/core-data` store.
-
-## Props
-
-### `post`
-
--   **Type:** `Object`
--   **Required** `yes`
-
-The post object to edit
-
-### `__unstableTemplate`
-
--   **Type:** `Object`
--   **Required** `no`
-
-The template object wrapper the edited post. This is optional and can only be used when the post type supports templates (like posts and pages).
-
-### `settings`
-
--   **Type:** `Object`
--   **Required** `no`
-
-The settings object to use for the editor. This is optional and can be used to override the default settings.
-
-### `children`
-
--   **Type:** `Element`
--   **Required** `no`
-
-Children elements for which the BlockEditorProvider context should apply.
diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
index df0fb488c69dc..081b1cdfa0f1b 100644
--- a/packages/editor/src/components/provider/index.js
+++ b/packages/editor/src/components/provider/index.js
@@ -28,6 +28,11 @@ import useCommands from '../commands';
 import BlockRemovalWarnings from '../block-removal-warnings';
 import StartPageOptions from '../start-page-options';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
+import ContentOnlySettingsMenu from '../block-settings-menu/content-only-settings-menu';
+import StartTemplateOptions from '../start-template-options';
+import EditorKeyboardShortcuts from '../global-keyboard-shortcuts';
+import PatternRenameModal from '../pattern-rename-modal';
+import PatternDuplicateModal from '../pattern-duplicate-modal';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
@@ -54,6 +59,12 @@ const NON_CONTEXTUAL_POST_TYPES = [
  * @param {Array}   post     Block list.
  * @param {boolean} template Whether the page content has focus (and the surrounding template is inert). If `true` return page content blocks. Default `false`.
  * @param {string}  mode     Rendering mode.
+ *
+ * @example
+ * ```jsx
+ * const [ blocks, onInput, onChange ] = useBlockEditorProps( post, template, mode );
+ * ```
+ *
  * @return {Array} Block editor props.
  */
 function useBlockEditorProps( post, template, mode ) {
@@ -113,6 +124,32 @@ function useBlockEditorProps( post, template, mode ) {
 	];
 }
 
+/**
+ * This component provides the editor context and manages the state of the block editor.
+ *
+ * @param {Object}  props                                The component props.
+ * @param {Object}  props.post                           The post object.
+ * @param {Object}  props.settings                       The editor settings.
+ * @param {boolean} props.recovery                       Indicates if the editor is in recovery mode.
+ * @param {Array}   props.initialEdits                   The initial edits for the editor.
+ * @param {Object}  props.children                       The child components.
+ * @param {Object}  [props.BlockEditorProviderComponent] The block editor provider component to use. Defaults to ExperimentalBlockEditorProvider.
+ * @param {Object}  [props.__unstableTemplate]           The template object.
+ *
+ * @example
+ * ```jsx
+ * <ExperimentalEditorProvider
+ *   post={ post }
+ *   settings={ settings }
+ *   recovery={ recovery }
+ *   initialEdits={ initialEdits }
+ *   __unstableTemplate={ template }
+ * >
+ *   { children }
+ * </ExperimentalEditorProvider>
+ *
+ * @return {Object} The rendered ExperimentalEditorProvider component.
+ */
 export const ExperimentalEditorProvider = withRegistryProvider(
 	( {
 		post,
@@ -264,15 +301,20 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 							{ ! settings.__unstableIsPreviewMode && (
 								<>
 									<PatternsMenuItems />
+									<ContentOnlySettingsMenu />
 									{ mode === 'template-locked' && (
 										<DisableNonPageContentBlocks />
 									) }
 									{ type === 'wp_navigation' && (
 										<NavigationBlockEditingMode />
 									) }
+									<EditorKeyboardShortcuts />
 									<KeyboardShortcutHelpModal />
 									<BlockRemovalWarnings />
 									<StartPageOptions />
+									<StartTemplateOptions />
+									<PatternRenameModal />
+									<PatternDuplicateModal />
 								</>
 							) }
 						</BlockEditorProviderComponent>
@@ -283,6 +325,36 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 	}
 );
 
+/**
+ * This component establishes a new post editing context, and serves as the entry point for a new post editor (or post with template editor).
+ *
+ * It supports a large number of post types, including post, page, templates,
+ * custom post types, patterns, template parts.
+ *
+ * All modification and changes are performed to the `@wordpress/core-data` store.
+ *
+ * @param {Object}  props                      The component props.
+ * @param {Object}  [props.post]               The post object to edit. This is required.
+ * @param {Object}  [props.__unstableTemplate] The template object wrapper the edited post.
+ *                                             This is optional and can only be used when the post type supports templates (like posts and pages).
+ * @param {Object}  [props.settings]           The settings object to use for the editor.
+ *                                             This is optional and can be used to override the default settings.
+ * @param {Element} [props.children]           Children elements for which the BlockEditorProvider context should apply.
+ *                                             This is optional.
+ *
+ * @example
+ * ```jsx
+ * <EditorProvider
+ *   post={ post }
+ *   settings={ settings }
+ *   __unstableTemplate={ template }
+ * >
+ *   { children }
+ * </EditorProvider>
+ * ```
+ *
+ * @return {JSX.Element} The rendered EditorProvider component.
+ */
 export function EditorProvider( props ) {
 	return (
 		<ExperimentalEditorProvider
diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js
index fe0b5fcf9f10b..335f39afd414d 100644
--- a/packages/editor/src/components/provider/index.native.js
+++ b/packages/editor/src/components/provider/index.native.js
@@ -21,6 +21,7 @@ import RNReactNativeGutenbergBridge, {
 	subscribeUpdateCapabilities,
 	subscribeShowNotice,
 	subscribeShowEditorHelp,
+	subscribeToContentUpdate,
 } from '@wordpress/react-native-bridge';
 import { Component } from '@wordpress/element';
 import { count as wordCount } from '@wordpress/wordcount';
@@ -30,12 +31,16 @@ import {
 	getUnregisteredTypeHandlerName,
 	getBlockType,
 	createBlock,
+	pasteHandler,
 } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { applyFilters } from '@wordpress/hooks';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { getGlobalStyles, getColorsAndGradients } from '@wordpress/components';
+import {
+	store as blockEditorStore,
+	getGlobalStyles,
+	getColorsAndGradients,
+} from '@wordpress/block-editor';
 import { NEW_BLOCK_TYPES } from '@wordpress/block-library';
 import { __ } from '@wordpress/i18n';
 
@@ -64,6 +69,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import EditorProvider from './index.js';
+import { insertContentWithTitle } from '../post-title';
 
 class NativeEditorProvider extends Component {
 	constructor() {
@@ -79,6 +85,7 @@ class NativeEditorProvider extends Component {
 		);
 
 		this.onHardwareBackPress = this.onHardwareBackPress.bind( this );
+		this.onContentUpdate = this.onContentUpdate.bind( this );
 
 		this.getEditorSettings = memize(
 			( settings, capabilities ) => ( {
@@ -197,6 +204,12 @@ class NativeEditorProvider extends Component {
 			this.onHardwareBackPress
 		);
 
+		this.subscriptionOnContentUpdate = subscribeToContentUpdate(
+			( data ) => {
+				this.onContentUpdate( data );
+			}
+		);
+
 		// Request current block impressions from native app.
 		requestBlockTypeImpressions( ( storedImpressions ) => {
 			const impressions = { ...NEW_BLOCK_TYPES, ...storedImpressions };
@@ -260,6 +273,10 @@ class NativeEditorProvider extends Component {
 		if ( this.hardwareBackPressListener ) {
 			this.hardwareBackPressListener.remove();
 		}
+
+		if ( this.subscriptionOnContentUpdate ) {
+			this.subscriptionOnContentUpdate.remove();
+		}
 	}
 
 	getThemeColors( { rawStyles, rawFeatures } ) {
@@ -300,6 +317,21 @@ class NativeEditorProvider extends Component {
 		return false;
 	}
 
+	onContentUpdate( { content: rawContent } ) {
+		const {
+			editTitle,
+			onClearPostTitleSelection,
+			onInsertBlockAfter: onInsertBlocks,
+			title,
+		} = this.props;
+		const content = pasteHandler( {
+			plainText: rawContent,
+		} );
+
+		insertContentWithTitle( title, content, editTitle, onInsertBlocks );
+		onClearPostTitleSelection();
+	}
+
 	serializeToNativeAction() {
 		const title = this.props.title;
 		let html;
@@ -420,11 +452,13 @@ const ComposedNativeProvider = compose( [
 			resetEditorBlocks,
 			updateEditorSettings,
 			switchEditorMode,
+			togglePostTitleSelection,
 		} = dispatch( editorStore );
 		const {
 			clearSelectedBlock,
 			updateSettings,
 			insertBlock,
+			insertBlocks,
 			replaceBlock,
 		} = dispatch( blockEditorStore );
 		const { addEntities, receiveEntityRecords } = dispatch( coreStore );
@@ -436,6 +470,7 @@ const ComposedNativeProvider = compose( [
 			updateEditorSettings,
 			addEntities,
 			insertBlock,
+			insertBlocks,
 			createSuccessNotice,
 			createErrorNotice,
 			clearSelectedBlock,
@@ -451,6 +486,12 @@ const ComposedNativeProvider = compose( [
 			switchMode( mode ) {
 				switchEditorMode( mode );
 			},
+			onInsertBlockAfter( blocks ) {
+				insertBlocks( blocks, undefined, undefined, false );
+			},
+			onClearPostTitleSelection() {
+				togglePostTitleSelection( false );
+			},
 			replaceBlock,
 		};
 	} ),
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 bcd0885614183..2917c6905e3f0 100644
--- a/packages/editor/src/components/provider/use-block-editor-settings.js
+++ b/packages/editor/src/components/provider/use-block-editor-settings.js
@@ -24,8 +24,10 @@ import inserterMediaCategories from '../media-categories';
 import { mediaUpload } from '../../utils';
 import { store as editorStore } from '../../store';
 import { lock, unlock } from '../../lock-unlock';
+import { useGlobalStylesContext } from '../global-styles-provider';
 
 const EMPTY_BLOCKS_LIST = [];
+const DEFAULT_STYLES = {};
 
 function __experimentalReusableBlocksSelect( select ) {
 	return (
@@ -86,6 +88,9 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__experimentalArchiveTitleNameLabel',
 ];
 
+const { globalStylesDataKey, selectBlockPatternsKey, reusableBlocksSelectKey } =
+	unlock( privateApis );
+
 /**
  * React hook used to compute the block editor settings to use for the post editor.
  *
@@ -173,6 +178,9 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		[ postType, postId, isLargeViewport, renderingMode ]
 	);
 
+	const { merged: mergedGlobalStyles } = useGlobalStylesContext();
+	const globalStylesData = mergedGlobalStyles.styles ?? DEFAULT_STYLES;
+
 	const settingsBlockPatterns =
 		settings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
 		settings.__experimentalBlockPatterns; // WP 5.9
@@ -259,6 +267,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 					BLOCK_EDITOR_SETTINGS.includes( key )
 				)
 			),
+			[ globalStylesDataKey ]: globalStylesData,
 			allowedBlockTypes,
 			allowRightClickOverrides,
 			focusMode: focusMode && ! forceDisableFocusMode,
@@ -267,12 +276,15 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			keepCaretInsideBlock,
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
 			__experimentalBlockPatterns: blockPatterns,
-			[ unlock( privateApis ).selectBlockPatternsKey ]: ( select ) =>
-				unlock( select( coreStore ) ).getBlockPatternsForPostType(
-					postType
-				),
-			[ unlock( privateApis ).reusableBlocksSelectKey ]:
-				__experimentalReusableBlocksSelect,
+			[ selectBlockPatternsKey ]: ( select ) => {
+				const { hasFinishedResolution, getBlockPatternsForPostType } =
+					unlock( select( coreStore ) );
+				const patterns = getBlockPatternsForPostType( postType );
+				return hasFinishedResolution( 'getBlockPatterns' )
+					? patterns
+					: undefined;
+			},
+			[ reusableBlocksSelectKey ]: __experimentalReusableBlocksSelect,
 			__experimentalBlockPatternCategories: blockPatternCategories,
 			__experimentalUserPatternCategories: userPatternCategories,
 			__experimentalFetchLinkSuggestions: ( search, searchOptions ) =>
@@ -327,6 +339,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		postType,
 		setIsInserterOpened,
 		sectionRootClientId,
+		globalStylesData,
 	] );
 }
 
diff --git a/packages/editor/src/components/provider/with-registry-provider.js b/packages/editor/src/components/provider/with-registry-provider.js
index 32c30a9f8d687..cebbb766ff942 100644
--- a/packages/editor/src/components/provider/with-registry-provider.js
+++ b/packages/editor/src/components/provider/with-registry-provider.js
@@ -1,12 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
-import {
-	withRegistry,
-	createRegistry,
-	RegistryProvider,
-} from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { useRegistry, createRegistry, RegistryProvider } from '@wordpress/data';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { storeConfig as blockEditorStoreConfig } from '@wordpress/block-editor';
 
@@ -15,41 +11,46 @@ import { storeConfig as blockEditorStoreConfig } from '@wordpress/block-editor';
  */
 import { storeConfig } from '../../store';
 
+function getSubRegistry( subRegistries, registry, useSubRegistry ) {
+	if ( ! useSubRegistry ) {
+		return registry;
+	}
+	let subRegistry = subRegistries.get( registry );
+	if ( ! subRegistry ) {
+		subRegistry = createRegistry(
+			{
+				'core/block-editor': blockEditorStoreConfig,
+			},
+			registry
+		);
+		// Todo: The interface store should also be created per instance.
+		subRegistry.registerStore( 'core/editor', storeConfig );
+		subRegistries.set( registry, subRegistry );
+	}
+	return subRegistry;
+}
+
 const withRegistryProvider = createHigherOrderComponent(
 	( WrappedComponent ) =>
-		withRegistry( ( props ) => {
-			const {
-				useSubRegistry = true,
+		( { useSubRegistry = true, ...props } ) => {
+			const registry = useRegistry();
+			const [ subRegistries ] = useState( () => new WeakMap() );
+			const subRegistry = getSubRegistry(
+				subRegistries,
 				registry,
-				...additionalProps
-			} = props;
-			if ( ! useSubRegistry ) {
-				return <WrappedComponent { ...additionalProps } />;
-			}
-
-			const [ subRegistry, setSubRegistry ] = useState( null );
-			useEffect( () => {
-				const newRegistry = createRegistry(
-					{
-						'core/block-editor': blockEditorStoreConfig,
-					},
-					registry
-				);
-				// Todo: The interface store should also be created per instance.
-				newRegistry.registerStore( 'core/editor', storeConfig );
-				setSubRegistry( newRegistry );
-			}, [ registry ] );
+				useSubRegistry
+			);
 
-			if ( ! subRegistry ) {
-				return null;
+			if ( subRegistry === registry ) {
+				return <WrappedComponent registry={ registry } { ...props } />;
 			}
 
 			return (
 				<RegistryProvider value={ subRegistry }>
-					<WrappedComponent { ...additionalProps } />
+					<WrappedComponent registry={ subRegistry } { ...props } />
 				</RegistryProvider>
 			);
-		} ),
+		},
 	'withRegistryProvider'
 );
 
diff --git a/packages/edit-site/src/components/block-editor/resizable-editor.js b/packages/editor/src/components/resizable-editor/index.js
similarity index 88%
rename from packages/edit-site/src/components/block-editor/resizable-editor.js
rename to packages/editor/src/components/resizable-editor/index.js
index eda5848cff206..7d8e26049389a 100644
--- a/packages/edit-site/src/components/block-editor/resizable-editor.js
+++ b/packages/editor/src/components/resizable-editor/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -22,7 +27,7 @@ const HANDLE_STYLES_OVERRIDE = {
 	left: undefined,
 };
 
-function ResizableEditor( { enableResizing, height, children } ) {
+function ResizableEditor( { className, enableResizing, height, children } ) {
 	const [ width, setWidth ] = useState( '100%' );
 	const resizableRef = useRef();
 	const resizeWidthBy = useCallback( ( deltaPixels ) => {
@@ -32,6 +37,9 @@ function ResizableEditor( { enableResizing, height, children } ) {
 	}, [] );
 	return (
 		<ResizableBox
+			className={ clsx( 'editor-resizable-editor', className, {
+				'is-resizable': enableResizing,
+			} ) }
 			ref={ ( api ) => {
 				resizableRef.current = api?.resizable;
 			} }
diff --git a/packages/edit-site/src/components/block-editor/resize-handle.js b/packages/editor/src/components/resizable-editor/resize-handle.js
similarity index 87%
rename from packages/edit-site/src/components/block-editor/resize-handle.js
rename to packages/editor/src/components/resizable-editor/resize-handle.js
index 04198b2140fd2..dbba31f6f998b 100644
--- a/packages/edit-site/src/components/block-editor/resize-handle.js
+++ b/packages/editor/src/components/resizable-editor/resize-handle.js
@@ -11,11 +11,7 @@ import {
 
 const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels.
 
-export default function ResizeHandle( {
-	variation = 'default',
-	direction,
-	resizeWidthBy,
-} ) {
+export default function ResizeHandle( { direction, resizeWidthBy } ) {
 	function handleKeyDown( event ) {
 		const { keyCode } = event;
 
@@ -45,7 +41,7 @@ export default function ResizeHandle( {
 		<>
 			<Tooltip text={ __( 'Drag to resize' ) }>
 				<motion.button
-					className={ `resizable-editor__drag-handle is-${ direction } is-variation-${ variation }` }
+					className={ `editor-resizable-editor__resize-handle is-${ direction }` }
 					aria-label={ __( 'Drag to resize' ) }
 					aria-describedby={ resizableHandleHelpId }
 					onKeyDown={ handleKeyDown }
diff --git a/packages/editor/src/components/resizable-editor/style.scss b/packages/editor/src/components/resizable-editor/style.scss
new file mode 100644
index 0000000000000..91ff1144c4179
--- /dev/null
+++ b/packages/editor/src/components/resizable-editor/style.scss
@@ -0,0 +1,53 @@
+// To hide the horizontal scrollbar and show the drag handle on the
+// left and right of the container.
+.editor-resizable-editor.is-resizable {
+	overflow: visible;
+	margin: 0 auto;
+}
+
+.editor-resizable-editor__resize-handle {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	padding: 0;
+	margin: auto 0;
+	width: $grid-unit-15;
+	appearance: none;
+	cursor: ew-resize;
+	outline: none;
+	background: none;
+	border-radius: $radius-block-ui;
+	border: 0;
+	height: 100px;
+
+	&::after {
+		position: absolute;
+		top: $grid-unit-20;
+		left: $grid-unit-05;
+		right: 0;
+		bottom: $grid-unit-20;
+		content: "";
+		width: $grid-unit-05;
+		background-color: rgba($gray-700, 0.4);
+		border-radius: $radius-block-ui;
+	}
+
+	&.is-left {
+		// Subtract half of the handle width to properly center.
+		left: -$grid-unit-20 - math.div($grid-unit-05, 2);
+	}
+
+	&.is-right {
+		// Subtract half of the handle width to properly center.
+		right: -$grid-unit-20 - math.div($grid-unit-05, 2);
+	}
+
+	&:hover,
+	&:focus,
+	&:active {
+		opacity: 1;
+		&::after {
+			background-color: var(--wp-admin-theme-color);
+		}
+	}
+}
diff --git a/packages/editor/src/components/save-publish-panels/index.js b/packages/editor/src/components/save-publish-panels/index.js
index 812b1dcc1df41..3ae871c354bb6 100644
--- a/packages/editor/src/components/save-publish-panels/index.js
+++ b/packages/editor/src/components/save-publish-panels/index.js
@@ -14,6 +14,7 @@ import PostPublishPanel from '../post-publish-panel';
 import PluginPrePublishPanel from '../plugin-pre-publish-panel';
 import PluginPostPublishPanel from '../plugin-post-publish-panel';
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 const { Fill, Slot } = createSlotFill( 'ActionsPanel' );
 
@@ -27,12 +28,19 @@ export default function SavePublishPanels( {
 } ) {
 	const { closePublishSidebar, togglePublishSidebar } =
 		useDispatch( editorStore );
-	const { publishSidebarOpened, hasNonPostEntityChanges } = useSelect(
+	const {
+		publishSidebarOpened,
+		hasNonPostEntityChanges,
+		hasPostMetaChanges,
+	} = useSelect(
 		( select ) => ( {
 			publishSidebarOpened:
 				select( editorStore ).isPublishSidebarOpened(),
 			hasNonPostEntityChanges:
 				select( editorStore ).hasNonPostEntityChanges(),
+			hasPostMetaChanges: unlock(
+				select( editorStore )
+			).hasPostMetaChanges(),
 		} ),
 		[]
 	);
@@ -54,7 +62,7 @@ export default function SavePublishPanels( {
 				PostPublishExtension={ PluginPostPublishPanel.Slot }
 			/>
 		);
-	} else if ( hasNonPostEntityChanges ) {
+	} else if ( hasNonPostEntityChanges || hasPostMetaChanges ) {
 		unmountableContent = (
 			<div className="editor-layout__toggle-entities-saved-states-panel">
 				<Button
diff --git a/packages/editor/src/components/save-publish-panels/style.scss b/packages/editor/src/components/save-publish-panels/style.scss
index eefa32a8a9a1a..74dcf113f0479 100644
--- a/packages/editor/src/components/save-publish-panels/style.scss
+++ b/packages/editor/src/components/save-publish-panels/style.scss
@@ -26,11 +26,3 @@
 		bottom: 0;
 	}
 }
-
-.edit-post-layout__toggle-sidebar-panel {
-	.interface-interface-skeleton__sidebar:focus &,
-	.interface-interface-skeleton__sidebar:focus-within & {
-		top: auto;
-		bottom: 0;
-	}
-}
diff --git a/packages/editor/src/components/sidebar/constants.js b/packages/editor/src/components/sidebar/constants.js
new file mode 100644
index 0000000000000..be660c2169239
--- /dev/null
+++ b/packages/editor/src/components/sidebar/constants.js
@@ -0,0 +1,4 @@
+export const sidebars = {
+	document: 'edit-post/document',
+	block: 'edit-post/block',
+};
diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/editor/src/components/sidebar/header.js
similarity index 82%
rename from packages/edit-post/src/components/sidebar/settings-header/index.js
rename to packages/editor/src/components/sidebar/header.js
index 244e21b1acd43..fc4d44ba9e295 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/index.js
+++ b/packages/editor/src/components/sidebar/header.js
@@ -5,17 +5,17 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
-import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../../lock-unlock';
-import { sidebars } from '../settings-sidebar';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { sidebars } from './constants';
 
 const { Tabs } = unlock( componentsPrivateApis );
 
-const SettingsHeader = ( _, ref ) => {
+const SidebarHeader = ( _, ref ) => {
 	const { documentLabel } = useSelect( ( select ) => {
 		const { getPostTypeLabel } = select( editorStore );
 
@@ -46,4 +46,4 @@ const SettingsHeader = ( _, ref ) => {
 	);
 };
 
-export default forwardRef( SettingsHeader );
+export default forwardRef( SidebarHeader );
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/editor/src/components/sidebar/index.js
similarity index 57%
rename from packages/edit-post/src/components/sidebar/settings-sidebar/index.js
rename to packages/editor/src/components/sidebar/index.js
index fd5b136ba461d..a13931f25d9e4 100644
--- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+++ b/packages/editor/src/components/sidebar/index.js
@@ -13,48 +13,47 @@ import {
 	useEffect,
 	useRef,
 } from '@wordpress/element';
-import { isRTL, __, sprintf } from '@wordpress/i18n';
+import { isRTL, __ } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import {
-	store as editorStore,
-	PageAttributesPanel,
-	PluginDocumentSettingPanel,
-	PluginSidebar,
-	PostDiscussionPanel,
-	PostLastRevisionPanel,
-	PostTaxonomiesPanel,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { addQueryArgs } from '@wordpress/url';
-import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
-import SettingsHeader from '../settings-header';
-import PostStatus from '../post-status';
-import MetaBoxes from '../../meta-boxes';
-import { store as editPostStore } from '../../../store';
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
-import { unlock } from '../../../lock-unlock';
+import PatternOverridesPanel from '../pattern-overrides-panel';
+import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
+import PluginSidebar from '../plugin-sidebar';
+import PostSummary from './post-summary';
+import PostTaxonomiesPanel from '../post-taxonomies/panel';
+import PostTransformPanel from '../post-transform-panel';
+import SidebarHeader from './header';
+import TemplateContentPanel from '../template-content-panel';
+import useAutoSwitchEditorSidebars from '../provider/use-auto-switch-editor-sidebars';
+import { sidebars } from './constants';
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+import {
+	NAVIGATION_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+} from '../../store/constants';
 
-const { PostCardPanel, PostActions, interfaceStore } =
-	unlock( editorPrivateApis );
 const { Tabs } = unlock( componentsPrivateApis );
-const { PatternOverridesPanel, useAutoSwitchEditorSidebars } =
-	unlock( editorPrivateApis );
 
 const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
 	web: true,
 	native: false,
 } );
-export const sidebars = {
-	document: 'edit-post/document',
-	block: 'edit-post/block',
-};
 
-const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => {
+const SidebarContent = ( {
+	tabName,
+	keyboardShortcut,
+	renderingMode,
+	onActionPerformed,
+	extraPanels,
+} ) => {
 	const tabListRef = useRef( null );
 	// Because `PluginSidebar` renders a `ComplementaryArea`, we
 	// need to forward the `Tabs` context so it can be passed through the
@@ -87,71 +86,21 @@ const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => {
 			selectedTabElement?.focus();
 		}
 	}, [ tabName ] );
-	const { createSuccessNotice } = useDispatch( noticesStore );
-
-	const onActionPerformed = useCallback(
-		( actionId, items ) => {
-			switch ( actionId ) {
-				case 'move-to-trash':
-					{
-						const postType = items[ 0 ].type;
-						document.location.href = addQueryArgs( 'edit.php', {
-							post_type: postType,
-						} );
-					}
-					break;
-				case 'duplicate-post':
-					{
-						const newItem = items[ 0 ];
-						const title =
-							typeof newItem.title === 'string'
-								? newItem.title
-								: newItem.title?.rendered;
-						createSuccessNotice(
-							sprintf(
-								// translators: %s: Title of the created post e.g: "Post 1".
-								__( '"%s" successfully created.' ),
-								title
-							),
-							{
-								type: 'snackbar',
-								id: 'duplicate-post-action',
-								actions: [
-									{
-										label: __( 'Edit' ),
-										onClick: () => {
-											const postId = newItem.id;
-											document.location.href =
-												addQueryArgs( 'post.php', {
-													post: postId,
-													action: 'edit',
-												} );
-										},
-									},
-								],
-							}
-						);
-					}
-					break;
-			}
-		},
-		[ createSuccessNotice ]
-	);
 
 	return (
 		<PluginSidebar
 			identifier={ tabName }
 			header={
 				<Tabs.Context.Provider value={ tabsContextValue }>
-					<SettingsHeader ref={ tabListRef } />
+					<SidebarHeader ref={ tabListRef } />
 				</Tabs.Context.Provider>
 			}
 			closeLabel={ __( 'Close Settings' ) }
 			// This classname is added so we can apply a corrective negative
 			// margin to the panel.
 			// see https://github.com/WordPress/gutenberg/pull/55360#pullrequestreview-1737671049
-			className="edit-post-sidebar__panel"
-			headerClassName="edit-post-sidebar__panel-tabs"
+			className="editor-sidebar__panel"
+			headerClassName="editor-sidebar__panel-tabs"
 			/* translators: button label text should, if possible, be under 16 characters. */
 			title={ __( 'Settings' ) }
 			toggleShortcut={ keyboardShortcut }
@@ -160,21 +109,15 @@ const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => {
 		>
 			<Tabs.Context.Provider value={ tabsContextValue }>
 				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
-					<PostCardPanel
-						actions={
-							<PostActions
-								onActionPerformed={ onActionPerformed }
-							/>
-						}
-					/>
-					{ ! isEditingTemplate && <PostStatus /> }
+					<PostSummary onActionPerformed={ onActionPerformed } />
 					<PluginDocumentSettingPanel.Slot />
-					<PostLastRevisionPanel />
+					{ renderingMode !== 'post-only' && (
+						<TemplateContentPanel />
+					) }
+					<PostTransformPanel />
 					<PostTaxonomiesPanel />
-					<PostDiscussionPanel />
-					<PageAttributesPanel />
 					<PatternOverridesPanel />
-					{ ! isEditingTemplate && <MetaBoxes location="side" /> }
+					{ extraPanels }
 				</Tabs.TabPanel>
 				<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
 					<BlockInspector />
@@ -184,9 +127,9 @@ const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => {
 	);
 };
 
-const SettingsSidebar = () => {
+const Sidebar = ( { extraPanels, onActionPerformed } ) => {
 	useAutoSwitchEditorSidebars();
-	const { tabName, keyboardShortcut, isEditingTemplate } = useSelect(
+	const { tabName, keyboardShortcut, showSummary, renderingMode } = useSelect(
 		( select ) => {
 			const shortcut = select(
 				keyboardShortcutsStore
@@ -210,23 +153,26 @@ const SettingsSidebar = () => {
 			return {
 				tabName: _tabName,
 				keyboardShortcut: shortcut,
-				isEditingTemplate:
-					select( editorStore ).getCurrentPostType() ===
-					'wp_template',
+				showSummary: ! [
+					TEMPLATE_POST_TYPE,
+					TEMPLATE_PART_POST_TYPE,
+					NAVIGATION_POST_TYPE,
+				].includes( select( editorStore ).getCurrentPostType() ),
+				renderingMode: select( editorStore ).getRenderingMode(),
 			};
 		},
 		[]
 	);
 
-	const { openGeneralSidebar } = useDispatch( editPostStore );
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
 	const onTabSelect = useCallback(
 		( newSelectedTabId ) => {
 			if ( !! newSelectedTabId ) {
-				openGeneralSidebar( newSelectedTabId );
+				enableComplementaryArea( 'core', newSelectedTabId );
 			}
 		},
-		[ openGeneralSidebar ]
+		[ enableComplementaryArea ]
 	);
 
 	return (
@@ -238,10 +184,13 @@ const SettingsSidebar = () => {
 			<SidebarContent
 				tabName={ tabName }
 				keyboardShortcut={ keyboardShortcut }
-				isEditingTemplate={ isEditingTemplate }
+				showSummary={ showSummary }
+				renderingMode={ renderingMode }
+				onActionPerformed={ onActionPerformed }
+				extraPanels={ extraPanels }
 			/>
 		</Tabs>
 	);
 };
 
-export default SettingsSidebar;
+export default Sidebar;
diff --git a/packages/editor/src/components/sidebar/post-summary.js b/packages/editor/src/components/sidebar/post-summary.js
new file mode 100644
index 0000000000000..c3239f36cab77
--- /dev/null
+++ b/packages/editor/src/components/sidebar/post-summary.js
@@ -0,0 +1,97 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+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';
+import PageAttributesPanel from '../page-attributes/panel';
+import PostDiscussionPanel from '../post-discussion/panel';
+import { PrivatePostExcerptPanel as PostExcerptPanel } from '../post-excerpt/panel';
+import PostFeaturedImagePanel from '../post-featured-image/panel';
+import PostFormatPanel from '../post-format/panel';
+import PostLastEditedPanel from '../post-last-edited-panel';
+import PostPanelSection from '../post-panel-section';
+import PostSchedulePanel from '../post-schedule/panel';
+import PostStatusPanel from '../post-status';
+import PostStickyPanel from '../post-sticky';
+import PostSyncStatus from '../post-sync-status';
+import PostTemplatePanel from '../post-template/panel';
+import PostURLPanel from '../post-url/panel';
+import BlogTitle from '../blog-title';
+import PostsPerPage from '../posts-per-page';
+import SiteDiscussion from '../site-discussion';
+import { store as editorStore } from '../../store';
+import TemplateAreas from '../template-areas';
+
+/**
+ * Module Constants
+ */
+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(),
+		};
+	}, [] );
+
+	return (
+		<PostPanelSection className="editor-post-summary">
+			<PluginPostStatusInfo.Slot>
+				{ ( fills ) => (
+					<>
+						<VStack spacing={ 4 }>
+							<PostCardPanel
+								actions={
+									<PostActions
+										onActionPerformed={ onActionPerformed }
+									/>
+								}
+							/>
+							<PostFeaturedImagePanel withPanelBody={ false } />
+							<PostExcerptPanel />
+							<VStack spacing={ 1 }>
+								<PostContentInformation />
+								<PostLastEditedPanel />
+							</VStack>
+							{ ! isRemovedPostStatusPanel && (
+								<VStack spacing={ 2 }>
+									<VStack spacing={ 1 }>
+										<PostStatusPanel />
+										<PostSchedulePanel />
+										<PostURLPanel />
+										<PostAuthorPanel />
+										<PostTemplatePanel />
+										<PostDiscussionPanel />
+										<PageAttributesPanel />
+										<PostSyncStatus />
+										<BlogTitle />
+										<PostsPerPage />
+										<SiteDiscussion />
+										<PostFormatPanel />
+										<PostStickyPanel />
+									</VStack>
+									<TemplateAreas />
+									{ fills }
+								</VStack>
+							) }
+						</VStack>
+					</>
+				) }
+			</PluginPostStatusInfo.Slot>
+		</PostPanelSection>
+	);
+}
diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/editor/src/components/sidebar/style.scss
similarity index 52%
rename from packages/edit-post/src/components/sidebar/style.scss
rename to packages/editor/src/components/sidebar/style.scss
index 1921c5cfd7b31..9853088dde1be 100644
--- a/packages/edit-post/src/components/sidebar/style.scss
+++ b/packages/editor/src/components/sidebar/style.scss
@@ -1,6 +1,6 @@
-.components-panel__header.edit-post-sidebar__panel-tabs {
+.components-panel__header.editor-sidebar__panel-tabs {
 	padding-left: 0;
-	padding-right: $grid-unit-20;
+	padding-right: $grid-unit-15;
 
 	.components-button.has-icon {
 		padding: 0;
@@ -13,6 +13,6 @@
 	}
 }
 
-.edit-post-sidebar__panel {
-	margin-top: -1px;
+.editor-post-summary .components-v-stack:empty {
+	display: none;
 }
diff --git a/packages/editor/src/components/site-discussion/index.js b/packages/editor/src/components/site-discussion/index.js
new file mode 100644
index 0000000000000..e4bd60db3f8a7
--- /dev/null
+++ b/packages/editor/src/components/site-discussion/index.js
@@ -0,0 +1,138 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	Button,
+	Dropdown,
+	RadioControl,
+	__experimentalVStack as VStack,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
+
+const COMMENT_OPTIONS = [
+	{
+		label: (
+			<>
+				{ __( 'Open' ) }
+				<Text variant="muted" size={ 12 }>
+					{ __( 'Visitors can add new comments and replies.' ) }
+				</Text>
+			</>
+		),
+		value: 'open',
+	},
+	{
+		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>
+			</>
+		),
+		value: '',
+	},
+];
+
+export default function SiteDiscussion() {
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { allowCommentsOnNewPosts, isTemplate, postSlug } = useSelect(
+		( select ) => {
+			const { getEditedPostAttribute, getCurrentPostType } =
+				select( editorStore );
+			const { getEditedEntityRecord } = select( coreStore );
+			const siteSettings = getEditedEntityRecord( 'root', 'site' );
+			return {
+				isTemplate: getCurrentPostType() === TEMPLATE_POST_TYPE,
+				postSlug: getEditedPostAttribute( 'slug' ),
+				allowCommentsOnNewPosts:
+					siteSettings?.default_comment_status || '',
+			};
+		},
+		[]
+	);
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	if ( ! isTemplate || ! [ 'home', 'index' ].includes( postSlug ) ) {
+		return null;
+	}
+	const setAllowCommentsOnNewPosts = ( newValue ) => {
+		editEntityRecord( 'root', 'site', undefined, {
+			default_comment_status: newValue ? 'open' : null,
+		} );
+	};
+	return (
+		<PostPanelRow label={ __( 'Discussion' ) } ref={ setPopoverAnchor }>
+			<Dropdown
+				popoverProps={ popoverProps }
+				contentClassName="editor-site-discussion-dropdown__content"
+				focusOnMount
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<Button
+						size="compact"
+						variant="tertiary"
+						aria-expanded={ isOpen }
+						aria-label={ __( 'Change discussion settings' ) }
+						onClick={ onToggle }
+					>
+						{ allowCommentsOnNewPosts
+							? __( 'Comments open' )
+							: __( 'Comments closed' ) }
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<>
+						<InspectorPopoverHeader
+							title={ __( 'Discussion' ) }
+							onClose={ onClose }
+						/>
+						<VStack spacing={ 3 }>
+							<Text>
+								{ __(
+									'Changes will apply to new posts only. Individual posts may override these settings.'
+								) }
+							</Text>
+							<RadioControl
+								className="editor-site-discussion__options"
+								hideLabelFromVision
+								label={ __( 'Comment status' ) }
+								options={ COMMENT_OPTIONS }
+								onChange={ setAllowCommentsOnNewPosts }
+								selected={ allowCommentsOnNewPosts }
+							/>
+						</VStack>
+					</>
+				) }
+			/>
+		</PostPanelRow>
+	);
+}
diff --git a/packages/editor/src/components/site-discussion/style.scss b/packages/editor/src/components/site-discussion/style.scss
new file mode 100644
index 0000000000000..2c54424207ea5
--- /dev/null
+++ b/packages/editor/src/components/site-discussion/style.scss
@@ -0,0 +1,19 @@
+.editor-site-discussion-dropdown__content .components-popover__content {
+	min-width: 320px;
+	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 891cb5ca209e7..d888d1ccc4342 100644
--- a/packages/editor/src/components/start-page-options/index.js
+++ b/packages/editor/src/components/start-page-options/index.js
@@ -17,6 +17,7 @@ import { __unstableSerializeAndClean } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
 
 function useStartPatterns() {
 	// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,
@@ -115,14 +116,15 @@ export default function StartPageOptions() {
 			isEditedPostEmpty,
 			getCurrentPostType,
 			getCurrentPostId,
-			getEditorSettings,
 		} = select( editorStore );
-		const { __unstableIsPreviewMode: isPreviewMode } = getEditorSettings();
+		const _postType = getCurrentPostType();
 
 		return {
 			shouldEnableModal:
-				! isPreviewMode && ! isEditedPostDirty() && isEditedPostEmpty(),
-			postType: getCurrentPostType(),
+				! isEditedPostDirty() &&
+				isEditedPostEmpty() &&
+				TEMPLATE_POST_TYPE !== _postType,
+			postType: _postType,
 			postId: getCurrentPostId(),
 		};
 	}, [] );
diff --git a/packages/edit-site/src/components/start-template-options/index.js b/packages/editor/src/components/start-template-options/index.js
similarity index 77%
rename from packages/edit-site/src/components/start-template-options/index.js
rename to packages/editor/src/components/start-template-options/index.js
index b968fc16bdc3d..e350ca9c607c3 100644
--- a/packages/edit-site/src/components/start-template-options/index.js
+++ b/packages/editor/src/components/start-template-options/index.js
@@ -3,19 +3,18 @@
  */
 import { Modal, Flex, FlexItem, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState, useMemo } from '@wordpress/element';
+import { useState, useMemo, useEffect } from '@wordpress/element';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useAsyncList } from '@wordpress/compose';
-import { store as preferencesStore } from '@wordpress/preferences';
 import { parse } from '@wordpress/blocks';
 import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import { store as editorStore } from '../../store';
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
 
 function useFallbackTemplateContent( slug, isCustom = false ) {
 	return useSelect(
@@ -38,10 +37,10 @@ function useFallbackTemplateContent( slug, isCustom = false ) {
 
 function useStartPatterns( fallbackContent ) {
 	const { slug, patterns } = useSelect( ( select ) => {
-		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
 		const { getEntityRecord, getBlockPatterns } = select( coreStore );
-		const postId = getEditedPostId();
-		const postType = getEditedPostType();
+		const postId = getCurrentPostId();
+		const postType = getCurrentPostType();
 		const record = getEntityRecord( 'postType', postType, postId );
 		return {
 			slug: record.slug,
@@ -132,14 +131,14 @@ function StartModal( { slug, isCustom, onClose, postType } ) {
 	}
 	return (
 		<Modal
-			className="edit-site-start-template-options__modal"
+			className="editor-start-template-options__modal"
 			title={ __( 'Choose a pattern' ) }
 			closeLabel={ __( 'Cancel' ) }
 			focusOnMount="firstElement"
 			onRequestClose={ onClose }
 			isFullScreen
 		>
-			<div className="edit-site-start-template-options__modal-content">
+			<div className="editor-start-template-options__modal-content">
 				<PatternSelection
 					fallbackContent={ fallbackContent }
 					slug={ slug }
@@ -151,7 +150,7 @@ function StartModal( { slug, isCustom, onClose, postType } ) {
 				/>
 			</div>
 			<Flex
-				className="edit-site-start-template-options__modal__actions"
+				className="editor-start-template-options__modal__actions"
 				justify="flex-end"
 				expanded={ false }
 			>
@@ -165,56 +164,47 @@ function StartModal( { slug, isCustom, onClose, postType } ) {
 	);
 }
 
-const START_TEMPLATE_MODAL_STATES = {
-	INITIAL: 'INITIAL',
-	CLOSED: 'CLOSED',
-};
-
 export default function StartTemplateOptions() {
-	const [ modalState, setModalState ] = useState(
-		START_TEMPLATE_MODAL_STATES.INITIAL
-	);
-	const { shouldOpenModal, slug, isCustom, postType } = useSelect(
+	const [ isClosed, setIsClosed ] = useState( false );
+	const { shouldOpenModal, slug, isCustom, postType, postId } = useSelect(
 		( select ) => {
-			const { getEditedPostType, getEditedPostId } =
-				select( editSiteStore );
-			const _postType = getEditedPostType();
-			const postId = getEditedPostId();
+			const { getCurrentPostType, getCurrentPostId } =
+				select( editorStore );
+			const _postType = getCurrentPostType();
+			const _postId = getCurrentPostId();
 			const { getEditedEntityRecord, hasEditsForEntityRecord } =
 				select( coreStore );
 			const templateRecord = getEditedEntityRecord(
 				'postType',
 				_postType,
-				postId
+				_postId
 			);
 			const hasEdits = hasEditsForEntityRecord(
 				'postType',
 				_postType,
-				postId
+				_postId
 			);
 
 			return {
 				shouldOpenModal:
 					! hasEdits &&
 					'' === templateRecord.content &&
-					TEMPLATE_POST_TYPE === _postType &&
-					! select( preferencesStore ).get(
-						'core/edit-site',
-						'welcomeGuide'
-					),
+					TEMPLATE_POST_TYPE === _postType,
 				slug: templateRecord.slug,
 				isCustom: templateRecord.is_custom,
 				postType: _postType,
+				postId: _postId,
 			};
 		},
 		[]
 	);
 
-	if (
-		( modalState === START_TEMPLATE_MODAL_STATES.INITIAL &&
-			! shouldOpenModal ) ||
-		modalState === START_TEMPLATE_MODAL_STATES.CLOSED
-	) {
+	useEffect( () => {
+		// Should reset the modal state when navigating to a new page/post.
+		setIsClosed( false );
+	}, [ postType, postId ] );
+
+	if ( ! shouldOpenModal || isClosed ) {
 		return null;
 	}
 
@@ -223,9 +213,7 @@ export default function StartTemplateOptions() {
 			slug={ slug }
 			isCustom={ isCustom }
 			postType={ postType }
-			onClose={ () =>
-				setModalState( START_TEMPLATE_MODAL_STATES.CLOSED )
-			}
+			onClose={ () => setIsClosed( true ) }
 		/>
 	);
 }
diff --git a/packages/edit-site/src/components/start-template-options/style.scss b/packages/editor/src/components/start-template-options/style.scss
similarity index 66%
rename from packages/edit-site/src/components/start-template-options/style.scss
rename to packages/editor/src/components/start-template-options/style.scss
index 53cd38a8c9bfa..128eddb48c8c8 100644
--- a/packages/edit-site/src/components/start-template-options/style.scss
+++ b/packages/editor/src/components/start-template-options/style.scss
@@ -1,7 +1,7 @@
 $actions-height: 92px;
 
-.edit-site-start-template-options__modal {
-	.edit-site-start-template-options__modal__actions {
+.editor-start-template-options__modal {
+	.editor-start-template-options__modal__actions {
 		position: absolute;
 		bottom: 0;
 		width: 100%;
@@ -12,7 +12,7 @@ $actions-height: 92px;
 		padding-left: $grid-unit-40;
 		padding-right: $grid-unit-40;
 		border-top: 1px solid $gray-300;
-		z-index: z-index(".edit-site-start-template-options__modal__actions");
+		z-index: z-index(".editor-start-template-options__modal__actions");
 	}
 
 	.block-editor-block-patterns-list {
@@ -25,7 +25,7 @@ $actions-height: 92px;
 	}
 }
 
-.edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
+.editor-start-template-options__modal-content .block-editor-block-patterns-list {
 	column-count: 2;
 	column-gap: $grid-unit-30;
 
@@ -44,12 +44,4 @@ $actions-height: 92px;
 			display: none;
 		}
 	}
-
-	.block-editor-block-patterns-list__item {
-		// Avoid to override the BlockPatternList component
-		// default hover and focus styles.
-		&:not(:focus):not(:hover) .block-editor-block-preview__container {
-			box-shadow: 0 0 0 1px $gray-300;
-		}
-	}
 }
diff --git a/packages/editor/src/components/template-areas/index.js b/packages/editor/src/components/template-areas/index.js
index 25cb59bf9b2ed..0d3bbe42d02ee 100644
--- a/packages/editor/src/components/template-areas/index.js
+++ b/packages/editor/src/components/template-areas/index.js
@@ -15,6 +15,7 @@ import { __ } from '@wordpress/i18n';
  */
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
 
 function TemplateAreaItem( { area, clientId } ) {
 	const { selectBlock, toggleBlockHighlight } =
@@ -54,13 +55,21 @@ function TemplateAreaItem( { area, clientId } ) {
 }
 
 export default function TemplateAreas() {
-	const templateParts = useSelect(
-		( select ) =>
-			unlock( select( editorStore ) ).getCurrentTemplateTemplateParts(),
-		[]
-	);
+	const { isTemplate, templateParts } = useSelect( ( select ) => {
+		const _isTemplate =
+			select( editorStore ).getCurrentPostType() === TEMPLATE_POST_TYPE;
+
+		return {
+			isTemplate: _isTemplate,
+			templateParts:
+				_isTemplate &&
+				unlock(
+					select( editorStore )
+				).getCurrentTemplateTemplateParts(),
+		};
+	}, [] );
 
-	if ( ! templateParts.length ) {
+	if ( ! isTemplate || ! templateParts.length ) {
 		return null;
 	}
 
diff --git a/packages/editor/src/components/template-areas/style.scss b/packages/editor/src/components/template-areas/style.scss
index 4770feb384e8c..4a0dcd748c2ed 100644
--- a/packages/editor/src/components/template-areas/style.scss
+++ b/packages/editor/src/components/template-areas/style.scss
@@ -1,5 +1,4 @@
 .editor-template-areas {
-	margin-top: $grid-unit-20;
 	&__list {
 		margin: 0;
 		> li {
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js b/packages/editor/src/components/template-content-panel/index.js
similarity index 64%
rename from packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js
rename to packages/editor/src/components/template-content-panel/index.js
index 18a742add41b2..e0f131f27feb5 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js
+++ b/packages/editor/src/components/template-content-panel/index.js
@@ -6,11 +6,13 @@ import {
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../../lock-unlock';
+import { unlock } from '../../lock-unlock';
 
 const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
 
@@ -20,10 +22,15 @@ const PAGE_CONTENT_BLOCKS = [
 	'core/post-title',
 ];
 
-export default function PageContent() {
+export default function TemplateContentPanel() {
 	const clientIds = useSelect( ( select ) => {
 		const { getBlocksByName } = select( blockEditorStore );
 		return getBlocksByName( PAGE_CONTENT_BLOCKS );
 	}, [] );
-	return <BlockQuickNavigation clientIds={ clientIds } />;
+
+	return (
+		<PanelBody title={ __( 'Content' ) }>
+			<BlockQuickNavigation clientIds={ clientIds } />
+		</PanelBody>
+	);
 }
diff --git a/packages/editor/src/components/text-editor/index.js b/packages/editor/src/components/text-editor/index.js
new file mode 100644
index 0000000000000..b65a958249b6f
--- /dev/null
+++ b/packages/editor/src/components/text-editor/index.js
@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import PostTextEditor from '../post-text-editor';
+import PostTitleRaw from '../post-title/post-title-raw';
+
+export default function TextEditor( { autoFocus = false } ) {
+	const { switchEditorMode } = useDispatch( editorStore );
+	const { shortcut, isRichEditingEnabled } = useSelect( ( select ) => {
+		const { getEditorSettings } = select( editorStore );
+		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+
+		return {
+			shortcut: getShortcutRepresentation( 'core/editor/toggle-mode' ),
+			isRichEditingEnabled: getEditorSettings().richEditingEnabled,
+		};
+	}, [] );
+
+	const titleRef = useRef();
+	useEffect( () => {
+		if ( autoFocus ) {
+			return;
+		}
+		titleRef?.current?.focus();
+	}, [ autoFocus ] );
+
+	return (
+		<div className="editor-text-editor">
+			{ isRichEditingEnabled && (
+				<div className="editor-text-editor__toolbar">
+					<h2>{ __( 'Editing code' ) }</h2>
+					<Button
+						variant="tertiary"
+						onClick={ () => switchEditorMode( 'visual' ) }
+						shortcut={ shortcut }
+					>
+						{ __( 'Exit code editor' ) }
+					</Button>
+				</div>
+			) }
+			<div className="editor-text-editor__body">
+				<PostTitleRaw ref={ titleRef } />
+				<PostTextEditor />
+			</div>
+		</div>
+	);
+}
diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/editor/src/components/text-editor/style.scss
similarity index 89%
rename from packages/edit-post/src/components/text-editor/style.scss
rename to packages/editor/src/components/text-editor/style.scss
index ab248317de1db..c8589fed6de6e 100644
--- a/packages/edit-post/src/components/text-editor/style.scss
+++ b/packages/editor/src/components/text-editor/style.scss
@@ -1,4 +1,4 @@
-.edit-post-text-editor {
+.editor-text-editor {
 	position: relative;
 	width: 100%;
 	background-color: $white;
@@ -31,7 +31,7 @@
 	}
 }
 
-.edit-post-text-editor__body {
+.editor-text-editor__body {
 	width: 100%;
 	padding: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15;
 	max-width: $break-xlarge;
@@ -44,9 +44,9 @@
 }
 
 // Exit code editor toolbar.
-.edit-post-text-editor__toolbar {
+.editor-text-editor__toolbar {
 	position: sticky;
-	z-index: z-index(".edit-post-text-editor__toolbar");
+	z-index: z-index(".editor-text-editor__toolbar");
 	top: 0;
 	left: 0;
 	right: 0;
diff --git a/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js b/packages/editor/src/components/visual-editor/edit-template-blocks-notification.js
similarity index 100%
rename from packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js
rename to packages/editor/src/components/visual-editor/edit-template-blocks-notification.js
diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/visual-editor/index.js
similarity index 62%
rename from packages/editor/src/components/editor-canvas/index.js
rename to packages/editor/src/components/visual-editor/index.js
index 5b45f42be92a9..7d8f38ae7a0eb 100644
--- a/packages/editor/src/components/editor-canvas/index.js
+++ b/packages/editor/src/components/visual-editor/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,11 @@ import { useEffect, useRef, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { parse } from '@wordpress/blocks';
 import { store as coreStore } from '@wordpress/core-data';
-import { useMergeRefs } from '@wordpress/compose';
+import {
+	useMergeRefs,
+	useViewportMatch,
+	useResizeObserver,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -29,7 +33,14 @@ import PostTitle from '../post-title';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import EditTemplateBlocksNotification from './edit-template-blocks-notification';
+import ResizableEditor from '../resizable-editor';
 import useSelectNearestEditableBlock from '../../hooks/use-select-nearest-editable-block';
+import {
+	NAVIGATION_POST_TYPE,
+	PATTERN_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+} from '../../store/constants';
 
 const {
 	LayoutStyle,
@@ -44,10 +55,10 @@ const {
  * and they don't apply the layout styles.
  */
 const DESIGN_POST_TYPES = [
-	'wp_block',
-	'wp_template',
-	'wp_navigation',
-	'wp_template_part',
+	PATTERN_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
 ];
 
 /**
@@ -85,17 +96,17 @@ function checkForPostContentAtRootLevel( blocks ) {
 	return false;
 }
 
-function EditorCanvas( {
+function VisualEditor( {
 	// Ideally as we unify post and site editors, we won't need these props.
 	autoFocus,
-	className,
-	renderAppender,
 	styles,
 	disableIframe = false,
 	iframeProps,
 	contentRef,
-	children,
+	className,
 } ) {
+	const [ resizeObserver, sizes ] = useResizeObserver();
+	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const {
 		renderingMode,
 		postContentAttributes,
@@ -103,8 +114,10 @@ function EditorCanvas( {
 		wrapperBlockName,
 		wrapperUniqueId,
 		deviceType,
-		showEditorPadding,
+		isFocusedEntity,
 		isDesignPostType,
+		postType,
+		isPreview,
 	} = useSelect( ( select ) => {
 		const {
 			getCurrentPostId,
@@ -120,7 +133,7 @@ function EditorCanvas( {
 		const _renderingMode = getRenderingMode();
 		let _wrapperBlockName;
 
-		if ( postTypeSlug === 'wp_block' ) {
+		if ( postTypeSlug === PATTERN_POST_TYPE ) {
 			_wrapperBlockName = 'core/block';
 		} else if ( _renderingMode === 'post-only' ) {
 			_wrapperBlockName = 'core/post-content';
@@ -128,13 +141,13 @@ function EditorCanvas( {
 
 		const editorSettings = getEditorSettings();
 		const supportsTemplateMode = editorSettings.supportsTemplateMode;
-		const postType = getPostType( postTypeSlug );
+		const postTypeObject = getPostType( postTypeSlug );
 		const canEditTemplate = canUser( 'create', 'templates' );
 		const currentTemplateId = getCurrentTemplateId();
 		const template = currentTemplateId
 			? getEditedEntityRecord(
 					'postType',
-					'wp_template',
+					TEMPLATE_POST_TYPE,
 					currentTemplateId
 			  )
 			: undefined;
@@ -146,14 +159,17 @@ function EditorCanvas( {
 			// Post template fetch returns a 404 on classic themes, which
 			// messes with e2e tests, so check it's a block theme first.
 			editedPostTemplate:
-				postType?.viewable && supportsTemplateMode && canEditTemplate
+				postTypeObject?.viewable &&
+				supportsTemplateMode &&
+				canEditTemplate
 					? template
 					: undefined,
 			wrapperBlockName: _wrapperBlockName,
 			wrapperUniqueId: getCurrentPostId(),
 			deviceType: getDeviceType(),
-			showEditorPadding:
-				!! editorSettings.onNavigateToPreviousEntityRecord,
+			isFocusedEntity: !! editorSettings.onNavigateToPreviousEntityRecord,
+			postType: postTypeSlug,
+			isPreview: editorSettings.__unstableIsPreviewMode,
 		};
 	}, [] );
 	const { isCleanNewPost } = useSelect( editorStore );
@@ -161,13 +177,17 @@ function EditorCanvas( {
 		hasRootPaddingAwareAlignments,
 		themeHasDisabledLayoutStyles,
 		themeSupportsLayout,
+		isZoomOutMode,
 	} = useSelect( ( select ) => {
-		const _settings = select( blockEditorStore ).getSettings();
+		const { getSettings, __unstableGetEditorMode } =
+			select( blockEditorStore );
+		const _settings = getSettings();
 		return {
 			themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
 			themeSupportsLayout: _settings.supportsLayout,
 			hasRootPaddingAwareAlignments:
 				_settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
+			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 
@@ -248,7 +268,7 @@ function EditorCanvas( {
 		'core/post-content'
 	);
 
-	const blockListLayoutClass = classnames(
+	const blockListLayoutClass = clsx(
 		{
 			'is-layout-flow': ! themeSupportsLayout,
 		},
@@ -289,7 +309,6 @@ function EditorCanvas( {
 		blockListLayout?.type === 'default' && ! hasPostContentAtRootLevel
 			? fallbackLayout
 			: blockListLayout;
-
 	const observeTypingRef = useTypingObserver();
 	const titleRef = useRef();
 	useEffect( () => {
@@ -319,102 +338,164 @@ function EditorCanvas( {
 		} ),
 	] );
 
+	const zoomOutProps = isZoomOutMode
+		? {
+				scale: 'default',
+				frameSize: '20px',
+		  }
+		: {};
+
+	const forceFullHeight = postType === NAVIGATION_POST_TYPE;
+	const enableResizing =
+		[
+			NAVIGATION_POST_TYPE,
+			TEMPLATE_PART_POST_TYPE,
+			PATTERN_POST_TYPE,
+		].includes( postType ) &&
+		// Disable in previews / view mode.
+		! isPreview &&
+		// Disable resizing in mobile viewport.
+		! isMobileViewport &&
+		// Dsiable resizing in zoomed-out mode.
+		! isZoomOutMode;
+	const shouldIframe =
+		! disableIframe || [ 'Tablet', 'Mobile' ].includes( deviceType );
+
+	const iframeStyles = useMemo( () => {
+		return [
+			...( styles ?? [] ),
+			{
+				css: `.is-root-container{display:flow-root;${
+					// Some themes will have `min-height: 100vh` for the root container,
+					// which isn't a requirement in auto resize mode.
+					enableResizing ? 'min-height:0!important;' : ''
+				}}`,
+			},
+		];
+	}, [ styles, enableResizing ] );
+
 	return (
-		<BlockCanvas
-			shouldIframe={
-				! disableIframe || [ 'Tablet', 'Mobile' ].includes( deviceType )
-			}
-			contentRef={ contentRef }
-			styles={ styles }
-			height="100%"
-			iframeProps={ {
-				className: classnames( 'editor-canvas__iframe', {
-					'has-editor-padding': showEditorPadding,
-				} ),
-				...iframeProps,
-				style: {
-					...iframeProps?.style,
-					...deviceStyles,
-				},
-			} }
+		<div
+			className={ clsx(
+				'editor-visual-editor',
+				// this class is here for backward compatibility reasons.
+				'edit-post-visual-editor',
+				className,
+				{
+					'has-padding': isFocusedEntity || enableResizing,
+					'is-resizable': enableResizing,
+					'is-iframed': shouldIframe,
+				}
+			) }
 		>
-			{ themeSupportsLayout &&
-				! themeHasDisabledLayoutStyles &&
-				renderingMode === 'post-only' &&
-				! isDesignPostType && (
-					<>
-						<LayoutStyle
-							selector=".editor-editor-canvas__post-title-wrapper"
-							layout={ fallbackLayout }
-						/>
-						<LayoutStyle
-							selector=".block-editor-block-list__layout.is-root-container"
-							layout={ postEditorLayout }
-						/>
-						{ align && <LayoutStyle css={ alignCSS } /> }
-						{ postContentLayoutStyles && (
-							<LayoutStyle
-								layout={ postContentLayout }
-								css={ postContentLayoutStyles }
-							/>
-						) }
-					</>
-				) }
-			{ renderingMode === 'post-only' && ! isDesignPostType && (
-				<div
-					className={ classnames(
-						'editor-editor-canvas__post-title-wrapper',
-						// The following class is only here for backward comapatibility
-						// some themes might be using it to style the post title.
-						'edit-post-visual-editor__post-title-wrapper',
-						{
-							'has-global-padding': hasRootPaddingAwareAlignments,
-						}
-					) }
-					contentEditable={ false }
-					ref={ observeTypingRef }
-					style={ {
-						// This is using inline styles
-						// so it's applied for both iframed and non iframed editors.
-						marginTop: '4rem',
+			<ResizableEditor
+				enableResizing={ enableResizing }
+				height={
+					sizes.height && ! forceFullHeight ? sizes.height : '100%'
+				}
+			>
+				<BlockCanvas
+					shouldIframe={ shouldIframe }
+					contentRef={ contentRef }
+					styles={ iframeStyles }
+					height="100%"
+					iframeProps={ {
+						...iframeProps,
+						...zoomOutProps,
+						style: {
+							...iframeProps?.style,
+							...deviceStyles,
+						},
 					} }
 				>
-					<PostTitle ref={ titleRef } />
-				</div>
-			) }
-			<RecursionProvider
-				blockName={ wrapperBlockName }
-				uniqueId={ wrapperUniqueId }
-			>
-				<BlockList
-					className={ classnames(
-						className,
-						'is-' + deviceType.toLowerCase() + '-preview',
-						renderingMode !== 'post-only' || isDesignPostType
-							? 'wp-site-blocks'
-							: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
+					{ themeSupportsLayout &&
+						! themeHasDisabledLayoutStyles &&
+						renderingMode === 'post-only' &&
+						! isDesignPostType && (
+							<>
+								<LayoutStyle
+									selector=".editor-visual-editor__post-title-wrapper"
+									layout={ fallbackLayout }
+								/>
+								<LayoutStyle
+									selector=".block-editor-block-list__layout.is-root-container"
+									layout={ postEditorLayout }
+								/>
+								{ align && <LayoutStyle css={ alignCSS } /> }
+								{ postContentLayoutStyles && (
+									<LayoutStyle
+										layout={ postContentLayout }
+										css={ postContentLayoutStyles }
+									/>
+								) }
+							</>
+						) }
+					{ renderingMode === 'post-only' && ! isDesignPostType && (
+						<div
+							className={ clsx(
+								'editor-visual-editor__post-title-wrapper',
+								// The following class is only here for backward comapatibility
+								// some themes might be using it to style the post title.
+								'edit-post-visual-editor__post-title-wrapper',
+								{
+									'has-global-padding':
+										hasRootPaddingAwareAlignments,
+								}
+							) }
+							contentEditable={ false }
+							ref={ observeTypingRef }
+							style={ {
+								// This is using inline styles
+								// so it's applied for both iframed and non iframed editors.
+								marginTop: '4rem',
+							} }
+						>
+							<PostTitle ref={ titleRef } />
+						</div>
 					) }
-					layout={ blockListLayout }
-					dropZoneElement={
-						// When iframed, pass in the html element of the iframe to
-						// ensure the drop zone extends to the edges of the iframe.
-						disableIframe
-							? localRef.current
-							: localRef.current?.parentNode
-					}
-					renderAppender={ renderAppender }
-					__unstableDisableDropZone={
-						// In template preview mode, disable drop zones at the root of the template.
-						renderingMode === 'template-locked' ? true : false
+					<RecursionProvider
+						blockName={ wrapperBlockName }
+						uniqueId={ wrapperUniqueId }
+					>
+						<BlockList
+							className={ clsx(
+								'is-' + deviceType.toLowerCase() + '-preview',
+								renderingMode !== 'post-only' ||
+									isDesignPostType
+									? 'wp-site-blocks'
+									: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
+							) }
+							layout={ blockListLayout }
+							dropZoneElement={
+								// When iframed, pass in the html element of the iframe to
+								// ensure the drop zone extends to the edges of the iframe.
+								disableIframe
+									? localRef.current
+									: localRef.current?.parentNode
+							}
+							__unstableDisableDropZone={
+								// In template preview mode, disable drop zones at the root of the template.
+								renderingMode === 'template-locked'
+									? true
+									: false
+							}
+						/>
+						{ renderingMode === 'template-locked' && (
+							<EditTemplateBlocksNotification
+								contentRef={ localRef }
+							/>
+						) }
+					</RecursionProvider>
+					{
+						// Avoid resize listeners when not needed,
+						// these will trigger unnecessary re-renders
+						// when animating the iframe width.
+						enableResizing && resizeObserver
 					}
-				/>
-				{ renderingMode === 'template-locked' && (
-					<EditTemplateBlocksNotification contentRef={ localRef } />
-				) }
-			</RecursionProvider>
-			{ children }
-		</BlockCanvas>
+				</BlockCanvas>
+			</ResizableEditor>
+		</div>
 	);
 }
 
-export default EditorCanvas;
+export default VisualEditor;
diff --git a/packages/editor/src/components/visual-editor/style.scss b/packages/editor/src/components/visual-editor/style.scss
new file mode 100644
index 0000000000000..597769ff7fb78
--- /dev/null
+++ b/packages/editor/src/components/visual-editor/style.scss
@@ -0,0 +1,37 @@
+.editor-visual-editor {
+	position: relative;
+	height: 100%;
+	display: block;
+	background-color: $gray-300;
+
+	// Centralize the editor horizontally (flex-direction is column).
+	align-items: center;
+
+	&.is-resizable {
+		max-height: 100%;
+	}
+
+	&.has-padding {
+		padding: $grid-unit-30 $grid-unit-30 0;
+	}
+
+	// In the iframed canvas this keeps extra scrollbars from appearing (when block toolbars overflow). In the
+	// legacy (non-iframed) canvas, overflow must not be hidden in order to maintain support for sticky positioning.
+	.is-iframed {
+		overflow: hidden;
+	}
+
+	// The button element easily inherits styles that are meant for the editor style.
+	// These rules enhance the specificity to reduce that inheritance.
+	// This is duplicated in edit-site.
+	& .components-button {
+		font-family: $default-font;
+		font-size: $default-font-size;
+		padding: 6px 12px;
+
+		&.is-tertiary,
+		&.has-icon {
+			padding: 6px;
+		}
+	}
+}
diff --git a/packages/editor/src/components/word-count/index.js b/packages/editor/src/components/word-count/index.js
index 1aad38d62132d..aab562b46b89f 100644
--- a/packages/editor/src/components/word-count/index.js
+++ b/packages/editor/src/components/word-count/index.js
@@ -10,6 +10,11 @@ import { count as wordCount } from '@wordpress/wordcount';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the word count of the post content.
+ *
+ * @return {JSX.Element|null} The rendered WordCount component.
+ */
 export default function WordCount() {
 	const content = useSelect(
 		( select ) => select( editorStore ).getEditedPostAttribute( 'content' ),
diff --git a/packages/editor/src/hooks/index.js b/packages/editor/src/hooks/index.js
index 75bb34abf6cfa..6001d53f65c10 100644
--- a/packages/editor/src/hooks/index.js
+++ b/packages/editor/src/hooks/index.js
@@ -3,4 +3,5 @@
  */
 import './custom-sources-backwards-compatibility';
 import './default-autocompleters';
+import './media-upload';
 import './pattern-overrides';
diff --git a/packages/edit-site/src/hooks/components.js b/packages/editor/src/hooks/media-upload.js
similarity index 81%
rename from packages/edit-site/src/hooks/components.js
rename to packages/editor/src/hooks/media-upload.js
index 614dfe62db2f9..311ec4ec5eec1 100644
--- a/packages/edit-site/src/hooks/components.js
+++ b/packages/editor/src/hooks/media-upload.js
@@ -6,6 +6,6 @@ import { MediaUpload } from '@wordpress/media-utils';
 
 addFilter(
 	'editor.MediaUpload',
-	'core/edit-site/components/media-upload',
+	'core/editor/components/media-upload',
 	() => MediaUpload
 );
diff --git a/packages/editor/src/hooks/pattern-overrides.js b/packages/editor/src/hooks/pattern-overrides.js
index 7b5b6ced08340..cd5f07aa8f48d 100644
--- a/packages/editor/src/hooks/pattern-overrides.js
+++ b/packages/editor/src/hooks/pattern-overrides.js
@@ -19,6 +19,7 @@ const {
 	ResetOverridesControl,
 	PATTERN_TYPES,
 	PARTIAL_SYNCING_SUPPORTED_BLOCKS,
+	PATTERN_SYNC_TYPES,
 } = unlock( patternsPrivateApis );
 
 /**
@@ -51,18 +52,23 @@ const withPatternOverrideControls = createHigherOrderComponent(
 // on every block.
 function ControlsWithStoreSubscription( props ) {
 	const blockEditingMode = useBlockEditingMode();
-	const { hasPatternOverridesSource, isEditingPattern } = useSelect(
+	const { hasPatternOverridesSource, isEditingSyncedPattern } = useSelect(
 		( select ) => {
 			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
+			const { getCurrentPostType, getEditedPostAttribute } =
+				select( editorStore );
 
 			return {
 				// For editing link to the site editor if the theme and user permissions support it.
 				hasPatternOverridesSource: !! getBlockBindingsSource(
 					'core/pattern-overrides'
 				),
-				isEditingPattern:
-					select( editorStore ).getCurrentPostType() ===
-					PATTERN_TYPES.user,
+				isEditingSyncedPattern:
+					getCurrentPostType() === PATTERN_TYPES.user &&
+					getEditedPostAttribute( 'meta' )?.wp_pattern_sync_status !==
+						PATTERN_SYNC_TYPES.unsynced &&
+					getEditedPostAttribute( 'wp_pattern_sync_status' ) !==
+						PATTERN_SYNC_TYPES.unsynced,
 			};
 		},
 		[]
@@ -76,9 +82,9 @@ function ControlsWithStoreSubscription( props ) {
 		);
 
 	const shouldShowPatternOverridesControls =
-		isEditingPattern && blockEditingMode === 'default';
+		isEditingSyncedPattern && blockEditingMode === 'default';
 	const shouldShowResetOverridesControl =
-		! isEditingPattern &&
+		! isEditingSyncedPattern &&
 		!! props.attributes.metadata?.name &&
 		blockEditingMode !== 'disabled' &&
 		hasPatternBindings;
diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js
index 762c6bec89c88..58e15135e13ac 100644
--- a/packages/editor/src/private-apis.js
+++ b/packages/editor/src/private-apis.js
@@ -6,67 +6,47 @@ import * as interfaceApis from '@wordpress/interface';
 /**
  * Internal dependencies
  */
-import CollapsableBlockToolbar from './components/collapsible-block-toolbar';
-import EditorCanvas from './components/editor-canvas';
 import { ExperimentalEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
-import useAutoSwitchEditorSidebars from './components/provider/use-auto-switch-editor-sidebars';
+import EditorContentSlotFill from './components/editor-interface/content-slot-fill';
 import useBlockEditorSettings from './components/provider/use-block-editor-settings';
-import DocumentTools from './components/document-tools';
-import InserterSidebar from './components/inserter-sidebar';
-import ListViewSidebar from './components/list-view-sidebar';
-import MoreMenu from './components/more-menu';
-import PatternOverridesPanel from './components/pattern-overrides-panel';
+import BackButton from './components/header/back-button';
+import EditorInterface from './components/editor-interface';
+import CreateTemplatePartModal from './components/create-template-part-modal';
 import PluginPostExcerpt from './components/post-excerpt/plugin';
-import PostPanelRow from './components/post-panel-row';
-import PostViewLink from './components/post-view-link';
-import PreviewDropdown from './components/preview-dropdown';
 import PreferencesModal from './components/preferences-modal';
-import PostActions from './components/post-actions';
 import { usePostActions } from './components/post-actions/actions';
-import PostCardPanel from './components/post-card-panel';
-import PostStatus from './components/post-status';
 import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group';
 import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group';
-import { PrivatePostExcerptPanel } from './components/post-excerpt/panel';
-import PostPublishButtonOrToggle from './components/post-publish-button/post-publish-button-or-toggle';
-import SavePublishPanels from './components/save-publish-panels';
-import PostContentInformation from './components/post-content-information';
-import PostLastEditedPanel from './components/post-last-edited-panel';
+import ResizableEditor from './components/resizable-editor';
+import Sidebar from './components/sidebar';
+import {
+	mergeBaseAndUserConfigs,
+	GlobalStylesProvider,
+} from './components/global-styles-provider';
 
 const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
 
 export const privateApis = {};
 lock( privateApis, {
-	CollapsableBlockToolbar,
-	DocumentTools,
-	EditorCanvas,
+	CreateTemplatePartModal,
+	BackButton,
 	ExperimentalEditorProvider,
 	EntitiesSavedStatesExtensible,
-	InserterSidebar,
-	ListViewSidebar,
-	MoreMenu,
-	PatternOverridesPanel,
+	EditorInterface,
+	EditorContentSlotFill,
+	GlobalStylesProvider,
+	mergeBaseAndUserConfigs,
 	PluginPostExcerpt,
-	PostActions,
-	PostPanelRow,
-	PostViewLink,
-	PreviewDropdown,
 	PreferencesModal,
 	usePostActions,
-	PostCardPanel,
-	PostStatus,
 	ToolsMoreMenuGroup,
 	ViewMoreMenuGroup,
-	PrivatePostExcerptPanel,
-	PostPublishButtonOrToggle,
-	SavePublishPanels,
-	PostContentInformation,
-	PostLastEditedPanel,
+	ResizableEditor,
+	Sidebar,
 
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
-	useAutoSwitchEditorSidebars,
 	useBlockEditorSettings,
 	interfaceStore,
 	...remainingInterfaceApis,
diff --git a/packages/editor/src/private-apis.native.js b/packages/editor/src/private-apis.native.js
new file mode 100644
index 0000000000000..7c302c9c87d3a
--- /dev/null
+++ b/packages/editor/src/private-apis.native.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import * as interfaceApis from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import VisualEditor from './components/visual-editor';
+import { ExperimentalEditorProvider } from './components/provider';
+import { lock } from './lock-unlock';
+import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
+import useBlockEditorSettings from './components/provider/use-block-editor-settings';
+import PluginPostExcerpt from './components/post-excerpt/plugin';
+import PreferencesModal from './components/preferences-modal';
+import { usePostActions } from './components/post-actions/actions';
+import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group';
+import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group';
+
+const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
+
+export const privateApis = {};
+lock( privateApis, {
+	VisualEditor,
+	ExperimentalEditorProvider,
+	EntitiesSavedStatesExtensible,
+	PluginPostExcerpt,
+	PreferencesModal,
+	usePostActions,
+	ToolsMoreMenuGroup,
+	ViewMoreMenuGroup,
+
+	// This is a temporary private API while we're updating the site editor to use EditorProvider.
+	useBlockEditorSettings,
+	interfaceStore,
+	...remainingInterfaceApis,
+} );
diff --git a/packages/editor/src/store/constants.js b/packages/editor/src/store/constants.js
index 81e2fba5d14af..78708f00cc9eb 100644
--- a/packages/editor/src/store/constants.js
+++ b/packages/editor/src/store/constants.js
@@ -18,6 +18,7 @@ export const TRASH_POST_NOTICE_ID = 'TRASH_POST_NOTICE_ID';
 export const PERMALINK_POSTNAME_REGEX = /%(?:postname|pagename)%/;
 export const ONE_MINUTE_IN_MS = 60 * 1000;
 export const AUTOSAVE_PROPERTIES = [ 'title', 'excerpt', 'content' ];
+export const TEMPLATE_PART_AREA_DEFAULT_CATEGORY = 'uncategorized';
 export const TEMPLATE_POST_TYPE = 'wp_template';
 export const TEMPLATE_PART_POST_TYPE = 'wp_template_part';
 export const PATTERN_POST_TYPE = 'wp_block';
@@ -27,3 +28,9 @@ export const TEMPLATE_ORIGINS = {
 	theme: 'theme',
 	plugin: 'plugin',
 };
+export const TEMPLATE_POST_TYPES = [ 'wp_template', 'wp_template_part' ];
+export const GLOBAL_POST_TYPES = [
+	...TEMPLATE_POST_TYPES,
+	'wp_block',
+	'wp_navigation',
+];
diff --git a/packages/editor/src/store/private-actions.js b/packages/editor/src/store/private-actions.js
index c3fca0798e8b7..9304a2fe2c057 100644
--- a/packages/editor/src/store/private-actions.js
+++ b/packages/editor/src/store/private-actions.js
@@ -15,7 +15,6 @@ import { decodeEntities } from '@wordpress/html-entities';
  * Internal dependencies
  */
 import isTemplateRevertable from './utils/is-template-revertable';
-import { TEMPLATE_POST_TYPE } from './constants';
 
 /**
  * Returns an action object used to set which template is currently being used/edited.
@@ -363,14 +362,13 @@ export const revertTemplate =
 	};
 
 /**
- * Action that removes an array of templates.
+ * Action that removes an array of templates, template parts or patterns.
  *
- * @param {Array} items An array of template or template part objects to remove.
+ * @param {Array} items An array of template,template part or pattern objects to remove.
  */
 export const removeTemplates =
 	( items ) =>
 	async ( { registry } ) => {
-		const isTemplate = items[ 0 ].type === TEMPLATE_POST_TYPE;
 		const promiseResult = await Promise.allSettled(
 			items.map( ( item ) => {
 				return registry
@@ -402,16 +400,14 @@ export const removeTemplates =
 					decodeEntities( title )
 				);
 			} else {
-				successMessage = isTemplate
-					? __( 'Templates deleted.' )
-					: __( 'Template parts deleted.' );
+				successMessage = __( 'Items deleted.' );
 			}
 
 			registry
 				.dispatch( noticesStore )
 				.createSuccessNotice( successMessage, {
 					type: 'snackbar',
-					id: 'site-editor-template-deleted-success',
+					id: 'editor-template-deleted-success',
 				} );
 		} else {
 			// If there was at lease one failure.
@@ -421,11 +417,9 @@ export const removeTemplates =
 				if ( promiseResult[ 0 ].reason?.message ) {
 					errorMessage = promiseResult[ 0 ].reason.message;
 				} else {
-					errorMessage = isTemplate
-						? __( 'An error occurred while deleting the template.' )
-						: __(
-								'An error occurred while deleting the template part.'
-						  );
+					errorMessage = __(
+						'An error occurred while deleting the item.'
+					);
 				}
 				// If we were trying to delete a multiple templates
 			} else {
@@ -439,45 +433,23 @@ export const removeTemplates =
 					}
 				}
 				if ( errorMessages.size === 0 ) {
-					errorMessage = isTemplate
-						? __(
-								'An error occurred while deleting the templates.'
-						  )
-						: __(
-								'An error occurred while deleting the template parts.'
-						  );
+					errorMessage = __(
+						'An error occurred while deleting the items.'
+					);
 				} else if ( errorMessages.size === 1 ) {
-					errorMessage = isTemplate
-						? sprintf(
-								/* translators: %s: an error message */
-								__(
-									'An error occurred while deleting the templates: %s'
-								),
-								[ ...errorMessages ][ 0 ]
-						  )
-						: sprintf(
-								/* translators: %s: an error message */
-								__(
-									'An error occurred while deleting the template parts: %s'
-								),
-								[ ...errorMessages ][ 0 ]
-						  );
+					errorMessage = sprintf(
+						/* translators: %s: an error message */
+						__( 'An error occurred while deleting the items: %s' ),
+						[ ...errorMessages ][ 0 ]
+					);
 				} else {
-					errorMessage = isTemplate
-						? sprintf(
-								/* translators: %s: a list of comma separated error messages */
-								__(
-									'Some errors occurred while deleting the templates: %s'
-								),
-								[ ...errorMessages ].join( ',' )
-						  )
-						: sprintf(
-								/* translators: %s: a list of comma separated error messages */
-								__(
-									'Some errors occurred while deleting the template parts: %s'
-								),
-								[ ...errorMessages ].join( ',' )
-						  );
+					sprintf(
+						/* translators: %s: a list of comma separated error messages */
+						__(
+							'Some errors occurred while deleting the items: %s'
+						),
+						[ ...errorMessages ].join( ',' )
+					);
 				}
 			}
 			registry
diff --git a/packages/editor/src/store/private-selectors.js b/packages/editor/src/store/private-selectors.js
index 5abd72f13713b..8a866b46a6cdd 100644
--- a/packages/editor/src/store/private-selectors.js
+++ b/packages/editor/src/store/private-selectors.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal';
+
 /**
  * WordPress dependencies
  */
@@ -17,6 +22,7 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import {
 	getRenderingMode,
+	getCurrentPost,
 	__experimentalGetDefaultTemplatePartAreas,
 } from './selectors';
 import { TEMPLATE_PART_POST_TYPE } from './constants';
@@ -75,6 +81,9 @@ export const getInsertionPoint = createRegistrySelector( ( select ) =>
 export function getListViewToggleRef( state ) {
 	return state.listViewToggleRef;
 }
+export function getInserterSidebarToggleRef( state ) {
+	return state.inserterSidebarToggleRef;
+}
 const CARD_ICONS = {
 	wp_block: symbol,
 	wp_navigation: navigation,
@@ -132,3 +141,42 @@ export const getCurrentTemplateTemplateParts = createRegistrySelector(
 		return getFilteredTemplatePartBlocks( blocks, templateParts );
 	}
 );
+
+/**
+ * Returns true if there are unsaved changes to the
+ * post's meta fields, and false otherwise.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} postType The post type of the post.
+ * @param {number} postId   The ID of the post.
+ *
+ * @return {boolean} Whether there are edits or not in the meta fields of the relevant post.
+ */
+export const hasPostMetaChanges = createRegistrySelector(
+	( select ) => ( state, postType, postId ) => {
+		const { type: currentPostType, id: currentPostId } =
+			getCurrentPost( state );
+		// If no postType or postId is passed, use the current post.
+		const edits = select( coreStore ).getEntityRecordNonTransientEdits(
+			'postType',
+			postType || currentPostType,
+			postId || currentPostId
+		);
+
+		if ( ! edits?.meta ) {
+			return false;
+		}
+
+		// Compare if anything apart from `footnotes` has changed.
+		const originalPostMeta = select( coreStore ).getEntityRecord(
+			'postType',
+			postType || currentPostType,
+			postId || currentPostId
+		)?.meta;
+
+		return ! fastDeepEqual(
+			{ ...originalPostMeta, footnotes: undefined },
+			{ ...edits.meta, footnotes: undefined }
+		);
+	}
+);
diff --git a/packages/editor/src/store/reducer.js b/packages/editor/src/store/reducer.js
index 202baa1e7e5cb..f9b4e05ffa8e5 100644
--- a/packages/editor/src/store/reducer.js
+++ b/packages/editor/src/store/reducer.js
@@ -360,6 +360,17 @@ export function listViewToggleRef( state = { current: null } ) {
 	return state;
 }
 
+/**
+ * This reducer does nothing aside initializing a ref to the inserter sidebar toggle.
+ * We will have a unique ref per "editor" instance.
+ *
+ * @param {Object} state
+ * @return {Object} Reference to the inserter sidebar toggle button.
+ */
+export function inserterSidebarToggleRef( state = { current: null } ) {
+	return state;
+}
+
 export function publishSidebarActive( state = false, action ) {
 	switch ( action.type ) {
 		case 'OPEN_PUBLISH_SIDEBAR':
@@ -387,6 +398,7 @@ export default combineReducers( {
 	deviceType,
 	removedPanels,
 	blockInserterPanel,
+	inserterSidebarToggleRef,
 	listViewPanel,
 	listViewToggleRef,
 	publishSidebarActive,
diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js
index e1a6be18e4601..8b0dfd4b370c4 100644
--- a/packages/editor/src/store/selectors.js
+++ b/packages/editor/src/store/selectors.js
@@ -983,7 +983,7 @@ export function getEditedPostSlug( state ) {
 }
 
 /**
- * Returns the permalink for a post, split into it's three parts: the prefix,
+ * Returns the permalink for a post, split into its three parts: the prefix,
  * the postName, and the suffix.
  *
  * @param {Object} state Editor state.
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
index ed61638ffb7ef..a4034a8a51c73 100644
--- a/packages/editor/src/style.scss
+++ b/packages/editor/src/style.scss
@@ -3,19 +3,26 @@
 @import "./components/autocompleters/style.scss";
 @import "./components/block-manager/style.scss";
 @import "./components/collapsible-block-toolbar/style.scss";
+@import "./components/create-template-part-modal/style.scss";
+@import "./components/block-settings-menu/style.scss";
+@import "./components/blog-title/style.scss";
 @import "./components/document-bar/style.scss";
 @import "./components/document-outline/style.scss";
 @import "./components/document-tools/style.scss";
+@import "./components/editor-interface/style.scss";
 @import "./components/editor-notices/style.scss";
 @import "./components/entities-saved-states/style.scss";
 @import "./components/error-boundary/style.scss";
+@import "./components/header/style.scss";
 @import "./components/inserter-sidebar/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
 @import "./components/list-view-sidebar/style.scss";
+@import "./components/page-attributes/style.scss";
 @import "./components/post-author/style.scss";
 @import "./components/post-actions/style.scss";
 @import "./components/post-card-panel/style.scss";
 @import "./components/post-content-information/style.scss";
+@import "./components/post-discussion/style.scss";
 @import "./components/post-excerpt/style.scss";
 @import "./components/post-featured-image/style.scss";
 @import "./components/post-format/style.scss";
@@ -23,10 +30,13 @@
 @import "./components/post-last-revision/style.scss";
 @import "./components/post-locked-modal/style.scss";
 @import "./components/post-panel-row/style.scss";
+@import "./components/post-panel-section/style.scss";
 @import "./components/post-publish-panel/style.scss";
 @import "./components/post-saved-state/style.scss";
 @import "./components/post-schedule/style.scss";
+@import "./components/post-slug/style.scss";
 @import "./components/post-status/style.scss";
+@import "./components/post-sticky/style.scss";
 @import "./components/post-sync-status/style.scss";
 @import "./components/post-taxonomies/style.scss";
 @import "./components/post-template/style.scss";
@@ -34,9 +44,16 @@
 @import "./components/post-title/style.scss";
 @import "./components/post-url/style.scss";
 @import "./components/post-visibility/style.scss";
+@import "./components/posts-per-page/style.scss";
 @import "./components/post-trash/style.scss";
 @import "./components/preview-dropdown/style.scss";
+@import "./components/resizable-editor/style.scss";
 @import "./components/save-publish-panels/style.scss";
 @import "./components/start-page-options/style.scss";
+@import "./components/start-template-options/style.scss";
+@import "./components/sidebar/style.scss";
+@import "./components/site-discussion/style.scss";
 @import "./components/table-of-contents/style.scss";
 @import "./components/template-areas/style.scss";
+@import "./components/text-editor/style.scss";
+@import "./components/visual-editor/style.scss";
diff --git a/packages/editor/src/utils/set-nested-value.js b/packages/editor/src/utils/set-nested-value.js
new file mode 100644
index 0000000000000..ec684e751cd04
--- /dev/null
+++ b/packages/editor/src/utils/set-nested-value.js
@@ -0,0 +1,39 @@
+/**
+ * Sets the value at path of object.
+ * If a portion of path doesn’t exist, it’s created.
+ * Arrays are created for missing index properties while objects are created
+ * for all other missing properties.
+ *
+ * This function intentionally mutates the input object.
+ *
+ * Inspired by _.set().
+ *
+ * @see https://lodash.com/docs/4.17.15#set
+ *
+ * @todo Needs to be deduplicated with its copy in `@wordpress/core-data`.
+ *
+ * @param {Object} object Object to modify
+ * @param {Array}  path   Path of the property to set.
+ * @param {*}      value  Value to set.
+ */
+export default function setNestedValue( object, path, value ) {
+	if ( ! object || typeof object !== 'object' ) {
+		return object;
+	}
+
+	path.reduce( ( acc, key, idx ) => {
+		if ( acc[ key ] === undefined ) {
+			if ( Number.isInteger( path[ idx + 1 ] ) ) {
+				acc[ key ] = [];
+			} else {
+				acc[ key ] = {};
+			}
+		}
+		if ( idx === path.length - 1 ) {
+			acc[ key ] = value;
+		}
+		return acc[ key ];
+	}, object );
+
+	return object;
+}
diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md
index d97d499eac4b2..2d0c67c22c284 100644
--- a/packages/element/CHANGELOG.md
+++ b/packages/element/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 6.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 5.35.0 (2024-05-16)
+
 ## 5.34.0 (2024-05-02)
 
 ## 5.33.0 (2024-04-19)
@@ -134,7 +142,7 @@
 
 ### Bug Fix
 
-- Serialize will now keep correct casing for SVG attributes ([#38936](https://github.com/WordPress/gutenberg/pull/38936)).
+-   Serialize will now keep correct casing for SVG attributes ([#38936](https://github.com/WordPress/gutenberg/pull/38936)).
 
 ## 4.1.0 (2022-01-27)
 
diff --git a/packages/element/package.json b/packages/element/package.json
index 153e817837ce4..fe9a68695b159 100644
--- a/packages/element/package.json
+++ b/packages/element/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/element",
-	"version": "5.34.0",
+	"version": "6.0.0",
 	"description": "Element React module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -29,8 +30,8 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@types/react": "^18.0.21",
-		"@types/react-dom": "^18.0.6",
+		"@types/react": "^18.2.79",
+		"@types/react-dom": "^18.2.25",
 		"@wordpress/escape-html": "file:../escape-html",
 		"change-case": "^4.1.2",
 		"is-plain-object": "^5.0.0",
diff --git a/packages/element/src/serialize.js b/packages/element/src/serialize.js
index e047ccad432dc..9ca05cf2fa5e4 100644
--- a/packages/element/src/serialize.js
+++ b/packages/element/src/serialize.js
@@ -755,7 +755,7 @@ export function renderAttributes( props ) {
 
 		let value = getNormalAttributeValue( key, props[ key ] );
 
-		// If value is not of serializeable type, skip.
+		// If value is not of serializable type, skip.
 		if ( ! ATTRIBUTES_TYPES.has( typeof value ) ) {
 			continue;
 		}
diff --git a/packages/element/src/test/create-interpolate-element.js b/packages/element/src/test/create-interpolate-element.js
index e78d3b1c55844..17b1cc9b3ab2c 100644
--- a/packages/element/src/test/create-interpolate-element.js
+++ b/packages/element/src/test/create-interpolate-element.js
@@ -80,7 +80,7 @@ describe( 'createInterpolateElement', () => {
 		);
 		const component = createInterpolateElement( testString, {
 			// eslint-disable-next-line jsx-a11y/anchor-has-content
-			a: <a href={ 'https://github.com' } className={ 'some_class' } />,
+			a: <a href="https://github.com" className="some_class" />,
 		} );
 		expect( JSON.stringify( component ) ).toEqual(
 			JSON.stringify( expectedElement )
diff --git a/packages/element/src/test/serialize.js b/packages/element/src/test/serialize.js
index 7e38b80101bcd..e2337f8556119 100644
--- a/packages/element/src/test/serialize.js
+++ b/packages/element/src/test/serialize.js
@@ -322,12 +322,11 @@ describe( 'renderElement()', () => {
 				<Provider value={ { value: '1st provided' } }>
 					<Consumer>{ ( context ) => context.value }</Consumer>
 				</Provider>
-				{ '|' }
+				|
 				<Provider value={ { value: '2nd provided' } }>
 					<Consumer>{ ( context ) => context.value }</Consumer>
 				</Provider>
-				{ '|' }
-				<Consumer>{ ( context ) => context.value }</Consumer>
+				|<Consumer>{ ( context ) => context.value }</Consumer>
 			</Fragment>
 		);
 
@@ -344,8 +343,7 @@ describe( 'renderElement()', () => {
 				<Provider value={ { value: 'inner provided' } }>
 					<Consumer>{ ( context ) => context.value }</Consumer>
 				</Provider>
-				{ '|' }
-				<Consumer>{ ( context ) => context.value }</Consumer>
+				|<Consumer>{ ( context ) => context.value }</Consumer>
 			</Provider>
 		);
 
diff --git a/packages/env/CHANGELOG.md b/packages/env/CHANGELOG.md
index d97d0c939a4d7..7669cf755943e 100644
--- a/packages/env/CHANGELOG.md
+++ b/packages/env/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 10.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 9.10.0 (2024-05-16)
+
 ## 9.9.0 (2024-05-02)
 
 ## 9.8.0 (2024-04-19)
@@ -28,7 +36,7 @@
 
 ### Breaking Change
 
-- Update Docker usage to `docker compose` V2 following [deprecation](https://docs.docker.com/compose/migrate/) of `docker-compose` V1.
+-   Update Docker usage to `docker compose` V2 following [deprecation](https://docs.docker.com/compose/migrate/) of `docker-compose` V1.
 
 ## 8.13.0 (2023-11-29)
 
diff --git a/packages/env/lib/config/parse-config.js b/packages/env/lib/config/parse-config.js
index 3f69bb78b81f2..5da05396ec468 100644
--- a/packages/env/lib/config/parse-config.js
+++ b/packages/env/lib/config/parse-config.js
@@ -108,7 +108,7 @@ const DEFAULT_ENVIRONMENT_CONFIG = {
  * @param {string} configDirectoryPath A path to the directory we are parsing the config for.
  * @param {string} cacheDirectoryPath  Path to the work directory located in ~/.wp-env.
  *
- * @return {WPRootConfig} Parsed config.
+ * @return {Promise<WPRootConfig>} Parsed config.
  */
 async function parseConfig( configDirectoryPath, cacheDirectoryPath ) {
 	// The local config will be used to override any defaults.
diff --git a/packages/env/lib/config/test/parse-config.js b/packages/env/lib/config/test/parse-config.js
index ee808b973b16a..f2e9b923d7fdc 100644
--- a/packages/env/lib/config/test/parse-config.js
+++ b/packages/env/lib/config/test/parse-config.js
@@ -1,5 +1,4 @@
 'use strict';
-/* eslint-disable jest/no-conditional-expect */
 /**
  * Internal dependencies
  */
@@ -319,16 +318,13 @@ describe( 'parseConfig', () => {
 	it( 'throws when latest WordPress version needed but not found', async () => {
 		getLatestWordPressVersion.mockResolvedValue( null );
 
-		expect.assertions( 1 );
-		try {
-			await parseConfig( '/test/gutenberg', '/cache' );
-		} catch ( error ) {
-			expect( error ).toEqual(
-				new ValidationError(
-					'Could not find the latest WordPress version. There may be a network issue.'
-				)
-			);
-		}
+		await expect(
+			parseConfig( '/test/gutenberg', '/cache' )
+		).rejects.toEqual(
+			new ValidationError(
+				'Could not find the latest WordPress version. There may be a network issue.'
+			)
+		);
 	} );
 
 	it( 'throws for unknown config options', async () => {
@@ -346,16 +342,13 @@ describe( 'parseConfig', () => {
 			throw new Error( 'Invalid File: ' + configFile );
 		} );
 
-		expect.assertions( 1 );
-		try {
-			await parseConfig( '/test/gutenberg', '/cache' );
-		} catch ( error ) {
-			expect( error ).toEqual(
-				new ValidationError(
-					`Invalid /test/gutenberg/.wp-env.json: "test" is not a configuration option.`
-				)
-			);
-		}
+		await expect(
+			parseConfig( '/test/gutenberg', '/cache' )
+		).rejects.toEqual(
+			new ValidationError(
+				`Invalid /test/gutenberg/.wp-env.json: "test" is not a configuration option.`
+			)
+		);
 	} );
 
 	it( 'throws for root-only config options', async () => {
@@ -378,16 +371,12 @@ describe( 'parseConfig', () => {
 			throw new Error( 'Invalid File: ' + configFile );
 		} );
 
-		expect.assertions( 1 );
-		try {
-			await parseConfig( '/test/gutenberg', '/cache' );
-		} catch ( error ) {
-			expect( error ).toEqual(
-				new ValidationError(
-					`Invalid /test/gutenberg/.wp-env.json: "development.env" is not a configuration option.`
-				)
-			);
-		}
+		await expect(
+			parseConfig( '/test/gutenberg', '/cache' )
+		).rejects.toEqual(
+			new ValidationError(
+				`Invalid /test/gutenberg/.wp-env.json: "development.env" is not a configuration option.`
+			)
+		);
 	} );
 } );
-/* eslint-enable jest/no-conditional-expect */
diff --git a/packages/env/package.json b/packages/env/package.json
index c5950430e1ded..165ff57790fba 100644
--- a/packages/env/package.json
+++ b/packages/env/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/env",
-	"version": "9.9.0",
+	"version": "10.0.0",
 	"description": "A zero-config, self contained local WordPress environment for development and testing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,6 +19,10 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
 	"directories": {
 		"lib": "lib",
 		"test": "tests"
diff --git a/packages/escape-html/CHANGELOG.md b/packages/escape-html/CHANGELOG.md
index 031efbbcaae7b..2562662aa2ce9 100644
--- a/packages/escape-html/CHANGELOG.md
+++ b/packages/escape-html/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 3.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 2.58.0 (2024-05-16)
+
 ## 2.57.0 (2024-05-02)
 
 ## 2.56.0 (2024-04-19)
diff --git a/packages/escape-html/package.json b/packages/escape-html/package.json
index 7ec4b6de200fd..35cf1e8c28695 100644
--- a/packages/escape-html/package.json
+++ b/packages/escape-html/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/escape-html",
-	"version": "2.57.0",
+	"version": "3.0.0",
 	"description": "Escape HTML utils.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md
index 652e7722b0c58..816140ed76900 100644
--- a/packages/eslint-plugin/CHANGELOG.md
+++ b/packages/eslint-plugin/CHANGELOG.md
@@ -2,6 +2,21 @@
 
 ## Unreleased
 
+## 19.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   `@wordpress/is-gutenberg-plugin` rule has been replaced by `@wordpress/wp-global-usage` ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   `@wordpress/wp-process-env` rule has been added and included in the recommended configurations ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   `@wordpress/gutenberg-phase` rule has been removed (deprecated in v10.0.0) ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 18.1.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
 ## 18.0.0 (2024-05-02)
 
 ### Breaking Changes
diff --git a/packages/eslint-plugin/README.md b/packages/eslint-plugin/README.md
index 1619778add661..cde410fc9c992 100644
--- a/packages/eslint-plugin/README.md
+++ b/packages/eslint-plugin/README.md
@@ -10,7 +10,7 @@ Install the module
 npm install @wordpress/eslint-plugin --save-dev
 ```
 
-**Note**: This package requires `node` 14.0.0 or later, and `npm` 6.14.4 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Usage
 
@@ -69,25 +69,26 @@ The granular rulesets will not define any environment globals. As such, if they
 
 ### Rules
 
-| Rule                                                                                                                                                                 | Description                                                                                    | Recommended |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ----------- |
-| [data-no-store-string-literals](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/data-no-store-string-literals.md)                 | Discourage passing string literals to reference data stores                                    |             |
-| [dependency-group](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/dependency-group.md)                                           | Enforce dependencies docblocks formatting                                                      | ✓           |
-| [is-gutenberg-plugin](docs/rules/is-gutenberg-plugin.md)                                                                                                             | Governs the use of the `process.env.IS_GUTENBERG_PLUGIN` constant                              | ✓           |
-| [no-base-control-with-label-without-id](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-base-control-with-label-without-id.md) | Disallow the usage of BaseControl component with a label prop set but omitting the id property | ✓           |
-| [no-unguarded-get-range-at](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unguarded-get-range-at.md)                         | Disallow the usage of unguarded `getRangeAt` calls                                             | ✓           |
-| [no-unsafe-wp-apis](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unsafe-wp-apis.md)                                         | Disallow the usage of unsafe APIs from `@wordpress/*` packages                                 | ✓           |
-| [no-unused-vars-before-return](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unused-vars-before-return.md)                   | Disallow assigning variable values if unused before a return                                   | ✓           |
-| [react-no-unsafe-timeout](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/react-no-unsafe-timeout.md)                             | Disallow unsafe `setTimeout` in component                                                      |             |
-| [valid-sprintf](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/valid-sprintf.md)                                                 | Enforce valid sprintf usage                                                                    | ✓           |
-| [i18n-ellipsis](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-ellipsis.md)                                                 | Disallow using three dots in translatable strings                                              | ✓           |
-| [i18n-no-collapsible-whitespace](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-collapsible-whitespace.md)               | Disallow collapsible whitespace in translatable strings                                        | ✓           |
-| [i18n-no-placeholders-only](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-placeholders-only.md)                         | Prevent using only placeholders in translatable strings                                        | ✓           |
-| [i18n-no-variables](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-variables.md)                                         | Enforce string literals as translation function arguments                                      | ✓           |
-| [i18n-text-domain](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-text-domain.md)                                           | Enforce passing valid text domains                                                             | ✓           |
-| [i18n-translator-comments](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-translator-comments.md)                           | Enforce adding translator comments                                                             | ✓           |
-| [i18n-no-flanking-whitespace](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-flanking-whitespace.md)                     | Disallow leading or trailing whitespace in translatable strings                                |             |
-| [i18n-hyphenated-range](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-hyphenated-range.md)                                 | Disallow hyphenated numerical ranges in translatable strings                                   |             |
+| Rule                                                                                                                                                                 | Description                                                                                     | Recommended |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------- |
+| [data-no-store-string-literals](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/data-no-store-string-literals.md)                 | Discourage passing string literals to reference data stores.                                    |             |
+| [dependency-group](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/dependency-group.md)                                           | Enforce dependencies docblocks formatting.                                                      | ✓           |
+| [i18n-ellipsis](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-ellipsis.md)                                                 | Disallow using three dots in translatable strings.                                              | ✓           |
+| [i18n-hyphenated-range](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-hyphenated-range.md)                                 | Disallow hyphenated numerical ranges in translatable strings.                                   |             |
+| [i18n-no-collapsible-whitespace](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-collapsible-whitespace.md)               | Disallow collapsible whitespace in translatable strings.                                        | ✓           |
+| [i18n-no-flanking-whitespace](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-flanking-whitespace.md)                     | Disallow leading or trailing whitespace in translatable strings.                                |             |
+| [i18n-no-placeholders-only](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-placeholders-only.md)                         | Prevent using only placeholders in translatable strings.                                        | ✓           |
+| [i18n-no-variables](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-variables.md)                                         | Enforce string literals as translation function arguments.                                      | ✓           |
+| [i18n-text-domain](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-text-domain.md)                                           | Enforce passing valid text domains.                                                             | ✓           |
+| [i18n-translator-comments](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-translator-comments.md)                           | Enforce adding translator comments.                                                             | ✓           |
+| [no-base-control-with-label-without-id](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-base-control-with-label-without-id.md) | Disallow the usage of BaseControl component with a label prop set but omitting the id property. | ✓           |
+| [no-unguarded-get-range-at](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unguarded-get-range-at.md)                         | Disallow the usage of unguarded `getRangeAt` calls.                                             | ✓           |
+| [no-unsafe-wp-apis](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unsafe-wp-apis.md)                                         | Disallow the usage of unsafe APIs from `@wordpress/*` packagesl                                 | ✓           |
+| [no-unused-vars-before-return](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unused-vars-before-return.md)                   | Disallow assigning variable values if unused before a return.                                   | ✓           |
+| [no-wp-process-env](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-wp-process-env.md)                                         | Disallow legacy usage of WordPress variables via `process.env` like `process.env.SCRIPT_DEBUG`. | ✓           |
+| [react-no-unsafe-timeout](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/react-no-unsafe-timeout.md)                             | Disallow unsafe `setTimeout` in component.                                                      |             |
+| [valid-sprintf](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/valid-sprintf.md)                                                 | Enforce valid sprintf usage.                                                                    | ✓           |
+| [wp-global-usage](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/wp-global-usage.md)                                             | Enforce correct usage of WordPress globals like `globalThis.SCRIPT_DEBUG`.                      |             |
 
 ### Legacy
 
diff --git a/packages/eslint-plugin/configs/custom.js b/packages/eslint-plugin/configs/custom.js
index dcee5de349bad..e6c67c0c6e435 100644
--- a/packages/eslint-plugin/configs/custom.js
+++ b/packages/eslint-plugin/configs/custom.js
@@ -7,6 +7,7 @@ module.exports = {
 		'@wordpress/no-global-active-element': 'error',
 		'@wordpress/no-global-get-selection': 'error',
 		'@wordpress/no-unsafe-wp-apis': 'error',
+		'@wordpress/no-wp-process-env': 'error',
 	},
 	overrides: [
 		{
diff --git a/packages/eslint-plugin/configs/react.js b/packages/eslint-plugin/configs/react.js
index 3562b0e70074b..04e4341c720be 100644
--- a/packages/eslint-plugin/configs/react.js
+++ b/packages/eslint-plugin/configs/react.js
@@ -37,7 +37,7 @@ module.exports = {
 		'react-hooks/exhaustive-deps': [
 			'warn',
 			{
-				additionalHooks: '(useSelect|useSuspenseSelect)',
+				additionalHooks: '^(useSelect|useSuspenseSelect)$',
 			},
 		],
 		'react-hooks/rules-of-hooks': 'error',
diff --git a/packages/eslint-plugin/docs/rules/is-gutenberg-plugin.md b/packages/eslint-plugin/docs/rules/is-gutenberg-plugin.md
deleted file mode 100644
index 99b51cf5cbb93..0000000000000
--- a/packages/eslint-plugin/docs/rules/is-gutenberg-plugin.md
+++ /dev/null
@@ -1,61 +0,0 @@
-# The `IS_GUTENBERG_PLUGIN` global (is-gutenberg-plugin)
-
-To enable the use of feature flags in Gutenberg, the IS_GUTENBERG_PLUGIN global constant was introduced. This constant is replaced with a boolean value at build time using webpack's define plugin.
-
-There are a few rules around using this constant:
-
--   Only access `IS_GUTENBERG_PLUGIN` via `process.env`, e.g. `process.env.IS_GUTENBERG_PLUGIN`. This is required since webpack's define plugin only replaces exact matches of `process.env.IS_GUTENBERG_PLUGIN` in the codebase.
--   The `IS_GUTENBERG_PLUGIN` variable should only be used as a simple boolean expression.
--   `IS_GUTENBERG_PLUGIN` should only be used within the condition of an if statement, e.g. `if ( process.env.IS_GUTENBERG_PLUGIN ) { // implement feature here }` or ternary `process.env.IS_GUTENBERG_PLUGIN ? something : somethingElse`. This rule ensures code that is disabled through a feature flag is removed by dead code elimination.
-
-## Rule details
-
-Examples of **incorrect** code for this rule:
-
-```js
-if ( IS_GUTENBERG_PLUGIN ) {
-	// implement feature here.
-}
-```
-
-```js
-if ( window[ 'IS_GUTENBERG_PLUGIN' ] ) {
-	// implement feature here.
-}
-```
-
-```js
-if ( process.env.IS_GUTENBERG_PLUGIN == 1 ) {
-	// implement feature here.
-}
-```
-
-```js
-if ( process.env.IS_GUTENBERG_PLUGIN === true ) {
-	// implement feature here.
-}
-```
-
-```js
-if ( true || process.env.IS_GUTENBERG_PLUGIN ) {
-	// implement feature here.
-}
-```
-
-```js
-const isMyFeatureActive = process.env.IS_GUTENBERG_PLUGIN;
-```
-
-Examples of **correct** code for this rule:
-
-```js
-if ( process.env.IS_GUTENBERG_PLUGIN ) {
-	// implement feature here.
-}
-```
-
-```js
-if ( ! process.env.IS_GUTENBERG_PLUGIN ) {
-	return;
-}
-```
diff --git a/packages/eslint-plugin/docs/rules/no-wp-process-env.md b/packages/eslint-plugin/docs/rules/no-wp-process-env.md
new file mode 100644
index 0000000000000..46fa6ed431c20
--- /dev/null
+++ b/packages/eslint-plugin/docs/rules/no-wp-process-env.md
@@ -0,0 +1,23 @@
+# No WordPress process.env (no-wp-process-env)
+
+WordPress globals were accessed via `process.env` in the past. This practice created difficulty for
+package consumers and was removed.
+
+The correct way to access these globals is now via `globalThis`, e.g. `globalThis.SCRIPT_DEBUG`.
+This is safer for package consumers.
+
+This rule is fixable.
+
+## Rule details
+
+Examples of **incorrect** code for this rule:
+
+```js
+process.env.SCRIPT_DEBUG;
+```
+
+Examples of **correct** code for this rule:
+
+```js
+globalThis.SCRIPT_DEBUG;
+```
diff --git a/packages/eslint-plugin/docs/rules/wp-global-usage.md b/packages/eslint-plugin/docs/rules/wp-global-usage.md
new file mode 100644
index 0000000000000..d7b90b89258a9
--- /dev/null
+++ b/packages/eslint-plugin/docs/rules/wp-global-usage.md
@@ -0,0 +1,60 @@
+# WordPress global usage (wp-global-usage)
+
+To enable the use of feature flags in Gutenberg some globals are used, such as `IS_GUTENBERG_PLUGIN` and `SCRIPT_DEBUG`.
+
+There are a few rules around using this constant:
+
+-   Only access the globals via `globalThis`, e.g. `globalThis.IS_GUTENBERG_PLUGIN`. This allows the variables to be replaced compile time.
+-   The globals should only be used as a conditional test (negation is allowed).
+
+## Rule details
+
+Examples of **incorrect** code for this rule:
+
+```js
+if ( IS_GUTENBERG_PLUGIN ) {
+	// implement feature here.
+}
+```
+
+```js
+if ( window[ 'IS_GUTENBERG_PLUGIN' ] ) {
+	// implement feature here.
+}
+```
+
+```js
+if ( globalThis.IS_GUTENBERG_PLUGIN == 1 ) {
+	// implement feature here.
+}
+```
+
+```js
+if ( globalThis.IS_GUTENBERG_PLUGIN === true ) {
+	// implement feature here.
+}
+```
+
+```js
+if ( true || globalThis.IS_GUTENBERG_PLUGIN ) {
+	// implement feature here.
+}
+```
+
+```js
+const isMyFeatureActive = globalThis.IS_GUTENBERG_PLUGIN;
+```
+
+Examples of **correct** code for this rule:
+
+```js
+if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+	// implement feature here.
+}
+```
+
+```js
+if ( ! globalThis.IS_GUTENBERG_PLUGIN ) {
+	return;
+}
+```
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
index 7e7efc5dffa03..8cf48275fbe88 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/eslint-plugin",
-	"version": "18.0.0",
+	"version": "19.0.0",
 	"description": "ESLint plugin for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,8 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14",
-		"npm": ">=6.14.4"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"configs",
diff --git a/packages/eslint-plugin/rules/__tests__/dependency-group.js b/packages/eslint-plugin/rules/__tests__/dependency-group.js
index 2db53e9ed666a..1dac078aafb36 100644
--- a/packages/eslint-plugin/rules/__tests__/dependency-group.js
+++ b/packages/eslint-plugin/rules/__tests__/dependency-group.js
@@ -23,7 +23,7 @@ ruleTester.run( 'dependency-group', rule, {
  * External dependencies
  */
 import { camelCase } from 'change-case';
-import classnames from 'classnames';
+import clsx from 'clsx';;
 
 /**
  * WordPress dependencies
@@ -41,7 +41,7 @@ import edit from './edit';`,
  * External dependencies
  */
 const { camelCase } = require( 'change-case' );
-const classnames = require( 'classnames' );
+const clsx = require( 'clsx' );
 
 /**
  * WordPress dependencies
@@ -58,7 +58,7 @@ const edit = require( './edit' );`,
 		{
 			code: `
 import { camelCase } from 'change-case';
-import classnames from 'classnames';
+import clsx from 'clsx';;
 /*
  * wordpress dependencies.
  */
@@ -83,7 +83,7 @@ import edit from './edit';`,
  * External dependencies
  */
 import { camelCase } from 'change-case';
-import classnames from 'classnames';
+import clsx from 'clsx';;
 /**
  * WordPress dependencies
  */
@@ -96,7 +96,7 @@ import edit from './edit';`,
 		{
 			code: `
 const { camelCase } = require( 'change-case' );
-const classnames = require( 'classnames' );
+const clsx = require( 'clsx' );
 /*
  * wordpress dependencies.
  */
@@ -121,7 +121,7 @@ const edit = require( './edit' );`,
  * External dependencies
  */
 const { camelCase } = require( 'change-case' );
-const classnames = require( 'classnames' );
+const clsx = require( 'clsx' );
 /**
  * WordPress dependencies
  */
diff --git a/packages/eslint-plugin/rules/__tests__/is-gutenberg-plugin.js b/packages/eslint-plugin/rules/__tests__/is-gutenberg-plugin.js
deleted file mode 100644
index c2ffa8415269d..0000000000000
--- a/packages/eslint-plugin/rules/__tests__/is-gutenberg-plugin.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * External dependencies
- */
-import { RuleTester } from 'eslint';
-
-/**
- * Internal dependencies
- */
-import rule from '../is-gutenberg-plugin';
-
-const ruleTester = new RuleTester( {
-	parserOptions: {
-		ecmaVersion: 6,
-	},
-} );
-
-const ERROR_MESSAGE =
-	'The `process.env.IS_GUTENBERG_PLUGIN` constant should only be used as the condition in an if statement or ternary expression.';
-
-ruleTester.run( 'is-gutenberg-plugin', rule, {
-	valid: [
-		{ code: `if ( process.env.IS_GUTENBERG_PLUGIN ) {}` },
-		{ code: `if ( ! process.env.IS_GUTENBERG_PLUGIN ) {}` },
-		{
-			// Ensure whitespace is ok.
-			code: `if (
-				process.env.
-				IS_GUTENBERG_PLUGIN
-			) {}`,
-		},
-		{ code: `const test = process.env.IS_GUTENBERG_PLUGIN ? foo : bar` },
-		{ code: `const test = ! process.env.IS_GUTENBERG_PLUGIN ? bar : foo` },
-		{
-			// Ensure whitespace is ok.
-			code: `const test = ! process.env.
-				IS_GUTENBERG_PLUGIN ? bar : foo`,
-		},
-	],
-	invalid: [
-		{
-			code: `if ( IS_GUTENBERG_PLUGIN ) {}`,
-			errors: [ { message: ERROR_MESSAGE } ],
-		},
-		{
-			code: `if ( window[ 'IS_GUTENBERG_PLUGIN' ] ) {}`,
-			errors: [ { message: ERROR_MESSAGE } ],
-		},
-		{
-			code: `if ( true ) { process.env.IS_GUTENBERG_PLUGIN === 2 }`,
-			errors: [ { message: ERROR_MESSAGE } ],
-		},
-		{
-			code: `if ( process.env.IS_GUTENBERG_PLUGIN === 2 ) {}`,
-			errors: [ { message: ERROR_MESSAGE } ],
-		},
-		{
-			code: `if ( true || process.env.IS_GUTENBERG_PLUGIN === 2 ) {}`,
-			errors: [ { message: ERROR_MESSAGE } ],
-		},
-		{
-			code: `const isFeatureActive = process.env.IS_GUTENBERG_PLUGIN;`,
-			errors: [ { message: ERROR_MESSAGE } ],
-		},
-	],
-} );
diff --git a/packages/eslint-plugin/rules/__tests__/no-wp-process-env.js b/packages/eslint-plugin/rules/__tests__/no-wp-process-env.js
new file mode 100644
index 0000000000000..330ed560aea99
--- /dev/null
+++ b/packages/eslint-plugin/rules/__tests__/no-wp-process-env.js
@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { RuleTester } from 'eslint';
+
+/**
+ * Internal dependencies
+ */
+import rule from '../no-wp-process-env';
+
+const ruleTester = new RuleTester( {
+	parserOptions: {
+		ecmaVersion: 6,
+	},
+} );
+
+ruleTester.run( 'no-wp-process-env', rule, {
+	valid: [
+		{ code: 'process.env.NODE_ENV' },
+		{ code: 'process.env.WHATEVER' },
+		{ code: 'process.env[foo]' },
+		{ code: 'process.env["foo"]' },
+		{ code: `process['env']["foo"]` },
+		{ code: "process['env'][`foo`]" },
+		{ code: "process.env[`${ '' }IS_GUTENBERG_PLUGIN`]" },
+		{ code: `a.b.c` },
+		{ code: `x['y']['z']` },
+		{ code: `d[e][f]` },
+		{ code: `process[ (()=>'env')() ][ {_:'SCRIPT_DEBUG'}['_'] ]` },
+	],
+	invalid: [
+		{
+			code: 'process.env.IS_GUTENBERG_PLUGIN',
+			errors: [ { messageId: 'useGlobalThis' } ],
+			output: 'globalThis.IS_GUTENBERG_PLUGIN',
+		},
+		{
+			code: 'process.env.SCRIPT_DEBUG',
+			errors: [ { messageId: 'useGlobalThis' } ],
+			output: 'globalThis.SCRIPT_DEBUG',
+		},
+		{
+			code: 'process.env.IS_WORDPRESS_CORE',
+			errors: [ { messageId: 'useGlobalThis' } ],
+			output: 'globalThis.IS_WORDPRESS_CORE',
+		},
+		{
+			code: `process['env']["IS_GUTENBERG_PLUGIN"]`,
+			errors: [ { messageId: 'useGlobalThis' } ],
+			output: 'globalThis.IS_GUTENBERG_PLUGIN',
+		},
+		{
+			code: 'process[`env`][`IS_GUTENBERG_PLUGIN`]',
+			errors: [ { messageId: 'useGlobalThis' } ],
+			output: 'globalThis.IS_GUTENBERG_PLUGIN',
+		},
+		{
+			code: 'process.env.GUTENBERG_PHASE',
+			errors: [ { messageId: 'noGutenbergPhase' } ],
+		},
+	],
+} );
diff --git a/packages/eslint-plugin/rules/__tests__/wp-global-usage.js b/packages/eslint-plugin/rules/__tests__/wp-global-usage.js
new file mode 100644
index 0000000000000..9d3dc9b2a29d7
--- /dev/null
+++ b/packages/eslint-plugin/rules/__tests__/wp-global-usage.js
@@ -0,0 +1,129 @@
+/**
+ * External dependencies
+ */
+import { RuleTester } from 'eslint';
+
+/**
+ * Internal dependencies
+ */
+import rule from '../wp-global-usage';
+
+const ruleTester = new RuleTester( {
+	parserOptions: {
+		ecmaVersion: 6,
+	},
+} );
+
+ruleTester.run( 'wp-global-usage', rule, {
+	valid: [
+		{ code: "const text = 'SCRIPT_DEBUG'" },
+		{ code: 'const config = { SCRIPT_DEBUG: true }' },
+		{ code: 'if ( globalThis.IS_GUTENBERG_PLUGIN ) {}' },
+		{ code: 'if ( globalThis.IS_WORDPRESS_CORE ) {}' },
+		{ code: 'if ( globalThis.SCRIPT_DEBUG ) {}' },
+		{ code: 'if ( process.env.SCRIPT_DEBUG ) {}' },
+		{ code: 'if ( ! globalThis.IS_GUTENBERG_PLUGIN ) {}' },
+		{
+			// Ensure whitespace is ok.
+			code: `if (
+				globalThis.
+				IS_GUTENBERG_PLUGIN
+			) {}`,
+		},
+		{ code: 'const test = globalThis.IS_GUTENBERG_PLUGIN ? foo : bar' },
+		{ code: 'const test = ! globalThis.IS_GUTENBERG_PLUGIN ? bar : foo' },
+		{
+			// Ensure whitespace is ok.
+			code: `const test = ! globalThis.
+				IS_GUTENBERG_PLUGIN ? bar : foo`,
+		},
+	],
+	invalid: [
+		{
+			code: 'if ( IS_GUTENBERG_PLUGIN ) {}',
+			errors: [
+				{
+					messageId: 'usedWithoutGlobalThis',
+					data: { name: 'IS_GUTENBERG_PLUGIN' },
+				},
+			],
+			output: 'if ( globalThis.IS_GUTENBERG_PLUGIN ) {}',
+		},
+		{
+			code: 'if ( window.IS_GUTENBERG_PLUGIN ) {}',
+			errors: [
+				{
+					messageId: 'usedWithoutGlobalThis',
+					data: { name: 'IS_GUTENBERG_PLUGIN' },
+				},
+			],
+			output: 'if ( globalThis.IS_GUTENBERG_PLUGIN ) {}',
+		},
+		{
+			code: 'if ( SCRIPT_DEBUG ) {}',
+			errors: [
+				{
+					messageId: 'usedWithoutGlobalThis',
+					data: { name: 'SCRIPT_DEBUG' },
+				},
+			],
+			output: 'if ( globalThis.SCRIPT_DEBUG ) {}',
+		},
+		{
+			code: 'if ( IS_WORDPRESS_CORE ) {}',
+			errors: [
+				{
+					messageId: 'usedWithoutGlobalThis',
+					data: { name: 'IS_WORDPRESS_CORE' },
+				},
+			],
+			output: 'if ( globalThis.IS_WORDPRESS_CORE ) {}',
+		},
+		{
+			code: "if ( window[ 'IS_GUTENBERG_PLUGIN' ] ) {}",
+			errors: [
+				{
+					messageId: 'usedWithoutGlobalThis',
+					data: { name: 'IS_GUTENBERG_PLUGIN' },
+				},
+			],
+			output: 'if ( globalThis.IS_GUTENBERG_PLUGIN ) {}',
+		},
+		{
+			code: 'if ( true ) { globalThis.IS_GUTENBERG_PLUGIN === 2 }',
+			errors: [
+				{
+					messageId: 'usedOutsideConditional',
+					data: { name: 'IS_GUTENBERG_PLUGIN' },
+				},
+			],
+		},
+		{
+			code: 'if ( globalThis.IS_GUTENBERG_PLUGIN === 2 ) {}',
+			errors: [
+				{
+					messageId: 'usedOutsideConditional',
+					data: { name: 'IS_GUTENBERG_PLUGIN' },
+				},
+			],
+		},
+		{
+			code: 'if ( true || globalThis.IS_GUTENBERG_PLUGIN === 2 ) {}',
+			errors: [
+				{
+					messageId: 'usedOutsideConditional',
+					data: { name: 'IS_GUTENBERG_PLUGIN' },
+				},
+			],
+		},
+		{
+			code: 'const isFeatureActive = globalThis.IS_GUTENBERG_PLUGIN;',
+			errors: [
+				{
+					messageId: 'usedOutsideConditional',
+					data: { name: 'IS_GUTENBERG_PLUGIN' },
+				},
+			],
+		},
+	],
+} );
diff --git a/packages/eslint-plugin/rules/gutenberg-phase.js b/packages/eslint-plugin/rules/gutenberg-phase.js
deleted file mode 100644
index e3ec9ccf8180e..0000000000000
--- a/packages/eslint-plugin/rules/gutenberg-phase.js
+++ /dev/null
@@ -1,174 +0,0 @@
-/**
- * Traverse up through the chain of parent AST nodes returning the first parent
- * the predicate returns a truthy value for.
- *
- * @param {Object}   sourceNode The AST node to search from.
- * @param {Function} predicate  A predicate invoked for each parent.
- *
- * @return {Object | undefined} The first encountered parent node where the predicate
- *                    returns a truthy value.
- */
-function findParent( sourceNode, predicate ) {
-	if ( ! sourceNode.parent ) {
-		return;
-	}
-
-	if ( predicate( sourceNode.parent ) ) {
-		return sourceNode.parent;
-	}
-
-	return findParent( sourceNode.parent, predicate );
-}
-
-/**
- * Tests whether the GUTENBERG_PHASE variable is accessed via
- * `process.env.GUTENBERG_PHASE`.
- *
- * @example
- * ```js
- * // good
- * if ( process.env.GUTENBERG_PHASE === 2 ) {
- *
- * // bad
- * if ( GUTENBERG_PHASE === 2 ) {
- * ```
- *
- * @param {Object} node    The GUTENBERG_PHASE identifier node.
- * @param {Object} context The eslint context object.
- */
-function testIsAccessedViaProcessEnv( node, context ) {
-	const parent = node.parent;
-
-	if (
-		parent &&
-		parent.type === 'MemberExpression' &&
-		context.getSource( parent ) === 'process.env.GUTENBERG_PHASE'
-	) {
-		return;
-	}
-
-	context.report(
-		node,
-		'The `GUTENBERG_PHASE` constant should be accessed using `process.env.GUTENBERG_PHASE`.'
-	);
-}
-
-/**
- * Tests whether the GUTENBERG_PHASE variable is used in a strict binary
- * equality expression in a comparison with a number, triggering a
- * violation if not.
- *
- * @example
- * ```js
- * // good
- * if ( process.env.GUTENBERG_PHASE === 2 ) {
- *
- * // bad
- * if ( process.env.GUTENBERG_PHASE >= '2' ) {
- * ```
- *
- * @param {Object} node    The GUTENBERG_PHASE identifier node.
- * @param {Object} context The eslint context object.
- */
-function testIsUsedInStrictBinaryExpression( node, context ) {
-	const parent = findParent(
-		node,
-		( candidate ) => candidate.type === 'BinaryExpression'
-	);
-
-	if ( parent ) {
-		const comparisonNode =
-			node.parent.type === 'MemberExpression' ? node.parent : node;
-
-		// Test for process.env.GUTENBERG_PHASE === <number> or <number> === process.env.GUTENBERG_PHASE.
-		const hasCorrectOperator = [ '===', '!==' ].includes( parent.operator );
-		const hasCorrectOperands =
-			( parent.left === comparisonNode &&
-				typeof parent.right.value === 'number' ) ||
-			( parent.right === comparisonNode &&
-				typeof parent.left.value === 'number' );
-
-		if ( hasCorrectOperator && hasCorrectOperands ) {
-			return;
-		}
-	}
-
-	context.report(
-		node,
-		'The `GUTENBERG_PHASE` constant should only be used in a strict equality comparison with a primitive number.'
-	);
-}
-
-/**
- * Tests whether the GUTENBERG_PHASE variable is used as the condition for an
- * if statement, triggering a violation if not.
- *
- * @example
- * ```js
- * // good
- * if ( process.env.GUTENBERG_PHASE === 2 ) {
- *
- * // bad
- * const isFeatureActive = process.env.GUTENBERG_PHASE === 2;
- * ```
- *
- * @param {Object} node    The GUTENBERG_PHASE identifier node.
- * @param {Object} context The eslint context object.
- */
-function testIsUsedInIfOrTernary( node, context ) {
-	const conditionalParent = findParent( node, ( candidate ) =>
-		[ 'IfStatement', 'ConditionalExpression' ].includes( candidate.type )
-	);
-	const binaryParent = findParent(
-		node,
-		( candidate ) => candidate.type === 'BinaryExpression'
-	);
-
-	if (
-		conditionalParent &&
-		binaryParent &&
-		conditionalParent.test &&
-		conditionalParent.test.range[ 0 ] === binaryParent.range[ 0 ] &&
-		conditionalParent.test.range[ 1 ] === binaryParent.range[ 1 ]
-	) {
-		return;
-	}
-
-	context.report(
-		node,
-		'The `GUTENBERG_PHASE` constant should only be used as part of the condition in an if statement or ternary expression.'
-	);
-}
-
-module.exports = {
-	meta: {
-		type: 'problem',
-		schema: [],
-		deprecated: true,
-		replacedBy: '@wordpress/is-gutenberg-plugin',
-	},
-	create( context ) {
-		return {
-			Identifier( node ) {
-				// Bypass any identifiers with a node name different to `GUTENBERG_PHASE`.
-				if ( node.name !== 'GUTENBERG_PHASE' ) {
-					return;
-				}
-
-				testIsAccessedViaProcessEnv( node, context );
-				testIsUsedInStrictBinaryExpression( node, context );
-				testIsUsedInIfOrTernary( node, context );
-			},
-			Literal( node ) {
-				// Bypass any identifiers with a node value different to `GUTENBERG_PHASE`.
-				if ( node.value !== 'GUTENBERG_PHASE' ) {
-					return;
-				}
-
-				if ( node.parent && node.parent.type === 'MemberExpression' ) {
-					testIsAccessedViaProcessEnv( node, context );
-				}
-			},
-		};
-	},
-};
diff --git a/packages/eslint-plugin/rules/is-gutenberg-plugin.js b/packages/eslint-plugin/rules/is-gutenberg-plugin.js
deleted file mode 100644
index 00475545e6158..0000000000000
--- a/packages/eslint-plugin/rules/is-gutenberg-plugin.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * Traverse up through the chain of parent AST nodes returning the first parent
- * the predicate returns a truthy value for.
- *
- * @param {Object}   sourceNode The AST node to search from.
- * @param {Function} predicate  A predicate invoked for each parent.
- *
- * @return {Object | undefined} The first encountered parent node where the predicate
- *                    returns a truthy value.
- */
-function findParent( sourceNode, predicate ) {
-	if ( ! sourceNode.parent ) {
-		return;
-	}
-
-	if ( predicate( sourceNode.parent ) ) {
-		return sourceNode.parent;
-	}
-
-	return findParent( sourceNode.parent, predicate );
-}
-
-/**
- * Tests whether the IS_GUTENBERG_PLUGIN variable is used as the condition for an
- * if statement or ternary, triggering a violation if not.
- *
- * @example
- * ```js
- * // good
- * if ( process.env.IS_GUTENBERG_PLUGIN ) {
- *
- * // bad
- * const isFeatureActive = process.env.IS_GUTENBERG_PLUGIN;
- * ```
- *
- * @param {Object} node    The IS_GUTENBERG_PLUGIN identifier node.
- * @param {Object} context The eslint context object.
- */
-function isUsedInConditional( node, context ) {
-	const conditionalParent = findParent( node, ( candidate ) =>
-		[ 'IfStatement', 'ConditionalExpression' ].includes( candidate.type )
-	);
-
-	if ( ! conditionalParent ) {
-		return false;
-	}
-
-	// Allow for whitespace as prettier sometimes breaks this on separate lines.
-	const textRegex = /^\s*!?\s*process\s*\.\s*env\s*\.\s*IS_GUTENBERG_PLUGIN$/;
-	const testSource = context.getSource( conditionalParent.test );
-
-	if ( ! textRegex.test( testSource ) ) {
-		return false;
-	}
-
-	return true;
-}
-
-const ERROR_MESSAGE =
-	'The `process.env.IS_GUTENBERG_PLUGIN` constant should only be used as the condition in an if statement or ternary expression.';
-
-module.exports = {
-	meta: {
-		type: 'problem',
-		schema: [],
-	},
-	create( context ) {
-		return {
-			Identifier( node ) {
-				// Bypass any identifiers with a node name different to `IS_GUTENBERG_PLUGIN`.
-				if ( node.name !== 'IS_GUTENBERG_PLUGIN' ) {
-					return;
-				}
-
-				if ( ! isUsedInConditional( node, context ) ) {
-					context.report( node, ERROR_MESSAGE );
-				}
-			},
-			// Check for literals, e.g. when 'IS_GUTENBERG_PLUGIN' is used as a string via something like 'window[ 'IS_GUTENBERG_PLUGIN' ]'.
-			Literal( node ) {
-				// Bypass any identifiers with a node value different to `IS_GUTENBERG_PLUGIN`.
-				if ( node.value !== 'IS_GUTENBERG_PLUGIN' ) {
-					return;
-				}
-
-				if ( node.parent && node.parent.type === 'MemberExpression' ) {
-					if ( ! isUsedInConditional( node, context ) ) {
-						context.report( node, ERROR_MESSAGE );
-					}
-				}
-			},
-		};
-	},
-};
diff --git a/packages/eslint-plugin/rules/no-wp-process-env.js b/packages/eslint-plugin/rules/no-wp-process-env.js
new file mode 100644
index 0000000000000..55aca44b92ba7
--- /dev/null
+++ b/packages/eslint-plugin/rules/no-wp-process-env.js
@@ -0,0 +1,93 @@
+const NAMES = new Set(
+	/** @type {const} */ ( [
+		'GUTENBERG_PHASE',
+		'IS_GUTENBERG_PLUGIN',
+		'IS_WORDPRESS_CORE',
+		'SCRIPT_DEBUG',
+	] )
+);
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+	meta: {
+		type: 'problem',
+		schema: [],
+		fixable: true,
+		messages: {
+			useGlobalThis:
+				'`{{ name }}` should not be accessed from process.env. Use `globalThis.{{name}}`.',
+			noGutenbergPhase:
+				'The GUTENBERG_PHASE environement variable is no longer available. Use IS_GUTENBERG_PLUGIN (boolean).',
+		},
+	},
+	create( context ) {
+		return {
+			MemberExpression( node ) {
+				const propertyNameOrValue = memberProperty( node );
+				if ( ! propertyNameOrValue ) {
+					return;
+				}
+				if ( ! NAMES.has( propertyNameOrValue ) ) {
+					return;
+				}
+
+				if ( node.object.type !== 'MemberExpression' ) {
+					return;
+				}
+
+				const obj = node.object;
+				const envCandidateProperty = memberProperty( obj );
+				if ( envCandidateProperty !== 'env' ) {
+					return;
+				}
+
+				if (
+					obj.object.type !== 'Identifier' ||
+					obj.object.name !== 'process'
+				) {
+					return;
+				}
+
+				if ( propertyNameOrValue === 'GUTENBERG_PHASE' ) {
+					context.report( {
+						node,
+						messageId: 'noGutenbergPhase',
+					} );
+					return;
+				}
+
+				context.report( {
+					node,
+					messageId: 'useGlobalThis',
+					data: { name: propertyNameOrValue },
+					fix( fixer ) {
+						return fixer.replaceText(
+							node,
+							`globalThis.${ propertyNameOrValue }`
+						);
+					},
+				} );
+			},
+		};
+	},
+};
+
+/**
+ * @param {import('estree').MemberExpression} node
+ */
+function memberProperty( node ) {
+	switch ( node.property.type ) {
+		case 'Identifier':
+			return node.property.name;
+		case 'Literal':
+			return node.property.value;
+		case 'TemplateLiteral':
+			if (
+				! node.property.expressions.length &&
+				node.property.quasis.length === 1
+			) {
+				return node.property.quasis[ 0 ].value.raw;
+			}
+	}
+	return null;
+}
diff --git a/packages/eslint-plugin/rules/wp-global-usage.js b/packages/eslint-plugin/rules/wp-global-usage.js
new file mode 100644
index 0000000000000..c6c75d9933123
--- /dev/null
+++ b/packages/eslint-plugin/rules/wp-global-usage.js
@@ -0,0 +1,170 @@
+const NAMES = new Set(
+	/** @type {const} */ ( [
+		'IS_GUTENBERG_PLUGIN',
+		'IS_WORDPRESS_CORE',
+		'SCRIPT_DEBUG',
+	] )
+);
+
+/**
+ * Tests whether the IS_GUTENBERG_PLUGIN variable is used as the condition for an
+ * if statement or ternary, triggering a violation if not.
+ *
+ * @example
+ * ```js
+ * // good
+ * if ( process.env.IS_GUTENBERG_PLUGIN ) {
+ *
+ * // bad
+ * const isFeatureActive = process.env.IS_GUTENBERG_PLUGIN;
+ * ```
+ *
+ * @param {import('estree').Node} node The IS_GUTENBERG_PLUGIN identifier node.
+ */
+function isUsedInConditional( node ) {
+	/** @type {import('estree').Node|undefined} */
+	let current = node;
+
+	// Simple negation is the only expresion allowed in the conditional:
+	// if ( ! globalThis.SCRIPT_DEBUG ) {}
+	// const D = ! globalThis.SCRIPT_DEBUG ? 'yes' : 'no';
+	if (
+		current.parent.type === 'UnaryExpression' &&
+		current.parent.operator === '!'
+	) {
+		current = current.parent;
+	}
+
+	// Check if the current node is the test of a conditional
+
+	/** @type {import('estree').Node|undefined} */
+	const parent = current.parent;
+
+	if ( parent.type === 'IfStatement' && parent.test === current ) {
+		return true;
+	}
+	if ( parent.type === 'ConditionalExpression' && parent.test === current ) {
+		return true;
+	}
+	return false;
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+	meta: {
+		type: 'problem',
+		schema: [],
+		fixable: true,
+		messages: {
+			usedOutsideConditional:
+				'`globalThis.{{ name }}` should only be used as the condition in an if statement or ternary expression.',
+			usedWithoutGlobalThis:
+				'`{{ name }}` should not be used directly. Use `globalThis.{{ name }}`.',
+		},
+	},
+	create( context ) {
+		return {
+			Identifier( node ) {
+				// Bypass any identifiers with a node name different to `IS_GUTENBERG_PLUGIN`.
+				if ( ! NAMES.has( node.name ) ) {
+					return;
+				}
+
+				if ( node.parent.type === 'Property' ) {
+					return;
+				}
+
+				if ( node.parent.type !== 'MemberExpression' ) {
+					context.report( {
+						node,
+						messageId: 'usedWithoutGlobalThis',
+						data: { name: node.name },
+						fix( fixer ) {
+							return fixer.replaceText(
+								node,
+								`globalThis.${ node.name }`
+							);
+						},
+					} );
+
+					if ( ! isUsedInConditional( node ) ) {
+						context.report( {
+							node,
+							messageId: 'usedOutsideConditional',
+							data: {
+								name: node.name,
+							},
+						} );
+					}
+					return;
+				}
+
+				if (
+					node.parent.object.type === 'Identifier' &&
+					node.parent.object.name !== 'globalThis'
+				) {
+					context.report( {
+						node,
+						messageId: 'usedWithoutGlobalThis',
+						data: { name: node.name },
+						fix( fixer ) {
+							if ( node.parent.object.name === 'window' ) {
+								return fixer.replaceText(
+									node.parent,
+									`globalThis.${ node.name }`
+								);
+							}
+						},
+					} );
+				} else if ( ! isUsedInConditional( node.parent ) ) {
+					context.report( {
+						node,
+						messageId: 'usedOutsideConditional',
+						data: {
+							name: node.name,
+						},
+					} );
+				}
+			},
+
+			// Check for literals, e.g. when 'IS_GUTENBERG_PLUGIN' is used as a string via something like 'window[ 'IS_GUTENBERG_PLUGIN' ]'.
+			Literal( node ) {
+				// Bypass any identifiers with a node value different to `IS_GUTENBERG_PLUGIN`.
+				if ( ! NAMES.has( node.value ) ) {
+					return;
+				}
+
+				if ( node.parent.type !== 'MemberExpression' ) {
+					return;
+				}
+
+				if (
+					node.parent.object.type === 'Identifier' &&
+					node.parent.object.name !== 'globalThis'
+				) {
+					context.report( {
+						node,
+						messageId: 'usedWithoutGlobalThis',
+						data: { name: node.value },
+						fix( fixer ) {
+							if ( node.parent.object.name === 'window' ) {
+								return fixer.replaceText(
+									node.parent,
+									`globalThis.${ node.value }`
+								);
+							}
+						},
+					} );
+				} else if ( ! isUsedInConditional( node.parent ) ) {
+					context.report( {
+						node,
+						messageId: 'usedOutsideConditional',
+						data: {
+							name: node.value,
+						},
+					} );
+				}
+			},
+		};
+	},
+};
diff --git a/packages/format-library/CHANGELOG.md b/packages/format-library/CHANGELOG.md
index f313912c274ba..8f73bad3fcad3 100644
--- a/packages/format-library/CHANGELOG.md
+++ b/packages/format-library/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.35.0 (2024-05-16)
+
 ## 4.34.0 (2024-05-02)
 
 ## 4.33.0 (2024-04-19)
diff --git a/packages/format-library/package.json b/packages/format-library/package.json
index 94fce380c42ca..5582be0966846 100644
--- a/packages/format-library/package.json
+++ b/packages/format-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "4.34.0",
+	"version": "5.0.0",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js
index 7bc7c954eea18..627e1e966b655 100644
--- a/packages/format-library/src/image/index.js
+++ b/packages/format-library/src/image/index.js
@@ -104,56 +104,43 @@ function Edit( {
 	activeObjectAttributes,
 	contentRef,
 } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-
-	function openModal() {
-		setIsModalOpen( true );
-	}
-
-	function closeModal() {
-		setIsModalOpen( false );
-	}
-
 	return (
 		<MediaUploadCheck>
-			<RichTextToolbarButton
-				icon={
-					<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-						<Path d="M4 18.5h16V17H4v1.5zM16 13v1.5h4V13h-4zM5.1 15h7.8c.6 0 1.1-.5 1.1-1.1V6.1c0-.6-.5-1.1-1.1-1.1H5.1C4.5 5 4 5.5 4 6.1v7.8c0 .6.5 1.1 1.1 1.1zm.4-8.5h7V10l-1-1c-.3-.3-.8-.3-1 0l-1.6 1.5-1.2-.7c-.3-.2-.6-.2-.9 0l-1.3 1V6.5zm0 6.1l1.8-1.3 1.3.8c.3.2.7.2.9-.1l1.5-1.4 1.5 1.4v1.5h-7v-.9z" />
-					</SVG>
-				}
-				title={ title }
-				onClick={ openModal }
-				isActive={ isObjectActive }
+			<MediaUpload
+				allowedTypes={ ALLOWED_MEDIA_TYPES }
+				onSelect={ ( { id, url, alt, width: imgWidth } ) => {
+					onChange(
+						insertObject( value, {
+							type: name,
+							attributes: {
+								className: `wp-image-${ id }`,
+								style: `width: ${ Math.min(
+									imgWidth,
+									150
+								) }px;`,
+								url,
+								alt,
+							},
+						} )
+					);
+					onFocus();
+				} }
+				render={ ( { open } ) => (
+					<RichTextToolbarButton
+						icon={
+							<SVG
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+							>
+								<Path d="M4 18.5h16V17H4v1.5zM16 13v1.5h4V13h-4zM5.1 15h7.8c.6 0 1.1-.5 1.1-1.1V6.1c0-.6-.5-1.1-1.1-1.1H5.1C4.5 5 4 5.5 4 6.1v7.8c0 .6.5 1.1 1.1 1.1zm.4-8.5h7V10l-1-1c-.3-.3-.8-.3-1 0l-1.6 1.5-1.2-.7c-.3-.2-.6-.2-.9 0l-1.3 1V6.5zm0 6.1l1.8-1.3 1.3.8c.3.2.7.2.9-.1l1.5-1.4 1.5 1.4v1.5h-7v-.9z" />
+							</SVG>
+						}
+						title={ title }
+						onClick={ open }
+						isActive={ isObjectActive }
+					/>
+				) }
 			/>
-			{ isModalOpen && (
-				<MediaUpload
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					onSelect={ ( { id, url, alt, width: imgWidth } ) => {
-						closeModal();
-						onChange(
-							insertObject( value, {
-								type: name,
-								attributes: {
-									className: `wp-image-${ id }`,
-									style: `width: ${ Math.min(
-										imgWidth,
-										150
-									) }px;`,
-									url,
-									alt,
-								},
-							} )
-						);
-						onFocus();
-					} }
-					onClose={ closeModal }
-					render={ ( { open } ) => {
-						open();
-						return null;
-					} }
-				/>
-			) }
 			{ isObjectActive && (
 				<InlineUI
 					value={ value }
diff --git a/packages/format-library/src/link/modal-screens/link-settings-screen.native.js b/packages/format-library/src/link/modal-screens/link-settings-screen.native.js
index 3bb003643ac1e..4e7f6ef30ace7 100644
--- a/packages/format-library/src/link/modal-screens/link-settings-screen.native.js
+++ b/packages/format-library/src/link/modal-screens/link-settings-screen.native.js
@@ -211,12 +211,12 @@ const LinkSettingsScreen = ( {
 							label={ __( 'Open in new tab' ) }
 							value={ opensInNewWindow }
 							onValueChange={ setOpensInNewWindows }
-							separatorType={ 'fullWidth' }
+							separatorType="fullWidth"
 						/>
 						<BottomSheet.Cell
 							label={ __( 'Remove link' ) }
 							labelStyle={ styles.clearLinkButton }
-							separatorType={ 'none' }
+							separatorType="none"
 							onPress={ removeLink }
 						/>
 					</>
diff --git a/packages/format-library/src/text-color/index.native.js b/packages/format-library/src/text-color/index.native.js
index c84332398ff68..aee0f26d5f439 100644
--- a/packages/format-library/src/text-color/index.native.js
+++ b/packages/format-library/src/text-color/index.native.js
@@ -8,12 +8,12 @@ import { StyleSheet, View } from 'react-native';
  */
 import { __ } from '@wordpress/i18n';
 import { useCallback, useMemo, useState } from '@wordpress/element';
-import { BlockControls, useSettings } from '@wordpress/block-editor';
 import {
-	ToolbarGroup,
-	ToolbarButton,
+	BlockControls,
+	useSettings,
 	useMobileGlobalStylesColors,
-} from '@wordpress/components';
+} from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 import {
 	Icon,
 	color as colorIcon,
diff --git a/packages/format-library/src/text-color/inline.native.js b/packages/format-library/src/text-color/inline.native.js
index 4199ce413ee9f..8324e0c3453c3 100644
--- a/packages/format-library/src/text-color/inline.native.js
+++ b/packages/format-library/src/text-color/inline.native.js
@@ -11,12 +11,9 @@ import {
 	getColorClassName,
 	getColorObjectByColorValue,
 	useMultipleOriginColorsAndGradients,
-} from '@wordpress/block-editor';
-import {
-	BottomSheet,
-	ColorSettings,
 	useMobileGlobalStylesColors,
-} from '@wordpress/components';
+} from '@wordpress/block-editor';
+import { BottomSheet, ColorSettings } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -108,6 +105,7 @@ function ColorPicker( { name, value, onChange, contentRef } ) {
 	const property = 'color';
 	const colors = useMobileGlobalStylesColors();
 	const colorSettings = useMultipleOriginColorsAndGradients();
+	colorSettings.allAvailableColors = colors;
 
 	const onColorChange = useCallback(
 		( color ) => {
diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md
index eebb90563eb0f..c92c344893f36 100644
--- a/packages/hooks/CHANGELOG.md
+++ b/packages/hooks/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
 ## 3.57.0 (2024-05-02)
 
 ## 3.56.0 (2024-04-19)
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index 99a6a875c647b..06779db3d042d 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/hooks",
-	"version": "3.57.0",
+	"version": "4.0.0",
 	"description": "WordPress hooks library.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/html-entities/CHANGELOG.md b/packages/html-entities/CHANGELOG.md
index c4558885796a6..b970e05f95faa 100644
--- a/packages/html-entities/CHANGELOG.md
+++ b/packages/html-entities/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
 ## 3.57.0 (2024-05-02)
 
 ## 3.56.0 (2024-04-19)
diff --git a/packages/html-entities/package.json b/packages/html-entities/package.json
index 0ae47c58d643d..2cb96e17a6270 100644
--- a/packages/html-entities/package.json
+++ b/packages/html-entities/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/html-entities",
-	"version": "3.57.0",
+	"version": "4.0.0",
 	"description": "HTML entity utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/i18n/CHANGELOG.md b/packages/i18n/CHANGELOG.md
index 1b5a846fd6173..55a6a848950df 100644
--- a/packages/i18n/CHANGELOG.md
+++ b/packages/i18n/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.58.0 (2024-05-16)
+
 ## 4.57.0 (2024-05-02)
 
 ## 4.56.0 (2024-04-19)
@@ -112,7 +120,7 @@
 
 ## 4.3.0 (2022-01-27)
 
-- Add new `addLocaleData` method to merge locale data into the Tannin instance by domain.
+-   Add new `addLocaleData` method to merge locale data into the Tannin instance by domain.
 
 ## 4.2.0 (2021-07-21)
 
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index 7b7ee1ed47b8b..b6ec0f47c1f9b 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/i18n",
-	"version": "4.57.0",
+	"version": "5.0.0",
 	"description": "WordPress internationalization (i18n) library.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index f55d3abc9d879..485fdaed57996 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -2,13 +2,21 @@
 
 ## Unreleased
 
+## 10.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 9.49.0 (2024-05-16)
+
 ## 9.48.0 (2024-05-02)
 
 ## 9.47.0 (2024-04-19)
 
 ## 9.46.0 (2024-04-03)
 
-- Add new `chevronDownSmall` icon.
+-   Add new `chevronDownSmall` icon.
 
 ## 9.45.0 (2024-03-21)
 
@@ -30,7 +38,7 @@
 
 ### New features
 
-- Add new `funnel` icon.
+-   Add new `funnel` icon.
 
 ## 9.36.0 (2023-11-02)
 
@@ -121,14 +129,17 @@
 ## 9.0.0 (2022-05-18)
 
 ### Breaking Changes
+
 -   Removed icons no longer used by the UI: `commentTitle`, `postTitle`, `queryTitle`, `archiveTitle`.
 
 ### Enhancement
+
 -   Update the `title` icon to match g2 design language. ([#40596](https://github.com/WordPress/gutenberg/pull/40596))
 
 ## 8.4.0 (2022-05-04)
 
 ## 8.3.0 (2022-04-21)
+
 ### New Features
 
 -   Add new `filter` icon. ([#40435](https://github.com/WordPress/gutenberg/pull/40435))
diff --git a/packages/icons/package.json b/packages/icons/package.json
index ed6286c0e5b47..f3912559bb710 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/icons",
-	"version": "9.48.0",
+	"version": "10.0.0",
 	"description": "WordPress Icons package, based on dashicon.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/interactivity-router/CHANGELOG.md b/packages/interactivity-router/CHANGELOG.md
index 41e22f95e9467..a7e6f5060b602 100644
--- a/packages/interactivity-router/CHANGELOG.md
+++ b/packages/interactivity-router/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 ## Unreleased
 
+## 2.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 1.8.0 (2024-05-16)
+
 ## 1.7.0 (2024-05-02)
 
 ## 1.6.0 (2024-04-19)
diff --git a/packages/interactivity-router/package.json b/packages/interactivity-router/package.json
index 48e65e42abf26..a2ed315c7d185 100644
--- a/packages/interactivity-router/package.json
+++ b/packages/interactivity-router/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interactivity-router",
-	"version": "1.7.0",
+	"version": "2.0.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",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20Interactivity%20API"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/interactivity-router/src/head.js b/packages/interactivity-router/src/head.ts
similarity index 71%
rename from packages/interactivity-router/src/head.js
rename to packages/interactivity-router/src/head.ts
index 6106ad173d49f..2bde7cea52040 100644
--- a/packages/interactivity-router/src/head.js
+++ b/packages/interactivity-router/src/head.ts
@@ -2,20 +2,19 @@
  * Helper to update only the necessary tags in the head.
  *
  * @async
- * @param {Array} newHead The head elements of the new page.
- *
+ * @param newHead The head elements of the new page.
  */
-export const updateHead = async ( newHead ) => {
+export const updateHead = async ( newHead: HTMLHeadElement[] ) => {
 	// Helper to get the tag id store in the cache.
-	const getTagId = ( tag ) => tag.id || tag.outerHTML;
+	const getTagId = ( tag: Element ) => tag.id || tag.outerHTML;
 
 	// Map incoming head tags by their content.
-	const newHeadMap = new Map();
+	const newHeadMap = new Map< string, Element >();
 	for ( const child of newHead ) {
 		newHeadMap.set( getTagId( child ), child );
 	}
 
-	const toRemove = [];
+	const toRemove: Element[] = [];
 
 	// Detect nodes that should be added or removed.
 	for ( const child of document.head.children ) {
@@ -42,12 +41,17 @@ export const updateHead = async ( newHead ) => {
  * Fetches and processes head assets (stylesheets and scripts) from a specified document.
  *
  * @async
- * @param {Document} doc          The document from which to fetch head assets. It should support standard DOM querying methods.
- * @param {Map}      headElements A map of head elements to modify tracking the URLs of already processed assets to avoid duplicates.
+ * @param doc               The document from which to fetch head assets. It should support standard DOM querying methods.
+ * @param headElements      A map of head elements to modify tracking the URLs of already processed assets to avoid duplicates.
+ * @param headElements.tag
+ * @param headElements.text
  *
- * @return {Promise<HTMLElement[]>} Returns an array of HTML elements representing the head assets.
+ * @return Returns an array of HTML elements representing the head assets.
  */
-export const fetchHeadAssets = async ( doc, headElements ) => {
+export const fetchHeadAssets = async (
+	doc: Document,
+	headElements: Map< string, { tag: HTMLElement; text: string } >
+): Promise< HTMLElement[] > => {
 	const headTags = [];
 	const assets = [
 		{
@@ -59,7 +63,9 @@ export const fetchHeadAssets = async ( doc, headElements ) => {
 	];
 	for ( const asset of assets ) {
 		const { tagName, selector, attribute } = asset;
-		const tags = doc.querySelectorAll( selector );
+		const tags = doc.querySelectorAll<
+			HTMLScriptElement | HTMLStyleElement
+		>( selector );
 
 		// Use Promise.all to wait for fetch to complete
 		await Promise.all(
diff --git a/packages/interactivity-router/src/index.js b/packages/interactivity-router/src/index.ts
similarity index 72%
rename from packages/interactivity-router/src/index.js
rename to packages/interactivity-router/src/index.ts
index 7e786700338f5..79b67eeb98e65 100644
--- a/packages/interactivity-router/src/index.js
+++ b/packages/interactivity-router/src/index.ts
@@ -21,23 +21,50 @@ const {
 	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
 );
 
+interface NavigateOptions {
+	force?: boolean;
+	html?: string;
+	replace?: boolean;
+	timeout?: number;
+	loadingAnimation?: boolean;
+	screenReaderAnnouncement?: boolean;
+}
+
+interface PrefetchOptions {
+	force?: boolean;
+	html?: string;
+}
+
+interface VdomParams {
+	vdom?: typeof initialVdom;
+}
+
+interface Page {
+	regions: Record< string, any >;
+	head: HTMLHeadElement[];
+	title: string;
+	initialData: any;
+}
+
+type RegionsToVdom = ( dom: Document, params?: VdomParams ) => Promise< Page >;
+
 // Check if the navigation mode is full page or region based.
-const navigationMode =
+const navigationMode: 'regionBased' | 'fullPage' =
 	getConfig( 'core/router' ).navigationMode ?? 'regionBased';
 
 // The cache of visited and prefetched pages, stylesheets and scripts.
-const pages = new Map();
-const headElements = new Map();
+const pages = new Map< string, Promise< Page | false > >();
+const headElements = new Map< string, { tag: HTMLElement; text: string } >();
 
 // Helper to remove domain and hash from the URL. We are only interesting in
 // caching the path and the query.
-const getPagePath = ( url ) => {
-	const u = new URL( url, window.location );
+const getPagePath = ( url: string ) => {
+	const u = new URL( url, window.location.href );
 	return u.pathname + u.search;
 };
 
 // Fetch a new page and convert it to a static virtual DOM.
-const fetchPage = async ( url, { html } ) => {
+const fetchPage = async ( url: string, { html }: { html: string } ) => {
 	try {
 		if ( ! html ) {
 			const res = await window.fetch( url );
@@ -55,10 +82,10 @@ const fetchPage = async ( url, { html } ) => {
 
 // Return an object with VDOM trees of those HTML regions marked with a
 // `router-region` directive.
-const regionsToVdom = async ( dom, { vdom } = {} ) => {
-	const regions = {};
-	let head;
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+const regionsToVdom: RegionsToVdom = async ( dom, { vdom } = {} ) => {
+	const regions = { body: undefined };
+	let head: HTMLElement[];
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 		if ( navigationMode === 'fullPage' ) {
 			head = await fetchHeadAssets( dom, headElements );
 			regions.body = vdom
@@ -81,9 +108,9 @@ const regionsToVdom = async ( dom, { vdom } = {} ) => {
 };
 
 // Render all interactive regions contained in the given page.
-const renderRegions = ( page ) => {
+const renderRegions = ( page: Page ) => {
 	batch( () => {
-		if ( process.env.IS_GUTENBERG_PLUGIN ) {
+		if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 			if ( navigationMode === 'fullPage' ) {
 				// Once this code is tested and more mature, the head should be updated for region based navigation as well.
 				updateHead( page.head );
@@ -115,10 +142,10 @@ const renderRegions = ( page ) => {
  * potential feedback indicating that the navigation has finished while the new
  * page is being loaded.
  *
- * @param {string} href The page href.
- * @return {Promise} Promise that never resolves.
+ * @param href The page href.
+ * @return Promise that never resolves.
  */
-const forcePageReload = ( href ) => {
+const forcePageReload = ( href: string ) => {
 	window.location.assign( href );
 	return new Promise( () => {} );
 };
@@ -126,7 +153,7 @@ const forcePageReload = ( href ) => {
 // Listen to the back and forward buttons and restore the page if it's in the
 // cache.
 window.addEventListener( 'popstate', async () => {
-	const pagePath = getPagePath( window.location ); // Remove hash.
+	const pagePath = getPagePath( window.location.href ); // Remove hash.
 	const page = pages.has( pagePath ) && ( await pages.get( pagePath ) );
 	if ( page ) {
 		renderRegions( page );
@@ -138,8 +165,9 @@ window.addEventListener( 'popstate', async () => {
 } );
 
 // Initialize the router and cache the initial page using the initial vDOM.
-// Once this code is tested and more mature, the head should be updated for region based navigation as well.
-if ( process.env.IS_GUTENBERG_PLUGIN ) {
+// Once this code is tested and more mature, the head should be updated for
+// region based navigation as well.
+if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 	if ( navigationMode === 'fullPage' ) {
 		// Cache the scripts. Has to be called before fetching the assets.
 		[].map.call( document.querySelectorAll( 'script[src]' ), ( script ) => {
@@ -152,12 +180,12 @@ if ( process.env.IS_GUTENBERG_PLUGIN ) {
 	}
 }
 pages.set(
-	getPagePath( window.location ),
+	getPagePath( window.location.href ),
 	Promise.resolve( regionsToVdom( document, { vdom: initialVdom } ) )
 );
 
 // Check if the link is valid for client-side navigation.
-const isValidLink = ( ref ) =>
+const isValidLink = ( ref: HTMLAnchorElement ) =>
 	ref &&
 	ref instanceof window.HTMLAnchorElement &&
 	ref.href &&
@@ -169,7 +197,7 @@ const isValidLink = ( ref ) =>
 	! new URL( ref.href ).searchParams.has( '_wpnonce' );
 
 // Check if the event is valid for client-side navigation.
-const isValidEvent = ( event ) =>
+const isValidEvent = ( event: MouseEvent ) =>
 	event &&
 	event.button === 0 && // Left clicks only.
 	! event.metaKey && // Open in new tab (Mac).
@@ -187,7 +215,11 @@ export const { state, actions } = store( 'core/router', {
 		navigation: {
 			hasStarted: false,
 			hasFinished: false,
-			texts: {},
+			texts: {
+				loading: '',
+				loaded: '',
+			},
+			message: '',
 		},
 	},
 	actions: {
@@ -198,18 +230,18 @@ export const { state, actions } = store( 'core/router', {
 		 * needed, and updates any interactive regions whose contents have
 		 * changed. It also creates a new entry in the browser session history.
 		 *
-		 * @param {string}  href                               The page href.
-		 * @param {Object}  [options]                          Options object.
-		 * @param {boolean} [options.force]                    If true, it forces re-fetching the URL.
-		 * @param {string}  [options.html]                     HTML string to be used instead of fetching the requested URL.
-		 * @param {boolean} [options.replace]                  If true, it replaces the current entry in the browser session history.
-		 * @param {number}  [options.timeout]                  Time until the navigation is aborted, in milliseconds. Default is 10000.
-		 * @param {boolean} [options.loadingAnimation]         Whether an animation should be shown while navigating. Default to `true`.
-		 * @param {boolean} [options.screenReaderAnnouncement] Whether a message for screen readers should be announced while navigating. Default to `true`.
+		 * @param href                               The page href.
+		 * @param [options]                          Options object.
+		 * @param [options.force]                    If true, it forces re-fetching the URL.
+		 * @param [options.html]                     HTML string to be used instead of fetching the requested URL.
+		 * @param [options.replace]                  If true, it replaces the current entry in the browser session history.
+		 * @param [options.timeout]                  Time until the navigation is aborted, in milliseconds. Default is 10000.
+		 * @param [options.loadingAnimation]         Whether an animation should be shown while navigating. Default to `true`.
+		 * @param [options.screenReaderAnnouncement] Whether a message for screen readers should be announced while navigating. Default to `true`.
 		 *
-		 * @return {Promise} Promise that resolves once the navigation is completed or aborted.
+		 * @return  Promise that resolves once the navigation is completed or aborted.
 		 */
-		*navigate( href, options = {} ) {
+		*navigate( href: string, options: NavigateOptions = {} ) {
 			const { clientNavigationDisabled } = getConfig();
 			if ( clientNavigationDisabled ) {
 				yield forcePageReload( href );
@@ -228,7 +260,7 @@ export const { state, actions } = store( 'core/router', {
 
 			// Create a promise that resolves when the specified timeout ends.
 			// The timeout value is 10 seconds by default.
-			const timeoutPromise = new Promise( ( resolve ) =>
+			const timeoutPromise = new Promise< void >( ( resolve ) =>
 				setTimeout( resolve, timeout )
 			);
 
@@ -294,7 +326,7 @@ export const { state, actions } = store( 'core/router', {
 				}
 
 				// Scroll to the anchor if exits in the link.
-				const { hash } = new URL( href, window.location );
+				const { hash } = new URL( href, window.location.href );
 				if ( hash ) {
 					document.querySelector( hash )?.scrollIntoView();
 				}
@@ -309,12 +341,12 @@ export const { state, actions } = store( 'core/router', {
 		 * The function normalizes the URL and stores internally the fetch
 		 * promise, to avoid triggering a second fetch for an ongoing request.
 		 *
-		 * @param {string}  url             The page URL.
-		 * @param {Object}  [options]       Options object.
-		 * @param {boolean} [options.force] Force fetching the URL again.
-		 * @param {string}  [options.html]  HTML string to be used instead of fetching the requested URL.
+		 * @param url             The page URL.
+		 * @param [options]       Options object.
+		 * @param [options.force] Force fetching the URL again.
+		 * @param [options.html]  HTML string to be used instead of fetching the requested URL.
 		 */
-		prefetch( url, options = {} ) {
+		prefetch( url: string, options: PrefetchOptions = {} ) {
 			const { clientNavigationDisabled } = getConfig();
 			if ( clientNavigationDisabled ) {
 				return;
@@ -322,20 +354,23 @@ export const { state, actions } = store( 'core/router', {
 
 			const pagePath = getPagePath( url );
 			if ( options.force || ! pages.has( pagePath ) ) {
-				pages.set( pagePath, fetchPage( pagePath, options ) );
+				pages.set(
+					pagePath,
+					fetchPage( pagePath, { html: options.html } )
+				);
 			}
 		},
 	},
 } );
 
 // Add click and prefetch to all links.
-if ( process.env.IS_GUTENBERG_PLUGIN ) {
+if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 	if ( navigationMode === 'fullPage' ) {
 		// Navigate on click.
 		document.addEventListener(
 			'click',
 			function ( event ) {
-				const ref = event.target.closest( 'a' );
+				const ref = ( event.target as Element ).closest( 'a' );
 				if ( isValidLink( ref ) && isValidEvent( event ) ) {
 					event.preventDefault();
 					actions.navigate( ref.href );
@@ -347,8 +382,8 @@ if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		document.addEventListener(
 			'mouseenter',
 			function ( event ) {
-				if ( event.target?.nodeName === 'A' ) {
-					const ref = event.target.closest( 'a' );
+				if ( ( event.target as Element )?.nodeName === 'A' ) {
+					const ref = ( event.target as Element ).closest( 'a' );
 					if ( isValidLink( ref ) && isValidEvent( event ) ) {
 						actions.prefetch( ref.href );
 					}
diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
index 72b38ed4a4ea4..6154841c1db2c 100644
--- a/packages/interactivity/CHANGELOG.md
+++ b/packages/interactivity/CHANGELOG.md
@@ -2,13 +2,40 @@
 
 ## Unreleased
 
+## 6.0.0 (2024-05-31)
+
+### New Features
+
+-   Introduce `wp-on-async` directive as performant alternative over synchronous `wp-on` directive. ([#61885](https://github.com/WordPress/gutenberg/pull/61885))
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+### Bug fixes
+
+-	Fix null and number strings as namespaces runtime error. ([#61960](https://github.com/WordPress/gutenberg/pull/61960/))
+
+## 5.7.0 (2024-05-16)
+
+### Enhancements
+
+-   Strict type checking: fix some missing nulls in published types ([#59865](https://github.com/WordPress/gutenberg/pull/59865/)).
+
+### Bug Fixes
+
+-   Allow multiple event handlers for the same type with `data-wp-on-document` and `data-wp-on-window`. ([#61009](https://github.com/WordPress/gutenberg/pull/61009))
+-   Prevent wrong written directives from killing the runtime ([#61249](https://github.com/WordPress/gutenberg/pull/61249))
+-   Prevent empty namespace or different namespaces from killing the runtime ([#61409](https://github.com/WordPress/gutenberg/pull/61409))
+
 ## 5.6.0 (2024-05-02)
 
 ## 5.5.0 (2024-04-19)
 
 ### Enhancements
 
--	Improve data-wp-context debugging by validating it as a stringified JSON Object. ([#61045](https://github.com/WordPress/gutenberg/pull/61045))
+-   Improve data-wp-context debugging by validating it as a stringified JSON Object. ([#61045](https://github.com/WordPress/gutenberg/pull/61045))
 
 ### Bug Fixes
 
diff --git a/packages/interactivity/package.json b/packages/interactivity/package.json
index c9a3f4dee8d83..0b18d2ced2919 100644
--- a/packages/interactivity/package.json
+++ b/packages/interactivity/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interactivity",
-	"version": "5.6.0",
+	"version": "6.0.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",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20Interactivity%20API"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/interactivity/src/constants.js b/packages/interactivity/src/constants.js
deleted file mode 100644
index 669e94263fb9c..0000000000000
--- a/packages/interactivity/src/constants.js
+++ /dev/null
@@ -1 +0,0 @@
-export const directivePrefix = 'wp';
diff --git a/packages/interactivity/src/constants.ts b/packages/interactivity/src/constants.ts
new file mode 100644
index 0000000000000..f461b91baff89
--- /dev/null
+++ b/packages/interactivity/src/constants.ts
@@ -0,0 +1 @@
+export const directivePrefix: string = 'wp';
diff --git a/packages/interactivity/src/directives.js b/packages/interactivity/src/directives.tsx
similarity index 72%
rename from packages/interactivity/src/directives.js
rename to packages/interactivity/src/directives.tsx
index 7afcbbbd60e22..a4a320eda57f0 100644
--- a/packages/interactivity/src/directives.js
+++ b/packages/interactivity/src/directives.tsx
@@ -1,20 +1,27 @@
-/* @jsx createElement */
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable react-hooks/exhaustive-deps */
 
 /**
  * External dependencies
  */
-import { h as createElement } from 'preact';
+import { h as createElement, type RefObject } from 'preact';
 import { useContext, useMemo, useRef } from 'preact/hooks';
-import { deepSignal, peek } from 'deepsignal';
+import { deepSignal, peek, type DeepSignal } from 'deepsignal';
 
 /**
  * Internal dependencies
  */
-import { useWatch, useInit } from './utils';
+import {
+	useWatch,
+	useInit,
+	kebabToCamelCase,
+	warn,
+	yieldToMain,
+} from './utils';
+import type { DirectiveEntry } from './hooks';
 import { directive, getScope, getEvaluate } from './hooks';
-import { kebabToCamelCase } from './utils/kebab-to-camelcase';
 
-// Assigned objects should be ignore during proxification.
+// Assigned objects should be ignored during proxification.
 const contextAssignedObjects = new WeakMap();
 
 // Store the context proxy and fallback for each object in the context.
@@ -22,8 +29,8 @@ const contextObjectToProxy = new WeakMap();
 const contextProxyToObject = new WeakMap();
 const contextObjectToFallback = new WeakMap();
 
-const isPlainObject = ( item ) =>
-	item && typeof item === 'object' && item.constructor === Object;
+const isPlainObject = ( item: unknown ): boolean =>
+	Boolean( item && typeof item === 'object' && item.constructor === Object );
 
 const descriptor = Reflect.getOwnPropertyDescriptor;
 
@@ -36,17 +43,17 @@ const descriptor = Reflect.getOwnPropertyDescriptor;
  * By default, all plain objects inside the context are wrapped, unless it is
  * listed in the `ignore` option.
  *
- * @param {Object} current   Current context.
- * @param {Object} inherited Inherited context, used as fallback.
+ * @param current   Current context.
+ * @param inherited Inherited context, used as fallback.
  *
- * @return {Object} The wrapped context object.
+ * @return The wrapped context object.
  */
-const proxifyContext = ( current, inherited = {} ) => {
+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, k ) => {
+			get: ( target: DeepSignal< any >, k ) => {
 				const fallback = contextObjectToFallback.get( current );
 				// Always subscribe to prop changes in the current context.
 				const currentProp = target[ k ];
@@ -126,10 +133,13 @@ const proxifyContext = ( current, inherited = {} ) => {
 /**
  * Recursively update values within a deepSignal object.
  *
- * @param {Object} target A deepSignal instance.
- * @param {Object} source Object with properties to update in `target`
+ * @param target A deepSignal instance.
+ * @param source Object with properties to update in `target`.
  */
-const updateSignals = ( target, source ) => {
+const updateSignals = (
+	target: DeepSignal< any >,
+	source: DeepSignal< any >
+) => {
 	for ( const k in source ) {
 		if (
 			isPlainObject( peek( target, k ) ) &&
@@ -145,23 +155,23 @@ const updateSignals = ( target, source ) => {
 /**
  * Recursively clone the passed object.
  *
- * @param {Object} source Source object.
- * @return {Object} Cloned object.
+ * @param source Source object.
+ * @return Cloned object.
  */
-const deepClone = ( source ) => {
+function deepClone< T >( source: T ): T {
 	if ( isPlainObject( source ) ) {
 		return Object.fromEntries(
-			Object.entries( source ).map( ( [ key, value ] ) => [
+			Object.entries( source as object ).map( ( [ key, value ] ) => [
 				key,
 				deepClone( value ),
 			] )
-		);
+		) as T;
 	}
 	if ( Array.isArray( source ) ) {
-		return source.map( ( i ) => deepClone( i ) );
+		return source.map( ( i ) => deepClone( i ) ) as T;
 	}
 	return source;
-};
+}
 
 const newRule =
 	/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g;
@@ -175,10 +185,12 @@ const empty = ' ';
  * Made by Cristian Bote (@cristianbote) for Goober.
  * https://unpkg.com/browse/goober@2.1.13/src/core/astish.js
  *
- * @param {string} val CSS string.
- * @return {Object} CSS object.
+ * @param val CSS string.
+ * @return CSS object.
  */
-const cssStringToObject = ( val ) => {
+const cssStringToObject = (
+	val: string
+): Record< string, string | number > => {
 	const tree = [ {} ];
 	let block, left;
 
@@ -202,29 +214,56 @@ const cssStringToObject = ( val ) => {
  * Creates a directive that adds an event listener to the global window or
  * document object.
  *
- * @param {string} type 'window' or 'document'
- * @return {void}
+ * @param type 'window' or 'document'
  */
-const getGlobalEventDirective =
-	( type ) =>
-	( { directives, evaluate } ) => {
+const getGlobalEventDirective = ( type: 'window' | 'document' ) => {
+	return ( { directives, evaluate } ) => {
 		directives[ `on-${ type }` ]
 			.filter( ( { suffix } ) => suffix !== 'default' )
-			.forEach( ( entry ) => {
+			.forEach( ( entry: DirectiveEntry ) => {
+				const eventName = entry.suffix.split( '--', 1 )[ 0 ];
 				useInit( () => {
-					const cb = ( event ) => evaluate( entry, event );
+					const cb = ( event: Event ) => evaluate( entry, event );
 					const globalVar = type === 'window' ? window : document;
-					globalVar.addEventListener( entry.suffix, cb );
-					return () =>
-						globalVar.removeEventListener( entry.suffix, cb );
-				}, [] );
+					globalVar.addEventListener( eventName, cb );
+					return () => globalVar.removeEventListener( eventName, cb );
+				} );
 			} );
 	};
+};
+
+/**
+ * Creates a directive that adds an async event listener to the global window or
+ * document object.
+ *
+ * @param type 'window' or 'document'
+ */
+const getGlobalAsyncEventDirective = ( type: 'window' | 'document' ) => {
+	return ( { directives, evaluate } ) => {
+		directives[ `on-async-${ type }` ]
+			.filter( ( { suffix } ) => suffix !== 'default' )
+			.forEach( ( entry: DirectiveEntry ) => {
+				const eventName = entry.suffix.split( '--', 1 )[ 0 ];
+				useInit( () => {
+					const cb = async ( event: Event ) => {
+						await yieldToMain();
+						evaluate( entry, event );
+					};
+					const globalVar = type === 'window' ? window : document;
+					globalVar.addEventListener( eventName, cb, {
+						passive: true,
+					} );
+					return () => globalVar.removeEventListener( eventName, cb );
+				} );
+			} );
+	};
+};
 
 export default () => {
 	// data-wp-context
 	directive(
 		'context',
+		// @ts-ignore-next-line
 		( {
 			directives: { context },
 			props: { children },
@@ -242,13 +281,8 @@ export default () => {
 				if ( defaultEntry ) {
 					const { namespace, value } = defaultEntry;
 					// Check that the value is a JSON object. Send a console warning if not.
-					if (
-						typeof SCRIPT_DEBUG !== 'undefined' &&
-						SCRIPT_DEBUG === true &&
-						! isPlainObject( value )
-					) {
-						// eslint-disable-next-line no-console
-						console.warn(
+					if ( ! isPlainObject( value ) ) {
+						warn(
 							`The value of data-wp-context in "${ namespace }" store must be a valid stringified JSON object.`
 						);
 					}
@@ -259,7 +293,7 @@ export default () => {
 				return proxifyContext( currentValue.current, inheritedValue );
 			}, [ defaultEntry, inheritedValue ] );
 
-			return <Provider value={ contextStack }>{ children }</Provider>;
+			return createElement( Provider, { value: contextStack }, children );
 		},
 		{ priority: 5 }
 	);
@@ -281,31 +315,73 @@ export default () => {
 
 	// data-wp-on--[event]
 	directive( 'on', ( { directives: { on }, element, evaluate } ) => {
-		const events = new Map();
+		const events = new Map< string, Set< DirectiveEntry > >();
 		on.filter( ( { suffix } ) => suffix !== 'default' ).forEach(
 			( entry ) => {
 				const event = entry.suffix.split( '--' )[ 0 ];
 				if ( ! events.has( event ) ) {
-					events.set( event, new Set() );
+					events.set( event, new Set< DirectiveEntry >() );
 				}
-				events.get( event ).add( entry );
+				events.get( event )!.add( entry );
 			}
 		);
 
 		events.forEach( ( entries, eventType ) => {
-			element.props[ `on${ eventType }` ] = ( event ) => {
+			const existingHandler = element.props[ `on${ eventType }` ];
+			element.props[ `on${ eventType }` ] = ( event: Event ) => {
 				entries.forEach( ( entry ) => {
+					if ( existingHandler ) {
+						existingHandler( event );
+					}
 					evaluate( entry, event );
 				} );
 			};
 		} );
 	} );
 
+	// data-wp-on-async--[event]
+	directive(
+		'on-async',
+		( { directives: { 'on-async': onAsync }, element, evaluate } ) => {
+			const events = new Map< string, Set< DirectiveEntry > >();
+			onAsync
+				.filter( ( { suffix } ) => suffix !== 'default' )
+				.forEach( ( entry ) => {
+					const event = entry.suffix.split( '--' )[ 0 ];
+					if ( ! events.has( event ) ) {
+						events.set( event, new Set< DirectiveEntry >() );
+					}
+					events.get( event )!.add( entry );
+				} );
+
+			events.forEach( ( entries, eventType ) => {
+				const existingHandler = element.props[ `on${ eventType }` ];
+				element.props[ `on${ eventType }` ] = ( event: Event ) => {
+					if ( existingHandler ) {
+						existingHandler( event );
+					}
+					entries.forEach( async ( entry ) => {
+						await yieldToMain();
+						evaluate( entry, event );
+					} );
+				};
+			} );
+		}
+	);
+
 	// data-wp-on-window--[event]
 	directive( 'on-window', getGlobalEventDirective( 'window' ) );
 	// data-wp-on-document--[event]
 	directive( 'on-document', getGlobalEventDirective( 'document' ) );
 
+	// data-wp-on-async-window--[event]
+	directive( 'on-async-window', getGlobalAsyncEventDirective( 'window' ) );
+	// data-wp-on-async-document--[event]
+	directive(
+		'on-async-document',
+		getGlobalAsyncEventDirective( 'document' )
+	);
+
 	// data-wp-class--[classname]
 	directive(
 		'class',
@@ -337,9 +413,13 @@ export default () => {
 						 * need deps because it only needs to do it the first time.
 						 */
 						if ( ! result ) {
-							element.ref.current.classList.remove( className );
+							(
+								element.ref as RefObject< HTMLElement >
+							 ).current!.classList.remove( className );
 						} else {
-							element.ref.current.classList.add( className );
+							(
+								element.ref as RefObject< HTMLElement >
+							 ).current!.classList.add( className );
 						}
 					} );
 				} );
@@ -372,9 +452,13 @@ export default () => {
 					 * because it only needs to do it the first time.
 					 */
 					if ( ! result ) {
-						element.ref.current.style.removeProperty( styleProp );
+						(
+							element.ref as RefObject< HTMLElement >
+						 ).current!.style.removeProperty( styleProp );
 					} else {
-						element.ref.current.style[ styleProp ] = result;
+						(
+							element.ref as RefObject< HTMLElement >
+						 ).current!.style[ styleProp ] = result;
 					}
 				} );
 			} );
@@ -394,7 +478,8 @@ export default () => {
 				 * first time. After that, Preact will handle the changes.
 				 */
 				useInit( () => {
-					const el = element.ref.current;
+					const el = ( element.ref as RefObject< HTMLElement > )
+						.current!;
 
 					/*
 					 * We set the value directly to the corresponding HTMLElement instance
@@ -466,21 +551,26 @@ export default () => {
 				type: Type,
 				props: { innerHTML, ...rest },
 			},
+		}: {
+			element: any;
 		} ) => {
 			// Preserve the initial inner HTML.
 			const cached = useMemo( () => innerHTML, [] );
-			return (
-				<Type
-					dangerouslySetInnerHTML={ { __html: cached } }
-					{ ...rest }
-				/>
-			);
+			return createElement( Type, {
+				dangerouslySetInnerHTML: { __html: cached },
+				...rest,
+			} );
 		}
 	);
 
 	// data-wp-text
 	directive( 'text', ( { directives: { text }, element, evaluate } ) => {
 		const entry = text.find( ( { suffix } ) => suffix === 'default' );
+		if ( ! entry ) {
+			element.props.children = null;
+			return;
+		}
+
 		try {
 			const result = evaluate( entry );
 			element.props.children =
@@ -532,10 +622,10 @@ export default () => {
 					? getEvaluate( { scope } )( eachKey[ 0 ] )
 					: item;
 
-				return (
-					<Provider value={ mergedContext } key={ key }>
-						{ element.props.content }
-					</Provider>
+				return createElement(
+					Provider,
+					{ value: mergedContext, key },
+					element.props.content
 				);
 			} );
 		},
diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx
index f223ddceb9a41..d8aa43d2c0e5a 100644
--- a/packages/interactivity/src/hooks.tsx
+++ b/packages/interactivity/src/hooks.tsx
@@ -1,4 +1,5 @@
-/* @jsx createElement */
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable react-hooks/exhaustive-deps */
 
 /**
  * External dependencies
@@ -8,6 +9,7 @@ import {
 	options,
 	createContext,
 	cloneElement,
+	type ComponentChildren,
 } from 'preact';
 import { useRef, useCallback, useContext } from 'preact/hooks';
 import type { VNode, Context, RefObject } from 'preact';
@@ -16,8 +18,9 @@ import type { VNode, Context, RefObject } from 'preact';
  * Internal dependencies
  */
 import { store, stores, universalUnlock } from './store';
-interface DirectiveEntry {
-	value: string | Object;
+import { warn } from './utils';
+export interface DirectiveEntry {
+	value: string | object;
 	namespace: string;
 	suffix: string;
 }
@@ -32,11 +35,15 @@ interface DirectiveArgs {
 	/**
 	 * Props present in the current element.
 	 */
-	props: Object;
+	props: { children?: ComponentChildren };
 	/**
 	 * Virtual node representing the element.
 	 */
-	element: VNode;
+	element: VNode< {
+		class?: string;
+		style?: string | Record< string, string | number >;
+		content?: ComponentChildren;
+	} >;
 	/**
 	 * The inherited context.
 	 */
@@ -49,7 +56,7 @@ interface DirectiveArgs {
 }
 
 interface DirectiveCallback {
-	( args: DirectiveArgs ): VNode | void;
+	( args: DirectiveArgs ): VNode | null | void;
 }
 
 interface DirectiveOptions {
@@ -64,7 +71,7 @@ interface DirectiveOptions {
 
 interface Scope {
 	evaluate: Evaluate;
-	context: Context< any >;
+	context: object;
 	ref: RefObject< HTMLElement >;
 	attributes: createElement.JSX.HTMLAttributes;
 }
@@ -101,7 +108,7 @@ const immutableError = () => {
 		'Please use `data-wp-bind` to modify the attributes of an element.'
 	);
 };
-const immutableHandlers = {
+const immutableHandlers: ProxyHandler< object > = {
 	get( target, key, receiver ) {
 		const value = Reflect.get( target, key, receiver );
 		return !! value && typeof value === 'object'
@@ -111,7 +118,7 @@ const immutableHandlers = {
 	set: immutableError,
 	deleteProperty: immutableError,
 };
-const deepImmutable = < T extends Object = {} >( target: T ): T => {
+const deepImmutable = < T extends object = {} >( target: T ): T => {
 	if ( ! immutableMap.has( target ) ) {
 		immutableMap.set( target, new Proxy( target, immutableHandlers ) );
 	}
@@ -259,19 +266,27 @@ export const directive = (
 };
 
 // Resolve the path to some property of the store object.
-const resolve = ( path, namespace ) => {
+const resolve = ( path: string, namespace: string ) => {
+	if ( ! namespace ) {
+		warn(
+			`Namespace missing for "${ path }". The value for that path won't be resolved.`
+		);
+		return;
+	}
 	let resolvedStore = stores.get( namespace );
 	if ( typeof resolvedStore === 'undefined' ) {
 		resolvedStore = store( namespace, undefined, {
 			lock: universalUnlock,
 		} );
 	}
-	let current = {
+	const current = {
 		...resolvedStore,
 		context: getScope().context[ namespace ],
 	};
-	path.split( '.' ).forEach( ( p ) => ( current = current[ p ] ) );
-	return current;
+	try {
+		// TODO: Support lazy/dynamically initialized stores
+		return path.split( '.' ).reduce( ( acc, key ) => acc[ key ], current );
+	} catch ( e ) {}
 };
 
 // Generate the evaluate function.
@@ -335,17 +350,15 @@ const Directives = ( {
 
 	// Recursively render the wrapper for the next priority level.
 	const children =
-		nextPriorityLevels.length > 0 ? (
-			<Directives
-				directives={ directives }
-				priorityLevels={ nextPriorityLevels }
-				element={ element }
-				originalProps={ originalProps }
-				previousScope={ scope }
-			/>
-		) : (
-			element
-		);
+		nextPriorityLevels.length > 0
+			? createElement( Directives, {
+					directives,
+					priorityLevels: nextPriorityLevels,
+					element,
+					originalProps,
+					previousScope: scope,
+			  } )
+			: element;
 
 	const props = { ...originalProps, children };
 	const directiveArgs = {
diff --git a/packages/interactivity/src/init.js b/packages/interactivity/src/init.ts
similarity index 71%
rename from packages/interactivity/src/init.js
rename to packages/interactivity/src/init.ts
index fb510a9c00fce..b3376a7510c13 100644
--- a/packages/interactivity/src/init.js
+++ b/packages/interactivity/src/init.ts
@@ -1,17 +1,20 @@
 /**
  * External dependencies
  */
-import { hydrate } from 'preact';
+import { hydrate, type ContainerNode, type ComponentChild } from 'preact';
 /**
  * Internal dependencies
  */
 import { toVdom, hydratedIslands } from './vdom';
-import { createRootFragment } from './utils';
+import { createRootFragment, yieldToMain } from './utils';
 import { directivePrefix } from './constants';
 
 // Keep the same root fragment for each interactive region node.
 const regionRootFragments = new WeakMap();
-export const getRegionRootFragment = ( region ) => {
+export const getRegionRootFragment = ( region: Element ): ContainerNode => {
+	if ( ! region.parentElement ) {
+		throw Error( 'The passed region should be an element with a parent.' );
+	}
 	if ( ! regionRootFragments.has( region ) ) {
 		regionRootFragments.set(
 			region,
@@ -21,15 +24,8 @@ export const getRegionRootFragment = ( region ) => {
 	return regionRootFragments.get( region );
 };
 
-function yieldToMain() {
-	return new Promise( ( resolve ) => {
-		// TODO: Use scheduler.yield() when available.
-		setTimeout( resolve, 0 );
-	} );
-}
-
 // Initial vDOM regions associated with its DOM element.
-export const initialVdom = new WeakMap();
+export const initialVdom = new WeakMap< Element, ComponentChild[] >();
 
 // Initialize the router with the initial DOM.
 export const init = async () => {
diff --git a/packages/interactivity/src/store.ts b/packages/interactivity/src/store.ts
index 81905071702af..281a6c266021e 100644
--- a/packages/interactivity/src/store.ts
+++ b/packages/interactivity/src/store.ts
@@ -15,9 +15,8 @@ import {
 	setNamespace,
 	resetNamespace,
 } from './hooks';
-
 const isObject = ( item: unknown ): item is Record< string, unknown > =>
-	item && typeof item === 'object' && item.constructor === Object;
+	Boolean( item && typeof item === 'object' && item.constructor === Object );
 
 const deepMerge = ( target: any, source: any ) => {
 	if ( isObject( target ) && isObject( source ) ) {
@@ -177,7 +176,7 @@ const handlers = {
  * @param namespace Store's namespace from which to retrieve the config.
  * @return Defined config for the given namespace.
  */
-export const getConfig = ( namespace: string ) =>
+export const getConfig = ( namespace?: string ) =>
 	storeConfigs.get( namespace || getNamespace() ) || {};
 
 interface StoreOptions {
@@ -320,15 +319,17 @@ export function store(
 }
 
 export const parseInitialData = ( dom = document ) => {
-	const storeTag = dom.querySelector(
-		`script[type="application/json"]#wp-interactivity-data`
-	);
-	if ( storeTag?.textContent ) {
+	const jsonDataScriptTag =
+		// Preferred Script Module data passing form
+		dom.getElementById(
+			'wp-script-module-data-@wordpress/interactivity'
+		) ??
+		// Legacy form
+		dom.getElementById( 'wp-interactivity-data' );
+	if ( jsonDataScriptTag?.textContent ) {
 		try {
-			return JSON.parse( storeTag.textContent );
-		} catch ( e ) {
-			// Do nothing.
-		}
+			return JSON.parse( jsonDataScriptTag.textContent );
+		} catch {}
 	}
 	return {};
 };
@@ -338,12 +339,12 @@ export const populateInitialData = ( data?: {
 	config?: Record< string, unknown >;
 } ) => {
 	if ( isObject( data?.state ) ) {
-		Object.entries( data.state ).forEach( ( [ namespace, state ] ) => {
+		Object.entries( data!.state ).forEach( ( [ namespace, state ] ) => {
 			store( namespace, { state }, { lock: universalUnlock } );
 		} );
 	}
 	if ( isObject( data?.config ) ) {
-		Object.entries( data.config ).forEach( ( [ namespace, config ] ) => {
+		Object.entries( data!.config ).forEach( ( [ namespace, config ] ) => {
 			storeConfigs.set( namespace, config );
 		} );
 	}
diff --git a/packages/interactivity/src/utils/test/utils.js b/packages/interactivity/src/test/utils.ts
similarity index 94%
rename from packages/interactivity/src/utils/test/utils.js
rename to packages/interactivity/src/test/utils.ts
index 2416b03e342ee..ff564fa7c4c25 100644
--- a/packages/interactivity/src/utils/test/utils.js
+++ b/packages/interactivity/src/test/utils.ts
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { kebabToCamelCase } from '../kebab-to-camelcase';
+import { kebabToCamelCase } from '../utils';
 
 describe( 'kebabToCamelCase', () => {
 	it( 'should work exactly as the PHP version', async () => {
diff --git a/packages/interactivity/src/utils.ts b/packages/interactivity/src/utils.ts
index 4759a7b27a74a..b4975228e3069 100644
--- a/packages/interactivity/src/utils.ts
+++ b/packages/interactivity/src/utils.ts
@@ -49,6 +49,18 @@ const afterNextFrame = ( callback: () => void ) => {
 	} );
 };
 
+/**
+ * Returns a promise that resolves after yielding to main.
+ *
+ * @return Promise
+ */
+export const yieldToMain = () => {
+	return new Promise( ( resolve ) => {
+		// TODO: Use scheduler.yield() when available.
+		setTimeout( resolve, 0 );
+	} );
+};
+
 /**
  * Creates a Flusher object that can be used to flush computed values and notify listeners.
  *
@@ -62,8 +74,8 @@ const afterNextFrame = ( callback: () => void ) => {
  * @return The Flusher object with `flush` and `dispose` properties.
  */
 function createFlusher( compute: () => unknown, notify: () => void ): Flusher {
-	let flush: () => void;
-	const dispose = effect( function () {
+	let flush: () => void = () => undefined;
+	const dispose = effect( function ( this: any ) {
 		flush = this.c.bind( this );
 		this.x = compute;
 		this.c = notify;
@@ -82,7 +94,7 @@ function createFlusher( compute: () => unknown, notify: () => void ): Flusher {
  */
 export function useSignalEffect( callback: () => unknown ) {
 	_useEffect( () => {
-		let eff = null;
+		let eff: Flusher | null = null;
 		let isExecuting = false;
 
 		const notify = async () => {
@@ -273,7 +285,7 @@ export const createRootFragment = (
 	parent: Element,
 	replaceNode: Node | Node[]
 ) => {
-	replaceNode = [].concat( replaceNode );
+	replaceNode = ( [] as Node[] ).concat( replaceNode );
 	const sibling = replaceNode[ replaceNode.length - 1 ].nextSibling;
 	function insert( child: any, root: any ) {
 		parent.insertBefore( child, root || sibling );
@@ -290,3 +302,47 @@ export const createRootFragment = (
 		},
 	} );
 };
+
+/**
+ * Transforms a kebab-case string to camelCase.
+ *
+ * @param str The kebab-case string to transform to camelCase.
+ * @return The transformed camelCase string.
+ */
+export function kebabToCamelCase( str: string ): string {
+	return str
+		.replace( /^-+|-+$/g, '' )
+		.toLowerCase()
+		.replace( /-([a-z])/g, function ( _match, group1: string ) {
+			return group1.toUpperCase();
+		} );
+}
+
+const logged: Set< string > = new Set();
+
+/**
+ * Shows a warning with `message` if environment is not `production`.
+ *
+ * Based on the `@wordpress/warning` package.
+ *
+ * @param message Message to show in the warning.
+ */
+export const warn = ( message: string ): void => {
+	if ( globalThis.SCRIPT_DEBUG ) {
+		if ( logged.has( message ) ) {
+			return;
+		}
+
+		// eslint-disable-next-line no-console
+		console.warn( message );
+
+		// Throwing an error and catching it immediately to improve debugging
+		// A consumer can use 'pause on caught exceptions'
+		try {
+			throw Error( message );
+		} catch ( e ) {
+			// Do nothing.
+		}
+		logged.add( message );
+	}
+};
diff --git a/packages/interactivity/src/utils/kebab-to-camelcase.ts b/packages/interactivity/src/utils/kebab-to-camelcase.ts
deleted file mode 100644
index b6c3c6f307124..0000000000000
--- a/packages/interactivity/src/utils/kebab-to-camelcase.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Transforms a kebab-case string to camelCase.
- *
- * @param str The kebab-case string to transform to camelCase.
- * @return The transformed camelCase string.
- */
-export function kebabToCamelCase( str: string ): string {
-	return str
-		.replace( /^-+|-+$/g, '' )
-		.toLowerCase()
-		.replace( /-([a-z])/g, function ( _match, group1: string ) {
-			return group1.toUpperCase();
-		} );
-}
diff --git a/packages/interactivity/src/vdom.ts b/packages/interactivity/src/vdom.ts
index 05b49012c4886..98deca656cfa6 100644
--- a/packages/interactivity/src/vdom.ts
+++ b/packages/interactivity/src/vdom.ts
@@ -1,17 +1,20 @@
 /**
  * External dependencies
  */
-import { h } from 'preact';
+import { h, type ComponentChild, type JSX } from 'preact';
 /**
  * Internal dependencies
  */
 import { directivePrefix as p } from './constants';
+import { warn } from './utils';
 
 const ignoreAttr = `data-${ p }-ignore`;
 const islandAttr = `data-${ p }-interactive`;
 const fullPrefix = `data-${ p }-`;
-const namespaces = [];
+const namespaces: Array< string | null > = [];
 const currentNamespace = () => namespaces[ namespaces.length - 1 ] ?? null;
+const isObject = ( item: unknown ): item is Record< string, unknown > =>
+	Boolean( item && typeof item === 'object' && item.constructor === Object );
 
 // Regular expression for directive parsing.
 const directiveParser = new RegExp(
@@ -31,98 +34,122 @@ const directiveParser = new RegExp(
 // the reference, separated by `::`, like `some-namespace::state.somePath`.
 // Namespaces can contain any alphanumeric characters, hyphens, underscores or
 // forward slashes. References don't have any restrictions.
-const nsPathRegExp = /^([\w-_\/]+)::(.+)$/;
+const nsPathRegExp = /^([\w_\/-]+)::(.+)$/;
 
 export const hydratedIslands = new WeakSet();
 
 /**
  * Recursive function that transforms a DOM tree into vDOM.
  *
- * @param {Node} root The root element or node to start traversing on.
- * @return {import('preact').VNode[]} The resulting vDOM tree.
+ * @param root The root element or node to start traversing on.
+ * @return The resulting vDOM tree.
  */
-export function toVdom( root ) {
+export function toVdom( root: Node ): Array< ComponentChild > {
 	const treeWalker = document.createTreeWalker(
 		root,
-		205 // ELEMENT + TEXT + COMMENT + CDATA_SECTION + PROCESSING_INSTRUCTION
+		205 // TEXT + CDATA_SECTION + COMMENT + PROCESSING_INSTRUCTION + ELEMENT
 	);
 
-	function walk( node ) {
-		const { attributes, nodeType, localName } = node;
+	function walk(
+		node: Node
+	): [ ComponentChild ] | [ ComponentChild, Node | null ] {
+		const { nodeType } = node;
 
+		// TEXT_NODE (3)
 		if ( nodeType === 3 ) {
-			return [ node.data ];
+			return [ ( node as Text ).data ];
 		}
+
+		// CDATA_SECTION_NODE (4)
 		if ( nodeType === 4 ) {
 			const next = treeWalker.nextSibling();
-			node.replaceWith( new window.Text( node.nodeValue ) );
+			( node as CDATASection ).replaceWith(
+				new window.Text( ( node as CDATASection ).nodeValue ?? '' )
+			);
 			return [ node.nodeValue, next ];
 		}
+
+		// COMMENT_NODE (8) || PROCESSING_INSTRUCTION_NODE (7)
 		if ( nodeType === 8 || nodeType === 7 ) {
 			const next = treeWalker.nextSibling();
-			node.remove();
+			( node as Comment | ProcessingInstruction ).remove();
 			return [ null, next ];
 		}
 
+		const elementNode = node as HTMLElement;
+		const { attributes } = elementNode;
+		const localName = elementNode.localName as keyof JSX.IntrinsicElements;
+
 		const props: Record< string, any > = {};
-		const children = [];
-		const directives = [];
+		const children: Array< ComponentChild > = [];
+		const directives: Array<
+			[ name: string, namespace: string | null, value: unknown ]
+		> = [];
 		let ignore = false;
 		let island = false;
 
 		for ( let i = 0; i < attributes.length; i++ ) {
-			const n = attributes[ i ].name;
+			const attributeName = attributes[ i ].name;
+			const attributeValue = attributes[ i ].value;
 			if (
-				n[ fullPrefix.length ] &&
-				n.slice( 0, fullPrefix.length ) === fullPrefix
+				attributeName[ fullPrefix.length ] &&
+				attributeName.slice( 0, fullPrefix.length ) === fullPrefix
 			) {
-				if ( n === ignoreAttr ) {
+				if ( attributeName === ignoreAttr ) {
 					ignore = true;
 				} else {
-					let [ ns, value ] = nsPathRegExp
-						.exec( attributes[ i ].value )
-						?.slice( 1 ) ?? [ null, attributes[ i ].value ];
+					const regexResult = nsPathRegExp.exec( attributeValue );
+					const namespace = regexResult?.[ 1 ] ?? null;
+					let value: any = regexResult?.[ 2 ] ?? attributeValue;
 					try {
-						value = JSON.parse( value );
-					} catch ( e ) {}
-					if ( n === islandAttr ) {
+						const parsedValue = JSON.parse( value );
+						value = isObject( parsedValue ) ? parsedValue : value;
+					} catch {}
+					if ( attributeName === islandAttr ) {
 						island = true;
-						namespaces.push(
+						const islandNamespace =
+							// eslint-disable-next-line no-nested-ternary
 							typeof value === 'string'
 								? value
-								: value?.namespace ?? null
-						);
+								: typeof value?.namespace === 'string'
+								? value.namespace
+								: null;
+						namespaces.push( islandNamespace );
 					} else {
-						directives.push( [ n, ns, value ] );
+						directives.push( [ attributeName, namespace, value ] );
 					}
 				}
-			} else if ( n === 'ref' ) {
+			} else if ( attributeName === 'ref' ) {
 				continue;
 			}
-			props[ n ] = attributes[ i ].value;
+			props[ attributeName ] = attributeValue;
 		}
 
 		if ( ignore && ! island ) {
 			return [
-				h( localName, {
+				h< any, any >( localName, {
 					...props,
-					innerHTML: node.innerHTML,
+					innerHTML: elementNode.innerHTML,
 					__directives: { ignore: true },
 				} ),
 			];
 		}
 		if ( island ) {
-			hydratedIslands.add( node );
+			hydratedIslands.add( elementNode );
 		}
 
 		if ( directives.length ) {
 			props.__directives = directives.reduce(
 				( obj, [ name, ns, value ] ) => {
-					const [ , prefix, suffix = 'default' ] =
-						directiveParser.exec( name );
-					if ( ! obj[ prefix ] ) {
-						obj[ prefix ] = [];
+					const directiveMatch = directiveParser.exec( name );
+					if ( directiveMatch === null ) {
+						warn( `Found malformed directive name: ${ name }.` );
+						return obj;
 					}
+					const prefix = directiveMatch[ 1 ] || '';
+					const suffix = directiveMatch[ 2 ] || 'default';
+
+					obj[ prefix ] = obj[ prefix ] || [];
 					obj[ prefix ].push( {
 						namespace: ns ?? currentNamespace(),
 						value,
@@ -134,10 +161,11 @@ export function toVdom( root ) {
 			);
 		}
 
+		// @ts-expect-error Fixed in upcoming preact release https://github.com/preactjs/preact/pull/4334
 		if ( localName === 'template' ) {
-			props.content = [ ...node.content.childNodes ].map( ( childNode ) =>
-				toVdom( childNode )
-			);
+			props.content = [
+				...( elementNode as HTMLTemplateElement ).content.childNodes,
+			].map( ( childNode ) => toVdom( childNode ) );
 		} else {
 			let child = treeWalker.firstChild();
 			if ( child ) {
diff --git a/packages/interactivity/tsconfig.json b/packages/interactivity/tsconfig.json
index 0fb91956773f8..1d154e2089065 100644
--- a/packages/interactivity/tsconfig.json
+++ b/packages/interactivity/tsconfig.json
@@ -4,8 +4,8 @@
 	"compilerOptions": {
 		"rootDir": "src",
 		"declarationDir": "build-types",
-		"checkJs": false,
-		"strict": false
+
+		"noImplicitAny": false
 	},
 	"include": [ "src/**/*" ]
 }
diff --git a/packages/interface/CHANGELOG.md b/packages/interface/CHANGELOG.md
index 84eb7bdfe721f..108bac3e36967 100644
--- a/packages/interface/CHANGELOG.md
+++ b/packages/interface/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 6.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 5.35.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
 ## 5.34.0 (2024-05-02)
 
 ## 5.33.0 (2024-04-19)
@@ -146,8 +158,8 @@
 
 ### Breaking Changes
 
--   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/.
--   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/.
+-   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at <https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/>.
+-   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at <https://nodejs.org/en/about/releases/>.
 
 ## 2.0.0 (2021-04-06)
 
diff --git a/packages/interface/package.json b/packages/interface/package.json
index 97ed4512d70ea..a8ad016a5dc21 100644
--- a/packages/interface/package.json
+++ b/packages/interface/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "5.34.0",
+	"version": "6.0.0",
 	"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -44,7 +45,7 @@
 		"@wordpress/preferences": "file:../preferences",
 		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/viewport": "file:../viewport",
-		"classnames": "^2.3.1"
+		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
diff --git a/packages/interface/src/components/complementary-area-header/index.js b/packages/interface/src/components/complementary-area-header/index.js
index fda791bf88315..f1ed44e123676 100644
--- a/packages/interface/src/components/complementary-area-header/index.js
+++ b/packages/interface/src/components/complementary-area-header/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -33,7 +33,7 @@ const ComplementaryAreaHeader = ( {
 				{ toggleButton }
 			</div>
 			<div
-				className={ classnames(
+				className={ clsx(
 					'components-panel__header',
 					'interface-complementary-area-header',
 					className
diff --git a/packages/interface/src/components/complementary-area-header/style.scss b/packages/interface/src/components/complementary-area-header/style.scss
index 20fbe881d5694..a6b9b53206960 100644
--- a/packages/interface/src/components/complementary-area-header/style.scss
+++ b/packages/interface/src/components/complementary-area-header/style.scss
@@ -17,7 +17,8 @@
 
 .interface-complementary-area-header {
 	background: $white;
-	padding-right: $grid-unit-05;
+	padding-right: $grid-unit-15; // Reduced padding to account for close buttons.
+	gap: $grid-unit-10; // Always ensure space between contents and close buttons.
 
 	.interface-complementary-area-header__title {
 		margin: 0;
@@ -36,11 +37,3 @@
 		}
 	}
 }
-
-// This overrides the negative margins between two consecutives panels.
-// since the first panel is hidden.
-.components-panel__header + .interface-complementary-area-header {
-	@include break-medium() {
-		margin-top: 0;
-	}
-}
diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
index 48ec9bd1ae099..b37b8b7da33d0 100644
--- a/packages/interface/src/components/complementary-area/index.js
+++ b/packages/interface/src/components/complementary-area/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -291,10 +291,7 @@ function ComplementaryArea( {
 			<ComplementaryAreaFill
 				activeArea={ activeArea }
 				isActive={ isActive }
-				className={ classnames(
-					'interface-complementary-area',
-					className
-				) }
+				className={ clsx( 'interface-complementary-area', className ) }
 				scope={ scope }
 				id={ identifier.replace( '/', ':' ) }
 			>
@@ -305,6 +302,7 @@ function ComplementaryArea( {
 					smallScreenTitle={ smallScreenTitle }
 					toggleButtonProps={ {
 						label: closeLabel,
+						size: 'small',
 						shortcut: toggleShortcut,
 						scope,
 						identifier,
@@ -332,6 +330,7 @@ function ComplementaryArea( {
 									}
 									isPressed={ isPinned }
 									aria-expanded={ isPinned }
+									size="compact"
 								/>
 							) }
 						</>
diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss
index 143911c43ecc5..c15be5678a446 100644
--- a/packages/interface/src/components/complementary-area/style.scss
+++ b/packages/interface/src/components/complementary-area/style.scss
@@ -24,7 +24,7 @@
 		top: 0;
 		z-index: z-index(".interface-complementary-area .components-panel__header");
 
-		&.edit-post-sidebar__panel-tabs {
+		&.editor-sidebar__panel-tabs {
 			top: $panel-header-height;
 
 			@include break-medium() {
@@ -39,6 +39,7 @@
 
 	h2 {
 		font-size: $default-font-size;
+		font-weight: 500;
 		color: $gray-900;
 		margin-bottom: 1.5em;
 	}
diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
index 6550a5d403df0..ed4d98cdf7637 100644
--- a/packages/interface/src/components/interface-skeleton/index.js
+++ b/packages/interface/src/components/interface-skeleton/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -26,6 +26,11 @@ import {
 import NavigableRegion from '../navigable-region';
 
 const ANIMATION_DURATION = 0.25;
+const commonTransition = {
+	type: 'tween',
+	duration: ANIMATION_DURATION,
+	ease: [ 0.6, 0, 0.4, 1 ],
+};
 
 function useHTMLClass( className ) {
 	useEffect( () => {
@@ -42,12 +47,30 @@ function useHTMLClass( className ) {
 }
 
 const headerVariants = {
-	hidden: { opacity: 0 },
-	hover: {
+	hidden: { opacity: 1, marginTop: -60 },
+	visible: { opacity: 1, marginTop: 0 },
+	distractionFreeHover: {
 		opacity: 1,
-		transition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },
+		marginTop: 0,
+		transition: {
+			...commonTransition,
+			delay: 0.2,
+			delayChildren: 0.2,
+		},
+	},
+	distractionFreeHidden: {
+		opacity: 0,
+		marginTop: -60,
+	},
+	distractionFreeDisabled: {
+		opacity: 0,
+		marginTop: 0,
+		transition: {
+			...commonTransition,
+			delay: 0.8,
+			delayChildren: 0.8,
+		},
 	},
-	distractionFreeInactive: { opacity: 1, transition: { delay: 0 } },
 };
 
 function InterfaceSkeleton(
@@ -58,7 +81,6 @@ function InterfaceSkeleton(
 		editorNotices,
 		sidebar,
 		secondarySidebar,
-		notices,
 		content,
 		actions,
 		labels,
@@ -106,7 +128,7 @@ function InterfaceSkeleton(
 				ref,
 				enableRegionNavigation ? navigateRegionsProps.ref : undefined,
 			] ) }
-			className={ classnames(
+			className={ clsx(
 				className,
 				'interface-interface-skeleton',
 				navigateRegionsProps.className,
@@ -114,36 +136,39 @@ function InterfaceSkeleton(
 			) }
 		>
 			<div className="interface-interface-skeleton__editor">
-				{ !! header && (
-					<NavigableRegion
-						as={ motion.div }
-						className="interface-interface-skeleton__header"
-						aria-label={ mergedLabels.header }
-						initial={
-							isDistractionFree
-								? 'hidden'
-								: 'distractionFreeInactive'
-						}
-						whileHover={
-							isDistractionFree
-								? 'hover'
-								: 'distractionFreeInactive'
-						}
-						animate={
-							isDistractionFree
-								? 'hidden'
-								: 'distractionFreeInactive'
-						}
-						variants={ headerVariants }
-						transition={
-							isDistractionFree
-								? { type: 'tween', delay: 0.8 }
-								: undefined
-						}
-					>
-						{ header }
-					</NavigableRegion>
-				) }
+				<AnimatePresence initial={ false }>
+					{ !! header && (
+						<NavigableRegion
+							as={ motion.div }
+							className="interface-interface-skeleton__header"
+							aria-label={ mergedLabels.header }
+							initial={
+								isDistractionFree
+									? 'distractionFreeHidden'
+									: 'hidden'
+							}
+							whileHover={
+								isDistractionFree
+									? 'distractionFreeHover'
+									: 'visible'
+							}
+							animate={
+								isDistractionFree
+									? 'distractionFreeDisabled'
+									: 'visible'
+							}
+							exit={
+								isDistractionFree
+									? 'distractionFreeHidden'
+									: 'hidden'
+							}
+							variants={ headerVariants }
+							transition={ defaultTransition }
+						>
+							{ header }
+						</NavigableRegion>
+					) }
+				</AnimatePresence>
 				{ isDistractionFree && (
 					<div className="interface-interface-skeleton__header">
 						{ editorNotices }
@@ -184,11 +209,6 @@ function InterfaceSkeleton(
 							</NavigableRegion>
 						) }
 					</AnimatePresence>
-					{ !! notices && (
-						<div className="interface-interface-skeleton__notices">
-							{ notices }
-						</div>
-					) }
 					<NavigableRegion
 						className="interface-interface-skeleton__content"
 						ariaLabel={ mergedLabels.body }
diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
index a140b73be55b9..379601c4a6ee7 100644
--- a/packages/interface/src/components/interface-skeleton/style.scss
+++ b/packages/interface/src/components/interface-skeleton/style.scss
@@ -5,8 +5,10 @@ html.interface-interface-skeleton__html-container {
 	width: 100%;
 
 	@include break-medium() {
-		position: initial;
-		width: initial;
+		&:not(:has(.is-zoom-out)) {
+			position: initial;
+			width: initial;
+		}
 	}
 }
 
@@ -112,37 +114,36 @@ html.interface-interface-skeleton__html-container {
 	// On Mobile the header is fixed to keep HTML as scrollable.
 	@include break-medium() {
 		position: relative !important;
-
-		// Set this z-index only when the sidebar is opened. When it's closed, the
-		// button to open the sidebar that is shown when navigating regions needs to
-		// be above the footer. See `editor-layout__toggle-sidebar-panel`.
-		.is-sidebar-opened & {
-			z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
-		}
 	}
 }
 
 .interface-interface-skeleton__sidebar {
+	border-top: $border-width solid $gray-200;
 	overflow: hidden;
 
 	@include break-medium() {
-		border-left: $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.
+		outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 	}
 }
 
 .interface-interface-skeleton__secondary-sidebar {
+	border-top: $border-width solid $gray-200;
 	right: 0;
+
 	@include break-medium() {
-		border-right: $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.
+		outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 	}
 }
 
 .interface-interface-skeleton__header {
 	flex-shrink: 0;
 	height: auto;  // Keep the height flexible.
-	border-bottom: $border-width solid $gray-200;
+	box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
 	z-index: z-index(".interface-interface-skeleton__header");
 	color: $gray-900;
+	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 }
 
 .interface-interface-skeleton__footer {
@@ -162,16 +163,6 @@ html.interface-interface-skeleton__html-container {
 	@include break-medium() {
 		display: flex;
 	}
-
-	.block-editor-block-breadcrumb {
-		z-index: z-index(".edit-post-layout__footer");
-		display: flex;
-		background: $white;
-		height: $button-size-small;
-		align-items: center;
-		font-size: $default-font-size;
-		padding: 0 ($grid-unit-15 + 6px);
-	}
 }
 
 .interface-interface-skeleton__actions {
diff --git a/packages/interface/src/components/navigable-region/index.js b/packages/interface/src/components/navigable-region/index.js
index 23ff532f22fd3..a4c051185b63a 100644
--- a/packages/interface/src/components/navigable-region/index.js
+++ b/packages/interface/src/components/navigable-region/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export default function NavigableRegion( {
 	children,
@@ -12,7 +12,7 @@ export default function NavigableRegion( {
 } ) {
 	return (
 		<Tag
-			className={ classnames( 'interface-navigable-region', className ) }
+			className={ clsx( 'interface-navigable-region', className ) }
 			aria-label={ ariaLabel }
 			role="region"
 			tabIndex="-1"
diff --git a/packages/interface/src/components/pinned-items/index.js b/packages/interface/src/components/pinned-items/index.js
index 2e7778302d949..fb5ed3e6458b7 100644
--- a/packages/interface/src/components/pinned-items/index.js
+++ b/packages/interface/src/components/pinned-items/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ function PinnedItemsSlot( { scope, className, ...props } ) {
 			{ ( fills ) =>
 				fills?.length > 0 && (
 					<div
-						className={ classnames(
+						className={ clsx(
 							className,
 							'interface-pinned-items'
 						) }
diff --git a/packages/is-shallow-equal/CHANGELOG.md b/packages/is-shallow-equal/CHANGELOG.md
index ab2f482dadd4b..19b2bc958b3cb 100644
--- a/packages/is-shallow-equal/CHANGELOG.md
+++ b/packages/is-shallow-equal/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.58.0 (2024-05-16)
+
 ## 4.57.0 (2024-05-02)
 
 ## 4.56.0 (2024-04-19)
diff --git a/packages/is-shallow-equal/package.json b/packages/is-shallow-equal/package.json
index 70b48ff61c8f8..5ee5ce57fc304 100644
--- a/packages/is-shallow-equal/package.json
+++ b/packages/is-shallow-equal/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/is-shallow-equal",
-	"version": "4.57.0",
+	"version": "5.0.0",
 	"description": "Test for shallow equality between two objects or arrays.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"build",
diff --git a/packages/jest-console/CHANGELOG.md b/packages/jest-console/CHANGELOG.md
index 54edaa2d34cef..7473e8e446708 100644
--- a/packages/jest-console/CHANGELOG.md
+++ b/packages/jest-console/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 8.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 7.29.0 (2024-05-16)
+
 ## 7.28.0 (2024-05-02)
 
 ## 7.27.0 (2024-04-19)
diff --git a/packages/jest-console/README.md b/packages/jest-console/README.md
index 4e57acef7deb6..f733ad2be352e 100644
--- a/packages/jest-console/README.md
+++ b/packages/jest-console/README.md
@@ -18,7 +18,7 @@ Install the module:
 npm install @wordpress/jest-console --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ### Setup
 
diff --git a/packages/jest-console/package.json b/packages/jest-console/package.json
index a1ad2738b6a1e..2f0ea47a9c52c 100644
--- a/packages/jest-console/package.json
+++ b/packages/jest-console/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-console",
-	"version": "7.28.0",
+	"version": "8.0.0",
 	"description": "Custom Jest matchers for the Console object.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"build",
diff --git a/packages/jest-preset-default/CHANGELOG.md b/packages/jest-preset-default/CHANGELOG.md
index 28cfd6f2f5428..461bd5cb30256 100644
--- a/packages/jest-preset-default/CHANGELOG.md
+++ b/packages/jest-preset-default/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 ## Unreleased
 
+## 12.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 11.29.0 (2024-05-16)
+
 ## 11.28.0 (2024-05-02)
 
 ## 11.27.0 (2024-04-19)
@@ -62,7 +71,7 @@
 
 ### Breaking Changes
 
--  Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388))
+-   Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388))
 
 ## 10.9.0 (2023-03-01)
 
diff --git a/packages/jest-preset-default/README.md b/packages/jest-preset-default/README.md
index 9f1f70ee12228..8720474a18721 100644
--- a/packages/jest-preset-default/README.md
+++ b/packages/jest-preset-default/README.md
@@ -10,7 +10,7 @@ Install the module
 npm install @wordpress/jest-preset-default --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Setup
 
@@ -89,7 +89,7 @@ Finally, you should add `enzyme-to-json/serializer` to the array of [`snapshotSe
 
 ```javascript
 {
-	snapshotSerializers: [ 'enzyme-to-json/serializer' ]
+	snapshotSerializers: [ 'enzyme-to-json/serializer' ];
 }
 ```
 
diff --git a/packages/jest-preset-default/package.json b/packages/jest-preset-default/package.json
index 464c021b2d7e2..14ff5a6364d79 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": "11.28.0",
+	"version": "12.0.0",
 	"description": "Default Jest preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"scripts",
diff --git a/packages/jest-preset-default/scripts/setup-globals.js b/packages/jest-preset-default/scripts/setup-globals.js
index abd99f620dc89..37922a3302e70 100644
--- a/packages/jest-preset-default/scripts/setup-globals.js
+++ b/packages/jest-preset-default/scripts/setup-globals.js
@@ -1,5 +1,6 @@
 // Run all tests with development tools enabled.
-global.SCRIPT_DEBUG = true;
+// eslint-disable-next-line @wordpress/wp-global-usage
+globalThis.SCRIPT_DEBUG = true;
 
 // These are necessary to load TinyMCE successfully.
 global.URL = window.URL;
diff --git a/packages/jest-puppeteer-axe/CHANGELOG.md b/packages/jest-puppeteer-axe/CHANGELOG.md
index ac576b08579c0..97d0efc9ddb24 100644
--- a/packages/jest-puppeteer-axe/CHANGELOG.md
+++ b/packages/jest-puppeteer-axe/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 7.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 6.29.0 (2024-05-16)
+
 ## 6.28.0 (2024-05-02)
 
 ## 6.27.0 (2024-04-19)
@@ -62,7 +70,7 @@
 
 ### Breaking Changes
 
--  Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388))
+-   Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388))
 
 ## 5.11.0 (2023-03-01)
 
diff --git a/packages/jest-puppeteer-axe/README.md b/packages/jest-puppeteer-axe/README.md
index fb5b6752c5702..452ffb4b6d112 100644
--- a/packages/jest-puppeteer-axe/README.md
+++ b/packages/jest-puppeteer-axe/README.md
@@ -12,7 +12,7 @@ Install the module
 npm install @wordpress/jest-puppeteer-axe --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ### Setup
 
diff --git a/packages/jest-puppeteer-axe/package.json b/packages/jest-puppeteer-axe/package.json
index 8779a3e78e49c..a6f162cf21995 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": "6.28.0",
+	"version": "7.0.0",
 	"description": "Axe API integration with Jest and Puppeteer.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -22,7 +22,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"build",
diff --git a/packages/keyboard-shortcuts/CHANGELOG.md b/packages/keyboard-shortcuts/CHANGELOG.md
index c3eb980d25605..9ab27b46d5273 100644
--- a/packages/keyboard-shortcuts/CHANGELOG.md
+++ b/packages/keyboard-shortcuts/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.35.0 (2024-05-16)
+
 ## 4.34.0 (2024-05-02)
 
 ## 4.33.0 (2024-04-19)
diff --git a/packages/keyboard-shortcuts/package.json b/packages/keyboard-shortcuts/package.json
index 8cd081c7b92c3..76381f5699105 100644
--- a/packages/keyboard-shortcuts/package.json
+++ b/packages/keyboard-shortcuts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keyboard-shortcuts",
-	"version": "4.34.0",
+	"version": "5.0.0",
 	"description": "Handling keyboard shortcuts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/keycodes/CHANGELOG.md b/packages/keycodes/CHANGELOG.md
index c2fd1c47468ff..9d3a14f65666b 100644
--- a/packages/keycodes/CHANGELOG.md
+++ b/packages/keycodes/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
 ## 3.57.0 (2024-05-02)
 
 ## 3.56.0 (2024-04-19)
diff --git a/packages/keycodes/package.json b/packages/keycodes/package.json
index fbc3c52afa69c..266b898d704a1 100644
--- a/packages/keycodes/package.json
+++ b/packages/keycodes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keycodes",
-	"version": "3.57.0",
+	"version": "4.0.0",
 	"description": "Keycodes utilities for WordPress. Used to check for keyboard events across browsers/operating systems.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/lazy-import/CHANGELOG.md b/packages/lazy-import/CHANGELOG.md
index e8ae299720c2e..864736a68f008 100644
--- a/packages/lazy-import/CHANGELOG.md
+++ b/packages/lazy-import/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 2.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 1.45.0 (2024-05-16)
+
 ## 1.44.0 (2024-05-02)
 
 ## 1.43.0 (2024-04-19)
diff --git a/packages/lazy-import/package.json b/packages/lazy-import/package.json
index 31321078425cc..20825ef2bb561 100644
--- a/packages/lazy-import/package.json
+++ b/packages/lazy-import/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/lazy-import",
-	"version": "1.44.0",
+	"version": "2.0.0",
 	"description": "Lazily import a module, installing it automatically if missing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"npm": ">=6.9.0"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "lib/index.js",
 	"types": "build-types",
diff --git a/packages/list-reusable-blocks/CHANGELOG.md b/packages/list-reusable-blocks/CHANGELOG.md
index 3a1a9bf07835a..954509404024a 100644
--- a/packages/list-reusable-blocks/CHANGELOG.md
+++ b/packages/list-reusable-blocks/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.35.0 (2024-05-16)
+
 ## 4.34.0 (2024-05-02)
 
 ## 4.33.0 (2024-04-19)
diff --git a/packages/list-reusable-blocks/package.json b/packages/list-reusable-blocks/package.json
index 3e674c5d9303b..e6f95acab19c1 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": "4.34.0",
+	"version": "5.0.0",
 	"description": "Adding Export/Import support to the reusable blocks listing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
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 1f5e62f9115b3..aa2f3133b7a6e 100644
--- a/packages/list-reusable-blocks/src/components/import-form/index.js
+++ b/packages/list-reusable-blocks/src/components/import-form/index.js
@@ -86,6 +86,7 @@ function ImportForm( { instanceId, onUpload } ) {
 			<Button
 				type="submit"
 				isBusy={ isLoading }
+				__experimentalIsFocusable
 				disabled={ ! file || isLoading }
 				variant="secondary"
 				className="list-reusable-blocks-import-form__button"
diff --git a/packages/list-reusable-blocks/src/index.js b/packages/list-reusable-blocks/src/index.js
index 4440ba1c49f05..f5cb411726963 100644
--- a/packages/list-reusable-blocks/src/index.js
+++ b/packages/list-reusable-blocks/src/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createRoot } from '@wordpress/element';
+import { createRoot, StrictMode } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -44,6 +44,8 @@ document.addEventListener( 'DOMContentLoaded', () => {
 	container.className = 'list-reusable-blocks__container';
 	button.parentNode.insertBefore( container, button );
 	createRoot( container ).render(
-		<ImportDropdown onUpload={ showNotice } />
+		<StrictMode>
+			<ImportDropdown onUpload={ showNotice } />
+		</StrictMode>
 	);
 } );
diff --git a/packages/media-utils/CHANGELOG.md b/packages/media-utils/CHANGELOG.md
index 47238ddaac4d6..f9ad3a6b77b42 100644
--- a/packages/media-utils/CHANGELOG.md
+++ b/packages/media-utils/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.49.0 (2024-05-16)
+
 ## 4.48.0 (2024-05-02)
 
 ## 4.47.0 (2024-04-19)
diff --git a/packages/media-utils/package.json b/packages/media-utils/package.json
index 7ceada1c9eb35..1ca36aa6fd1a8 100644
--- a/packages/media-utils/package.json
+++ b/packages/media-utils/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/media-utils",
-	"version": "4.48.0",
+	"version": "5.0.0",
 	"description": "WordPress Media Upload Utils.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/media-utils/src/components/media-upload/index.js b/packages/media-utils/src/components/media-upload/index.js
index 732a9bcabd79f..91de011869ad3 100644
--- a/packages/media-utils/src/components/media-upload/index.js
+++ b/packages/media-utils/src/components/media-upload/index.js
@@ -400,6 +400,8 @@ class MediaUpload extends Component {
 		if ( onClose ) {
 			onClose();
 		}
+
+		this.frame.detach();
 	}
 
 	updateCollection() {
diff --git a/packages/notices/CHANGELOG.md b/packages/notices/CHANGELOG.md
index 2136ad9a72873..3a847355bd0a8 100644
--- a/packages/notices/CHANGELOG.md
+++ b/packages/notices/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.26.0 (2024-05-16)
+
 ## 4.25.0 (2024-05-02)
 
 ## 4.24.0 (2024-04-19)
diff --git a/packages/notices/package.json b/packages/notices/package.json
index 0c8db5a49138b..abcbb6ecfba2d 100644
--- a/packages/notices/package.json
+++ b/packages/notices/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/notices",
-	"version": "4.25.0",
+	"version": "5.0.0",
 	"description": "State management for notices.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/npm-package-json-lint-config/CHANGELOG.md b/packages/npm-package-json-lint-config/CHANGELOG.md
index 184ec8a20a47f..09ee8912592a0 100644
--- a/packages/npm-package-json-lint-config/CHANGELOG.md
+++ b/packages/npm-package-json-lint-config/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.43.0 (2024-05-16)
+
 ## 4.42.0 (2024-05-02)
 
 ## 4.41.0 (2024-04-19)
diff --git a/packages/npm-package-json-lint-config/README.md b/packages/npm-package-json-lint-config/README.md
index dae33adeb5f8a..f933cc188a8a0 100644
--- a/packages/npm-package-json-lint-config/README.md
+++ b/packages/npm-package-json-lint-config/README.md
@@ -10,7 +10,7 @@ Install the module
 $ npm install @wordpress/npm-package-json-lint-config
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Usage
 
diff --git a/packages/npm-package-json-lint-config/package.json b/packages/npm-package-json-lint-config/package.json
index 911d75bd76cb2..71e584477d5cb 100644
--- a/packages/npm-package-json-lint-config/package.json
+++ b/packages/npm-package-json-lint-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/npm-package-json-lint-config",
-	"version": "4.42.0",
+	"version": "5.0.0",
 	"description": "WordPress npm-package-json-lint shareable configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"index.js"
diff --git a/packages/nux/CHANGELOG.md b/packages/nux/CHANGELOG.md
index 576c80cc69717..9141ca8ee3b27 100644
--- a/packages/nux/CHANGELOG.md
+++ b/packages/nux/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 9.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 8.20.0 (2024-05-16)
+
 ## 8.19.0 (2024-05-02)
 
 ## 8.18.0 (2024-04-19)
diff --git a/packages/nux/package.json b/packages/nux/package.json
index dc17bc02b8d39..d2c760a6cf1aa 100644
--- a/packages/nux/package.json
+++ b/packages/nux/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/nux",
-	"version": "8.19.0",
+	"version": "9.0.0",
 	"description": "NUX (New User eXperience) module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
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 77e32d991fa4d..2fefa70d5b0a2 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: none; transform-origin: 0% 50% 0;"
+  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;"
   tabindex="-1"
 >
   <div
diff --git a/packages/patterns/CHANGELOG.md b/packages/patterns/CHANGELOG.md
index 254140df7df2c..1519a8164fe29 100644
--- a/packages/patterns/CHANGELOG.md
+++ b/packages/patterns/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 2.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 1.19.0 (2024-05-16)
+
 ## 1.18.0 (2024-05-02)
 
 ## 1.17.0 (2024-04-19)
diff --git a/packages/patterns/package.json b/packages/patterns/package.json
index 399f090992ce2..b14c3739e3175 100644
--- a/packages/patterns/package.json
+++ b/packages/patterns/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/patterns",
-	"version": "1.18.0",
+	"version": "2.0.0",
 	"description": "Management of user pattern editing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=16.0.0"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/patterns/src/api/index.js b/packages/patterns/src/api/index.js
index 448001f891fba..4321dc4262145 100644
--- a/packages/patterns/src/api/index.js
+++ b/packages/patterns/src/api/index.js
@@ -22,3 +22,19 @@ export function isOverridableBlock( block ) {
 		)
 	);
 }
+
+/**
+ * Determines whether the blocks list has overridable blocks.
+ *
+ * @param {WPBlock[]} blocks The blocks list.
+ *
+ * @return {boolean} `true` if the list has overridable blocks, `false` otherwise.
+ */
+export function hasOverridableBlocks( blocks ) {
+	return blocks.some( ( block ) => {
+		if ( isOverridableBlock( block ) ) {
+			return true;
+		}
+		return hasOverridableBlocks( block.innerBlocks );
+	} );
+}
diff --git a/packages/patterns/src/components/create-pattern-modal.js b/packages/patterns/src/components/create-pattern-modal.js
index 9576e50309e23..16ae706bf18f1 100644
--- a/packages/patterns/src/components/create-pattern-modal.js
+++ b/packages/patterns/src/components/create-pattern-modal.js
@@ -11,13 +11,18 @@ import {
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import { PATTERN_DEFAULT_CATEGORY, PATTERN_SYNC_TYPES } from '../constants';
+import {
+	PATTERN_DEFAULT_CATEGORY,
+	PATTERN_SYNC_TYPES,
+	PATTERN_TYPES,
+} from '../constants';
 import { store as patternsStore } from '../store';
 import CategorySelector from './category-selector';
 import { useAddPatternCategory } from '../private-hooks';
@@ -25,12 +30,18 @@ import { unlock } from '../lock-unlock';
 
 export default function CreatePatternModal( {
 	className = 'patterns-menu-items__convert-modal',
-	modalTitle = __( 'Create pattern' ),
+	modalTitle,
 	...restProps
 } ) {
+	const defaultModalTitle = useSelect(
+		( select ) =>
+			select( coreStore ).getPostType( PATTERN_TYPES.user )?.labels
+				?.add_new_item,
+		[]
+	);
 	return (
 		<Modal
-			title={ modalTitle }
+			title={ modalTitle || defaultModalTitle }
 			onRequestClose={ restProps.onClose }
 			overlayClassName={ className }
 		>
@@ -40,7 +51,7 @@ export default function CreatePatternModal( {
 }
 
 export function CreatePatternModalContents( {
-	confirmLabel = __( 'Create' ),
+	confirmLabel = __( 'Add' ),
 	defaultCategories = [],
 	content,
 	onClose,
diff --git a/packages/patterns/src/components/pattern-overrides-controls.js b/packages/patterns/src/components/pattern-overrides-controls.js
index 3ece910a0df47..9869c5b072c85 100644
--- a/packages/patterns/src/components/pattern-overrides-controls.js
+++ b/packages/patterns/src/components/pattern-overrides-controls.js
@@ -9,66 +9,48 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import {
-	PARTIAL_SYNCING_SUPPORTED_BLOCKS,
-	PATTERN_OVERRIDES_BINDING_SOURCE,
-} from '../constants';
+import { PATTERN_OVERRIDES_BINDING_SOURCE } from '../constants';
 import {
 	AllowOverridesModal,
 	DisallowOverridesModal,
 } from './allow-overrides-modal';
 
-function removeBindings( bindings, syncedAttributes ) {
-	let updatedBindings = {};
-	for ( const attributeName of syncedAttributes ) {
-		// Omit any bindings that's not the same source from the `updatedBindings` object.
-		if (
-			bindings?.[ attributeName ]?.source !==
-				PATTERN_OVERRIDES_BINDING_SOURCE &&
-			bindings?.[ attributeName ]?.source !== undefined
-		) {
-			updatedBindings[ attributeName ] = bindings[ attributeName ];
-		}
-	}
+function removeBindings( bindings ) {
+	let updatedBindings = { ...bindings };
+	delete updatedBindings.__default;
 	if ( ! Object.keys( updatedBindings ).length ) {
 		updatedBindings = undefined;
 	}
 	return updatedBindings;
 }
 
-function addBindings( bindings, syncedAttributes ) {
-	const updatedBindings = { ...bindings };
-	for ( const attributeName of syncedAttributes ) {
-		if ( ! bindings?.[ attributeName ] ) {
-			updatedBindings[ attributeName ] = {
-				source: PATTERN_OVERRIDES_BINDING_SOURCE,
-			};
-		}
-	}
-	return updatedBindings;
+function addBindings( bindings ) {
+	return {
+		...bindings,
+		__default: { source: PATTERN_OVERRIDES_BINDING_SOURCE },
+	};
 }
 
-function PatternOverridesControls( { attributes, name, setAttributes } ) {
+function PatternOverridesControls( { attributes, setAttributes } ) {
 	const controlId = useId();
 	const [ showAllowOverridesModal, setShowAllowOverridesModal ] =
 		useState( false );
 	const [ showDisallowOverridesModal, setShowDisallowOverridesModal ] =
 		useState( false );
 
-	const syncedAttributes = PARTIAL_SYNCING_SUPPORTED_BLOCKS[ name ];
-	const attributeSources = syncedAttributes.map(
-		( attributeName ) =>
-			attributes.metadata?.bindings?.[ attributeName ]?.source
-	);
-	const isConnectedToOtherSources = attributeSources.every(
-		( source ) => source && source !== 'core/pattern-overrides'
-	);
+	const hasName = !! attributes.metadata?.name;
+	const defaultBindings = attributes.metadata?.bindings?.__default;
+	const allowOverrides =
+		hasName && defaultBindings?.source === PATTERN_OVERRIDES_BINDING_SOURCE;
+	const isConnectedToOtherSources =
+		defaultBindings?.source &&
+		defaultBindings.source !== PATTERN_OVERRIDES_BINDING_SOURCE;
 
 	function updateBindings( isChecked, customName ) {
 		const prevBindings = attributes?.metadata?.bindings;
 		const updatedBindings = isChecked
-			? addBindings( prevBindings, syncedAttributes )
-			: removeBindings( prevBindings, syncedAttributes );
+			? addBindings( prevBindings )
+			: removeBindings( prevBindings );
 
 		const updatedMetadata = {
 			...attributes.metadata,
@@ -89,13 +71,6 @@ function PatternOverridesControls( { attributes, name, setAttributes } ) {
 		return null;
 	}
 
-	const hasName = !! attributes.metadata?.name;
-	const allowOverrides =
-		hasName &&
-		attributeSources.some(
-			( source ) => source === PATTERN_OVERRIDES_BINDING_SOURCE
-		);
-
 	return (
 		<>
 			<InspectorControls group="advanced">
diff --git a/packages/patterns/src/components/patterns-manage-button.js b/packages/patterns/src/components/patterns-manage-button.js
index f2bd798a7b6fa..bab9cab11462a 100644
--- a/packages/patterns/src/components/patterns-manage-button.js
+++ b/packages/patterns/src/components/patterns-manage-button.js
@@ -37,7 +37,7 @@ function PatternsManageButton( { clientId } ) {
 				// The site editor and templates both check whether the user
 				// has edit_theme_options capabilities. We can leverage that here
 				// and omit the manage patterns link if the user can't access it.
-				managePatternsUrl: canUser( 'read', 'templates' )
+				managePatternsUrl: canUser( 'create', 'templates' )
 					? addQueryArgs( 'site-editor.php', {
 							path: '/patterns',
 					  } )
diff --git a/packages/patterns/src/components/reset-overrides-control.js b/packages/patterns/src/components/reset-overrides-control.js
index 1d3ae013addd3..11f282481a3ac 100644
--- a/packages/patterns/src/components/reset-overrides-control.js
+++ b/packages/patterns/src/components/reset-overrides-control.js
@@ -6,80 +6,84 @@ import {
 	BlockControls,
 } from '@wordpress/block-editor';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { useSelect, useRegistry } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { parse } from '@wordpress/blocks';
+import { useRegistry, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
-function recursivelyFindBlockWithName( blocks, name ) {
-	for ( const block of blocks ) {
-		if ( block.attributes.metadata?.name === name ) {
-			return block;
-		}
-
-		const found = recursivelyFindBlockWithName( block.innerBlocks, name );
-		if ( found ) {
-			return found;
-		}
-	}
-}
+const CONTENT = 'content';
 
 export default function ResetOverridesControl( props ) {
-	const registry = useRegistry();
 	const name = props.attributes.metadata?.name;
-	const patternWithOverrides = useSelect(
+	const registry = useRegistry();
+	const isOverriden = useSelect(
 		( select ) => {
 			if ( ! name ) {
-				return undefined;
+				return;
 			}
 
-			const { getBlockParentsByBlockName, getBlocksByClientId } =
+			const { getBlockAttributes, getBlockParentsByBlockName } =
 				select( blockEditorStore );
-			const patternBlock = getBlocksByClientId(
-				getBlockParentsByBlockName( props.clientId, 'core/block' )
-			)[ 0 ];
+			const [ patternClientId ] = getBlockParentsByBlockName(
+				props.clientId,
+				'core/block',
+				true
+			);
+
+			if ( ! patternClientId ) {
+				return;
+			}
+
+			const overrides = getBlockAttributes( patternClientId )[ CONTENT ];
 
-			if ( ! patternBlock?.attributes.content?.[ name ] ) {
-				return undefined;
+			if ( ! overrides ) {
+				return;
 			}
 
-			return patternBlock;
+			return overrides.hasOwnProperty( name );
 		},
 		[ props.clientId, name ]
 	);
 
-	const resetOverrides = async () => {
-		const editedRecord = await registry
-			.resolveSelect( coreStore )
-			.getEditedEntityRecord(
-				'postType',
-				'wp_block',
-				patternWithOverrides.attributes.ref
-			);
-		const blocks = editedRecord.blocks ?? parse( editedRecord.content );
-		const block = recursivelyFindBlockWithName( blocks, name );
-
-		const newAttributes = Object.assign(
-			// Reset every existing attribute to undefined.
-			Object.fromEntries(
-				Object.keys( props.attributes ).map( ( key ) => [
-					key,
-					undefined,
-				] )
-			),
-			// Then assign the original attributes.
-			block.attributes
+	function onClick() {
+		const { getBlockAttributes, getBlockParentsByBlockName } =
+			registry.select( blockEditorStore );
+		const [ patternClientId ] = getBlockParentsByBlockName(
+			props.clientId,
+			'core/block',
+			true
 		);
 
-		props.setAttributes( newAttributes );
-	};
+		if ( ! patternClientId ) {
+			return;
+		}
+
+		const overrides = getBlockAttributes( patternClientId )[ CONTENT ];
+
+		if ( ! overrides.hasOwnProperty( name ) ) {
+			return;
+		}
+
+		const { updateBlockAttributes, __unstableMarkLastChangeAsPersistent } =
+			registry.dispatch( blockEditorStore );
+		__unstableMarkLastChangeAsPersistent();
+
+		let newOverrides = { ...overrides };
+		delete newOverrides[ name ];
+
+		if ( ! Object.keys( newOverrides ).length ) {
+			newOverrides = undefined;
+		}
+
+		updateBlockAttributes( patternClientId, {
+			[ CONTENT ]: newOverrides,
+		} );
+	}
 
 	return (
 		<BlockControls group="other">
 			<ToolbarGroup>
 				<ToolbarButton
-					onClick={ resetOverrides }
-					disabled={ ! patternWithOverrides }
+					onClick={ onClick }
+					disabled={ ! isOverriden }
 					__experimentalIsFocusable
 				>
 					{ __( 'Reset' ) }
diff --git a/packages/patterns/src/private-apis.js b/packages/patterns/src/private-apis.js
index 05417de2b2c66..0553378cb5604 100644
--- a/packages/patterns/src/private-apis.js
+++ b/packages/patterns/src/private-apis.js
@@ -11,7 +11,7 @@ import {
 	default as DuplicatePatternModal,
 	useDuplicatePatternProps,
 } from './components/duplicate-pattern-modal';
-import { isOverridableBlock } from './api';
+import { isOverridableBlock, hasOverridableBlocks } from './api';
 import RenamePatternModal from './components/rename-pattern-modal';
 import PatternsMenuItems from './components';
 import RenamePatternCategoryModal from './components/rename-pattern-category-modal';
@@ -34,6 +34,7 @@ lock( privateApis, {
 	CreatePatternModalContents,
 	DuplicatePatternModal,
 	isOverridableBlock,
+	hasOverridableBlocks,
 	useDuplicatePatternProps,
 	RenamePatternModal,
 	PatternsMenuItems,
diff --git a/packages/patterns/src/store/actions.js b/packages/patterns/src/store/actions.js
index 7b9090ae4de66..5eef01b2bb8f8 100644
--- a/packages/patterns/src/store/actions.js
+++ b/packages/patterns/src/store/actions.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 
-import { cloneBlock } from '@wordpress/blocks';
+import { getBlockType, cloneBlock } from '@wordpress/blocks';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
@@ -93,6 +93,7 @@ export const convertSyncedPatternToStatic =
 		const patternBlock = registry
 			.select( blockEditorStore )
 			.getBlock( clientId );
+		const existingOverrides = patternBlock.attributes?.content;
 
 		function cloneBlocksAndRemoveBindings( blocks ) {
 			return blocks.map( ( block ) => {
@@ -101,6 +102,24 @@ export const convertSyncedPatternToStatic =
 					metadata = { ...metadata };
 					delete metadata.id;
 					delete metadata.bindings;
+					// Use overridden values of the pattern block if they exist.
+					if ( existingOverrides?.[ metadata.name ] ) {
+						// Iterate over each overriden attribute.
+						for ( const [ attributeName, value ] of Object.entries(
+							existingOverrides[ metadata.name ]
+						) ) {
+							// Skip if the attribute does not exist in the block type.
+							if (
+								! getBlockType( block.name )?.attributes[
+									attributeName
+								]
+							) {
+								continue;
+							}
+							// Update the block attribute with the override value.
+							block.attributes[ attributeName ] = value;
+						}
+					}
 				}
 				return cloneBlock(
 					block,
@@ -115,11 +134,15 @@ export const convertSyncedPatternToStatic =
 			} );
 		}
 
+		const patternInnerBlocks = registry
+			.select( blockEditorStore )
+			.getBlocks( patternBlock.clientId );
+
 		registry
 			.dispatch( blockEditorStore )
 			.replaceBlocks(
 				patternBlock.clientId,
-				cloneBlocksAndRemoveBindings( patternBlock.innerBlocks )
+				cloneBlocksAndRemoveBindings( patternInnerBlocks )
 			);
 	};
 
diff --git a/packages/plugins/CHANGELOG.md b/packages/plugins/CHANGELOG.md
index b1aa8fa15568a..5ba4ad33c6a74 100644
--- a/packages/plugins/CHANGELOG.md
+++ b/packages/plugins/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 ## Unreleased
 
+## 7.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 6.26.0 (2024-05-16)
+
 ## 6.25.0 (2024-05-02)
 
 ## 6.24.0 (2024-04-19)
diff --git a/packages/plugins/package.json b/packages/plugins/package.json
index fb7f5f5a58a15..5747c0d6d889c 100644
--- a/packages/plugins/package.json
+++ b/packages/plugins/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/plugins",
-	"version": "6.25.0",
+	"version": "7.0.0",
 	"description": "Plugins module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/plugins/tsconfig.json b/packages/plugins/tsconfig.json
index d20dcecf0d613..9a0da807348b2 100644
--- a/packages/plugins/tsconfig.json
+++ b/packages/plugins/tsconfig.json
@@ -4,8 +4,7 @@
 	"compilerOptions": {
 		"rootDir": "src",
 		"declarationDir": "build-types",
-		"types": [ "gutenberg-env" ],
-		"skipLibCheck": true
+		"types": [ "gutenberg-env" ]
 	},
 	"references": [
 		{ "path": "../components" },
diff --git a/packages/postcss-plugins-preset/CHANGELOG.md b/packages/postcss-plugins-preset/CHANGELOG.md
index 0c562ba2cb8a0..35fa13f05ab1d 100644
--- a/packages/postcss-plugins-preset/CHANGELOG.md
+++ b/packages/postcss-plugins-preset/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.42.0 (2024-05-16)
+
 ## 4.41.0 (2024-05-02)
 
 ## 4.40.0 (2024-04-19)
diff --git a/packages/postcss-plugins-preset/README.md b/packages/postcss-plugins-preset/README.md
index 8385a30e6be53..ac844e279b6f1 100644
--- a/packages/postcss-plugins-preset/README.md
+++ b/packages/postcss-plugins-preset/README.md
@@ -10,7 +10,7 @@ Install the module
 npm install @wordpress/postcss-plugins-preset --save
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Contributing to this package
 
diff --git a/packages/postcss-plugins-preset/package.json b/packages/postcss-plugins-preset/package.json
index 1fd6a74590314..a8954e0ec9cbc 100644
--- a/packages/postcss-plugins-preset/package.json
+++ b/packages/postcss-plugins-preset/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/postcss-plugins-preset",
-	"version": "4.41.0",
+	"version": "5.0.0",
 	"description": "PostCSS sharable plugins preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -22,7 +22,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"lib"
diff --git a/packages/postcss-themes/CHANGELOG.md b/packages/postcss-themes/CHANGELOG.md
index 4cd7a3515a57c..cf32c7f744931 100644
--- a/packages/postcss-themes/CHANGELOG.md
+++ b/packages/postcss-themes/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 6.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 5.41.0 (2024-05-16)
+
 ## 5.40.0 (2024-05-02)
 
 ## 5.39.0 (2024-04-19)
diff --git a/packages/postcss-themes/README.md b/packages/postcss-themes/README.md
index 341ecfdbd8b7a..b23c6c829d1d9 100644
--- a/packages/postcss-themes/README.md
+++ b/packages/postcss-themes/README.md
@@ -10,7 +10,7 @@ Install the module
 npm install @wordpress/postcss-themes --save
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Contributing to this package
 
diff --git a/packages/postcss-themes/package.json b/packages/postcss-themes/package.json
index 8da0d05a91989..eddfdecb3d052 100644
--- a/packages/postcss-themes/package.json
+++ b/packages/postcss-themes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/postcss-themes",
-	"version": "5.40.0",
+	"version": "6.0.0",
 	"description": "PostCSS plugin to generate theme colors.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -24,7 +24,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"index.js"
diff --git a/packages/preferences-persistence/CHANGELOG.md b/packages/preferences-persistence/CHANGELOG.md
index 66f78d71d6e1c..6c7af3085d837 100644
--- a/packages/preferences-persistence/CHANGELOG.md
+++ b/packages/preferences-persistence/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 2.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 1.50.0 (2024-05-16)
+
 ## 1.49.0 (2024-05-02)
 
 ## 1.48.0 (2024-04-19)
diff --git a/packages/preferences-persistence/package.json b/packages/preferences-persistence/package.json
index fbb93443f32fa..a250930699aec 100644
--- a/packages/preferences-persistence/package.json
+++ b/packages/preferences-persistence/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/preferences-persistence",
-	"version": "1.49.0",
+	"version": "2.0.0",
 	"description": "Persistence utilities for `wordpress/preferences`.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/preferences/CHANGELOG.md b/packages/preferences/CHANGELOG.md
index 82fe9507ec05a..54778a68a2ce1 100644
--- a/packages/preferences/CHANGELOG.md
+++ b/packages/preferences/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.35.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
 ## 3.34.0 (2024-05-02)
 
 ## 3.33.0 (2024-04-19)
diff --git a/packages/preferences/package.json b/packages/preferences/package.json
index e85053916537d..5b3e520ea96e8 100644
--- a/packages/preferences/package.json
+++ b/packages/preferences/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/preferences",
-	"version": "3.34.0",
+	"version": "4.0.0",
 	"description": "Utilities for managing WordPress preferences.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -38,7 +39,7 @@
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/private-apis": "file:../private-apis",
-		"classnames": "^2.3.1"
+		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
diff --git a/packages/preferences/src/components/preferences-modal-tabs/style.scss b/packages/preferences/src/components/preferences-modal-tabs/style.scss
index d3afd4174cd0c..e20b9aa9064ed 100644
--- a/packages/preferences/src/components/preferences-modal-tabs/style.scss
+++ b/packages/preferences/src/components/preferences-modal-tabs/style.scss
@@ -1,12 +1,15 @@
 $vertical-tabs-width: 160px;
 
 .preferences__tabs-tablist {
-	position: absolute;
+	position: absolute !important;
 	top: $header-height + $grid-unit-30;
 	// Aligns button text instead of button box.
 	left: $grid-unit-20;
 	width: $vertical-tabs-width;
 
+	&::after {
+		content: none !important;
+	}
 }
 
 .preferences__tabs-tab {
@@ -19,10 +22,6 @@ $vertical-tabs-width: 160px;
 		font-weight: 500;
 	}
 
-	&[aria-selected="true"]::after {
-		content: none;
-	}
-
 	&[role="tab"]:focus:not(:disabled) {
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		// Windows high contrast mode.
diff --git a/packages/prettier-config/CHANGELOG.md b/packages/prettier-config/CHANGELOG.md
index 110cbd750a5ad..a3e735502062d 100644
--- a/packages/prettier-config/CHANGELOG.md
+++ b/packages/prettier-config/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.15.0 (2024-05-16)
+
 ## 3.14.0 (2024-05-02)
 
 ## 3.13.0 (2024-04-19)
diff --git a/packages/prettier-config/README.md b/packages/prettier-config/README.md
index b07fad62e14e6..efb75513694fc 100644
--- a/packages/prettier-config/README.md
+++ b/packages/prettier-config/README.md
@@ -10,7 +10,7 @@ Install the module
 $ npm install @wordpress/prettier-config --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Usage
 
diff --git a/packages/prettier-config/package.json b/packages/prettier-config/package.json
index c42e2bc862e5c..56e4a530ec276 100644
--- a/packages/prettier-config/package.json
+++ b/packages/prettier-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/prettier-config",
-	"version": "3.14.0",
+	"version": "4.0.0",
 	"description": "WordPress Prettier shared configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"lib/index.js"
diff --git a/packages/primitives/CHANGELOG.md b/packages/primitives/CHANGELOG.md
index ad1873dd1ab77..95093af292192 100644
--- a/packages/primitives/CHANGELOG.md
+++ b/packages/primitives/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.56.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
 ## 3.55.0 (2024-05-02)
 
 ## 3.54.0 (2024-04-19)
@@ -130,8 +142,8 @@
 
 ### Breaking Changes
 
--   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/.
--   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/.
+-   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at <https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/>.
+-   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at <https://nodejs.org/en/about/releases/>.
 
 ## 1.12.0 (2021-03-17)
 
diff --git a/packages/primitives/package.json b/packages/primitives/package.json
index 411770497448d..f47b368097470 100644
--- a/packages/primitives/package.json
+++ b/packages/primitives/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/primitives",
-	"version": "3.55.0",
+	"version": "4.0.0",
 	"description": "WordPress cross-platform primitives.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -32,7 +33,7 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/element": "file:../element",
-		"classnames": "^2.3.1"
+		"clsx": "^2.1.1"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/primitives/src/svg/index.js b/packages/primitives/src/svg/index.js
index 420432d0543e1..4da6685d3d6f1 100644
--- a/packages/primitives/src/svg/index.js
+++ b/packages/primitives/src/svg/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -94,8 +94,7 @@ export const SVG = forwardRef(
 		const appliedProps = {
 			...props,
 			className:
-				classnames( className, { 'is-pressed': isPressed } ) ||
-				undefined,
+				clsx( className, { 'is-pressed': isPressed } ) || undefined,
 			'aria-hidden': true,
 			focusable: false,
 		};
diff --git a/packages/priority-queue/CHANGELOG.md b/packages/priority-queue/CHANGELOG.md
index 9c0aa4bfb2b35..ebc0c6501bcdb 100644
--- a/packages/priority-queue/CHANGELOG.md
+++ b/packages/priority-queue/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 3.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 2.58.0 (2024-05-16)
+
 ## 2.57.0 (2024-05-02)
 
 ## 2.56.0 (2024-04-19)
@@ -106,7 +114,7 @@
 
 ### New features
 
--  Add a new `cancel` method that removes scheduled callbacks without executing them.
+-   Add a new `cancel` method that removes scheduled callbacks without executing them.
 
 ## 2.6.0 (2022-04-08)
 
diff --git a/packages/priority-queue/package.json b/packages/priority-queue/package.json
index 42835e362ceb8..a544c61f217d6 100644
--- a/packages/priority-queue/package.json
+++ b/packages/priority-queue/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/priority-queue",
-	"version": "2.57.0",
+	"version": "3.0.0",
 	"description": "Generic browser priority queue.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/private-apis/CHANGELOG.md b/packages/private-apis/CHANGELOG.md
index 5c1266dcbbda4..d10d7d73cd78f 100644
--- a/packages/private-apis/CHANGELOG.md
+++ b/packages/private-apis/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 ## Unreleased
 
+## 1.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 0.40.0 (2024-05-16)
+
 ## 0.39.0 (2024-05-02)
 
 ## 0.38.0 (2024-04-19)
diff --git a/packages/private-apis/package.json b/packages/private-apis/package.json
index 70da7d7fb0050..307c4f021e761 100644
--- a/packages/private-apis/package.json
+++ b/packages/private-apis/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/private-apis",
-	"version": "0.39.0",
+	"version": "1.0.0",
 	"description": "Internal experimental APIs for WordPress core.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/private-apis/src/implementation.js b/packages/private-apis/src/implementation.js
index a31fd91ce094d..bea820226fe33 100644
--- a/packages/private-apis/src/implementation.js
+++ b/packages/private-apis/src/implementation.js
@@ -66,7 +66,7 @@ let allowReRegistration;
 // Let's default to true, then. Try/catch will fall back to "true" even if the
 // environment variable is not explicitly defined.
 try {
-	allowReRegistration = process.env.IS_WORDPRESS_CORE ? false : true;
+	allowReRegistration = globalThis.IS_WORDPRESS_CORE ? false : true;
 } catch ( error ) {
 	allowReRegistration = true;
 }
diff --git a/packages/project-management-automation/CHANGELOG.md b/packages/project-management-automation/CHANGELOG.md
index aaecfe931f46f..6794a20720a5c 100644
--- a/packages/project-management-automation/CHANGELOG.md
+++ b/packages/project-management-automation/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 2.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 1.57.0 (2024-05-16)
+
 ## 1.56.0 (2024-05-02)
 
 ## 1.55.0 (2024-04-19)
diff --git a/packages/project-management-automation/package.json b/packages/project-management-automation/package.json
index e3674c668a7b1..d0741b4c4e094 100644
--- a/packages/project-management-automation/package.json
+++ b/packages/project-management-automation/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/project-management-automation",
-	"version": "1.56.0",
+	"version": "2.0.0",
 	"description": "GitHub Action that implements various automation to assist with managing the Gutenberg GitHub repository.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,6 +19,10 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
 	"main": "lib/index.js",
 	"types": "build-types",
 	"dependencies": {
diff --git a/packages/react-i18n/CHANGELOG.md b/packages/react-i18n/CHANGELOG.md
index 8a9521b60a4c3..2d547d0335f64 100644
--- a/packages/react-i18n/CHANGELOG.md
+++ b/packages/react-i18n/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.56.0 (2024-05-16)
+
 ## 3.55.0 (2024-05-02)
 
 ## 3.54.0 (2024-04-19)
diff --git a/packages/react-i18n/package.json b/packages/react-i18n/package.json
index 758242c2753a0..89f7a763b4b8d 100644
--- a/packages/react-i18n/package.json
+++ b/packages/react-i18n/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-i18n",
-	"version": "3.55.0",
+	"version": "4.0.0",
 	"description": "React bindings for @wordpress/i18n.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/react-native-aztec/android/build.gradle b/packages/react-native-aztec/android/build.gradle
index 0c93a9c858e92..45312e89f0b9d 100644
--- a/packages/react-native-aztec/android/build.gradle
+++ b/packages/react-native-aztec/android/build.gradle
@@ -53,7 +53,7 @@ android {
 
     defaultConfig {
         minSdkVersion 24
-        targetSdkVersion 33
+        targetSdkVersion 34
     }
 
     compileOptions {
diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json
index ac47ae64e0814..b3352cdbd3eb5 100644
--- a/packages/react-native-aztec/package.json
+++ b/packages/react-native-aztec/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-native-aztec",
-	"version": "1.118.0",
+	"version": "1.119.0",
 	"description": "Aztec view for react-native.",
 	"private": true,
 	"author": "The WordPress Contributors",
@@ -18,6 +18,10 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
 	"dependencies": {
 		"@wordpress/element": "file:../element",
 		"@wordpress/keycodes": "file:../keycodes"
diff --git a/packages/react-native-bridge/android/react-native-bridge/build.gradle b/packages/react-native-bridge/android/react-native-bridge/build.gradle
index 8f3fcd35a95ab..d8249b9d1b640 100644
--- a/packages/react-native-bridge/android/react-native-bridge/build.gradle
+++ b/packages/react-native-bridge/android/react-native-bridge/build.gradle
@@ -39,7 +39,7 @@ android {
 
     defaultConfig {
         minSdkVersion 24
-        targetSdkVersion 33
+        targetSdkVersion 34
         buildConfigField "boolean", "SHOULD_ATTACH_JS_BUNDLE", willPublishReactNativeBridgeBinary.toString()
     }
 
@@ -93,7 +93,7 @@ dependencies {
 
     // Published by `wordpress-mobile/react-native-libraries-publisher`
     // See the documentation for this value in `build.gradle.kts` of `wordpress-mobile/react-native-libraries-publisher`
-    def reactNativeLibrariesPublisherVersion = "v5"
+    def reactNativeLibrariesPublisherVersion = "v6"
     def reactNativeLibrariesGroupId = "org.wordpress.react-native-libraries.$reactNativeLibrariesPublisherVersion"
     implementation "$reactNativeLibrariesGroupId:react-native-get-random-values:${extractPackageVersion(packageJson, 'react-native-get-random-values', 'dependencies')}"
     implementation "$reactNativeLibrariesGroupId:react-native-safe-area-context:${extractPackageVersion(packageJson, 'react-native-safe-area-context', 'dependencies')}"
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java
index 4f7066a5bd47d..315765edddf10 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java
@@ -66,6 +66,7 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
     private static final String EVENT_NAME_ON_UNDO_PRESSED = "onUndoPressed";
 
     private static final String EVENT_NAME_ON_REDO_PRESSED = "onRedoPressed";
+    private static final String EVENT_NAME_ON_CONTENT_UPDATE = "onContentUpdate";
 
     private static final String MAP_KEY_UPDATE_HTML = "html";
     private static final String MAP_KEY_UPDATE_TITLE = "title";
@@ -91,6 +92,7 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
     private static final String MAP_KEY_REPLACE_BLOCK_HTML = "html";
     private static final String MAP_KEY_REPLACE_BLOCK_BLOCK_ID = "clientId";
 
+    private static final String MAP_KEY_UPDATE_CONTENT = "content";
     public static final String MAP_KEY_FEATURED_IMAGE_ID = "featuredImageId";
 
     public static final String MAP_KEY_IS_CONNECTED = "isConnected";
@@ -214,6 +216,13 @@ public void onRedoPressed() {
         emitToJS(EVENT_NAME_ON_REDO_PRESSED, null);
     }
 
+    public void onContentUpdate(String content) {
+        WritableMap writableMap = new WritableNativeMap();
+
+        writableMap.putString(MAP_KEY_UPDATE_CONTENT, content);
+        emitToJS(EVENT_NAME_ON_CONTENT_UPDATE, writableMap);
+    }
+
     @ReactMethod
     public void addListener(String eventName) {
         // Keep: Required for RN built in Event Emitter Calls.
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java
index 8677c1737c52f..4477dfc115b7c 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java
@@ -846,6 +846,10 @@ public void onRedoPressed() {
         mRnReactNativeGutenbergBridgePackage.getRNReactNativeGutenbergBridgeModule().onRedoPressed();
     }
 
+    public void onContentUpdate(String content) {
+        mRnReactNativeGutenbergBridgePackage.getRNReactNativeGutenbergBridgeModule().onContentUpdate(content);
+    }
+
     public void setTitle(String title) {
         mTitleInitialized = true;
         mTitle = title;
diff --git a/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css b/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css
index ce39beede024f..46782e944d0c3 100644
--- a/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css
+++ b/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css
@@ -3,8 +3,28 @@
     display: none;
 }
 
+/* Remove header toolbar */
+.editor-header__toolbar {
+    display: none;
+}
+
+/* Hide all children of editor-header__settings */
+.editor-header__settings > * {
+    display: none;
+}
+
+/* Show only the interface-pinned-items container */
+.editor-header__settings > .interface-pinned-items {
+    display: block;
+}
+
+.components-button.editor-post-publish-panel__toggle.is-primary{
+    display: none;
+}
+
 /* Remove default block appender at the end of the post */
-.block-list-appender {
+.block-list-appender, .block-list-appender__toggle,
+.block-editor-inserter, .components-autocomplete__popover {
     display: none;
 }
 
@@ -18,6 +38,11 @@
     display: none;
 }
 
+/* Remove block inserter popover */
+.block-editor-block-popover {
+    display: none;
+}
+
 /* Right align post header children as we will only display one child */
 .edit-post-header {
 	justify-content: flex-end;
@@ -64,17 +89,17 @@
 }
 
 /* Remove tabs from sidebar panel, leaving the \'x\' button */
-.edit-post-sidebar__panel-tabs {
+.editor-sidebar__panel-tabs {
     display: none;
 }
 
 /* Remove \'(no-title)\' string from sidebar header */
-.edit-post-sidebar-header__title {
+.editor-sidebar-header__title {
     display: none;
 }
 
 /* Move \'x\' close button to the end on sidebar header */
-.edit-post-sidebar-header__small {
+.editor-sidebar-header__small {
     justify-content: flex-end;
 }
 
diff --git a/packages/react-native-bridge/index.js b/packages/react-native-bridge/index.js
index 50e21fe86a683..da16f75e161da 100644
--- a/packages/react-native-bridge/index.js
+++ b/packages/react-native-bridge/index.js
@@ -202,6 +202,19 @@ export function subscribeConnectionStatus( callback ) {
 	);
 }
 
+/**
+ * Subscribes a callback function to the 'onContentUpdate' event.
+ * This event is triggered with content that will be passed to the block editor
+ * to be converted into blocks.
+ *
+ * @param {Function} callback The function to be called when the 'onContentUpdate' event is triggered.
+ *                            This function receives content plain text/markdown as an argument.
+ * @return {Object} The listener object that was added to the event.
+ */
+export function subscribeToContentUpdate( callback ) {
+	return gutenbergBridgeEvents.addListener( 'onContentUpdate', callback );
+}
+
 export function requestConnectionStatus( callback ) {
 	return RNReactNativeGutenbergBridge.requestConnectionStatus( callback );
 }
diff --git a/packages/react-native-bridge/ios/Gutenberg.swift b/packages/react-native-bridge/ios/Gutenberg.swift
index 1a3c047964679..2273801f1eeb9 100644
--- a/packages/react-native-bridge/ios/Gutenberg.swift
+++ b/packages/react-native-bridge/ios/Gutenberg.swift
@@ -144,7 +144,7 @@ public class Gutenberg: UIResponder {
         bridgeModule.sendEvent(withName: event.rawValue, body: body)
     }
 
-    public func mediaUploadUpdate(id: Int32, state: MediaUploadState, progress: Float, url: URL?, serverID: Int32?, metadata: [String: Any] = [:]) {
+    public func mediaUploadUpdate(id: Int32, state: MediaUploadState? = nil, progress: Float? = nil, url: URL?, serverID: Int32? = nil, metadata: [String: Any] = [:]) {
         mediaUpdate(event: .mediaUpload, id: id, state: state, progress: progress, url: url, serverID: serverID, metadata: metadata)
     }
 
@@ -169,8 +169,15 @@ public class Gutenberg: UIResponder {
         ])
     }
 
-    private func mediaUpdate<State: MediaState>(event: RNReactNativeGutenbergBridge.EventName, id: Int32, state: State, progress: Float, url: URL?, serverID: Int32?, metadata: [String: Any] = [:])  {
-        var data: [String: Any] = ["mediaId": id, "state": state.rawValue, "progress": progress, "metadata": metadata ];
+    private func mediaUpdate<State: MediaState>(event: RNReactNativeGutenbergBridge.EventName, id: Int32, state: State?, progress: Float?, url: URL?, serverID: Int32?, metadata: [String: Any] = [:])  {
+        var data: [String: Any] = ["mediaId": id, "metadata": metadata ];
+        
+        if let state = state {
+            data["state"] = state.rawValue
+        }
+        if let progress = progress {
+            data["progress"] = progress
+        }
         if let url = url {
             data["mediaUrl"] = url.absoluteString
         }
@@ -214,6 +221,11 @@ public class Gutenberg: UIResponder {
         var data: [String: Any] = ["isConnected": isConnected]
         bridgeModule.sendEventIfNeeded(.connectionStatusChange, body: data)
     }
+    
+    public func onContentUpdate(content: String) {
+        var payload: [String: Any] = ["content": content]
+        bridgeModule.sendEventIfNeeded(.onContentUpdate, body: payload)
+    }
 
     private func properties(from editorSettings: GutenbergEditorSettings?) -> [String : Any] {
         var settingsUpdates = [String : Any]()
diff --git a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
index aa115331ec2d8..96c3a8f25e0cb 100644
--- a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
+++ b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
@@ -422,6 +422,7 @@ extension RNReactNativeGutenbergBridge {
         case onUndoPressed
         case onRedoPressed
         case connectionStatusChange
+        case onContentUpdate
     }
 
     public override func supportedEvents() -> [String]! {
diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json
index 7fd9dff7a0f6b..0d8998c650b8f 100644
--- a/packages/react-native-bridge/package.json
+++ b/packages/react-native-bridge/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-native-bridge",
-	"version": "1.118.0",
+	"version": "1.119.0",
 	"description": "Native bridge library used to integrate the block editor into a native App.",
 	"private": true,
 	"author": "The WordPress Contributors",
@@ -17,6 +17,10 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
 	"main": "index.js",
 	"react-native": "index",
 	"dependencies": {
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
index d3e1a0a730584..beb32d70e6072 100644
--- a/packages/react-native-editor/CHANGELOG.md
+++ b/packages/react-native-editor/CHANGELOG.md
@@ -10,6 +10,12 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+-   [*] Prevent deleting content when backspacing in the first Paragraph block [#62069]
+-   [internal] Adds new bridge functionality for updating content  [#61796]
+
+## 1.119.0
+-   [internal] Remove circular dependencies within the components package [#61102]
+-   [internal] Upgrade target sdk version to Android API 34 [#61727]
 
 ## 1.118.0
 -   [*] Fix a crash when pasting file images and special comment markup [#60476]
diff --git a/packages/react-native-editor/android/app/build.gradle b/packages/react-native-editor/android/app/build.gradle
index 6f2ed72318b13..09da2a438eae1 100644
--- a/packages/react-native-editor/android/app/build.gradle
+++ b/packages/react-native-editor/android/app/build.gradle
@@ -105,7 +105,7 @@ dependencies {
 
     // Published by `wordpress-mobile/react-native-libraries-publisher`
     // See the documentation for this value in `build.gradle.kts` of `wordpress-mobile/react-native-libraries-publisher`
-    def reactNativeLibrariesPublisherVersion = "v5"
+    def reactNativeLibrariesPublisherVersion = "v6"
     def reactNativeLibrariesGroupId = "org.wordpress.react-native-libraries.$reactNativeLibrariesPublisherVersion"
     implementation "$reactNativeLibrariesGroupId:react-native-get-random-values:${extractPackageVersion(packageJson, 'react-native-get-random-values', 'dependencies')}"
     implementation "$reactNativeLibrariesGroupId:react-native-safe-area-context:${extractPackageVersion(packageJson, 'react-native-safe-area-context', 'dependencies')}"
diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock
index 9abe99edd33f1..896262f752f0c 100644
--- a/packages/react-native-editor/ios/Podfile.lock
+++ b/packages/react-native-editor/ios/Podfile.lock
@@ -13,7 +13,7 @@ PODS:
     - ReactCommon/turbomodule/core (= 0.73.3)
   - fmt (6.2.1)
   - glog (0.3.5)
-  - Gutenberg (1.118.0):
+  - Gutenberg (1.119.0):
     - React-Core (= 0.73.3)
     - React-CoreModules (= 0.73.3)
     - React-RCTImage (= 0.73.3)
@@ -912,10 +912,10 @@ PODS:
     - React-Core
   - react-native-slider (3.0.2-wp-4):
     - React-Core
-  - react-native-video (5.2.0-wp-6):
+  - react-native-video (5.2.0-wp-7):
     - React-Core
-    - react-native-video/Video (= 5.2.0-wp-6)
-  - react-native-video/Video (5.2.0-wp-6):
+    - react-native-video/Video (= 5.2.0-wp-7)
+  - react-native-video/Video (5.2.0-wp-7):
     - React-Core
   - react-native-webview (13.6.1):
     - React-Core
@@ -1109,7 +1109,7 @@ PODS:
     - React-Core
   - RNSVG (14.0.0):
     - React-Core
-  - RNTAztecView (1.118.0):
+  - RNTAztecView (1.119.0):
     - React-Core
     - WordPress-Aztec-iOS (= 1.19.11)
   - SDWebImage (5.11.1):
@@ -1343,7 +1343,7 @@ SPEC CHECKSUMS:
   FBReactNativeSpec: 73b3972e2bd20b3235ff2014f06a3d3af675ed29
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
   glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
-  Gutenberg: c0094e0fdfa895be7ad038dbb7b42dc0d21074cf
+  Gutenberg: 8f5a5b16c987c6532add8413cb3411f583f43b69
   hermes-engine: 5420539d016f368cd27e008f65f777abd6098c56
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c
@@ -1373,7 +1373,7 @@ SPEC CHECKSUMS:
   react-native-safe-area: c9cf765aa2dd96159476a99633e7d462ce5bb94f
   react-native-safe-area-context: 0ee144a6170530ccc37a0fd9388e28d06f516a89
   react-native-slider: dff0d8a46f368a8d1bacd8638570d75b9b0be400
-  react-native-video: 6dee623307ed9d04d1be2de87494f9a0fa2041d1
+  react-native-video: 6768bf960f45c24bf75d2ba68d433d3ae3829a8e
   react-native-webview: 02e4beee6b2b2b7391ee1c565788b8f8d6df9d05
   React-nativeconfig: 4662ac75a0a77789c9ed896ed77baa1a25cdf006
   React-NativeModulesApple: 92bc296f2ae166d10cb4d6a05498c80bf4ef9fa2
@@ -1402,7 +1402,7 @@ SPEC CHECKSUMS:
   RNReanimated: 6936b41d8afb97175e7c0ab40425b53103f71046
   RNScreens: 2b73f5eb2ac5d94fbd61fa4be0bfebd345716825
   RNSVG: 255767813dac22db1ec2062c8b7e7b856d4e5ae6
-  RNTAztecView: caf0e76a80867970eaa182cf9bf2d5b3c89285c5
+  RNTAztecView: c0a124a24b01a96ceeac8c0dcdc461f2d06e13f2
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json
index a682a4ae45186..710202587b55a 100644
--- a/packages/react-native-editor/package.json
+++ b/packages/react-native-editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-native-editor",
-	"version": "1.118.0",
+	"version": "1.119.0",
 	"description": "Mobile WordPress gutenberg editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,8 +23,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12",
-		"npm": ">=6.9"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "src/index.js",
 	"react-native": "src/index",
@@ -32,7 +32,7 @@
 		"@babel/runtime": "^7.20.0",
 		"@react-native-clipboard/clipboard": "1.11.2",
 		"@react-native-community/blur": "4.2.0",
-		"@react-native-community/slider": "https://raw.githubusercontent.com/wordpress-mobile/react-native-slider/v3.0.2-wp-4/react-native-community-slider-3.0.2-wp-4.tgz",
+		"@react-native-community/slider": "https://raw.githubusercontent.com/wordpress-mobile/react-native-slider/v3.0.2-wp-5/react-native-community-slider-3.0.2-wp-5.tgz",
 		"@react-native-masked-view/masked-view": "0.3.0",
 		"@react-navigation/core": "5.12.0",
 		"@react-navigation/native": "6.0.14",
@@ -69,7 +69,7 @@
 		"react-native-screens": "3.29.0",
 		"react-native-svg": "14.0.0",
 		"react-native-url-polyfill": "1.3.0",
-		"react-native-video": "https://raw.githubusercontent.com/wordpress-mobile/react-native-video/5.2.0-wp-6/react-native-video-5.2.0-wp-6.tgz",
+		"react-native-video": "https://raw.githubusercontent.com/wordpress-mobile/react-native-video/5.2.0-wp-7/react-native-video-5.2.0-wp-7.tgz",
 		"react-native-webview": "13.6.1"
 	},
 	"publishConfig": {
diff --git a/packages/react-native-editor/src/initial-html.js b/packages/react-native-editor/src/initial-html.js
index 9cf963fa7bee8..684ca0dfbf8de 100644
--- a/packages/react-native-editor/src/initial-html.js
+++ b/packages/react-native-editor/src/initial-html.js
@@ -11,7 +11,7 @@ export const textBlocks = `<!-- wp:heading -->
 <!-- /wp:heading -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First Item</li>
 <!-- /wp:list-item -->
 
diff --git a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
index 9bbb91ea1731a..121831aa851bf 100644
--- a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
+++ b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 3.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 2.41.0 (2024-05-16)
+
 ## 2.40.0 (2024-05-02)
 
 ## 2.39.0 (2024-04-19)
diff --git a/packages/readable-js-assets-webpack-plugin/README.md b/packages/readable-js-assets-webpack-plugin/README.md
index 47d75a6f00edf..eb3eda12692d2 100644
--- a/packages/readable-js-assets-webpack-plugin/README.md
+++ b/packages/readable-js-assets-webpack-plugin/README.md
@@ -14,7 +14,7 @@ Install the module
 npm install @wordpress/readable-js-assets-webpack-plugin --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It also requires webpack 4.8.3 and newer. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Usage
 
diff --git a/packages/readable-js-assets-webpack-plugin/package.json b/packages/readable-js-assets-webpack-plugin/package.json
index 50555aeb31c2b..29e3ce5562847 100644
--- a/packages/readable-js-assets-webpack-plugin/package.json
+++ b/packages/readable-js-assets-webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/readable-js-assets-webpack-plugin",
-	"version": "2.40.0",
+	"version": "3.0.0",
 	"description": "Generate a readable JS file for each JS asset.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14.0"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"index.js"
diff --git a/packages/redux-routine/CHANGELOG.md b/packages/redux-routine/CHANGELOG.md
index edd74a93b8b10..2fc48dbef1902 100644
--- a/packages/redux-routine/CHANGELOG.md
+++ b/packages/redux-routine/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.58.0 (2024-05-16)
+
 ## 4.57.0 (2024-05-02)
 
 ## 4.56.0 (2024-04-19)
diff --git a/packages/redux-routine/package.json b/packages/redux-routine/package.json
index 55b11060c2548..b423accef8f0a 100644
--- a/packages/redux-routine/package.json
+++ b/packages/redux-routine/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/redux-routine",
-	"version": "4.57.0",
+	"version": "5.0.0",
 	"description": "Redux middleware for generator coroutines.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/report-flaky-tests/package.json b/packages/report-flaky-tests/package.json
index 8766762fcc1b7..77de2a4f3ddee 100644
--- a/packages/report-flaky-tests/package.json
+++ b/packages/report-flaky-tests/package.json
@@ -20,8 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14",
-		"npm": ">=6.9"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"types": "build-types",
diff --git a/packages/reusable-blocks/CHANGELOG.md b/packages/reusable-blocks/CHANGELOG.md
index 9c8979065ea83..5a89e64ba8c46 100644
--- a/packages/reusable-blocks/CHANGELOG.md
+++ b/packages/reusable-blocks/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.35.0 (2024-05-16)
+
 ## 4.34.0 (2024-05-02)
 
 ## 4.33.0 (2024-04-19)
diff --git a/packages/reusable-blocks/package.json b/packages/reusable-blocks/package.json
index e689b414898e4..d496eded1a753 100644
--- a/packages/reusable-blocks/package.json
+++ b/packages/reusable-blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/reusable-blocks",
-	"version": "4.34.0",
+	"version": "5.0.0",
 	"description": "Reusable blocks utilities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js
index a535eade291a0..c0138517400fb 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js
@@ -36,7 +36,7 @@ function ReusableBlocksManageButton( { clientId } ) {
 				// The site editor and templates both check whether the user
 				// has edit_theme_options capabilities. We can leverage that here
 				// and omit the manage patterns link if the user can't access it.
-				managePatternsUrl: canUser( 'read', 'templates' )
+				managePatternsUrl: canUser( 'create', 'templates' )
 					? addQueryArgs( 'site-editor.php', {
 							path: '/patterns',
 					  } )
diff --git a/packages/rich-text/CHANGELOG.md b/packages/rich-text/CHANGELOG.md
index efedffb9ed2a5..1fae202db5fc0 100644
--- a/packages/rich-text/CHANGELOG.md
+++ b/packages/rich-text/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 7.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 6.35.0 (2024-05-16)
+
 ## 6.34.0 (2024-05-02)
 
 ## 6.33.0 (2024-04-19)
diff --git a/packages/rich-text/package.json b/packages/rich-text/package.json
index c2699343a1b51..c823d1018009f 100644
--- a/packages/rich-text/package.json
+++ b/packages/rich-text/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/rich-text",
-	"version": "6.34.0",
+	"version": "7.0.0",
 	"description": "Rich text value and manipulation API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/router/CHANGELOG.md b/packages/router/CHANGELOG.md
index ac5382fd7d3f5..b05dda0cca2b2 100644
--- a/packages/router/CHANGELOG.md
+++ b/packages/router/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 1.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 0.27.0 (2024-05-16)
+
 ## 0.26.0 (2024-05-02)
 
 ## 0.25.0 (2024-04-19)
diff --git a/packages/router/package.json b/packages/router/package.json
index f6792e935a043..2b0f84aac06cc 100644
--- a/packages/router/package.json
+++ b/packages/router/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/router",
-	"version": "0.26.0",
+	"version": "1.0.0",
 	"description": "Router API for WordPress pages.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/router/src/history.js b/packages/router/src/history.js
index df0e2b219cfce..3a04745923a81 100644
--- a/packages/router/src/history.js
+++ b/packages/router/src/history.js
@@ -13,17 +13,49 @@ const history = createBrowserHistory();
 const originalHistoryPush = history.push;
 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 ) {
+	if ( params.hasOwnProperty( 'wp_theme_preview' ) ) {
+		return params;
+	}
+	const currentSearch = new URLSearchParams( history.location.search );
+	const currentThemePreview = currentSearch.get( 'wp_theme_preview' );
+	if ( currentThemePreview === null ) {
+		return params;
+	}
+	return { ...params, wp_theme_preview: currentThemePreview };
+}
+
 function push( params, state ) {
-	const search = buildQueryString( params );
+	const search = buildQueryString( preserveThemePreview( params ) );
 	return originalHistoryPush.call( history, { search }, state );
 }
 
 function replace( params, state ) {
-	const search = buildQueryString( params );
+	const search = buildQueryString( preserveThemePreview( params ) );
 	return originalHistoryReplace.call( history, { search }, state );
 }
 
+const locationMemo = new WeakMap();
+function getLocationWithParams() {
+	const location = history.location;
+	let locationWithParams = locationMemo.get( location );
+	if ( ! locationWithParams ) {
+		locationWithParams = {
+			...location,
+			params: Object.fromEntries(
+				new URLSearchParams( location.search )
+			),
+		};
+		locationMemo.set( location, locationWithParams );
+	}
+	return locationWithParams;
+}
+
 history.push = push;
 history.replace = replace;
+history.getLocationWithParams = getLocationWithParams;
 
 export default history;
diff --git a/packages/router/src/router.js b/packages/router/src/router.js
index e5449cef54c6a..55807175a5bdd 100644
--- a/packages/router/src/router.js
+++ b/packages/router/src/router.js
@@ -3,9 +3,8 @@
  */
 import {
 	createContext,
-	useState,
-	useEffect,
 	useContext,
+	useSyncExternalStore,
 } from '@wordpress/element';
 
 /**
@@ -24,25 +23,13 @@ export function useHistory() {
 	return useContext( HistoryContext );
 }
 
-function getLocationWithParams( location ) {
-	const searchParams = new URLSearchParams( location.search );
-	return {
-		...location,
-		params: Object.fromEntries( searchParams.entries() ),
-	};
-}
-
 export function RouterProvider( { children } ) {
-	const [ location, setLocation ] = useState( () =>
-		getLocationWithParams( history.location )
+	const location = useSyncExternalStore(
+		history.listen,
+		history.getLocationWithParams,
+		history.getLocationWithParams
 	);
 
-	useEffect( () => {
-		return history.listen( ( { location: updatedLocation } ) => {
-			setLocation( getLocationWithParams( updatedLocation ) );
-		} );
-	}, [] );
-
 	return (
 		<HistoryContext.Provider value={ history }>
 			<RoutesContext.Provider value={ location }>
diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
index 36c3450f4e8c6..470929fd0628a 100644
--- a/packages/scripts/CHANGELOG.md
+++ b/packages/scripts/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 ## Unreleased
 
+## 28.0.0 (2024-05-31)
+
+### Breaking Changes
+
+**Note** If you're using @wordpress/scripts for building JS scripts to target WordPress 6.5 or earlier, you should not upgrade to this version and continue using @wordpress/scripts@27.
+
+-   Use React's automatic runtime to transform JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)). 
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 27.9.0 (2024-05-16)
+
+### New Features
+
+-   Add RTL support when building CSS styles with `build` and `start` scripts ([#61540](https://github.com/WordPress/gutenberg/pull/61540)).
+
 ## 27.8.0 (2024-05-02)
 
 ## 27.7.0 (2024-04-19)
@@ -334,7 +350,7 @@
 ### New Features
 
 -   Added a new `plugin-zip` command to create a zip file for a WordPress plugin ([#37687](https://github.com/WordPress/gutenberg/pull/37687)).
--   Added optional support for React Fast Refresh in the `start` command. It can be activated with `--hot` CLI argument ([#28273](https://github.com/WordPress/gutenberg/pull/28273)). For now, it requires that WordPress has the [`SCRIPT_DEBUG`](https://wordpress.org/documentation/article/debugging-in-wordpress/#script_debug) flag enabled and the [Gutenberg](https://wordpress.org/plugins/gutenberg/) plugin installed.
+-   Added optional support for React Fast Refresh in the `start` command. It can be activated with `--hot` CLI argument ([#28273](https://github.com/WordPress/gutenberg/pull/28273)). For now, it requires that WordPress has the [`SCRIPT_DEBUG`](https://developer.wordpress.org/advanced-administration/debug/debug-wordpress/#script_debug) flag enabled and the [Gutenberg](https://wordpress.org/plugins/gutenberg/) plugin installed.
 -   Automatically copy `block.json` files located in the `src` folder and its subfolders to the output folder (`build` by default) ([#37612](https://github.com/WordPress/gutenberg/pull/37612)).
 -   Scan the `src` directory for `block.json` files to detect defined scripts to use them as entry points with the `start` and `build` commands. ([#37661](https://github.com/WordPress/gutenberg/pull/37661)).
 
diff --git a/packages/scripts/README.md b/packages/scripts/README.md
index 4a3c037ce78f9..af892293e00eb 100644
--- a/packages/scripts/README.md
+++ b/packages/scripts/README.md
@@ -16,7 +16,7 @@ You only need to install one npm module:
 npm install @wordpress/scripts --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later, and `npm` 6.14.4 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Setup
 
@@ -387,7 +387,7 @@ This is how you execute the script with presented setup:
 
 This script automatically use the optimized config but sometimes you may want to specify some custom options:
 
--   `--hot` – enables "Fast Refresh". The page will automatically reload if you make changes to the code. _For now, it requires that WordPress has the [`SCRIPT_DEBUG`](https://wordpress.org/documentation/article/debugging-in-wordpress/#script_debug) flag enabled and the [Gutenberg](https://wordpress.org/plugins/gutenberg/) plugin installed._
+-   `--hot` – enables "Fast Refresh". The page will automatically reload if you make changes to the code. _For now, it requires that WordPress has the [`SCRIPT_DEBUG`](https://developer.wordpress.org/advanced-administration/debug/debug-wordpress/#script_debug) flag enabled and the [Gutenberg](https://wordpress.org/plugins/gutenberg/) plugin installed._
 -   `--no-watch` – Starts the build for development without starting the watcher.
 -   `--webpack-bundle-analyzer` – enables visualization for the size of webpack output files with an interactive zoomable treemap.
 -   `--webpack-copy-php` – enables copying all PHP files from the source directory ( default is `src` ) and its subfolders to the output directory.
diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js
index 386cc1be49d40..f306fbd54a8a6 100644
--- a/packages/scripts/config/webpack.config.js
+++ b/packages/scripts/config/webpack.config.js
@@ -9,6 +9,7 @@ const browserslist = require( 'browserslist' );
 const MiniCSSExtractPlugin = require( 'mini-css-extract-plugin' );
 const { basename, dirname, resolve } = require( 'path' );
 const ReactRefreshWebpackPlugin = require( '@pmmmwh/react-refresh-webpack-plugin' );
+const RtlCssPlugin = require( 'rtlcss-webpack-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 const { realpathSync } = require( 'fs' );
 const { sync: glob } = require( 'fast-glob' );
@@ -306,7 +307,8 @@ const scriptConfig = {
 	plugins: [
 		new webpack.DefinePlugin( {
 			// Inject the `SCRIPT_DEBUG` global, used for development features flagging.
-			SCRIPT_DEBUG: ! isProduction,
+			'globalThis.SCRIPT_DEBUG': JSON.stringify( ! isProduction ),
+			SCRIPT_DEBUG: JSON.stringify( ! isProduction ),
 		} ),
 
 		// If we run a modules build, the 2 compilations can "clean" each other's output
@@ -382,6 +384,10 @@ const scriptConfig = {
 		process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(),
 		// MiniCSSExtractPlugin to extract the CSS thats gets imported into JavaScript.
 		new MiniCSSExtractPlugin( { filename: '[name].css' } ),
+		// RtlCssPlugin to generate RTL CSS files.
+		new RtlCssPlugin( {
+			filename: `[name]-rtl.css`,
+		} ),
 		// React Fast Refresh.
 		hasReactFastRefresh && new ReactRefreshWebpackPlugin(),
 		// WP_NO_EXTERNALS global variable controls whether scripts' assets get
@@ -451,7 +457,8 @@ if ( hasExperimentalModulesFlag ) {
 		plugins: [
 			new webpack.DefinePlugin( {
 				// Inject the `SCRIPT_DEBUG` global, used for development features flagging.
-				SCRIPT_DEBUG: ! isProduction,
+				'globalThis.SCRIPT_DEBUG': JSON.stringify( ! isProduction ),
+				SCRIPT_DEBUG: JSON.stringify( ! isProduction ),
 			} ),
 			// The WP_BUNDLE_ANALYZER global variable enables a utility that represents
 			// bundle content as a convenient interactive zoomable treemap.
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index 4a3f319525a72..6fe707ec9571c 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/scripts",
-	"version": "27.8.0",
+	"version": "28.0.0",
 	"description": "Collection of reusable scripts for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,8 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=18",
-		"npm": ">=6.14.4"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"bin",
@@ -79,6 +79,7 @@
 		"react-refresh": "^0.14.0",
 		"read-pkg-up": "^7.0.1",
 		"resolve-bin": "^0.4.0",
+		"rtlcss-webpack-plugin": "^4.0.7",
 		"sass": "^1.35.2",
 		"sass-loader": "^12.1.0",
 		"source-map-loader": "^3.0.0",
diff --git a/packages/server-side-render/CHANGELOG.md b/packages/server-side-render/CHANGELOG.md
index 9afdf03bbeef0..23d8b8aa75353 100644
--- a/packages/server-side-render/CHANGELOG.md
+++ b/packages/server-side-render/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.35.0 (2024-05-16)
+
 ## 4.34.0 (2024-05-02)
 
 ## 4.33.0 (2024-04-19)
diff --git a/packages/server-side-render/package.json b/packages/server-side-render/package.json
index f05ba204ecd35..e1d3d95e39a23 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": "4.34.0",
+	"version": "5.0.0",
 	"description": "The component used with WordPress to server-side render a preview of dynamic blocks to display in the editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/server-side-render/src/server-side-render.js b/packages/server-side-render/src/server-side-render.js
index 69a2183036dd1..45a651e8cced6 100644
--- a/packages/server-side-render/src/server-side-render.js
+++ b/packages/server-side-render/src/server-side-render.js
@@ -98,7 +98,7 @@ export default function ServerSideRender( props ) {
 		LoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,
 	} = props;
 
-	const isMountedRef = useRef( true );
+	const isMountedRef = useRef( false );
 	const [ showLoader, setShowLoader ] = useState( false );
 	const fetchRequestRef = useRef();
 	const [ response, setResponse ] = useState( null );
@@ -112,6 +112,11 @@ export default function ServerSideRender( props ) {
 
 		setIsLoading( true );
 
+		// Schedule showing the Spinner after 1 second.
+		const timeout = setTimeout( () => {
+			setShowLoader( true );
+		}, 1000 );
+
 		let sanitizedAttributes =
 			attributes &&
 			__experimentalSanitizeBlockAttributes( block, attributes );
@@ -165,6 +170,9 @@ export default function ServerSideRender( props ) {
 					fetchRequest === fetchRequestRef.current
 				) {
 					setIsLoading( false );
+					// Cancel the timeout to show the Spinner.
+					setShowLoader( false );
+					clearTimeout( timeout );
 				}
 			} ) );
 
@@ -175,12 +183,12 @@ export default function ServerSideRender( props ) {
 
 	// When the component unmounts, set isMountedRef to false. This will
 	// let the async fetch callbacks know when to stop.
-	useEffect(
-		() => () => {
+	useEffect( () => {
+		isMountedRef.current = true;
+		return () => {
 			isMountedRef.current = false;
-		},
-		[]
-	);
+		};
+	}, [] );
 
 	useEffect( () => {
 		// Don't debounce the first fetch. This ensures that the first render
@@ -192,21 +200,6 @@ export default function ServerSideRender( props ) {
 		}
 	} );
 
-	/**
-	 * Effect to handle showing the loading placeholder.
-	 * Show it only if there is no previous response or
-	 * the request takes more than one second.
-	 */
-	useEffect( () => {
-		if ( ! isLoading ) {
-			return;
-		}
-		const timeout = setTimeout( () => {
-			setShowLoader( true );
-		}, 1000 );
-		return () => clearTimeout( timeout );
-	}, [ isLoading ] );
-
 	const hasResponse = !! response;
 	const hasEmptyResponse = response === '';
 	const hasError = response?.error;
diff --git a/packages/shortcode/CHANGELOG.md b/packages/shortcode/CHANGELOG.md
index ac6dbcdf8d9af..bcb92c69a7ef4 100644
--- a/packages/shortcode/CHANGELOG.md
+++ b/packages/shortcode/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
 ## 3.57.0 (2024-05-02)
 
 ## 3.56.0 (2024-04-19)
diff --git a/packages/shortcode/package.json b/packages/shortcode/package.json
index f46873ffe3dd1..baeb4000c0420 100644
--- a/packages/shortcode/package.json
+++ b/packages/shortcode/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/shortcode",
-	"version": "3.57.0",
+	"version": "4.0.0",
 	"description": "Shortcode module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/style-engine/CHANGELOG.md b/packages/style-engine/CHANGELOG.md
index 9e5765484b3fe..006fc960398b6 100644
--- a/packages/style-engine/CHANGELOG.md
+++ b/packages/style-engine/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 2.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 1.41.0 (2024-05-16)
+
 ## 1.40.0 (2024-05-02)
 
 ## 1.39.0 (2024-04-19)
@@ -41,6 +49,7 @@
 ## 1.22.0 (2023-08-10)
 
 ### Bug Fixes
+
 -   Style engine: switch off optimize by default [#53085](https://github.com/WordPress/gutenberg/pull/53085).
 
 ## 1.21.0 (2023-07-20)
@@ -82,24 +91,29 @@
 ## 1.3.0 (2022-10-19)
 
 ### Internal
+
 -   Style Engine: move PHP unit tests to Gutenberg [#44722](https://github.com/WordPress/gutenberg/pull/44722)
 
 ## 1.2.0 (2022-10-05)
 
 ### Internal
+
 -   Script loader: remove 6.1 wp actions ([#44519](https://github.com/WordPress/gutenberg/pull/44519))
 
 ## 1.1.0 (2022-09-21)
 
 ### Enhancement
+
 -   Allow for prettified output ([#42909](https://github.com/WordPress/gutenberg/pull/42909)).
 -   Enqueue block supports styles in Gutenberg ([#42880](https://github.com/WordPress/gutenberg/pull/42880)).
 
 ### Internal
+
 -   Move backend scripts to package ([#39736](https://github.com/WordPress/gutenberg/pull/39736)).
 -   Updating docs, formatting, and separating global functions from the main class file ([#43840](https://github.com/WordPress/gutenberg/pull/43840)).
 
 ### New Features
+
 -   Add a WP_Style_Engine_Processor object ([#42463](https://github.com/WordPress/gutenberg/pull/42463)).
 -   Add a WP_Style_Engine_CSS_Declarations object ([#42043](https://github.com/WordPress/gutenberg/pull/42043)).
 -   Add Rules and Store objects ([#42222](https://github.com/WordPress/gutenberg/pull/42222)).
diff --git a/packages/style-engine/package.json b/packages/style-engine/package.json
index 2bc1a4d3ad3af..9ebe2800e1b41 100644
--- a/packages/style-engine/package.json
+++ b/packages/style-engine/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/style-engine",
-	"version": "1.40.0",
+	"version": "2.0.0",
 	"description": "A suite of parsers and compilers for WordPress styles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/style-engine/src/styles/background/index.ts b/packages/style-engine/src/styles/background/index.ts
index 748cb15b4f309..6e79636cfda12 100644
--- a/packages/style-engine/src/styles/background/index.ts
+++ b/packages/style-engine/src/styles/background/index.ts
@@ -8,11 +8,7 @@ const backgroundImage = {
 	name: 'backgroundImage',
 	generate: ( style: Style, options: StyleOptions ) => {
 		const _backgroundImage = style?.background?.backgroundImage;
-		if (
-			typeof _backgroundImage === 'object' &&
-			_backgroundImage?.source === 'file' &&
-			_backgroundImage?.url
-		) {
+		if ( typeof _backgroundImage === 'object' && _backgroundImage?.url ) {
 			return [
 				{
 					selector: options.selector,
@@ -43,7 +39,7 @@ const backgroundImage = {
 };
 
 const backgroundPosition = {
-	name: 'backgroundRepeat',
+	name: 'backgroundPosition',
 	generate: ( style: Style, options: StyleOptions ) => {
 		return generateRule(
 			style,
diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js
index 5869c4a349baa..fbccc8c48bc92 100644
--- a/packages/style-engine/src/test/index.js
+++ b/packages/style-engine/src/test/index.js
@@ -226,7 +226,6 @@ describe( 'getCSSRules', () => {
 				{
 					background: {
 						backgroundImage: {
-							source: 'file',
 							url: 'https://example.com/image.jpg',
 						},
 						backgroundPosition: '50% 50%',
diff --git a/packages/stylelint-config/CHANGELOG.md b/packages/stylelint-config/CHANGELOG.md
index d047af1a0d1fa..9c26f9efa6e03 100644
--- a/packages/stylelint-config/CHANGELOG.md
+++ b/packages/stylelint-config/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 22.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 21.41.0 (2024-05-16)
+
 ## 21.40.0 (2024-05-02)
 
 ## 21.39.0 (2024-04-19)
diff --git a/packages/stylelint-config/README.md b/packages/stylelint-config/README.md
index 0e52e5ef190a4..c6d69a9d18348 100644
--- a/packages/stylelint-config/README.md
+++ b/packages/stylelint-config/README.md
@@ -8,7 +8,7 @@
 $ npm install @wordpress/stylelint-config --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Usage
 
diff --git a/packages/stylelint-config/package.json b/packages/stylelint-config/package.json
index 348e4aaa7081c..dbb0a0899b726 100644
--- a/packages/stylelint-config/package.json
+++ b/packages/stylelint-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/stylelint-config",
-	"version": "21.40.0",
+	"version": "22.0.0",
 	"description": "stylelint config for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "MIT",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"CHANGELOG.md",
diff --git a/packages/sync/CHANGELOG.md b/packages/sync/CHANGELOG.md
index 40eec505ecabf..b4c3d77014218 100644
--- a/packages/sync/CHANGELOG.md
+++ b/packages/sync/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 1.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 0.20.0 (2024-05-16)
+
 ## 0.19.0 (2024-05-02)
 
 ## 0.18.0 (2024-04-19)
diff --git a/packages/sync/package.json b/packages/sync/package.json
index 1e0ecd080bdb4..3bda7acb0e118 100644
--- a/packages/sync/package.json
+++ b/packages/sync/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/sync",
-	"version": "0.19.0",
+	"version": "1.0.0",
 	"description": "Sync Data.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/token-list/CHANGELOG.md b/packages/token-list/CHANGELOG.md
index 0f3bf88de1ea8..3cd9c7e7aa592 100644
--- a/packages/token-list/CHANGELOG.md
+++ b/packages/token-list/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 3.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 2.58.0 (2024-05-16)
+
 ## 2.57.0 (2024-05-02)
 
 ## 2.56.0 (2024-04-19)
diff --git a/packages/token-list/package.json b/packages/token-list/package.json
index ee668aa42d174..ee46c9f269c47 100644
--- a/packages/token-list/package.json
+++ b/packages/token-list/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/token-list",
-	"version": "2.57.0",
+	"version": "3.0.0",
 	"description": "Constructable, plain JavaScript DOMTokenList implementation, supporting non-browser runtimes.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/undo-manager/CHANGELOG.md b/packages/undo-manager/CHANGELOG.md
index dcb2aec414eb8..36e815bbe8e2b 100644
--- a/packages/undo-manager/CHANGELOG.md
+++ b/packages/undo-manager/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 1.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 0.18.0 (2024-05-16)
+
 ## 0.17.0 (2024-05-02)
 
 ## 0.16.0 (2024-04-19)
@@ -33,4 +41,3 @@
 ## 0.3.0 (2023-10-05)
 
 ## 0.2.0 (2023-09-20)
-
diff --git a/packages/undo-manager/package.json b/packages/undo-manager/package.json
index c4451c4e8e8eb..ed4f4a8e6b920 100644
--- a/packages/undo-manager/package.json
+++ b/packages/undo-manager/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/undo-manager",
-	"version": "0.17.0",
+	"version": "1.0.0",
 	"description": "A small package to manage undo/redo.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/url/CHANGELOG.md b/packages/url/CHANGELOG.md
index a38a519793b09..172f881f36922 100644
--- a/packages/url/CHANGELOG.md
+++ b/packages/url/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.59.0 (2024-05-16)
+
 ## 3.58.0 (2024-05-02)
 
 ## 3.57.0 (2024-04-19)
diff --git a/packages/url/package.json b/packages/url/package.json
index 1c66d29339f51..89d3e67325489 100644
--- a/packages/url/package.json
+++ b/packages/url/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/url",
-	"version": "3.58.0",
+	"version": "4.0.0",
 	"description": "WordPress URL utilities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/viewport/CHANGELOG.md b/packages/viewport/CHANGELOG.md
index 714bc63ed8338..7f3e15b09fc54 100644
--- a/packages/viewport/CHANGELOG.md
+++ b/packages/viewport/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 6.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 5.35.0 (2024-05-16)
+
 ## 5.34.0 (2024-05-02)
 
 ## 5.33.0 (2024-04-19)
diff --git a/packages/viewport/package.json b/packages/viewport/package.json
index 14d3a30fa6eda..fe54fccb2ca49 100644
--- a/packages/viewport/package.json
+++ b/packages/viewport/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/viewport",
-	"version": "5.34.0",
+	"version": "6.0.0",
 	"description": "Viewport module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/warning/CHANGELOG.md b/packages/warning/CHANGELOG.md
index 907eea36c141d..cfc8338f86c59 100644
--- a/packages/warning/CHANGELOG.md
+++ b/packages/warning/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 ## Unreleased
 
+## 3.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 2.58.0 (2024-05-16)
+
 ## 2.57.0 (2024-05-02)
 
 ## 2.56.0 (2024-04-19)
diff --git a/packages/warning/babel-plugin.js b/packages/warning/babel-plugin.js
index 02c466b5de24e..3cf32d311bd6c 100644
--- a/packages/warning/babel-plugin.js
+++ b/packages/warning/babel-plugin.js
@@ -14,24 +14,15 @@ const pkg = require( './package.json' );
 function babelPlugin( { types: t } ) {
 	const seen = Symbol();
 
-	const typeofProcessExpression = t.binaryExpression(
-		'!==',
-		t.unaryExpression( 'typeof', t.identifier( 'SCRIPT_DEBUG' ), false ),
-		t.stringLiteral( 'undefined' )
-	);
-
 	const scriptDebugCheckExpression = t.binaryExpression(
 		'===',
-		t.identifier( 'SCRIPT_DEBUG' ),
+		t.memberExpression(
+			t.identifier( 'globalThis' ),
+			t.identifier( 'SCRIPT_DEBUG' )
+		),
 		t.booleanLiteral( true )
 	);
 
-	const logicalExpression = t.logicalExpression(
-		'&&',
-		typeofProcessExpression,
-		scriptDebugCheckExpression
-	);
-
 	return {
 		visitor: {
 			ImportDeclaration( path, state ) {
@@ -70,7 +61,7 @@ function babelPlugin( { types: t } ) {
 					node[ seen ] = true;
 					path.replaceWith(
 						t.ifStatement(
-							logicalExpression,
+							scriptDebugCheckExpression,
 							t.blockStatement( [
 								t.expressionStatement( node ),
 							] )
diff --git a/packages/warning/package.json b/packages/warning/package.json
index 5fb37d69369bc..6052f207b0d3f 100644
--- a/packages/warning/package.json
+++ b/packages/warning/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/warning",
-	"version": "2.57.0",
+	"version": "3.0.0",
 	"description": "Warning utility for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/packages/warning/src/index.js b/packages/warning/src/index.js
index 89ce71db112a2..5744e99d94fd2 100644
--- a/packages/warning/src/index.js
+++ b/packages/warning/src/index.js
@@ -4,7 +4,8 @@
 import { logged } from './utils';
 
 function isDev() {
-	return typeof SCRIPT_DEBUG !== 'undefined' && SCRIPT_DEBUG === true;
+	// eslint-disable-next-line @wordpress/wp-global-usage
+	return globalThis.SCRIPT_DEBUG === true;
 }
 
 /**
diff --git a/packages/warning/src/test/index.js b/packages/warning/src/test/index.js
index a32e5f1e0fae4..5fdf67b05360c 100644
--- a/packages/warning/src/test/index.js
+++ b/packages/warning/src/test/index.js
@@ -4,28 +4,31 @@
 import warning from '..';
 import { logged } from '../utils';
 
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable @wordpress/wp-global-usage */
+
 describe( 'warning', () => {
-	const initialScriptDebug = global.SCRIPT_DEBUG;
+	const initialScriptDebug = globalThis.SCRIPT_DEBUG;
 
 	afterEach( () => {
-		global.SCRIPT_DEBUG = initialScriptDebug;
+		globalThis.SCRIPT_DEBUG = initialScriptDebug;
 		logged.clear();
 	} );
 
 	it( 'logs to console.warn when SCRIPT_DEBUG is set to `true`', () => {
-		global.SCRIPT_DEBUG = true;
+		globalThis.SCRIPT_DEBUG = true;
 		warning( 'warning' );
 		expect( console ).toHaveWarnedWith( 'warning' );
 	} );
 
 	it( 'does not log to console.warn if SCRIPT_DEBUG not set to `true`', () => {
-		global.SCRIPT_DEBUG = false;
+		globalThis.SCRIPT_DEBUG = false;
 		warning( 'warning' );
 		expect( console ).not.toHaveWarned();
 	} );
 
 	it( 'should show a message once', () => {
-		global.SCRIPT_DEBUG = true;
+		globalThis.SCRIPT_DEBUG = true;
 		warning( 'warning' );
 		warning( 'warning' );
 
diff --git a/packages/warning/test/babel-plugin.js b/packages/warning/test/babel-plugin.js
index a3c4bd55745ef..c845d79d700ca 100644
--- a/packages/warning/test/babel-plugin.js
+++ b/packages/warning/test/babel-plugin.js
@@ -28,7 +28,7 @@ describe( 'babel-plugin', () => {
 		);
 		const expected = join(
 			'import warning from "@wordpress/warning";',
-			'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warning("a") : void 0;'
+			'globalThis.SCRIPT_DEBUG === true ? warning("a") : void 0;'
 		);
 
 		expect( transformCode( input ) ).toEqual( expected );
@@ -45,7 +45,7 @@ describe( 'babel-plugin', () => {
 		const input = 'warning("a");';
 		const options = { callee: 'warning' };
 		const expected =
-			'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warning("a") : void 0;';
+			'globalThis.SCRIPT_DEBUG === true ? warning("a") : void 0;';
 
 		expect( transformCode( input, options ) ).toEqual( expected );
 	} );
@@ -59,9 +59,9 @@ describe( 'babel-plugin', () => {
 		);
 		const expected = join(
 			'import warning from "@wordpress/warning";',
-			'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warning("a") : void 0;',
-			'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warning("b") : void 0;',
-			'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warning("c") : void 0;'
+			'globalThis.SCRIPT_DEBUG === true ? warning("a") : void 0;',
+			'globalThis.SCRIPT_DEBUG === true ? warning("b") : void 0;',
+			'globalThis.SCRIPT_DEBUG === true ? warning("c") : void 0;'
 		);
 
 		expect( transformCode( input ) ).toEqual( expected );
@@ -76,9 +76,9 @@ describe( 'babel-plugin', () => {
 		);
 		const expected = join(
 			'import warn from "@wordpress/warning";',
-			'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warn("a") : void 0;',
-			'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warn("b") : void 0;',
-			'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warn("c") : void 0;'
+			'globalThis.SCRIPT_DEBUG === true ? warn("a") : void 0;',
+			'globalThis.SCRIPT_DEBUG === true ? warn("b") : void 0;',
+			'globalThis.SCRIPT_DEBUG === true ? warn("c") : void 0;'
 		);
 
 		expect( transformCode( input ) ).toEqual( expected );
@@ -93,9 +93,9 @@ describe( 'babel-plugin', () => {
 		);
 		const expected = join(
 			'import warn from "@wordpress/warning";',
-			'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warn("a") : void 0;',
-			'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warn("b") : void 0;',
-			'typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warn("c") : void 0;'
+			'globalThis.SCRIPT_DEBUG === true ? warn("a") : void 0;',
+			'globalThis.SCRIPT_DEBUG === true ? warn("b") : void 0;',
+			'globalThis.SCRIPT_DEBUG === true ? warn("c") : void 0;'
 		);
 
 		expect( transformCode( input ) ).toEqual( expected );
diff --git a/packages/widgets/CHANGELOG.md b/packages/widgets/CHANGELOG.md
index 873f229c779c2..3b318660859eb 100644
--- a/packages/widgets/CHANGELOG.md
+++ b/packages/widgets/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.35.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
 ## 3.34.0 (2024-05-02)
 
 ## 3.33.0 (2024-04-19)
diff --git a/packages/widgets/package.json b/packages/widgets/package.json
index 3cc7ad8de3b27..cbbc3a928b9b4 100644
--- a/packages/widgets/package.json
+++ b/packages/widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/widgets",
-	"version": "3.34.0",
+	"version": "4.0.0",
 	"description": "Functionality used by the widgets block editor in the Widgets screen and the Customizer.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -16,6 +16,10 @@
 	"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",
@@ -32,7 +36,7 @@
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/notices": "file:../notices",
-		"classnames": "^2.3.1"
+		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
diff --git a/packages/widgets/src/blocks/legacy-widget/edit/form.js b/packages/widgets/src/blocks/legacy-widget/edit/form.js
index 3d0a1026db706..1a6572e727c93 100644
--- a/packages/widgets/src/blocks/legacy-widget/edit/form.js
+++ b/packages/widgets/src/blocks/legacy-widget/edit/form.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -92,7 +92,7 @@ export default function Form( {
 	if ( isWide && isMediumLargeViewport ) {
 		return (
 			<div
-				className={ classnames( {
+				className={ clsx( {
 					'wp-block-legacy-widget__container': isVisible,
 				} ) }
 			>
diff --git a/packages/widgets/src/blocks/legacy-widget/edit/index.js b/packages/widgets/src/blocks/legacy-widget/edit/index.js
index cb0b993376668..f371786c106d6 100644
--- a/packages/widgets/src/blocks/legacy-widget/edit/index.js
+++ b/packages/widgets/src/blocks/legacy-widget/edit/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -35,7 +35,7 @@ export default function Edit( props ) {
 	const { isWide = false } = props;
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			'is-wide-widget': isWide,
 		} ),
 	} );
diff --git a/packages/widgets/src/blocks/legacy-widget/edit/preview.js b/packages/widgets/src/blocks/legacy-widget/edit/preview.js
index a23e046572ce3..92388e5e54f3f 100644
--- a/packages/widgets/src/blocks/legacy-widget/edit/preview.js
+++ b/packages/widgets/src/blocks/legacy-widget/edit/preview.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -113,12 +113,9 @@ export default function Preview( { idBase, instance, isVisible } ) {
 				</Placeholder>
 			) }
 			<div
-				className={ classnames(
-					'wp-block-legacy-widget__edit-preview',
-					{
-						'is-offscreen': ! isVisible || ! isLoaded,
-					}
-				) }
+				className={ clsx( 'wp-block-legacy-widget__edit-preview', {
+					'is-offscreen': ! isVisible || ! isLoaded,
+				} ) }
 			>
 				<Disabled>
 					{ /*
diff --git a/packages/widgets/src/blocks/legacy-widget/index.php b/packages/widgets/src/blocks/legacy-widget/index.php
index 24ea288be3875..ee13ae9a1c612 100644
--- a/packages/widgets/src/blocks/legacy-widget/index.php
+++ b/packages/widgets/src/blocks/legacy-widget/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the 'core/legacy-widget' block.
  *
+ * @since 5.8.0
+ *
  * @global int $wp_widget_factory.
  *
  * @param array $attributes The block attributes.
@@ -56,6 +58,8 @@ function render_block_core_legacy_widget( $attributes ) {
 
 /**
  * Registers the 'core/legacy-widget' block.
+ *
+ * @since 5.8.0
  */
 function register_block_core_legacy_widget() {
 	register_block_type_from_metadata(
@@ -72,6 +76,8 @@ function register_block_core_legacy_widget() {
  * Intercepts any request with legacy-widget-preview in the query param and, if
  * set, renders a page containing a preview of the requested Legacy Widget
  * block.
+ *
+ * @since 5.8.0
  */
 function handle_legacy_widget_preview_iframe() {
 	if ( empty( $_GET['legacy-widget-preview'] ) ) {
diff --git a/packages/widgets/src/blocks/widget-group/index.php b/packages/widgets/src/blocks/widget-group/index.php
index 284ca66a85ce7..e8769612a2f17 100644
--- a/packages/widgets/src/blocks/widget-group/index.php
+++ b/packages/widgets/src/blocks/widget-group/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the 'core/widget-group' block.
  *
+ * @since 5.9.0
+ *
  * @global array      $wp_registered_sidebars
  * @global int|string $_sidebar_being_rendered
  *
@@ -45,6 +47,8 @@ function render_block_core_widget_group( $attributes, $content, $block ) {
 
 /**
  * Registers the 'core/widget-group' block.
+ *
+ * @since 5.9.0
  */
 function register_block_core_widget_group() {
 	register_block_type_from_metadata(
@@ -62,6 +66,8 @@ function register_block_core_widget_group() {
  * it. This lets us get to the current sidebar in
  * render_block_core_widget_group().
  *
+ * @since 5.9.0
+ *
  * @global int|string $_sidebar_being_rendered
  *
  * @param int|string $index       Index, name, or ID of the dynamic sidebar.
@@ -76,6 +82,8 @@ function note_sidebar_being_rendered( $index ) {
  * Clear whatever we set in note_sidebar_being_rendered() after WordPress
  * finishes rendering a sidebar.
  *
+ * @since 5.9.0
+ *
  * @global int|string $_sidebar_being_rendered
  */
 function discard_sidebar_being_rendered() {
diff --git a/packages/wordcount/CHANGELOG.md b/packages/wordcount/CHANGELOG.md
index 6eb47895e4161..73042aef093a3 100644
--- a/packages/wordcount/CHANGELOG.md
+++ b/packages/wordcount/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
 ## 3.57.0 (2024-05-02)
 
 ## 3.56.0 (2024-04-19)
diff --git a/packages/wordcount/package.json b/packages/wordcount/package.json
index a412ddae0f756..4bbda336f2eb7 100644
--- a/packages/wordcount/package.json
+++ b/packages/wordcount/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/wordcount",
-	"version": "3.57.0",
+	"version": "4.0.0",
 	"description": "WordPress word count utility.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
diff --git a/patches/README.md b/patches/README.md
new file mode 100644
index 0000000000000..8149c96950057
--- /dev/null
+++ b/patches/README.md
@@ -0,0 +1,31 @@
+# Dependency patches
+
+Sometimes there are problems with dependencies that can be solved by patching them. Gutenberg uses
+[`patch-package`](https://www.npmjs.com/package/patch-package) to patch npm dependencies when
+they're installed.
+
+Existing patches should be described and justified here.
+
+## Patches
+
+### `patches/lighthouse+10.4.0.patch`
+
+No notes.
+
+### `patches/react-autosize-textarea+7.1.0.patch`
+
+This package is unmaintained. It's incompatible with some recent versions of React types in ways
+that are mostly harmless.
+
+The `onPointerEnterCapture` and `onPointerLeaveCapture` events were removed. The package is patched
+to remove those events as well.
+
+See https://github.com/facebook/react/pull/17883.
+
+### `patches/react-devtools-core+4.28.5.patch`
+
+No notes.
+
+### `patches/react-native+0.73.3.patch`
+
+No notes.
diff --git a/patches/react-autosize-textarea+7.1.0.patch b/patches/react-autosize-textarea+7.1.0.patch
new file mode 100644
index 0000000000000..7d67e58fd5fab
--- /dev/null
+++ b/patches/react-autosize-textarea+7.1.0.patch
@@ -0,0 +1,13 @@
+diff --git a/node_modules/react-autosize-textarea/lib/TextareaAutosize.d.ts b/node_modules/react-autosize-textarea/lib/TextareaAutosize.d.ts
+index ad6ff3f..e0a6d51 100644
+--- a/node_modules/react-autosize-textarea/lib/TextareaAutosize.d.ts
++++ b/node_modules/react-autosize-textarea/lib/TextareaAutosize.d.ts
+@@ -22,7 +22,7 @@ export declare namespace TextareaAutosize {
+         lineHeight: number | null;
+     };
+ }
+-export declare const TextareaAutosize: React.ForwardRefExoticComponent<Pick<React.HTMLProps<HTMLTextAreaElement>, "default" | "max" | "required" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "title" | "pattern" | "async" | "start" | "low" | "high" | "defer" | "open" | "disabled" | "color" | "content" | "size" | "wrap" | "multiple" | "summary" | "className" | "height" | "id" | "lang" | "method" | "min" | "name" | "target" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "kind" | "src" | "srcLang" | "value" | "download" | "hrefLang" | "rel" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "sizes" | "srcSet" | "accept" | "capture" | "checked" | "list" | "maxLength" | "minLength" | "readOnly" | "step" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "as" | "integrity" | "charSet" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "poster"> & {
++export declare const TextareaAutosize: React.ForwardRefExoticComponent<Pick<React.HTMLProps<HTMLTextAreaElement>, "default" | "max" | "required" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "title" | "pattern" | "async" | "start" | "low" | "high" | "defer" | "open" | "disabled" | "color" | "content" | "size" | "wrap" | "multiple" | "summary" | "className" | "height" | "id" | "lang" | "method" | "min" | "name" | "target" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "kind" | "src" | "srcLang" | "value" | "download" | "hrefLang" | "rel" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "sizes" | "srcSet" | "accept" | "capture" | "checked" | "list" | "maxLength" | "minLength" | "readOnly" | "step" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "as" | "integrity" | "charSet" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "poster"> & {
+     /** Called whenever the textarea resizes */
+     onResize?: ((e: Event) => void) | undefined;
+     /** Minimum number of visible rows */
diff --git a/phpcs.xml.dist b/phpcs.xml.dist
index 400b4d68ece44..5bc7a5676e712 100644
--- a/phpcs.xml.dist
+++ b/phpcs.xml.dist
@@ -42,6 +42,9 @@
 	<!-- Cache the scan results and re-use those for unchanged files on the next scan. -->
 	<arg name="cache" value=".cache/phpcs.json"/>
 
+	<!-- Check up to 20 files simultaneously. -->
+	<arg name="parallel" value="20"/>
+
 	<file>./bin</file>
 	<file>./gutenberg.php</file>
 	<file>./lib</file>
@@ -172,8 +175,11 @@
 			</property>
 		</properties>
 	</rule>
-	<rule ref="Gutenberg.Commenting.FunctionCommentSinceTag">
+	<rule ref="Gutenberg.Commenting.SinceTag">
 		<!-- The sniff ensures that functions have a valid @since tag but skips checking experimental blocks. -->
 		<include-pattern>/packages/block-library/src/.+/*\.php$</include-pattern>
+		<include-pattern>/packages/block-serialization-default-parser/.+/*\.php$</include-pattern>
+		<include-pattern>/packages/widgets/src/blocks/legacy-widget/index\.php$</include-pattern>
+		<include-pattern>/packages/widgets/src/blocks/widget-group/index\.php$</include-pattern>
 	</rule>
 </ruleset>
diff --git a/phpunit.xml.dist b/phpunit.xml.dist
index 4f407266e5c0f..c8dc2d34b0fed 100644
--- a/phpunit.xml.dist
+++ b/phpunit.xml.dist
@@ -14,6 +14,7 @@
 		<testsuite name="default">
 			<directory suffix="-test.php">./phpunit/</directory>
 			<directory suffix=".php">./phpunit/tests/</directory>
+			<directory suffix=".php">./phpunit/blocks/</directory>
 		</testsuite>
 	</testsuites>
 	<groups>
diff --git a/phpunit/block-supports/block-style-variations-test.php b/phpunit/block-supports/block-style-variations-test.php
new file mode 100644
index 0000000000000..b84267446330c
--- /dev/null
+++ b/phpunit/block-supports/block-style-variations-test.php
@@ -0,0 +1,130 @@
+<?php
+
+/**
+ * Test the block style variations block support.
+ *
+ * @since 6.6.0
+ *
+ * @package Gutenberg
+ */
+
+class WP_Block_Supports_Block_Style_Variations_Test extends WP_UnitTestCase {
+	/**
+	 * Theme root directory.
+	 *
+	 * @var string|null
+	 */
+	private $theme_root;
+
+	/**
+	 * Original theme directory.
+	 *
+	 * @var array|null
+	 */
+	private $orig_theme_dir;
+
+	public function set_up() {
+		parent::set_up();
+		$this->theme_root = realpath( dirname( __DIR__ ) . '/data/themedir1' );
+
+		$this->orig_theme_dir = $GLOBALS['wp_theme_directories'];
+
+		// /themes is necessary as theme.php functions assume /themes is the root if there is only one root.
+		$GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root );
+
+		add_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
+		add_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
+		add_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );
+
+		// Clear caches.
+		wp_clean_themes_cache();
+		unset( $GLOBALS['wp_themes'] );
+	}
+
+	public function tear_down() {
+		$GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;
+		wp_clean_themes_cache();
+		unset( $GLOBALS['wp_themes'] );
+
+		// Reset data between tests.
+		_gutenberg_clean_theme_json_caches();
+		parent::tear_down();
+	}
+
+	public function filter_set_theme_root() {
+		return $this->theme_root;
+	}
+
+	/**
+	 * Tests that block style variations registered via either
+	 * `gutenberg_register_block_style` with a style object, or a standalone
+	 * block style variation file within `/styles`, are added to the theme data.
+	 */
+	public function test_add_registered_block_styles_to_theme_data() {
+		switch_theme( 'block-theme' );
+
+		$variation_styles_data = array(
+			'color'    => array(
+				'background' => 'darkslateblue',
+				'text'       => 'lavender',
+			),
+			'blocks'   => array(
+				'core/heading' => array(
+					'color' => array(
+						'text' => 'violet',
+					),
+				),
+			),
+			'elements' => array(
+				'link' => array(
+					'color'  => array(
+						'text' => 'fuchsia',
+					),
+					':hover' => array(
+						'color' => array(
+							'text' => 'deeppink',
+						),
+					),
+				),
+			),
+		);
+
+		register_block_style(
+			'core/group',
+			array(
+				'name'       => 'my-variation',
+				'style_data' => $variation_styles_data,
+			)
+		);
+
+		$theme_json   = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data()->get_raw_data();
+		$group_styles = $theme_json['styles']['blocks']['core/group'] ?? array();
+		$expected     = array(
+			'variations' => array(
+				'my-variation'            => $variation_styles_data,
+
+				/*
+				 * The following block style variations are registered
+				 * automatically from their respective JSON files within the
+				 * theme's `/styles` directory.
+				 */
+				'block-style-variation-a' => array(
+					'color' => array(
+						'background' => 'indigo',
+						'text'       => 'plum',
+					),
+				),
+				'block-style-variation-b' => array(
+					'color' => array(
+						'background' => 'midnightblue',
+						'text'       => 'lightblue',
+					),
+				),
+			),
+		);
+
+		unregister_block_style( 'core/group', 'my-variation' );
+
+		$this->assertSameSetsWithIndex( $group_styles, $expected );
+	}
+}
diff --git a/phpunit/block-supports/layout-test.php b/phpunit/block-supports/layout-test.php
index 300f6e72be480..dd40283171e5c 100644
--- a/phpunit/block-supports/layout-test.php
+++ b/phpunit/block-supports/layout-test.php
@@ -411,6 +411,7 @@ public function data_gutenberg_get_layout_style() {
 	 * @param string $expected_output The expected output.
 	 */
 	public function test_layout_support_flag_renders_classnames_on_wrapper( $args, $expected_output ) {
+		switch_theme( 'default' );
 		$actual_output = gutenberg_render_layout_support_flag( $args['block_content'], $args['block'] );
 		$this->assertEquals( $expected_output, $actual_output );
 	}
@@ -481,6 +482,27 @@ public function data_layout_support_flag_renders_classnames_on_wrapper() {
 				),
 				'expected_output' => '<div class="wp-block-group"><div class="wp-block-group__inner-wrapper is-layout-flow wp-block-group-is-layout-flow"></div></div>',
 			),
+			'block with child layout'                      => array(
+				'args'            => array(
+					'block_content' => '<p>Some text.</p>',
+					'block'         => array(
+						'blockName'    => 'core/paragraph',
+						'attrs'        => array(
+							'style' => array(
+								'layout' => array(
+									'columnSpan' => '2',
+								),
+							),
+						),
+						'innerBlocks'  => array(),
+						'innerHTML'    => '<p>Some text.</p>',
+						'innerContent' => array(
+							'<p>Some text.</p>',
+						),
+					),
+				),
+				'expected_output' => '<p class="wp-container-content-1">Some text.</p>', // The generated classname number assumes `wp_unique_prefixed_id( 'wp-container-content-' )` will not have run previously in this test.
+			),
 		);
 	}
 
diff --git a/phpunit/block-supports/shadow-test.php b/phpunit/block-supports/shadow-test.php
new file mode 100644
index 0000000000000..c2fc0defe8199
--- /dev/null
+++ b/phpunit/block-supports/shadow-test.php
@@ -0,0 +1,112 @@
+<?php
+
+/**
+ * Test the shadow block supports.
+ *
+ * @package Gutenberg
+ */
+
+class WP_Block_Supports_Shadow_Test extends WP_UnitTestCase {
+	/**
+	 * @var string|null
+	 */
+	private $test_block_name;
+
+	public function set_up() {
+		parent::set_up();
+		$this->test_block_name = null;
+	}
+
+	public function tear_down() {
+		unregister_block_type( $this->test_block_name );
+		$this->test_block_name = null;
+		parent::tear_down();
+	}
+
+	/**
+	 * Registers a new block for testing shadow support.
+	 *
+	 * @param string $block_name Name for the test block.
+	 * @param array  $supports   Array defining block support configuration.
+	 *
+	 * @return WP_Block_Type The block type for the newly registered test block.
+	 */
+	private function register_shadow_block_with_support( $block_name, $supports = array() ) {
+		$this->test_block_name = $block_name;
+		register_block_type(
+			$this->test_block_name,
+			array(
+				'api_version' => 3,
+				'attributes'  => array(
+					'style' => array(
+						'type' => 'object',
+					),
+				),
+				'supports'    => $supports,
+			)
+		);
+		$registry = WP_Block_Type_Registry::get_instance();
+
+		return $registry->get_registered( $this->test_block_name );
+	}
+
+	/**
+	 * Tests the generation of shadow block support styles.
+	 *
+	 * @dataProvider data_generate_shadow_fixtures
+	 *
+	 * @param boolean|array $support Shadow block support configuration.
+	 * @param string        $value   Shadow style value for style attribute object.
+	 * @param array         $expected       Expected shadow block support styles.
+	 */
+	public function test_gutenberg_apply_shadow_support( $support, $value, $expected ) {
+		$block_type  = self::register_shadow_block_with_support(
+			'test/shadow-block',
+			array( 'shadow' => $support )
+		);
+		$block_attrs = array( 'style' => array( 'shadow' => $value ) );
+		$actual      = gutenberg_apply_shadow_support( $block_type, $block_attrs );
+
+		$this->assertSame( $expected, $actual );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_generate_shadow_fixtures() {
+		return array(
+			'with no styles'               => array(
+				'support'  => true,
+				'value'    => '',
+				'expected' => array(),
+			),
+			'without support'              => array(
+				'support'  => false,
+				'value'    => '1px 1px 1px #000',
+				'expected' => array(),
+			),
+			'with single shadow'           => array(
+				'support'  => true,
+				'value'    => '1px 1px 1px #000',
+				'expected' => array( 'style' => 'box-shadow:1px 1px 1px #000;' ),
+			),
+			'with comma separated shadows' => array(
+				'support'  => true,
+				'value'    => '1px 1px 1px #000, 2px 2px 2px #fff',
+				'expected' => array( 'style' => 'box-shadow:1px 1px 1px #000, 2px 2px 2px #fff;' ),
+			),
+			'with preset shadow'           => array(
+				'support'  => true,
+				'value'    => 'var:preset|shadow|natural',
+				'expected' => array( 'style' => 'box-shadow:var(--wp--preset--shadow--natural);' ),
+			),
+			'with serialization skipped'   => array(
+				'support'  => array( '__experimentalSkipSerialization' => true ),
+				'value'    => '1px 1px 1px #000',
+				'expected' => array(),
+			),
+		);
+	}
+}
diff --git a/phpunit/blocks/register-block-style-test.php b/phpunit/blocks/register-block-style-test.php
new file mode 100644
index 0000000000000..1becaff347e5f
--- /dev/null
+++ b/phpunit/blocks/register-block-style-test.php
@@ -0,0 +1,32 @@
+<?php
+/**
+ * Tests for `gutenberg_register_block_style`.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Tests for Gutenberg's extended block style registration function.
+ *
+ * @group blocks
+ */
+class Tests_Blocks_Register_Block_Style extends WP_UnitTestCase {
+	/**
+	 * Tests `gutenberg_register_block_style` registers block style
+	 * across multiple block types.
+	 */
+	public function test_gutenberg_register_block_style() {
+		$block_types      = array( 'core/group', 'core/columns', 'core/cover' );
+		$style_properties = array(
+			'name'  => 'fancy',
+			'label' => 'Fancy',
+		);
+
+		gutenberg_register_block_style( $block_types, $style_properties );
+		$registry = WP_Block_Styles_Registry::get_instance();
+
+		$this->assertTrue( $registry->is_registered( 'core/group', 'fancy' ) );
+		$this->assertTrue( $registry->is_registered( 'core/columns', 'fancy' ) );
+		$this->assertTrue( $registry->is_registered( 'core/cover', 'fancy' ) );
+	}
+}
diff --git a/phpunit/blocks/renderBlockCorePostExcerpt.php b/phpunit/blocks/renderBlockCorePostExcerpt.php
new file mode 100644
index 0000000000000..38c27bfde9b30
--- /dev/null
+++ b/phpunit/blocks/renderBlockCorePostExcerpt.php
@@ -0,0 +1,147 @@
+<?php
+/**
+ * Tests for the gutenberg_render_block_core_post_excerpt() function.
+ *
+ * @package WordPress
+ * @subpackage Blocks
+ *
+ * @covers ::gutenberg_render_block_core_post_excerpt
+ * @group blocks
+ */
+class Tests_Blocks_RenderBlockCorePostExcerpt extends WP_UnitTestCase {
+
+	/**
+	 * Post object with data.
+	 *
+	 * @var array
+	 */
+	protected static $post;
+
+	/**
+	 * Array of Attributes.
+	 *
+	 * @var int
+	 */
+	protected static $attributes;
+
+	/**
+	 * Setup method.
+	 *
+	 * @param WP_UnitTest_Factory $factory Helper that lets us create fake data.
+	 */
+	public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
+
+		self::$post = $factory->post->create_and_get(
+			array(
+				'post_title'   => 'Post Expert block Unit Test',
+				'post_excerpt' => 'Post Expert content',
+			)
+		);
+
+		self::$attributes = array(
+			'moreText'      => '',
+			'excerptLength' => 55,
+		);
+
+		$block = array(
+			'blockName'    => 'core/post-excerpt',
+			'attrs'        => array(
+				'moreText' => '',
+			),
+			'innerBlock'   => array(),
+			'innerContent' => array(),
+			'innerHTML'    => array(),
+		);
+
+		WP_Block_Supports::init();
+		WP_Block_Supports::$block_to_render = $block;
+	}
+
+	/**
+	 * Tear down method.
+	 */
+	public static function wpTearDownAfterClass() {
+		wp_delete_post( self::$post->ID, true );
+	}
+
+	/**
+	 * Test gutenberg_render_block_core_post_excerpt() method
+	 * with empty data.
+	 */
+	public function test_should_render_empty_string_when_excerpt_is_empty() {
+		$block = new stdClass();
+
+		// call render method with block context.
+		$rendered = gutenberg_render_block_core_post_excerpt( self::$attributes, '', $block );
+		$this->assertSame( '', $rendered, 'Failed to assert that $rendered is an empty string.' );
+	}
+
+	/**
+	 * Test gutenberg_render_block_core_post_excerpt() method.
+	 */
+	public function test_should_render_correct_exceprt() {
+
+		$block           = new stdClass();
+		$GLOBALS['post'] = self::$post;
+		$block->context  = array( 'postId' => self::$post->ID );
+
+		$rendered = gutenberg_render_block_core_post_excerpt( self::$attributes, '', $block );
+		$this->assertNotEmpty( $rendered, 'Failed to assert that $rendered is not empty.' );
+		$this->assertStringContainsString(
+			'Post Expert content',
+			$rendered,
+			'Failed to assert that $rendered contain the expected string.'
+		);
+		$this->assertStringContainsString(
+			'</p',
+			$rendered,
+			'Failed to assert that $rendered contains a closing html paragraph tag.'
+		);
+		$this->assertStringContainsString(
+			'wp-block-post-excerpt__excerpt',
+			$rendered,
+			'Failed to assert that $rendered contain the "wp-block-post-excerpt__excerpt" string.'
+		);
+		$this->assertStringNotContainsString(
+			'has-text-align',
+			$rendered,
+			'Failed to assert that $rendered  does not contain the has-text-align class.'
+		);
+
+		self::$attributes['textAlign'] = 'left';
+
+		$rendered = gutenberg_render_block_core_post_excerpt( self::$attributes, '', $block );
+		$this->assertStringContainsString(
+			'has-text-align-left',
+			$rendered,
+			'Failed to assert that $rendered contains the "has-text-align-left" class.'
+		);
+
+		self::$attributes = array(
+			'moreText'      => 'Read More',
+			'excerptLength' => 55,
+		);
+
+		$rendered = gutenberg_render_block_core_post_excerpt( self::$attributes, '', $block );
+		$this->assertStringContainsString(
+			'wp-block-post-excerpt__more-link',
+			$rendered,
+			'Failed to assert that $rendered contains the expected string.'
+		);
+
+		self::$attributes = array(
+			'moreText'          => 'Read More',
+			'showMoreOnNewLine' => true,
+		);
+		$this->assertStringContainsString(
+			'wp-block-post-excerpt__more-link',
+			$rendered,
+			'Failed to assert that $rendered contains the expected string.'
+		);
+		$this->assertStringContainsString(
+			get_permalink( self::$post->ID ),
+			$rendered,
+			'Failed to assert that $rendered contain expected post the expected post URL.'
+		);
+	}
+}
diff --git a/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php b/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php
index 563037f41db9d..f5b216a084a4c 100644
--- a/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php
+++ b/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php
@@ -122,6 +122,23 @@ public function test_get_theme_items() {
 		$data     = $response->get_data();
 		$expected = array(
 			array(
+				'_links'   => array(
+					'curies'        => array(
+						array(
+							'name'      => 'wp',
+							'href'      => 'https://api.w.org/{rel}',
+							'templated' => true,
+						),
+					),
+					'wp:theme-file' => array(
+						array(
+							'href'   => 'http://localhost:8889/wp-content/themes/emptytheme/img/1024x768_emptytheme_test_image.jpg',
+							'name'   => 'file:./img/1024x768_emptytheme_test_image.jpg',
+							'target' => 'styles.background.backgroundImage.url',
+							'type'   => 'image/jpeg',
+						),
+					),
+				),
 				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
 				'settings' => array(
 					'color' => array(
@@ -137,7 +154,12 @@ public function test_get_theme_items() {
 					),
 				),
 				'styles'   => array(
-					'blocks' => array(
+					'background' => array(
+						'backgroundImage' => array(
+							'url' => 'file:./img/1024x768_emptytheme_test_image.jpg',
+						),
+					),
+					'blocks'     => array(
 						'core/post-title' => array(
 							'typography' => array(
 								'fontWeight' => '700',
@@ -152,7 +174,7 @@ public function test_get_theme_items() {
 		wp_recursive_ksort( $data );
 		wp_recursive_ksort( $expected );
 
-		$this->assertSameSets( $expected, $data );
+		$this->assertSameSets( $expected, $data, 'Theme item should match expected schema' );
 	}
 
 	/**
diff --git a/phpunit/class-wp-theme-json-resolver-test.php b/phpunit/class-wp-theme-json-resolver-test.php
index c842376b53e30..50e1d9d846899 100644
--- a/phpunit/class-wp-theme-json-resolver-test.php
+++ b/phpunit/class-wp-theme-json-resolver-test.php
@@ -981,95 +981,146 @@ public function data_get_merged_data_returns_origin() {
 	}
 
 	/**
-	 * Tests that get_style_variations returns all variations, including parent theme variations if the theme is a child,
-	 * and that the child variation overwrites the parent variation of the same name.
+	 * Tests that `get_style_variations` returns all the appropriate variations,
+	 * including parent variations if the theme is a child, and that the child
+	 * variation overwrites the parent variation of the same name.
 	 *
-	 * @covers WP_Theme_JSON_Resolver_Gutenberg::get_style_variations
+	 * Note: This covers both theme and block style variations.
+	 *
+	 * @covers WP_Theme_JSON_Resolver::get_style_variations
+	 *
+	 * @dataProvider data_get_style_variations
+	 *
+	 * @since 6.6.0 Added tests for block style variations.
+	 *
+	 * @param string $theme               Name of the theme to use.
+	 * @param string $scope               Scope to filter variations by e.g. theme vs block.
+	 * @param array  $expected_variations Collection of expected variations.
 	 */
-	public function test_get_style_variations_returns_all_variations() {
-		// Switch to a child theme.
-		switch_theme( 'block-theme-child' );
+	public function test_get_style_variations( $theme, $scope, $expected_variations ) {
+		switch_theme( $theme );
 		wp_set_current_user( self::$administrator_id );
 
-		$actual_settings   = WP_Theme_JSON_Resolver_Gutenberg::get_style_variations();
-		$expected_settings = array(
-			array(
-				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-				'title'    => 'variation-a',
-				'settings' => array(
-					'blocks' => array(
-						'core/paragraph' => array(
-							'color' => array(
-								'palette' => array(
-									'theme' => array(
-										array(
-											'slug'  => 'dark',
-											'name'  => 'Dark',
-											'color' => '#010101',
+		$actual_variations = WP_Theme_JSON_Resolver_Gutenberg::get_style_variations( $scope );
+
+		wp_recursive_ksort( $actual_variations );
+		wp_recursive_ksort( $expected_variations );
+
+		$this->assertSame( $expected_variations, $actual_variations );
+	}
+
+	/**
+	 * Data provider for test_get_style_variations
+	 *
+	 * @since 6.6.0 Added data provider for testing theme and block style variations.
+	 *
+	 * @return array
+	 */
+	public function data_get_style_variations() {
+		return array(
+			'theme_style_variations' => array(
+				'theme'               => 'block-theme-child',
+				'scope'               => 'theme',
+				'expected_variations' => array(
+					array(
+						'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+						'title'    => 'variation-a',
+						'settings' => array(
+							'blocks' => array(
+								'core/paragraph' => array(
+									'color' => array(
+										'palette' => array(
+											'theme' => array(
+												array(
+													'slug' => 'dark',
+													'name' => 'Dark',
+													'color' => '#010101',
+												),
+											),
 										),
 									),
 								),
 							),
 						),
 					),
-				),
-			),
-			array(
-				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-				'title'    => 'variation-b',
-				'settings' => array(
-					'blocks' => array(
-						'core/post-title' => array(
+					array(
+						'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+						'title'    => 'variation-b',
+						'settings' => array(
+							'blocks' => array(
+								'core/post-title' => array(
+									'color' => array(
+										'palette' => array(
+											'theme' => array(
+												array(
+													'slug' => 'dark',
+													'name' => 'Dark',
+													'color' => '#010101',
+												),
+											),
+										),
+									),
+								),
+							),
+						),
+					),
+					array(
+						'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+						'title'    => 'Block theme variation',
+						'settings' => array(
 							'color' => array(
 								'palette' => array(
 									'theme' => array(
 										array(
-											'slug'  => 'dark',
-											'name'  => 'Dark',
-											'color' => '#010101',
+											'slug'  => 'foreground',
+											'name'  => 'Foreground',
+											'color' => '#3F67C6',
 										),
 									),
 								),
 							),
 						),
+						'styles'   => array(
+							'blocks' => array(
+								'core/post-title' => array(
+									'typography' => array(
+										'fontWeight' => '700',
+									),
+								),
+							),
+						),
 					),
 				),
 			),
-			array(
-				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-				'title'    => 'Block theme variation',
-				'settings' => array(
-					'color' => array(
-						'palette' => array(
-							'theme' => array(
-								array(
-									'slug'  => 'foreground',
-									'name'  => 'Foreground',
-									'color' => '#3F67C6',
-								),
+			'block_style_variations' => array(
+				'theme'               => 'block-theme-child-with-block-style-variations',
+				'scope'               => 'block',
+				'expected_variations' => array(
+					array(
+						'blockTypes' => array( 'core/group', 'core/columns', 'core/media-text' ),
+						'version'    => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+						'title'      => 'block-style-variation-a',
+						'styles'     => array(
+							'color' => array(
+								'background' => 'darkcyan',
+								'text'       => 'aliceblue',
 							),
 						),
 					),
-				),
-				'styles'   => array(
-					'blocks' => array(
-						'core/post-title' => array(
-							'typography' => array(
-								'fontWeight' => '700',
+					array(
+						'blockTypes' => array( 'core/group', 'core/columns' ),
+						'version'    => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+						'title'      => 'block-style-variation-b',
+						'styles'     => array(
+							'color' => array(
+								'background' => 'midnightblue',
+								'text'       => 'lightblue',
 							),
 						),
 					),
 				),
 			),
 		);
-
-		wp_recursive_ksort( $actual_settings );
-		wp_recursive_ksort( $expected_settings );
-
-		$this->assertSame(
-			$expected_settings,
-			$actual_settings
-		);
 	}
 
 	public function test_theme_shadow_presets_do_not_override_default_shadow_presets() {
@@ -1139,4 +1190,91 @@ public function test_shadow_default_presets_value_for_block_and_classic_themes()
 		$default_presets_for_block = $theme_json->get_settings()['shadow']['defaultPresets'];
 		$this->assertTrue( $default_presets_for_block );
 	}
+
+	/**
+	 * Tests that relative paths are resolved and merged into the theme.json data.
+	 */
+	public function test_resolve_theme_file_uris() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'background' => array(
+						'backgroundImage' => array(
+							'url' => 'file:./example/img/image.png',
+						),
+					),
+				),
+			)
+		);
+
+		$expected_data = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'background' => array(
+					'backgroundImage' => array(
+						'url' => 'https://example.org/wp-content/themes/example-theme/example/img/image.png',
+					),
+				),
+			),
+		);
+
+		/*
+		 * This filter callback normalizes the return value from `get_theme_file_uri`
+		 * to guard against changes in test environments.
+		 * The test suite otherwise returns full system dir path, e.g.,
+		 * /wordpress-phpunit/includes/../data/themedir1/default/example/img/image.png
+		 */
+		$filter_theme_file_uri_callback = function ( $file ) {
+			return 'https://example.org/wp-content/themes/example-theme/example/' . explode( 'example/', $file )[1];
+		};
+		add_filter( 'theme_file_uri', $filter_theme_file_uri_callback );
+		$actual = WP_Theme_JSON_Resolver_Gutenberg::resolve_theme_file_uris( $theme_json );
+		remove_filter( 'theme_file_uri', $filter_theme_file_uri_callback );
+
+		$this->assertSame( $expected_data, $actual->get_raw_data() );
+	}
+
+	/**
+	 * Tests that them uris are resolved and bundled with other metadata
+	 * in an array.
+	 */
+	public function test_get_resolved_theme_uris() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'background' => array(
+						'backgroundImage' => array(
+							'url' => 'file:./example/img/image.png',
+						),
+					),
+				),
+			)
+		);
+
+		$expected_data = array(
+			array(
+				'name'   => 'file:./example/img/image.png',
+				'href'   => 'https://example.org/wp-content/themes/example-theme/example/img/image.png',
+				'target' => 'styles.background.backgroundImage.url',
+				'type'   => 'image/png',
+			),
+		);
+
+		/*
+		 * This filter callback normalizes the return value from `get_theme_file_uri`
+		 * to guard against changes in test environments.
+		 * The test suite otherwise returns full system dir path, e.g.,
+		 * /wordpress-phpunit/includes/../data/themedir1/default/example/img/image.png
+		 */
+		$filter_theme_file_uri_callback = function ( $file ) {
+			return 'https://example.org/wp-content/themes/example-theme/example/' . explode( 'example/', $file )[1];
+		};
+		add_filter( 'theme_file_uri', $filter_theme_file_uri_callback );
+		$actual = WP_Theme_JSON_Resolver_Gutenberg::get_resolved_theme_uris( $theme_json );
+		remove_filter( 'theme_file_uri', $filter_theme_file_uri_callback );
+
+		$this->assertSame( $expected_data, $actual );
+	}
 }
diff --git a/phpunit/class-wp-theme-json-schema-test.php b/phpunit/class-wp-theme-json-schema-test.php
index 4259b8b5de6d4..24a7cf0e2e43d 100644
--- a/phpunit/class-wp-theme-json-schema-test.php
+++ b/phpunit/class-wp-theme-json-schema-test.php
@@ -223,6 +223,20 @@ public function test_migrate_v2_to_latest() {
 						),
 					),
 				),
+				'spacing'    => array(
+					'spacingSizes' => array(
+						array(
+							'name' => 'Small',
+							'slug' => 20,
+							'size' => '20px',
+						),
+						array(
+							'name' => 'Large',
+							'slug' => 80,
+							'size' => '80px',
+						),
+					),
+				),
 			),
 		);
 
@@ -246,6 +260,21 @@ public function test_migrate_v2_to_latest() {
 						),
 					),
 				),
+				'spacing'    => array(
+					'defaultSpacingSizes' => false,
+					'spacingSizes'        => array(
+						array(
+							'name' => 'Small',
+							'slug' => 20,
+							'size' => '20px',
+						),
+						array(
+							'name' => 'Large',
+							'slug' => 80,
+							'size' => '80px',
+						),
+					),
+				),
 			),
 		);
 
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index 8df33334e82d0..bcf0d238400a0 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -503,6 +503,11 @@ public function test_get_stylesheet() {
 								),
 							),
 						),
+						'core/media-text'   => array(
+							'typography' => array(
+								'textAlign' => 'center',
+							),
+						),
 						'core/post-date'    => array(
 							'color'    => array(
 								'text' => '#123456',
@@ -547,7 +552,7 @@ public function test_get_stylesheet() {
 		);
 
 		$variables = ':root{--wp--preset--color--grey: grey;--wp--preset--gradient--custom-gradient: linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%);--wp--preset--font-size--small: 14px;--wp--preset--font-size--big: 41px;--wp--preset--font-family--arial: Arial, serif;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}';
-		$styles    = static::$base_styles . ':where(body){color: var(--wp--preset--color--grey);}:where(a:where(:not(.wp-element-button))){background-color: #333;color: #111;}:where(.wp-element-button, .wp-block-button__link){box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}:where(.wp-block-cover){min-height: unset;aspect-ratio: 16/9;}:where(.wp-block-group){background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;min-height: 50vh;padding: 24px;}:where(.wp-block-group a:where(:not(.wp-element-button))){color: #111;}:where(.wp-block-heading){color: #123456;}:where(.wp-block-heading a:where(:not(.wp-element-button))){background-color: #333;color: #111;font-size: 60px;}:where(.wp-block-post-date){color: #123456;}:where(.wp-block-post-date a:where(:not(.wp-element-button))){background-color: #777;color: #555;}:where(.wp-block-post-excerpt){column-count: 2;}:where(.wp-block-image){margin-bottom: 30px;}: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;}:where(.wp-block-image img, .wp-block-image .components-placeholder){filter: var(--wp--preset--duotone--custom-duotone);}';
+		$styles    = static::$base_styles . ':root :where(body){color: var(--wp--preset--color--grey);}:root :where(a:where(:not(.wp-element-button))){background-color: #333;color: #111;}:root :where(.wp-element-button, .wp-block-button__link){box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}:root :where(.wp-block-cover){min-height: unset;aspect-ratio: 16/9;}:root :where(.wp-block-group){background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;min-height: 50vh;padding: 24px;}:root :where(.wp-block-group a:where(:not(.wp-element-button))){color: #111;}:root :where(.wp-block-heading){color: #123456;}:root :where(.wp-block-heading a:where(:not(.wp-element-button))){background-color: #333;color: #111;font-size: 60px;}:root :where(.wp-block-media-text){text-align: center;}:root :where(.wp-block-post-date){color: #123456;}:root :where(.wp-block-post-date a:where(:not(.wp-element-button))){background-color: #777;color: #555;}:root :where(.wp-block-post-excerpt){column-count: 2;}:root :where(.wp-block-image){margin-bottom: 30px;}:root :where(.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder){border-top-left-radius: 10px;border-bottom-right-radius: 1em;}:root :where(.wp-block-image img, .wp-block-image .components-placeholder){filter: var(--wp--preset--duotone--custom-duotone);}';
 		$presets   = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-custom-gradient-gradient-background{background: var(--wp--preset--gradient--custom-gradient) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-big-font-size{font-size: var(--wp--preset--font-size--big) !important;}.has-arial-font-family{font-family: var(--wp--preset--font-family--arial) !important;}';
 		$all       = $variables . $styles . $presets;
 
@@ -593,7 +598,7 @@ public function test_get_stylesheet_support_for_shorthand_and_longhand_values()
 			)
 		);
 
-		$styles = static::$base_styles . ':where(.wp-block-group){border-radius: 10px;margin: 1em;padding: 24px;}:where(.wp-block-image){margin-bottom: 30px;padding-top: 15px;}: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;}';
+		$styles = static::$base_styles . ':root :where(.wp-block-group){border-radius: 10px;margin: 1em;padding: 24px;}: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( $styles, $theme_json->get_stylesheet() );
 		$this->assertSame( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
 	}
@@ -644,7 +649,7 @@ 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; }:where(.is-layout-flow)  > :first-child{margin-block-start: 0;}:where(.is-layout-flow)  > :last-child{margin-block-end: 0;}:where(.is-layout-flow)  > *{margin-block-start: 1em;margin-block-end: 0;}:where(.is-layout-constrained)  > :first-child{margin-block-start: 0;}:where(.is-layout-constrained)  > :last-child{margin-block-end: 0;}:where(.is-layout-constrained)  > *{margin-block-start: 1em;margin-block-end: 0;}:where(.is-layout-flex) {gap: 1em;}: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;}';
+		$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' ) ) );
 	}
@@ -706,7 +711,7 @@ public function test_get_stylesheet_preset_rules_come_after_block_rules() {
 			)
 		);
 
-		$styles    = static::$base_styles . ':where(.wp-block-group){color: red;}';
+		$styles    = static::$base_styles . ':root :where(.wp-block-group){color: red;}';
 		$presets   = '.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}';
 		$variables = '.wp-block-group{--wp--preset--color--grey: grey;}';
 
@@ -793,7 +798,7 @@ public function test_get_stylesheet_preset_values_are_marked_as_important() {
 		);
 
 		$this->assertSame(
-			':root{--wp--preset--color--grey: grey;}' . static::$base_styles . ':where(p){background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.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;}',
+			':root{--wp--preset--color--grey: grey;}' . static::$base_styles . ':root :where(p){background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.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;}',
 			$theme_json->get_stylesheet()
 		);
 	}
@@ -831,7 +836,7 @@ public function test_get_stylesheet_handles_whitelisted_element_pseudo_selectors
 			)
 		);
 
-		$element_styles = ':where(a:where(:not(.wp-element-button))){background-color: red;color: green;}:where(a:where(:not(.wp-element-button)):hover){background-color: green;color: red;font-size: 10em;text-transform: uppercase;}:where(a:where(:not(.wp-element-button)):focus){background-color: black;color: yellow;}';
+		$element_styles = ':root :where(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;font-size: 10em;text-transform: uppercase;}:root :where(a:where(:not(.wp-element-button)):focus){background-color: black;color: yellow;}';
 
 		$expected = static::$base_styles . $element_styles;
 
@@ -868,7 +873,7 @@ public function test_get_stylesheet_handles_only_pseudo_selector_rules_for_given
 			)
 		);
 
-		$element_styles = ':where(a:where(:not(.wp-element-button)):hover){background-color: green;color: red;font-size: 10em;text-transform: uppercase;}:where(a:where(:not(.wp-element-button)):focus){background-color: black;color: yellow;}';
+		$element_styles = ':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;}';
 
 		$expected = static::$base_styles . $element_styles;
 
@@ -905,7 +910,7 @@ public function test_get_stylesheet_ignores_pseudo_selectors_on_non_whitelisted_
 			)
 		);
 
-		$element_styles = ':where(h4){background-color: red;color: green;}';
+		$element_styles = ':root :where(h4){background-color: red;color: green;}';
 
 		$expected = static::$base_styles . $element_styles;
 
@@ -942,7 +947,7 @@ public function test_get_stylesheet_ignores_non_whitelisted_pseudo_selectors() {
 			)
 		);
 
-		$element_styles = ':where(a:where(:not(.wp-element-button))){background-color: red;color: green;}:where(a:where(:not(.wp-element-button)):hover){background-color: green;color: red;}';
+		$element_styles = ':root :where(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;}';
 
 		$expected = static::$base_styles . $element_styles;
 
@@ -988,7 +993,7 @@ public function test_get_stylesheet_handles_priority_of_elements_vs_block_elemen
 			)
 		);
 
-		$element_styles = ':where(.wp-block-group a:where(:not(.wp-element-button))){background-color: red;color: green;}:where(.wp-block-group a:where(:not(.wp-element-button)):hover){background-color: green;color: red;font-size: 10em;text-transform: uppercase;}:where(.wp-block-group a:where(:not(.wp-element-button)):focus){background-color: black;color: yellow;}';
+		$element_styles = ':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;}';
 
 		$expected = static::$base_styles . $element_styles;
 
@@ -1033,7 +1038,7 @@ public function test_get_stylesheet_handles_whitelisted_block_level_element_pseu
 			)
 		);
 
-		$element_styles = ':where(a:where(:not(.wp-element-button))){background-color: red;color: green;}:where(a:where(:not(.wp-element-button)):hover){background-color: green;color: red;}:where(.wp-block-group a:where(:not(.wp-element-button)):hover){background-color: black;color: yellow;}';
+		$element_styles = ':root :where(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;}:root :where(.wp-block-group a:where(:not(.wp-element-button)):hover){background-color: black;color: yellow;}';
 
 		$expected = static::$base_styles . $element_styles;
 
@@ -1095,7 +1100,7 @@ public function test_get_stylesheet_with_deprecated_feature_level_selectors() {
 		);
 
 		$base_styles   = ':root{--wp--preset--color--green: green;}' . static::$base_styles;
-		$block_styles  = ':where(.wp-block-test, .wp-block-test__wrapper){color: green;}:where(.wp-block-test .inner, .wp-block-test__wrapper .inner){border-radius: 9999px;padding: 20px;}:where(.wp-block-test .sub-heading, .wp-block-test__wrapper .sub-heading){font-size: 3em;}';
+		$block_styles  = ':root :where(.wp-block-test, .wp-block-test__wrapper){color: green;}:root :where(.wp-block-test .inner, .wp-block-test__wrapper .inner){border-radius: 9999px;padding: 20px;}:root :where(.wp-block-test .sub-heading, .wp-block-test__wrapper .sub-heading){font-size: 3em;}';
 		$preset_styles = '.has-green-color{color: var(--wp--preset--color--green) !important;}.has-green-background-color{background-color: var(--wp--preset--color--green) !important;}.has-green-border-color{border-color: var(--wp--preset--color--green) !important;}';
 		$expected      = $base_styles . $block_styles . $preset_styles;
 
@@ -1157,7 +1162,7 @@ public function test_get_stylesheet_with_block_json_selectors() {
 		);
 
 		$base_styles   = ':root{--wp--preset--color--green: green;}' . static::$base_styles;
-		$block_styles  = ':where(.custom-root-selector){background-color: grey;padding: 20px;}:where(.custom-root-selector img){border-radius: 9999px;}:where(.custom-root-selector > figcaption){color: navy;font-size: 3em;}';
+		$block_styles  = ':root :where(.custom-root-selector){background-color: grey;padding: 20px;}:root :where(.custom-root-selector img){border-radius: 9999px;}:root :where(.custom-root-selector > figcaption){color: navy;font-size: 3em;}';
 		$preset_styles = '.has-green-color{color: var(--wp--preset--color--green) !important;}.has-green-background-color{background-color: var(--wp--preset--color--green) !important;}.has-green-border-color{border-color: var(--wp--preset--color--green) !important;}';
 		$expected      = $base_styles . $block_styles . $preset_styles;
 
@@ -1188,7 +1193,7 @@ 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; }:where(.is-layout-flow)  > :first-child{margin-block-start: 0;}:where(.is-layout-flow)  > :last-child{margin-block-end: 0;}:where(.is-layout-flow)  > *{margin-block-start: 1em;margin-block-end: 0;}:where(.is-layout-constrained)  > :first-child{margin-block-start: 0;}:where(.is-layout-constrained)  > :last-child{margin-block-end: 0;}:where(.is-layout-constrained)  > *{margin-block-start: 1em;margin-block-end: 0;}:where(.is-layout-flex) {gap: 1em;}: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;}',
+			':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;}',
 			$theme_json->get_stylesheet( array( 'styles' ) )
 		);
 	}
@@ -1217,7 +1222,7 @@ 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); }:where(.is-layout-flow)  > :first-child{margin-block-start: 0;}:where(.is-layout-flow)  > :last-child{margin-block-end: 0;}:where(.is-layout-flow)  > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}:where(.is-layout-constrained)  > :first-child{margin-block-start: 0;}:where(.is-layout-constrained)  > :last-child{margin-block-end: 0;}:where(.is-layout-constrained)  > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}:where(.is-layout-flex) {gap: var(--wp--preset--spacing--60);}: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;}',
+			':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;}',
 			$theme_json->get_stylesheet( array( 'styles' ) )
 		);
 	}
@@ -1345,8 +1350,8 @@ public function test_get_stylesheet_generates_valid_block_gap_values_and_skips_n
 		);
 
 		$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; }:where(.is-layout-flow)  > :first-child{margin-block-start: 0;}:where(.is-layout-flow)  > :last-child{margin-block-end: 0;}:where(.is-layout-flow)  > *{margin-block-start: 1rem;margin-block-end: 0;}:where(.is-layout-constrained)  > :first-child{margin-block-start: 0;}:where(.is-layout-constrained)  > :last-child{margin-block-end: 0;}:where(.is-layout-constrained)  > *{margin-block-start: 1rem;margin-block-end: 0;}:where(.is-layout-flex) {gap: 1rem;}: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;}' .
-			':where(.wp-block-post-content){color: gray;}:where(.wp-block-social-links-is-layout-flow)  > :first-child{margin-block-start: 0;}:where(.wp-block-social-links-is-layout-flow)  > :last-child{margin-block-end: 0;}:where(.wp-block-social-links-is-layout-flow)  > *{margin-block-start: 0;margin-block-end: 0;}:where(.wp-block-social-links-is-layout-constrained)  > :first-child{margin-block-start: 0;}:where(.wp-block-social-links-is-layout-constrained)  > :last-child{margin-block-end: 0;}:where(.wp-block-social-links-is-layout-constrained)  > *{margin-block-start: 0;margin-block-end: 0;}:where(.wp-block-social-links-is-layout-flex) {gap: 0;}:where(.wp-block-social-links-is-layout-grid) {gap: 0;}:where(.wp-block-buttons-is-layout-flow)  > :first-child{margin-block-start: 0;}:where(.wp-block-buttons-is-layout-flow)  > :last-child{margin-block-end: 0;}:where(.wp-block-buttons-is-layout-flow)  > *{margin-block-start: 0;margin-block-end: 0;}:where(.wp-block-buttons-is-layout-constrained)  > :first-child{margin-block-start: 0;}:where(.wp-block-buttons-is-layout-constrained)  > :last-child{margin-block-end: 0;}:where(.wp-block-buttons-is-layout-constrained)  > *{margin-block-start: 0;margin-block-end: 0;}:where(.wp-block-buttons-is-layout-flex) {gap: 0;}:where(.wp-block-buttons-is-layout-grid) {gap: 0;}',
+			':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;}',
 			$theme_json->get_stylesheet()
 		);
 	}
@@ -1378,7 +1383,7 @@ public function test_get_stylesheet_returns_outline_styles() {
 			)
 		);
 
-		$element_styles = ':where(.wp-element-button, .wp-block-button__link){outline-color: red;outline-offset: 3px;outline-style: dashed;outline-width: 3px;}:where(.wp-element-button:hover, .wp-block-button__link:hover){outline-color: blue;outline-offset: 3px;outline-style: solid;outline-width: 3px;}';
+		$element_styles = ':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;}';
 
 		$expected = static::$base_styles . $element_styles;
 		$this->assertSame( $expected, $theme_json->get_stylesheet() );
@@ -1403,7 +1408,7 @@ public function test_get_stylesheet_custom_root_selector() {
 		// Results also include root site blocks styles which hard code
 		// `:where(body) { margin: 0; }`.
 		$this->assertSame(
-			':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(.custom){color: teal;}',
+			':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; }:root :where(.custom){color: teal;}',
 			$actual
 		);
 	}
@@ -1462,7 +1467,7 @@ public function test_get_stylesheet_generates_fluid_typography_values() {
 
 		// Results also include root site blocks styles.
 		$this->assertSame(
-			':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);}:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(body){font-size: clamp(0.875em, 0.875rem + ((1vw - 0.2em) * 0.156), 1em);}:where(h1){font-size: clamp(50.171px, 3.136rem + ((1vw - 3.2px) * 3.893), 100px);}: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;}',
+			':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);}:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:root :where(body){font-size: clamp(0.875em, 0.875rem + ((1vw - 0.2em) * 0.156), 1em);}:root :where(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()
 		);
 	}
@@ -3156,7 +3161,7 @@ public function test_get_editor_settings_blank() {
 
 	public function test_get_editor_settings_custom_units_can_be_disabled() {
 		add_theme_support( 'custom-units', array() );
-		$actual = WP_Theme_JSON_Gutenberg::get_from_editor_settings( get_classic_theme_supports_block_editor_settings() );
+		$actual = WP_Theme_JSON_Gutenberg::get_from_editor_settings( gutenberg_get_classic_theme_supports_block_editor_settings() );
 		remove_theme_support( 'custom-units' );
 
 		$expected = array(
@@ -3169,7 +3174,7 @@ public function test_get_editor_settings_custom_units_can_be_disabled() {
 
 	public function test_get_editor_settings_custom_units_can_be_enabled() {
 		add_theme_support( 'custom-units' );
-		$actual = WP_Theme_JSON_Gutenberg::get_from_editor_settings( get_classic_theme_supports_block_editor_settings() );
+		$actual = WP_Theme_JSON_Gutenberg::get_from_editor_settings( gutenberg_get_classic_theme_supports_block_editor_settings() );
 		remove_theme_support( 'custom-units' );
 
 		$expected = array(
@@ -3182,7 +3187,7 @@ public function test_get_editor_settings_custom_units_can_be_enabled() {
 
 	public function test_get_editor_settings_custom_units_can_be_filtered() {
 		add_theme_support( 'custom-units', 'rem', 'em' );
-		$actual = WP_Theme_JSON_Gutenberg::get_from_editor_settings( get_classic_theme_supports_block_editor_settings() );
+		$actual = WP_Theme_JSON_Gutenberg::get_from_editor_settings( gutenberg_get_classic_theme_supports_block_editor_settings() );
 		remove_theme_support( 'custom-units' );
 
 		$expected = array(
@@ -3519,7 +3524,7 @@ public function test_get_property_value_valid() {
 			)
 		);
 
-		$color_styles = ':where(body){background-color: #ffffff;color: #000000;}:where(.wp-element-button, .wp-block-button__link){background-color: #000000;color: #ffffff;}';
+		$color_styles = ':root :where(body){background-color: #ffffff;color: #000000;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #000000;color: #ffffff;}';
 		$expected     = static::$base_styles . $color_styles;
 		$this->assertSame( $expected, $theme_json->get_stylesheet() );
 	}
@@ -3597,7 +3602,7 @@ public function test_get_property_value_loop() {
 			)
 		);
 
-		$color_styles = ':where(body){background-color: #ffffff;}:where(.wp-element-button, .wp-block-button__link){color: #ffffff;}';
+		$color_styles = ':root :where(body){background-color: #ffffff;}:root :where(.wp-element-button, .wp-block-button__link){color: #ffffff;}';
 		$expected     = static::$base_styles . $color_styles;
 		$this->assertSame( $expected, $theme_json->get_stylesheet() );
 	}
@@ -3630,7 +3635,7 @@ public function test_get_property_value_recursion() {
 			)
 		);
 
-		$color_styles = ':where(body){background-color: #ffffff;color: #ffffff;}:where(.wp-element-button, .wp-block-button__link){color: #ffffff;}';
+		$color_styles = ':root :where(body){background-color: #ffffff;color: #ffffff;}:root :where(.wp-element-button, .wp-block-button__link){color: #ffffff;}';
 		$expected     = static::$base_styles . $color_styles;
 		$this->assertSame( $expected, $theme_json->get_stylesheet() );
 	}
@@ -3654,7 +3659,7 @@ public function test_get_property_value_self() {
 			)
 		);
 
-		$color_styles = ':where(body){background-color: #ffffff;}';
+		$color_styles = ':root :where(body){background-color: #ffffff;}';
 		$expected     = static::$base_styles . $color_styles;
 		$this->assertSame( $expected, $theme_json->get_stylesheet() );
 	}
@@ -3684,7 +3689,7 @@ public function test_get_styles_for_block_with_padding_aware_alignments() {
 			'selector' => 'body',
 		);
 
-		$expected    = ':where(body) { margin: 0; }.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding :where(.has-global-padding:not(.wp-block-block)) { padding-right: 0; padding-left: 0; }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding :where(.has-global-padding:not(.wp-block-block)) > .alignfull { margin-right: 0; margin-left: 0; }.has-global-padding > .alignfull:where(:not(.has-global-padding):not(.is-layout-flex):not(.is-layout-grid)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }: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;}:where(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;}';
+		$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(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .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;}:root :where(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 );
@@ -3712,7 +3717,7 @@ public function test_get_styles_for_block_without_padding_aware_alignments() {
 			'selector' => 'body',
 		);
 
-		$expected    = static::$base_styles . ':where(body){padding-top: 10px;padding-right: 12px;padding-bottom: 10px;padding-left: 12px;}';
+		$expected    = static::$base_styles . ':root :where(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 );
@@ -3757,7 +3762,7 @@ 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: ; }:where(.is-layout-flow)  > :first-child{margin-block-start: 0;}:where(.is-layout-flow)  > :last-child{margin-block-end: 0;}:where(.is-layout-flow)  > *{margin-block-start: 1;margin-block-end: 0;}:where(.is-layout-constrained)  > :first-child{margin-block-start: 0;}:where(.is-layout-constrained)  > :last-child{margin-block-end: 0;}:where(.is-layout-constrained)  > *{margin-block-start: 1;margin-block-end: 0;}:where(.is-layout-flex) {gap: 1;}: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;}';
+		$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;}';
 		$root_rules = $theme_json->get_root_layout_rules( WP_Theme_JSON_Gutenberg::ROOT_BLOCK_SELECTOR, $metadata );
 		$this->assertSame( $expected, $root_rules );
 	}
@@ -4146,9 +4151,9 @@ public function data_get_styles_for_block_with_style_variations() {
 		$plain = array(
 			'metadata' => array(
 				'path'     => array( 'styles', 'blocks', 'core/quote', 'variations', 'plain' ),
-				'selector' => '.is-style-plain.is-style-plain.wp-block-quote',
+				'selector' => '.is-style-plain.wp-block-quote',
 			),
-			'styles'   => '.is-style-plain.is-style-plain.wp-block-quote{background-color: hotpink;}',
+			'styles'   => ':root :where(.is-style-plain.wp-block-quote){background-color: hotpink;}',
 		);
 
 		return array(
@@ -4276,10 +4281,10 @@ public function test_set_spacing_sizes( $spacing_scale, $expected_output ) {
 						'spacingScale' => $spacing_scale,
 					),
 				),
-			)
+			),
+			'default'
 		);
 
-		$theme_json->set_spacing_sizes();
 		$this->assertSame( $expected_output, _wp_array_get( $theme_json->get_raw_data(), array( 'settings', 'spacing', 'spacingSizes', 'default' ) ) );
 	}
 
@@ -4300,7 +4305,7 @@ public function data_set_spacing_sizes() {
 				),
 				'expected_output' => array(
 					array(
-						'name' => '1',
+						'name' => 'Medium',
 						'slug' => '50',
 						'size' => '4rem',
 					),
@@ -4316,12 +4321,12 @@ public function data_set_spacing_sizes() {
 				),
 				'expected_output' => array(
 					array(
-						'name' => '1',
+						'name' => 'Medium',
 						'slug' => '50',
 						'size' => '4rem',
 					),
 					array(
-						'name' => '2',
+						'name' => 'Large',
 						'slug' => '60',
 						'size' => '5.5rem',
 					),
@@ -4337,17 +4342,17 @@ public function data_set_spacing_sizes() {
 				),
 				'expected_output' => array(
 					array(
-						'name' => '1',
+						'name' => 'Small',
 						'slug' => '40',
 						'size' => '2.5rem',
 					),
 					array(
-						'name' => '2',
+						'name' => 'Medium',
 						'slug' => '50',
 						'size' => '4rem',
 					),
 					array(
-						'name' => '3',
+						'name' => 'Large',
 						'slug' => '60',
 						'size' => '5.5rem',
 					),
@@ -4363,22 +4368,22 @@ public function data_set_spacing_sizes() {
 				),
 				'expected_output' => array(
 					array(
-						'name' => '1',
+						'name' => 'Small',
 						'slug' => '40',
 						'size' => '2.5rem',
 					),
 					array(
-						'name' => '2',
+						'name' => 'Medium',
 						'slug' => '50',
 						'size' => '4rem',
 					),
 					array(
-						'name' => '3',
+						'name' => 'Large',
 						'slug' => '60',
 						'size' => '5.5rem',
 					),
 					array(
-						'name' => '4',
+						'name' => 'X-Large',
 						'slug' => '70',
 						'size' => '7rem',
 					),
@@ -4394,27 +4399,27 @@ public function data_set_spacing_sizes() {
 				),
 				'expected_output' => array(
 					array(
-						'name' => '1',
+						'name' => 'Small',
 						'slug' => '40',
 						'size' => '2.5rem',
 					),
 					array(
-						'name' => '2',
+						'name' => 'Medium',
 						'slug' => '50',
 						'size' => '5rem',
 					),
 					array(
-						'name' => '3',
+						'name' => 'Large',
 						'slug' => '60',
 						'size' => '7.5rem',
 					),
 					array(
-						'name' => '4',
+						'name' => 'X-Large',
 						'slug' => '70',
 						'size' => '10rem',
 					),
 					array(
-						'name' => '5',
+						'name' => '2X-Large',
 						'slug' => '80',
 						'size' => '12.5rem',
 					),
@@ -4430,27 +4435,27 @@ public function data_set_spacing_sizes() {
 				),
 				'expected_output' => array(
 					array(
-						'name' => '1',
+						'name' => 'X-Small',
 						'slug' => '30',
 						'size' => '0.67rem',
 					),
 					array(
-						'name' => '2',
+						'name' => 'Small',
 						'slug' => '40',
 						'size' => '1rem',
 					),
 					array(
-						'name' => '3',
+						'name' => 'Medium',
 						'slug' => '50',
 						'size' => '1.5rem',
 					),
 					array(
-						'name' => '4',
+						'name' => 'Large',
 						'slug' => '60',
 						'size' => '2.25rem',
 					),
 					array(
-						'name' => '5',
+						'name' => 'X-Large',
 						'slug' => '70',
 						'size' => '3.38rem',
 					),
@@ -4466,27 +4471,27 @@ public function data_set_spacing_sizes() {
 				),
 				'expected_output' => array(
 					array(
-						'name' => '1',
+						'name' => 'X-Small',
 						'slug' => '30',
 						'size' => '0.09rem',
 					),
 					array(
-						'name' => '2',
+						'name' => 'Small',
 						'slug' => '40',
 						'size' => '0.38rem',
 					),
 					array(
-						'name' => '3',
+						'name' => 'Medium',
 						'slug' => '50',
 						'size' => '1.5rem',
 					),
 					array(
-						'name' => '4',
+						'name' => 'Large',
 						'slug' => '60',
 						'size' => '6rem',
 					),
 					array(
-						'name' => '5',
+						'name' => 'X-Large',
 						'slug' => '70',
 						'size' => '24rem',
 					),
@@ -4555,9 +4560,6 @@ public function data_set_spacing_sizes() {
 	 * @param array $expected_output Expected output from data provider.
 	 */
 	public function test_set_spacing_sizes_when_invalid( $spacing_scale, $expected_output ) {
-		$this->expectException( Exception::class );
-		$this->expectExceptionMessage( 'Some of the theme.json settings.spacing.spacingScale values are invalid' );
-
 		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(
 				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
@@ -4566,19 +4568,10 @@ public function test_set_spacing_sizes_when_invalid( $spacing_scale, $expected_o
 						'spacingScale' => $spacing_scale,
 					),
 				),
-			)
-		);
-
-		// Ensure PHPUnit 10 compatibility.
-		set_error_handler(
-			static function ( $errno, $errstr ) {
-				restore_error_handler();
-				throw new Exception( $errstr, $errno );
-			},
-			E_ALL
+			),
+			'default'
 		);
 
-		$theme_json->set_spacing_sizes();
 		$this->assertSame( $expected_output, _wp_array_get( $theme_json->get_raw_data(), array( 'settings', 'spacing', 'spacingSizes', 'default' ) ) );
 	}
 
@@ -4597,7 +4590,7 @@ public function data_set_spacing_sizes_when_invalid() {
 					'mediumStep' => 4,
 					'unit'       => 'rem',
 				),
-				'expected_output' => null,
+				'expected_output' => array(),
 			),
 			'non numeric increment'   => array(
 				'spacing_scale'   => array(
@@ -4607,7 +4600,7 @@ public function data_set_spacing_sizes_when_invalid() {
 					'mediumStep' => 4,
 					'unit'       => 'rem',
 				),
-				'expected_output' => null,
+				'expected_output' => array(),
 			),
 			'non numeric steps'       => array(
 				'spacing_scale'   => array(
@@ -4617,7 +4610,7 @@ public function data_set_spacing_sizes_when_invalid() {
 					'mediumStep' => 4,
 					'unit'       => 'rem',
 				),
-				'expected_output' => null,
+				'expected_output' => array(),
 			),
 			'non numeric medium step' => array(
 				'spacing_scale'   => array(
@@ -4627,7 +4620,7 @@ public function data_set_spacing_sizes_when_invalid() {
 					'mediumStep' => 'That which is just right',
 					'unit'       => 'rem',
 				),
-				'expected_output' => null,
+				'expected_output' => array(),
 			),
 			'missing unit value'      => array(
 				'spacing_scale'   => array(
@@ -4636,7 +4629,7 @@ public function data_set_spacing_sizes_when_invalid() {
 					'steps'      => 5,
 					'mediumStep' => 4,
 				),
-				'expected_output' => null,
+				'expected_output' => array(),
 			),
 		);
 	}
@@ -4682,7 +4675,7 @@ public function data_update_separator_declarations() {
 						'background' => 'blue',
 					),
 				),
-				'expected_output' => static::$base_styles . ':where(.wp-block-separator){background-color: blue;color: blue;}',
+				'expected_output' => static::$base_styles . ':root :where(.wp-block-separator){background-color: blue;color: blue;}',
 			),
 			// If background and text are defined, do not include border-color, as text color is enough.
 			'background and text, no border-color' => array(
@@ -4692,7 +4685,7 @@ public function data_update_separator_declarations() {
 						'text'       => 'red',
 					),
 				),
-				'expected_output' => static::$base_styles . ':where(.wp-block-separator){background-color: blue;color: red;}',
+				'expected_output' => static::$base_styles . ':root :where(.wp-block-separator){background-color: blue;color: red;}',
 			),
 			// If only text is defined, do not include border-color, as by itself is enough.
 			'only text'                            => array(
@@ -4701,7 +4694,7 @@ public function data_update_separator_declarations() {
 						'text' => 'red',
 					),
 				),
-				'expected_output' => static::$base_styles . ':where(.wp-block-separator){color: red;}',
+				'expected_output' => static::$base_styles . ':root :where(.wp-block-separator){color: red;}',
 			),
 			// If background, text, and border-color are defined, include everything, CSS specificity will decide which to apply.
 			'background, text, and border-color'   => array(
@@ -4714,7 +4707,7 @@ public function data_update_separator_declarations() {
 						'color' => 'pink',
 					),
 				),
-				'expected_output' => static::$base_styles . ':where(.wp-block-separator){background-color: blue;border-color: pink;color: red;}',
+				'expected_output' => static::$base_styles . ':root :where(.wp-block-separator){background-color: blue;border-color: pink;color: red;}',
 			),
 			// If background and border color are defined, include everything, CSS specificity will decide which to apply.
 			'background, and border-color'         => array(
@@ -4726,7 +4719,7 @@ public function data_update_separator_declarations() {
 						'color' => 'pink',
 					),
 				),
-				'expected_output' => static::$base_styles . ':where(.wp-block-separator){background-color: blue;border-color: pink;}',
+				'expected_output' => static::$base_styles . ':root :where(.wp-block-separator){background-color: blue;border-color: pink;}',
 			),
 		);
 	}
@@ -4790,7 +4783,7 @@ public function test_get_shadow_styles_for_blocks() {
 		);
 
 		$global_styles   = ':root{--wp--preset--shadow--natural: 5px 5px 0 0 black;}' . static::$base_styles;
-		$element_styles  = ':where(a:where(:not(.wp-element-button))){box-shadow: var(--wp--preset--shadow--natural);}:where(.wp-element-button, .wp-block-button__link){box-shadow: var(--wp--preset--shadow--natural);}:where(p){box-shadow: var(--wp--preset--shadow--natural);}';
+		$element_styles  = ':root :where(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 = $global_styles . $element_styles;
 		$this->assertSame( $expected_styles, $theme_json->get_stylesheet() );
 	}
@@ -4812,8 +4805,7 @@ public function test_get_top_level_background_image_styles() {
 						'core/paragraph' => array(
 							'background' => array(
 								'backgroundImage'    => array(
-									'url'    => 'http://example.org/image.png',
-									'source' => 'file',
+									'url' => 'http://example.org/image.png',
 								),
 								'backgroundSize'     => 'cover',
 								'backgroundRepeat'   => 'no-repeat',
@@ -4837,7 +4829,7 @@ public function test_get_top_level_background_image_styles() {
 			)
 		);
 
-		$expected_styles = ":where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}";
+		$expected_styles = ":where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}";
 		$this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" with top-level background styles type does not match expectations' );
 
 		$theme_json = new WP_Theme_JSON_Gutenberg(
@@ -4854,7 +4846,7 @@ public function test_get_top_level_background_image_styles() {
 			)
 		);
 
-		$expected_styles = ":where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}";
+		$expected_styles = ":where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}";
 		$this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" with top-level background image as string type does not match expectations' );
 	}
 
@@ -4873,7 +4865,7 @@ public function test_get_custom_css_handles_global_custom_css() {
 			)
 		);
 
-		$custom_css = 'body {color:purple;}p{color:red;}';
+		$custom_css = 'body {color:purple;}:root :where(p){color:red;}';
 		$this->assertSame( $custom_css, $theme_json->get_custom_css() );
 	}
 
@@ -4980,7 +4972,7 @@ public function data_process_blocks_custom_css() {
 					'selector' => '.foo',
 					'css'      => 'color: red; margin: auto;',
 				),
-				'expected' => '.foo{color: red; margin: auto;}',
+				'expected' => ':root :where(.foo){color: red; margin: auto;}',
 			),
 			// CSS with nested selectors.
 			'with nested selector'         => array(
@@ -4988,7 +4980,7 @@ public function data_process_blocks_custom_css() {
 					'selector' => '.foo',
 					'css'      => 'color: red; margin: auto; &.one{color: blue;} & .two{color: green;}',
 				),
-				'expected' => '.foo{color: red; margin: auto;}.foo.one{color: blue;}.foo .two{color: green;}',
+				'expected' => ':root :where(.foo){color: red; margin: auto;}:root :where(.foo.one){color: blue;}:root :where(.foo .two){color: green;}',
 			),
 			// CSS with pseudo elements.
 			'with pseudo elements'         => array(
@@ -4996,7 +4988,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' => '.foo{color: red; margin: auto;}.foo::before{color: blue;}.foo ::before{color: green;}.foo.one::before{color: yellow;}.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(
@@ -5004,7 +4996,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' => '.foo, .bar{color: red; margin: auto;}.foo.one, .bar.one{color: blue;}.foo .two, .bar .two{color: green;}.foo::before, .bar::before{color: yellow;}.foo ::before, .bar ::before{color: purple;}.foo.three::before, .bar.three::before{color: orange;}.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::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;}',
 			),
 		);
 	}
diff --git a/phpunit/data/themedir1/block-theme-child-with-block-style-variations/style.css b/phpunit/data/themedir1/block-theme-child-with-block-style-variations/style.css
new file mode 100644
index 0000000000000..c1cc20aaf1f10
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme-child-with-block-style-variations/style.css
@@ -0,0 +1,8 @@
+/*
+Theme Name: Block Theme Child With Block Style Variations Theme
+Theme URI: https://wordpress.org/
+Description: For testing purposes only.
+Template: block-theme
+Version: 1.0.0
+Text Domain: block-theme-child-with-block-style-variations
+*/
diff --git a/phpunit/data/themedir1/block-theme-child-with-block-style-variations/styles/block-style-variation-a.json b/phpunit/data/themedir1/block-theme-child-with-block-style-variations/styles/block-style-variation-a.json
new file mode 100644
index 0000000000000..195321a33b336
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme-child-with-block-style-variations/styles/block-style-variation-a.json
@@ -0,0 +1,10 @@
+{
+	"version": 3,
+	"blockTypes": [ "core/group", "core/columns", "core/media-text" ],
+	"styles": {
+		"color": {
+			"background": "darkcyan",
+			"text": "aliceblue"
+		}
+	}
+}
diff --git a/phpunit/data/themedir1/block-theme-child-with-block-style-variations/theme.json b/phpunit/data/themedir1/block-theme-child-with-block-style-variations/theme.json
new file mode 100644
index 0000000000000..a471d8f326a4a
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme-child-with-block-style-variations/theme.json
@@ -0,0 +1,4 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/theme.json",
+	"version": 3
+}
diff --git a/phpunit/data/themedir1/block-theme/styles/block-style-variation-a.json b/phpunit/data/themedir1/block-theme/styles/block-style-variation-a.json
new file mode 100644
index 0000000000000..356bc4fc3de7d
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme/styles/block-style-variation-a.json
@@ -0,0 +1,10 @@
+{
+	"version": 3,
+	"blockTypes": [ "core/group", "core/columns" ],
+	"styles": {
+		"color": {
+			"background": "indigo",
+			"text": "plum"
+		}
+	}
+}
diff --git a/phpunit/data/themedir1/block-theme/styles/block-style-variation-b.json b/phpunit/data/themedir1/block-theme/styles/block-style-variation-b.json
new file mode 100644
index 0000000000000..8b79948517255
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme/styles/block-style-variation-b.json
@@ -0,0 +1,10 @@
+{
+	"version": 3,
+	"blockTypes": [ "core/group", "core/columns" ],
+	"styles": {
+		"color": {
+			"background": "midnightblue",
+			"text": "lightblue"
+		}
+	}
+}
diff --git a/post-content.php b/post-content.php
index 0bdeb30733f6c..3c9b18087b0e8 100644
--- a/post-content.php
+++ b/post-content.php
@@ -61,7 +61,7 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul>
+<ul class="wp-block-list">
 	<li><?php _e( 'Text &amp; Headings', 'gutenberg' ); ?></li>
 	<li><?php _e( 'Images &amp; Videos', 'gutenberg' ); ?></li>
 	<li><?php _e( 'Galleries', 'gutenberg' ); ?></li>
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index 755fb09e57e3c..bdfea7279f67a 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -286,6 +286,32 @@
 							"type": "boolean",
 							"default": false
 						},
+						"defaultAspectRatios": {
+							"description": "Allow users to choose aspect ratios from the default set of aspect ratios.",
+							"type": "boolean",
+							"default": true
+						},
+						"aspectRatios": {
+							"description": "Allow users to define aspect ratios for some blocks.",
+							"type": "array",
+							"items": {
+								"type": "object",
+								"properties": {
+									"name": {
+										"description": "Name of the aspect ratio preset.",
+										"type": "string"
+									},
+									"slug": {
+										"description": "Kebab-case unique identifier for the aspect ratio preset.",
+										"type": "string"
+									},
+									"ratio": {
+										"description": "Aspect ratio expressed as a division or decimal.",
+										"type": "string"
+									}
+								}
+							}
+						},
 						"minHeight": {
 							"description": "Allow users to set custom minimum height.",
 							"type": "boolean",
@@ -402,6 +428,11 @@
 							"type": "boolean",
 							"default": true
 						},
+						"defaultSpacingSizes": {
+							"description": "Allow users to choose space sizes from the default space size presets.",
+							"type": "boolean",
+							"default": true
+						},
 						"spacingSizes": {
 							"description": "Space size presets for the space size selector.\nGenerates a custom property (`--wp--preset--spacing--{slug}`) per preset value.",
 							"type": "array",
@@ -413,8 +444,9 @@
 										"type": "string"
 									},
 									"slug": {
-										"description": "Unique identifier for the space size preset. For best cross theme compatibility these should be in the form '10','20','30','40','50','60', etc. with '50' representing the 'Medium' size step.",
-										"type": "string"
+										"description": "Unique identifier for the space size preset. Will be sorted numerically. For best cross theme compatibility these should be in the form '10','20','30','40','50','60', etc. with '50' representing the 'Medium' size step.",
+										"type": "string",
+										"pattern": "^[0-9].*$"
 									},
 									"size": {
 										"description": "CSS space-size value, including units.",
@@ -437,16 +469,22 @@
 								"increment": {
 									"description": "The amount to increment each step by.",
 									"type": "number",
+									"exclusiveMinimum": true,
+									"minimum": 0,
 									"default": 1.5
 								},
 								"steps": {
 									"description": "Number of steps to generate in scale.",
 									"type": "integer",
+									"minimum": 1,
+									"maximum": 10,
 									"default": 7
 								},
 								"mediumStep": {
 									"description": "The value to medium setting in the scale.",
 									"type": "number",
+									"exclusiveMinimum": true,
+									"minimum": 0,
 									"default": 1.5
 								},
 								"unit": {
@@ -1901,6 +1939,9 @@
 		"stylesBlocksPropertiesComplete": {
 			"type": "object",
 			"properties": {
+				"variations": {
+					"$ref": "#/definitions/stylesBlocksSharedVariationProperties"
+				},
 				"core/archives": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
@@ -2224,20 +2265,420 @@
 							"$ref": "#/definitions/stylesElementsPropertiesComplete"
 						},
 						"variations": {
-							"$ref": "#/definitions/stylesVariationPropertiesComplete"
+							"$ref": "#/definitions/stylesVariationsPropertiesComplete"
 						}
 					},
 					"additionalProperties": false
 				}
 			]
 		},
-		"stylesVariationPropertiesComplete": {
+		"stylesBlocksSharedVariationProperties": {
 			"type": "object",
 			"patternProperties": {
 				"^[a-z][a-z0-9-]*$": {
-					"$ref": "#/definitions/stylesPropertiesComplete"
+					"$ref": "#/definitions/stylesSharedVariationProperties"
 				}
 			}
+		},
+		"stylesSharedVariationProperties": {
+			"type": "object",
+			"allOf": [
+				{
+					"$ref": "#/definitions/stylesProperties"
+				},
+				{
+					"properties": {
+						"blockTypes": {
+							"type": "array",
+							"items": {
+								"type": "string"
+							}
+						},
+						"border": {},
+						"color": {},
+						"dimensions": {},
+						"spacing": {},
+						"typography": {},
+						"filter": {},
+						"shadow": {},
+						"outline": {},
+						"css": {},
+						"elements": {
+							"$ref": "#/definitions/stylesElementsPropertiesComplete"
+						},
+						"blocks": {
+							"$ref": "#/definitions/stylesVariationBlocksPropertiesComplete"
+						}
+					},
+					"additionalProperties": false
+				}
+			]
+		},
+		"stylesVariationsPropertiesComplete": {
+			"type": "object",
+			"patternProperties": {
+				"^[a-z][a-z0-9-]*$": {
+					"$ref": "#/definitions/stylesVariationPropertiesComplete"
+				}
+			}
+		},
+		"stylesVariationPropertiesComplete": {
+			"type": "object",
+			"allOf": [
+				{
+					"$ref": "#/definitions/stylesProperties"
+				},
+				{
+					"properties": {
+						"border": {},
+						"color": {},
+						"dimensions": {},
+						"spacing": {},
+						"typography": {},
+						"filter": {},
+						"shadow": {},
+						"outline": {},
+						"css": {},
+						"elements": {
+							"$ref": "#/definitions/stylesElementsPropertiesComplete"
+						},
+						"blocks": {
+							"$ref": "#/definitions/stylesVariationBlocksPropertiesComplete"
+						}
+					},
+					"additionalProperties": false
+				}
+			]
+		},
+		"stylesVariationBlocksPropertiesComplete": {
+			"type": "object",
+			"properties": {
+				"core/archives": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/audio": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/avatar": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/block": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/button": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/buttons": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/calendar": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/categories": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/code": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/column": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/columns": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comment-author-avatar": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comment-author-name": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comment-content": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comment-date": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comment-edit-link": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comment-reply-link": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comments": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comments-pagination": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comments-pagination-next": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comments-pagination-numbers": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comments-pagination-previous": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comments-title": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comment-template": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/cover": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/details": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/embed": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/file": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/freeform": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/gallery": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/group": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/heading": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/home-link": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/html": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/image": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/latest-comments": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/latest-posts": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/list": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/list-item": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/loginout": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/media-text": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/missing": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/more": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/navigation": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/navigation-link": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/navigation-submenu": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/nextpage": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/page-list": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/page-list-item": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/paragraph": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-author": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-author-biography": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-author-name": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-comment": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-comments-count": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-comments-form": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-comments-link": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-content": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-date": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-excerpt": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-featured-image": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-navigation-link": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-template": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-terms": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-time-to-read": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-title": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/preformatted": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/pullquote": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/query": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/query-no-results": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/query-pagination": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/query-pagination-next": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/query-pagination-numbers": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/query-pagination-previous": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/query-title": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/quote": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/read-more": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/rss": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/search": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/separator": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/shortcode": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/site-logo": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/site-tagline": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/site-title": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/social-link": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/social-links": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/spacer": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/table": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/table-of-contents": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/tag-cloud": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/template-part": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/term-description": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/text-columns": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/verse": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/video": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/widget-area": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/legacy-widget": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/widget-group": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				}
+			},
+			"patternProperties": {
+				"^[a-z][a-z0-9-]*/[a-z][a-z0-9-]*$": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				}
+			},
+			"additionalProperties": false
+		},
+		"stylesVariationBlockPropertiesComplete": {
+			"type": "object",
+			"allOf": [
+				{
+					"$ref": "#/definitions/stylesProperties"
+				},
+				{
+					"properties": {
+						"border": {},
+						"color": {},
+						"dimensions": {},
+						"spacing": {},
+						"typography": {},
+						"filter": {},
+						"shadow": {},
+						"outline": {},
+						"css": {},
+						"elements": {
+							"$ref": "#/definitions/stylesElementsPropertiesComplete"
+						}
+					},
+					"additionalProperties": false
+				}
+			]
 		}
 	},
 	"type": "object",
@@ -2259,6 +2700,13 @@
 			"type": "string",
 			"description": "Description of the global styles variation."
 		},
+		"blockTypes": {
+			"type": "array",
+			"description": "List of block types that can use the block style variation this theme.json file represents.",
+			"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",
@@ -2325,18 +2773,12 @@
 									"description": "Sets the `background-image` CSS property.",
 									"oneOf": [
 										{
-											"description": "A valid CSS value for the background-image property.",
+											"description": "A valid CSS value for the background-image property, or a path to a file relative to the theme root directory, and prefixed with `file:`, e.g., 'file:./path/to/file.png'.",
 											"type": "string"
 										},
 										{
 											"type": "object",
 											"properties": {
-												"source": {
-													"description": "The origin of the image. 'file' denotes that the 'url' is a path to an image or other file.",
-													"type": "string",
-													"enum": [ "file" ],
-													"default": "file"
-												},
 												"url": {
 													"description": "A URL to an image file.",
 													"type": "string"
diff --git a/storybook/badges.js b/storybook/badges.js
index 7787a9a67121e..abde7948c923a 100644
--- a/storybook/badges.js
+++ b/storybook/badges.js
@@ -1,6 +1,12 @@
 /**
  * Provides badge configuration options.
- * See https://github.com/geometricpanda/storybook-addon-badges
+ *
+ * To apply a badge to a story, add a badge identifier prefixed by "status-" to
+ * the `tags` array in the story's metadata. For example, to apply the "private"
+ * badge, add "status-private" to the `tags` array.
+ *
+ * @see https://github.com/geometricpanda/storybook-addon-badges
+ * @see './webpack/copy-tags-to-badges.js' - Webpack loader that processes the tags
  */
 
 export default {
diff --git a/storybook/decorators/with-global-css.js b/storybook/decorators/with-global-css.js
index 680f3359e0aad..d3d283234be1e 100644
--- a/storybook/decorators/with-global-css.js
+++ b/storybook/decorators/with-global-css.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -14,6 +9,11 @@ import { useEffect } from '@wordpress/element';
 import basicStyles from '../global-basic.lazy.scss';
 import wordPressStyles from '../global-wordpress.lazy.scss';
 
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * A Storybook decorator to inject global CSS.
  *
@@ -59,7 +59,7 @@ export const WithGlobalCSS = ( Story, context ) => {
 	}, [ context.globals.css ] );
 
 	return (
-		<div className={ classnames( classes ) }>
+		<div className={ clsx( classes ) }>
 			{ externalStyles.map( ( stylesheet ) => (
 				<link key={ stylesheet } rel="stylesheet" href={ stylesheet } />
 			) ) }
diff --git a/storybook/main.js b/storybook/main.js
index 97f974b40027e..66e951b26b1de 100644
--- a/storybook/main.js
+++ b/storybook/main.js
@@ -74,12 +74,23 @@ module.exports = {
 				rules: [
 					...config.module.rules,
 					{
-						// Adds a `sourceLink` parameter to the story metadata, based on the file path
 						test: /\/stories\/.+\.story\.(j|t)sx?$/,
-						loader: path.resolve(
-							__dirname,
-							'./webpack/source-link-loader.js'
-						),
+						use: [
+							{
+								// Adds a `sourceLink` parameter to the story metadata, based on the file path
+								loader: path.resolve(
+									__dirname,
+									'./webpack/source-link-loader.js'
+								),
+							},
+							{
+								// Reads `tags` from the story metadata and copies them to `badges`
+								loader: path.resolve(
+									__dirname,
+									'./webpack/copy-tags-to-badges.js'
+								),
+							},
+						],
 						enforce: 'post',
 					},
 					{
diff --git a/storybook/manager-head.html b/storybook/manager-head.html
index 9515e4cbf2f5f..ab9c1a7101071 100644
--- a/storybook/manager-head.html
+++ b/storybook/manager-head.html
@@ -3,6 +3,8 @@
 		const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [
 			'navigation',
 			'customselectcontrol-v2',
+			'theme',
+			'progressbar',
 		];
 		const REDIRECTS = [
 			{
diff --git a/storybook/stories/playground/with-undo-redo/index.js b/storybook/stories/playground/with-undo-redo/index.js
index 8bef2d184f8c5..c2b2781cd31e4 100644
--- a/storybook/stories/playground/with-undo-redo/index.js
+++ b/storybook/stories/playground/with-undo-redo/index.js
@@ -49,12 +49,14 @@ export default function EditorWithUndoRedo() {
 					<Button
 						onClick={ undo }
 						disabled={ ! hasUndo }
+						__experimentalIsFocusable
 						icon={ undoIcon }
 						label="Undo"
 					/>
 					<Button
 						onClick={ redo }
 						disabled={ ! hasRedo }
+						__experimentalIsFocusable
 						icon={ redoIcon }
 						label="Redo"
 					/>
diff --git a/storybook/webpack/copy-tags-to-badges.js b/storybook/webpack/copy-tags-to-badges.js
new file mode 100644
index 0000000000000..07dc068135cc5
--- /dev/null
+++ b/storybook/webpack/copy-tags-to-badges.js
@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+const babel = require( '@babel/core' );
+
+/**
+ * Reads `tags` from the story metadata and copies them to `badges`.
+ *
+ * @see https://github.com/geometricpanda/storybook-addon-badges
+ * @see '../badges.js' - Badges config
+ */
+function copyTagsToBadgePlugin() {
+	return {
+		visitor: {
+			ExportDefaultDeclaration( visitorPath ) {
+				const properties =
+					// When default export is anonymous, the declaration is an object expression
+					visitorPath.node?.declaration.properties ??
+					// When default export is named, the declaration is an identifier, usually the previous node
+					visitorPath.getPrevSibling().node.declarations[ 0 ].init
+						.properties;
+
+				alterParameters( properties );
+			},
+		},
+	};
+}
+
+function alterParameters( properties ) {
+	const STATUS_PREFIX = 'status-';
+
+	const tags =
+		properties
+			.find( ( op ) => op.key.name === 'tags' )
+			?.value.elements.map( ( tag ) => tag.value ) ?? [];
+	const statusTags = tags.filter( ( tag ) =>
+		tag.startsWith( STATUS_PREFIX )
+	);
+
+	const badges = babel.types.objectProperty(
+		babel.types.identifier( 'badges' ),
+		babel.types.arrayExpression(
+			statusTags.map( ( tag ) =>
+				babel.types.stringLiteral(
+					tag.substring( STATUS_PREFIX.length )
+				)
+			)
+		)
+	);
+
+	let parameters = properties.find( ( op ) => op.key.name === 'parameters' );
+
+	if ( ! parameters ) {
+		parameters = babel.types.objectProperty(
+			babel.types.identifier( 'parameters' ),
+			babel.types.objectExpression( [] )
+		);
+		properties.push( parameters );
+	}
+
+	parameters.value.properties = [ badges, ...parameters.value.properties ];
+}
+
+module.exports = function ( source ) {
+	const output = babel.transform( source, {
+		plugins: [ copyTagsToBadgePlugin ],
+		filename: this.resourcePath,
+		sourceType: 'module',
+	} );
+	return output.code;
+};
diff --git a/test/e2e/specs/editor/blocks/columns.spec.js b/test/e2e/specs/editor/blocks/columns.spec.js
index 8ddf7e9377ff2..e322a52eeba10 100644
--- a/test/e2e/specs/editor/blocks/columns.spec.js
+++ b/test/e2e/specs/editor/blocks/columns.spec.js
@@ -40,7 +40,7 @@ test.describe( 'Columns', () => {
 
 		// Verify Column
 		const inserterOptions = page.locator(
-			'role=region[name="Block Library"i] >> role=option'
+			'role=region[name="Block Library"i] >> .block-editor-inserter__insertable-blocks-at-selection >> role=option'
 		);
 		await expect( inserterOptions ).toHaveCount( 1 );
 		await expect( inserterOptions ).toHaveText( 'Column' );
diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js
index 24fff3e579f68..3cb1565c8d416 100644
--- a/test/e2e/specs/editor/blocks/image.spec.js
+++ b/test/e2e/specs/editor/blocks/image.spec.js
@@ -327,7 +327,7 @@ test.describe( 'Image', () => {
 		await editor.clickBlockToolbarButton( 'Crop' );
 		await editor.clickBlockToolbarButton( 'Aspect Ratio' );
 		await page.click(
-			'role=menu[name="Aspect Ratio"i] >> role=menuitemradio[name="16:9"i]'
+			'role=menu[name="Aspect Ratio"i] >> role=menuitemradio[name="Wide - 16:9"i]'
 		);
 		await editor.clickBlockToolbarButton( 'Apply' );
 
@@ -424,6 +424,9 @@ test.describe( 'Image', () => {
 		page,
 		editor,
 	} ) => {
+		// This is a temp workaround for dragging and dropping images from the inserter.
+		// This should be removed when we have the zoom out view for media categories.
+		await page.setViewportSize( { width: 1400, height: 800 } );
 		await editor.insertBlock( { name: 'core/image' } );
 		const imageBlock = editor.canvas.getByRole( 'document', {
 			name: 'Block: Image',
@@ -842,552 +845,97 @@ test.describe( 'Image', () => {
 	} );
 } );
 
-// Skipping these tests for now as we plan
-// to update them to use the new lightbox syntax
-// once it's merged -- see the following PRs
-// https://github.com/WordPress/gutenberg/pull/53851
-// https://github.com/WordPress/gutenberg/pull/54071
-test.describe.skip( 'Image - interactivity', () => {
+test.describe( 'Image - lightbox', () => {
+	let uploadedMedia;
+
 	test.beforeAll( async ( { requestUtils } ) => {
 		await requestUtils.deleteAllMedia();
+		uploadedMedia = await requestUtils.uploadMedia(
+			path.resolve(
+				process.cwd(),
+				'test/e2e/assets/10x10_e2e_test_image_z9T8jK.png'
+			)
+		);
 	} );
 
 	test.afterAll( async ( { requestUtils } ) => {
 		await requestUtils.deleteAllMedia();
 	} );
 
-	test.beforeEach( async ( { admin, editor } ) => {
+	test.beforeEach( async ( { admin } ) => {
 		await admin.createNewPost();
-		await editor.insertBlock( { name: 'core/image' } );
 	} );
 
-	test.afterEach( async ( { requestUtils } ) => {
-		await requestUtils.deleteAllMedia();
-	} );
-
-	test.describe( 'tests using uploaded image', () => {
-		let filename = null;
-
-		test( 'should toggle "lightbox" in saved attributes', async ( {
-			editor,
-			page,
-			imageBlockUtils,
-		} ) => {
-			const imageBlock = editor.canvas.locator(
-				'role=document[name="Block: Image"i]'
-			);
-			await expect( imageBlock ).toBeVisible();
-
-			filename = await imageBlockUtils.upload(
-				imageBlock.locator( 'data-testid=form-file-upload-input' )
-			);
-			const image = imageBlock.locator( 'role=img' );
-			await expect( image ).toBeVisible();
-			await expect( image ).toHaveAttribute(
-				'src',
-				new RegExp( filename )
-			);
-
-			await editor.openDocumentSettingsSidebar();
-
-			await page.getByRole( 'button', { name: 'Advanced' } ).click();
-			await page
-				.getByRole( 'combobox', { name: 'Behaviors' } )
-				.selectOption( 'lightbox' );
-
-			let blocks = await editor.getBlocks();
-			expect( blocks[ 0 ].attributes ).toMatchObject( {
-				behaviors: {
-					lightbox: {
-						animation: 'zoom',
-						enabled: true,
-					},
-				},
-				linkDestination: 'none',
-			} );
-			expect( blocks[ 0 ].attributes.url ).toContain( filename );
-
-			await page.getByLabel( 'Behaviors' ).selectOption( '' );
-			blocks = await editor.getBlocks();
-			expect( blocks[ 0 ].attributes ).toMatchObject( {
-				behaviors: {
-					lightbox: {
-						animation: '',
-						enabled: false,
-					},
-				},
-				linkDestination: 'none',
-			} );
-			expect( blocks[ 0 ].attributes.url ).toContain( filename );
-		} );
-
-		test.describe( 'should open and close the image in a lightbox when using a mouse and dynamically load src', () => {
-			test( 'zoom animation', async ( {
-				editor,
-				page,
-				imageBlockUtils,
-			} ) => {
-				const imageBlock = editor.canvas.locator(
-					'role=document[name="Block: Image"i]'
-				);
-				await expect( imageBlock ).toBeVisible();
-
-				filename = await imageBlockUtils.upload(
-					imageBlock.locator( 'data-testid=form-file-upload-input' ),
-					'3200x2400_e2e_test_image_responsive_lightbox.jpeg'
-				);
-				const image = imageBlock.locator( 'role=img' );
-				await expect( image ).toBeVisible();
-				await expect( image ).toHaveAttribute(
-					'src',
-					new RegExp( filename ),
-					{ timeout: 10_000 }
-				);
-
-				await editor.openDocumentSettingsSidebar();
-
-				await page.getByRole( 'button', { name: 'Advanced' } ).click();
-				await page
-					.getByRole( 'combobox', { name: 'Behaviors' } )
-					.selectOption( 'lightbox' );
-
-				await page
-					.getByRole( 'combobox', { name: 'Animation' } )
-					.selectOption( 'zoom' );
-
-				const postId = await editor.publishPost();
-				await page.goto( `/?p=${ postId }` );
-
-				// getByRole() doesn't work for the image here for
-				// some reason, so let's use locators instead
-				const contentFigure = page.locator( '.entry-content figure' );
-				const contentImage = page.locator(
-					'.entry-content figure img'
-				);
-
-				const wpContext =
-					await contentFigure.getAttribute( 'data-wp-context' );
-
-				const imageUploadedSrc =
-					JSON.parse( wpContext ).core.image.imageUploadedSrc;
-
-				const contentImageCurrentSrc = await contentImage.evaluate(
-					( img ) => img.currentSrc
-				);
-
-				const lightbox = page.locator( '.wp-lightbox-overlay' );
-				await expect( lightbox ).toBeHidden();
-				const responsiveImage = lightbox.locator(
-					'.responsive-image img'
-				);
-				const enlargedImage = lightbox.locator( '.enlarged-image img' );
-
-				await expect( responsiveImage ).toHaveAttribute(
-					'src',
-					contentImageCurrentSrc
-				);
-				await expect( enlargedImage ).toHaveAttribute( 'src', '' );
-
-				await page
-					.getByRole( 'button', { name: 'Enlarge image' } )
-					.click();
-
-				await expect( responsiveImage ).toHaveAttribute(
-					'src',
-					contentImageCurrentSrc
-				);
-				await expect( enlargedImage ).toHaveAttribute(
-					'src',
-					imageUploadedSrc
+	test.describe( 'should respect theme.json settings and block overrides', () => {
+		test.describe( 'Theme.json settings - allow editing FALSE, enabled FALSE', () => {
+			test.beforeAll( async ( { requestUtils } ) => {
+				await requestUtils.activatePlugin(
+					'lightbox-allow-editing-false-enabled-false'
 				);
-
-				await expect( lightbox ).toBeVisible();
-
-				// Use page.evaluate to get the content of the style tag
-				const styleTagContent = await page.evaluate( () => {
-					const styleTag = document.querySelector(
-						'style#wp-lightbox-styles'
-					);
-					return styleTag ? styleTag.textContent : '';
-				} );
-
-				// Define the keys you want to check for
-				const keysToCheck = [
-					'--wp--lightbox-initial-top-position',
-					'--wp--lightbox-initial-left-position',
-					'--wp--lightbox-container-width',
-					'--wp--lightbox-container-height',
-					'--wp--lightbox-image-width',
-					'--wp--lightbox-image-height',
-					'--wp--lightbox-scale',
-				];
-
-				// Check if all the keys are present in the style tag's content
-				const keysPresent = keysToCheck.every( ( key ) =>
-					styleTagContent.includes( key )
-				);
-
-				expect( keysPresent ).toBe( true );
-
-				const closeButton = lightbox.getByRole( 'button', {
-					name: 'Close',
-				} );
-				await closeButton.click();
-
-				await expect( responsiveImage ).toHaveAttribute(
-					'src',
-					contentImageCurrentSrc
-				);
-				await expect( enlargedImage ).toHaveAttribute(
-					'src',
-					imageUploadedSrc
-				);
-
-				await expect( lightbox ).toBeHidden();
-			} );
-		} );
-
-		test( 'lightbox should be overriden when link is configured for image', async ( {
-			editor,
-			page,
-			imageBlockUtils,
-		} ) => {
-			const imageBlock = editor.canvas.locator(
-				'role=document[name="Block: Image"i]'
-			);
-			await expect( imageBlock ).toBeVisible();
-
-			filename = await imageBlockUtils.upload(
-				imageBlock.locator( 'data-testid=form-file-upload-input' )
-			);
-			const image = imageBlock.locator( 'role=img' );
-			await expect( image ).toBeVisible();
-			await expect( image ).toHaveAttribute(
-				'src',
-				new RegExp( filename )
-			);
-
-			await editor.openDocumentSettingsSidebar();
-
-			await page.getByRole( 'button', { name: 'Advanced' } ).click();
-			const behaviorSelect = page.getByRole( 'combobox', {
-				name: 'Behaviors',
 			} );
-			await behaviorSelect.selectOption( 'lightbox' );
-
-			await page
-				.getByLabel( 'Block tools' )
-				.getByLabel( 'Insert link' )
-				.click();
-
-			const form = page.locator(
-				'.block-editor-url-popover__link-editor'
-			);
-
-			const url = 'https://wordpress.org';
-
-			await form.getByLabel( 'URL' ).fill( url );
-
-			await form.getByRole( 'button', { name: 'Apply' } ).click();
-			await expect( behaviorSelect ).toBeDisabled();
-
-			const postId = await editor.publishPost();
-			await page.goto( `/?p=${ postId }` );
-
-			// The lightbox markup should not appear in the DOM at all
-			await expect(
-				page.getByRole( 'button', { name: 'Enlarge image' } )
-			).not.toBeInViewport();
-		} );
-
-		test( 'markup should not appear if Lightbox is disabled', async ( {
-			editor,
-			page,
-			imageBlockUtils,
-		} ) => {
-			const imageBlock = editor.canvas.locator(
-				'role=document[name="Block: Image"i]'
-			);
-			await expect( imageBlock ).toBeVisible();
 
-			filename = await imageBlockUtils.upload(
-				imageBlock.locator( 'data-testid=form-file-upload-input' )
-			);
-			const image = imageBlock.locator( 'role=img' );
-			await expect( image ).toBeVisible();
-			await expect( image ).toHaveAttribute(
-				'src',
-				new RegExp( filename )
-			);
-
-			await editor.openDocumentSettingsSidebar();
-
-			await page.getByRole( 'button', { name: 'Advanced' } ).click();
-			const behaviorSelect = page.getByRole( 'combobox', {
-				name: 'Behaviors',
+			test.afterAll( async ( { requestUtils } ) => {
+				await requestUtils.deactivatePlugin(
+					'lightbox-allow-editing-false-enabled-false'
+				);
 			} );
-			await behaviorSelect.selectOption( '' );
 
-			const postId = await editor.publishPost();
-			await page.goto( `/?p=${ postId }` );
-
-			// The lightbox markup should not appear in the DOM at all
-			await expect(
-				page.getByRole( 'button', { name: 'Enlarge image' } )
-			).not.toBeInViewport();
-		} );
-
-		test.describe( 'Animation Select visibility', () => {
-			test( 'Animation selector should appear if Behavior is Lightbox', async ( {
+			test( 'Block settings - link DISABLED, lightbox UNDEFINED - should hide UI when block override is undefined', async ( {
 				editor,
 				page,
-				imageBlockUtils,
 			} ) => {
-				const imageBlock = editor.canvas.locator(
-					'role=document[name="Block: Image"i]'
-				);
-				await expect( imageBlock ).toBeVisible();
+				await editor.setContent( `<!-- wp:image {"id":${ uploadedMedia.id },"sizeSlug":"full","linkDestination":"none"} -->
+				<figure class="wp-block-image size-full"><img src="${ uploadedMedia.source_url }" alt="" class="wp-image-${ uploadedMedia.id }"/></figure>
+				<!-- /wp:image --> ` );
 
-				filename = await imageBlockUtils.upload(
-					imageBlock.locator( 'data-testid=form-file-upload-input' )
-				);
-				const image = imageBlock.locator( 'role=img' );
-				await expect( image ).toBeVisible();
-				await expect( image ).toHaveAttribute(
-					'src',
-					new RegExp( filename )
-				);
-
-				await editor.openDocumentSettingsSidebar();
-
-				await page.getByRole( 'button', { name: 'Advanced' } ).click();
-				const behaviorSelect = page.getByRole( 'combobox', {
-					name: 'Behaviors',
-				} );
-				await behaviorSelect.selectOption( 'lightbox' );
-				await expect(
-					page.getByRole( 'combobox', {
-						name: 'Animation',
-					} )
-				).toBeVisible();
-			} );
-			test( 'Animation selector should NOT appear if Behavior is None', async ( {
-				page,
-				editor,
-				imageBlockUtils,
-			} ) => {
 				const imageBlock = editor.canvas.locator(
 					'role=document[name="Block: Image"i]'
 				);
-				await expect( imageBlock ).toBeVisible();
 
-				filename = await imageBlockUtils.upload(
-					imageBlock.locator( 'data-testid=form-file-upload-input' )
-				);
-				const image = imageBlock.locator( 'role=img' );
-				await expect( image ).toBeVisible();
-				await expect( image ).toHaveAttribute(
-					'src',
-					new RegExp( filename )
-				);
-
-				await editor.openDocumentSettingsSidebar();
+				await imageBlock.click();
+				await page
+					.getByLabel( 'Block tools' )
+					.getByLabel( 'Link' )
+					.click();
 
-				await page.getByRole( 'button', { name: 'Advanced' } ).click();
-				const behaviorSelect = page.getByRole( 'combobox', {
-					name: 'Behaviors',
-				} );
-				await behaviorSelect.selectOption( '' );
 				await expect(
-					page.getByRole( 'combobox', {
-						name: 'Animation',
+					page.getByRole( 'menuitem', {
+						name: 'Expand on click',
 					} )
 				).toBeHidden();
 			} );
-			test( 'Animation selector should NOT appear if Behavior is Default', async ( {
-				page,
+
+			test( 'Block settings - link DISABLED, lightbox ENABLED - should show UI while block override is active, but hide UI if override is removed', async ( {
 				editor,
-				imageBlockUtils,
+				page,
 			} ) => {
+				await editor.setContent( `<!-- wp:image {"id":${ uploadedMedia.id },"sizeSlug":"full","linkDestination":"none","lightbox":{"enabled":true}} -->
+				<figure class="wp-block-image size-full"><img src="${ uploadedMedia.source_url }" alt="" class="wp-image-${ uploadedMedia.id }"/></figure>
+				<!-- /wp:image --> ` );
+
 				const imageBlock = editor.canvas.locator(
 					'role=document[name="Block: Image"i]'
 				);
-				await expect( imageBlock ).toBeVisible();
 
-				filename = await imageBlockUtils.upload(
-					imageBlock.locator( 'data-testid=form-file-upload-input' )
-				);
-				const image = imageBlock.locator( 'role=img' );
-				await expect( image ).toBeVisible();
-				await expect( image ).toHaveAttribute(
-					'src',
-					new RegExp( filename )
-				);
+				await imageBlock.click();
+				await page
+					.getByLabel( 'Block tools' )
+					.getByLabel( 'Link' )
+					.click();
 
-				await editor.openDocumentSettingsSidebar();
+				await page
+					.getByRole( 'button', {
+						name: 'Disable expand on click',
+					} )
+					.click();
 
-				await page.getByRole( 'button', { name: 'Advanced' } ).click();
-				const behaviorSelect = page.getByRole( 'combobox', {
-					name: 'Behaviors',
-				} );
-				await behaviorSelect.selectOption( 'default' );
 				await expect(
-					page.getByRole( 'combobox', {
-						name: 'Animation',
+					page.getByRole( 'menuitem', {
+						name: 'Expand on click',
 					} )
 				).toBeHidden();
 			} );
 		} );
-
-		test.describe( 'keyboard navigation', () => {
-			let openLightboxButton;
-			let lightbox;
-			let closeButton;
-
-			test.beforeEach( async ( { page, editor, imageBlockUtils } ) => {
-				const imageBlock = editor.canvas.locator(
-					'role=document[name="Block: Image"i]'
-				);
-				await expect( imageBlock ).toBeVisible();
-
-				filename = await imageBlockUtils.upload(
-					imageBlock.locator( 'data-testid=form-file-upload-input' )
-				);
-				const image = imageBlock.locator( 'role=img' );
-				await expect( image ).toBeVisible();
-				await expect( image ).toHaveAttribute(
-					'src',
-					new RegExp( filename )
-				);
-
-				await editor.openDocumentSettingsSidebar();
-
-				await page.getByRole( 'button', { name: 'Advanced' } ).click();
-				await page
-					.getByRole( 'combobox', { name: 'Behaviors' } )
-					.selectOption( 'lightbox' );
-
-				const postId = await editor.publishPost();
-				await page.goto( `/?p=${ postId }` );
-
-				openLightboxButton = page.getByRole( 'button', {
-					name: 'Enlarge image',
-				} );
-				lightbox = page.getByRole( 'dialog' );
-				closeButton = lightbox.getByRole( 'button', {
-					name: 'Close',
-				} );
-			} );
-
-			test( 'should open and focus appropriately using enter key', async ( {
-				page,
-			} ) => {
-				// Open and close lightbox using the close button
-				await openLightboxButton.focus();
-				await page.keyboard.press( 'Enter' );
-				await expect( lightbox ).toBeVisible();
-				await expect( closeButton ).toBeFocused();
-			} );
-
-			test( 'should close and focus appropriately using enter key on close button', async ( {
-				page,
-			} ) => {
-				// Open and close lightbox using the close button
-				await openLightboxButton.focus();
-				await page.keyboard.press( 'Enter' );
-				await expect( lightbox ).toBeVisible();
-				await expect( closeButton ).toBeFocused();
-				await page.keyboard.press( 'Enter' );
-				await expect( lightbox ).toBeHidden();
-				await expect( openLightboxButton ).toBeFocused();
-			} );
-
-			test( 'should close and focus appropriately using escape key', async ( {
-				page,
-			} ) => {
-				await openLightboxButton.focus();
-				await page.keyboard.press( 'Enter' );
-				await expect( lightbox ).toBeVisible();
-				await expect( closeButton ).toBeFocused();
-				await page.keyboard.press( 'Escape' );
-				await expect( lightbox ).toBeHidden();
-				await expect( openLightboxButton ).toBeFocused();
-			} );
-
-			// TO DO: Add these tests, which will involve adding a caption
-			// to uploaded test images
-			// test( 'should trap focus appropriately when using tab', async ( {
-			// 	page,
-			// } ) => {
-
-			// } );
-
-			// test( 'should trap focus appropriately using shift+tab', async ( {
-			// 	page,
-			// } ) => {
-
-			// } );
-		} );
-	} );
-
-	test( 'lightbox should work as expected when inserting image from URL', async ( {
-		editor,
-		page,
-	} ) => {
-		await editor.openDocumentSettingsSidebar();
-
-		const imageBlockFromUrl = editor.canvas.locator(
-			'role=document[name="Block: Image"i]'
-		);
-		await expect( imageBlockFromUrl ).toBeVisible();
-
-		await imageBlockFromUrl
-			.getByRole( 'button' )
-			.filter( { hasText: 'Insert from URL' } )
-			.click();
-
-		const form = page.locator(
-			'.block-editor-media-placeholder__url-input-form'
-		);
-
-		const imgUrl =
-			'https://wp20.wordpress.net/wp-content/themes/twentyseventeen-wp20/images/wp20-logo-white.svg';
-
-		await form.getByLabel( 'URL' ).fill( imgUrl );
-
-		await form.getByRole( 'button', { name: 'Apply' } ).click();
-
-		const image = imageBlockFromUrl.locator( 'role=img' );
-		await expect( image ).toBeVisible();
-		await expect( image ).toHaveAttribute( 'src', imgUrl );
-
-		await page.getByRole( 'button', { name: 'Advanced' } ).click();
-		await page
-			.getByRole( 'combobox', { name: 'Behaviors' } )
-			.selectOption( 'lightbox' );
-
-		const postId = await editor.publishPost();
-		await page.goto( `/?p=${ postId }` );
-
-		const lightbox = page.locator( '.wp-lightbox-overlay' );
-		const responsiveImage = lightbox.locator( '.responsive-image img' );
-		const enlargedImage = lightbox.locator( '.enlarged-image img' );
-
-		await expect( responsiveImage ).toHaveAttribute(
-			'src',
-			new RegExp( imgUrl )
-		);
-		await expect( enlargedImage ).toHaveAttribute( 'src', '' );
-
-		await page.getByRole( 'button', { name: 'Enlarge image' } ).click();
-
-		await expect( responsiveImage ).toHaveAttribute( 'src', imgUrl );
-		await expect( enlargedImage ).toHaveAttribute( 'src', imgUrl );
-
-		await page.getByRole( 'button', { name: 'Close' } ).click();
-
-		await expect( responsiveImage ).toHaveAttribute( 'src', imgUrl );
-		await expect( enlargedImage ).toHaveAttribute( 'src', imgUrl );
 	} );
 } );
 
@@ -1398,12 +946,12 @@ test.describe( 'Image - Site editor', () => {
 		await requestUtils.activateTheme( 'emptytheme' );
 	} );
 
-	test.beforeEach( async ( { admin, editor } ) => {
+	test.beforeEach( async ( { admin } ) => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editor.canvas.locator( 'body' ).click();
 	} );
 
 	test.afterEach( async ( { requestUtils } ) => {
diff --git a/test/e2e/specs/editor/blocks/links.spec.js b/test/e2e/specs/editor/blocks/links.spec.js
index 5686eaed0c83e..02400fe9c9dd8 100644
--- a/test/e2e/specs/editor/blocks/links.spec.js
+++ b/test/e2e/specs/editor/blocks/links.spec.js
@@ -235,7 +235,7 @@ test.describe( 'Links', () => {
 		// Change the URL.
 		// getByPlaceholder required in order to handle Link Control component
 		// managing focus onto other inputs within the control.
-		await page.getByPlaceholder( 'Search or type url' ).fill( '' );
+		await page.getByPlaceholder( 'Search or type URL' ).fill( '' );
 		await page.keyboard.type( '/handbook' );
 
 		// Submit the link.
@@ -349,7 +349,7 @@ test.describe( 'Links', () => {
 		// Change the URL.
 		// getByPlaceholder required in order to handle Link Control component
 		// managing focus onto other inputs within the control.
-		await page.getByPlaceholder( 'Search or type url' ).fill( '' );
+		await page.getByPlaceholder( 'Search or type URL' ).fill( '' );
 		await page.keyboard.type( '/handbook' );
 
 		// Submit the link.
@@ -679,7 +679,7 @@ test.describe( 'Links', () => {
 		// Change the URL.
 		// Note: getByPlaceholder required in order to handle Link Control component
 		// managing focus onto other inputs within the control.
-		await linkPopover.getByPlaceholder( 'Search or type url' ).fill( '' );
+		await linkPopover.getByPlaceholder( 'Search or type URL' ).fill( '' );
 		await page.keyboard.type( 'wordpress.org' );
 
 		// Save the link.
diff --git a/test/e2e/specs/editor/blocks/list.spec.js b/test/e2e/specs/editor/blocks/list.spec.js
index 10f25d6b3609f..7c42ad7989aff 100644
--- a/test/e2e/specs/editor/blocks/list.spec.js
+++ b/test/e2e/specs/editor/blocks/list.spec.js
@@ -24,7 +24,7 @@ test.describe( 'List (@firefox)', () => {
 		await pageUtils.pressKeys( 'primary+v' );
 
 		const copied = `<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
@@ -53,7 +53,7 @@ test.describe( 'List (@firefox)', () => {
 		await page.keyboard.type( 'Another list item' );
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A list item</li>
 <!-- /wp:list-item -->
 
@@ -78,7 +78,7 @@ test.describe( 'List (@firefox)', () => {
 		await page.keyboard.type( '* ' );
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>test</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -97,7 +97,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>A list item</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list -->`
@@ -264,7 +264,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>I’m a list</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -283,7 +283,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>test</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -309,7 +309,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
@@ -335,7 +335,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
@@ -368,7 +368,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one<br>...</li>
 <!-- /wp:list-item -->
 
@@ -433,7 +433,7 @@ test.describe( 'List (@firefox)', () => {
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:quote -->
 <blockquote class="wp-block-quote"><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
@@ -457,7 +457,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->
@@ -473,7 +473,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
@@ -498,7 +498,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
@@ -516,7 +516,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->
@@ -526,7 +526,7 @@ test.describe( 'List (@firefox)', () => {
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>two</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -541,7 +541,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
@@ -637,7 +637,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list -->
@@ -647,7 +647,7 @@ test.describe( 'List (@firefox)', () => {
 <!-- /wp:paragraph -->
 
 <!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>two</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list -->`
@@ -665,9 +665,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>two</li>
 <!-- /wp:list-item -->
 
@@ -691,9 +691,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -708,7 +708,7 @@ test.describe( 'List (@firefox)', () => {
 		await editor.clickBlockToolbarButton( 'Ordered' );
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list -->`
@@ -729,9 +729,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list --></li>
@@ -754,7 +754,7 @@ test.describe( 'List (@firefox)', () => {
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:quote -->
 <blockquote class="wp-block-quote"><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>aaa</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->
@@ -775,9 +775,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -789,7 +789,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
@@ -812,11 +812,11 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>i</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -830,9 +830,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item -->
 
@@ -851,9 +851,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -882,11 +882,11 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>b<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>c</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -901,13 +901,13 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>b<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>c</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -927,7 +927,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<br></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -950,7 +950,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
@@ -981,11 +981,11 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>i</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -1000,9 +1000,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
@@ -1018,9 +1018,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -1036,9 +1036,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -1051,7 +1051,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item -->
 
@@ -1065,7 +1065,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -1098,13 +1098,13 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>2<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -1128,7 +1128,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item -->
 
@@ -1182,9 +1182,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>2</li>
 <!-- /wp:list-item -->
 
@@ -1208,9 +1208,9 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>2</li>
 <!-- /wp:list-item -->
 
@@ -1243,7 +1243,7 @@ test.describe( 'List (@firefox)', () => {
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>2</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -1267,7 +1267,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item -->
 
@@ -1299,7 +1299,7 @@ test.describe( 'List (@firefox)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
@@ -1325,7 +1325,7 @@ test.describe( 'List (@firefox)', () => {
 		// Add empty list block
 		await page.getByPlaceholder( 'Start writing with text or HTML' )
 			.fill( `<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->` );
@@ -1335,7 +1335,7 @@ test.describe( 'List (@firefox)', () => {
 
 		// Verify no WSOD and content is proper.
 		expect( await editor.getEditedPostContent() ).toBe( `<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->` );
@@ -1356,7 +1356,7 @@ test.describe( 'List (@firefox)', () => {
 		await page.keyboard.type( '* c' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe( `<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
@@ -1366,7 +1366,7 @@ test.describe( 'List (@firefox)', () => {
 <!-- /wp:list -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>c</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->` );
@@ -1375,7 +1375,7 @@ test.describe( 'List (@firefox)', () => {
 		await page.keyboard.press( 'Backspace' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe( `<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
@@ -1398,7 +1398,7 @@ test.describe( 'List (@firefox)', () => {
 		await page.keyboard.type( '1' );
 
 		expect( await editor.getEditedPostContent() ).toBe( `<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->
@@ -1439,7 +1439,7 @@ test.describe( 'List (@firefox)', () => {
 		await page.getByRole( 'menuitem', { name: 'List' } ).click();
 
 		expect( await editor.getEditedPostContent() ).toBe( `<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item -->
 
diff --git a/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js b/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js
index 23a59faf498d3..b31533d0d17c2 100644
--- a/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js
+++ b/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js
@@ -26,8 +26,8 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
 			await admin.visitSiteEditor( {
 				postId: 'emptytheme//header',
 				postType: 'wp_template_part',
+				canvas: 'edit',
 			} );
-			await editor.canvas.locator( 'body' ).click();
 			await requestUtils.createNavigationMenu( {
 				title: 'Hidden menu',
 				content: `
@@ -138,8 +138,8 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
 			await admin.visitSiteEditor( {
 				postId: 'emptytheme//header',
 				postType: 'wp_template_part',
+				canvas: 'edit',
 			} );
-			await editor.canvas.locator( 'body' ).click();
 			await requestUtils.createNavigationMenu( {
 				title: 'Hidden menu',
 				content: `
@@ -353,8 +353,8 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
 			await admin.visitSiteEditor( {
 				postId: 'emptytheme//header',
 				postType: 'wp_template_part',
+				canvas: 'edit',
 			} );
-			await editor.canvas.locator( 'body' ).click();
 			await requestUtils.createNavigationMenu( {
 				title: 'Hidden menu',
 				content: `
@@ -449,8 +449,8 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
 			await admin.visitSiteEditor( {
 				postId: 'emptytheme//header',
 				postType: 'wp_template_part',
+				canvas: 'edit',
 			} );
-			await editor.canvas.locator( 'body' ).click();
 			await requestUtils.createNavigationMenu( {
 				title: 'Page list menu',
 				content: `
diff --git a/test/e2e/specs/editor/blocks/rss.spec.js b/test/e2e/specs/editor/blocks/rss.spec.js
new file mode 100644
index 0000000000000..1f6b640926b7c
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/rss.spec.js
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'RSS', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	// See: https://github.com/WordPress/gutenberg/pull/61389.
+	test( 'should retain native copy/paste behavior for input fields', async ( {
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/rss' } );
+		pageUtils.setClipboardData( {
+			plainText: 'https://developer.wordpress.org/news/feed/',
+		} );
+		await pageUtils.pressKeys( 'primary+v' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/rss',
+				attributes: {
+					feedURL: 'https://developer.wordpress.org/news/feed/',
+				},
+			},
+		] );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/child-blocks.spec.js b/test/e2e/specs/editor/plugins/child-blocks.spec.js
index b3073b70a5409..0cd043c6a4610 100644
--- a/test/e2e/specs/editor/plugins/child-blocks.spec.js
+++ b/test/e2e/specs/editor/plugins/child-blocks.spec.js
@@ -48,9 +48,13 @@ test.describe( 'Child Blocks', () => {
 		const blockInserter = page
 			.getByRole( 'toolbar', { name: 'Document tools' } )
 			.getByRole( 'button', { name: 'Toggle block inserter' } );
-		const blockLibrary = page.getByRole( 'region', {
-			name: 'Block Library',
-		} );
+		const blockLibrary = page
+			.getByRole( 'region', {
+				name: 'Block Library',
+			} )
+			.locator(
+				'.block-editor-inserter__insertable-blocks-at-selection'
+			);
 
 		await blockInserter.click();
 		await expect( blockLibrary ).toBeVisible();
@@ -82,9 +86,13 @@ test.describe( 'Child Blocks', () => {
 		const blockInserter = page
 			.getByRole( 'toolbar', { name: 'Document tools' } )
 			.getByRole( 'button', { name: 'Toggle block inserter' } );
-		const blockLibrary = page.getByRole( 'region', {
-			name: 'Block Library',
-		} );
+		const blockLibrary = page
+			.getByRole( 'region', {
+				name: 'Block Library',
+			} )
+			.locator(
+				'.block-editor-inserter__insertable-blocks-at-selection'
+			);
 
 		await blockInserter.click();
 		await expect( blockLibrary ).toBeVisible();
diff --git a/test/e2e/specs/editor/plugins/custom-post-types.spec.js b/test/e2e/specs/editor/plugins/custom-post-types.spec.js
index 9aabe4e7454f9..36050415925c1 100644
--- a/test/e2e/specs/editor/plugins/custom-post-types.spec.js
+++ b/test/e2e/specs/editor/plugins/custom-post-types.spec.js
@@ -36,16 +36,7 @@ test.describe( 'Test Custom Post Types', () => {
 			} )
 			.click();
 
-		// Open the Document -> Page Attributes panel.
-		const pageAttributes = page.getByRole( 'button', {
-			name: 'Page Attributes',
-		} );
-		const isClosed =
-			( await pageAttributes.getAttribute( 'aria-expanded' ) ) ===
-			'false';
-		if ( isClosed ) {
-			await pageAttributes.click();
-		}
+		await page.locator( '.editor-post-parent__panel-toggle' ).click();
 
 		const parentPageLocator = page.getByRole( 'combobox', {
 			name: 'Parent',
@@ -62,6 +53,8 @@ test.describe( 'Test Custom Post Types', () => {
 		await editor.publishPost();
 		await page.reload();
 
+		await page.locator( '.editor-post-parent__panel-toggle' ).click();
+
 		// Confirm parent page selection matches after reloading.
 		await expect( parentPageLocator ).toHaveValue( parentPage );
 	} );
diff --git a/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js b/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js
index eaf171adf9313..d2dc521f0196b 100644
--- a/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js
+++ b/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js
@@ -46,9 +46,13 @@ test.describe( 'Allowed Blocks Setting on InnerBlocks', () => {
 		const blockInserter = page
 			.getByRole( 'toolbar', { name: 'Document tools' } )
 			.getByRole( 'button', { name: 'Toggle block inserter' } );
-		const blockLibrary = page.getByRole( 'region', {
-			name: 'Block Library',
-		} );
+		const blockLibrary = page
+			.getByRole( 'region', {
+				name: 'Block Library',
+			} )
+			.locator(
+				'.block-editor-inserter__insertable-blocks-at-selection'
+			);
 
 		await blockInserter.click();
 		await expect( blockLibrary ).toBeVisible();
@@ -89,9 +93,13 @@ test.describe( 'Allowed Blocks Setting on InnerBlocks', () => {
 		const blockInserter = page
 			.getByRole( 'toolbar', { name: 'Document tools' } )
 			.getByRole( 'button', { name: 'Toggle block inserter' } );
-		const blockLibrary = page.getByRole( 'region', {
-			name: 'Block Library',
-		} );
+		const blockLibrary = page
+			.getByRole( 'region', {
+				name: 'Block Library',
+			} )
+			.locator(
+				'.block-editor-inserter__insertable-blocks-at-selection'
+			);
 
 		await blockInserter.click();
 		await expect( blockLibrary ).toBeVisible();
diff --git a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-preformatted-in-list-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-preformatted-in-list-1-chromium.txt
index 002e7a1920028..d46df0dfb55d4 100644
--- a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-preformatted-in-list-1-chromium.txt
+++ b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-preformatted-in-list-1-chromium.txt
@@ -1,5 +1,5 @@
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>xy</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js b/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js
index aae72f50cd25f..059f3a73ee13d 100644
--- a/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js
+++ b/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js
@@ -421,6 +421,43 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => {
 		} );
 	} );
 
+	test( `should insert mention in a table block`, async ( {
+		page,
+		editor,
+	} ) => {
+		// Insert table block.
+		await editor.insertBlock( { name: 'core/table' } );
+
+		// Create the table.
+		await editor.canvas
+			.locator( 'role=button[name="Create Table"i]' )
+			.click();
+
+		// Select the first cell.
+		await editor.canvas
+			.locator( 'role=textbox[name="Body cell text"i] >> nth=0' )
+			.click();
+
+		// Type autocomplete text.
+		await page.keyboard.type( '@j' );
+
+		// Verify that option is selected.
+		const selectedOption = page.getByRole( 'option', {
+			name: 'Jane Doe',
+			selected: true,
+		} );
+		await expect( selectedOption ).toBeVisible();
+
+		// Insert the option.
+		await selectedOption.click();
+
+		// Verify it's been inserted.
+		const snapshot = `<!-- wp:table -->
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>@testuser</td><td></td></tr><tr><td></td><td></td></tr></tbody></table></figure>
+<!-- /wp:table -->`;
+		await expect.poll( editor.getEditedPostContent ).toBe( snapshot );
+	} );
+
 	// The following test concerns an infinite loop regression (https://github.com/WordPress/gutenberg/issues/41709).
 	// When present, the regression will cause this test to time out.
 	test( 'should insert elements from multiple completers in a single block', async ( {
diff --git a/test/e2e/specs/editor/various/block-bindings.spec.js b/test/e2e/specs/editor/various/block-bindings.spec.js
index 586ce9252149a..be5c7594b46da 100644
--- a/test/e2e/specs/editor/various/block-bindings.spec.js
+++ b/test/e2e/specs/editor/various/block-bindings.spec.js
@@ -41,8 +41,8 @@ test.describe( 'Block bindings', () => {
 			await admin.visitSiteEditor( {
 				postId: 'emptytheme//index',
 				postType: 'wp_template',
+				canvas: 'edit',
 			} );
-			await editor.canvas.locator( 'body' ).click();
 			await editor.openDocumentSettingsSidebar();
 		} );
 
@@ -1193,11 +1193,6 @@ test.describe( 'Block bindings', () => {
 				await expect( paragraphBlock ).toHaveText(
 					'Value of the text_custom_field'
 				);
-				// Paragraph is not editable.
-				await expect( paragraphBlock ).toHaveAttribute(
-					'contenteditable',
-					'false'
-				);
 
 				// Check the frontend shows the value of the custom field.
 				const postId = await editor.publishPost();
@@ -1331,6 +1326,12 @@ test.describe( 'Block bindings', () => {
 						},
 					},
 				} );
+				// 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
@@ -1342,6 +1343,70 @@ test.describe( 'Block bindings', () => {
 				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', () => {
@@ -1370,11 +1435,6 @@ test.describe( 'Block bindings', () => {
 				await expect( headingBlock ).toHaveText(
 					'Value of the text_custom_field'
 				);
-				// Heading is not editable.
-				await expect( headingBlock ).toHaveAttribute(
-					'contenteditable',
-					'false'
-				);
 
 				// Check the frontend shows the value of the custom field.
 				const postId = await editor.publishPost();
@@ -1406,6 +1466,13 @@ test.describe( 'Block bindings', () => {
 						},
 					},
 				} );
+
+				// 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 ] =
@@ -1465,12 +1532,6 @@ test.describe( 'Block bindings', () => {
 					'Value of the text_custom_field'
 				);
 
-				// Button is not editable.
-				await expect( buttonBlock ).toHaveAttribute(
-					'contenteditable',
-					'false'
-				);
-
 				// Check the frontend shows the value of the custom field.
 				const postId = await editor.publishPost();
 				await page.goto( `/?p=${ postId }` );
@@ -1599,6 +1660,7 @@ test.describe( 'Block bindings', () => {
 					} )
 					.getByRole( 'textbox' )
 					.click();
+				await page.keyboard.press( 'End' );
 				await page.keyboard.press( 'Enter' );
 				const [ initialButton, newEmptyButton ] = await editor.canvas
 					.locator( '[data-type="core/button"]' )
@@ -1723,12 +1785,7 @@ test.describe( 'Block bindings', () => {
 					imagePlaceholderSrc
 				);
 
-				// Alt textarea is disabled and with the custom field value.
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Alternative text' )
-				).toHaveAttribute( 'readonly' );
+				// Alt textarea should have the custom field value.
 				const altValue = await page
 					.getByRole( 'tabpanel', { name: 'Settings' } )
 					.getByLabel( 'Alternative text' )
@@ -1789,7 +1846,7 @@ test.describe( 'Block bindings', () => {
 					imagePlaceholderSrc
 				);
 
-				// Title input is disabled and with the custom field value.
+				// Title input should have the custom field value.
 				const advancedButton = page
 					.getByRole( 'tabpanel', { name: 'Settings' } )
 					.getByRole( 'button', {
@@ -1800,11 +1857,6 @@ test.describe( 'Block bindings', () => {
 				if ( isAdvancedPanelOpen === 'false' ) {
 					await advancedButton.click();
 				}
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Title attribute' )
-				).toHaveAttribute( 'readonly' );
 				const titleValue = await page
 					.getByRole( 'tabpanel', { name: 'Settings' } )
 					.getByLabel( 'Title attribute' )
@@ -1869,19 +1921,14 @@ test.describe( 'Block bindings', () => {
 					imageCustomFieldSrc
 				);
 
-				// Alt textarea is disabled and with the custom field value.
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Alternative text' )
-				).toHaveAttribute( 'readonly' );
+				// 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 is enabled and with the original value.
+				// Title input should have the original value.
 				const advancedButton = page
 					.getByRole( 'tabpanel', { name: 'Settings' } )
 					.getByRole( 'button', {
@@ -1892,11 +1939,6 @@ test.describe( 'Block bindings', () => {
 				if ( isAdvancedPanelOpen === 'false' ) {
 					await advancedButton.click();
 				}
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Title attribute' )
-				).toBeEnabled();
 				const titleValue = await page
 					.getByRole( 'tabpanel', { name: 'Settings' } )
 					.getByLabel( 'Title attribute' )
@@ -1922,6 +1964,208 @@ test.describe( 'Block bindings', () => {
 				);
 			} );
 		} );
+
+		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' );
+			} );
+
+			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' );
+			} );
+		} );
 	} );
 } );
 
diff --git a/test/e2e/specs/editor/various/block-editor-keyboard-shortcuts.spec.js b/test/e2e/specs/editor/various/block-editor-keyboard-shortcuts.spec.js
index 0e8c5c8e7bf53..967baccfcbe4e 100644
--- a/test/e2e/specs/editor/various/block-editor-keyboard-shortcuts.spec.js
+++ b/test/e2e/specs/editor/various/block-editor-keyboard-shortcuts.spec.js
@@ -192,7 +192,7 @@ test.describe( 'Block editor keyboard shortcuts', () => {
 				.getByRole( 'menuitem', { name: 'Create pattern' } )
 				.click();
 			await page
-				.getByRole( 'dialog', { name: 'Create pattern' } )
+				.getByRole( 'dialog', { name: 'add new pattern' } )
 				.getByRole( 'textbox', { name: 'Name' } )
 				.fill( 'hi' );
 
@@ -217,4 +217,68 @@ test.describe( 'Block editor keyboard shortcuts', () => {
 			] );
 		} );
 	} );
+
+	test.describe( 'create a group block from the selected blocks', () => {
+		test( 'should propagate properly if multiple blocks are selected.', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await addTestParagraphBlocks( { editor, page } );
+
+			// Multiselect via keyboard.
+			await pageUtils.pressKeys( 'primary+a', { times: 2 } );
+
+			await pageUtils.pressKeys( 'primary+g' ); // Keyboard shortcut for Insert before.
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/group',
+					innerBlocks: [
+						{
+							name: 'core/paragraph',
+							attributes: { content: '1st' },
+						},
+						{
+							name: 'core/paragraph',
+							attributes: { content: '2nd' },
+						},
+						{
+							name: 'core/paragraph',
+							attributes: { content: '3rd' },
+						},
+					],
+				},
+			] );
+		} );
+
+		test( 'should prevent if a single block is selected.', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await addTestParagraphBlocks( { editor, page } );
+			const firstParagraphBlock = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} )
+				.first();
+			await editor.selectBlocks( firstParagraphBlock );
+			await pageUtils.pressKeys( 'primary+g' );
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/paragraph',
+					attributes: { content: '1st' },
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: '2nd' },
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: '3rd' },
+				},
+			] );
+		} );
+	} );
 } );
diff --git a/test/e2e/specs/editor/various/block-renaming.spec.js b/test/e2e/specs/editor/various/block-renaming.spec.js
index c7304023b970c..6dc1e9a3a49f4 100644
--- a/test/e2e/specs/editor/various/block-renaming.spec.js
+++ b/test/e2e/specs/editor/various/block-renaming.spec.js
@@ -36,26 +36,10 @@ test.describe( 'Block Renaming', () => {
 			page,
 			pageUtils,
 		} ) => {
-			// Turn on block list view by default.
-			await editor.setPreferences( 'core', {
-				showListViewByDefault: true,
-			} );
-
-			const listView = page.getByRole( 'treegrid', {
-				name: 'Block navigation structure',
-			} );
-
-			await editor.insertBlock( {
-				name: 'core/group',
-				attributes: { content: 'First Paragraph' },
-			} );
+			await editor.insertBlock( { name: 'core/group' } );
 
 			// Select via keyboard.
 			await pageUtils.pressKeys( 'primary+a' );
-
-			// Convert to a Group block which supports renaming.
-			await editor.clickBlockOptionsMenuItem( 'Group' );
-
 			await editor.clickBlockOptionsMenuItem( 'Rename' );
 
 			const renameMenuItem = page.getByRole( 'menuitem', {
@@ -107,11 +91,18 @@ test.describe( 'Block Renaming', () => {
 				'false'
 			);
 
-			// Check custom name reflected in List View.
-			listView.getByRole( 'link', {
-				name: 'My new name',
+			await pageUtils.pressKeys( 'access+o' );
+			const listView = page.getByRole( 'treegrid', {
+				name: 'Block navigation structure',
 			} );
 
+			await expect(
+				listView.getByRole( 'link', {
+					name: 'My new name',
+				} ),
+				'should reflect custom name in List View'
+			).toBeVisible();
+
 			await expect.poll( editor.getBlocks ).toMatchObject( [
 				{
 					name: 'core/group',
@@ -123,7 +114,8 @@ test.describe( 'Block Renaming', () => {
 				},
 			] );
 
-			// Re-trigger the rename dialog.
+			// Re-trigger the rename dialog from the List View.
+			await listView.getByRole( 'button', { name: 'Options' } ).click();
 			await renameMenuItem.click();
 
 			// Expect modal input to contain the custom name.
@@ -142,10 +134,12 @@ test.describe( 'Block Renaming', () => {
 
 			await saveButton.click();
 
-			// Check the original block name to reflected in List View.
-			listView.getByRole( 'link', {
-				name: 'Group',
-			} );
+			await expect(
+				listView.getByRole( 'link', {
+					name: 'Group',
+				} ),
+				'should reflect original name in List View'
+			).toBeVisible();
 
 			// Expect block to have no custom name (i.e. it should be reset to the original block name).
 			await expect.poll( editor.getBlocks ).toMatchObject( [
diff --git a/test/e2e/specs/editor/various/change-detection.spec.js b/test/e2e/specs/editor/various/change-detection.spec.js
index 4f539a92269e6..4ac262f4c1348 100644
--- a/test/e2e/specs/editor/various/change-detection.spec.js
+++ b/test/e2e/specs/editor/various/change-detection.spec.js
@@ -80,8 +80,9 @@ test.describe( 'Change detection', () => {
 
 		// Toggle post as needing review (not persisted for autosave).
 		await editor.openDocumentSettingsSidebar();
-		const postStatusButton = page.locator( '.editor-post-status-trigger' );
-		await postStatusButton.click();
+		await page
+			.getByRole( 'button', { name: 'Change post status:' } )
+			.click();
 		await page.getByRole( 'radio', { name: 'Pending' } ).click();
 		// Force autosave to occur immediately.
 		await Promise.all( [
@@ -411,19 +412,17 @@ test.describe( 'Change detection', () => {
 		await editor.openDocumentSettingsSidebar();
 		await page
 			.getByRole( 'region', { name: 'Editor settings' } )
-			.getByRole( 'button', { name: 'Move to trash' } )
+			.getByRole( 'button', { name: 'Actions' } )
+			.click();
+		await page
+			.getByRole( 'menu' )
+			.getByRole( 'menuitem', { name: 'Move to Trash' } )
 			.click();
 		await page
 			.getByRole( 'dialog' )
-			.getByRole( 'button', { name: 'Move to trash' } )
+			.getByRole( 'button', { name: 'Trash' } )
 			.click();
 
-		await expect(
-			page
-				.getByRole( 'region', { name: 'Editor top bar' } )
-				.getByRole( 'button', { name: 'saved' } )
-		).toBeDisabled();
-
 		await expect( page ).toHaveURL( '/wp-admin/edit.php?post_type=post' );
 	} );
 
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 539791d39e45f..48392170e66dd 100644
--- a/test/e2e/specs/editor/various/copy-cut-paste.spec.js
+++ b/test/e2e/specs/editor/various/copy-cut-paste.spec.js
@@ -640,4 +640,41 @@ test.describe( 'Copy/cut/paste', () => {
 			},
 		] );
 	} );
+
+	// See https://github.com/WordPress/gutenberg/pull/61900
+	test( 'should inherit heading attributes on paste split', async ( {
+		pageUtils,
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/heading',
+			attributes: {
+				content: 'AB',
+			},
+		} );
+		await page.keyboard.press( 'ArrowRight' );
+
+		pageUtils.setClipboardData( {
+			html: '<p>a</p><p>b</p>',
+		} );
+		await pageUtils.pressKeys( 'primary+v' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/heading',
+				attributes: {
+					content: 'Aa',
+					level: 2,
+				},
+			},
+			{
+				name: 'core/heading',
+				attributes: {
+					content: 'bB',
+					level: 2,
+				},
+			},
+		] );
+	} );
 } );
diff --git a/test/e2e/specs/editor/various/footnotes.spec.js b/test/e2e/specs/editor/various/footnotes.spec.js
index 01017b2d2ea2e..e7fd380470647 100644
--- a/test/e2e/specs/editor/various/footnotes.spec.js
+++ b/test/e2e/specs/editor/various/footnotes.spec.js
@@ -363,11 +363,15 @@ test.describe( 'Footnotes', () => {
 
 		// Open revisions.
 		await editor.openDocumentSettingsSidebar();
+		const editorSettings = page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
+		await editorSettings.getByRole( 'tab', { name: 'Post' } ).click();
+		await editorSettings.getByRole( 'button', { name: 'Actions' } ).click();
 		await page
-			.getByRole( 'region', { name: 'Editor settings' } )
-			.getByRole( 'tab', { name: 'Post' } )
+			.getByRole( 'menu' )
+			.getByRole( 'menuitem', { name: 'View revisions' } )
 			.click();
-		await page.locator( 'a:text("Revisions (2)")' ).click();
 		await page.locator( '.revisions-controls .ui-slider-handle' ).focus();
 		await page.keyboard.press( 'ArrowLeft' );
 		await page.locator( 'input:text("Restore This Revision")' ).click();
diff --git a/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js
index c277b056a323c..3ef5a8f65045f 100644
--- a/test/e2e/specs/editor/various/inserting-blocks.spec.js
+++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js
@@ -265,7 +265,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 			.click();
 		await page.getByRole( 'menuitem', { name: 'Create pattern' } ).click();
 		const createPatternDialog = page.getByRole( 'dialog', {
-			name: 'Create pattern',
+			name: 'add new pattern',
 		} );
 		await createPatternDialog
 			.getByRole( 'textbox', { name: 'Name' } )
@@ -274,7 +274,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 			.getByRole( 'checkbox', { name: 'Synced' } )
 			.setChecked( true );
 		await createPatternDialog
-			.getByRole( 'button', { name: 'Create' } )
+			.getByRole( 'button', { name: 'Add' } )
 			.click();
 		const patternBlock = page.getByRole( 'document', {
 			name: 'Block: Pattern',
@@ -628,7 +628,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 			.click();
 		await page.getByRole( 'option', { name: 'More', exact: true } ).click();
 
-		// Moving focus to the More block should close the inserter.
+		// Moving focus to the More block should not close the inserter.
 		await editor.canvas
 			.getByRole( 'textbox', { name: 'Read more' } )
 			.fill( 'More' );
diff --git a/test/e2e/specs/editor/various/list-view.spec.js b/test/e2e/specs/editor/various/list-view.spec.js
index 8c14711084389..143fea43c09ee 100644
--- a/test/e2e/specs/editor/various/list-view.spec.js
+++ b/test/e2e/specs/editor/various/list-view.spec.js
@@ -986,6 +986,45 @@ test.describe( 'List View', () => {
 			] );
 	} );
 
+	test( 'should create a group block from the selected multiple blocks', async ( {
+		editor,
+		pageUtils,
+		listViewUtils,
+	} ) => {
+		// Insert some blocks of different types.
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await editor.insertBlock( { name: 'core/heading' } );
+		await editor.insertBlock( { name: 'core/file' } );
+
+		await listViewUtils.openListView();
+
+		// Group Heading and File blocks.
+		await pageUtils.pressKeys( 'shift+ArrowUp' );
+		await pageUtils.pressKeys( 'primary+g' );
+		await expect
+			.poll( listViewUtils.getBlocksWithA11yAttributes )
+			.toMatchObject( [
+				{ name: 'core/paragraph', selected: false, focused: false },
+				{
+					name: 'core/group',
+					selected: true,
+					focused: true,
+					innerBlocks: [
+						{
+							name: 'core/heading',
+							selected: false,
+							focused: false,
+						},
+						{
+							name: 'core/file',
+							selected: false,
+							focused: false,
+						},
+					],
+				},
+			] );
+	} );
+
 	test( 'block settings dropdown menu', async ( {
 		editor,
 		page,
diff --git a/test/e2e/specs/editor/various/new-post-default-content.spec.js b/test/e2e/specs/editor/various/new-post-default-content.spec.js
index 6495cb3da012e..6f38f7ffbd1ca 100644
--- a/test/e2e/specs/editor/various/new-post-default-content.spec.js
+++ b/test/e2e/specs/editor/various/new-post-default-content.spec.js
@@ -30,8 +30,9 @@ test.describe( 'new editor filtered state', () => {
 		await expect
 			.poll( editor.getEditedPostContent )
 			.toBe( 'My default content' );
+		await page.getByRole( 'button', { name: 'Edit excerpt' } ).click();
 		await expect(
-			page.getByRole( 'button', { name: 'Edit excerpt' } )
-		).toHaveText( 'My default excerpt' );
+			page.getByRole( 'textbox', { name: 'Write an excerpt (optional)' } )
+		).toHaveValue( 'My default excerpt' );
 	} );
 } );
diff --git a/test/e2e/specs/editor/various/new-post.spec.js b/test/e2e/specs/editor/various/new-post.spec.js
index b3591db1ec50b..68d983e91045b 100644
--- a/test/e2e/specs/editor/various/new-post.spec.js
+++ b/test/e2e/specs/editor/various/new-post.spec.js
@@ -40,7 +40,7 @@ test.describe( 'new editor state', () => {
 		// Should display the Post Formats UI.
 		await editor.openDocumentSettingsSidebar();
 		await expect(
-			page.locator( 'role=combobox[name="Post Format"i]' )
+			page.locator( 'role=button[name="Change Format: Standard"i]' )
 		).toBeVisible();
 	} );
 
diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js
index 4dbe65436aa95..f4648a03efe95 100644
--- a/test/e2e/specs/editor/various/pattern-overrides.spec.js
+++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js
@@ -35,20 +35,20 @@ test.describe( 'Pattern Overrides', () => {
 		const editableParagraphName = 'Editable Paragraph';
 
 		await test.step( 'Create a synced pattern and assign blocks to allow overrides', async () => {
-			await admin.visitSiteEditor( { path: '/patterns' } );
+			await admin.visitSiteEditor( { postType: 'wp_block' } );
 
 			await page
-				.getByRole( 'region', { name: 'Navigation' } )
-				.getByRole( 'button', { name: 'Create pattern' } )
+				.getByRole( 'region', { name: 'Patterns content' } )
+				.getByRole( 'button', { name: 'add new pattern' } )
 				.click();
 
 			await page
-				.getByRole( 'menu', { name: 'Create pattern' } )
-				.getByRole( 'menuitem', { name: 'Create pattern' } )
+				.getByRole( 'menu', { name: 'add new pattern' } )
+				.getByRole( 'menuitem', { name: 'add new pattern' } )
 				.click();
 
 			const createPatternDialog = page.getByRole( 'dialog', {
-				name: 'Create pattern',
+				name: 'add new pattern',
 			} );
 			await createPatternDialog
 				.getByRole( 'textbox', { name: 'Name' } )
@@ -57,7 +57,7 @@ test.describe( 'Pattern Overrides', () => {
 				.getByRole( 'checkbox', { name: 'Synced' } )
 				.setChecked( true );
 			await createPatternDialog
-				.getByRole( 'button', { name: 'Create' } )
+				.getByRole( 'button', { name: 'Add' } )
 				.click();
 
 			await editor.canvas
@@ -105,7 +105,7 @@ test.describe( 'Pattern Overrides', () => {
 						metadata: {
 							name: editableParagraphName,
 							bindings: {
-								content: {
+								__default: {
 									source: 'core/pattern-overrides',
 								},
 							},
@@ -148,6 +148,8 @@ test.describe( 'Pattern Overrides', () => {
 			const paragraphs = patternBlocks.first().getByRole( 'document', {
 				name: 'Block: Paragraph',
 			} );
+			// Ensure the first pattern is selected.
+			await patternBlocks.first().selectText();
 			await expect( paragraphs.first() ).not.toHaveAttribute(
 				'inert',
 				'true'
@@ -164,6 +166,8 @@ test.describe( 'Pattern Overrides', () => {
 			await paragraphs.first().selectText();
 			await page.keyboard.type( 'I would word it this way' );
 
+			// Ensure the second pattern is selected.
+			await patternBlocks.last().selectText();
 			await patternBlocks
 				.last()
 				.getByRole( 'document', {
@@ -230,7 +234,7 @@ test.describe( 'Pattern Overrides', () => {
 		const paragraphName = 'paragraph-name';
 		const { id } = await requestUtils.createBlock( {
 			title: 'Pattern',
-			content: `<!-- wp:paragraph {"metadata":{"name":"${ paragraphName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
+			content: `<!-- wp:paragraph {"metadata":{"name":"${ paragraphName }","bindings":{"__default":{"source":"core/pattern-overrides"}}}} -->
 <p>Editable</p>
 <!-- /wp:paragraph -->`,
 			status: 'publish',
@@ -268,6 +272,47 @@ test.describe( 'Pattern Overrides', () => {
 		] );
 	} );
 
+	// See https://github.com/WordPress/gutenberg/pull/62014.
+	test( 'can convert a pattern block to regular blocks when the pattern supports overrides but not override values', async ( {
+		admin,
+		requestUtils,
+		editor,
+	} ) => {
+		const paragraphName = 'paragraph-name';
+		const { id } = await requestUtils.createBlock( {
+			title: 'Pattern',
+			content: `<!-- wp:paragraph {"metadata":{"name":"${ paragraphName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
+<p>Editable</p>
+<!-- /wp:paragraph -->`,
+			status: 'publish',
+		} );
+
+		await admin.createNewPost();
+
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		// Convert back to regular blocks.
+		await editor.selectBlocks(
+			editor.canvas.getByRole( 'document', { name: 'Block: Pattern' } )
+		);
+		await editor.showBlockToolbar();
+		await editor.clickBlockOptionsMenuItem( 'Detach' );
+
+		// Check that the overrides remain.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'Editable',
+					metadata: { name: paragraphName },
+				},
+			},
+		] );
+	} );
+
 	test( "handles button's link settings", async ( {
 		page,
 		admin,
@@ -279,7 +324,7 @@ test.describe( 'Pattern Overrides', () => {
 		const { id } = await requestUtils.createBlock( {
 			title: 'Button with target',
 			content: `<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button {"metadata":{"name":"${ buttonName }","bindings":{"text":{"source":"core/pattern-overrides"},"url":{"source":"core/pattern-overrides"},"linkTarget":{"source":"core/pattern-overrides"},"rel":{"source":"core/pattern-overrides"}}}} -->
+<div class="wp-block-buttons"><!-- wp:button {"metadata":{"name":"${ buttonName }","bindings":{"__default":{"source":"core/pattern-overrides"}}}} -->
 <div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="http://wp.org" target="_blank" rel="noreferrer noopener nofollow">Button</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->`,
@@ -389,14 +434,14 @@ test.describe( 'Pattern Overrides', () => {
 		const headingName = 'Editable heading';
 		const innerPattern = await requestUtils.createBlock( {
 			title: 'Inner Pattern',
-			content: `<!-- wp:paragraph {"metadata":{"name":"${ paragraphName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
+			content: `<!-- wp:paragraph {"metadata":{"name":"${ paragraphName }","bindings":{"__default":{"source":"core/pattern-overrides"}}}} -->
 <p>Inner paragraph</p>
 <!-- /wp:paragraph -->`,
 			status: 'publish',
 		} );
 		const outerPattern = await requestUtils.createBlock( {
 			title: 'Outer Pattern',
-			content: `<!-- wp:heading {"metadata":{"name":"${ headingName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
+			content: `<!-- wp:heading {"metadata":{"name":"${ headingName }","bindings":{"__default":{"source":"core/pattern-overrides"}}}} -->
 <h2 class="wp-block-heading">Outer heading</h2>
 <!-- /wp:heading -->
 <!-- wp:block {"ref":${ innerPattern.id },"content":{"${ paragraphName }":{"content":"Inner paragraph (edited)"}}} /-->`,
@@ -417,7 +462,7 @@ test.describe( 'Pattern Overrides', () => {
 
 		const postId = await editor.publishPost();
 
-		// Check it renders correctly.
+		// Check the pattern has the correct attributes.
 		await expect.poll( editor.getBlocks ).toMatchObject( [
 			{
 				name: 'core/block',
@@ -429,41 +474,20 @@ test.describe( 'Pattern Overrides', () => {
 						},
 					},
 				},
-				innerBlocks: [
-					{
-						name: 'core/heading',
-						attributes: { content: 'Outer heading (edited)' },
-					},
-					{
-						name: 'core/block',
-						attributes: {
-							ref: innerPattern.id,
-							content: {
-								[ paragraphName ]: {
-									content: 'Inner paragraph (edited)',
-								},
-							},
-						},
-						innerBlocks: [
-							{
-								name: 'core/paragraph',
-								attributes: {
-									content: 'Inner paragraph (edited)',
-								},
-							},
-						],
-					},
-				],
+				innerBlocks: [],
 			},
 		] );
-
-		await expect(
-			editor.canvas.getByRole( 'document', {
-				name: 'Block: Paragraph',
-				includeHidden: true,
-			} ),
-			'The inner paragraph should not be editable'
-		).toHaveAttribute( 'inert', 'true' );
+		// Check it renders correctly.
+		const headingBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Heading',
+		} );
+		const paragraphBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Paragraph',
+		} );
+		await expect( headingBlock ).toHaveText( 'Outer heading (edited)' );
+		await expect( headingBlock ).not.toHaveAttribute( 'inert', 'true' );
+		await expect( paragraphBlock ).toHaveText( 'Inner paragraph (edited)' );
+		await expect( paragraphBlock ).toHaveAttribute( 'inert', 'true' );
 
 		// Edit the outer pattern.
 		await editor.selectBlocks(
@@ -478,11 +502,16 @@ test.describe( 'Pattern Overrides', () => {
 			.click();
 
 		// The inner paragraph should be editable in the pattern focus mode.
+		await editor.selectBlocks(
+			editor.canvas
+				.getByRole( 'document', { name: 'Block: Pattern' } )
+				.first()
+		);
 		await expect(
 			editor.canvas.getByRole( 'document', {
 				name: 'Block: Paragraph',
 			} ),
-			'The inner paragraph should not be editable'
+			'The inner paragraph should be editable'
 		).not.toHaveAttribute( 'inert', 'true' );
 
 		// Visit the post on the frontend.
@@ -506,10 +535,10 @@ test.describe( 'Pattern Overrides', () => {
 		const paragraphName = 'Editable paragraph';
 		const { id } = await requestUtils.createBlock( {
 			title: 'Pattern',
-			content: `<!-- wp:heading {"metadata":{"name":"${ headingName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
+			content: `<!-- wp:heading {"metadata":{"name":"${ headingName }","bindings":{"__default":{"source":"core/pattern-overrides"}}}} -->
 <h2 class="wp-block-heading">Heading</h2>
 <!-- /wp:heading -->
-<!-- wp:paragraph {"metadata":{"name":"${ paragraphName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
+<!-- wp:paragraph {"metadata":{"name":"${ paragraphName }","bindings":{"__default":{"source":"core/pattern-overrides"}}}} -->
 <p>Paragraph</p>
 <!-- /wp:paragraph -->`,
 			status: 'publish',
@@ -587,6 +616,70 @@ test.describe( 'Pattern Overrides', () => {
 		await expect( resetButton ).toBeDisabled();
 	} );
 
+	// A Undo/Redo bug found when implementing and fixing https://github.com/WordPress/gutenberg/pull/60721.
+	// This could be merged into an existing test after we fully test it.
+	test( 'resets overrides immediately should not break undo/redo', async ( {
+		page,
+		admin,
+		requestUtils,
+		editor,
+	} ) => {
+		const paragraphName = 'Editable paragraph';
+		const { id } = await requestUtils.createBlock( {
+			title: 'Pattern',
+			content: `<!-- wp:paragraph {"metadata":{"name":"${ paragraphName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
+<p>Paragraph</p>
+<!-- /wp:paragraph -->`,
+			status: 'publish',
+		} );
+
+		await admin.createNewPost();
+
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		const patternBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Pattern',
+		} );
+		const paragraphBlock = patternBlock.getByRole( 'document', {
+			name: 'Block: Paragraph',
+		} );
+		const resetButton = page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'Reset' } );
+		const documentTools = page.getByRole( 'toolbar', {
+			name: 'Document tools',
+		} );
+		const undoButton = documentTools.getByRole( 'button', {
+			name: 'Undo',
+		} );
+		const redoButton = documentTools.getByRole( 'button', {
+			name: 'Redo',
+		} );
+
+		// Make an edit to the paragraph.
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.click();
+		await page.keyboard.type( '*' );
+		await expect( paragraphBlock ).toHaveText( 'Paragraph*' );
+
+		// Reset immediately after making the edit.
+		await editor.selectBlocks( paragraphBlock );
+		await editor.showBlockToolbar();
+		await expect( resetButton ).toBeEnabled();
+		await resetButton.click();
+		await expect( paragraphBlock ).toHaveText( 'Paragraph' );
+
+		// Undo/Redo should work
+		await undoButton.click();
+		await expect( paragraphBlock ).toHaveText( 'Paragraph*' );
+		await redoButton.click();
+		await expect( paragraphBlock ).toHaveText( 'Paragraph' );
+	} );
+
 	// Fix https://github.com/WordPress/gutenberg/issues/58708.
 	test( 'overridden empty images should not have upload button', async ( {
 		page,
@@ -601,7 +694,7 @@ test.describe( 'Pattern Overrides', () => {
 		);
 		const { id } = await requestUtils.createBlock( {
 			title: 'Pattern',
-			content: `<!-- wp:image {"metadata":{"name":"${ imageName }","bindings":{"id":{"source":"core/pattern-overrides"},"url":{"source":"core/pattern-overrides"},"title":{"source":"core/pattern-overrides"},"alt":{"source":"core/pattern-overrides"}}}} -->
+			content: `<!-- wp:image {"metadata":{"name":"${ imageName }","bindings":{"__default":{"source":"core/pattern-overrides"}}}} -->
 <figure class="wp-block-image"><img alt=""/></figure>
 <!-- /wp:image -->`,
 			status: 'publish',
@@ -648,4 +741,219 @@ test.describe( 'Pattern Overrides', () => {
 			} )
 		).toBeHidden();
 	} );
+
+	test( 'blocks with the same name should be synced', async ( {
+		page,
+		admin,
+		requestUtils,
+		editor,
+	} ) => {
+		let patternId;
+		const sharedName = 'Shared Name';
+
+		await test.step( 'create a pattern with synced blocks with the same name', async () => {
+			const { id } = await requestUtils.createBlock( {
+				title: 'Blocks with the same name',
+				content: `<!-- wp:heading {"metadata":{"name":"${ sharedName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
+			<h2>default name</h2>
+			<!-- /wp:heading -->
+			<!-- wp:paragraph {"metadata":{"name":"${ sharedName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
+			<p>default content</p>
+			<!-- /wp:paragraph -->
+			<!-- wp:paragraph {"metadata":{"name":"${ sharedName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
+			<p>default content</p>
+			<!-- /wp:paragraph -->`,
+				status: 'publish',
+			} );
+			await admin.visitSiteEditor( {
+				postId: id,
+				postType: 'wp_block',
+				canvas: 'edit',
+			} );
+
+			const headingBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Heading',
+			} );
+			const firstParagraph = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} )
+				.first();
+			const secondParagraph = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} )
+				.last();
+
+			// Update the content of one of the blocks.
+			await headingBlock.fill( 'updated content' );
+
+			// Check that every content has been updated.
+			for ( const block of [
+				headingBlock,
+				firstParagraph,
+				secondParagraph,
+			] ) {
+				await expect( block ).toHaveText( 'updated content' );
+			}
+
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Save' } )
+				.click();
+
+			await expect(
+				page.getByRole( 'button', { name: 'Dismiss this notice' } )
+			).toBeVisible();
+
+			patternId = new URL( page.url() ).searchParams.get( 'postId' );
+		} );
+
+		await test.step( 'create a post and insert the pattern with synced values', async () => {
+			await admin.createNewPost();
+
+			await editor.insertBlock( {
+				name: 'core/block',
+				attributes: { ref: patternId },
+			} );
+
+			const headingBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Heading',
+			} );
+			const firstParagraph = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} )
+				.first();
+			const secondParagraph = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} )
+				.last();
+
+			await firstParagraph.fill( 'overriden content' );
+			await expect( headingBlock ).toHaveText( 'overriden content' );
+			await expect( firstParagraph ).toHaveText( 'overriden content' );
+			await expect( secondParagraph ).toHaveText( 'overriden content' );
+		} );
+	} );
+
+	// https://github.com/WordPress/gutenberg/issues/61610.
+	test( 'unsynced patterns should not be able to enable overrides', async ( {
+		page,
+		admin,
+		requestUtils,
+		editor,
+	} ) => {
+		const pattern = await requestUtils.createBlock( {
+			title: 'Pattern',
+			content: `<!-- wp:paragraph -->
+<p>paragraph</p>
+<!-- /wp:paragraph -->`,
+			status: 'publish',
+			meta: {
+				wp_pattern_sync_status: 'unsynced',
+			},
+		} );
+
+		await admin.visitSiteEditor( {
+			postId: pattern.id,
+			postType: 'wp_block',
+			canvas: 'edit',
+		} );
+
+		const paragraph = editor.canvas.getByRole( 'document', {
+			name: 'Block: Paragraph',
+		} );
+		await editor.selectBlocks( paragraph );
+		await editor.openDocumentSettingsSidebar();
+
+		const editorSettings = page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
+		await editorSettings
+			.getByRole( 'button', { name: 'Advanced' } )
+			.click();
+		await expect(
+			editorSettings.getByRole( 'button', { name: 'Enable overrides' } )
+		).toBeHidden();
+	} );
+
+	// @see https://github.com/WordPress/gutenberg/pull/60694
+	test( 'handles back-compat from individual attributes to __default', async ( {
+		page,
+		admin,
+		requestUtils,
+		editor,
+	} ) => {
+		const imageName = 'Editable image';
+		const TEST_IMAGE_FILE_PATH = path.resolve(
+			__dirname,
+			'../../../assets/10x10_e2e_test_image_z9T8jK.png'
+		);
+		const { id } = await requestUtils.createBlock( {
+			title: 'Pattern',
+			content: `<!-- wp:image {"metadata":{"name":"${ imageName }","bindings":{"id":{"source":"core/pattern-overrides"},"url":{"source":"core/pattern-overrides"},"title":{"source":"core/pattern-overrides"},"alt":{"source":"core/pattern-overrides"}}}} -->
+<figure class="wp-block-image"><img alt=""/></figure>
+<!-- /wp:image -->`,
+			status: 'publish',
+		} );
+
+		await admin.createNewPost();
+
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		const blocks = await editor.getBlocks( { full: true } );
+		expect( blocks ).toMatchObject( [
+			{
+				name: 'core/block',
+				attributes: { ref: id },
+			},
+		] );
+		expect(
+			await editor.getBlocks( { clientId: blocks[ 0 ].clientId } )
+		).toMatchObject( [
+			{
+				name: 'core/image',
+				attributes: {
+					metadata: {
+						name: imageName,
+						bindings: {
+							__default: {
+								source: 'core/pattern-overrides',
+							},
+						},
+					},
+				},
+			},
+		] );
+
+		const imageBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Image',
+		} );
+		await editor.selectBlocks( imageBlock );
+		await imageBlock
+			.getByTestId( 'form-file-upload-input' )
+			.setInputFiles( TEST_IMAGE_FILE_PATH );
+		await expect( imageBlock.getByRole( 'img' ) ).toHaveCount( 1 );
+		await expect( imageBlock.getByRole( 'img' ) ).toHaveAttribute(
+			'src',
+			/\/wp-content\/uploads\//
+		);
+		await editor.showBlockToolbar();
+		await editor.clickBlockToolbarButton( 'Alt' );
+		await page
+			.getByRole( 'textbox', { name: 'alternative text' } )
+			.fill( 'Test Image' );
+
+		const postId = await editor.publishPost();
+
+		await page.goto( `/?p=${ postId }` );
+		await expect(
+			page.getByRole( 'img', { name: 'Test Image' } )
+		).toHaveAttribute( 'src', /\/wp-content\/uploads\// );
+	} );
 } );
diff --git a/test/e2e/specs/editor/various/patterns.spec.js b/test/e2e/specs/editor/various/patterns.spec.js
index fc1754330b3f5..781d4657a20b9 100644
--- a/test/e2e/specs/editor/various/patterns.spec.js
+++ b/test/e2e/specs/editor/various/patterns.spec.js
@@ -37,7 +37,7 @@ test.describe( 'Unsynced pattern', () => {
 		await page.getByRole( 'menuitem', { name: 'Create pattern' } ).click();
 
 		const createPatternDialog = page.getByRole( 'dialog', {
-			name: 'Create pattern',
+			name: 'add new pattern',
 		} );
 		await createPatternDialog
 			.getByRole( 'textbox', { name: 'Name' } )
@@ -110,6 +110,7 @@ test.describe( 'Synced pattern', () => {
 	} );
 
 	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
 		await requestUtils.deleteAllBlocks();
 		await requestUtils.deleteAllPatternCategories();
 	} );
@@ -120,7 +121,10 @@ test.describe( 'Synced pattern', () => {
 	} ) => {
 		await editor.insertBlock( {
 			name: 'core/paragraph',
-			attributes: { content: 'A useful paragraph to reuse' },
+			attributes: {
+				anchor: 'reused-paragraph',
+				content: 'A useful paragraph to reuse',
+			},
 		} );
 
 		// Create a synced pattern from the paragraph block.
@@ -132,7 +136,7 @@ test.describe( 'Synced pattern', () => {
 		await page.getByRole( 'menuitem', { name: 'Create pattern' } ).click();
 
 		const createPatternDialog = page.getByRole( 'dialog', {
-			name: 'Create pattern',
+			name: 'add new pattern',
 		} );
 		await createPatternDialog
 			.getByRole( 'textbox', { name: 'Name' } )
@@ -146,37 +150,21 @@ test.describe( 'Synced pattern', () => {
 			.setChecked( true );
 
 		await createPatternDialog
-			.getByRole( 'button', { name: 'Create' } )
+			.getByRole( 'button', { name: 'Add' } )
 			.click();
 
-		await expect
-			.poll(
-				editor.getBlocks,
-				'The block content should be wrapped by a pattern block wrapper'
-			)
-			.toEqual( [
-				{
-					name: 'core/block',
-					attributes: { ref: expect.any( Number ) },
-					innerBlocks: [
-						{
-							attributes: {
-								content: 'A useful paragraph to reuse',
-								dropCap: false,
-							},
-							innerBlocks: [],
-							name: 'core/paragraph',
-						},
-					],
-				},
-			] );
-		const after = await editor.getBlocks();
-
+		// Check the pattern is focused.
 		const patternBlock = editor.canvas.getByRole( 'document', {
 			name: 'Block: Pattern',
 		} );
 		await expect( patternBlock ).toBeFocused();
 
+		// Check that only the pattern block is present.
+		const existingBlocks = await editor.getBlocks();
+		expect(
+			existingBlocks.every( ( block ) => block.name === 'core/block' )
+		).toBe( true );
+
 		// Check that the new pattern is available in the inserter.
 		await page.getByLabel( 'Toggle block inserter' ).click();
 		await page
@@ -191,7 +179,29 @@ test.describe( 'Synced pattern', () => {
 			.click();
 		await page.getByRole( 'option', { name: 'My synced pattern' } ).click();
 
-		await expect.poll( editor.getBlocks ).toEqual( [ ...after, ...after ] );
+		const [ firstSyncedPattern, secondSyncedPattern ] =
+			await editor.getBlocks();
+		// Check they are both patterns.
+		expect( firstSyncedPattern.name ).toBe( 'core/block' );
+		expect( secondSyncedPattern.name ).toBe( 'core/block' );
+		// Check they have the same ref.
+		expect( firstSyncedPattern.attributes.ref ).toEqual(
+			secondSyncedPattern.attributes.ref
+		);
+
+		// Check that the frontend shows the content of the pattern.
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+		const [ firstParagraph, secondParagraph ] = await page
+			.locator( '#reused-paragraph' )
+			.all();
+
+		await expect( firstParagraph ).toHaveText(
+			'A useful paragraph to reuse'
+		);
+		await expect( secondParagraph ).toHaveText(
+			'A useful paragraph to reuse'
+		);
 	} );
 
 	// Check for regressions of https://github.com/WordPress/gutenberg/issues/33072.
@@ -203,7 +213,7 @@ test.describe( 'Synced pattern', () => {
 		const { id } = await requestUtils.createBlock( {
 			title: 'Alternative greeting block',
 			content:
-				'<!-- wp:paragraph -->\n<p>Guten Tag!</p>\n<!-- /wp:paragraph -->',
+				'<!-- wp:paragraph -->\n<p id="reused-paragraph">Guten Tag!</p>\n<!-- /wp:paragraph -->',
 			status: 'publish',
 		} );
 
@@ -212,7 +222,7 @@ test.describe( 'Synced pattern', () => {
 			attributes: { ref: id },
 		} );
 
-		await editor.publishPost();
+		const postId = await editor.publishPost();
 
 		await editor.selectBlocks(
 			editor.canvas.getByRole( 'document', { name: 'Block: Pattern' } )
@@ -251,25 +261,11 @@ test.describe( 'Synced pattern', () => {
 			.filter( { hasText: 'Pattern updated.' } )
 			.click();
 
-		// Go back to the post.
-		await editorTopBar.getByRole( 'button', { name: 'Back' } ).click();
-
-		await expect.poll( editor.getBlocks ).toEqual( [
-			{
-				name: 'core/block',
-				attributes: { ref: id },
-				innerBlocks: [
-					{
-						name: 'core/paragraph',
-						attributes: {
-							content: 'Einen Guten Tag!',
-							dropCap: false,
-						},
-						innerBlocks: [],
-					},
-				],
-			},
-		] );
+		// Check that the frontend shows the updated content.
+		await page.goto( `/?p=${ postId }` );
+		await expect( page.locator( '#reused-paragraph' ) ).toHaveText(
+			'Einen Guten Tag!'
+		);
 	} );
 
 	// Check for regressions of https://github.com/WordPress/gutenberg/issues/26421.
@@ -320,27 +316,17 @@ test.describe( 'Synced pattern', () => {
 		// Go back to the post.
 		await editorTopBar.getByRole( 'button', { name: 'Back' } ).click();
 
-		const expectedParagraphBlock = {
-			name: 'core/paragraph',
-			attributes: { content: 'After Edit' },
-		};
-
-		await expect.poll( editor.getBlocks ).toMatchObject( [
-			{
-				name: 'core/block',
-				attributes: { ref: id },
-				innerBlocks: [ expectedParagraphBlock ],
-			},
-		] );
-
 		await editor.selectBlocks(
 			editor.canvas.getByRole( 'document', { name: 'Block: Pattern' } )
 		);
 		await editor.clickBlockOptionsMenuItem( 'Detach' );
 
-		await expect
-			.poll( editor.getBlocks )
-			.toMatchObject( [ expectedParagraphBlock ] );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'After Edit' },
+			},
+		] );
 	} );
 
 	test( 'can be created, inserted, and converted to a regular block', async ( {
@@ -359,27 +345,23 @@ test.describe( 'Synced pattern', () => {
 			attributes: { ref: id },
 		} );
 
-		const expectedParagraphBlock = {
-			name: 'core/paragraph',
-			attributes: { content: 'Hello there!' },
-		};
-
-		await expect.poll( editor.getBlocks ).toMatchObject( [
-			{
-				name: 'core/block',
-				attributes: { ref: id },
-				innerBlocks: [ expectedParagraphBlock ],
-			},
-		] );
+		// Check that only the pattern block is present.
+		const existingBlocks = await editor.getBlocks();
+		expect(
+			existingBlocks.every( ( block ) => block.name === 'core/block' )
+		).toBe( true );
 
 		await editor.selectBlocks(
 			editor.canvas.getByRole( 'document', { name: 'Block: Pattern' } )
 		);
 		await editor.clickBlockOptionsMenuItem( 'Detach' );
 
-		await expect
-			.poll( editor.getBlocks )
-			.toMatchObject( [ expectedParagraphBlock ] );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'Hello there!' },
+			},
+		] );
 	} );
 
 	test( 'can be inserted after refresh', async ( {
@@ -394,7 +376,7 @@ test.describe( 'Synced pattern', () => {
 		await editor.clickBlockOptionsMenuItem( 'Create pattern' );
 
 		const createPatternDialog = page.getByRole( 'dialog', {
-			name: 'Create pattern',
+			name: 'add new pattern',
 		} );
 		await createPatternDialog
 			.getByRole( 'textbox', { name: 'Name' } )
@@ -403,9 +385,16 @@ test.describe( 'Synced pattern', () => {
 			.getByRole( 'checkbox', { name: 'Synced' } )
 			.setChecked( true );
 		await createPatternDialog
-			.getByRole( 'button', { name: 'Create' } )
+			.getByRole( 'button', { name: 'Add' } )
 			.click();
 
+		// Wait until the pattern is created.
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Pattern',
+			} )
+		).toBeVisible();
+
 		await admin.createNewPost();
 		await editor.canvas
 			.getByRole( 'button', { name: 'Add default block' } )
@@ -413,18 +402,11 @@ test.describe( 'Synced pattern', () => {
 		await page.keyboard.type( '/Awesome block' );
 		await page.getByRole( 'option', { name: 'Awesome block' } ).click();
 
-		await expect.poll( editor.getBlocks ).toMatchObject( [
-			{
-				name: 'core/block',
-				attributes: { ref: expect.any( Number ) },
-				innerBlocks: [
-					{
-						name: 'core/paragraph',
-						attributes: { content: 'Awesome Paragraph' },
-					},
-				],
-			},
-		] );
+		// Check that the pattern block is present.
+		const existingBlocks = await editor.getBlocks();
+		expect(
+			existingBlocks.every( ( block ) => block.name === 'core/block' )
+		).toBe( true );
 	} );
 
 	test( 'can be created from multiselection and converted back to regular blocks', async ( {
@@ -444,7 +426,7 @@ test.describe( 'Synced pattern', () => {
 		await editor.clickBlockOptionsMenuItem( 'Create pattern' );
 
 		const createPatternDialog = editor.page.getByRole( 'dialog', {
-			name: 'Create pattern',
+			name: 'add new pattern',
 		} );
 		await createPatternDialog
 			.getByRole( 'textbox', { name: 'Name' } )
@@ -453,10 +435,29 @@ test.describe( 'Synced pattern', () => {
 			.getByRole( 'checkbox', { name: 'Synced' } )
 			.setChecked( true );
 		await createPatternDialog
-			.getByRole( 'button', { name: 'Create' } )
+			.getByRole( 'button', { name: 'Add' } )
 			.click();
 
-		const expectedParagraphBlocks = [
+		// Wait until the pattern is created.
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Pattern',
+			} )
+		).toBeVisible();
+
+		// Check that only the pattern block is present.
+		const existingBlocks = await editor.getBlocks();
+		expect(
+			existingBlocks.every( ( block ) => block.name === 'core/block' )
+		).toBe( true );
+
+		// Convert the pattern back to regular blocks.
+		await editor.selectBlocks(
+			editor.canvas.getByRole( 'document', { name: 'Block: Pattern' } )
+		);
+		await editor.clickBlockOptionsMenuItem( 'Detach' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
 			{
 				name: 'core/paragraph',
 				attributes: { content: 'Hello there!' },
@@ -465,24 +466,7 @@ test.describe( 'Synced pattern', () => {
 				name: 'core/paragraph',
 				attributes: { content: 'Second paragraph' },
 			},
-		];
-
-		await expect.poll( editor.getBlocks ).toMatchObject( [
-			{
-				name: 'core/block',
-				attributes: { ref: expect.any( Number ) },
-				innerBlocks: expectedParagraphBlocks,
-			},
 		] );
-
-		await editor.selectBlocks(
-			editor.canvas.getByRole( 'document', { name: 'Block: Pattern' } )
-		);
-		await editor.clickBlockOptionsMenuItem( 'Detach' );
-
-		await expect
-			.poll( editor.getBlocks )
-			.toMatchObject( expectedParagraphBlocks );
 	} );
 
 	// Check for regressions of https://github.com/WordPress/gutenberg/pull/26484.
@@ -626,7 +610,7 @@ test.describe( 'Synced pattern', () => {
 		await editor.clickBlockOptionsMenuItem( 'Create pattern' );
 
 		const createPatternDialog = editor.page.getByRole( 'dialog', {
-			name: 'Create pattern',
+			name: 'add new pattern',
 		} );
 		await createPatternDialog
 			.getByRole( 'textbox', { name: 'Name' } )
@@ -635,7 +619,7 @@ test.describe( 'Synced pattern', () => {
 			.getByRole( 'checkbox', { name: 'Synced' } )
 			.setChecked( true );
 		await createPatternDialog
-			.getByRole( 'button', { name: 'Create' } )
+			.getByRole( 'button', { name: 'Add' } )
 			.click();
 
 		await expect(
diff --git a/test/e2e/specs/editor/various/post-visibility.spec.js b/test/e2e/specs/editor/various/post-visibility.spec.js
index 67ed156e08660..61cd5e65f0101 100644
--- a/test/e2e/specs/editor/various/post-visibility.spec.js
+++ b/test/e2e/specs/editor/various/post-visibility.spec.js
@@ -17,10 +17,9 @@ test.describe( 'Post visibility', () => {
 
 			await editor.openDocumentSettingsSidebar();
 
-			const postStatusButton = page.locator(
-				'.editor-post-status-trigger'
-			);
-			await postStatusButton.click();
+			await page
+				.getByRole( 'button', { name: 'Change post status:' } )
+				.click();
 			await page.getByRole( 'radio', { name: 'Private' } ).click();
 
 			const currentStatus = await page.evaluate( () => {
@@ -58,8 +57,9 @@ test.describe( 'Post visibility', () => {
 				name: 'Close',
 			} )
 			.click();
-		const postStatusButton = page.locator( '.editor-post-status-trigger' );
-		await postStatusButton.click();
+		await page
+			.getByRole( 'button', { name: 'Change post 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 e69ff6a4be636..b25d1da48122c 100644
--- a/test/e2e/specs/editor/various/preview.spec.js
+++ b/test/e2e/specs/editor/various/preview.spec.js
@@ -183,8 +183,9 @@ test.describe( 'Preview', () => {
 
 		// Return to editor and switch to Draft.
 		await editorPage.bringToFront();
-		const postStatusButton = page.locator( '.editor-post-status-trigger' );
-		await postStatusButton.click();
+		await page
+			.getByRole( 'button', { name: 'Change post 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-panel.spec.js b/test/e2e/specs/editor/various/publish-panel.spec.js
index 534fea5289c9e..c70a7b85cd70f 100644
--- a/test/e2e/specs/editor/various/publish-panel.spec.js
+++ b/test/e2e/specs/editor/various/publish-panel.spec.js
@@ -113,4 +113,98 @@ test.describe( 'Post publish panel', () => {
 			} )
 		).toBeFocused();
 	} );
+
+	test( 'should show panel and indicator when metadata has been modified', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost( {
+			title: 'Test metadata changes with save panel',
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				content: 'paragraph default content',
+				metadata: {
+					bindings: {
+						content: {
+							source: 'core/post-meta',
+							args: { key: 'text_custom_field' },
+						},
+					},
+				},
+			},
+		} );
+		const postId = await editor.publishPost();
+		const metadataUtils = new MetadataUtils( page );
+		await metadataUtils.modifyPostMetadata(
+			'post',
+			postId,
+			'text_custom_field',
+			'test value'
+		);
+		const editorTopBar = page.getByRole( 'region', {
+			name: 'Editor top bar',
+		} );
+
+		const saveButton = editorTopBar.getByRole( 'button', {
+			name: 'Save',
+			exact: true,
+		} );
+
+		await expect( saveButton ).toBeVisible();
+
+		await saveButton.click();
+
+		const publishPanel = page.getByRole( 'region', {
+			name: 'Editor publish',
+		} );
+
+		await expect( publishPanel ).toBeVisible();
+
+		const postMetaPanel = publishPanel.locator(
+			'.entities-saved-states__post-meta'
+		);
+
+		await expect( postMetaPanel ).toBeVisible();
+	} );
 } );
+
+/**
+ * Utilities for working with metadata.
+ *
+ * @param postType
+ * @param postId
+ * @param metaKey
+ * @param metaValue
+ */
+class MetadataUtils {
+	constructor( page ) {
+		this.page = page;
+	}
+
+	async modifyPostMetadata( postType, postId, metaKey, metaValue ) {
+		const parameters = {
+			postType,
+			postId,
+			metaKey,
+			metaValue,
+		};
+
+		await this.page.evaluate( ( _parameters ) => {
+			window.wp.data
+				.dispatch( 'core' )
+				.editEntityRecord(
+					'postType',
+					_parameters.postType,
+					_parameters.postId,
+					{
+						meta: {
+							[ _parameters.metaKey ]: _parameters.metaValue,
+						},
+					}
+				);
+		}, parameters );
+	}
+}
diff --git a/test/e2e/specs/editor/various/sidebar.spec.js b/test/e2e/specs/editor/various/sidebar.spec.js
index 465f37ea9625b..d58bfb2f378ae 100644
--- a/test/e2e/specs/editor/various/sidebar.spec.js
+++ b/test/e2e/specs/editor/various/sidebar.spec.js
@@ -112,10 +112,8 @@ test.describe( 'Sidebar', () => {
 
 		await expect( documentSettingsPanels ).toHaveText( [
 			'No Title',
-			'Summary',
 			'Categories',
 			'Tags',
-			'Discussion',
 		] );
 		// Also check 'panels' that are not rendered as TabPanels.
 		const postExcerptPanel = page.getByRole( 'button', {
@@ -124,8 +122,17 @@ test.describe( 'Sidebar', () => {
 		const postFeaturedImagePanel = page.getByRole( 'button', {
 			name: 'Set featured image',
 		} );
-		await expect( postExcerptPanel ).toHaveCount( 1 );
-		await expect( postFeaturedImagePanel ).toHaveCount( 1 );
+		const postDiscussionPanel = page.getByRole( 'button', {
+			name: 'Change discussion options',
+		} );
+		const postSummarySection = page.getByRole( 'checkbox', {
+			name: 'Sticky',
+		} );
+
+		await expect( postExcerptPanel ).toBeVisible();
+		await expect( postFeaturedImagePanel ).toBeVisible();
+		await expect( postSummarySection ).toBeVisible();
+		await expect( postDiscussionPanel ).toHaveCount( 1 );
 
 		await page.evaluate( () => {
 			const { removeEditorPanel } =
@@ -140,7 +147,9 @@ test.describe( 'Sidebar', () => {
 		} );
 
 		await expect( documentSettingsPanels ).toHaveCount( 1 );
-		await expect( postExcerptPanel ).toHaveCount( 0 );
-		await expect( postFeaturedImagePanel ).toHaveCount( 0 );
+		await expect( postExcerptPanel ).toBeHidden();
+		await expect( postFeaturedImagePanel ).toBeHidden();
+		await expect( postSummarySection ).toBeHidden();
+		await expect( postDiscussionPanel ).toHaveCount( 0 );
 	} );
 } );
diff --git a/test/e2e/specs/editor/various/styles.spec.js b/test/e2e/specs/editor/various/styles.spec.js
new file mode 100644
index 0000000000000..0aa1f3007d241
--- /dev/null
+++ b/test/e2e/specs/editor/various/styles.spec.js
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Styles', () => {
+	test( 'should override reset styles', async ( { admin, editor } ) => {
+		await admin.createNewPost( { postType: 'page' } );
+		await editor.insertBlock( { name: 'core/social-links' } );
+
+		const block = editor.canvas.getByRole( 'document', {
+			name: 'Block: Social Icons',
+		} );
+
+		await expect( block ).toHaveCSS( 'padding-left', '0px' );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/switch-to-draft.spec.js b/test/e2e/specs/editor/various/switch-to-draft.spec.js
index 52971acbf2305..2e1ee3a303a89 100644
--- a/test/e2e/specs/editor/various/switch-to-draft.spec.js
+++ b/test/e2e/specs/editor/various/switch-to-draft.spec.js
@@ -46,11 +46,9 @@ test.describe( 'Clicking "Switch to draft" on a published/scheduled post/page',
 					);
 
 					await editor.openDocumentSettingsSidebar();
-
-					const postStatusButton = page.locator(
-						'.editor-post-status-trigger'
-					);
-					await postStatusButton.click();
+					await page
+						.getByRole( 'button', { name: 'Change post status:' } )
+						.click();
 					await page.getByRole( 'radio', { name: 'Draft' } ).click();
 
 					if ( viewport === 'small' ) {
diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js
index 91aafa43690fd..2eee3cad2b73f 100644
--- a/test/e2e/specs/editor/various/writing-flow.spec.js
+++ b/test/e2e/specs/editor/various/writing-flow.spec.js
@@ -356,7 +356,7 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
 		await page.keyboard.type( 'a' );
 		await page.keyboard.press( 'Backspace' );
 		await expect.poll( editor.getEditedPostContent ).toBe( `<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->` );
@@ -595,6 +595,37 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
 		] );
 	} );
 
+	test( 'should remove first empty paragraph on Backspace', async ( {
+		editor,
+		page,
+	} ) => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+		await page.keyboard.press( 'ArrowUp' );
+
+		// Ensure setup is correct.
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '' },
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: '2' },
+			},
+		] );
+
+		await page.keyboard.press( 'Backspace' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '2' },
+			},
+		] );
+	} );
+
 	test( 'should merge paragraphs', async ( { editor, page } ) => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '1' );
diff --git a/test/e2e/specs/interactivity/directive-bind.spec.ts b/test/e2e/specs/interactivity/directive-bind.spec.ts
index 525fceab5ca6a..11902018e0753 100644
--- a/test/e2e/specs/interactivity/directive-bind.spec.ts
+++ b/test/e2e/specs/interactivity/directive-bind.spec.ts
@@ -210,6 +210,12 @@ test.describe( 'data-wp-bind', () => {
 					const el = container.getByTestId( testid );
 					const toggle = container.getByTestId( 'toggle value' );
 
+					// Ensure hydration has happened.
+					const checkbox = page.getByTestId(
+						'add missing checked at hydration'
+					);
+					await expect( checkbox ).toBeChecked();
+
 					const hydratedAttr = await el.getAttribute( name );
 					const hydratedProp = await el.evaluate(
 						( node, propName ) => ( node as any )[ propName ],
@@ -236,7 +242,13 @@ test.describe( 'data-wp-bind', () => {
 						return;
 					}
 
-					await toggle.click( { clickCount: 2, delay: 50 } );
+					await toggle.click( { clickCount: 2 } );
+
+					// Ensure values have been updated after toggling.
+					await expect( toggle ).toHaveAttribute(
+						'data-toggle-count',
+						'2'
+					);
 
 					// Values should be the same as before.
 					const renderedAttr = await el.getAttribute( name );
diff --git a/test/e2e/specs/interactivity/directive-on-document.spec.ts b/test/e2e/specs/interactivity/directive-on-document.spec.ts
index 2b4f36f51efcc..62d122ee2359e 100644
--- a/test/e2e/specs/interactivity/directive-on-document.spec.ts
+++ b/test/e2e/specs/interactivity/directive-on-document.spec.ts
@@ -65,4 +65,25 @@ test.describe( 'data-wp-on-document', () => {
 		await page.keyboard.press( 'ArrowDown' );
 		await expect( counter ).toHaveText( '2' );
 	} );
+	test( 'should work with multiple event handlers on the same event type', async ( {
+		page,
+	} ) => {
+		const keydownHandler = page.getByTestId( 'keydownHandler' );
+		const keydownSecondHandler = page.getByTestId( 'keydownSecondHandler' );
+
+		// Initial value.
+		await expect( keydownHandler ).toHaveText( 'no' );
+		await expect( keydownSecondHandler ).toHaveText( 'no' );
+
+		// Make sure the event listener is attached.
+		await page
+			.getByTestId( 'isEventAttached' )
+			.filter( { hasText: 'yes' } )
+			.waitFor();
+
+		// This keyboard press should increase the counter.
+		await page.keyboard.press( 'ArrowDown' );
+		await expect( keydownHandler ).toHaveText( 'yes' );
+		await expect( keydownSecondHandler ).toHaveText( 'yes' );
+	} );
 } );
diff --git a/test/e2e/specs/interactivity/directive-on-window.spec.ts b/test/e2e/specs/interactivity/directive-on-window.spec.ts
index 3afd1a9942fa8..ed090839c49ad 100644
--- a/test/e2e/specs/interactivity/directive-on-window.spec.ts
+++ b/test/e2e/specs/interactivity/directive-on-window.spec.ts
@@ -65,4 +65,25 @@ test.describe( 'data-wp-on-window', () => {
 		await page.setViewportSize( { width: 200, height: 600 } );
 		await expect( counter ).toHaveText( '2' );
 	} );
+	test( 'should work with multiple event handlers on the same event type', async ( {
+		page,
+	} ) => {
+		const resizeHandler = page.getByTestId( 'resizeHandler' );
+		const resizeSecondHandler = page.getByTestId( 'resizeSecondHandler' );
+
+		// Initial value.
+		await expect( resizeHandler ).toHaveText( 'no' );
+		await expect( resizeSecondHandler ).toHaveText( 'no' );
+
+		// Make sure the event listener is attached.
+		await page
+			.getByTestId( 'isEventAttached' )
+			.filter( { hasText: 'yes' } )
+			.waitFor();
+
+		// This keyboard press should increase the counter.
+		await page.setViewportSize( { width: 600, height: 600 } );
+		await expect( resizeHandler ).toHaveText( 'yes' );
+		await expect( resizeSecondHandler ).toHaveText( 'yes' );
+	} );
 } );
diff --git a/test/e2e/specs/interactivity/namespace.spec.ts b/test/e2e/specs/interactivity/namespace.spec.ts
new file mode 100644
index 0000000000000..9d0edc997886c
--- /dev/null
+++ b/test/e2e/specs/interactivity/namespace.spec.ts
@@ -0,0 +1,87 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'Namespaces', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test-namespace/directive-bind' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test-namespace/directive-bind' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'Empty string as namespace should not work', async ( { page } ) => {
+		const el = page.getByTestId( 'empty namespace' );
+		await expect( el ).not.toHaveAttribute( 'href', '/empty-string-url' );
+	} );
+
+	test( 'A string as namespace should work', async ( { page } ) => {
+		const el = page.getByTestId( 'correct namespace' );
+		await expect( el ).toHaveAttribute( 'href', '/namespace-url' );
+	} );
+
+	test( 'An empty object as namespace should not work', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId( 'object namespace' );
+		await expect( el ).not.toHaveAttribute( 'href', '/object-url' );
+	} );
+
+	test( 'A wrong namespace should not break the runtime', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId( 'object namespace' );
+		await expect( el ).not.toHaveAttribute( 'href', '/namespace-url' );
+		const correct = page.getByTestId( 'correct namespace' );
+		await expect( correct ).toHaveAttribute( 'href', '/namespace-url' );
+	} );
+
+	test( 'A different store namespace should work', async ( { page } ) => {
+		const el = page.getByTestId( 'other namespace' );
+		await expect( el ).toHaveAttribute( 'href', '/other-store-url' );
+	} );
+
+	test( 'A number as a string as namespace should work', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId( 'number namespace' );
+		await expect( el ).toHaveAttribute( 'href', '/number-url' );
+	} );
+
+	test( 'A null as a string as namespace should work', async ( { page } ) => {
+		const el = page.getByTestId( 'null namespace' );
+		await expect( el ).toHaveAttribute( 'href', '/null-url' );
+	} );
+
+	test( 'A true as a string as namespace should work', async ( { page } ) => {
+		const el = page.getByTestId( 'true namespace' );
+		await expect( el ).toHaveAttribute( 'href', '/true-url' );
+	} );
+
+	test( 'A false as a string as namespace should work', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId( 'false namespace' );
+		await expect( el ).toHaveAttribute( 'href', '/false-url' );
+	} );
+
+	test( 'A [] as a string as namespace should work', async ( { page } ) => {
+		const el = page.getByTestId( '[] namespace' );
+		await expect( el ).toHaveAttribute( 'href', '/array-url' );
+	} );
+
+	test( 'A "quoted string" as a string as namespace should work', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId( 'quoted namespace' );
+		await expect( el ).toHaveAttribute( 'href', '/quoted-url' );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/block-removal.spec.js b/test/e2e/specs/site-editor/block-removal.spec.js
index 2b149bcc69bf3..7fc547c19e59e 100644
--- a/test/e2e/specs/site-editor/block-removal.spec.js
+++ b/test/e2e/specs/site-editor/block-removal.spec.js
@@ -12,12 +12,12 @@ test.describe( 'Site editor block removal prompt', () => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 
-	test.beforeEach( async ( { admin, editor } ) => {
+	test.beforeEach( async ( { admin } ) => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editor.canvas.locator( 'body' ).click();
 	} );
 
 	test( 'should appear when attempting to remove Query Block', async ( {
@@ -25,10 +25,14 @@ test.describe( 'Site editor block removal prompt', () => {
 	} ) => {
 		// Open and focus List View
 		const topBar = page.getByRole( 'region', { name: 'Editor top bar' } );
-		await topBar.getByRole( 'button', { name: 'List View' } ).click();
+		await topBar
+			.getByRole( 'button', { name: 'Document Overview' } )
+			.click();
 
 		// Select and try to remove Query Loop block
-		const listView = page.getByRole( 'region', { name: 'List View' } );
+		const listView = page.getByRole( 'region', {
+			name: 'Document Overview',
+		} );
 		await listView.getByRole( 'link', { name: 'Query Loop' } ).click();
 		await page.keyboard.press( 'Backspace' );
 
@@ -45,10 +49,14 @@ test.describe( 'Site editor block removal prompt', () => {
 	} ) => {
 		// Open and focus List View
 		const topBar = page.getByRole( 'region', { name: 'Editor top bar' } );
-		await topBar.getByRole( 'button', { name: 'List View' } ).click();
+		await topBar
+			.getByRole( 'button', { name: 'Document Overview' } )
+			.click();
 
 		// Select and open child blocks of Query Loop block
-		const listView = page.getByRole( 'region', { name: 'List View' } );
+		const listView = page.getByRole( 'region', {
+			name: 'Document Overview',
+		} );
 		await listView.getByRole( 'link', { name: 'Query Loop' } ).click();
 		await page.keyboard.press( 'ArrowRight' );
 
@@ -70,10 +78,14 @@ test.describe( 'Site editor block removal prompt', () => {
 	} ) => {
 		// Open and focus List View
 		const topBar = page.getByRole( 'region', { name: 'Editor top bar' } );
-		await topBar.getByRole( 'button', { name: 'List View' } ).click();
+		await topBar
+			.getByRole( 'button', { name: 'Document Overview' } )
+			.click();
 
 		// Select Query Loop list item
-		const listView = page.getByRole( 'region', { name: 'List View' } );
+		const listView = page.getByRole( 'region', {
+			name: 'Document Overview',
+		} );
 		await listView.getByRole( 'link', { name: 'Query Loop' } ).click();
 
 		// Reveal its inner blocks in the list view
diff --git a/test/e2e/specs/site-editor/browser-history.spec.js b/test/e2e/specs/site-editor/browser-history.spec.js
index 4476ce0aa7c0a..eaafb3aad1b3f 100644
--- a/test/e2e/specs/site-editor/browser-history.spec.js
+++ b/test/e2e/specs/site-editor/browser-history.spec.js
@@ -27,7 +27,7 @@ test.describe( 'Site editor browser history', () => {
 		// Navigate back to the template list
 		await page.goBack();
 		await expect( page ).toHaveURL(
-			'/wp-admin/site-editor.php?path=%2Fwp_template'
+			'/wp-admin/site-editor.php?postType=wp_template'
 		);
 
 		// Navigate back to the dashboard
diff --git a/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js b/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js
new file mode 100644
index 0000000000000..656a3f34920b4
--- /dev/null
+++ b/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js
@@ -0,0 +1,200 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Dataviews List Layout', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		// Activate a theme with permissions to access the site editor.
+		await requestUtils.activateTheme( 'emptytheme' );
+		await requestUtils.createPage( {
+			title: 'Privacy Policy',
+			status: 'publish',
+		} );
+		await requestUtils.createPage( {
+			title: 'Sample Page',
+			status: 'publish',
+		} );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		// Go back to the default theme.
+		await Promise.all( [
+			requestUtils.activateTheme( 'twentytwentyone' ),
+			requestUtils.deleteAllPages(),
+		] );
+	} );
+
+	test.beforeEach( async ( { admin, page } ) => {
+		// Go to the pages page, as it has the list layout enabled by default.
+		await admin.visitSiteEditor();
+		await page.getByRole( 'button', { name: 'Pages' } ).click();
+	} );
+
+	test( 'Items list is reachable via TAB', async ( { page } ) => {
+		// Start the sequence on the search component.
+		await page.getByRole( 'searchbox', { name: 'Search' } ).click();
+
+		// Tab until reaching the items list.
+		await page.keyboard.press( 'Tab' );
+		await expect(
+			page.getByRole( 'button', { name: 'Add filter' } )
+		).toBeFocused();
+
+		await page.keyboard.press( 'Tab' );
+		await expect(
+			page.getByRole( 'button', { name: 'Reset' } )
+		).toBeFocused();
+
+		await page.keyboard.press( 'Tab' );
+		await expect(
+			page.getByRole( 'button', { name: 'View options' } )
+		).toBeFocused();
+
+		// Make sure the items have loaded before reaching for the 1st item in the list.
+		await expect( page.getByRole( 'grid' ) ).toBeVisible();
+		await page.keyboard.press( 'Tab' );
+		await expect( page.getByLabel( 'Privacy Policy' ) ).toBeFocused();
+	} );
+
+	test( 'Navigates from items list to preview via TAB, and vice versa', async ( {
+		page,
+	} ) => {
+		// Start the sequence on the search component.
+		await page.getByRole( 'searchbox', { name: 'Search' } ).click();
+
+		// Tab until reaching the items list.
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+
+		// 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();
+
+		// Go to the preview.
+		await page.keyboard.press( 'Tab' );
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor content' } )
+				.getByRole( 'button', { name: 'Edit' } )
+		).toBeFocused();
+
+		// Go back to the items list using SHIFT+TAB.
+		await page.keyboard.press( 'Shift+Tab' );
+		await expect( page.getByLabel( 'Privacy Policy' ) ).toBeFocused();
+	} );
+
+	test( 'Navigates the items list via UP/DOWN arrow keys', async ( {
+		page,
+	} ) => {
+		// Start the sequence on the search component.
+		await page.getByRole( 'searchbox', { name: 'Search' } ).click();
+
+		// Tab until reaching the items list.
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+
+		// Make sure the items have loaded before reaching for the 1st item in the list.
+		await expect( page.getByRole( 'grid' ) ).toBeVisible();
+		await page.keyboard.press( 'Tab' );
+
+		// Use arrow up/down to move through the list.
+		await page.keyboard.press( 'ArrowDown' );
+		await expect( page.getByLabel( 'Sample Page' ) ).toBeFocused();
+
+		await page.keyboard.press( 'ArrowUp' );
+		await expect( page.getByLabel( 'Privacy Policy' ) ).toBeFocused();
+	} );
+
+	test( 'Actions are reachable via RIGHT/LEFT arrow keys', async ( {
+		page,
+	} ) => {
+		// Start the sequence on the search component.
+		await page.getByRole( 'searchbox', { name: 'Search' } ).click();
+
+		// Tab until reaching the items list.
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+
+		// Make sure the items have loaded before reaching for the 1st item in the list.
+		await expect( page.getByRole( 'grid' ) ).toBeVisible();
+		await page.keyboard.press( 'Tab' );
+
+		// Use right/left arrow keys to move horizontally.
+		await page.keyboard.press( 'ArrowRight' );
+		await expect(
+			page
+				.getByRole( 'row', { name: 'Privacy Policy Edit Actions' } )
+				.getByLabel( 'Edit' )
+		).toBeFocused();
+
+		await page.keyboard.press( 'ArrowRight' );
+		await expect(
+			page
+				.getByRole( 'row', { name: 'Privacy Policy Edit Actions' } )
+				.getByLabel( 'Actions' )
+		).toBeFocused();
+
+		await page.keyboard.press( 'ArrowLeft' );
+		await expect(
+			page
+				.getByRole( 'row', { name: 'Privacy Policy Edit Actions' } )
+				.getByLabel( 'Edit' )
+		).toBeFocused();
+
+		await page.keyboard.press( 'ArrowLeft' );
+		await expect( page.getByLabel( 'Privacy Policy' ) ).toBeFocused();
+	} );
+
+	test( 'Navigates the list via UP/DOWN arrow keys from action buttons', async ( {
+		page,
+	} ) => {
+		// Start the sequence on the search component.
+		await page.getByRole( 'searchbox', { name: 'Search' } ).click();
+
+		// Tab until reaching the items list.
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+
+		// Make sure the items have loaded before reaching for the 1st item in the list.
+		await expect( page.getByRole( 'grid' ) ).toBeVisible();
+		await page.keyboard.press( 'Tab' );
+
+		// Use arrow up/down to move through the list from the edit primary action button.
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowDown' );
+		await expect(
+			page
+				.getByRole( 'row', { name: 'Sample Page Edit Actions' } )
+				.getByLabel( 'Edit' )
+		).toBeFocused();
+
+		await page.keyboard.press( 'ArrowUp' );
+		await expect(
+			page
+				.getByRole( 'row', { name: 'Privacy Policy Edit Actions' } )
+				.getByLabel( 'Edit' )
+		).toBeFocused();
+
+		// Use arrow up/down to move through the list from the all actions button.
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowDown' );
+		await expect(
+			page
+				.getByRole( 'row', { name: 'Sample Page Edit Actions' } )
+				.getByLabel( 'Actions' )
+		).toBeFocused();
+
+		await page.keyboard.press( 'ArrowUp' );
+		await expect(
+			page
+				.getByRole( 'row', { name: 'Privacy Policy Edit Actions' } )
+				.getByLabel( 'Actions' )
+		).toBeFocused();
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/global-styles-sidebar.spec.js b/test/e2e/specs/site-editor/global-styles-sidebar.spec.js
index f255640cb2f12..257ebc38f3b4d 100644
--- a/test/e2e/specs/site-editor/global-styles-sidebar.spec.js
+++ b/test/e2e/specs/site-editor/global-styles-sidebar.spec.js
@@ -12,12 +12,12 @@ test.describe( 'Global styles sidebar', () => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 
-	test.beforeEach( async ( { admin, editor } ) => {
+	test.beforeEach( async ( { admin } ) => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editor.canvas.locator( 'body' ).click();
 	} );
 
 	test( 'should filter blocks list results', async ( { page } ) => {
diff --git a/test/e2e/specs/site-editor/hybrid-theme.spec.js b/test/e2e/specs/site-editor/hybrid-theme.spec.js
index ea22349f5b7eb..b568aaf4445b5 100644
--- a/test/e2e/specs/site-editor/hybrid-theme.spec.js
+++ b/test/e2e/specs/site-editor/hybrid-theme.spec.js
@@ -23,7 +23,7 @@ test.describe( 'Hybrid theme', () => {
 		).toBeVisible();
 	} );
 
-	test( 'should show Patterns page when accessing template parts list page', async ( {
+	test( 'should redirect to Patterns page when accessing template parts list page', async ( {
 		admin,
 		page,
 	} ) => {
@@ -32,6 +32,10 @@ test.describe( 'Hybrid theme', () => {
 			'path=/wp_template_part/all'
 		);
 
+		await expect( page ).toHaveURL(
+			'/wp-admin/site-editor.php?postType=wp_template_part'
+		);
+
 		await expect(
 			page.getByRole( 'heading', { level: 1, text: 'Patterns' } )
 		).toBeVisible();
diff --git a/test/e2e/specs/site-editor/iframe-rendering.spec.js b/test/e2e/specs/site-editor/iframe-rendering.spec.js
index 4391f134a9f80..9c25ef504637e 100644
--- a/test/e2e/specs/site-editor/iframe-rendering.spec.js
+++ b/test/e2e/specs/site-editor/iframe-rendering.spec.js
@@ -19,6 +19,7 @@ test.describe( 'Site editor iframe rendering mode', () => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
 		const compatMode = await editor.canvas
 			.locator( ':root' )
diff --git a/test/e2e/specs/site-editor/list-view.spec.js b/test/e2e/specs/site-editor/list-view.spec.js
index 9b7a1c17a9ce1..db514463a73d7 100644
--- a/test/e2e/specs/site-editor/list-view.spec.js
+++ b/test/e2e/specs/site-editor/list-view.spec.js
@@ -12,13 +12,13 @@ test.describe( 'Site Editor List View', () => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 
-	test.beforeEach( async ( { admin, editor } ) => {
+	test.beforeEach( async ( { admin } ) => {
 		// Select a template part with a few blocks.
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
+			canvas: 'edit',
 		} );
-		await editor.canvas.locator( 'body' ).click();
 	} );
 
 	test( 'should open by default when preference is enabled', async ( {
@@ -26,7 +26,7 @@ test.describe( 'Site Editor List View', () => {
 		editor,
 	} ) => {
 		await expect(
-			page.locator( 'role=region[name="List View"i]' )
+			page.locator( 'role=region[name="Document Overview"i]' )
 		).toBeHidden();
 
 		// Turn on block list view by default.
@@ -37,7 +37,7 @@ test.describe( 'Site Editor List View', () => {
 		await page.reload();
 
 		await expect(
-			page.locator( 'role=region[name="List View"i]' )
+			page.locator( 'role=region[name="Document Overview"i]' )
 		).toBeVisible();
 
 		// The preferences cleanup.
@@ -106,7 +106,7 @@ test.describe( 'Site Editor List View', () => {
 
 		// Focus should now be on the list view toggle button.
 		await expect(
-			page.getByRole( 'button', { name: 'List View' } )
+			page.getByRole( 'button', { name: 'Document Overview' } )
 		).toBeFocused();
 
 		// Open List View.
@@ -121,7 +121,7 @@ test.describe( 'Site Editor List View', () => {
 		await pageUtils.pressKeys( 'shift+Tab' );
 		await expect(
 			page
-				.getByRole( 'region', { name: 'List View' } )
+				.getByRole( 'region', { name: 'Document Overview' } )
 				.getByRole( 'button', {
 					name: 'Close',
 				} )
@@ -129,7 +129,7 @@ test.describe( 'Site Editor List View', () => {
 		await pageUtils.pressKeys( 'access+o' );
 		await expect( listView ).toBeHidden();
 		await expect(
-			page.getByRole( 'button', { name: 'List View' } )
+			page.getByRole( 'button', { name: 'Document Overview' } )
 		).toBeFocused();
 	} );
 } );
diff --git a/test/e2e/specs/site-editor/multi-entity-saving.spec.js b/test/e2e/specs/site-editor/multi-entity-saving.spec.js
index 0e79d96a2ad9e..88a277b8c88f2 100644
--- a/test/e2e/specs/site-editor/multi-entity-saving.spec.js
+++ b/test/e2e/specs/site-editor/multi-entity-saving.spec.js
@@ -18,12 +18,12 @@ test.describe( 'Site Editor - Multi-entity save flow', () => {
 		] );
 	} );
 
-	test.beforeEach( async ( { admin, editor } ) => {
+	test.beforeEach( async ( { admin } ) => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editor.canvas.locator( 'body' ).click();
 	} );
 
 	test( 'save flow should work as expected', async ( { editor, page } ) => {
diff --git a/test/e2e/specs/site-editor/navigation-editor.spec.js b/test/e2e/specs/site-editor/navigation-editor.spec.js
index 47519dc3ba613..2813ceb13748a 100644
--- a/test/e2e/specs/site-editor/navigation-editor.spec.js
+++ b/test/e2e/specs/site-editor/navigation-editor.spec.js
@@ -45,7 +45,7 @@ test.describe( 'Editing Navigation Menus', () => {
 
 			const listView = page
 				.getByRole( 'region', {
-					name: 'List View',
+					name: 'Document Overview',
 				} )
 				.getByRole( 'treegrid', {
 					name: 'Block navigation structure',
@@ -99,7 +99,7 @@ test.describe( 'Editing Navigation Menus', () => {
 
 			// Check the standard tabs are not present.
 			await expect(
-				sidebar.getByRole( 'tab', { name: 'List View' } )
+				sidebar.getByRole( 'tab', { name: 'Document Overview' } )
 			).toBeHidden();
 			await expect(
 				sidebar.getByRole( 'tab', { name: 'Settings' } )
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 fc321a87e4365..ab37244df107c 100644
--- a/test/e2e/specs/site-editor/new-templates-list.spec.js
+++ b/test/e2e/specs/site-editor/new-templates-list.spec.js
@@ -20,7 +20,7 @@ test.describe( 'Templates', () => {
 	} );
 
 	test( 'Sorting', async ( { admin, page } ) => {
-		await admin.visitSiteEditor( { path: '/wp_template' } );
+		await admin.visitSiteEditor( { postType: 'wp_template' } );
 
 		// Descending by title.
 		await page.getByRole( 'button', { name: 'View options' } ).click();
@@ -47,7 +47,7 @@ test.describe( 'Templates', () => {
 			title: 'Date Archives',
 			content: 'hi',
 		} );
-		await admin.visitSiteEditor( { path: '/wp_template' } );
+		await admin.visitSiteEditor( { postType: 'wp_template' } );
 		// Global search.
 		await page.getByRole( 'searchbox', { name: 'Search' } ).fill( 'tag' );
 		const titles = page
@@ -84,7 +84,7 @@ test.describe( 'Templates', () => {
 	} );
 
 	test( 'Field visibility', async ( { admin, page } ) => {
-		await admin.visitSiteEditor( { path: '/wp_template' } );
+		await admin.visitSiteEditor( { postType: 'wp_template' } );
 
 		await page.getByRole( 'button', { name: 'View options' } ).click();
 		await page.getByRole( 'menuitem', { name: 'Layout' } ).click();
diff --git a/test/e2e/specs/site-editor/patterns.spec.js b/test/e2e/specs/site-editor/patterns.spec.js
index b556be5621f3d..0b0fada39c262 100644
--- a/test/e2e/specs/site-editor/patterns.spec.js
+++ b/test/e2e/specs/site-editor/patterns.spec.js
@@ -33,7 +33,7 @@ test.describe( 'Patterns', () => {
 		admin,
 		patterns,
 	} ) => {
-		await admin.visitSiteEditor( { path: '/patterns' } );
+		await admin.visitSiteEditor( { postType: 'wp_block' } );
 		await expect(
 			patterns.navigation.getByRole( 'heading', {
 				name: 'Patterns',
@@ -42,24 +42,22 @@ test.describe( 'Patterns', () => {
 		).toBeVisible();
 		await expect( patterns.content ).toContainText( 'No results' );
 
-		await patterns.navigation
-			.getByRole( 'button', { name: 'Create pattern' } )
+		await patterns.content
+			.getByRole( 'button', { name: 'add new pattern' } )
 			.click();
 
-		const createPatternMenu = page.getByRole( 'menu', {
-			name: 'Create pattern',
-		} );
-		await expect(
-			createPatternMenu.getByRole( 'menuitem', {
-				name: 'Create pattern',
+		const addNewMenuItem = page
+			.getByRole( 'menu', {
+				name: 'add new pattern',
 			} )
-		).toBeFocused();
-		await createPatternMenu
-			.getByRole( 'menuitem', { name: 'Create pattern' } )
-			.click();
+			.getByRole( 'menuitem', {
+				name: 'add new pattern',
+			} );
+		await expect( addNewMenuItem ).toBeFocused();
+		await addNewMenuItem.click();
 
 		const createPatternDialog = page.getByRole( 'dialog', {
-			name: 'Create pattern',
+			name: 'add new pattern',
 		} );
 		await createPatternDialog
 			.getByRole( 'textbox', { name: 'Name' } )
@@ -87,9 +85,6 @@ test.describe( 'Patterns', () => {
 		).toContainText( 'Pattern updated' );
 
 		await page.getByRole( 'button', { name: 'Open navigation' } ).click();
-		await patterns.navigation
-			.getByRole( 'button', { name: 'Back' } )
-			.click();
 
 		await expect(
 			patterns.navigation.getByRole( 'button', {
@@ -150,7 +145,7 @@ test.describe( 'Patterns', () => {
 			} ),
 		] );
 
-		await admin.visitSiteEditor( { path: '/patterns' } );
+		await admin.visitSiteEditor( { postType: 'wp_block' } );
 
 		await expect( patterns.item ).toHaveCount( 3 );
 		const searchBox = patterns.content.getByRole( 'searchbox', {
@@ -168,7 +163,7 @@ test.describe( 'Patterns', () => {
 		await expect( patterns.content ).toContainText( 'No results' );
 
 		await patterns.content
-			.getByRole( 'button', { name: 'Reset', exact: true } )
+			.getByRole( 'button', { name: 'Reset search', exact: true } )
 			.click();
 		await expect( searchBox ).toHaveValue( '' );
 		await expect( patterns.item ).toHaveCount( 3 );
diff --git a/test/e2e/specs/site-editor/push-to-global-styles.spec.js b/test/e2e/specs/site-editor/push-to-global-styles.spec.js
index 71a57fd04e515..26224a83e27eb 100644
--- a/test/e2e/specs/site-editor/push-to-global-styles.spec.js
+++ b/test/e2e/specs/site-editor/push-to-global-styles.spec.js
@@ -12,12 +12,12 @@ test.describe( 'Push to Global Styles button', () => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 
-	test.beforeEach( async ( { admin, editor } ) => {
+	test.beforeEach( async ( { admin } ) => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editor.canvas.locator( 'body' ).click();
 	} );
 
 	test( 'should apply Heading block styles to all Heading blocks', async ( {
diff --git a/test/e2e/specs/site-editor/settings-sidebar.spec.js b/test/e2e/specs/site-editor/settings-sidebar.spec.js
index 8be0ec7a28cec..87e9023401109 100644
--- a/test/e2e/specs/site-editor/settings-sidebar.spec.js
+++ b/test/e2e/specs/site-editor/settings-sidebar.spec.js
@@ -55,12 +55,9 @@ test.describe( 'Settings sidebar', () => {
 			const templateTitle = settingsSideber.locator(
 				'.editor-post-card-panel__title'
 			);
-			const templateDescription = settingsSideber.locator(
-				'.editor-post-card-panel__description'
-			);
 
 			await expect( templateTitle ).toHaveText( 'Index' );
-			await expect( templateDescription ).toHaveText(
+			await expect( settingsSideber ).toContainText(
 				'Used as a fallback template for all pages when a more specific template is not defined.'
 			);
 
@@ -71,7 +68,7 @@ test.describe( 'Settings sidebar', () => {
 			} );
 
 			await expect( templateTitle ).toHaveText( 'Single Entries' );
-			await expect( templateDescription ).toHaveText(
+			await expect( settingsSideber ).toContainText(
 				'Displays any single entry, such as a post or a page. This template will serve as a fallback when a more specific template (e.g. Single Post, Page, or Attachment) cannot be found.'
 			);
 		} );
diff --git a/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js b/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js
index 9a6fd11a56e3b..337c26315c8a3 100644
--- a/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js
+++ b/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js
@@ -54,10 +54,10 @@ test.describe( 'Site editor url navigation', () => {
 	} ) => {
 		await admin.visitSiteEditor();
 		await page.click( 'role=button[name="Patterns"i]' );
-		await page.click( 'role=button[name="Create pattern"i]' );
+		await page.click( 'role=button[name="add new pattern"i]' );
 		await page
-			.getByRole( 'menu', { name: 'Create pattern' } )
-			.getByRole( 'menuitem', { name: 'Create template part' } )
+			.getByRole( 'menu', { name: 'add new pattern' } )
+			.getByRole( 'menuitem', { name: 'add new template part' } )
 			.click();
 		// Fill in a name in the dialog that pops up.
 		await page.type( 'role=dialog >> role=textbox[name="Name"i]', 'Demo' );
@@ -87,9 +87,8 @@ test.describe( 'Site editor url navigation', () => {
 			page.getByRole( 'region', { name: 'Editor content' } )
 		).toBeVisible();
 		await page.getByRole( 'button', { name: 'Open navigation' } ).click();
-		await navigation.getByRole( 'button', { name: 'Back' } ).click();
 		await expect(
-			navigation.getByRole( 'button', { name: 'General' } )
-		).toHaveAttribute( 'aria-current', 'true' );
+			navigation.getByRole( 'button', { name: 'All template parts' } )
+		).toBeVisible();
 	} );
 } );
diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
index 4a5864755614b..087013607be2f 100644
--- a/test/e2e/specs/site-editor/style-book.spec.js
+++ b/test/e2e/specs/site-editor/style-book.spec.js
@@ -30,18 +30,12 @@ test.describe( 'Style Book', () => {
 	test( 'should disable toolbar buttons when open', async ( { page } ) => {
 		await expect(
 			page.locator( 'role=button[name="Toggle block inserter"i]' )
-		).toBeHidden();
+		).toBeDisabled();
 		await expect(
 			page.locator( 'role=button[name="Tools"i]' )
-		).toBeHidden();
-		await expect(
-			page.locator( 'role=button[name="Undo"i]' )
-		).toBeHidden();
-		await expect(
-			page.locator( 'role=button[name="Redo"i]' )
-		).toBeHidden();
+		).toBeDisabled();
 		await expect(
-			page.locator( 'role=button[name="View"i]' )
+			page.locator( 'role=button[name="Document Overview"i]' )
 		).toBeDisabled();
 	} );
 
diff --git a/test/e2e/specs/site-editor/style-variations.spec.js b/test/e2e/specs/site-editor/style-variations.spec.js
index 9b12f37c0baa6..c4dad7c7d7546 100644
--- a/test/e2e/specs/site-editor/style-variations.spec.js
+++ b/test/e2e/specs/site-editor/style-variations.spec.js
@@ -33,13 +33,12 @@ test.describe( 'Global styles variations', () => {
 		admin,
 		page,
 		siteEditorStyleVariations,
-		editor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editor.canvas.locator( 'body' ).click();
 
 		await siteEditorStyleVariations.browseStyles();
 
@@ -70,13 +69,12 @@ test.describe( 'Global styles variations', () => {
 		admin,
 		page,
 		siteEditorStyleVariations,
-		editor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editor.canvas.locator( 'body' ).click();
 		await siteEditorStyleVariations.browseStyles();
 		await page.click( 'role=button[name="pink"i]' );
 		await page.click( 'role=button[name="Back"i]' );
@@ -107,13 +105,12 @@ test.describe( 'Global styles variations', () => {
 		admin,
 		page,
 		siteEditorStyleVariations,
-		editor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editor.canvas.locator( 'body' ).click();
 		await siteEditorStyleVariations.browseStyles();
 		await page.click( 'role=button[name="yellow"i]' );
 		await page.click( 'role=button[name="Back"i]' );
@@ -150,18 +147,17 @@ test.describe( 'Global styles variations', () => {
 		admin,
 		page,
 		siteEditorStyleVariations,
-		editor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editor.canvas.locator( 'body' ).click();
 		await siteEditorStyleVariations.browseStyles();
 		await page.click( 'role=button[name="pink"i]' );
 		await page.click( 'role=button[name="Back"i]' );
 		await page.click( 'role=button[name="Colors styles"i]' );
-		await page.click( 'role=button[name="Color palettes"i]' );
+		await page.click( 'role=button[name="Edit palette"i]' );
 
 		await expect(
 			page.locator( 'role=option[name="Color: Foreground"i]' )
@@ -185,8 +181,8 @@ test.describe( 'Global styles variations', () => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editor.canvas.locator( 'body' ).click();
 		await siteEditorStyleVariations.browseStyles();
 		await page.click( 'role=button[name="yellow"i]' );
 
diff --git a/test/e2e/specs/site-editor/styles.spec.js b/test/e2e/specs/site-editor/styles.spec.js
new file mode 100644
index 0000000000000..8da9aa95c6756
--- /dev/null
+++ b/test/e2e/specs/site-editor/styles.spec.js
@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Styles', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentythree' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'should override reset styles and library styles', async ( {
+		admin,
+		editor,
+		requestUtils,
+		page,
+	} ) => {
+		const { id } = await requestUtils.createPage( {
+			title: 'Social Icons',
+			content: `<!-- wp:social-links -->
+<ul class="wp-block-social-links"></ul>
+<!-- /wp:social-links -->`,
+			status: 'publish',
+		} );
+		await admin.visitSiteEditor( {
+			postId: id,
+			postType: 'page',
+			canvas: 'edit',
+		} );
+
+		const block = editor.canvas.getByRole( 'document', {
+			name: 'Block: Social Icons',
+		} );
+
+		await expect( block ).toHaveCSS( 'padding-left', '0px' );
+
+		const topBar = page.getByRole( 'region', { name: 'Editor top bar' } );
+		// Navigate to Styles -> Blocks -> Heading -> Typography
+		await topBar.getByRole( 'button', { name: 'Styles' } ).click();
+		await page.getByRole( 'button', { name: 'Blocks styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Social Icons block styles' } )
+			.click();
+
+		// Find the second padding control and change the padding value
+		await page
+			.getByRole( 'button', { name: 'Set custom size' } )
+			.nth( 1 )
+			.click();
+		await page.getByRole( 'spinbutton', { name: 'padding' } ).fill( '35' );
+
+		// Check the padding value
+		await expect( block ).toHaveCSS( 'padding-left', '35px' );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/template-part.spec.js b/test/e2e/specs/site-editor/template-part.spec.js
index e74cd0bec4ed1..f1e317e171736 100644
--- a/test/e2e/specs/site-editor/template-part.spec.js
+++ b/test/e2e/specs/site-editor/template-part.spec.js
@@ -27,8 +27,8 @@ test.describe( 'Template Part', () => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
+			canvas: 'edit',
 		} );
-		await editor.canvas.locator( 'body' ).click();
 
 		// Insert a new template block and 'start blank'.
 		await editor.insertBlock( { name: 'core/template-part' } );
@@ -186,8 +186,8 @@ test.describe( 'Template Part', () => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
+			canvas: 'edit',
 		} );
-		await editor.canvas.locator( 'body' ).click();
 		await editor.insertBlock( {
 			name: 'core/paragraph',
 			attributes: {
@@ -229,8 +229,8 @@ test.describe( 'Template Part', () => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
+			canvas: 'edit',
 		} );
-		await editor.canvas.locator( 'body' ).click();
 		// Edit the header.
 		await editor.insertBlock( {
 			name: 'core/paragraph',
@@ -264,8 +264,8 @@ test.describe( 'Template Part', () => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
+			canvas: 'edit',
 		} );
-		await editor.canvas.locator( 'body' ).click();
 		await editor.insertBlock( {
 			name: 'core/paragraph',
 			attributes: {
@@ -371,8 +371,8 @@ test.describe( 'Template Part', () => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
+			canvas: 'edit',
 		} );
-		await editor.canvas.locator( 'body' ).click();
 
 		// Select the site title block.
 		const siteTitle = editor.canvas.getByRole( 'document', {
diff --git a/test/e2e/specs/site-editor/template-revert.spec.js b/test/e2e/specs/site-editor/template-revert.spec.js
index 2af2a90eae119..5c19ed5a39e00 100644
--- a/test/e2e/specs/site-editor/template-revert.spec.js
+++ b/test/e2e/specs/site-editor/template-revert.spec.js
@@ -56,7 +56,7 @@ test.describe( 'Template Revert', () => {
 			page.locator(
 				'role=region[name="Editor settings"i] >> role=button[name="Actions"i]'
 			)
-		).toBeHidden();
+		).toBeDisabled();
 	} );
 
 	test( 'should show the original content after revert', async ( {
@@ -179,6 +179,10 @@ test.describe( 'Template Revert', () => {
 		await editor.saveSiteEditorEntities( {
 			isOnlyCurrentEntityDirty: true,
 		} );
+		await page
+			.getByRole( 'button', { name: 'Dismiss this notice' } )
+			.getByText( /(updated|published)\./ )
+			.click();
 		const contentBefore =
 			await templateRevertUtils.getCurrentSiteEditorContent();
 
@@ -190,7 +194,6 @@ test.describe( 'Template Revert', () => {
 		await editor.saveSiteEditorEntities( {
 			isOnlyCurrentEntityDirty: true,
 		} );
-
 		await admin.visitSiteEditor();
 
 		const contentAfter =
diff --git a/test/e2e/specs/site-editor/undo.spec.js b/test/e2e/specs/site-editor/undo.spec.js
new file mode 100644
index 0000000000000..17c4e4ada6e61
--- /dev/null
+++ b/test/e2e/specs/site-editor/undo.spec.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'undo', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'does not empty header', async ( { admin, page, editor } ) => {
+		await admin.visitSiteEditor( { canvas: 'edit' } );
+
+		// Check if there's a valid child block with a type (not appender).
+		await expect(
+			editor.canvas.locator(
+				'[data-type="core/template-part"] [data-type]'
+			)
+		).not.toHaveCount( 0 );
+
+		// insert a block
+		await editor.insertBlock( { name: 'core/paragraph' } );
+
+		// undo
+		await page
+			.getByRole( 'button', {
+				name: 'Undo',
+			} )
+			.click();
+
+		// Check if there's a valid child block with a type (not appender).
+		await expect(
+			editor.canvas.locator(
+				'[data-type="core/template-part"] [data-type]'
+			)
+		).not.toHaveCount( 0 );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/writing-flow.spec.js b/test/e2e/specs/site-editor/writing-flow.spec.js
index 75f8766891156..ad661175b6bdf 100644
--- a/test/e2e/specs/site-editor/writing-flow.spec.js
+++ b/test/e2e/specs/site-editor/writing-flow.spec.js
@@ -23,8 +23,8 @@ test.describe( 'Site editor writing flow', () => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
+			canvas: 'edit',
 		} );
-		await editor.canvas.locator( 'body' ).click();
 		// Select the first site title block.
 		const siteTitleBlock = editor.canvas.locator(
 			'role=document[name="Block: Site Title"i]'
@@ -51,8 +51,8 @@ test.describe( 'Site editor writing flow', () => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
+			canvas: 'edit',
 		} );
-		await editor.canvas.locator( 'body' ).click();
 		// Make sure the sidebar is open.
 		await editor.openDocumentSettingsSidebar();
 
diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js
index 0a4319440f4ac..53b777a2545a3 100644
--- a/test/e2e/specs/site-editor/zoom-out.spec.js
+++ b/test/e2e/specs/site-editor/zoom-out.spec.js
@@ -3,34 +3,33 @@
  */
 const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
-test.describe( 'Zoom Out', () => {
+// The test is flaky and fails almost consistently.
+// See: https://github.com/WordPress/gutenberg/issues/61806.
+// eslint-disable-next-line playwright/no-skipped-test
+test.describe.skip( 'Zoom Out', () => {
 	test.beforeAll( async ( { requestUtils } ) => {
 		await requestUtils.activateTheme( 'emptytheme' );
 	} );
 
-	test.beforeEach( async ( { admin, page, editor } ) => {
+	test.beforeEach( async ( { admin, editor, page } ) => {
 		await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' );
 
 		const zoomedOutCheckbox = page.getByLabel(
-			'Test a new zoomed out view on'
+			'Enable zoomed out view when selecting a pattern category in the main inserter.'
 		);
 
 		await zoomedOutCheckbox.setChecked( true );
 		await expect( zoomedOutCheckbox ).toBeChecked();
 		await page.getByRole( 'button', { name: 'Save Changes' } ).click();
 
-		// Select a template part with a few blocks.
-		await admin.visitSiteEditor( {
-			postId: 'emptytheme//header',
-			postType: 'wp_template_part',
-		} );
+		await admin.visitSiteEditor();
 		await editor.canvas.locator( 'body' ).click();
 	} );
 
 	test.afterEach( async ( { admin, page } ) => {
 		await admin.visitAdminPage( 'admin.php', 'page=gutenberg-experiments' );
 		const zoomedOutCheckbox = page.getByLabel(
-			'Test a new zoomed out view on'
+			'Enable zoomed out view when selecting a pattern category in the main inserter.'
 		);
 		await zoomedOutCheckbox.setChecked( false );
 		await expect( zoomedOutCheckbox ).not.toBeChecked();
@@ -41,24 +40,28 @@ test.describe( 'Zoom Out', () => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 
-	test( 'Zoom-out button should not steal focus when a block is focused', async ( {
+	test( 'Clicking on inserter while on zoom-out should open the patterns tab on the inserter', async ( {
 		page,
-		editor,
 	} ) => {
-		const zoomOutButton = page.getByRole( 'button', {
-			name: 'Zoom-out View',
-			exact: true,
-		} );
+		// Trigger zoom out on Global Styles because there the inserter is not open.
+		await page.getByRole( 'button', { name: 'Styles' } ).click();
+		await page.getByRole( 'button', { name: 'Browse styles' } ).click();
 
-		// Select a block for this test to surface the potential focus-stealing behavior
-		await editor.canvas.getByLabel( 'Site title text' ).click();
+		// select the 1st pattern
+		await page
+			.frameLocator( 'iframe[name="editor-canvas"]' )
+			.locator( 'header' )
+			.click();
 
-		await zoomOutButton.click();
+		await expect( page.getByLabel( 'Add pattern' ) ).toHaveCount( 3 );
+		await page.getByLabel( 'Add pattern' ).first().click();
+		await expect( page.getByLabel( 'Add pattern' ) ).toHaveCount( 2 );
 
-		await expect( zoomOutButton ).toBeFocused();
-
-		await page.keyboard.press( 'Enter' );
-
-		await expect( zoomOutButton ).toBeFocused();
+		await expect(
+			page
+				.locator( '#tabs-2-allPatterns-view div' )
+				.filter( { hasText: 'All' } )
+				.nth( 1 )
+		).toBeVisible();
 	} );
 } );
diff --git a/test/emptytheme/img/1024x768_emptytheme_test_image.jpg b/test/emptytheme/img/1024x768_emptytheme_test_image.jpg
new file mode 100644
index 0000000000000..694e710f77c52
Binary files /dev/null and b/test/emptytheme/img/1024x768_emptytheme_test_image.jpg differ
diff --git a/test/emptytheme/styles/variation.json b/test/emptytheme/styles/variation.json
index 06f672f6fd25d..7210001d22e82 100644
--- a/test/emptytheme/styles/variation.json
+++ b/test/emptytheme/styles/variation.json
@@ -12,6 +12,11 @@
 		}
 	},
 	"styles": {
+		"background": {
+			"backgroundImage": {
+				"url": "file:./img/1024x768_emptytheme_test_image.jpg"
+			}
+		},
 		"blocks": {
 			"core/post-title": {
 				"typography": {
diff --git a/test/integration/__snapshots__/blocks-raw-handling.test.js.snap b/test/integration/__snapshots__/blocks-raw-handling.test.js.snap
index b810a20b4d7c5..589eef78f34e2 100644
--- a/test/integration/__snapshots__/blocks-raw-handling.test.js.snap
+++ b/test/integration/__snapshots__/blocks-raw-handling.test.js.snap
@@ -135,7 +135,7 @@ exports[`rawHandler should convert HTML post to blocks with minimal content chan
 <!-- /wp:html -->
 
 <!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>Item</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list -->
@@ -177,9 +177,9 @@ exports[`rawHandler should convert a caption shortcode with link 1`] = `
 
 exports[`rawHandler should convert a list with attributes 1`] = `
 "<!-- wp:list {"ordered":true,"type":"lower-roman","start":2,"reversed":true} -->
-<ol reversed start="2" style="list-style-type:lower-roman"><!-- wp:list-item -->
+<ol reversed start="2" style="list-style-type:lower-roman" class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list {"ordered":true,"type":"lower-roman","start":2,"reversed":true} -->
-<ol reversed start="2" style="list-style-type:lower-roman"><!-- wp:list-item -->
+<ol reversed start="2" style="list-style-type:lower-roman" class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list --></li>
diff --git a/test/integration/blocks-raw-handling.test.js b/test/integration/blocks-raw-handling.test.js
index 5fb7123f9b820..81d3b7053468b 100644
--- a/test/integration/blocks-raw-handling.test.js
+++ b/test/integration/blocks-raw-handling.test.js
@@ -177,7 +177,7 @@ describe( 'Blocks raw handling', () => {
 			.join( '' );
 
 		expect( filtered ).toMatchInlineSnapshot( `
-		"<ul><!-- wp:list-item -->
+		"<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>one</li>
 		<!-- /wp:list-item -->
 
@@ -202,7 +202,7 @@ describe( 'Blocks raw handling', () => {
 			.join( '' );
 
 		expect( filtered ).toMatchInlineSnapshot( `
-		"<ul><!-- wp:list-item -->
+		"<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>one</li>
 		<!-- /wp:list-item -->
 
@@ -318,7 +318,7 @@ describe( 'Blocks raw handling', () => {
 			.join( '' );
 
 		expect( filtered ).toMatchInlineSnapshot( `
-		"<ul><!-- wp:list-item -->
+		"<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v0.serialized.html b/test/integration/fixtures/blocks/core__list__deprecated-v0.serialized.html
index fa50fb5db17e7..ad0919beb9bde 100644
--- a/test/integration/fixtures/blocks/core__list__deprecated-v0.serialized.html
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v0.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:list {"fontFamily":"cambria-georgia"} -->
-<ul class="has-cambria-georgia-font-family"><!-- wp:list-item -->
+<ul class="wp-block-list has-cambria-georgia-font-family"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.serialized.html b/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.serialized.html
index 61e33d3dc0e15..39a3efa2eabed 100644
--- a/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.serialized.html
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.serialized.html
@@ -1,9 +1,9 @@
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li><strong>Item</strong><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li><strong>Item</strong><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -11,7 +11,7 @@
 
 <!-- wp:list-item -->
 <li><strong>Item</strong><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -19,7 +19,7 @@
 
 <!-- wp:list-item -->
 <li><strong>Item</strong><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__list__deprecated-v1.serialized.html
index c09708d51db0b..4d74394771fcb 100644
--- a/test/integration/fixtures/blocks/core__list__deprecated-v1.serialized.html
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v1.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Text &amp; Headings</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v2.serialized.html b/test/integration/fixtures/blocks/core__list__deprecated-v2.serialized.html
index 44c97ca29209c..6fdf3ad84feeb 100644
--- a/test/integration/fixtures/blocks/core__list__deprecated-v2.serialized.html
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v2.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:list {"ordered":true,"type":"upper-alpha"} -->
-<ol style="list-style-type:upper-alpha"><!-- wp:list-item -->
+<ol style="list-style-type:upper-alpha" class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list -->
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.html b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.html
new file mode 100644
index 0000000000000..aef6bf669f2c9
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.html
@@ -0,0 +1,3 @@
+<!-- wp:core/list -->
+<ul><li>Text & Headings</li><li>Images & Videos</li><li>Galleries</li><li>Embeds, like YouTube, Tweets, or other WordPress posts.</li><li>Layout blocks, like Buttons, Hero Images, Separators, etc.</li><li>And <em>Lists</em> like this one of course :)</li></ul>
+<!-- /wp:core/list -->
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.json b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.json
new file mode 100644
index 0000000000000..80cd87e4eb69e
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.json
@@ -0,0 +1,60 @@
+[
+	{
+		"name": "core/list",
+		"isValid": true,
+		"attributes": {
+			"ordered": false,
+			"values": ""
+		},
+		"innerBlocks": [
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "Text &amp; Headings"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "Images &amp; Videos"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "Galleries"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "Embeds, like YouTube, Tweets, or other WordPress posts."
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "Layout blocks, like Buttons, Hero Images, Separators, etc."
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "And <em>Lists</em> like this one of course :)"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.parsed.json b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.parsed.json
new file mode 100644
index 0000000000000..427f4c3a975cf
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.parsed.json
@@ -0,0 +1,11 @@
+[
+	{
+		"blockName": "core/list",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n<ul><li>Text & Headings</li><li>Images & Videos</li><li>Galleries</li><li>Embeds, like YouTube, Tweets, or other WordPress posts.</li><li>Layout blocks, like Buttons, Hero Images, Separators, etc.</li><li>And <em>Lists</em> like this one of course :)</li></ul>\n",
+		"innerContent": [
+			"\n<ul><li>Text & Headings</li><li>Images & Videos</li><li>Galleries</li><li>Embeds, like YouTube, Tweets, or other WordPress posts.</li><li>Layout blocks, like Buttons, Hero Images, Separators, etc.</li><li>And <em>Lists</em> like this one of course :)</li></ul>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.serialized.html b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.serialized.html
new file mode 100644
index 0000000000000..4d74394771fcb
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.serialized.html
@@ -0,0 +1,25 @@
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>Text &amp; Headings</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Images &amp; Videos</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Galleries</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Embeds, like YouTube, Tweets, or other WordPress posts.</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Layout blocks, like Buttons, Hero Images, Separators, etc.</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>And <em>Lists</em> like this one of course :)</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
diff --git a/test/integration/fixtures/blocks/core__list__ul.html b/test/integration/fixtures/blocks/core__list__ul.html
index c09708d51db0b..4d74394771fcb 100644
--- a/test/integration/fixtures/blocks/core__list__ul.html
+++ b/test/integration/fixtures/blocks/core__list__ul.html
@@ -1,5 +1,5 @@
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Text &amp; Headings</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/blocks/core__list__ul.parsed.json b/test/integration/fixtures/blocks/core__list__ul.parsed.json
index 2853bc5558ebe..4639b007c777b 100644
--- a/test/integration/fixtures/blocks/core__list__ul.parsed.json
+++ b/test/integration/fixtures/blocks/core__list__ul.parsed.json
@@ -52,9 +52,9 @@
 				]
 			}
 		],
-		"innerHTML": "\n<ul>\n\n\n\n\n\n\n\n\n\n</ul>\n",
+		"innerHTML": "\n<ul class=\"wp-block-list\">\n\n\n\n\n\n\n\n\n\n</ul>\n",
 		"innerContent": [
-			"\n<ul>",
+			"\n<ul class=\"wp-block-list\">",
 			null,
 			"\n\n",
 			null,
diff --git a/test/integration/fixtures/blocks/core__list__ul.serialized.html b/test/integration/fixtures/blocks/core__list__ul.serialized.html
index c09708d51db0b..4d74394771fcb 100644
--- a/test/integration/fixtures/blocks/core__list__ul.serialized.html
+++ b/test/integration/fixtures/blocks/core__list__ul.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Text &amp; Headings</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/blocks/core__more.json b/test/integration/fixtures/blocks/core__more.json
index 29ec11579a2d9..f9f34aecd1f20 100644
--- a/test/integration/fixtures/blocks/core__more.json
+++ b/test/integration/fixtures/blocks/core__more.json
@@ -3,6 +3,7 @@
 		"name": "core/more",
 		"isValid": true,
 		"attributes": {
+			"customText": "",
 			"noTeaser": false
 		},
 		"innerBlocks": []
diff --git a/test/integration/fixtures/blocks/core__social-link-bluesky.html b/test/integration/fixtures/blocks/core__social-link-bluesky.html
new file mode 100644
index 0000000000000..b210fb03361e7
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-bluesky.html
@@ -0,0 +1 @@
+<!-- wp:social-link-bluesky {"url":"https://example.com/"} /-->
diff --git a/test/integration/fixtures/blocks/core__social-link-bluesky.json b/test/integration/fixtures/blocks/core__social-link-bluesky.json
new file mode 100644
index 0000000000000..47276685491b8
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-bluesky.json
@@ -0,0 +1,11 @@
+[
+	{
+		"name": "core/social-link",
+		"isValid": true,
+		"attributes": {
+			"url": "https://example.com/",
+			"service": "bluesky"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__social-link-bluesky.parsed.json b/test/integration/fixtures/blocks/core__social-link-bluesky.parsed.json
new file mode 100644
index 0000000000000..5f51994005b45
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-bluesky.parsed.json
@@ -0,0 +1,11 @@
+[
+	{
+		"blockName": "core/social-link-bluesky",
+		"attrs": {
+			"url": "https://example.com/"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__social-link-bluesky.serialized.html b/test/integration/fixtures/blocks/core__social-link-bluesky.serialized.html
new file mode 100644
index 0000000000000..954f0eb1f101e
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-bluesky.serialized.html
@@ -0,0 +1 @@
+<!-- wp:social-link {"url":"https://example.com/","service":"bluesky"} /-->
diff --git a/test/integration/fixtures/documents/apple-out.html b/test/integration/fixtures/documents/apple-out.html
index afada0ee3136e..d6112309af9f0 100644
--- a/test/integration/fixtures/documents/apple-out.html
+++ b/test/integration/fixtures/documents/apple-out.html
@@ -11,13 +11,13 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Bulleted<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -29,7 +29,7 @@
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/documents/evernote-out.html b/test/integration/fixtures/documents/evernote-out.html
index a5ff509c7a173..2a7212f2e29b3 100644
--- a/test/integration/fixtures/documents/evernote-out.html
+++ b/test/integration/fixtures/documents/evernote-out.html
@@ -7,13 +7,13 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>An</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Unordered<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -25,13 +25,13 @@
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true,"start":1} -->
-<ol start="1"><!-- wp:list-item -->
+<ol start="1" class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Two<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list --></li>
diff --git a/test/integration/fixtures/documents/google-docs-list-only-out.html b/test/integration/fixtures/documents/google-docs-list-only-out.html
index 642dc168bb5bb..ec14d44d2b922 100644
--- a/test/integration/fixtures/documents/google-docs-list-only-out.html
+++ b/test/integration/fixtures/documents/google-docs-list-only-out.html
@@ -1,7 +1,7 @@
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>My first list item<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A sub list item</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/documents/google-docs-out.html b/test/integration/fixtures/documents/google-docs-out.html
index f2ec15cf4f92a..3ee7d25875abc 100644
--- a/test/integration/fixtures/documents/google-docs-out.html
+++ b/test/integration/fixtures/documents/google-docs-out.html
@@ -11,13 +11,13 @@ <h2 class="wp-block-heading">This is a <em>heading</em></h2>
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Bulleted<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -29,7 +29,7 @@ <h2 class="wp-block-heading">This is a <em>heading</em></h2>
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/documents/google-docs-with-comments-out.html b/test/integration/fixtures/documents/google-docs-with-comments-out.html
index f2ec15cf4f92a..3ee7d25875abc 100644
--- a/test/integration/fixtures/documents/google-docs-with-comments-out.html
+++ b/test/integration/fixtures/documents/google-docs-with-comments-out.html
@@ -11,13 +11,13 @@ <h2 class="wp-block-heading">This is a <em>heading</em></h2>
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Bulleted<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -29,7 +29,7 @@ <h2 class="wp-block-heading">This is a <em>heading</em></h2>
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/documents/markdown-out.html b/test/integration/fixtures/documents/markdown-out.html
index ed57e4e05e717..9ed72f6d3ef6d 100644
--- a/test/integration/fixtures/documents/markdown-out.html
+++ b/test/integration/fixtures/documents/markdown-out.html
@@ -15,13 +15,13 @@ <h2 class="wp-block-heading">Lists</h2>
 <!-- /wp:heading -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Bulleted<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -33,7 +33,7 @@ <h2 class="wp-block-heading">Lists</h2>
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/documents/ms-word-list-out.html b/test/integration/fixtures/documents/ms-word-list-out.html
index f57946f64bc98..2e55413b159a6 100644
--- a/test/integration/fixtures/documents/ms-word-list-out.html
+++ b/test/integration/fixtures/documents/ms-word-list-out.html
@@ -7,7 +7,7 @@ <h3 class="wp-block-heading"><a>This is a headline?</a></h3>
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/documents/ms-word-online-out.html b/test/integration/fixtures/documents/ms-word-online-out.html
index 2d8314bbf0fd6..13698a929d9b1 100644
--- a/test/integration/fixtures/documents/ms-word-online-out.html
+++ b/test/integration/fixtures/documents/ms-word-online-out.html
@@ -7,7 +7,7 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A </li>
 <!-- /wp:list-item -->
 
@@ -25,7 +25,7 @@
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true,"start":1} -->
-<ol start="1"><!-- wp:list-item -->
+<ol start="1" class="wp-block-list"><!-- wp:list-item -->
 <li>One </li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/documents/ms-word-out.html b/test/integration/fixtures/documents/ms-word-out.html
index 89eaa6f3bcd16..81b82b5f9502f 100644
--- a/test/integration/fixtures/documents/ms-word-out.html
+++ b/test/integration/fixtures/documents/ms-word-out.html
@@ -19,13 +19,13 @@ <h2 class="wp-block-heading">This is a heading level 2</h2>
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Bulleted<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -37,7 +37,7 @@ <h2 class="wp-block-heading">This is a heading level 2</h2>
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/full-content/full-content.test.js b/test/integration/full-content/full-content.test.js
index f825de0477144..4522dd7b88e45 100644
--- a/test/integration/full-content/full-content.test.js
+++ b/test/integration/full-content/full-content.test.js
@@ -82,7 +82,7 @@ describe( 'full post content fixture', () => {
 			formSubmissionNotification,
 		] );
 
-		if ( process.env.IS_GUTENBERG_PLUGIN ) {
+		if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 			__experimentalRegisterExperimentalCoreBlocks( {
 				enableFSEBlocks: true,
 			} );
diff --git a/test/native/integration-test-helpers/dismiss-modal.js b/test/native/integration-test-helpers/dismiss-modal.js
index 2a687401a586a..c782fd8be185b 100644
--- a/test/native/integration-test-helpers/dismiss-modal.js
+++ b/test/native/integration-test-helpers/dismiss-modal.js
@@ -6,7 +6,7 @@ import { fireEvent } from '@testing-library/react-native';
 /**
  * Dismisses a modal.
  *
- * @param {HTMLElement} modalInstance Modal test instance.
+ * @param {import('react-test-renderer').ReactTestInstance} modalInstance Modal test instance.
  */
 export const dismissModal = async ( modalInstance ) =>
 	fireEvent( modalInstance, 'backdropPress' );
diff --git a/test/native/integration-test-helpers/get-block-transform-options.js b/test/native/integration-test-helpers/get-block-transform-options.js
index f7b008199af41..02ca81a1d5ccc 100644
--- a/test/native/integration-test-helpers/get-block-transform-options.js
+++ b/test/native/integration-test-helpers/get-block-transform-options.js
@@ -14,7 +14,7 @@ import { openBlockActionsMenu } from './open-block-actions-menu';
  *
  * @param {import('@testing-library/react-native').RenderAPI} screen    A Testing Library screen.
  * @param {string}                                            blockName Name of the block.
- * @return {[HTMLElement]} Block transform options.
+ * @return {[import('react-test-renderer').ReactTestInstance]} Block transform options.
  */
 export const getBlockTransformOptions = async ( screen, blockName ) => {
 	const { getByTestId, getByText } = screen;
diff --git a/test/native/integration-test-helpers/get-block.js b/test/native/integration-test-helpers/get-block.js
index 0fc36593fe8e1..0770a736affbb 100644
--- a/test/native/integration-test-helpers/get-block.js
+++ b/test/native/integration-test-helpers/get-block.js
@@ -5,7 +5,7 @@
  * @param {string}                                            blockName          Name of the block.
  * @param {Object}                                            options            Configuration options for getting the block.
  * @param {number}                                            [options.rowIndex] Row index of the block.
- * @return {HTMLElement} Block instance.
+ * @return {import('react-test-renderer').ReactTestInstance} Block instance.
  */
 export const getBlock = ( screen, blockName, { rowIndex = 1 } = {} ) => {
 	return screen.getAllByLabelText(
diff --git a/test/native/integration-test-helpers/get-inner-block.js b/test/native/integration-test-helpers/get-inner-block.js
index 71a0d75da6bee..1bb1e6938c280 100644
--- a/test/native/integration-test-helpers/get-inner-block.js
+++ b/test/native/integration-test-helpers/get-inner-block.js
@@ -6,11 +6,11 @@ import { within } from '@testing-library/react-native';
 /**
  * Gets an inner block from another block.
  *
- * @param {HTMLElement} parentBlock        Parent block from where to get the block.
- * @param {string}      blockName          Name of the block.
- * @param {Object}      options            Configuration options for getting the block.
- * @param {number}      [options.rowIndex] Row index of the block.
- * @return {HTMLElement} Block instance.
+ * @param {import('react-test-renderer').ReactTestInstance} parentBlock        Parent block from where to get the block.
+ * @param {string}                                          blockName          Name of the block.
+ * @param {Object}                                          options            Configuration options for getting the block.
+ * @param {number}                                          [options.rowIndex] Row index of the block.
+ * @return {import('react-test-renderer').ReactTestInstance} Block instance.
  */
 export const getInnerBlock = (
 	parentBlock,
diff --git a/test/native/integration-test-helpers/rich-text-paste.js b/test/native/integration-test-helpers/rich-text-paste.js
index c84acaa9e9d60..6d447181e0b8d 100644
--- a/test/native/integration-test-helpers/rich-text-paste.js
+++ b/test/native/integration-test-helpers/rich-text-paste.js
@@ -6,19 +6,20 @@ import { fireEvent } from '@testing-library/react-native';
 /**
  * Paste content into a RichText component.
  *
- * @param {HTMLElement} richText       RichText test instance.
- * @param {Object}      content        Content to paste.
- * @param {string}      content.text   Text format of the content.
- * @param {string}      [content.html] HTML format of the content. If not provided, text format will be used.
+ * @param {import('react-test-renderer').ReactTestInstance} richText        RichText test instance.
+ * @param {Object}                                          content         Content to paste.
+ * @param {string}                                          content.text    Text format of the content.
+ * @param {string}                                          [content.html]  HTML format of the content. If not provided, text format will be used.
+ * @param {string}                                          [content.files] Files array to add to the editor.
  */
-export const pasteIntoRichText = ( richText, { text, html } ) => {
+export const pasteIntoRichText = ( richText, { text, html, files = [] } ) => {
 	fireEvent( richText, 'focus' );
 	fireEvent( richText, 'paste', {
 		preventDefault: jest.fn(),
 		nativeEvent: {
 			eventCount: 1,
 			target: undefined,
-			files: [],
+			files,
 			pastedHtml: html || text,
 			pastedText: text,
 		},
diff --git a/test/native/integration-test-helpers/rich-text-select-range.js b/test/native/integration-test-helpers/rich-text-select-range.js
index 7b2eeb2cae8c3..0e44a5af3a1d2 100644
--- a/test/native/integration-test-helpers/rich-text-select-range.js
+++ b/test/native/integration-test-helpers/rich-text-select-range.js
@@ -6,9 +6,9 @@ import { typeInRichText } from './rich-text-type';
 /**
  * Select a range within a RichText component.
  *
- * @param {HTMLElement} richText RichText test instance.
- * @param {number}      start    Selection start position.
- * @param {number}      end      Selection end position.
+ * @param {import('react-test-renderer').ReactTestInstance} richText RichText test instance.
+ * @param {number}                                          start    Selection start position.
+ * @param {number}                                          end      Selection end position.
  */
 export const selectRangeInRichText = ( richText, start, end = start ) => {
 	if ( typeof start !== 'number' ) {
diff --git a/test/native/integration-test-helpers/rich-text-type.js b/test/native/integration-test-helpers/rich-text-type.js
index e6a724d8387f0..3be020325c2ed 100644
--- a/test/native/integration-test-helpers/rich-text-type.js
+++ b/test/native/integration-test-helpers/rich-text-type.js
@@ -16,13 +16,13 @@ function insertTextAtPosition( text, newText, start, end ) {
 /**
  * Changes the text and selection of a RichText component.
  *
- * @param {HTMLElement} richText                        RichText test instance.
- * @param {string}      text                            Text to set.
- * @param {Object}      options                         Configuration options for selection.
- * @param {number}      [options.initialSelectionStart] Selection start position before the text is inserted.
- * @param {number}      [options.initialSelectionEnd]   Selection end position before the text is inserted.
- * @param {number}      [options.finalSelectionStart]   Selection start position after the text is inserted.
- * @param {number}      [options.finalSelectionEnd]     Selection end position after the text is inserted.
+ * @param {import('react-test-renderer').ReactTestInstance} richText                        RichText test instance.
+ * @param {string}                                          text                            Text to set.
+ * @param {Object}                                          options                         Configuration options for selection.
+ * @param {number}                                          [options.initialSelectionStart] Selection start position before the text is inserted.
+ * @param {number}                                          [options.initialSelectionEnd]   Selection end position before the text is inserted.
+ * @param {number}                                          [options.finalSelectionStart]   Selection start position after the text is inserted.
+ * @param {number}                                          [options.finalSelectionEnd]     Selection end position after the text is inserted.
  */
 export const typeInRichText = ( richText, text, options = {} ) => {
 	const currentValueSansOuterHtmlTags = stripOuterHtmlTags(
diff --git a/test/native/integration-test-helpers/text-input-change-text.js b/test/native/integration-test-helpers/text-input-change-text.js
index 2526b074d5f35..5e12a2602e9f3 100644
--- a/test/native/integration-test-helpers/text-input-change-text.js
+++ b/test/native/integration-test-helpers/text-input-change-text.js
@@ -6,8 +6,8 @@ import { fireEvent } from '@testing-library/react-native';
 /**
  * Changes the text of a TextInput component.
  *
- * @param {HTMLElement} textInput TextInput test instance.
- * @param {string}      text      Text to be set.
+ * @param {import('react-test-renderer').ReactTestInstance} textInput TextInput test instance.
+ * @param {string}                                          text      Text to be set.
  */
 export const changeTextOfTextInput = ( textInput, text ) => {
 	fireEvent( textInput, 'focus' );
diff --git a/test/native/integration-test-helpers/transform-block.js b/test/native/integration-test-helpers/transform-block.js
index 6afbae55ddf76..3feb6fbb32827 100644
--- a/test/native/integration-test-helpers/transform-block.js
+++ b/test/native/integration-test-helpers/transform-block.js
@@ -21,7 +21,7 @@ const apiFetchPromise = Promise.resolve( {} );
  * @param {Object}                                            [options]                Configuration options for the transformation.
  * @param {number}                                            [options.isMediaBlock]   True if the block transformation will result in a media block.
  * @param {number}                                            [options.hasInnerBlocks] True if the block transformation will result in a block that contains inner blocks.
- * @return {HTMLElement} Block instance after the block transformation result.
+ * @return {import('react-test-renderer').ReactTestInstance} Block instance after the block transformation result.
  */
 export const transformBlock = async (
 	screen,
diff --git a/test/native/integration-test-helpers/trigger-block-list-layout.js b/test/native/integration-test-helpers/trigger-block-list-layout.js
index b0a7caaf3fa17..5ccea7722cbf0 100644
--- a/test/native/integration-test-helpers/trigger-block-list-layout.js
+++ b/test/native/integration-test-helpers/trigger-block-list-layout.js
@@ -15,10 +15,10 @@ import { waitForStoreResolvers } from './wait-for-store-resolvers';
  * case any of the inner elements use selectors that are associated with store
  * resolvers.
  *
- * @param {HTMLElement} block                    Block test instance to trigger layout event.
- * @param {Object}      [options]                Configuration options for the event.
- * @param {number}      [options.width]          Width value to be passed to the event.
- * @param {number}      [options.blockListIndex] Block list index, for cases when there is more than one, like in inner blocks.
+ * @param {import('react-test-renderer').ReactTestInstance} block                    Block test instance to trigger layout event.
+ * @param {Object}                                          [options]                Configuration options for the event.
+ * @param {number}                                          [options.width]          Width value to be passed to the event.
+ * @param {number}                                          [options.blockListIndex] Block list index, for cases when there is more than one, like in inner blocks.
  */
 export const triggerBlockListLayout = async (
 	block,
diff --git a/test/native/integration-test-helpers/wait-for-modal-visible.js b/test/native/integration-test-helpers/wait-for-modal-visible.js
index c2a73a26e07f8..045b50a60cdbb 100644
--- a/test/native/integration-test-helpers/wait-for-modal-visible.js
+++ b/test/native/integration-test-helpers/wait-for-modal-visible.js
@@ -6,7 +6,7 @@ import { waitFor } from '@testing-library/react-native';
 /**
  * Waits for a modal to be visible.
  *
- * @param {HTMLElement} modalInstance Modal test instance.
+ * @param {import('react-test-renderer').ReactTestInstance} modalInstance Modal test instance.
  */
 export const waitForModalVisible = async ( modalInstance ) => {
 	return waitFor( () =>
diff --git a/test/native/integration/blocks-raw-handling.native.js b/test/native/integration/blocks-raw-handling.native.js
index 5f21ca035fbf9..6fae0e72be0ca 100644
--- a/test/native/integration/blocks-raw-handling.native.js
+++ b/test/native/integration/blocks-raw-handling.native.js
@@ -187,7 +187,7 @@ describe( 'Blocks raw handling', () => {
 			.join( '' );
 
 		expect( filtered ).toMatchInlineSnapshot( `
-		"<ul><!-- wp:list-item -->
+		"<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>one</li>
 		<!-- /wp:list-item -->
 
@@ -212,7 +212,7 @@ describe( 'Blocks raw handling', () => {
 			.join( '' );
 
 		expect( filtered ).toMatchInlineSnapshot( `
-		"<ul><!-- wp:list-item -->
+		"<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>one</li>
 		<!-- /wp:list-item -->
 
@@ -309,7 +309,7 @@ describe( 'Blocks raw handling', () => {
 
 	it( 'should treat single list item as inline text', () => {
 		const filtered = pasteHandler( {
-			HTML: '<ul><li>Some <strong>bold</strong> text.</li></ul>',
+			HTML: '<ul class="wp-block-list"><li>Some <strong>bold</strong> text.</li></ul>',
 			plainText: 'Some <strong>bold</strong> text.\n',
 			mode: 'AUTO',
 		} );
@@ -320,7 +320,7 @@ describe( 'Blocks raw handling', () => {
 
 	it( 'should treat multiple list items as a block', () => {
 		const filtered = pasteHandler( {
-			HTML: '<ul><li>One</li><li>Two</li><li>Three</li></ul>',
+			HTML: '<ul class="wp-block-list"><li>One</li><li>Two</li><li>Three</li></ul>',
 			plainText: 'One\nTwo\nThree\n',
 			mode: 'AUTO',
 		} )
@@ -328,7 +328,7 @@ describe( 'Blocks raw handling', () => {
 			.join( '' );
 
 		expect( filtered ).toMatchInlineSnapshot( `
-		"<ul><!-- wp:list-item -->
+		"<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item -->
 
diff --git a/test/native/matchers/to-be-visible.js b/test/native/matchers/to-be-visible.js
index 3a9d46474cfc0..b2b19d239a856 100644
--- a/test/native/matchers/to-be-visible.js
+++ b/test/native/matchers/to-be-visible.js
@@ -38,7 +38,7 @@ function isElementVisible( element ) {
  * - it is not a "Modal" component or it does not have the prop "visible" set to "false".
  * - its ancestor elements are also visible.
  *
- * @param {HTMLElement} element
+ * @param {import('react-test-renderer').ReactTestInstance} element
  * @return {boolean} True if the given element is visible.
  */
 export function toBeVisible( element ) {
diff --git a/test/native/setup.js b/test/native/setup.js
index 4fd511f38e91b..e93d2248bd03c 100644
--- a/test/native/setup.js
+++ b/test/native/setup.js
@@ -109,6 +109,7 @@ jest.mock( '@wordpress/react-native-bridge', () => {
 		subscribeOnUndoPressed: jest.fn(),
 		subscribeOnRedoPressed: jest.fn(),
 		subscribeConnectionStatus: jest.fn( () => ( { remove: jest.fn() } ) ),
+		subscribeToContentUpdate: jest.fn(),
 		requestConnectionStatus: jest.fn( ( callback ) => callback( true ) ),
 		editorDidMount: jest.fn(),
 		showAndroidSoftKeyboard: jest.fn(),
@@ -120,6 +121,7 @@ jest.mock( '@wordpress/react-native-bridge', () => {
 		provideToNative_Html: jest.fn(),
 		requestImageFailedRetryDialog: jest.fn(),
 		requestImageUploadCancelDialog: jest.fn(),
+		requestImageUploadCancel: jest.fn(),
 		requestMediaEditor: jest.fn(),
 		requestMediaPicker: jest.fn(),
 		requestMediaImport: jest.fn(),
diff --git a/test/performance/config/performance-reporter.ts b/test/performance/config/performance-reporter.ts
index c82c092f30478..049a21fb333b1 100644
--- a/test/performance/config/performance-reporter.ts
+++ b/test/performance/config/performance-reporter.ts
@@ -13,7 +13,7 @@ import type {
 /**
  * Internal dependencies
  */
-import { average, median, minimum, maximum, round } from '../utils';
+import { stats, round } from '../utils';
 
 export interface WPRawPerformanceResults {
 	timeToFirstByte: number[];
@@ -36,77 +36,104 @@ export interface WPRawPerformanceResults {
 	loadPatterns: number[];
 	listViewOpen: number[];
 	navigate: number[];
+	wpBeforeTemplate: number[];
+	wpTemplate: number[];
+	wpTotal: number[];
+	wpMemoryUsage: number[];
+	wpDbQueries: number[];
 }
 
+type PerformanceStats = {
+	q25: number;
+	q50: number;
+	q75: number;
+	cnt: number; // number of data points
+};
+
 export interface WPPerformanceResults {
-	timeToFirstByte?: number;
-	largestContentfulPaint?: number;
-	lcpMinusTtfb?: number;
-	serverResponse?: number;
-	firstPaint?: number;
-	domContentLoaded?: number;
-	loaded?: number;
-	firstContentfulPaint?: number;
-	firstBlock?: number;
-	type?: number;
-	typeWithoutInspector?: number;
-	typeWithTopToolbar?: number;
-	typeContainer?: number;
-	focus?: number;
-	inserterOpen?: number;
-	inserterSearch?: number;
-	inserterHover?: number;
-	loadPatterns?: number;
-	listViewOpen?: number;
-	navigate?: number;
+	timeToFirstByte?: PerformanceStats;
+	largestContentfulPaint?: PerformanceStats;
+	lcpMinusTtfb?: PerformanceStats;
+	serverResponse?: PerformanceStats;
+	firstPaint?: PerformanceStats;
+	domContentLoaded?: PerformanceStats;
+	loaded?: PerformanceStats;
+	firstContentfulPaint?: PerformanceStats;
+	firstBlock?: PerformanceStats;
+	type?: PerformanceStats;
+	typeWithoutInspector?: PerformanceStats;
+	typeWithTopToolbar?: PerformanceStats;
+	typeContainer?: PerformanceStats;
+	focus?: PerformanceStats;
+	inserterOpen?: PerformanceStats;
+	inserterSearch?: PerformanceStats;
+	inserterHover?: PerformanceStats;
+	loadPatterns?: PerformanceStats;
+	listViewOpen?: PerformanceStats;
+	navigate?: PerformanceStats;
+	wpBeforeTemplate?: PerformanceStats;
+	wpTemplate?: PerformanceStats;
+	wpTotal?: PerformanceStats;
+	wpMemoryUsage?: PerformanceStats;
+	wpDbQueries?: PerformanceStats;
 }
 
 /**
  * Curate the raw performance results.
  *
- * @param {WPRawPerformanceResults} results
- *
- * @return {WPPerformanceResults} Curated Performance results.
+ * @param results Raw results.
+ * @return Curated statistics for the results.
  */
 export function curateResults(
 	results: WPRawPerformanceResults
 ): WPPerformanceResults {
 	const output = {
-		timeToFirstByte: median( results.timeToFirstByte ),
-		largestContentfulPaint: median( results.largestContentfulPaint ),
-		lcpMinusTtfb: median( results.lcpMinusTtfb ),
-		serverResponse: median( results.serverResponse ),
-		firstPaint: median( results.firstPaint ),
-		domContentLoaded: median( results.domContentLoaded ),
-		loaded: median( results.loaded ),
-		firstContentfulPaint: median( results.firstContentfulPaint ),
-		firstBlock: median( results.firstBlock ),
-		type: average( results.type ),
-		typeWithoutInspector: average( results.typeWithoutInspector ),
-		typeWithTopToolbar: average( results.typeWithTopToolbar ),
-		typeContainer: average( results.typeContainer ),
-		focus: average( results.focus ),
-		inserterOpen: average( results.inserterOpen ),
-		inserterSearch: average( results.inserterSearch ),
-		inserterHover: average( results.inserterHover ),
-		loadPatterns: average( results.loadPatterns ),
-		listViewOpen: average( results.listViewOpen ),
-		navigate: median( results.navigate ),
+		timeToFirstByte: stats( results.timeToFirstByte ),
+		largestContentfulPaint: stats( results.largestContentfulPaint ),
+		lcpMinusTtfb: stats( results.lcpMinusTtfb ),
+		serverResponse: stats( results.serverResponse ),
+		firstPaint: stats( results.firstPaint ),
+		domContentLoaded: stats( results.domContentLoaded ),
+		loaded: stats( results.loaded ),
+		firstContentfulPaint: stats( results.firstContentfulPaint ),
+		firstBlock: stats( results.firstBlock ),
+		type: stats( results.type ),
+		typeWithoutInspector: stats( results.typeWithoutInspector ),
+		typeWithTopToolbar: stats( results.typeWithTopToolbar ),
+		typeContainer: stats( results.typeContainer ),
+		focus: stats( results.focus ),
+		inserterOpen: stats( results.inserterOpen ),
+		inserterSearch: stats( results.inserterSearch ),
+		inserterHover: stats( results.inserterHover ),
+		loadPatterns: stats( results.loadPatterns ),
+		listViewOpen: stats( results.listViewOpen ),
+		navigate: stats( results.navigate ),
+		wpBeforeTemplate: stats( results.wpBeforeTemplate ),
+		wpTemplate: stats( results.wpTemplate ),
+		wpTotal: stats( results.wpTotal ),
+		wpMemoryUsage: stats( results.wpMemoryUsage ),
+		wpDbQueries: stats( results.wpDbQueries ),
 	};
 
-	return (
+	return Object.fromEntries(
 		Object.entries( output )
 			// Reduce the output to contain taken metrics only.
-			.filter( ( [ _, value ] ) => typeof value === 'number' )
-			.reduce(
-				( acc, [ key, value ] ) => ( {
-					...acc,
-					[ key ]: round( value ),
-				} ),
-				{}
-			)
+			.filter( ( [ _, value ] ) => value !== undefined )
 	);
 }
+
+function formatValue( metric: string, value: number ) {
+	if ( 'wpMemoryUsage' === metric ) {
+		return `${ ( value / Math.pow( 10, 6 ) ).toFixed( 2 ) } MB`;
+	}
+
+	if ( 'wpDbQueries' === metric ) {
+		return value.toString();
+	}
+
+	return `${ value } ms`;
+}
+
 class PerformanceReporter implements Reporter {
 	private results: Record< string, WPPerformanceResults >;
 
@@ -166,8 +193,17 @@ class PerformanceReporter implements Reporter {
 		for ( const [ testSuite, results ] of Object.entries( this.results ) ) {
 			const printableResults: Record< string, { value: string } > = {};
 
-			for ( const [ key, value ] of Object.entries( results ) ) {
-				printableResults[ key ] = { value: `${ value } ms` };
+			for ( const [ metric, value ] of Object.entries( results ) ) {
+				const valueStr = formatValue( metric, value.q50 );
+				const pp = round(
+					( 100 * ( value.q75 - value.q50 ) ) / value.q50
+				);
+				const mp = round(
+					( 100 * ( value.q50 - value.q25 ) ) / value.q50
+				);
+				printableResults[ metric ] = {
+					value: `${ valueStr } +${ pp }% -${ mp }%`,
+				};
 			}
 
 			// eslint-disable-next-line no-console
diff --git a/test/performance/specs/front-end-block-theme.spec.js b/test/performance/specs/front-end-block-theme.spec.js
index ca48535a21a46..8a0f7b6cf391a 100644
--- a/test/performance/specs/front-end-block-theme.spec.js
+++ b/test/performance/specs/front-end-block-theme.spec.js
@@ -52,6 +52,13 @@ test.describe( 'Front End Performance', () => {
 				results.largestContentfulPaint.push( lcp );
 				results.timeToFirstByte.push( ttfb );
 				results.lcpMinusTtfb.push( lcp - ttfb );
+
+				const serverTiming = await metrics.getServerTiming();
+
+				for ( const [ key, value ] of Object.entries( serverTiming ) ) {
+					results[ key ] ??= [];
+					results[ key ].push( value );
+				}
 			}
 		} );
 	}
diff --git a/test/performance/specs/front-end-classic-theme.spec.js b/test/performance/specs/front-end-classic-theme.spec.js
index 0b6c3ec22c046..64929086079fe 100644
--- a/test/performance/specs/front-end-classic-theme.spec.js
+++ b/test/performance/specs/front-end-classic-theme.spec.js
@@ -51,6 +51,13 @@ test.describe( 'Front End Performance', () => {
 				results.largestContentfulPaint.push( lcp );
 				results.timeToFirstByte.push( ttfb );
 				results.lcpMinusTtfb.push( lcp - ttfb );
+
+				const serverTiming = await metrics.getServerTiming();
+
+				for ( const [ key, value ] of Object.entries( serverTiming ) ) {
+					results[ key ] ??= [];
+					results[ key ].push( value );
+				}
 			}
 		} );
 	}
diff --git a/test/performance/specs/post-editor.spec.js b/test/performance/specs/post-editor.spec.js
index 30baa8b799390..37e38d0d9ec47 100644
--- a/test/performance/specs/post-editor.spec.js
+++ b/test/performance/specs/post-editor.spec.js
@@ -89,6 +89,15 @@ test.describe( 'Post Editor Performance', () => {
 							}
 						}
 					);
+
+					const serverTiming = await metrics.getServerTiming();
+
+					for ( const [ key, value ] of Object.entries(
+						serverTiming
+					) ) {
+						results[ key ] ??= [];
+						results[ key ].push( value );
+					}
 				}
 			} );
 		}
@@ -659,7 +668,7 @@ test.describe( 'Post Editor Performance', () => {
 
 				const startTime = performance.now();
 
-				await page.getByText( 'Test' ).click();
+				await page.getByRole( 'tab', { name: 'Test' } ).click();
 
 				await Promise.all(
 					testPatterns.map( async ( pattern ) => {
diff --git a/test/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js
index c4c83f0d4c140..4b31b24460dc3 100644
--- a/test/performance/specs/site-editor.spec.js
+++ b/test/performance/specs/site-editor.spec.js
@@ -81,6 +81,7 @@ test.describe( 'Site Editor Performance', () => {
 				await admin.visitSiteEditor( {
 					postId: draftId,
 					postType: 'page',
+					canvas: 'edit',
 				} );
 
 				// Wait for the first block.
@@ -101,6 +102,15 @@ test.describe( 'Site Editor Performance', () => {
 							}
 						}
 					);
+
+					const serverTiming = await metrics.getServerTiming();
+
+					for ( const [ key, value ] of Object.entries(
+						serverTiming
+					) ) {
+						results[ key ] ??= [];
+						results[ key ].push( value );
+					}
 				}
 			} );
 		}
@@ -122,11 +132,11 @@ test.describe( 'Site Editor Performance', () => {
 			await admin.visitSiteEditor( {
 				postId: draftId,
 				postType: 'page',
+				canvas: 'edit',
 			} );
 
 			// Enter edit mode (second click is needed for the legacy edit mode).
 			const canvas = await perfUtils.getCanvas();
-			await canvas.locator( 'body' ).click();
 
 			// Run the test with the sidebar closed
 			const toggleSidebarButton = page
@@ -202,6 +212,7 @@ test.describe( 'Site Editor Performance', () => {
 				metrics,
 			} ) => {
 				await admin.visitSiteEditor( {
+					// The old URL is supported in both previous versions and new versions.
 					path: '/wp_template',
 				} );
 
@@ -322,7 +333,7 @@ test.describe( 'Site Editor Performance', () => {
 						.click();
 				} else {
 					await page
-						.getByRole( 'button', { name: 'Transform into:' } )
+						.getByRole( 'button', { name: 'Design' } )
 						.click();
 				}
 
diff --git a/test/performance/utils.js b/test/performance/utils.js
index 72a851a4ffabc..b30df24b130f6 100644
--- a/test/performance/utils.js
+++ b/test/performance/utils.js
@@ -19,6 +19,17 @@ export function average( array ) {
 	return sum( array ) / array.length;
 }
 
+export function variance( array ) {
+	if ( ! array || ! array.length ) {
+		return undefined;
+	}
+
+	return Math.sqrt(
+		sum( array.map( ( x ) => x ** 2 ) ) / array.length -
+			( sum( array ) / array.length ) ** 2
+	);
+}
+
 export function median( array ) {
 	if ( ! array || ! array.length ) {
 		return undefined;
@@ -33,6 +44,55 @@ export function median( array ) {
 	return numbers[ middleIndex ];
 }
 
+export function quartiles( array ) {
+	const numbers = array.slice().sort( ( a, b ) => a - b );
+
+	function med( offset, length ) {
+		if ( length % 2 === 0 ) {
+			// even length, average of two middle numbers
+			return (
+				( numbers[ offset + length / 2 - 1 ] +
+					numbers[ offset + length / 2 ] ) /
+				2
+			);
+		}
+
+		// odd length, exact middle point
+		return numbers[ offset + ( length - 1 ) / 2 ];
+	}
+
+	const q50 = med( 0, numbers.length );
+
+	let q25, q75;
+	if ( numbers.length % 2 === 0 ) {
+		// medians of two exact halves
+		const mid = numbers.length / 2;
+		q25 = med( 0, mid );
+		q75 = med( mid, mid );
+	} else {
+		// quartiles are average of medians of the smaller and bigger slice
+		const midl = ( numbers.length - 1 ) / 2;
+		const midh = ( numbers.length + 1 ) / 2;
+		q25 = ( med( 0, midl ) + med( 0, midh ) ) / 2;
+		q75 = ( med( midl, midh ) + med( midh, midl ) ) / 2;
+	}
+	return { q25, q50, q75 };
+}
+
+export function stats( values ) {
+	if ( ! values || values.length === 0 ) {
+		return undefined;
+	}
+	const { q25, q50, q75 } = quartiles( values );
+	const cnt = values.length;
+	return {
+		q25: round( q25 ),
+		q50: round( q50 ),
+		q75: round( q75 ),
+		cnt,
+	};
+}
+
 export function minimum( array ) {
 	if ( ! array || ! array.length ) {
 		return undefined;
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/Commenting/FunctionCommentSinceTagSniff.php b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/Commenting/FunctionCommentSinceTagSniff.php
deleted file mode 100644
index 54b8b367560fc..0000000000000
--- a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/Commenting/FunctionCommentSinceTagSniff.php
+++ /dev/null
@@ -1,162 +0,0 @@
-<?php
-/**
- * Gutenberg Coding Standards.
- *
- * @package gutenberg/gutenberg-coding-standards
- * @link    https://github.com/WordPress/gutenberg
- * @license https://opensource.org/licenses/MIT MIT
- */
-
-namespace GutenbergCS\Gutenberg\Sniffs\Commenting;
-
-use PHP_CodeSniffer\Files\File;
-use PHP_CodeSniffer\Sniffs\Sniff;
-use PHP_CodeSniffer\Util\Tokens;
-
-/**
- * This sniff ensures that PHP functions have a valid `@since` tag in the docblock.
- * The sniff skips checking files in __experimental block-library blocks.
- */
-class FunctionCommentSinceTagSniff implements Sniff {
-
-	/**
-	 * This property is used to store results returned
-	 * by the static::is_experimental_block() method.
-	 *
-	 * @var array
-	 */
-	private static $cache = array();
-
-	/**
-	 * Returns an array of tokens this test wants to listen for.
-	 *
-	 * @return array<int|string>
-	 */
-	public function register() {
-		return array( T_FUNCTION );
-	}
-
-	/**
-	 * Processes the tokens that this sniff is interested in.
-	 *
-	 * @param File $phpcsFile The file being scanned.
-	 * @param int  $stackPtr  The position of the current token in the stack passed in $tokens.
-	 */
-	public function process( File $phpcsFile, $stackPtr ) {
-		if ( static::is_experimental_block( $phpcsFile ) ) {
-			// The "@since" tag is not required for experimental blocks since they are not yet included in WordPress Core.
-			return;
-		}
-
-		$tokens        = $phpcsFile->getTokens();
-		$function_name = $phpcsFile->getDeclarationName( $stackPtr );
-
-		$wrapping_tokens_to_check = array(
-			T_CLASS,
-			T_INTERFACE,
-			T_TRAIT,
-		);
-
-		foreach ( $wrapping_tokens_to_check as $wrapping_token_to_check ) {
-			if ( false !== $phpcsFile->getCondition( $stackPtr, $wrapping_token_to_check, false ) ) {
-				// This sniff only processes functions, not class methods.
-				return;
-			}
-		}
-
-		$missing_since_tag_error_message = sprintf( '@since tag is missing for the "%s()" function.', $function_name );
-
-		// All these tokens could be present before the docblock.
-		$tokens_before_the_docblock = array(
-			T_PUBLIC,
-			T_PROTECTED,
-			T_PRIVATE,
-			T_STATIC,
-			T_FINAL,
-			T_ABSTRACT,
-			T_WHITESPACE,
-		);
-
-		$doc_block_end_token = $phpcsFile->findPrevious( $tokens_before_the_docblock, ( $stackPtr - 1 ), null, true, null, true );
-		if ( ( false === $doc_block_end_token ) || ( T_DOC_COMMENT_CLOSE_TAG !== $tokens[ $doc_block_end_token ]['code'] ) ) {
-			$phpcsFile->addError( $missing_since_tag_error_message, $stackPtr, 'MissingSinceTag' );
-			return;
-		}
-
-		// The sniff intentionally doesn't check if the docblock has a valid open tag.
-		// Its only job is to make sure that the @since tag is present and has a valid version value.
-		$doc_block_start_token = $phpcsFile->findPrevious( Tokens::$commentTokens, ( $doc_block_end_token - 1 ), null, true, null, true );
-		if ( false === $doc_block_start_token ) {
-			$phpcsFile->addError( $missing_since_tag_error_message, $stackPtr, 'MissingSinceTag' );
-			return;
-		}
-
-		// This is the first non-docblock token, so the next token should be used.
-		++$doc_block_start_token;
-
-		$since_tag_token = $phpcsFile->findNext( T_DOC_COMMENT_TAG, $doc_block_start_token, $doc_block_end_token, false, '@since', true );
-		if ( false === $since_tag_token ) {
-			$phpcsFile->addError( $missing_since_tag_error_message, $stackPtr, 'MissingSinceTag' );
-			return;
-		}
-
-		$version_token = $phpcsFile->findNext( T_DOC_COMMENT_WHITESPACE, $since_tag_token + 1, null, true, null, true );
-		if ( ( false === $version_token ) || ( T_DOC_COMMENT_STRING !== $tokens[ $version_token ]['code'] ) ) {
-			$phpcsFile->addError( $missing_since_tag_error_message, $since_tag_token, 'MissingSinceTag' );
-			return;
-		}
-
-		$version_value = $tokens[ $version_token ]['content'];
-
-		if ( version_compare( $version_value, '0.0.1', '>=' ) ) {
-			// Validate the version value.
-			return;
-		}
-
-		$phpcsFile->addError(
-			'Invalid @since version value for the "%s()" function: "%s". Version value must be greater than or equal to 0.0.1.',
-			$version_token,
-			'InvalidSinceTagVersionValue',
-			array(
-				$function_name,
-				$version_value,
-			)
-		);
-	}
-
-	/**
-	 * Checks if the current block is experimental.
-	 *
-	 * @param File $phpcsFile The file being scanned.
-	 * @return bool Returns true if the current block is experimental.
-	 */
-	private static function is_experimental_block( File $phpcsFile ) {
-		$block_json_filepath = dirname( $phpcsFile->getFilename() ) . DIRECTORY_SEPARATOR . 'block.json';
-
-		if ( isset( static::$cache[ $block_json_filepath ] ) ) {
-			return static::$cache[ $block_json_filepath ];
-		}
-
-		if ( ! is_file( $block_json_filepath ) || ! is_readable( $block_json_filepath ) ) {
-			static::$cache[ $block_json_filepath ] = false;
-			return static::$cache[ $block_json_filepath ];
-		}
-
-		// phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents -- this Composer package doesn't depend on WordPress.
-		$block_metadata = file_get_contents( $block_json_filepath );
-		if ( false === $block_metadata ) {
-			static::$cache[ $block_json_filepath ] = false;
-			return static::$cache[ $block_json_filepath ];
-		}
-
-		$block_metadata = json_decode( $block_metadata, true );
-		if ( ! is_array( $block_metadata ) ) {
-			static::$cache[ $block_json_filepath ] = false;
-			return static::$cache[ $block_json_filepath ];
-		}
-
-		$experimental_flag                     = '__experimental';
-		static::$cache[ $block_json_filepath ] = array_key_exists( $experimental_flag, $block_metadata ) && ( false !== $block_metadata[ $experimental_flag ] );
-		return static::$cache[ $block_json_filepath ];
-	}
-}
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/Commenting/SinceTagSniff.php b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/Commenting/SinceTagSniff.php
new file mode 100644
index 0000000000000..f216f4f681f0e
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/Commenting/SinceTagSniff.php
@@ -0,0 +1,617 @@
+<?php
+/**
+ * Gutenberg Coding Standards.
+ *
+ * @package gutenberg/gutenberg-coding-standards
+ * @link    https://github.com/WordPress/gutenberg
+ * @license https://opensource.org/licenses/MIT MIT
+ */
+
+namespace GutenbergCS\Gutenberg\Sniffs\Commenting;
+
+use PHP_CodeSniffer\Files\File;
+use PHP_CodeSniffer\Sniffs\Sniff;
+use PHP_CodeSniffer\Util\Tokens;
+use PHPCSUtils\Tokens\Collections;
+use PHPCSUtils\Utils\FunctionDeclarations;
+use PHPCSUtils\Utils\GetTokensAsString;
+use PHPCSUtils\Utils\ObjectDeclarations;
+use PHPCSUtils\Utils\Scopes;
+use PHPCSUtils\Utils\Variables;
+
+/**
+ * This sniff verifies the presence of valid `@since` tags in the docblocks of various PHP structures
+ * and WordPress hooks. Supported structures include classes, interfaces, traits, enums, functions, methods and properties.
+ * Files located within the __experimental block of the block-library are excluded from checks.
+ */
+class SinceTagSniff implements Sniff {
+
+	/**
+	 * Disable the check for functions with a lower visibility than the value given.
+	 *
+	 * Allowed values are public, protected, and private.
+	 *
+	 * @var string
+	 */
+	public $minimumVisibility = 'private';
+
+	/**
+	 * A map of tokens representing an object-oriented programming structure to their human-readable names.
+	 * This map helps in identifying different OO structures such as classes, interfaces, traits, and enums.
+	 *
+	 * @var array
+	 */
+	protected static $oo_tokens = array(
+		T_CLASS     => array(
+			'name' => 'class',
+		),
+		T_INTERFACE => array(
+			'name' => 'interface',
+		),
+		T_TRAIT     => array(
+			'name' => 'trait',
+		),
+		T_ENUM      => array(
+			'name' => 'enum',
+		),
+	);
+
+	/**
+	 * This property is used to store results returned
+	 * by the static::is_experimental_block() method.
+	 *
+	 * @var array
+	 */
+	protected static $cache = array();
+
+	/**
+	 * Returns an array of tokens this test wants to listen for.
+	 *
+	 * @return array<int|string>
+	 */
+	public function register() {
+		return array_merge(
+			array(
+				T_FUNCTION,
+				T_VARIABLE,
+				T_STRING,
+			),
+			array_keys( static::$oo_tokens )
+		);
+	}
+
+	/**
+	 * Processes the tokens that this sniff is interested in.
+	 *
+	 * @param File $phpcsFile The file being scanned.
+	 * @param int  $stackPtr  The position of the current token in the stack passed in $tokens.
+	 */
+	public function process( File $phpcsFile, $stackPtr ) {
+		if ( static::is_experimental_block( $phpcsFile ) ) {
+			// The "@since" tag is not required for experimental blocks since they are not yet included in WordPress Core.
+			return;
+		}
+
+		$tokens = $phpcsFile->getTokens();
+		$token  = $tokens[ $stackPtr ];
+
+		if ( 'T_FUNCTION' === $token['type'] ) {
+			$this->process_function_token( $phpcsFile, $stackPtr );
+			return;
+		}
+
+		if ( isset( static::$oo_tokens[ $token['code'] ] ) ) {
+			$this->process_oo_token( $phpcsFile, $stackPtr );
+			return;
+		}
+
+		if ( 'T_STRING' === $token['type'] && static::is_function_call( $phpcsFile, $stackPtr ) ) {
+			$this->process_hook( $phpcsFile, $stackPtr );
+			return;
+		}
+
+		if ( 'T_VARIABLE' === $token['type'] && Scopes::isOOProperty( $phpcsFile, $stackPtr ) ) {
+			$this->process_property_token( $phpcsFile, $stackPtr );
+		}
+	}
+
+	/**
+	 * Processes a token representing a function call that invokes a WordPress hook,
+	 * checking for a missing `@since` tag in its docblock.
+	 *
+	 * @param File $phpcs_file    The file being scanned.
+	 * @param int  $stack_pointer The position of the hook token in the stack.
+	 */
+	protected function process_hook( File $phpcs_file, $stack_pointer ) {
+		$tokens = $phpcs_file->getTokens();
+
+		// The content of the current token.
+		$hook_function = $tokens[ $stack_pointer ]['content'];
+
+		$hook_invocation_functions = array(
+			'do_action',
+			'do_action_ref_array',
+			'do_action_deprecated',
+			'apply_filters',
+			'apply_filters_ref_array',
+			'apply_filters_deprecated',
+		);
+
+		// Check if the current token content is one of the filter functions.
+		if ( ! in_array( $hook_function, $hook_invocation_functions, true ) ) {
+			// Not a hook.
+			return;
+		}
+
+		$error_message_data = array( $hook_function );
+
+		$violation_codes = static::get_violation_codes( 'Hook' );
+
+		$docblock = static::find_hook_docblock( $phpcs_file, $stack_pointer );
+
+		$version_tags = static::parse_since_tags( $phpcs_file, $docblock );
+		if ( empty( $version_tags ) ) {
+			if ( false !== $docblock ) {
+				$docblock_content = GetTokensAsString::compact( $phpcs_file, $docblock['start_token'], $docblock['end_token'], false );
+				if ( false !== stripos( $docblock_content, 'This filter is documented in ' ) ) {
+					$hook_documented_elsewhere = true;
+				}
+			}
+
+			if ( empty( $hook_documented_elsewhere ) ) {
+				$phpcs_file->addError(
+					'Missing @since tag for the "%s()" hook function.',
+					$stack_pointer,
+					$violation_codes['missing_since_tag'],
+					$error_message_data
+				);
+			}
+
+			return;
+		}
+
+		foreach ( $version_tags as $since_tag_token => $version_value_token ) {
+			if ( null === $version_value_token ) {
+				$phpcs_file->addError(
+					'Missing @since tag version value for the "%s()" hook function.',
+					$since_tag_token,
+					$violation_codes['missing_version_value'],
+					$error_message_data
+				);
+				continue;
+			}
+
+			$version_value = $tokens[ $version_value_token ]['content'];
+
+			if ( static::validate_version( $version_value ) ) {
+				continue;
+			}
+
+			$phpcs_file->addError(
+				'Invalid @since version value for the "%s()" hook function: "%s". Version value must be greater than or equal to 0.0.1.',
+				$version_value_token,
+				$violation_codes['invalid_version_value'],
+				array_merge( $error_message_data, array( $version_value ) )
+			);
+		}
+	}
+
+	/**
+	 * Processes a token representing an object-oriented programming structure
+	 * like a class, interface, trait, or enum to check for a missing `@since` tag in its docblock.
+	 *
+	 * @param File $phpcs_file    The file being scanned.
+	 * @param int  $stack_pointer The position of the OO token in the stack.
+	 */
+	protected function process_oo_token( File $phpcs_file, $stack_pointer ) {
+		$tokens     = $phpcs_file->getTokens();
+		$token_type = static::$oo_tokens[ $tokens[ $stack_pointer ]['code'] ]['name'];
+
+		$token_name         = ObjectDeclarations::getName( $phpcs_file, $stack_pointer );
+		$error_message_data = array(
+			$token_name,
+			$token_type,
+		);
+
+		$violation_codes = static::get_violation_codes( ucfirst( $token_type ) );
+
+		$docblock = static::find_docblock( $phpcs_file, $stack_pointer );
+
+		$version_tags = static::parse_since_tags( $phpcs_file, $docblock );
+		if ( empty( $version_tags ) ) {
+			$phpcs_file->addError(
+				'Missing @since tag for the "%s" %s.',
+				$stack_pointer,
+				$violation_codes['missing_since_tag'],
+				$error_message_data
+			);
+			return;
+		}
+
+		foreach ( $version_tags as $since_tag_token => $version_value_token ) {
+			if ( null === $version_value_token ) {
+				$phpcs_file->addError(
+					'Missing @since tag version value for the "%s" %s.',
+					$since_tag_token,
+					$violation_codes['missing_version_value'],
+					$error_message_data
+				);
+				continue;
+			}
+
+			$version_value = $tokens[ $version_value_token ]['content'];
+
+			if ( static::validate_version( $version_value ) ) {
+				continue;
+			}
+
+			$phpcs_file->addError(
+				'Invalid @since version value for the "%s" %s: "%s". Version value must be greater than or equal to 0.0.1.',
+				$version_value_token,
+				$violation_codes['invalid_version_value'],
+				array_merge( $error_message_data, array( $version_value ) )
+			);
+		}
+	}
+
+	/**
+	 * Processes a token representing an object-oriented property to check for a missing @since tag in its docblock.
+	 *
+	 * @param File $phpcs_file    The file being scanned.
+	 * @param int  $stack_pointer The position of the object-oriented property token in the stack.
+	 */
+	protected function process_property_token( File $phpcs_file, $stack_pointer ) {
+		$tokens = $phpcs_file->getTokens();
+
+		$property_name = $tokens[ $stack_pointer ]['content'];
+		$oo_token      = Scopes::validDirectScope( $phpcs_file, $stack_pointer, Collections::ooPropertyScopes() );
+		$class_name    = ObjectDeclarations::getName( $phpcs_file, $oo_token );
+
+		$visibility = Variables::getMemberProperties( $phpcs_file, $stack_pointer )['scope'];
+		if ( $this->check_below_minimum_visibility( $visibility ) ) {
+			return;
+		}
+
+		$violation_codes = static::get_violation_codes( 'Property' );
+
+		$error_message_data = array(
+			$class_name,
+			$property_name,
+		);
+
+		$docblock = static::find_docblock( $phpcs_file, $stack_pointer );
+
+		$version_tags = static::parse_since_tags( $phpcs_file, $docblock );
+		if ( empty( $version_tags ) ) {
+			$phpcs_file->addError(
+				'Missing @since tag for the "%s::%s" property.',
+				$stack_pointer,
+				$violation_codes['missing_since_tag'],
+				$error_message_data
+			);
+			return;
+		}
+
+		foreach ( $version_tags as $since_tag_token => $version_value_token ) {
+			if ( null === $version_value_token ) {
+				$phpcs_file->addError(
+					'Missing @since tag version value for the "%s::%s" property.',
+					$since_tag_token,
+					$violation_codes['missing_version_value'],
+					$error_message_data
+				);
+				continue;
+			}
+
+			$version_value = $tokens[ $version_value_token ]['content'];
+
+			if ( static::validate_version( $version_value ) ) {
+				continue;
+			}
+
+			$phpcs_file->addError(
+				'Invalid @since version value for the "%s::%s" property: "%s". Version value must be greater than or equal to 0.0.1.',
+				$version_value_token,
+				$violation_codes['invalid_version_value'],
+				array_merge( $error_message_data, array( $version_value ) )
+			);
+		}
+	}
+
+	/**
+	 * Processes a T_FUNCTION token to check for a missing @since tag in its docblock.
+	 *
+	 * @param File $phpcs_file    The file being scanned.
+	 * @param int  $stack_pointer The position of the T_FUNCTION token in the stack.
+	 */
+	protected function process_function_token( File $phpcs_file, $stack_pointer ) {
+		$tokens = $phpcs_file->getTokens();
+
+		$oo_token      = Scopes::validDirectScope( $phpcs_file, $stack_pointer, Tokens::$ooScopeTokens );
+		$function_name = ObjectDeclarations::getName( $phpcs_file, $stack_pointer );
+
+		$token_type = 'function';
+		if ( Scopes::isOOMethod( $phpcs_file, $stack_pointer ) ) {
+			$visibility = FunctionDeclarations::getProperties( $phpcs_file, $stack_pointer )['scope'];
+			if ( $this->check_below_minimum_visibility( $visibility ) ) {
+				return;
+			}
+
+			$function_name = ObjectDeclarations::getName( $phpcs_file, $oo_token ) . '::' . $function_name;
+			$token_type    = 'method';
+		}
+
+		$violation_codes = static::get_violation_codes( ucfirst( $token_type ) );
+
+		$error_message_data = array(
+			$function_name,
+			$token_type,
+		);
+
+		$docblock = static::find_docblock( $phpcs_file, $stack_pointer );
+
+		$version_tags = static::parse_since_tags( $phpcs_file, $docblock );
+		if ( empty( $version_tags ) ) {
+			$phpcs_file->addError(
+				'Missing @since tag for the "%s()" %s.',
+				$stack_pointer,
+				$violation_codes['missing_since_tag'],
+				$error_message_data
+			);
+			return;
+		}
+
+		foreach ( $version_tags as $since_tag_token => $version_value_token ) {
+			if ( null === $version_value_token ) {
+				$phpcs_file->addError(
+					'Missing @since tag version value for the "%s()" %s.',
+					$since_tag_token,
+					$violation_codes['missing_version_value'],
+					$error_message_data
+				);
+				continue;
+			}
+
+			$version_value = $tokens[ $version_value_token ]['content'];
+
+			if ( static::validate_version( $version_value ) ) {
+				continue;
+			}
+
+			$phpcs_file->addError(
+				'Invalid @since version value for the "%s()" %s: "%s". Version value must be greater than or equal to 0.0.1.',
+				$version_value_token,
+				$violation_codes['invalid_version_value'],
+				array_merge( $error_message_data, array( $version_value ) )
+			);
+		}
+	}
+
+	/**
+	 * Validates the version value.
+	 *
+	 * @param string $version The version value being checked.
+	 * @return bool True if the version value is valid.
+	 */
+	protected static function validate_version( $version ) {
+		$matches = array();
+		if ( 1 === preg_match( '/^MU \((?<version>.+)\)/', $version, $matches ) ) {
+			$version = $matches['version'];
+		}
+
+		return version_compare( $version, '0.0.1', '>=' );
+	}
+
+
+	/**
+	 * Returns violation codes for a specific token type.
+	 *
+	 * @param string $token_type The type of token (e.g., Function, Property) to retrieve violation codes for.
+	 * @return array An array containing violation codes for missing since tag, missing version value, and invalid version value.
+	 */
+	protected static function get_violation_codes( $token_type ) {
+		return array(
+			'missing_since_tag'     => 'Missing' . $token_type . 'SinceTag',
+			'missing_version_value' => 'Missing' . $token_type . 'VersionValue',
+			'invalid_version_value' => 'Invalid' . $token_type . 'VersionValue',
+		);
+	}
+
+	/**
+	 * Checks if the provided visibility level is below the set minimum visibility level.
+	 *
+	 * @param string $visibility The visibility level to check.
+	 * @return bool Returns true if the provided visibility level is below the minimum visibility level, false otherwise.
+	 */
+	protected function check_below_minimum_visibility( $visibility ) {
+		if ( 'public' === $this->minimumVisibility && in_array( $visibility, array( 'protected', 'private' ), true ) ) {
+			return true;
+		}
+
+		if ( 'protected' === $this->minimumVisibility && 'private' === $visibility ) {
+			return true;
+		}
+
+		return false;
+	}
+
+	/**
+	 * Finds the 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.
+	 *
+	 * @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.
+	 */
+	protected static function find_hook_docblock( 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 );
+			}
+		}
+
+		return static::find_docblock( $phpcs_file, 0 );
+	}
+
+	/**
+	 * Determines if a T_STRING token represents a function call.
+	 * The implementation was copied from PHPCompatibility\Sniffs\Extensions\RemovedExtensionsSniff::process().
+	 *
+	 * @param File $phpcs_file    The file being scanned.
+	 * @param int  $stack_pointer The position of the T_STRING token in question.
+	 * @return bool True if the token represents a function call, false otherwise.
+	 */
+	protected static function is_function_call( File $phpcs_file, $stack_pointer ) {
+		$tokens = $phpcs_file->getTokens();
+
+		// Find the 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.
+			return false;
+		}
+
+		if ( false === isset( $tokens[ $open_bracket ]['parenthesis_closer'] ) ) {
+			// Not a function call.
+			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 ! 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().
+	 *
+	 * @param File $phpcs_file    The file being scanned.
+	 * @param int  $stack_pointer The position (stack pointer) in the token stack from which to start searching backwards.
+	 * @return array|false An associative array containing the start and end tokens of the docblock, or false if not found.
+	 */
+	protected static function find_docblock( File $phpcs_file, $stack_pointer ) {
+		$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;
+			}
+
+			break;
+		}
+
+		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;
+			}
+		}
+
+		if ( T_DOC_COMMENT_CLOSE_TAG !== $tokens[ $comment_end ]['code'] ) {
+			// Only "/**" style comments are supported.
+			return false;
+		}
+
+		return array(
+			'start_token' => $tokens[ $comment_end ]['comment_opener'],
+			'end_token'   => $comment_end,
+		);
+	}
+
+	/**
+	 * Searches for @since values within a docblock.
+	 *
+	 * @param File        $phpcs_file The file being scanned.
+	 * @param array|false $docblock   An associative array containing the start and end tokens of the docblock, or false if not exists.
+	 * @return array Returns an array of "@since" tokens and their corresponding value tokens.
+	 */
+	protected static function parse_since_tags( File $phpcs_file, $docblock ) {
+		$version_tags = array();
+
+		if ( false === $docblock ) {
+			return $version_tags;
+		}
+
+		$tokens = $phpcs_file->getTokens();
+
+		for ( $i = $docblock['start_token'] + 1; $i < $docblock['end_token']; $i++ ) {
+			if ( ! ( T_DOC_COMMENT_TAG === $tokens[ $i ]['code'] && '@since' === $tokens[ $i ]['content'] ) ) {
+				continue;
+			}
+
+			$version_token = $phpcs_file->findNext( T_DOC_COMMENT_WHITESPACE, $i + 1, $docblock['end_token'], true, null, true );
+			if ( ( false === $version_token ) || ( T_DOC_COMMENT_STRING !== $tokens[ $version_token ]['code'] ) ) {
+				$version_tags[ $i ] = null;
+				continue;
+			}
+
+			$version_tags[ $i ] = $version_token;
+		}
+
+		return $version_tags;
+	}
+
+	/**
+	 * Checks if the current block is experimental.
+	 *
+	 * @param File $phpcs_file The file being scanned.
+	 * @return bool Returns true if the current block is experimental.
+	 */
+	protected static function is_experimental_block( File $phpcs_file ) {
+		$block_json_filepath = dirname( $phpcs_file->getFilename() ) . DIRECTORY_SEPARATOR . 'block.json';
+
+		if ( isset( static::$cache[ $block_json_filepath ] ) ) {
+			return static::$cache[ $block_json_filepath ];
+		}
+
+		if ( ! is_file( $block_json_filepath ) || ! is_readable( $block_json_filepath ) ) {
+			static::$cache[ $block_json_filepath ] = false;
+			return static::$cache[ $block_json_filepath ];
+		}
+
+		// phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents -- this Composer package doesn't depend on WordPress.
+		$block_metadata = file_get_contents( $block_json_filepath );
+		if ( false === $block_metadata ) {
+			static::$cache[ $block_json_filepath ] = false;
+			return static::$cache[ $block_json_filepath ];
+		}
+
+		$block_metadata = json_decode( $block_metadata, true );
+		if ( ! is_array( $block_metadata ) ) {
+			static::$cache[ $block_json_filepath ] = false;
+			return static::$cache[ $block_json_filepath ];
+		}
+
+		$experimental_flag                     = '__experimental';
+		static::$cache[ $block_json_filepath ] = array_key_exists( $experimental_flag, $block_metadata ) && ( false !== $block_metadata[ $experimental_flag ] );
+		return static::$cache[ $block_json_filepath ];
+	}
+}
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/AbstractSniffUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/AbstractSniffUnitTest.php
new file mode 100644
index 0000000000000..08838ce412fc3
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/AbstractSniffUnitTest.php
@@ -0,0 +1,85 @@
+<?php
+/**
+ * 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
+ */
+
+namespace GutenbergCS\Gutenberg\Tests;
+
+use PHP_CodeSniffer\Config;
+use PHP_CodeSniffer\Tests\Standards\AbstractSniffUnitTest as BaseAbstractSniffUnitTest;
+use PHP_CodeSniffer\Ruleset;
+use PHP_CodeSniffer\Sniffs\Sniff;
+
+abstract class AbstractSniffUnitTest extends BaseAbstractSniffUnitTest {
+
+	/**
+	 * Holds the original Ruleset instance.
+	 *
+	 * @var Ruleset
+	 */
+	protected static $original_ruleset;
+
+	/**
+	 * This method resets the 'Gutenberg' ruleset in the $GLOBALS['PHP_CODESNIFFER_RULESETS']
+	 * to its original state.
+	 */
+	public static function tearDownAfterClass() {
+		parent::tearDownAfterClass();
+
+		$GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] = static::$original_ruleset;
+		static::$original_ruleset                         = null;
+	}
+
+	/**
+	 * Sets the parameters for the sniff.
+	 *
+	 * @throws RuntimeException If unable to set the ruleset parameters required for the test.
+	 *
+	 * @param Sniff $sniff The sniff being tested.
+	 */
+	abstract protected function set_sniff_parameters( Sniff $sniff );
+
+	/**
+	 * Returns the fully qualified class name (FQCN) of the sniff.
+	 *
+	 * @return string The fully qualified class name of the sniff.
+	 */
+	abstract protected function get_sniff_fqcn();
+
+	/**
+	 * Prepares the environment before executing tests. This is needed since
+	 * PHP_CodeSniffer\Tests\Standards\AbstractSniffUnitTest doesn't apply
+	 * sniff properties from the Gutenberg/ruleset.xml file.
+	 *
+	 * @param string $filename The name of the file being tested.
+	 * @param Config $config   The config data for the run.
+	 */
+	public function setCliValues( $filename, $config ) {
+		parent::setCliValues( $filename, $config );
+
+		$error_message = 'Cannot set sniff parameters required for the unit test.';
+		if ( ! isset( $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] )
+			|| ( ! $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] instanceof Ruleset )
+		) {
+			throw new \RuntimeException( $error_message );
+		}
+
+		// Backup the original Ruleset instance.
+		static::$original_ruleset = $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'];
+
+		$current_ruleset                                  = clone static::$original_ruleset;
+		$GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] = $current_ruleset;
+
+		$sniff_fqcn = $this->get_sniff_fqcn();
+		if ( ! isset( $current_ruleset->sniffs[ $sniff_fqcn ] ) ) {
+			throw new \RuntimeException( $error_message );
+		}
+
+		$sniff = $current_ruleset->sniffs[ $sniff_fqcn ];
+		$this->set_sniff_parameters( $sniff );
+	}
+}
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 5073cea9ecf06..8026e88f1d945 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/ForbiddenFunctionsAndClassesUnitTest.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/ForbiddenFunctionsAndClassesUnitTest.php
@@ -10,22 +10,14 @@
 namespace GutenbergCS\Gutenberg\Tests\CodeAnalysis;
 
 use GutenbergCS\Gutenberg\Sniffs\CodeAnalysis\ForbiddenFunctionsAndClassesSniff;
-use PHP_CodeSniffer\Config;
-use PHP_CodeSniffer\Tests\Standards\AbstractSniffUnitTest;
-use PHP_CodeSniffer\Ruleset;
+use GutenbergCS\Gutenberg\Tests\AbstractSniffUnitTest;
+use PHP_CodeSniffer\Sniffs\Sniff;
 
 /**
  * Unit test class for the ForbiddenFunctionsAndClassesSniff sniff.
  */
 final class ForbiddenFunctionsAndClassesUnitTest extends AbstractSniffUnitTest {
 
-	/**
-	 * Holds the original Ruleset instance.
-	 *
-	 * @var Ruleset
-	 */
-	private static $original_ruleset;
-
 	/**
 	 * Returns the lines where errors should occur.
 	 *
@@ -73,50 +65,22 @@ public function getWarningList() {
 	}
 
 	/**
+	 * Returns the fully qualified class name (FQCN) of the sniff.
 	 *
-	 * This method resets the 'Gutenberg' ruleset in the $GLOBALS['PHP_CODESNIFFER_RULESETS']
-	 * to its original state.
+	 * @return string The fully qualified class name of the sniff.
 	 */
-	public static function tearDownAfterClass() {
-		parent::tearDownAfterClass();
-
-		$GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] = self::$original_ruleset;
-		self::$original_ruleset                           = null;
+	protected function get_sniff_fqcn() {
+		return ForbiddenFunctionsAndClassesSniff::class;
 	}
 
-
 	/**
-	 * Prepares the environment before executing tests. Specifically, sets prefixes for the
-	 * ForbiddenFunctionsAndClassesSniff sniff.This is needed since AbstractSniffUnitTest class
-	 * doesn't apply sniff properties from the Gutenberg/ruleset.xml file.
+	 * Sets the parameters for the sniff.
 	 *
-	 * @param string $filename The name of the file being tested.
-	 * @param Config $config   The config data for the run.
+	 * @throws RuntimeException If unable to set the ruleset parameters required for the test.
 	 *
-	 * @return void
+	 * @param Sniff $sniff The sniff being tested.
 	 */
-	public function setCliValues( $filename, $config ) {
-		parent::setCliValues( $filename, $config );
-
-		if ( ! isset( $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] )
-			|| ( ! $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] instanceof Ruleset )
-		) {
-			throw new \RuntimeException( 'Cannot set ruleset parameters required for this test.' );
-		}
-
-		// Backup the original Ruleset instance.
-		self::$original_ruleset = $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'];
-
-		$current_ruleset                                  = clone self::$original_ruleset;
-		$GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] = $current_ruleset;
-
-		if ( ! isset( $current_ruleset->sniffs[ ForbiddenFunctionsAndClassesSniff::class ] )
-			|| ( ! $current_ruleset->sniffs[ ForbiddenFunctionsAndClassesSniff::class ] instanceof ForbiddenFunctionsAndClassesSniff )
-		) {
-			throw new \RuntimeException( 'Cannot set ruleset parameters required for this test.' );
-		}
-
-		$sniff                      = $current_ruleset->sniffs[ ForbiddenFunctionsAndClassesSniff::class ];
+	public function set_sniff_parameters( Sniff $sniff ) {
 		$sniff->forbidden_functions = array(
 			'[Gg]utenberg.*',
 		);
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 fdd5c07c8cb59..652f6b735378c 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/GuardedFunctionAndClassNamesUnitTest.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/GuardedFunctionAndClassNamesUnitTest.php
@@ -10,22 +10,14 @@
 namespace GutenbergCS\Gutenberg\Tests\CodeAnalysis;
 
 use GutenbergCS\Gutenberg\Sniffs\CodeAnalysis\GuardedFunctionAndClassNamesSniff;
-use PHP_CodeSniffer\Config;
-use PHP_CodeSniffer\Tests\Standards\AbstractSniffUnitTest;
-use PHP_CodeSniffer\Ruleset;
+use GutenbergCS\Gutenberg\Tests\AbstractSniffUnitTest;
+use PHP_CodeSniffer\Sniffs\Sniff;
 
 /**
  * Unit test class for the GuardedFunctionAndClassNames sniff.
  */
 final class GuardedFunctionAndClassNamesUnitTest extends AbstractSniffUnitTest {
 
-	/**
-	 * Holds the original Ruleset instance.
-	 *
-	 * @var Ruleset
-	 */
-	private static $original_ruleset;
-
 	/**
 	 * Returns the lines where errors should occur.
 	 *
@@ -50,50 +42,22 @@ public function getWarningList() {
 	}
 
 	/**
+	 * Returns the fully qualified class name (FQCN) of the sniff.
 	 *
-	 * This method resets the 'Gutenberg' ruleset in the $GLOBALS['PHP_CODESNIFFER_RULESETS']
-	 * to its original state.
+	 * @return string The fully qualified class name of the sniff.
 	 */
-	public static function tearDownAfterClass() {
-		parent::tearDownAfterClass();
-
-		$GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] = self::$original_ruleset;
-		self::$original_ruleset                           = null;
+	protected function get_sniff_fqcn() {
+		return GuardedFunctionAndClassNamesSniff::class;
 	}
 
-
 	/**
-	 * Prepares the environment before executing tests. Specifically, sets prefixes for the
-	 * GuardedFunctionAndClassNames sniff.This is needed since AbstractSniffUnitTest class
-	 * doesn't apply sniff properties from the Gutenberg/ruleset.xml file.
+	 * Sets the parameters for the sniff.
 	 *
-	 * @param string $filename The name of the file being tested.
-	 * @param Config $config   The config data for the run.
+	 * @throws RuntimeException If unable to set the ruleset parameters required for the test.
 	 *
-	 * @return void
+	 * @param Sniff $sniff The sniff being tested.
 	 */
-	public function setCliValues( $filename, $config ) {
-		parent::setCliValues( $filename, $config );
-
-		if ( ! isset( $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] )
-			|| ( ! $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] instanceof Ruleset )
-		) {
-			throw new \RuntimeException( 'Cannot set ruleset parameters required for this test.' );
-		}
-
-		// Backup the original Ruleset instance.
-		self::$original_ruleset = $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'];
-
-		$current_ruleset                                  = clone self::$original_ruleset;
-		$GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] = $current_ruleset;
-
-		if ( ! isset( $current_ruleset->sniffs[ GuardedFunctionAndClassNamesSniff::class ] )
-			|| ( ! $current_ruleset->sniffs[ GuardedFunctionAndClassNamesSniff::class ] instanceof GuardedFunctionAndClassNamesSniff )
-		) {
-			throw new \RuntimeException( 'Cannot set ruleset parameters required for this test.' );
-		}
-
-		$sniff                     = $current_ruleset->sniffs[ GuardedFunctionAndClassNamesSniff::class ];
+	public function set_sniff_parameters( Sniff $sniff ) {
 		$sniff->functionsWhiteList = array(
 			'/^_?gutenberg.+/',
 		);
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/FunctionCommentSinceTagUnitTest.inc b/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/FunctionCommentSinceTagUnitTest.inc
deleted file mode 100644
index 43d11694bb25e..0000000000000
--- a/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/FunctionCommentSinceTagUnitTest.inc
+++ /dev/null
@@ -1,39 +0,0 @@
-<?php
-/**
- * @since 1.2.3
- */
-function foo() {
-}
-
-/**
- * @since invalid value
- */
-function bar() {
-}
-
-$result = array_map( function ( $value ) {
-	return $value * 2; // Doubling each value
-}, array( 1, 2, 3, 4, 5 ) );
-
-/**
- * @since 0.0
- */
-function qux() {
-}
-
-function spam() {
-}
-
-class Foo {
-	public function bar() {
-	}
-}
-
-interface Bar {
-	public function bar();
-}
-
-trait Baz {
-	public function bar() {
-	}
-}
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/FunctionCommentSinceTagUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/FunctionCommentSinceTagUnitTest.php
deleted file mode 100644
index b41e794d072fd..0000000000000
--- a/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/FunctionCommentSinceTagUnitTest.php
+++ /dev/null
@@ -1,42 +0,0 @@
-<?php
-/**
- * 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
- */
-
-namespace GutenbergCS\Gutenberg\Tests\Commenting;
-
-use PHP_CodeSniffer\Tests\Standards\AbstractSniffUnitTest;
-use PHP_CodeSniffer\Ruleset;
-
-/**
- * Unit test class for the FunctionCommentSinceTagSniff sniff.
- */
-final class FunctionCommentSinceTagUnitTest extends AbstractSniffUnitTest {
-
-	/**
-	 * Returns the lines where errors should occur.
-	 *
-	 * @return array <int line number> => <int number of errors>
-	 */
-	public function getErrorList() {
-		// The sniff only supports PHP functions for now; it ignores class, trait, and interface methods.
-		return array(
-			9  => 1,
-			19 => 1,
-			24 => 1,
-		);
-	}
-
-	/**
-	 * Returns the lines where warnings should occur.
-	 *
-	 * @return array <int line number> => <int number of warnings>
-	 */
-	public function getWarningList() {
-		return array();
-	}
-}
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.inc b/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.inc
new file mode 100644
index 0000000000000..aa8593b2e2757
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.inc
@@ -0,0 +1,629 @@
+<?php
+function foo() {
+	$result = do_action( 'some_filter', array() );
+	$result = do_action_ref_array( 'some_filter', array() );
+	$result = apply_filters( 'some_filter', array() );
+	$result = apply_filters_ref_array( 'some_filter', array() );
+
+	/**
+	 * @since
+	 * 123
+	 */
+	$result = apply_filters( 'some_filter', array() );
+
+	/**
+	 * @since invalid 123
+	 */
+	$result = apply_filters( 'some_filter', array() );
+
+	/**
+	 * @since 123
+	 */
+	$result = apply_filters( 'some_filter', array() );
+
+	$variable = 'some_value'; /** Some comment @since 123 */
+
+	$result = apply_filters( 'some_filter', array() );
+
+	/** @var This filter is documented in foo.php */
+	$result = apply_filters( 'some_filter', array() );
+
+	/**
+	 * @since 3.0.0
+	 * @since
+	 * @since MU (3.0.0)
+	 * @since invalid_value
+	 * @since
+	 */
+	$result = apply_filters( 'some_filter', array() );
+}
+
+/**
+ * @since
+ * 123
+ */
+function bar() {
+}
+
+/**
+ * @since invalid 123
+ */
+function baz() {
+}
+
+/**
+ * @since 123
+ */
+function qux() {
+}
+
+$variable = 'some_value'; /** Some comment @since 123 */
+
+function quux() {
+}
+
+/**
+ * @since 3.0.0
+ * @since
+ * @since MU (3.0.0)
+ * @since invalid_value
+ * @since
+ */
+function grault() {
+}
+
+$result = array_map( function ( $value ) {
+	return $value * 2; // Doubling each value
+}, array( 1, 2, 3, 4, 5 ) );
+
+class Foo {
+
+	/**
+	 * @since
+	 * 123
+	 */
+	public $foo_property;
+
+	/**
+	 * @since invalid 123
+	 */
+	protected $bar_property;
+
+	/**
+	 * @since 123
+	 */
+	public $baz_property;
+
+	public $qux_property = 'some_value'; /** Some comment @since 123 */
+
+	public $quux_property;
+
+	private $corge_property;
+
+	/**
+	 * @since 3.0.0
+	 * @since
+	 * @since MU (3.0.0)
+	 * @since invalid_value
+	 * @since
+	 */
+	public $grault_property;
+
+	protected function foobar() {
+		$result = do_action( 'some_filter', array() );
+		$result = do_action_ref_array( 'some_filter', array() );
+		$result = apply_filters( 'some_filter', array() );
+		$result = apply_filters_ref_array( 'some_filter', array() );
+
+		/**
+		 * @since
+		 * 123
+		 */
+		$result = apply_filters( 'some_filter', array() );
+
+		/**
+		 * @since invalid 123
+		 */
+		$result = apply_filters( 'some_filter', array() );
+
+		/**
+		 * @since 123
+		 */
+		$result = apply_filters( 'some_filter', array() );
+
+		$variable = 'some_value'; /** Some comment @since 123 */
+
+		$result = apply_filters( 'some_filter', array() );
+
+		/** @var This filter is documented in foo.php */
+		$result = apply_filters( 'some_filter', array() );
+	}
+
+	protected function foobar_1() {}
+
+	/**
+	 * @since
+	 * 123
+	 */
+	public function bar() {
+	}
+
+	/**
+	 * @since invalid 123
+	 */
+	public function baz() {
+	}
+
+	/**
+	 * @since 123
+	 */
+	protected function qux() {
+	}
+
+	/** Some comment @since 123 */
+
+	public function quux() {
+		$result = array_map( function ( $value ) {
+			return $value * 2; // Doubling each value
+		}, array( 1, 2, 3, 4, 5 ) );
+	}
+
+	private function corge() {
+	}
+
+	function no_visibility_modifier() {}
+
+	/**
+	 * @since 3.0.0
+	 * @since
+	 * @since MU (3.0.0)
+	 * @since invalid_value
+	 * @since
+	 */
+	public function grault() {
+	}
+}
+
+/**
+ * @since
+ * 123
+ */
+class Foo_1 {
+}
+
+/**
+ * @since invalid 123
+ */
+class Foo_2 {
+}
+
+/**
+ * @since 123
+ */
+class Foo_3 {
+}
+
+$variable = 'some_value'; /** Some comment @since 123 */
+
+class Foo_4 {
+}
+
+/**
+ * @since 3.0.0
+ * @since
+ * @since MU (3.0.0)
+ * @since invalid_value
+ * @since
+ */
+class Foo_5 {
+}
+
+abstract class Bar_Abstract {
+	/**
+	 * @since
+	 * 123
+	 */
+	public $foo_property;
+
+	/**
+	 * @since invalid 123
+	 */
+	protected $bar_property;
+
+	/**
+	 * @since 123
+	 */
+	public $baz_property;
+
+	public $qux_property = 'some_value'; /** Some comment @since 123 */
+
+	public $quux_property;
+
+	private $corge_property;
+
+	/**
+	 * @since 3.0.0
+	 * @since
+	 * @since MU (3.0.0)
+	 * @since invalid_value
+	 * @since
+	 */
+	public $grault_property;
+
+	protected function foobar() {
+		$result = do_action( 'some_filter', array() );
+		$result = do_action_ref_array( 'some_filter', array() );
+		$result = apply_filters( 'some_filter', array() );
+		$result = apply_filters_ref_array( 'some_filter', array() );
+
+		/**
+		 * @since
+		 * 123
+		 */
+		$result = apply_filters( 'some_filter', array() );
+
+		/**
+		 * @since invalid 123
+		 */
+		$result = apply_filters( 'some_filter', array() );
+
+		/**
+		 * @since 123
+		 */
+		$result = apply_filters( 'some_filter', array() );
+
+		$variable = 'some_value'; /** Some comment @since 123 */
+
+		$result = apply_filters( 'some_filter', array() );
+
+		/** @var This filter is documented in foo.php */
+		$result = apply_filters( 'some_filter', array() );
+	}
+
+	abstract protected function foo_abstract();
+
+	/**
+	 * @since
+	 * 123
+	 */
+	public function apply_filters() {
+	}
+
+	/**
+	 * @since invalid 123
+	 */
+	public function baz() {
+	}
+
+	/**
+	 * @since 123
+	 */
+	protected function qux() {
+	}
+
+	/** Some comment @since 123 */
+
+	public function quux() {
+		$result = array_map( function ( $value ) {
+			return $value * 2; // Doubling each value
+		}, array( 1, 2, 3, 4, 5 ) );
+	}
+
+	private function corge() {
+	}
+
+	function no_visibility_modifier() {}
+
+	/**
+	 * @since 3.0.0
+	 * @since
+	 * @since MU (3.0.0)
+	 * @since invalid_value
+	 * @since
+	 */
+	public function grault() {
+	}
+}
+
+/**
+ * @since
+ * 123
+ */
+abstract class Bar_1 {
+}
+
+/**
+ * @since invalid 123
+ */
+abstract class Bar_2 {
+}
+
+/**
+ * @since 123
+ */
+abstract class Bar_3 {
+}
+
+$variable = 'some_value'; /** Some comment @since 123 */
+
+abstract class Bar_4 {
+}
+
+/**
+ * @since 3.0.0
+ * @since
+ * @since MU (3.0.0)
+ * @since invalid_value
+ * @since
+ */
+abstract class Bar_5 {
+}
+
+Trait Baz {
+
+	/**
+	 * @since
+	 * 123
+	 */
+	public $foo_property;
+
+	/**
+	 * @since invalid 123
+	 */
+	protected $bar_property;
+
+	/**
+	 * @since 123
+	 */
+	public $baz_property;
+
+	public $qux_property = 'some_value'; /** Some comment @since 123 */
+
+	public $quux_property;
+
+	private $corge_property;
+
+	/**
+	 * @since 3.0.0
+	 * @since
+	 * @since MU (3.0.0)
+	 * @since invalid_value
+	 * @since
+	 */
+	public $grault_property;
+
+	protected function foobar() {
+		$result = do_action( 'some_filter', array() );
+		$result = do_action_ref_array( 'some_filter', array() );
+		$result = apply_filters( 'some_filter', array() );
+		$result = apply_filters_ref_array( 'some_filter', array() );
+
+		/**
+		 * @since
+		 * 123
+		 */
+		$result = apply_filters( 'some_filter', array() );
+
+		/**
+		 * @since invalid 123
+		 */
+		$result = apply_filters( 'some_filter', array() );
+
+		/**
+		 * @since 123
+		 */
+		$result = apply_filters( 'some_filter', array() );
+
+		$variable = 'some_value'; /** Some comment @since 123 */
+
+		$result = apply_filters( 'some_filter', array() );
+
+		/** @var This filter is documented in foo.php */
+		$result = apply_filters( 'some_filter', array() );
+	}
+
+	/**
+	 * @since
+	 * 123
+	 */
+	public function bar() {
+	}
+
+	/**
+	 * @since invalid 123
+	 */
+	public function baz() {
+	}
+
+	/**
+	 * @since 123
+	 */
+	protected function qux() {
+	}
+
+	/** Some comment @since 123 */
+
+	public function quux() {
+		$result = array_map( function ( $value ) {
+			return $value * 2; // Doubling each value
+		}, array( 1, 2, 3, 4, 5 ) );
+	}
+
+	private function corge() {
+	}
+
+	function no_visibility_modifier() {}
+
+	/**
+	 * @since 3.0.0
+	 * @since
+	 * @since MU (3.0.0)
+	 * @since invalid_value
+	 * @since
+	 */
+	public function grault() {
+	}
+}
+
+/**
+ * @since
+ * 123
+ */
+trait Baz_1 {
+}
+
+/**
+ * @since invalid 123
+ */
+trait Baz_2 {
+}
+
+/**
+ * @since 123
+ */
+trait Baz_3 {
+}
+
+$variable = 'some_value'; /** Some comment @since 123 */
+
+trait Baz_4 {
+}
+
+interface Qux {
+	public function foobar();
+
+	/**
+	 * @since
+	 * 123
+	 */
+	public function bar();
+
+	/**
+	 * @since invalid 123
+	 */
+	public function baz();
+
+	/**
+	 * @since 123
+	 */
+	public function qux();
+
+	/** Some comment @since 123 */
+
+	public function quux();
+
+	/**
+	 * @since 3.0.0
+	 * @since
+	 * @since MU (3.0.0)
+	 * @since invalid_value
+	 * @since
+	 */
+	public function grault();
+}
+
+/**
+ * @since
+ * 123
+ */
+interface Qux_1 {
+}
+
+/**
+ * @since invalid 123
+ */
+interface Qux_2 {
+}
+
+/**
+ * @since 123
+ */
+interface Qux_3 {
+}
+
+$variable = 'some_value'; /** Some comment @since 123 */
+
+interface Qux_4 {
+}
+
+$result = do_action( 'some_filter', array() );
+$result = do_action_ref_array( 'some_filter', array() );
+$result = apply_filters( 'some_filter', array() );
+$result = apply_filters_ref_array( 'some_filter', array() );
+
+/**
+ * @since
+ * 123
+ */
+$result = apply_filters( 'some_filter', array() );
+
+/**
+ * @since invalid 123
+ */
+$result = apply_filters( 'some_filter', array() );
+
+/**
+ * @since 123
+ */
+$result = apply_filters( 'some_filter', array() );
+
+$variable = 'some_value'; /** Some comment @since 123 */$
+
+$result = apply_filters( 'some_filter', array() );
+
+/** @var This filter is documented in foo.php */
+$result = apply_filters( 'some_filter', array() );
+
+/**
+ * @since 3.0.0
+ * @since
+ * @since MU (3.0.0)
+ * @since invalid_value
+ * @since
+ */
+$result = apply_filters( 'some_filter', array() );
+
+if ( ! function_exists( 'do_action' ) ) {
+	function do_action() {
+	}
+}
+
+if ( ! function_exists( 'do_action_ref_array' ) ) {
+	function do_action_ref_array() {
+	}
+}
+
+if ( ! function_exists( 'do_action_deprecated' ) ) {
+	function do_action_deprecated() {
+	}
+}
+
+if ( ! function_exists( 'apply_filters' ) ) {
+	function apply_filters() {
+	}
+}
+
+if ( ! function_exists( 'apply_filters_ref_array' ) ) {
+	function apply_filters_ref_array() {
+	}
+}
+
+if ( ! function_exists( 'apply_filters_deprecated' ) ) {
+	function apply_filters_deprecated() {
+	}
+}
+
+$foo = new do_action();
+$foo->do_action();
+$foo = new do_action_ref_array();
+$foo->do_action_ref_array();
+$foo = new do_action_deprecated();
+$foo->do_action_deprecated();
+$foo = new apply_filters();
+$foo->apply_filters();
+$foo = new apply_filters_ref_array();
+$foo->apply_filters_ref_array();
+$foo = new apply_filters_deprecated();
+$foo->apply_filters_deprecated();
+$foo = new non_hook_action();
+$foo->non_hook_action();
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.php
new file mode 100644
index 0000000000000..bc7ca28c263ff
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.php
@@ -0,0 +1,189 @@
+<?php
+/**
+ * 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
+ */
+
+namespace GutenbergCS\Gutenberg\Tests\Commenting;
+
+use GutenbergCS\Gutenberg\Sniffs\Commenting\SinceTagSniff;
+use GutenbergCS\Gutenberg\Tests\AbstractSniffUnitTest;
+use PHP_CodeSniffer\Sniffs\Sniff;
+
+/**
+ * Unit test class for the SinceTagSniff sniff.
+ */
+final class SinceTagUnitTest extends AbstractSniffUnitTest {
+
+	/**
+	 * Returns the lines where errors should occur.
+	 *
+	 * @return array <int line number> => <int number of errors>
+	 */
+	public function getErrorList() {
+		return array(
+			2   => 1,
+			3   => 1,
+			4   => 1,
+			5   => 1,
+			6   => 1,
+			9   => 1,
+			15  => 1,
+			26  => 1,
+			33  => 1,
+			35  => 1,
+			36  => 1,
+			42  => 1,
+			49  => 1,
+			62  => 1,
+			67  => 1,
+			69  => 1,
+			70  => 1,
+			79  => 1,
+			82  => 1,
+			88  => 1,
+			97  => 1,
+			99  => 1,
+			105 => 1,
+			107 => 1,
+			108 => 1,
+			112 => 1,
+			113 => 1,
+			114 => 1,
+			115 => 1,
+			116 => 1,
+			119 => 1,
+			125 => 1,
+			136 => 1,
+			142 => 1,
+			145 => 1,
+			152 => 1,
+			165 => 1,
+			174 => 1,
+			178 => 1,
+			180 => 1,
+			181 => 1,
+			188 => 1,
+			195 => 1,
+			208 => 1,
+			213 => 1,
+			215 => 1,
+			216 => 1,
+			221 => 1,
+			223 => 1,
+			229 => 1,
+			238 => 1,
+			240 => 1,
+			246 => 1,
+			248 => 1,
+			249 => 1,
+			253 => 1,
+			254 => 1,
+			255 => 1,
+			256 => 1,
+			257 => 1,
+			260 => 1,
+			266 => 1,
+			277 => 1,
+			283 => 1,
+			286 => 1,
+			293 => 1,
+			306 => 1,
+			315 => 1,
+			319 => 1,
+			321 => 1,
+			322 => 1,
+			329 => 1,
+			336 => 1,
+			349 => 1,
+			354 => 1,
+			356 => 1,
+			357 => 1,
+			362 => 1,
+			365 => 1,
+			371 => 1,
+			380 => 1,
+			382 => 1,
+			388 => 1,
+			390 => 1,
+			391 => 1,
+			395 => 1,
+			396 => 1,
+			397 => 1,
+			398 => 1,
+			399 => 1,
+			402 => 1,
+			408 => 1,
+			419 => 1,
+			426 => 1,
+			433 => 1,
+			446 => 1,
+			455 => 1,
+			459 => 1,
+			461 => 1,
+			462 => 1,
+			469 => 1,
+			476 => 1,
+			489 => 1,
+			492 => 1,
+			493 => 1,
+			496 => 1,
+			502 => 1,
+			513 => 1,
+			517 => 1,
+			519 => 1,
+			520 => 1,
+			526 => 1,
+			533 => 1,
+			546 => 1,
+			549 => 1,
+			550 => 1,
+			551 => 1,
+			552 => 1,
+			555 => 1,
+			561 => 1,
+			572 => 1,
+			579 => 1,
+			581 => 1,
+			582 => 1,
+			587 => 1,
+			592 => 1,
+			597 => 1,
+			602 => 1,
+			607 => 1,
+			612 => 1,
+		);
+	}
+
+	/**
+	 * Returns the lines where warnings should occur.
+	 *
+	 * @return array <int line number> => <int number of warnings>
+	 */
+	public function getWarningList() {
+		return array();
+	}
+
+	/**
+	 * Returns the fully qualified class name (FQCN) of the sniff.
+	 *
+	 * @return string The fully qualified class name of the sniff.
+	 */
+	protected function get_sniff_fqcn() {
+		return SinceTagSniff::class;
+	}
+
+	/**
+	 * Sets the parameters for the sniff.
+	 *
+	 * @throws RuntimeException If unable to set the ruleset parameters required for the test.
+	 *
+	 * @param Sniff $sniff The sniff being tested.
+	 */
+	public function set_sniff_parameters( Sniff $sniff ) {
+		$sniff->minimumVisibility = 'protected';
+	}
+}
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/NamingConventions/ValidBlockLibraryFunctionNameUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/NamingConventions/ValidBlockLibraryFunctionNameUnitTest.php
index 794a088b7bc61..51174dd769d0a 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/Tests/NamingConventions/ValidBlockLibraryFunctionNameUnitTest.php
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/NamingConventions/ValidBlockLibraryFunctionNameUnitTest.php
@@ -10,22 +10,14 @@
 namespace GutenbergCS\Gutenberg\Tests\NamingConventions;
 
 use GutenbergCS\Gutenberg\Sniffs\NamingConventions\ValidBlockLibraryFunctionNameSniff;
-use PHP_CodeSniffer\Config;
-use PHP_CodeSniffer\Tests\Standards\AbstractSniffUnitTest;
-use PHP_CodeSniffer\Ruleset;
+use GutenbergCS\Gutenberg\Tests\AbstractSniffUnitTest;
+use PHP_CodeSniffer\Sniffs\Sniff;
 
 /**
  * Unit test class for the ValidBlockLibraryFunctionNameSniff sniff.
  */
 final class ValidBlockLibraryFunctionNameUnitTest extends AbstractSniffUnitTest {
 
-	/**
-	 * Holds the original Ruleset instance.
-	 *
-	 * @var Ruleset
-	 */
-	private static $original_ruleset;
-
 	/**
 	 * Returns the lines where errors should occur.
 	 *
@@ -50,50 +42,22 @@ public function getWarningList() {
 	}
 
 	/**
+	 * Returns the fully qualified class name (FQCN) of the sniff.
 	 *
-	 * This method resets the 'Gutenberg' ruleset in the $GLOBALS['PHP_CODESNIFFER_RULESETS']
-	 * to its original state.
+	 * @return string The fully qualified class name of the sniff.
 	 */
-	public static function tearDownAfterClass() {
-		parent::tearDownAfterClass();
-
-		$GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] = self::$original_ruleset;
-		self::$original_ruleset                           = null;
+	protected function get_sniff_fqcn() {
+		return ValidBlockLibraryFunctionNameSniff::class;
 	}
 
-
 	/**
-	 * Prepares the environment before executing tests. Specifically, sets prefixes for the
-	 * ValidBlockLibraryFunctionName sniff.This is needed since AbstractSniffUnitTest class
-	 * doesn't apply sniff properties from the Gutenberg/ruleset.xml file.
+	 * Sets the parameters for the sniff.
 	 *
-	 * @param string $filename The name of the file being tested.
-	 * @param Config $config   The config data for the run.
+	 * @throws RuntimeException If unable to set the ruleset parameters required for the test.
 	 *
-	 * @return void
+	 * @param Sniff $sniff The sniff being tested.
 	 */
-	public function setCliValues( $filename, $config ) {
-		parent::setCliValues( $filename, $config );
-
-		if ( ! isset( $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] )
-			|| ( ! $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] instanceof Ruleset )
-		) {
-			throw new \RuntimeException( 'Cannot set ruleset parameters required for this test.' );
-		}
-
-		// Backup the original Ruleset instance.
-		self::$original_ruleset = $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'];
-
-		$current_ruleset                                  = clone self::$original_ruleset;
-		$GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] = $current_ruleset;
-
-		if ( ! isset( $current_ruleset->sniffs[ ValidBlockLibraryFunctionNameSniff::class ] )
-			|| ( ! $current_ruleset->sniffs[ ValidBlockLibraryFunctionNameSniff::class ] instanceof ValidBlockLibraryFunctionNameSniff )
-		) {
-			throw new \RuntimeException( 'Cannot set ruleset parameters required for this test.' );
-		}
-
-		$sniff           = $current_ruleset->sniffs[ ValidBlockLibraryFunctionNameSniff::class ];
+	public function set_sniff_parameters( Sniff $sniff ) {
 		$sniff->prefixes = array(
 			'block_core_',
 			'render_block_core_',
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/ruleset.xml b/test/php/gutenberg-coding-standards/Gutenberg/ruleset.xml
index 74400e0e6d5cd..503f7e09b85d7 100644
--- a/test/php/gutenberg-coding-standards/Gutenberg/ruleset.xml
+++ b/test/php/gutenberg-coding-standards/Gutenberg/ruleset.xml
@@ -6,5 +6,6 @@
 	<rule ref="Gutenberg.CodeAnalysis.GuardedFunctionAndClassNames"/>
 	<rule ref="Gutenberg.CodeAnalysis.ForbiddenFunctionsAndClasses"/>
 	<rule ref="Gutenberg.NamingConventions.ValidBlockLibraryFunctionName"/>
+	<rule ref="Gutenberg.Commenting.SinceTag"/>
 
 </ruleset>
diff --git a/test/php/gutenberg-coding-standards/composer.json b/test/php/gutenberg-coding-standards/composer.json
index 0aeec177918c0..c1c27f81818aa 100644
--- a/test/php/gutenberg-coding-standards/composer.json
+++ b/test/php/gutenberg-coding-standards/composer.json
@@ -20,7 +20,8 @@
 		"ext-libxml": "*",
 		"ext-tokenizer": "*",
 		"ext-xmlreader": "*",
-		"squizlabs/php_codesniffer": "^3.7.2"
+		"squizlabs/php_codesniffer": "^3.7.2",
+		"phpcsstandards/phpcsutils": "^1.0.8"
 	},
 	"require-dev": {
 		"phpcompatibility/php-compatibility": "^9.0",
diff --git a/test/unit/config/global-mocks.js b/test/unit/config/global-mocks.js
index a64d01e55c896..fa9c1d0733aa9 100644
--- a/test/unit/config/global-mocks.js
+++ b/test/unit/config/global-mocks.js
@@ -10,6 +10,15 @@ jest.mock( '@wordpress/compose', () => {
 	};
 } );
 
+/**
+ * client-zip is meant to be used in a browser and is therefore released as an ES6 module only,
+ * in order to use it in node environment, we need to mock it.
+ * See: https://github.com/Touffy/client-zip/issues/28
+ */
+jest.mock( 'client-zip', () => ( {
+	downloadZip: jest.fn(),
+} ) );
+
 /**
  * The new gallery block format is not compatible with the use_BalanceTags option
  * so a flag is set in lib/compat.php to allow disabling the new block in this instance.
diff --git a/test/unit/config/gutenberg-env.js b/test/unit/config/gutenberg-env.js
index a6a1b81f74097..f6ea2d16c1c79 100644
--- a/test/unit/config/gutenberg-env.js
+++ b/test/unit/config/gutenberg-env.js
@@ -1,32 +1,13 @@
-global.process.env = {
-	...global.process.env,
-	/*
-	Inject the `IS_GUTENBERG_PLUGIN` global, used for feature flagging.
-
-	The conversion to boolean is required here. Why? Package.json defines
-	IS_GUTENBERG_PLUGIN as follows:
-
-		"config": {
-			"IS_GUTENBERG_PLUGIN": true
-		}
-
-	Webpack then replaces references to IS_GUTENBERG_PLUGIN with a literal value `true`.
-	The file you are reading right now, however, receives a string value "true":
-
-		"true" === process.env.npm_package_config_IS_GUTENBERG_PLUGIN
-
-	The code can only work consistently in both environments when the value of
-	IS_GUTENBERG_PLUGIN is consistent. For this reason, the line below turns the
-	string representation of IS_GUTENBERG_PLUGIN into a boolean value.
-	*/
-	// eslint-disable-next-line @wordpress/is-gutenberg-plugin
-	IS_GUTENBERG_PLUGIN:
-		String( process.env.npm_package_config_IS_GUTENBERG_PLUGIN ) === 'true',
-	/**
-	 * Feature flag guarding features specific to WordPress core.
-	 * It's important to set it to "true" in the test environment
-	 * to ensure the Gutenberg plugin can be cleanly merged into
-	 * WordPress core.
-	 */
-	IS_WORDPRESS_CORE: true,
-};
+/*
+ * Feature flag guarding features specific to WordPress core.
+ * It's important to set it to "true" in the test environment
+ * to ensure the Gutenberg plugin can be cleanly merged into
+ * WordPress core.
+ */
+// eslint-disable-next-line @wordpress/wp-global-usage
+globalThis.IS_WORDPRESS_CORE = true;
+
+// Inject the `IS_GUTENBERG_PLUGIN` global, used for feature flagging.
+// eslint-disable-next-line @wordpress/wp-global-usage
+globalThis.IS_GUTENBERG_PLUGIN =
+	String( process.env.npm_package_config_IS_GUTENBERG_PLUGIN ) === 'true';
diff --git a/test/unit/jest.config.js b/test/unit/jest.config.js
index 38459b631fea4..4a19d5bb37f31 100644
--- a/test/unit/jest.config.js
+++ b/test/unit/jest.config.js
@@ -40,7 +40,7 @@ module.exports = {
 		'^.+\\.[jt]sx?$': '<rootDir>/test/unit/scripts/babel-transformer.js',
 	},
 	transformIgnorePatterns: [
-		'/node_modules/(?!(docker-compose|yaml)/)',
+		'/node_modules/(?!(docker-compose|yaml|preact|@preact|deepsignal)/)',
 		'\\.pnp\\.[^\\/]+$',
 	],
 	snapshotSerializers: [
diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
index 0a4b8cef57446..899ee36ec9381 100644
--- a/tools/webpack/packages.js
+++ b/tools/webpack/packages.js
@@ -102,34 +102,6 @@ const exportDefaultPackages = [
 	'warning',
 ];
 
-const vendors = {
-	react: [
-		'react/umd/react.development.js',
-		'react/umd/react.production.min.js',
-	],
-	'react-dom': [
-		'react-dom/umd/react-dom.development.js',
-		'react-dom/umd/react-dom.production.min.js',
-	],
-	'inert-polyfill': [
-		'wicg-inert/dist/inert.js',
-		'wicg-inert/dist/inert.min.js',
-	],
-};
-const vendorsCopyConfig = Object.entries( vendors ).flatMap(
-	( [ key, [ devFilename, prodFilename ] ] ) => {
-		return [
-			{
-				from: `node_modules/${ devFilename }`,
-				to: `build/vendors/${ key }.js`,
-			},
-			{
-				from: `node_modules/${ prodFilename }`,
-				to: `build/vendors/${ key }.min.js`,
-			},
-		];
-	}
-);
 module.exports = {
 	...baseConfig,
 	name: 'packages',
@@ -176,8 +148,7 @@ module.exports = {
 					transform: stylesTransform,
 					noErrorOnMissing: true,
 				} ) )
-				.concat( bundledPackagesPhpConfig )
-				.concat( vendorsCopyConfig ),
+				.concat( bundledPackagesPhpConfig ),
 		} ),
 		new MomentTimezoneDataPlugin( {
 			startYear: 2000,
diff --git a/tools/webpack/shared.js b/tools/webpack/shared.js
index debd3fc93f6f6..f30d3a830f3eb 100644
--- a/tools/webpack/shared.js
+++ b/tools/webpack/shared.js
@@ -64,13 +64,15 @@ const plugins = [
 	process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(),
 	new DefinePlugin( {
 		// Inject the `IS_GUTENBERG_PLUGIN` global, used for feature flagging.
-		'process.env.IS_GUTENBERG_PLUGIN':
-			process.env.npm_package_config_IS_GUTENBERG_PLUGIN,
+		'globalThis.IS_GUTENBERG_PLUGIN': JSON.stringify(
+			Boolean( process.env.npm_package_config_IS_GUTENBERG_PLUGIN )
+		),
 		// Inject the `IS_WORDPRESS_CORE` global, used for feature flagging.
-		'process.env.IS_WORDPRESS_CORE':
-			process.env.npm_package_config_IS_WORDPRESS_CORE,
+		'globalThis.IS_WORDPRESS_CORE': JSON.stringify(
+			Boolean( process.env.npm_package_config_IS_WORDPRESS_CORE )
+		),
 		// Inject the `SCRIPT_DEBUG` global, used for dev versions of JavaScript.
-		SCRIPT_DEBUG: mode === 'development',
+		'globalThis.SCRIPT_DEBUG': JSON.stringify( mode === 'development' ),
 	} ),
 	mode === 'production' && new ReadableJsAssetsWebpackPlugin(),
 ];
diff --git a/tools/webpack/vendors.js b/tools/webpack/vendors.js
new file mode 100644
index 0000000000000..d21c029f6c397
--- /dev/null
+++ b/tools/webpack/vendors.js
@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+const { join } = require( 'path' );
+
+const importedVendors = {
+	react: { import: 'react', global: 'React' },
+	'react-dom': { import: 'react-dom', global: 'ReactDOM' },
+	'react-jsx-runtime': {
+		import: 'react/jsx-runtime',
+		global: 'ReactJSXRuntime',
+	},
+};
+
+module.exports = [
+	...Object.entries( importedVendors ).flatMap( ( [ name, config ] ) => {
+		return [ 'production', 'development' ].map( ( mode ) => {
+			return {
+				mode,
+				target: 'browserslist',
+				output: {
+					filename:
+						mode === 'development'
+							? `vendors/[name].js`
+							: `vendors/[name].min.js`,
+					path: join( __dirname, '..', '..', 'build' ),
+				},
+				entry: {
+					[ name ]: {
+						import: config.import,
+						library: {
+							name: config.global,
+							type: 'window',
+						},
+					},
+				},
+
+				externals:
+					name === 'react'
+						? {}
+						: {
+								react: 'React',
+						  },
+			};
+		} );
+	} ),
+];
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 1b30522ee5236..18388b7f71854 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -7,7 +7,7 @@
 		"jsx": "preserve",
 		"target": "esnext",
 		"module": "esnext",
-		"lib": [ "dom", "esnext" ],
+		"lib": [ "DOM", "DOM.Iterable", "ESNext" ],
 		"declaration": true,
 		"declarationMap": true,
 		"composite": true,
diff --git a/typings/gutenberg-env/index.d.ts b/typings/gutenberg-env/index.d.ts
index ecf60a7ca094f..c2bc71ae435ee 100644
--- a/typings/gutenberg-env/index.d.ts
+++ b/typings/gutenberg-env/index.d.ts
@@ -1,11 +1,25 @@
-interface Environment {
-	NODE_ENV: unknown;
-	IS_GUTENBERG_PLUGIN?: boolean;
-	IS_WORDPRESS_CORE?: boolean;
+declare namespace NodeJS {
+	interface ProcessEnv {
+		readonly NODE_ENV?: 'production' | 'development' | 'test';
+	}
+	interface Process {
+		env: NodeJS.ProcessEnv;
+	}
 }
-interface Process {
-	env: Environment;
-}
-declare var process: Process;
 
-declare var SCRIPT_DEBUG: boolean;
+declare var process: NodeJS.Process;
+
+/**
+ * Whether the code is running in WordPress with SCRIPT_DEBUG flag.
+ */
+declare var SCRIPT_DEBUG: undefined | boolean;
+
+/**
+ * Whether code is running within the Gutenberg plugin.
+ *
+ * When the codebase is built for the plugin, this variable will be set to `true`.
+ * When building for WordPress Core, it will be set to `false` or `undefined`.
+ */
+declare var IS_GUTENBERG_PLUGIN: undefined | boolean;
+
+declare var IS_WORDPRESS_CORE: undefined | boolean;
diff --git a/webpack.config.js b/webpack.config.js
index 8558707f4bc9f..45b22cc5354dc 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,10 +5,12 @@ const blocksConfig = require( './tools/webpack/blocks' );
 const developmentConfigs = require( './tools/webpack/development' );
 const interactivity = require( './tools/webpack/interactivity' );
 const packagesConfig = require( './tools/webpack/packages' );
+const vendorsConfig = require( './tools/webpack/vendors' );
 
 module.exports = [
 	...blocksConfig,
 	interactivity,
 	packagesConfig,
 	...developmentConfigs,
+	...vendorsConfig,
 ];